+
+.wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
+ display: block
+ margin-bottom: 1%
+ clear: both
+ font-size: 80%
+ text-align: right
+ .wfpl_i
+ display: block
+ width: 100%
+ background-size: 100% auto
+ background-repeat: no-repeat
+ background-position: 50% top
+ margin-bottom: 3px // padding above caption
+ // clip line with (which is there so ckeditor doesn't delete this)
+ height: 0
+ overflow: hidden
+.wfpl_li, .wfpl_ci, .wfpl_ri
+ width: unit(image_float_size * 100, '%') // when window is large
+.wfpl_li
+ float: left
+ margin-right: image_float_margin // this can be a percent right?
+.wfpl_ci, .wfpl_fi
+ margin-left: auto
+ margin-right: auto
+.wfpl_ri
+ float: right
+ margin-left: image_float_margin // this can be a percent right?
+.wfpl_thumb // note: does not contain a .wfpl_i
+ display: inline-block
+ width: 70px
+ height: 70px
+ background-size: contain
+ background-position: 50% 50%
+ background-repeat: no-repeat
+.wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi, .wfpl_thumb
+ max-width: 100%
+
+
+// output css from column calculations
+for selector, css in columns.css
+ body > {selector}
+ {css}
+@media screen and (max-width: (columns.width))
+ // output responsive css from column calculations
+ for selector, css in columns.responsive_css
+ body > {selector}
+ {css}
+
+ // as big as it can be
+ body > .centerer
+ width: auto
+
+ // make sure that borders (which won't scale) and rounding errors don't
+ // break the layout
+ body > .centerer.full > .main,
+ body > .centerer.with_sidebar > .sidebar.plain,
+ body > .centerer.with_sidebar > .sidebar.bordered
+ margin-right: -10px
+
+// big left/right images
+for selector, css in columns.css
+ if columns['widths'][selector] > runaround_max
+ body > {selector}
+ col_max_width = columns['widths'][selector]
+ col_min_width = col_max_width / columns.width * single_column_max
+ .wfpl_li, .wfpl_ri
+ width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
+ .wfpl_ci
+ width: col_max_width * image_float_size
+
+// mixin for making left/right images behave as centered
+wfpl_li_ri_to_ci(selector, width)
+ {selector}
+ .wfpl_li, .wfpl_ci, .wfpl_ri
+ float: none
+ width: width
+ margin-right: auto
+ margin-left: auto
+
+// convert left/right to centered when columns width <= runaround_max
+for selector, css in columns.css
+ if columns['widths'][selector] > runaround_max
+ // calculate screen width when column width is runaround_max
+ screen_rmax = columns['widths'][selector] / columns.width * runaround_max
+ @media screen and (max-width: (screen_rmax))
+ wfpl_li_ri_to_ci(selector, columns['widths'][selector] * image_float_size)
+ else
+ // no @media, because these colums are always narrower than runaround_max
+ wfpl_li_ri_to_ci(selector, columns['widths'][selector] * narrow_column_ifs)
+
+// switch to 1-column layout
+@media screen and (max-width: (single_column_max))
+ for selector, css in columns.css
+ body > {selector}
+ if selector == '.centerer'
+ margin-top: 0
+ else if selector in hide_in_one_column_mode
+ display: none
+ else
+ border: none
+ float: none
+ width: auto
+ margin: 0
+ padding: 0
+ margin-top: columns['responsive_css']['.centerer']['margin']
+
+#mobile_menu_button
+ display: none;
+#mobile_menu_check
+ display: none;
+@media screen and (max-width: (mobile_menu_width))
+ #mobile_menu_check:not(:checked) + div
+ display: none
+ #mobile_menu_check:checked + div
+ display: block
+ position: relative
+ > ul
+ z-index: 1000
+ background: white
+ background: rgba(255, 255, 255, 0.95)
+ display: block
+ position: absolute
+ top: 100%
+ width: 96%
+ left: 2%
+ margin: 0
+ padding: 0
+ border-bottom-left-radius: 4px
+ border-bottom-right-radius: 4px
+ box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
+ li
+ padding: 15px
+ & + li
+ padding-top: 0
+ a
+ font-size: 18px
+ white-space: nowrap
+
+ // undo space_evenly stuff:
+ &:before, &:after
+ display: none
+ content: none
+ margin: 0
+ padding: 0
+ > *
+ position: static
+ top: 0
+
+ body > .centerer > .nav ul > li, #mobile_menu_button
+ display: block
+ padding: 3px 10px 4px 17px
+ font-size: font_size_large
+#admin_images_body .th_toggle_buttons
+ font-weight: normal
+ color: #777
+ space_evenly()