+.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}
+ if columns['widths'][selector] < runaround_max
+ .wfpl_li, .wfpl_ri
+ width: narrow_col_lr_width
+ .wfpl_ci
+ width: narrow_col_ci_width
+
+// center when big
+body > .centerer
+ margin-left: auto
+ margin-right: auto
+
+// small enough that things are scaling, big enough that we have all columns
+@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
+
+ // 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 = runaround_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
+
+// switch to 1-column layout when .with_sidebar>.main wouldn't have space for left/right images
+single_column_max = columns.width / columns['widths']['.centerer.with_sidebar > .main'] * runaround_max
+body
+ color: #001
+ background-position: columns.width columns['widths']['.centerer.with_sidebar > .main']
+ background-position: runaround_max single_column_max
+@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-left: 0
+ margin-right: 0
+ padding-left: 0
+ padding-right: 0
+ margin-top: columns['responsive_css']['.centerer']['margin']
+
+ // make image sizing act like it's the "full"/only column
+ col_max_width = columns['widths']['.centerer.full > .main']
+ col_min_width = runaround_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)
+ body > {selector}
+ .wfpl_li, .wfpl_ci, .wfpl_ri
+ float: none
+ width: width
+ margin-right: auto
+ margin-left: auto
+
+// convert left/right images 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.width / columns['widths']['.centerer.full > .main'] * runaround_max
+ @media screen and (max-width: (screen_rmax))
+ wfpl_li_ri_to_ci(selector, columns['widths'][selector] * image_float_size)