<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
} // Exit if accessed directly
// This file generates the CSS overrides from the admin interface. It will be included only
// when needed.
// _() - 12/11/14

// define default values

define( 'ABSOLUTE_WVR_DEF_BORDER_COLOR', '#222' );
define( 'ABSOLUTE_WVR_DEF_BORDER_WIDTH', 1 );
define( 'ABSOLUTE_WVR_DEF_BORDER_STYLE', 'solid' );
define( 'ABSOLUTE_WVR_DEF_CORNER_RADIUS', 8 );

define( 'ABSOLUTE_WVR_DEF_TITLE_MX', 7 );
define( 'ABSOLUTE_WVR_DEF_TITLE_MY', 0 );

define( 'ABSOLUTE_WVR_DEF_TAG_MX', 10 );
define( 'ABSOLUTE_WVR_DEF_TAG_MY', 0 ); // new tagline margins


// ----------------------------------------------------------------------------------------------------------


/**
 * Generate override CSS rules based on options
 *
 * This outputs the CSS overrides. It will output to a file pointer, so it can write to a .css file saved
 * in the user's upload directory - just like the saved style .wvx files. It is included via a standard
 * css include. It needs to be loaded only for the admin page.
 *
 *
 * @param mixed: PHP file handle, or string for direct output
 */

function aweaver_output_style( $sout ) {
	/* This outputs the CSS overrides. It will output to a file pointer, so it can write to a .css file saved
	  in the user's upload directory - just like the saved style .wvr files. It is included via a standard
	  css include. It needs to be loaded only for the admin page.
	*/
	global $wvrx_css_plus;
	$wvrx_css_plus = '';


	aweaver_f_write( $sout, sprintf( "/* Absolute Weaver styles - Version %s */\n", aweaver_getopt( 'style_version' ) ) );    // opening line


	$themew = aweaver_getopt_default( 'theme_width_int', ABSOLUTE_WVR_THEME_WIDTH );        // this is set only here
	if ( aweaver_getopt( 'wrapper_fullwidth' ) ) {
		$themew = 10000;
	}

	// Behavior changed in V 4.0 - Need to generate different style depending on fullwidth

	if ( aweaver_getopt( 'site_layout' ) == 'fullwidth' ) {
		// Absolute Weaver 4 creates fullwidth with

		aweaver_f_write( $sout, sprintf( ".block-inside{max-width:%dpx;margin-left:auto;margin-right:auto;}\n", $themew ) );
		aweaver_f_write( $sout, ".page #content{overflow:visible !important;}.single #content{overflow:visible !important;}.blog #content {overflow:hidden !important;}\n" );

	} else {
		aweaver_f_write( $sout, sprintf( "#wrapper{max-width:%dpx;}\n", $themew ) );
	}// override for full width


// =========================== FIXUPS: FULL WIDTH THEME ===============================
// the full width options will clear and set appropriate stretch and expand options


	$full = aweaver_getopt( 'site_layout' );


	//*---*************************************************************************************************************

	if ( $full == 'fullwidth' || $full == 'stretched' ) {            // okay, we have a value to manipulate
		// all the extend/expand options need to be cleared to start;
		$clear = array(
			'wrapper_fullwidth',
			'expand_header',
			'expand_site_title',
			'expand_m_primary',
			'expand_container',
			'expand_post',
			'expand_footer',
			'expand_footer_sb',
			'expand_site-ig-wrap',
			'container_extend_width',
			'header_extend_width',
			'm_primary_extend_width',
			'infobar_extend_width',
			'post_extend_width',
			'footer_extend_width',
			'footer_sb_extend_width',
			'footer_html_extend_width',
			'wrapper_border',
		);
		// allow 'expand_infobar' as an option to leave set
		foreach ( $clear as $opt )            // clear relevant options
		{
			aweaver_setopt( $opt, false );
		}

		switch ( $full ) {

			case 'fullwidth':
				aweaver_setopt( 'm_primary_extend_width', true );
				aweaver_setopt( 'm_primary_align', 'center' );
				break;

			case 'stretched':
				aweaver_setopt( 'expand_header', true );
				aweaver_setopt( 'expand_footer', true );
				aweaver_setopt( 'm_primary_align', 'center' );                // center the menus
				break;

			default:
				break;
		}
	}


// =========================== FIXUPs: FIXEDTOP with FULL ALIGNMENTS ===============================
// alignwide + fix to top are incompatible for header_sb_align, header_html_align, m_primary_align
// change them to full.


	if ( aweaver_getopt( 'header_sb_fixedtop' ) ) {
		$align = aweaver_getopt( 'header_sb_align' );
		if ( strpos( 'alignwide', $align ) !== false )                        // switch alignwide to alignfull
		{
			aweaver_setopt( 'header_sb_fixedtop', str_replace( 'alignwide', 'alignfull', $align ) );
		}
	}

	foreach ( array( 'm_primary' ) as $area ) {
		$fixed = aweaver_getopt( $area . '_fixedtop' );
		if ( strpos( $fixed, 'fix' ) != false ) {
			$align = aweaver_getopt( $area . '_align' );
			if ( strpos( 'alignwide', $align ) !== false )                        // switch alignwide to alignfull
			{
				aweaver_setopt( $area . '_align', str_replace( 'alignwide', 'alignfull', $align ) );
			}
		}
	}

// =========================== LINKS ===============================
//	Important. Links must come before any other rules that might define a tag - such as the menu bars, so just
//	put them here, near the top.


	aweaver_put_link( $sout, 'link', 'a, .wrapper a', 'a:hover, .wrapper a:hover' );
	aweaver_put_link( $sout, 'contentlink', '.content a', '.content a:hover' );
	aweaver_put_link( $sout, 'ilink', '.wrapper .entry-meta a, .wrapper .entry-utility a',
		'.wrapper .entry-meta a:hover,.wrapper .entry-utility a:hover' );
	aweaver_put_link( $sout, 'wlink', '.wrapper .widget a', '.wrapper .widget a:hover' );
	aweaver_put_link( $sout, 'ibarlink', '#infobar a', '#infobar a:hover' );
	aweaver_put_link( $sout, 'footerlink', '.colophon a', '.colophon a:hover' );


// ========================= GENERAL APPEARANCE ===============================

	$b_c   = aweaver_getopt_default( 'border_color', ABSOLUTE_WVR_DEF_BORDER_COLOR );    //+
	$b_w   = aweaver_getopt_default( 'border_width_int', ABSOLUTE_WVR_DEF_BORDER_WIDTH );
	$b_s   = aweaver_getopt_default( 'border_style', ABSOLUTE_WVR_DEF_BORDER_STYLE );
	$menus = array(              /* can't use multiple selectors here! */
	                             'm_primary' => '.menu-primary',
	);

	if ( $b_c != '#222' || $b_w != 1 || $b_s != 'solid' ) {
		aweaver_f_write( $sout, sprintf( ".border {border:%dpx %s %s;}.border-bottom{border-bottom:%dpx %s %s;}\n", $b_w, $b_s, $b_c, $b_w, $b_s, $b_c ) );
	}
	foreach ( $menus as $id => $tag ) {
		if ( aweaver_getopt( "{$id}_sub_border" ) ) {
			aweaver_f_write( $sout, sprintf( "@media (min-width:768px) { {$tag} ul ul{border:%dpx %s %s;} }\n", $b_w, $b_s, $b_c ) );
		}
	}


	/*  rounded_corners  */
	$r  = 8;
	$rm = 6;    // rm for comments section

	$r = aweaver_getopt_default( 'rounded_corners_radius', ABSOLUTE_WVR_DEF_CORNER_RADIUS );
	if ( $r != 8 ) {
		if ( $r >= 8 ) {
			$rm = ( int ) ( .75 * $r );
		} else {
			$rm = $r;
		}

		// It's time: no -moz or -webkitv ( Changed: 3.1.10 )

		$rounded = '.rounded,.rounded-all,.rounded-custom{border-radius:8px !important;}
.rounded-top{border-top-left-radius:8px; border-top-right-radius: 8px;}
.rounded-bottom {border-bottom-left-radius:8px; border-bottom-right-radius:8px;}
.rounded-left{border-top-left-radius:8px;border-bottom-left-radius:8px;}
.rounded-right{border-top-right-radius:8px;border-bottom-right-radius:8px;}';

		aweaver_f_write( $sout, str_replace( '8', $rm, $rounded ) . "\n" );
	}


	foreach ( $menus as $id => $tag ) {
		if ( aweaver_getopt( "{$id}_sub_rounded" ) ) {
			aweaver_f_write( $sout, '@media (min-width:768px) { ' );
			// 3 kinds of rounding: whole box + hover, top sub-item, bottom sub-item
			$round_sub = str_replace( '8', $r, "{border-radius:8px;z-index:2001;" );
			$menu      = "{$tag} ul.sub-menu, {$tag} ul.children";

			$pad = ( int ) ( $r - ( $r * .25 ) );    // pad it to avoid anchor bg from overwriting rounding
			$bg  = aweaver_getopt( "{$id}_sub_bgcolor" );
			if ( $bg == '' ) {
				$bg = 'transparent';
			}

			$round_end = "padding-top:{$pad}px;padding-bottom:{$pad}px;background-color:{$bg};}";
			aweaver_f_write( $sout, $menu . $round_sub . $round_end . "} }\n" );
		}
	}


// =========================== HEADER OPTIONS ===============================

	aweaver_css_style_val( $sout, '#site-title,.site-title', '{max-width:%.5f%%;}',
		'site_title_max_w' );

	aweaver_css_style_val( $sout, '#site-tagline,.site-title', '{max-width:%.5f%%;}',
		'tagline_max_w' );

	/* Site Title/Description

		Site Title' => 'title_color'
		Title Position => 'site_title_position_xy'
		Move Title over Header Image => 'title_over_image'

		Site Description => 'desc_color'
		Description Position => 'tagline_xy'

		Header Extra HTML => 'header_html'
	*/


	$tx = aweaver_getopt_default( 'site_title_position_xy_X', ABSOLUTE_WVR_DEF_TITLE_MX );
	$ty = aweaver_getopt_default( 'site_title_position_xy_Y', ABSOLUTE_WVR_DEF_TITLE_MY ); // new title margins

	if ( $tx != 7 || $ty != 0 ) {
		if ( is_rtl() ) {
			aweaver_f_write( $sout, sprintf( "#site-title,.site-title{margin-right:%.5f%% !important;margin-top:%.5f%% !important;}\n", $tx, $ty ) );
		} else {
			aweaver_f_write( $sout, sprintf( "#site-title,.site-title{margin-left:%.5f%% !important;margin-top:%.5f%% !important;}\n", $tx, $ty ) );
		}
	}

	$tx = aweaver_getopt_default( 'tagline_xy_X', ABSOLUTE_WVR_DEF_TAG_MX );
	$ty = aweaver_getopt_default( 'tagline_xy_Y', ABSOLUTE_WVR_DEF_TAG_MY ); // new tagline margins

	if ( $tx != 10 || $ty != 0 ) {
		if ( is_rtl() ) {
			aweaver_f_write( $sout, sprintf( "#site-tagline{ margin-right:%.5f%% !important; margin-top:%.5f%% !important;}\n", $tx, $ty ) );
		} else {
			aweaver_f_write( $sout, sprintf( "#site-tagline{ margin-left:%.5f%% !important; margin-top:%.5f%% !important;}\n", $tx, $ty ) );
		}
	}

	$tx = aweaver_getopt( 'title_tagline_xy_T' );
	$ty = aweaver_getopt( 'title_tagline_xy_B' ); // title tagline padding

	if ( $tx || $ty ) {
		aweaver_f_write( $sout, sprintf( "#title-tagline{ padding-top:%dpx;padding-bottom:%dpx;}\n", $tx, $ty ) );
	}


	$align = aweaver_getopt_default( 'header_image_align', 'float-left' );   // alignment

	switch ( $align ) {
		case 'align-center':
			aweaver_f_write( $sout, '#branding #header-image img{margin-left:auto;margin-right:auto;} /* ' . $align . '*/' );
			aweaver_f_write( $sout, '#header.header-as-bg-parallax,#header.header-as-bg-responsive,#header.header-as-bg{background-position-x:center;}' );
			break;
		case 'float-left':
			aweaver_f_write( $sout, '#branding #header-image img{float: left;} /* ' . $align . '*/' );
			break;
		case 'float-right':
			aweaver_f_write( $sout, '#branding #header-image img{margin-left:auto;margin-right:0;} /* ' . $align . '*/' );
			aweaver_f_write( $sout, '#header.header-as-bg-parallax,#header.header-as-bg-responsive,#header.header-as-bg{background-position-x:right;}' );
			break;
		case 'alignnone':
		case 'alignwide':
		case 'alignfull':
			aweaver_f_write( $sout, '#branding #header-image img{float:none;} /* ' . $align . '*/' );
			break;

		default:            // default is left and already is in style sheet.
			break;
	}

	if ( ( $val = aweaver_getopt( 'header_min_height' ) ) ) {
		aweaver_f_write( $sout,
			"#header{min-height: {$val}px;}" );
	}

	if ( aweaver_getopt( 'header_actual_size' ) ) {
		aweaver_f_write( $sout,
			'#branding #header-image img,html.ie8 #branding #header-image img {width:auto;}' );
	}

	if ( ( $val = aweaver_getopt( 'header_image_max_width_dec' ) ) ) {
		aweaver_f_write( $sout, sprintf( "#branding #header-image img{max-width:%.5f%%;}\n", $val ) );
		aweaver_f_write( $sout, sprintf( "html.ie8 #branding #header-image img{width:%.5f%%;}\n", $val ) );
	}

	if ( ( $align = aweaver_getopt_default( 'header_html_align', 'float-left' ) ) == 'center' ) {
		//$hwidth = aweaver_getopt_default( 'header_html_width_int', '100' );
		//$lm = ( 100.0 - $hwidth ) / 2.0;
		//aweaver_f_write( $sout, sprintf( "#header-html {margin-left:%.5f%%;}\n",$lm ) );
		aweaver_f_write( $sout, "#header-html {display:block !important;}\n" );
	}

	if ( aweaver_getopt_default( 'header_html_center_content' ) ) {
		aweaver_f_write( $sout, "#header-html {text-align:center;}\n" );
	}


	if ( aweaver_getopt_default( 'footer_html_center_content' ) ) {
		aweaver_f_write( $sout, "#footer-html {text-align:center;}\n" );
	}

	$ratio = aweaver_getopt_default( 'header_video_aspect', '16:9' );

	if ( $ratio != '16:9' ) {
		$ratio = explode( ':', $ratio );
		if ( $ratio[0] ) {
			$r_pc = ( $ratio[1] / $ratio[0] ) * 100.0;
		} else {
			$r_pc = 56.25;
		}
		aweaver_f_write( $sout, sprintf( ".has-header-video .header-image .wp-custom-header{padding-bottom:%.5f%%;}\n", $r_pc ) );
	}


// =========================== MENU OPTIONS ===============================
	/*
	text_color = 0.213 * this.rgb[0] +
			0.715 * this.rgb[1] +
			0.072 * this.rgb[2]
			< 0.5 ? '#FFF' : '#000';
	*/


	$cur_page = aweaver_getopt( 'menubar_curpage_noancestors' )
		? '.weaverx-theme-menu .current_page_item > a,.weaverx-theme-menu .current-menu-item > a,.weaverx-theme-menu .current-cat > a'

		: '.weaverx-theme-menu .current_page_item > a,.weaverx-theme-menu .current-menu-item > a,.weaverx-theme-menu .current-cat > a,.weaverx-theme-menu .current_page_ancestor > a,' .
		  '.weaverx-theme-menu .current-category-ancestor > a,.weaverx-theme-menu .current-menu-ancestor > a,.weaverx-theme-menu .current-menu-parent > a,.weaverx-theme-menu .current-category-parent > a';

	aweaver_put_color( $sout, 'menubar_curpage_color', $cur_page, true );    // menubar_curpage_color
	aweaver_put_bgcolor( $sout, 'menubar_curpage_bgcolor', $cur_page, true );

	aweaver_put_rule_if_checked( $sout, 'menubar_curpage_em', $cur_page . '{font-style:italic}' );    // menubar_curpage_em
	aweaver_put_rule_if_checked( $sout, 'menubar_curpage_bold', $cur_page . '{font-weight:bold}' );


// =========================== CONTENT AREAS ===============================

	// Images

	$img_tag = '.container img, .colophon img';

	aweaver_css_style_val( $sout, $img_tag, '{padding:%dpx;}',
		'media_lib_border_int' );

	$img_w = aweaver_getopt( 'media_lib_border_int' );
	if ( $img_w > 3 ) {
		$half             = $img_w / 2 + 1;
		$small_border_tag = '.container .gallery-icon img,.container .gallery-thumb img,#content img.gallery-thumb,#content img.avatar';
		aweaver_f_write( $sout, sprintf( "{$small_border_tag}{padding:{$half}px;}\n" ) ); // make the thumbs smaller
	}


	if ( aweaver_getopt_checked( 'show_img_shadows' ) ) {
		aweaver_f_write( $sout, $img_tag .
		                        '{box-shadow: 0 0 2px 1px rgba( 0,0,0,0.25 );}' . "\n" );
	}

	aweaver_put_bgcolor( $sout, 'media_lib_border_color', $img_tag );


	$val = aweaver_getopt( 'contentlist_bullet' );
	if ( $val != '' && $val != 'disc' ) {
		aweaver_f_write( $sout, sprintf( "#content ul {list-style-type:%s;}\n", $val ) );
	}
	aweaver_css_style_val( $sout, '.entry-summary,.entry-content', '{padding-top:%.5fem;}',
		'space_after_title_dec' );

	aweaver_css_style_val( $sout, '#content ul,#content ol', '{margin-bottom:%.5fem;}',
		'content_p_list_dec' );

	aweaver_css_style_val( $sout, '#content ul,#content ol, #content p', '{margin-bottom:%.5fem;}',
		'content_p_list_dec' );

	aweaver_css_style_val( $sout, '#content *[class^="wp-block-"]', '{margin-top:%.5fem;}',
		'content_block_margin_T' );
	aweaver_css_style_val( $sout, '#content *[class^="wp-block-"]', '{margin-bottom:%.5fem;}',
		'content_block_margin_B' );


	if ( aweaver_getopt( 'hyphenate' ) ) {
		aweaver_f_write( $sout, '#content{hyphens:auto;}' );
	}

	$fi_min_height = array(
		'page_min_height'      => '.container-page.parallax',
		'post_blog_min_height' => '.post-area.post-fi-post-bg-parallax-full,.post-area.post-fi-post-bg-parallax',
		'post_min_height'      => '.container-single.post-bg-parallax-full,.container-single.post-bg-parallax',
	);

	foreach ( $fi_min_height as $name => $selector ) {
		if ( aweaver_getopt( $name ) ) {
			$val = aweaver_getopt( $name );
			aweaver_f_write( $sout, "$selector{min-height:{$val}px;}\n" );
		}
	}


	/* Comments */
	aweaver_put_rule_if_checked( $sout, 'form_allowed_tags', '#commentform .form-allowed-tags {display:block;}' );

	$b_c = aweaver_getopt( 'border_color' );    //
	if ( ! $b_c ) {
		$b_c = '#222';
	}
	$b_w = aweaver_getopt( 'border_width_int' ); //
	if ( ! $b_w ) {
		$b_w = 1;
	}
	aweaver_put_rule_if_checked( $sout, 'show_comment_borders', ".commentlist li.comment,#respond,.commentlist li.comment .comment-author img.avatar,.commentlist .comment.bypostauthor{border:{$b_w}px solid $b_c;}.commentlist li.comment .comment-meta{border-bottom:1px solid $b_c;}" );


	aweaver_put_rule_if_checked( $sout, 'hide_comment_bubble', '#comments-title h3{background-image:none;padding-left:0px;}' );
	aweaver_put_rule_if_checked( $sout, 'hide_comment_hr', 'hr.comments-hr {display:none;}' );

	aweaver_put_color( $sout, 'comment_headings_color', '#comments-title h3, #comments-title h4, #respond h3' );
	aweaver_put_bgcolor( $sout, 'comment_content_bgcolor', '.commentlist li.comment, #respond' );
	aweaver_put_bgcolor( $sout, 'comment_submit_bgcolor', '#respond input#submit' );


	/*  aweaver_tables  */
	$table = aweaver_getopt( 'aweaver_tables' );

	if ( $table == 'wide' ) {    // make backward compatible with 1.4 and before when Twenty Ten was default
		aweaver_f_write( $sout, sprintf( "#content table {border: 1px solid #e7e7e7;margin: 0 -1px 24px 0;text-align: left;width: 100%%;}
#content tr th, #content thead th {color: #888;font-size: 12px;font-weight: bold;line-height: 18px;padding: 9px 24px;}
#content tr td {border-style:none; border-top: 1px solid #e7e7e7; padding: 6px 24px;}
#content tr.odd td {background: rgba( 0,0,0,0.1 );}\n" ) );
		//aweaver_f_write( $sout,"#content tr.odd td{background:transparent;}\n" );
	} elseif ( $table == 'bold' ) {
		aweaver_f_write( $sout, sprintf( "#content table {border: 2px solid #888;}
#content tr th, #content thead th {font-weight: bold;}
#content tr td {border: 1px solid #888;}\n" ) );
	} elseif ( $table == 'noborders' ) {
		aweaver_f_write( $sout, sprintf( "#content table {border-style:none;}
#content tr th, #content thead th {font-weight: bold;border-bottom: 1px solid #888;background-color:transparent;}
#content tr td {border-style:none;}table,td,th{border:none}\n" ) );
	} elseif ( $table == 'fullwidth' ) {
		aweaver_f_write( $sout, sprintf( "#content table {width:100%%;}
#content tr th, #content thead th {font-weight:bold;}\n" ) );
	} elseif ( $table == 'plain' ) {
		aweaver_f_write( $sout, sprintf(
			"#content table {border: 1px solid #888;text-align:left;margin: 0 0 0 0;width:auto;}
#content tr th, #content thead th {color: inherit;background:none;font-weight:normal;line-height:normal;padding:4px;}
#content tr td {border: 1px solid #888; padding:4px;}\n" ) );
	}


	/*  caption_color  */
	aweaver_put_color( $sout, 'caption_color', '.wp-caption p.wp-caption-text, #content .gallery .gallery-caption,.entry-attachment .entry-caption, #content figure figcaption' );


// =========================== POST SPECIFIC AREAS ===============================

	aweaver_put_rule_if_checked( $sout, 'show_comments_closed', '.nocomments {display:block;}' );

	// single/post navigation links

	aweaver_put_rule_if_checked( $sout, 'nav_show_first', '#nav-above{display:block;}' ); // put this one first, so hide can override
	aweaver_put_rule_if_checked( $sout, 'nav_hide_above', '#nav-above,.paged #nav-above{display:none;margin:0;}' );
	aweaver_put_rule_if_checked( $sout, 'nav_hide_below', '#nav-below{display:none;margin:0;}' );

	if ( aweaver_getopt( 'single_nav_style' ) == 'hide' || aweaver_getopt_checked( 'single_nav_hide_above' ) ) {
		aweaver_f_write( $sout, ".single #nav-above{display:none;margin:0;}\n" );
	}
	if ( aweaver_getopt( 'single_nav_style' ) == 'hide' || aweaver_getopt_checked( 'single_nav_hide_below' ) ) {
		aweaver_f_write( $sout, ".single #nav-below{display:none;margin:0;}\n" );
	}
	$nav = aweaver_getopt( 'nav_style' );    // paged can take more than 50%
	if ( $nav == 'paged_left' ) {
		aweaver_f_write( $sout, ".nav-previous {width:95%;}\n" );
	}
	if ( $nav == 'paged_right' ) {
		aweaver_f_write( $sout, ".nav-next {width:95%;}\n" );
	}


	aweaver_put_color( $sout, 'post_icons_color',
		'.entry-meta-gicons .entry-date:before,.entry-meta-gicons .by-author:before,.entry-meta-gicons .cat-links:before,.entry-meta-gicons .tag-links:before,.entry-meta-gicons .comments-link:before,.entry-meta-gicons .permalink-icon:before' );

	aweaver_put_rule_if_checked( $sout, 'post_hide_single_author', '.single-author .entry-meta .by-author {display:none;}' );

	if ( ( $val = aweaver_getopt_default( 'post_avatar_int', 28 ) ) != 28 ) {
		aweaver_f_write( $sout, '.post-avatar img {max-width:' . $val . "px;}\n" );
	}

// ============================== WIDGET AREAS ===================================


	$val = aweaver_getopt( 'widgetlist_bullet' );
	if ( $val != '' && $val != 'disc' ) {
		aweaver_f_write( $sout, sprintf( ".widget ul {list-style-type:%s;}\n", $val ) );
	}

// ================================== FONTS =====================================

	// 0.0625 assumes standard default font size of 16
	$font_size = aweaver_getopt( 'site_fontsize_int' );
	if ( $font_size ) {
		aweaver_f_write( $sout, sprintf( "body{font-size:%.5fem;}\n", $font_size * 0.0625 ) );
	}

	$font_size = aweaver_getopt( 'site_fontsize_tablet_int' );
	if ( $font_size ) {
		aweaver_f_write( $sout, sprintf( 'body.is-smalltablet{font-size:%.5fem;}', $font_size * 0.0625 ) );
	}

	$font_size = aweaver_getopt( 'site_fontsize_phone_int' );
	if ( $font_size ) {
		aweaver_f_write( $sout, sprintf( 'body.is-phone{font-size:%.5fem;}', $font_size * 0.0625 ) );
	}

	if ( ( $site_h = aweaver_getopt( 'site_line_height_dec' ) ) ) {
		aweaver_f_write( $sout, sprintf( 'body{line-height:%.5f;}', $site_h ) );
		aweaver_f_write( $sout, sprintf( '.widget-area{line-height:%.5f;}', ( $site_h * .85 ) ) );
	}

	$space = aweaver_getopt( 'font_letter_spacing_global_dec' );
	if ( $space && $space != 0 ) {
		aweaver_f_write( $sout, sprintf( "body{letter-spacing:%.5fem;}\n", $space ) );
	}

	$space = aweaver_getopt( 'font_letter_spacing_global_dec' );
	if ( $space && $space != 0 ) {
		aweaver_f_write( $sout, sprintf( "body{word-spacing:%.5fem;}\n", $space ) );
	}


// ============================== CUSTOM OPTIONS =================================

	if ( ( $val = aweaver_getopt( 'custom_fontsize_a' ) ) ) {        /* Plus version */
		aweaver_f_write( $sout, '.customA-font-size{font-size:' . $val . 'em;}' );
		aweaver_f_write( $sout, sprintf( '.customA-font-size-title{font-size:%.5fem;}', $val * 1.5 ) );
	}
	if ( ( $val = aweaver_getopt( 'custom_fontsize_b' ) ) ) {
		aweaver_f_write( $sout, '.customB-font-size{font-size:' . $val . 'em;}' );
		aweaver_f_write( $sout, sprintf( '.customB-font-size-title{font-size:%.5fem;}', $val * 1.5 ) );
	}

	if ( ( $val = aweaver_getopt( 'custom_shadow' ) ) ) {
		aweaver_f_write( $sout, '.shadow-custom ' . aweaver_fix_braces( $val ) );
	}


// ================================ AREAS ========================================

	aweaver_put_bgcolor( $sout, 'body_bgcolor', 'body' );   // start with the body colors/css+
	aweaver_put_bgcolor( $sout, 'title_tagline_bgcolor', '#title-tagline' );


	$menu_bars = array(
		'm_primary'     => '.menu-primary .wvrx-menu-container,.menu-primary .site-title-on-menu,.menu-primary .site-title-on-menu a',
		'm_primary_sub' => '.menu-primary .wvrx-menu ul li a',
	);

	$menu_links_bg = array(    // xxx_link_bgcolor
	                           'm_primary' => '.menu-primary .wvrx-menu > li > a',
	);

	$menu_links = array( // color, _hover_color, _hover_bg_color
	                     'm_primary'     => '.menu-primary .wvrx-menu > li > a',
	                     'm_primary_sub' => '.menu-primary .wvrx-menu ul li a',
	);

	$menu_detail = array(              /* can't use multiple selectors here! */
	                                   'm_primary' => '.menu-primary',
	);

// =Menus ------------------------------------------------------------

	foreach ( $menu_bars as $id => $tag ) {
		aweaver_put_bgcolor( $sout, $id . '_bgcolor', $tag );
		aweaver_put_color( $sout, $id . '_color', $tag );
	}

	foreach ( $menu_links_bg as $id => $tag ) {
		aweaver_put_bgcolor( $sout, $id . '_link_bgcolor', $tag );
	}

	foreach ( $menu_links as $id => $tag ) {
		aweaver_put_color( $sout, $id . '_color', $tag );
		aweaver_put_color( $sout, $id . '_hover_color', $tag . ':hover', true );
		if ( aweaver_getopt( 'm_retain_hover' ) && strpos( $id, '_sub' ) === false ) {
			$rule = str_replace( '> li', 'li:hover', $tag );
			aweaver_put_bgcolor( $sout, $id . '_hover_bgcolor', $rule, true );

		} else {
			aweaver_put_bgcolor( $sout, $id . '_hover_bgcolor', $tag . ':hover', true ); // important to override current item bg

		}
	}

	// menu logo height
	$h = aweaver_getopt( 'm_primary_logo_height_dec' );
	if ( $h && $h != 0 ) {
		aweaver_f_write( $sout, sprintf( '.menu-primary .custom-logo-on-menu img {height:%.5fem;}', $h ) );
	}
	$h = aweaver_getopt( 'header_logo_height_dec' );
	if ( $h && $h != 0 ) {
		//aweaver_f_write( $sout, sprintf( '#site-title img.site-title-logo{max-height:%.5fem;height:100%%;width:100%%;padding-right:1%%;}', $h ) );
		aweaver_f_write( $sout, sprintf( '#site-title img.site-title-logo {max-height:%dpx;}', $h ) );
	}


	foreach ( $menu_detail as $id => $tag ) {
		aweaver_put_color( $sout, $id . '_color', $tag . ' .menu-toggle-button' );

		aweaver_put_color( $sout, $id . '_html_color', $tag . ' .wvrx-menu-html' );              // Extra menu HTML Left/Right
		$val = aweaver_getopt( $id . '_html_margin_dec' );

		if ( $val ) {
			aweaver_f_write( $sout, sprintf( $tag . " .wvrx-menu-html{margin-top:%.5fem;}\n", $val ) );
		} else {
			$font_size = aweaver_getopt( $id . '_font_size' );    // generate new top margin based on font_size
			switch ( $font_size ) {
				case 'xxs-font-size':
					aweaver_f_write( $sout, $tag . " .wvrx-menu-html{margin-top:.375em;}\n" );
					break;
				case 'xs-font-size':
					aweaver_f_write( $sout, $tag . " .wvrx-menu-html{margin-top:.425em;}\n" );
					break;
				case 's-font-size':
					aweaver_f_write( $sout, $tag . " .wvrx-menu-html{margin-top:.5em;}\n" );
					break;
				case 'l-font-size':
					aweaver_f_write( $sout, $tag . " .wvrx-menu-html{margin-top:.425em;}\n" );
					break;
				case 'xl-font-size':
					aweaver_f_write( $sout, $tag . " .wvrx-menu-html{margin-top:.425em;}\n" );
					break;
				case 'xxl-font-size':
					aweaver_f_write( $sout, $tag . " .wvrx-menu-html{margin-top:.425em;}\n" );
					break;
				default:
					break;
			}
		}


		// padding
		$pad = aweaver_getopt( $id . '_menu_bar_pad_dec' );
		if ( $pad ) {
			aweaver_f_write( $sout, sprintf( "{$tag} .wvrx-menu-container{padding-top:%.5fem;padding-bottom:%.5fem;}\n", $pad, $pad ) );
		}


		$pad         = aweaver_getopt( $id . '_menu_pad_dec' );
		$dcolor      = aweaver_getopt( $id . '_dividers_color' );
		$rpad        = aweaver_getopt( $id . '_right_padding_dec' );
		$hide_arrows = aweaver_getopt( $id . '_hide_arrows' );

		aweaver_f_write( $sout, "@media( min-width:768px) {\n" );    // following are really .is-desktop. Note last align rule has closing }


		if ( $pad != '' ) {
			aweaver_f_write( $sout, sprintf( "{$tag} .wvrx-menu a{padding-top:%.5fem;padding-bottom:%.5fem;}\n", $pad, $pad ) );

			if ( $pad > 1.9 )       // arrows need adjustments - these are for Genericons
			{
				aweaver_f_write( $sout, sprintf( "{$tag} .menu-arrows .toggle-submenu:after{top:%.5fem;}\n", ( $pad + 1.2 ) ) );
			} elseif ( $pad > 0.6 ) {
				aweaver_f_write( $sout, sprintf( "{$tag} .menu-arrows .toggle-submenu:after{top:%.5fem;}\n", ( $pad + 0.75 ) ) );
			} elseif ( $pad < 0.6 ) {
				aweaver_f_write( $sout, sprintf( "{$tag} .menu-arrows .toggle-submenu:after{top:%.5fem;}\n", ( $pad + 0.5 ) ) );
			}
		}

		// dividers

		if ( $dcolor != '' ) {

			aweaver_f_write( $sout, "{$tag} .wvrx-menu a{border-right:1px solid {$dcolor};}\n" );
			aweaver_f_write( $sout, "{$tag} ul.wvrx-menu > li:first-child {border-left:1px solid {$dcolor};}\n" );
			// only desktop?
			aweaver_f_write( $sout, "{$tag} .wvrx-menu ul > li:first-child{border-top:1px solid {$dcolor};}\n" );
			aweaver_f_write( $sout, "{$tag} .wvrx-menu ul a {border-top:none;border-left:none;border-right:none;border-bottom:1px solid {$dcolor};}\n" );
		}

		// menu padding - ADD space to end of menu item

		if ( $rpad != '' ) {
			$rpad_arrow = $rpad + 1.5;
			$rpad_a     = $rpad + 0.75;
			aweaver_f_write( $sout, "{$tag} .wvrx-menu-container li a{padding-right:{$rpad_a}em;}\n" );
			aweaver_f_write( $sout, "{$tag} .menu-hover.menu-arrows .has-submenu > a{padding-right:{$rpad_arrow}em;}\n" );
			aweaver_f_write( $sout, "{$tag} .menu-arrows.menu-hover .toggle-submenu{margin-right:{$rpad}em;}\n" );
		}

		// menu margins

		$mtop = aweaver_getopt( $id . '_top_margin_dec' );
		$mbot = aweaver_getopt( $id . '_bottom_margin_dec' );
		if ( $mtop != '' ) {
			aweaver_f_write( $sout, "{$tag} .wvrx-menu-container{margin-top:{$mtop}px;}\n" );
		}


		if ( $mbot != '' ) {
			$align = aweaver_getopt( $id . '_align' );    // emit different  code depending on align
			if ( strstr( $align, '-fixed' ) === false )    // standard menu margin
			{
				aweaver_f_write( $sout, "{$tag} .wvrx-menu-container{margin-bottom:{$mbot}px;}\n" );
			}
		}


		// Menu Arrows

		if ( $hide_arrows ) {
			aweaver_f_write( $sout,
				"{$tag} .menu-arrows .toggle-submenu:after{content:'';display:none;}\n" );
//.is-deskotp {$tag} .wvrx-menu a span.sub-arrow:after{display:none;}\n" );
			if ( $rpad == '' ) {
				aweaver_f_write( $sout,
					"{$tag} .menu-hover.menu-arrows .has-submenu > a {padding-right:0.75em;}\n" );
			}
			aweaver_f_write( $sout,
				"{$tag} .wvrx-menu a span.sub-arrow:after{display:none;}\n" );
		}

		// special case - generate a .wvrx-menu text align for main menus to get rid of initial menu jumping
		$align = aweaver_getopt_default( "{$id}_align", 'left' );
		$align = str_replace( 'alignwide ', '', $align );
		$align = str_replace( 'alignfull ', '', $align );
		$lh    = '';
		if ( $align == 'center' )        // compensate for centered display:inline-block
		{
			$lh = 'line-height:0;';
		}

		aweaver_f_write( $sout, "{$tag} .wvrx-menu,{$tag} .wvrx-menu-container{text-align:{$align};{$lh}}\n}\n" );    // NOTE! Has @media close }


		$color = aweaver_getopt( $id . '_color' );

		if ( $color ) {
			aweaver_f_write( $sout,
				sprintf( "{$tag} .menu-arrows .toggle-submenu:after{color:{$color};}\n" ) );
			aweaver_f_write( $sout,
				sprintf( "{$tag} .menu-arrows ul .toggle-submenu:after{color:{$color};}\n" ) );
			aweaver_f_write( $sout,
				sprintf( "{$tag} .menu-arrows.is-mobile-menu.menu-arrows ul a .toggle-submenu:after{color:{$color};}\n" ) );
		}

		$color = aweaver_getopt( "{$id}_sub_color" );    // sub-menu arrow takes special handling to override
		if ( $color ) {
			aweaver_f_write( $sout, sprintf( "{$tag} .menu-arrows ul .toggle-submenu:after{color:{$color};}\n" ) );
		}

		// alternative mobile menu arrow clickable
		aweaver_put_bgcolor( $sout, $id . '_clickable_bgcolor', "{$tag} .is-mobile-menu.menu-arrows .toggle-submenu" );
	}


// End of Menus

// ================================ MARGINS/PADDING/SMART WIDGETS ===================================

	/*
	 *
	.l-content {width:100%;}
	.l-content-m {width:98%;margin-left:1%;margin-right:1%;}

	.l-sb-left, .l-sb-right, .l-sb-left-split, .l-sb-right-split {width:25%;}
	.l-sb-left-lm, .l-sb-right-lm, .l-sb-left-split-lm, .l-sb-right-split-lm {width:24%;margin-left:1%;}
	.l-sb-left-rm, .l-sb-right-rm, .l-sb-left-split-rm, .l-sb-right-split-rm {width:24%;margin-right:1%;}

	.l-widget-area-top, .l-widget-area-bottom {width:100%;}

	*/
	// smart -lm, -rm, -m   : value is 'smart_margin_int'

	$smart = aweaver_getopt_default( 'smart_margin_int', 1 );
	if ( $smart > 25 ) {
		$smart = 1;
	}  // some sanity check


	if ( $smart != 1 ) {
		aweaver_f_write( $sout, '@media (min-width:768px) {' );
		for ( $i = 2; $i <= 8; $i ++ ) {
			$w = ( ( 99.9999 / $i ) - $smart ) + ( $smart / $i );  // 99.9999 just a little rounding fudge factor */
			aweaver_f_write( $sout, sprintf( ".per-row-%d-m{width:%.5f%%;}", $i, $w ) );
		}
		aweaver_f_write( $sout, "}\n@media (min-width:581px) and ( max-width:767px) { " );    // small tablets
		aweaver_f_write( $sout, sprintf( ".per-row-2-m.per-row-3-m.per-row-4-m,.per-row-5-m.per-row-6-m,.per-row-7-m,.per-row-8-m{width:%.5f%%;}", 49.999 - ( $smart / 2.0 ) ) );
		aweaver_f_write( $sout, "\n.m-widget-smart-rm aside{margin-right:{$smart}%;} }
.widget-smart-rm aside,.ie8 .smart-rm{margin-right:{$smart}%;}\n" );    // global
	}

	aweaver_sidebar_style( $sout );      // generate sidebar style


	/* _bgcolor, _color : MUST BE AFTER OTHER AREA OPTIONS BECAUSE OF CSS+ */


	$sb_areas = array(
		'primary'       => '#primary-widget-area',
		'alt:primary'   => '.widget-area-primary',
		'secondary'     => '#secondary-widget-area',
		'alt:secondary' => '.widget-area-secondary',
		'top'           => '.widget-area-top',
		'bottom'        => '.widget-area-bottom',
		'header'        => '#header',
		'header_html'   => '#header-html',
		'header_sb'     => '#header-widget-area',
		'alt:header_sb' => '.widget-area-header',
		'footer'        => '#colophon',
		'footer_html'   => '#footer-html',
		'footer_sb'     => '#footer-widget-area',
		'alt:footer_sb' => '.widget-area-footer',
		'content'       => '#content',
		'container'     => '#container',
		'infobar'       => '#infobar',
		'wrapper'       => '#wrapper',
		'post'          => '.post-area',
		'widget'        => '.widget',
	);

	foreach ( $sb_areas as $area => $tag ) {
		$id = str_replace( 'alt:', '', $area );    // allow double rules
		aweaver_put_bgcolor( $sout, $id . '_bgcolor', $tag );
		aweaver_put_color( $sout, $id . '_color', $tag );

		if ( $area == 'content' || $area == 'post' ) {     // #content is % instead of px
			aweaver_css_style_val( $sout, $tag, '{padding-left:%.5f%%;}', $id . '_padding_L' );
			aweaver_css_style_val( $sout, $tag, '{padding-right:%.5f%%;}', $id . '_padding_R' );
		} else {
			aweaver_css_style_val( $sout, $tag, '{padding-left:%dpx;}', $id . '_padding_L' );
			aweaver_css_style_val( $sout, $tag, '{padding-right:%dpx;}', $id . '_padding_R' );
		}

		aweaver_css_style_val( $sout, $tag, '{padding-top:%dpx;}', $id . '_padding_T' );
		aweaver_css_style_val( $sout, $tag, '{padding-bottom:%dpx;}', $id . '_padding_B' );

		aweaver_css_style_val( $sout, $tag, '{margin-top:%dpx;}', $id . '_margin_T' );
		aweaver_css_style_val( $sout, $tag, '{margin-bottom:%dpx;}', $id . '_margin_B' );
	}

	// special areas with px max-width andF extend bg color
	$max_w_areas = array(
		'header'    => '#header',
		'footer'    => '#colophon',
		'container' => '#container',
		'm_primary' => '.menu-primary',
	);

	foreach ( $max_w_areas as $id => $tag ) {
		$w = aweaver_getopt( $id . '_max_width_int' );
		if ( $w ) {
			aweaver_f_write( $sout, "{$tag}" . "{max-width:{$w}px;}\n" );
		}

		if ( ( $xbg = aweaver_getopt( $id . '_extend_bgcolor' ) ) ) {
			$cname = "{$tag}";
			aweaver_f_write( $sout,
				"{$cname}{position:relative;overflow:visible;}
{$cname}:before{content:'';position:absolute;top:0;bottom:0;left:-9998px;right:0;
border-left:9999px solid {$xbg};box-shadow:9999px 0 0 {$xbg};z-index:-1;}\n"
			);
		}
	}

// custom widths for header, footer widget areas

	$hf_sb   = array(
		'_header_sb_'     => '#header-widget-area',
		'_footer_sb_'     => '#footer-widget-area',
		'alt:_header_sb_' => '.widget-area-header',
		'alt:_footer_sb_' => '.widget-area-footer',
		'_primary_'       => '#primary-widget-area',
		'_secondary_'     => '#secondary-widget-area',
		'alt:_primary_'   => '.widget-area-primary',
		'alt:_secondary_' => '.widget-area-secondary',
		'_top_'           => '.widget-area-top',
		'_bottom_'        => '.widget-area-bottom',
	);
	$hf_sb_w = array( 'lw_' => '@media (min-width:768px)', 'mw_' => '@media (min-width:581px) and (max-width:767px)', 'sw_' => '@media (max-width:580px)' );

	foreach ( $hf_sb as $sbval => $area ) {                // process each area with custom widget widths
		foreach ( $hf_sb_w as $sb_w => $media ) {         // process each device

			$sb = str_replace( 'alt:', '', $sbval );       // Allow double rules

			$list = trim( aweaver_getopt( $sb . $sb_w . 'cols_list' ) );

			if ( $list == '' ) {
				continue;
			}
			$list = str_replace( '%', '', $list );      // kill %'s
			$list = str_replace( ',', ' ', $list );     // change ,'s to blanks
			$list = str_replace( ' ;', ';', $list );    // be sure the ; is right after the value
			$list = str_replace( ';', '; ', $list );    // be sure have space after ;
			$list = array_filter( explode( ' ', $list ), 'strlen' );   // explode list, filter null strings

			if ( empty( $list ) ) {
				continue;
			}

			aweaver_f_write( $sout, "{$media} {\n" );        // wrap rules in media

			$m = $smart;

			if ( aweaver_getopt( substr( $sbval, 1 ) . 'no_widget_margins' ) ) // no margins? ( fixed for 3.0, had wrong prefix )
			{
				$m = 0;
			}

			aweaver_f_write( $sout, "{$area} .widget {float:left;margin-left:0;margin-right:0}\n" );  // reset previous list margins

			$clear = 'clear:both';
			$i     = 0;
			foreach ( $list as $val ) {              // step through the list of values
				$i ++;

				$w      = str_replace( ';', '', $val );    // strip ;
				$at_end = ( $w != $val );          // force end if was a ; before

				if ( $w === '0' ) {                 // hide this widget
					aweaver_f_write( $sout, $area . ' .widget-' . $i . "{display:none;}\n" );
				} elseif ( $w ) {
					if ( $at_end ) {            // at end of row
						aweaver_f_write( $sout, sprintf( "%s .widget-%d{width:%.5f%%;}\n", $area, $i, $w, $clear ) );
						$clear = 'clear:both;';

					} else {
						aweaver_f_write( $sout, sprintf( "%s .widget-%d{width:%.5f%%;margin-right:%.5f%%;%s}\n", $area, $i, ( $w - $m ), $m, $clear ) );
						$clear = '';
					}
				}
			}
			aweaver_f_write( $sout, "}\n" );    // end of @media wrap

		}    // end for each device type
	}        // end of each area


// ==================================== EXPAND &  EXTEND BG TO FULL WIDTH ==================================

//--------------------- EXPAND & EXTEND BG Attributes CSS Rules Generation -------------------
//V2.1 post rules have the no sidebar slector, so Post page with Sidebar get done with script
//V2 Fixes missing padding rule; fixes wrong limited width formula; add mwarpper margin support is wrapper is set to border:box
	// padding: _padding_L, _padding_R (px)
	// width: _width_int (%) - 'width' => true means have _width_int + _max_width_int + _align
	// max width in px: _max_width_int (px)
	// align: _align

	//----------------EXPAND Only rules -----------------------

	if ( aweaver_getopt( 'wrapper_fullwidth' ) ) {
		aweaver_f_write( $sout, '#wrapper{max-width:10000px;}' );
	}

	//Expand fixedtop if header is expanded
	if ( aweaver_getopt_expand( 'expand_header' ) ) {
		aweaver_f_write( $sout, "#inject_fixedtop {left:0;max-width:none !important;width:calc( 100vw - 16px) !important;}
		.no-vert-scrollbar #inject_fixedtop {left:0;width:calc( 100vw ) !important;}\n" );
	}
	//Expand fixedbottom if footer is expanded
	if ( aweaver_getopt_expand( 'expand_footer' ) ) {
		aweaver_f_write( $sout, "#inject_fixedbottom {left:0;max-width:none !important;width:calc( 100vw - 16px) !important;}
		.no-vert-scrollbar #inject_fixedbottom {left:0;width:calc( 100vw ) !important;}\n" );
	}

	//------End of Expand only


	// ARRAY DEFINITION: Includes Both Expand and Extend elements *** Only 5 sub areas with width% for Extend need to be marked width => true

	// Areas with _extend_width and expand with option with only true on supporting sub areas for Extend
	// Expand only Sub areas should all be width > false as you are not suppose to expand a limited width area
	$extend = array(
		'header'      => array( 'sel' => '#header', 'width' => false, 'xpad' => 'x' ),
		'header_sb'   => array( 'sel' => '#header-widget-area', 'width' => true, 'xpad' => 'header' ),            // does not have _max_width_int, but can safely use 0
		'header_html' => array( 'sel' => '#header-html', 'width' => true, 'xpad' => 'header' ),                // no _max_width_int

		'm_primary'          => array( 'sel' => '#nav-primary .wvrx-menu-container', 'width' => false, 'xpad' => 'header' ),            // padding: none?
		//Header sub Areas for expand_only ( all width > false )
		'header-image'       => array( 'sel' => '#header-image', 'width' => false, 'xpad' => 'header' ),
		'site_title'         => array( 'sel' => '#title-tagline', 'width' => false, 'xpad' => 'header' ),
		'header-widget-area' => array( 'sel' => '#header-widget-area', 'width' => false, 'xpad' => 'header' ),    // should have the same name as extend name
		'header-html'        => array( 'sel' => '#header-html', 'width' => false, 'xpad' => 'header' ),                    // should have the same name as extend name

		'container' => array( 'sel' => '#container', 'width' => false, 'xpad' => 'x' ),
		'infobar'   => array( 'sel' => '#infobar', 'width' => true, 'xpad' => 'container' ),
		'post'      => array( 'sel' => '#content .post-area', 'width' => false, 'xpad' => 'container' ),    // doesn't work with CSS for now, .post-area includes custom-post types

		'footer'       => array( 'sel' => '#colophon', 'width' => false, 'xpad' => 'x' ),
		'footer_sb'    => array( 'sel' => '#footer-widget-area', 'width' => true, 'xpad' => 'footer' ),            // no _max_width_int
		'footer_html'  => array( 'sel' => '#footer-html', 'width' => true, 'xpad' => 'footer' ),                // no _max_width_int
		//Footer sub areas for Expand only
		'site-ig-wrap' => array( 'sel' => '#site-ig-wrap', 'width' => false, 'xpad' => 'footer' ),            // no _max_width_int
	);

	$inside_container = array( 'infobar', 'post' );

	$skip_container = array( 'container', 'infobar', 'post' );
	$skip_header    = array( 'header', 'header_sb', 'header_html', 'header-html', 'm_primary', 'header-image', 'site_title', 'header-widget-area' );
	$skip_footer    = array( 'footer', 'footer_sb', 'footer_html', 'site-ig-wrap' );

	$nest_header = ( aweaver_getopt_default( 'header_width_int', 100 ) != 100 ||
	                 ( ( $tmp = aweaver_getopt( 'header_max_width_int' ) ) && $tmp < $themew ) );

	$nest_container = ( aweaver_getopt_default( 'container_width_int', 100 ) != 100 ||
	                    ( ( $tmp = aweaver_getopt( 'container_max_width_int' ) ) && $tmp < $themew ) );

	$nest_footer = ( aweaver_getopt_default( 'footer_width_int', 100 ) != 100 ||
	                 ( ( $tmp = aweaver_getopt( 'footer_max_width_int' ) ) && $tmp < $themew ) );

	// VARIABLES

	$pre_css   = '';        // Global css no @media
	$xcss      = '';        // Over sitewidth css
	$media_css = '';        // between 580 and sitewidth css

	$vis_container = '';
	$vis_content   = '';

	// Changed: 3.1.11 - changed scroll bar width to 8px instead of 16. Firefox seems to have changed its width, and 8 works across most browsers

	$w_view_scb   = '( 100vw - 8px) '; // Viewport width scrollbar
	$w_view_noscb = '100vw '; // Viewport width No scrollbar
	$m_wrap_scb   = '( 50vw - 4px - ( ' . $themew . 'px / 2 ) ) '; // Margin wrapper scrollbar
	$m_wrap_noscb = '( 50vw - ( ' . $themew . 'px / 2 ) ) '; // Margin wrapper no scrollbar

	foreach ( $extend as $opt => $vals ) {        // loop through all areas with expand/extend

		if ( aweaver_getopt_expand( 'expand_' . $opt ) || aweaver_getopt( $opt . '_extend_width' ) ) {

			// if parent has width limit, let script take over for all cases
			// nested limited width areas too difficult to generate CSS, let script do it

			if ( ( $nest_header && in_array( $opt, $skip_header ) ) ||
			     ( $nest_container && in_array( $opt, $skip_container ) ) ||
			     ( $nest_footer && in_array( $opt, $skip_footer ) ) ) {
				continue;
			}

			//--- COMPUTING VARIABLES ---
			// VISIBILITY when $opt in inside container
			if ( in_array( $opt, $inside_container ) ) {
				$vis_container = '#container{overflow:visible !important;}';
			}
			if ( $opt == 'post' ) {
				$vis_content = '#content,.content-page{overflow:visible !important;}';
			}

			// PADDING Calculations
			$pad_left  = '0';
			$pad_right = '0';
			$m_left    = '0';
			$m_right   = '0'; // assume none

			//Adding Wrapper paddings
			$wrap_p_left  = aweaver_getopt_default( 'wrapper_padding_L', 0 );
			$wrap_p_right = aweaver_getopt_default( 'wrapper_padding_R', 0 );

			// Handle padding of parents
			$m_left  = aweaver_getopt_default( $vals['xpad'] . '_padding_L', 0 );
			$m_right = aweaver_getopt_default( $vals['xpad'] . '_padding_R', 0 );

			// This areas own padding
			$pad_left  = aweaver_getopt_default( $opt . '_padding_L', 0 ) + $m_left;
			$pad_right = aweaver_getopt_default( $opt . '_padding_R', 0 ) + $m_right;

			//Footer specific calculations: Empty value for footer and footer widget area means 8
			if ( $vals['xpad'] == 'footer' ) {
				$m_left  = aweaver_getopt_default( $vals['xpad'] . '_padding_L', 8 );
				$m_right = aweaver_getopt_default( $vals['xpad'] . '_padding_R', 8 );
			}
			if ( ( $opt == 'footer' ) || ( $opt == 'footer_sb' ) ) {
				$pad_left  = aweaver_getopt_default( $opt . '_padding_L', 8 ) + $m_left;
				$pad_right = aweaver_getopt_default( $opt . '_padding_R', 8 ) + $m_right;
			}
			$pad_left  .= 'px';
			$pad_right .= 'px';

			$m_left  .= 'px';
			$m_right .= 'px'; // these expressions must end up with units

			$wrap_p_left  .= 'px';
			$wrap_p_right .= 'px';

// *** Small section was moved up a bit as it applies to ALL posts or no posts
			$align_left  = '';
			$align_right = '';

			$width = '';
			// dont need to compute max-with in pixel, none of the sub areas use it, nor is $min-width used anymore
			if ( $vals['width'] ) { // if option has width options
				$width = aweaver_getopt( $opt . '_width_int' );
				if ( $width != 0 ) {
					if ( aweaver_getopt( $opt . '_max_width_int' ) != 0 ) // if both width and max-width set, let script do it.
					{
						continue;
					} // skip this one, continue loop
					$widthval = $width / 100; //*** retain the strict value for calculations later
					$width    = $width . '%';
				}
			}

//------------------------------------------------------  Post Specifics Section ----------------------------------------------------
			$important = '';

			if ( $opt == 'post' ) {    // CASE: post
				// *** This is a complete duplicate of the general loop for clarity
				// *** so If changes are made in the rules of the general loop, they need to be also made to the post specific one

				$not_safari = '.wvrx-not-safari';    // no spaces for posts

				if ( aweaver_getopt_default( 'blog_cols', 1 ) > 1 ) {
					continue;
				}    // bail to JS on multi column
				$no_sdb    = ".weaverx-sb-one-column ";   // No sidebar selector so rules do not apply to post pages with sidebars
				$cnt_left  = aweaver_getopt_default( 'content_padding_L', 2 ); // also add in #content padding ( in % ) if extending post
				$cnt_right = aweaver_getopt_default( 'content_padding_R', 2 );
				// post paddings are in %, needed to redo value
				$pad_left  = aweaver_getopt_default( $opt . '_padding_L', 0 ) . '%' . ' + ' . $m_left;
				$pad_right = aweaver_getopt_default( $opt . '_padding_R', 0 ) . '%' . ' + ' . $m_left;

				// *** Building the various content padding Converting them in px or viewport units so the value is right when placed in post rules
				// _x for values above site-width; _scb values Under site width with scrollbar; _noscb values under site width with no scrollbar
				$cnt_pad_l_x     = '0px';
				$cnt_pad_r_x     = '0px';
				$cnt_pad_l_noscb = '0px';
				$cnt_pad_r_noscb = '0px';
				$cnt_pad_l_scb   = '0px';
				$cnt_pad_r_scb   = '0px';
				//Content padding % is computed against width( wrapper or browser ) - wrapper paddings - container paddings
				$wrap_pad_all = aweaver_getopt_default( 'wrapper_padding_L', 0 ) + aweaver_getopt_default( 'wrapper_padding_R', 0 );
				$cont_pad_all = aweaver_getopt_default( 'container_padding_L', 0 ) + aweaver_getopt_default( 'container_padding_R', 0 );

				if ( $cnt_left != 0 ) {
					// *** Content padding above sitewidth ( convert to pixel value )
					$cnt_pad_l_x = ( $cnt_left / 100 ) * ( $themew - $wrap_pad_all - $cont_pad_all ) . 'px';

					// *** Content padding below sitewidth	( convert to viewport units )
					$cnt_pad_l_noscb = "( " . $cnt_left / 100 . " * ( 100vw - " . $wrap_pad_all . "px - " . $cont_pad_all . "px) )";
					$cnt_pad_l_scb   = "( " . $cnt_left / 100 . " * ( 100vw - 16px - " . $wrap_pad_all . "px - " . $cont_pad_all . "px) )";
				}
				if ( $cnt_right != 0 ) {
					// *** Content padding above sitewidth ( convert to pixel value )
					$cnt_pad_r_x = ( $cnt_right / 100 ) * ( $themew - $wrap_pad_all - $cont_pad_all ) . 'px';

					// *** Content padding below sitewidth	( convert to viewport units )
					$cnt_pad_r_noscb = "( " . $cnt_right / 100 . " * ( 100vw - " . $wrap_pad_all . "px - " . $cont_pad_all . "px) )";
					$cnt_pad_r_scb   = "( " . $cnt_right / 100 . " * ( 100vw - 16px - " . $wrap_pad_all . "px - " . $cont_pad_all . "px) )";
				}

				//==============================================================  POST SPECIFIC RULES  =========================================================
				$pre_css .= "{$not_safari}{$no_sdb}{$vals['sel']}{box-sizing:border-box;}\n"; //*** Needs to be in pre-css to work below site width width area padding

				//--- EXPAND & EXTEND COMMON RULES ---
				// pre_css General width Rules for ALL. Adds margins rules for padding bug fix. Need calc around margin for post mix of % and px
				// Margins in these apply under sitewidth as other rules will override above sitewidth


				// *** Add specific content padding for below sitewidth with and without scrollbar ( _scb or _noscb )

				$pre_css .= "{$not_safari}{$no_sdb}{$vals['sel']}{max-width:none {$important};width:calc{$w_view_scb} {$important};margin-left: calc( -1 * ( {$m_left} + {$cnt_pad_l_scb} ) - {$wrap_p_left} );margin-right: calc( -1 * ( {$m_right} + {$cnt_pad_r_scb} ) - {$wrap_p_right} );}\n";
				$pre_css .= "{$not_safari}.no-vert-scrollbar{$no_sdb} {$vals['sel']}{width:{$w_view_noscb} {$important};margin-left: calc( -1 * ( {$m_left} + {$cnt_pad_l_noscb} ) - {$wrap_p_left} );margin-right: calc( -1 * ( {$m_right} + {$cnt_pad_r_noscb} ) - {$wrap_p_right} );}\n";

				// xcss Expand margin Rules For ALL when over sitewidth ( _x )
				// *** Add Specific Content paddings for below sitewidth with and without scrollbar
				$xcss .= "{$not_safari}{$no_sdb}{$vals['sel']} {margin-left:calc( -1 * {$m_wrap_scb} - {$wrap_p_left} - {$m_left} - {$cnt_pad_l_x} );margin-right:calc( -1 * {$m_wrap_scb} - {$wrap_p_right} - {$m_right} - {$cnt_pad_r_x} );}\n";
				$xcss .= "{$not_safari}.no-vert-scrollbar{$no_sdb} {$vals['sel']} {margin-left:calc( -1 * {$m_wrap_noscb} - {$wrap_p_left} - {$m_left} - {$cnt_pad_l_x} );margin-right:calc( -1 * ( {$m_wrap_noscb} ) - {$wrap_p_right} - {$m_right} - {$cnt_pad_r_x} );}\n";

				//--- EXTEND ONLY RULES ---
				//--- pre_css General Padding rules

				// These apply when under sitewidth ( above other rules override )
				// *** Add the content padding for below sitewidth with and without scrollbar ( _scb or _noscb )
				if ( aweaver_getopt( $opt . '_extend_width' ) ) {
					$pre_css .= "{$not_safari}{$no_sdb}{$vals['sel']}{padding-left:calc( {$wrap_p_left} + {$cnt_pad_l_scb} + {$pad_left}{$align_left} ); padding-right:calc( {$wrap_p_right} + {$cnt_pad_r_scb} + {$pad_right}{$align_right} );}\n";
					$pre_css .= "{$not_safari}.no-vert-scrollbar{$no_sdb} {$vals['sel']}{padding-left:calc( {$wrap_p_left} + {$cnt_pad_l_noscb} + {$pad_left}{$align_left} ); padding-right:calc( {$wrap_p_right} + {$cnt_pad_r_noscb} + {$pad_right}{$align_right} );}\n";
				}

				// xcss GENERAL Rules for Extended Areas when wider than sitewidth
				// *** Add The content padding for above sitewidth  ( _x )
				if ( aweaver_getopt( $opt . '_extend_width' ) ) {
					$xcss .= "{$not_safari}{$no_sdb}{$vals['sel']}{padding-left:calc( {$m_wrap_scb} + {$wrap_p_left} + {$cnt_pad_l_x} + {$pad_left}{$align_left} );padding-right:calc( {$m_wrap_scb} + {$wrap_p_right} + {$cnt_pad_r_x} + {$pad_right}{$align_right} );}\n";
					$xcss .= "{$not_safari}.no-vert-scrollbar{$no_sdb} {$vals['sel']}{padding-left:calc( {$m_wrap_noscb} + {$wrap_p_left} + {$cnt_pad_l_x} + {$pad_left}{$align_left} ); padding-right:calc( {$m_wrap_noscb} + {$wrap_p_right} + {$cnt_pad_r_x} + {$pad_right}{$align_right} );}\n";
				}

			}   // End of Post Specific case ===================================================================

			else {        // CASE anything but posts #############################################################

				//--- EXPAND & EXTEND COMMON RULES ---
				$not_safari = '.wvrx-not-safari ';    // space after for others
				// pre_css General width Rules for ALL. **Adds margins rules for padding bug fix. **Need calc around margin for post mix of % and px

				$pre_css .= "{$not_safari}{$vals['sel']}{max-width:none {$important};width:calc{$w_view_scb} {$important};margin-left: calc( -1 * ( {$m_left} ) - {$wrap_p_left} );margin-right: calc( -1 * ( {$m_right} ) - {$wrap_p_right} );}\n";

				$pre_css .= ".wvrx-not-safari.no-vert-scrollbar {$vals['sel']}{width:{$w_view_noscb}{$important};}\n";

				// xcss Expand margin Rules For ALL when over sitewidth
				$xcss .= "{$not_safari}{$vals['sel']} {margin-left:calc( -1 * {$m_wrap_scb} - {$wrap_p_left} - {$m_left} );margin-right:calc( -1 * {$m_wrap_scb} - {$wrap_p_right} - {$m_right} );}\n";
				$xcss .= ".wvrx-not-safari.no-vert-scrollbar {$vals['sel']} {margin-left:calc( -1 * {$m_wrap_noscb} - {$wrap_p_left} - {$m_left} );margin-right:calc( -1 * ( {$m_wrap_noscb} ) - {$wrap_p_right} - {$m_right} );}\n";

				//--- EXTEND ONLY RULES ---
				//--- pre_css General Padding rules
				if ( aweaver_getopt( $opt . '_extend_width' ) ) {
					$pre_css .= "{$not_safari}{$vals['sel']}{padding-left:calc( {$wrap_p_left} + {$pad_left}{$align_left} ); padding-right:calc( {$wrap_p_right} + {$pad_right}{$align_right} );}\n";
				}

				// media_css SPECIALIZED Padding Rules for Limited width Sub Areas between 580px and sitewidth. ***Revised formula!
				if ( $width && aweaver_getopt( $opt . '_extend_width' ) ) {
					$align           = aweaver_getopt( $opt . '_align' );
					$themew_less_one = $themew - 1;
					// *** the rules below had a useless no-vert-scrolbar rules.
					// *** The padding rules in this section do not contain viewport units so do not need a no-scrollbar version
					switch ( $align ) {
						case 'center':
							$align_left  = " + ( 100% - {$width} ) / 2";
							$align_right = $align_left; // center = same
							//Centered Padding rules corrected
							$media_css .= "{$not_safari}{$vals['sel']}{padding-left:calc( {$wrap_p_left} + {$pad_left}{$align_left} ); padding-right:calc( {$wrap_p_right} + {$pad_right}{$align_right} );}\n";
							break;

						case 'float-right':
							$align_left = " + 100% - {$width}"; // fix up the left side
							//Left padding rules
							$media_css .= "{$not_safari}{$vals['sel']}{padding-left:calc( {$wrap_p_left} + {$pad_left}{$align_left} );}\n";
							break;

						default: // left
							$align_right = " + 100% - {$width}"; // fix up the right side
							//Right PAdding rules
							$media_css .= "{$not_safari}{$vals['sel']}{padding-right:calc( {$wrap_p_right} + {$pad_right}{$align_right} );}\n";
							break;
					}
				}

				// xcss GENERAL Rules for Extended Areas when wider than sitewidth
				if ( aweaver_getopt( $opt . '_extend_width' ) ) {
					$xcss .= "{$not_safari}{$vals['sel']}{padding-left:calc( {$m_wrap_scb} + {$wrap_p_left} + {$pad_left}{$align_left} );padding-right:calc( {$m_wrap_scb} + {$wrap_p_right} + {$pad_right}{$align_right} );}\n";
					$xcss .= ".wvrx-not-safari.no-vert-scrollbar {$vals['sel']}{padding-left:calc( {$m_wrap_noscb} + {$wrap_p_left} + {$pad_left}{$align_left} ); padding-right:calc( {$m_wrap_noscb} + {$wrap_p_right} + {$pad_right}{$align_right} );}\n";
				}
			}  // // end else CASE anything but posts ===================================================================

		} // end if extended/expanded

	} // end of foreach


	//--- WRAP and WRITE CSS ---
	if ( $xcss ) { // put generated content inside @media ( themewidth )
		$xcss = "{$vis_container}{$vis_content}\n@media (min-width:{$themew}px) {\n{$xcss} }\n";
	}
	if ( $media_css ) { // put generated content inside @media ( 580px-themewidth )
		$media_css = "{$vis_container}{$vis_content}\n@media (min-width:580px) and ( max-width:{$themew_less_one}px) {\n{$media_css} }\n";
	}

	aweaver_f_write( $sout, "\n/* ** Expand/extend ** */\n" . $pre_css );
	aweaver_f_write( $sout, $xcss );
	aweaver_f_write( $sout, $media_css . " /* /EE */\n" );

	//----------------------End of EXPAND & EXTEND BG Attributes--------------------

// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ END OF EXPAND & EXTEND BG TO FULL WIDTH ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

// ================================ COLORS ===================================
// Colors need to go last because they might have CSS +

	$titles = array(
		'site_title'    => '.wrapper #site-title a,.wrapper .site-title a',
		'tagline'       => '#site-tagline > span,.site-tagline > span',
		'page_title'    => '.page-title',
		'post_title'    => '.wrapper .post-title',
		'archive_title' => '.archive-title',
		'widget_title'  => '.widget-title',
		'm_header_mini' => '#nav-header-mini',
		'content_h'     => '.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6',
	);

	foreach ( $titles as $title => $rule ) {
		aweaver_put_bgcolor( $sout, $title . '_bgcolor', $rule );

		// bar under some titles
		if ( ( $val = ( int ) aweaver_getopt( $title . '_underline_int' ) ) ) {
			$titleColor = aweaver_getopt( $title . '_color' );
			if ( $titleColor == '' || $titleColor == 'inherit' ) {
				$titleColor = aweaver_getopt( 'content_color' );
			}   // content_color, etc, colors are generated by $area . '_color'
			if ( $titleColor == '' || $titleColor == 'inherit' ) {
				$titleColor = aweaver_getopt( 'container_color' );
			}
			if ( $titleColor == '' || $titleColor == 'inherit' ) {
				$titleColor = aweaver_getopt( 'wrapper_color' );
			}
			if ( $titleColor == '' || $titleColor == 'inherit' ) {
				$titleColor = '#222';
			} /* if they want a border, this is the fallback color */
			aweaver_f_write( $sout, sprintf( $rule . "{border-bottom: {$val}px solid {$titleColor};}\n" ) );
		}

		if ( $title == 'content_h' ) {       // these aren't handled by adding a style
			aweaver_put_rule_if_checked( $sout, $title . '_normal', $rule . '{font-weight:normal !important;}' ); // not bold?

			$val = aweaver_getopt( $title . '_italic' );
			if ( $val == 'on' ) {
				aweaver_f_write( $sout, "{$rule}{font-style:italic;}\n" );
			} elseif ( $val == 'off' ) {
				aweaver_f_write( $sout, "{$rule}{font-style:normal;}\n" );
			}
		}

		if ( $title == 'post_title' || $title == 'm_header_mini' )   // stupid special cases because want the bg to work right ...
		{
			$rule = $rule . ' a,' . $rule . ' a:visited';
		}

		aweaver_put_color( $sout, $title . '_color', $rule );
	}

	aweaver_put_color( $sout, 'post_title_hover_color', '.wrapper .post-title a:hover' );
	aweaver_put_color( $sout, 'm_header_mini_hover_color', '#nav-header-mini a:hover' );
	$val = aweaver_getopt( 'm_header_mini_top_margin_dec' );
	if ( $val != '' ) {
		aweaver_f_write( $sout, sprintf( "#nav-header-mini{margin-top:%.5fem}\n", $val ) );
	}

	aweaver_put_bgcolor( $sout, 'stickypost_bgcolor', '.blog .sticky' );

	aweaver_put_bgcolor( $sout, 'post_author_bgcolor', '#author-info' );


	aweaver_put_bgcolor( $sout, 'hr_color', 'hr' );
	aweaver_put_bgcolor( $sout, 'post_info_top_bgcolor', '.entry-meta' );
	aweaver_put_color( $sout, 'post_info_top_color', '.entry-meta' );

	aweaver_put_bgcolor( $sout, 'post_info_bottom_bgcolor', '.entry-utility' );
	aweaver_put_color( $sout, 'post_info_bottom_color', '.entry-utility' );

	aweaver_put_bgcolor( $sout, 'input_bgcolor', 'input,textarea' );
	aweaver_put_color( $sout, 'input_color', 'input,textarea' );

	// ==================== SEARCH =====================

	aweaver_put_bgcolor( $sout, 'search_bgcolor', '.search-field,#header-search .search-field:focus,.menu-search .search-field:focus' );
	aweaver_put_color( $sout, 'search_color', '.search-field, #header-search .search-field:focus' );

	/* search box icon color */
	$search_areas = array(

		'primary'   => '#primary-widget-area',
		'secondary' => '#secondary-widget-area',
		'm_primary' => '.menu-primary .wvrx-menu-container',
		'top'       => '.widget-area-top',
		'bottom'    => '.widget-area-bottom',
		'header_sb' => '.widget-area-header',
		'footer'    => '#colophon',
		'footer_sb' => '.widget-area-footer',
		'content'   => '#content',
		'container' => '#container',
		'infobar'   => '#infobar',
		'wrapper'   => '#wrapper',
		'widget'    => '.widget',
	);

	foreach ( $search_areas as $area => $tag ) {
		aweaver_put_color( $sout, $area . '_color', $tag . ' .search-form .search-submit' );
	}
	aweaver_put_color( $sout, 'header_color', '#header-search .search-form::before' );

	aweaver_put_elementor_colors( $sout );


	// =============================== TITLES ==================================

	// injection area bg colors

	$htmls = array(
		'preheader',
		'header',
		'prewrapper',
		'container_top',
		'postinfobar',
		'precontent',
		'postpostcontent',
		'precomments',
		'pagecontentbottom',
		'postcomments',
		'prefooter',
		'postfooter',
		'presidebar',
		'fixedtop',
		'fixedbottom',
		'postheader',
	);
	foreach ( $htmls as $val ) {             // includes areas from Absolute Weaver Plus, too.
		$prefix = ( $val == 'postpostcontent' ) ? '.' : '#';
		aweaver_put_bgcolor( $sout, 'inject_' . $val . '_bgcolor', $prefix . 'inject_' . $val );
	}

	if ( ( $val = aweaver_getopt( 'post_title_bottom_margin_dec' ) ) ) {
		aweaver_f_write( $sout, ".post-title{margin-bottom:{$val}em;}\n" );
	}


	aweaver_f_write( $sout, "#inject_fixedtop,#inject_fixedbottom,.wvrx-fixedtop,.wvrx-fixonscroll{max-width:{$themew}px;}\n" );
	aweaver_f_write( $sout, ".ie8 #inject_fixedtop,.ie8 #inject_fixedbottom,.ie8 .wvrx-fixedtop,.ie8 .wvrx-fixonscroll{max-width:{$themew}px;}\n" );

	// Set position when browser below site-width

	aweaver_f_write( $sout, "@media ( max-width:{$themew}px) {.wvrx-fixedtop,.wvrx-fixonscroll,#inject_fixedtop,#inject_fixedbottom {left:0px;margin-left:0 !important;margin-right:0 !important;}}\n" );


//----------------FIXED TOP Positionning rules --------------------------
//V1.1 Adds correction of the FixedTop areas when the Header has limited width ( please review the code for correctness! )
//Margin adjustment needed for Fixed areas when header/footer are not Expanded
//Adjust Fixed areas margins for wrapper and header padding so they are properly aligned with the edges of the Site
//Without these negative margins, if there are paddings on the wrapper or the header, fixed top areas inside with be shifted
	$hdpadl = aweaver_getopt_default( 'header_padding_L', 0 );
	$hdpadr = aweaver_getopt_default( 'header_padding_R', 0 );
	$wrpadl = aweaver_getopt_default( 'wrapper_padding_L', 0 );
	$wrpadr = aweaver_getopt_default( 'wrapper_padding_R', 0 );

	$allpadl = $hdpadl + $wrpadl;
	$allpadr = $hdpadr + $wrpadr;
	//Adding the unit and sign in a different variable as limited width calculations need the one without sign and unit
	$allpadl_x = - $allpadl . 'px';    //Default values if no header width reduction
	$allpadr_x = - $allpadr . 'px';    //Default values if no header width reduction

	//limited header calculations
	//These are only for when browser is wider than sitewidth. Below that, they are left:0 positionned with existing rules
	$align     = aweaver_getopt_default( 'header_align', 'left' );
	$width     = aweaver_getopt_default( 'header_width_int', 100 );
	$max_width = aweaver_getopt_default( 'header_max_width_int', 0 );
	$reduct    = ( $themew - ( $width / 100 ) * ( $themew - $wrpadl - $wrpadr ) ) . 'px';  // This is the width reduction when browser is larger than sitewidth

	//!! We cant support both a width% and max-width at the same time, it would be way too complicated.
	// Depending which one of if ( $width ) or if ( $max_width ) is last below, it will be the winning one ( revert order between if ( $width ) and if ( $max_width ) )
	switch ( $align ) {
		case 'center':                // Centered case
			if ( $width ) {
				$allpadl_x = "calc( 0px - {$hdpadl}px - {$reduct} / 2 )";
				$allpadr_x = "calc( 0px - {$hdpadr}px - {$reduct} / 2 )";
			} elseif ( $max_width ) {
				$allpadl_x = - $allpadl - ( $themew - $wrpadl - $wrpadr - $max_width ) / 2 . 'px';
				$allpadr_x = - $allpadr - ( $themew - $wrpadl - $wrpadr - $max_width ) / 2 . 'px';
			}
			break;

		case 'float-right':            // Aligned right case
			if ( $width ) {
				$allpadl_x = "calc( {$wrpadl}px - {$hdpadl}px - {$reduct} )";
			} elseif ( $max_width ) {
				$allpadl_x = - $allpadl - ( $themew - $wrpadl - $wrpadr - $max_width ) . 'px';
			}
			break;

		default:                    // Aligned left case
			if ( $width ) {
				$allpadr_x = "calc( {$wrpadr}px - {$hdpadr}px - {$reduct} )";
			} elseif ( $max_width ) {
				$allpadr_x = - $allpadr - ( $themew - $wrpadl - $wrpadr - $max_width ) . 'px';
			}
			break;
	}

	// Rules for TOP Fixed Areas
	if ( ! aweaver_getopt_expand( 'expand_header' ) ) {
		aweaver_f_write( $sout, "@media (min-width:{$themew}px) {
			#inject_fixedtop {margin-left:-{$wrpadl}px;margin-right:-{$wrpadr}px}
			.wvrx-fixedtop,.wvrx-fixonscroll{margin-left:{$allpadl_x};margin-right:{$allpadr_x}}
			}\n" );
	}
	// Rules for BOTTOM Fixed areas
	if ( ! aweaver_getopt_expand( 'expand_footer' ) ) {
		aweaver_f_write( $sout, "@media (min-width:{$themew}px) {
			#inject_fixedbottom {margin-left:-{$wrpadl}px;margin-right:-{$wrpadr}px}
			}\n" );
	}
//------------------ End of Fixed Top Positioning rles ----------------------

// ================================ END RULES ===================================
// These rules need to be at the end

	if ( aweaver_getopt( '_print_show_widgets' ) ) {
		aweaver_f_write( $sout, "@media print { /* print widget areas */
.widget-area{border:1px solid black !important;display:block !important; margin:.5em auto .75em auto !important;padding:.5em !important;width:98%!important;}
#colophon{border:1px solid black !important;display:block !important;margin:1em !important;padding:.5em !important;width:100% !important;}
.widget{margin-bottom:.75em !important;}
#primary-widget-area,#secondary-widget-area{float:left !important;width:48% !important;margin-left:2% !important;}
#footer-widget-area.widget-area{width:100% !important;margin:0 !important;}}\n" );
	}


// ================================ PRO AREAS ===================================

	do_action( 'aweaverplus_css', $sout );

	// need to handle inline code generation a bit differently for the customizer. In normal mode, we put all the generated
	// CSS in one <style> block. For the customizer, we put the plus and global css in separate named ( id ) style blocks
	// so the customizer javascript can directly manipulate those in the DOM.

	if ( is_customize_preview() && $sout == 'echo' ) {    // wrap these guys in ids so can more easily manipulate the DOM
		// always generate the <style> block so will be there to manipulate
		aweaver_f_write( $sout, "\n</style>\n" );
		aweaver_f_write( $sout, "\n<style id='wvrx-css-plus' type='text/css'>  /* CSS+ Rules */\n" );
		aweaver_f_write( $sout, $wvrx_css_plus );
		aweaver_f_write( $sout, "\n</style>\n" );


		$add_css = aweaver_getopt( 'add_css' );

		aweaver_f_write( $sout, "\n<style id='wvrx-global-css' type='text/css'>  /* Global CSS Rules */\n" );
		aweaver_f_write( $sout, apply_filters( 'aweaver_css', $add_css ) );
		//aweaver_f_write( $sout, "\n</style>\n" );	// don't need - the standard </style> is generated later

	} else {    // standard site - only output CSS if really there
		if ( $wvrx_css_plus != '' ) {
			aweaver_f_write( $sout, "\n/* CSS+ Rules */\n" );
			aweaver_f_write( $sout, $wvrx_css_plus );
		}

		$add_css = aweaver_getopt( 'add_css' );

		if ( ! empty( $add_css ) ) {
			aweaver_f_write( $sout, "\n/* Global Custom CSS Rules */\n" );
			aweaver_f_write( $sout, apply_filters( 'aweaver_css', $add_css ) );
		}
	}

	aweaver_f_write( $sout, "\n/* End Absolute Weaver CSS */\n" );


} // end aweaver_output_style
//-----------------------------------------------------------------------------------------


// ************************************ SUPPORT FUNCTIONS **************************


function aweaver_css_style( $sout, $name, $style ) {
	/* output a css rule style ( include {}'s in style ) */
	if ( $style == '' || ! $name ) {
		return;
	}
	aweaver_f_write( $sout, "$name $style\n" );
}

function aweaver_css_style_val( $sout, $name, $style, $opt ) {
	/* output a css rule style with one value ( include {}'s in style ) */
	$val = aweaver_getopt( $opt );
	if ( $val == '' || $val === false || ! $style || ! $name ) {
		return;
	}
	aweaver_f_write( $sout, sprintf( "$name $style\n", $val ) );
}

//--


function aweaver_fix_braces( $val ) {
	$fix = str_replace( '{', '', $val );
	$fix = str_replace( '}', '', $fix );

	return '{' . $fix . '}';
}

//--


function aweaver_sidebar_style( $sout, $override = 0 ) {
	// allow per page sidebar width overrides

	$smart = aweaver_getopt_default( 'smart_margin_int', 1 );
	if ( $smart > 25 ) {
		$smart = 1;
	}  // some sanity check

	if ( ! $override ) {
		$l_sb_w  = aweaver_getopt_default( 'left_sb_width_int', '25' );
		$r_sb_w  = aweaver_getopt_default( 'right_sb_width_int', '25' );
		$ls_sb_w = aweaver_getopt_default( 'left_split_sb_width_int', '25' );
		$rs_sb_w = aweaver_getopt_default( 'right_split_sb_width_int', '25' );
	} else {
		$l_sb_w  = $override;        // using per page override - forces symmetrical split, but that's better than nothing
		$r_sb_w  = $override;
		$ls_sb_w = $override;
		$rs_sb_w = $override;
	}

	// emit code for .is-desktop to resize widget areas ( need .is-desktop to make IE8 work on free or in-line CSS )

	// Version 2.0.10 change: Because of significant degradation of desktop refresh using .is-desktop for these rules,
	// they are now wrapped with the @media for desktops. This means that full support for non-default ( non-25% ) sidebars
	// on the desktop is no longer supportd for IE8. Instead, we allow IE8 to gracefully degrade to only showing default widths.
	// All the rules between the @media }{} formerly had .is-desktop leading each rule. These have been removed.

	aweaver_f_write( $sout, "@media screen and ( min-width:768px) {\n" );
	if ( $r_sb_w != 25 || $smart != 1 || $override ) {      // changed right sidebar width ( or smart width )
		$cw     = 100 - $r_sb_w;
		$cw_m   = $cw - $smart;
		$r_sb_m = $r_sb_w - $smart;
		aweaver_f_write( $sout, sprintf( ".l-content-rsb{width:%.5f%%;}.l-content-rsb-m{width:%.5f%%;margin-right:%.5f%%;}
.l-sb-right{width:%.5f%%;}.l-sb-right-lm{width:%.5f%%;margin-left:%.5f%%;}.l-sb-right-rm {width:%.5f%%;margin-right:%.5f%%;}\n",
			$cw, $cw_m, $smart, $r_sb_w, $r_sb_m, $smart, $r_sb_m, $smart ) );

	}

	if ( $l_sb_w != 25 || $smart != 1 || $override ) {      // changed left sidebar width
		$cw     = 100 - $l_sb_w;
		$cw_m   = $cw - $smart;
		$l_sb_m = $l_sb_w - $smart;
		aweaver_f_write( $sout, sprintf( ".l-content-lsb{width:%.5f%%;}.l-content-lsb-m{width:%.5f%%;margin-left:%.5f%%;}
.l-sb-left{width:%.5f%%;}.l-sb-left-lm{width:%.5f%%;margin-left:%.5f%%;}.l-sb-left-rm {width:%.5f%%;margin-right:%.5f%%;}\n",
			$cw, $cw_m, $smart, $l_sb_w, $l_sb_m, $smart, $l_sb_m, $smart ) );

	}

	if ( $ls_sb_w != 25 || $rs_sb_w != 25 || $smart != 1 || $override ) {     // changed a split width
		$cw         = 100 - $ls_sb_w - $rs_sb_w;
		$lsb_margin = $cw + $rs_sb_w;
		$cw_l_m     = $ls_sb_w + $smart;
		$cw_m       = $cw - $smart - $smart;
		$l_m        = $ls_sb_w - $smart;
		$r_m        = $rs_sb_w - $smart;

		aweaver_f_write( $sout,
			sprintf( ".l-sb-right-split{width:%.5f%%}\n", $rs_sb_w ) .
			sprintf( ".l-sb-right-split-lm{width:%.5f%%;margin-left:%.5f%%;}\n", $rs_sb_w - $smart, $smart ) .
			sprintf( ".l-content-ssb{width:%.5f%%;margin-left:%.5f%%;}\n", $cw, $ls_sb_w ) .
			sprintf( ".l-content-ssb-m{width:%.5f%%;margin-left:%.5f%%;margin-right:%.5f%%;}\n", $cw - $smart - $smart, $ls_sb_w + $smart, $smart ) .
			sprintf( ".l-content-ssbs{width:%.5f%%;}\n", $cw ) .
			sprintf( ".l-content-ssbs-m{width:%.5f%%;margin-left:%.5f%%;margin-right:%.5f%%;}\n", $cw - $smart - $smart, $smart, $smart ) .
			sprintf( ".l-sb-left-split{margin-left:-%.5f%%;width:%.5f%%}\n", 100 - $rs_sb_w, $ls_sb_w ) .
			sprintf( ".l-sb-left-split-top{width:%.5f%%}\n", $ls_sb_w ) .
			sprintf( ".l-sb-left-split-rm{margin-left:-%.5f%%;width:%.5f%%}\n", 100 - $rs_sb_w, $ls_sb_w - $smart ) .
			sprintf( ".l-sb-left-split-top-rm {margin-right:%.5f%%;width:%.5f%%;}\n", $smart, $ls_sb_w - $smart ) );
	}
	aweaver_f_write( $sout, "}\n" );


	if ( ! $override ) {
		$sb_horizontal_areas = array(
			'top'           => '.widget-area-top',
			'bottom'        => '.widget-area-bottom',
			'container'     => '#container',
			'footer'        => '#colophon',
			'footer_html'   => '#footer-html',
			'footer_sb'     => '#footer-widget-area',
			'alt:footer_sb' => '.widget-area-footer',
			'header'        => '#header',
			'header_html'   => '#header-html',
			'header_sb'     => '#header-widget-area',
			'alt:header_sb' => '.widget-area-header',
			'infobar'       => '#infobar',
		);

		foreach ( $sb_horizontal_areas as $id => $tag ) {     // horizontal area widths
			$id   = str_replace( 'alt:', '', $id );
			$w    = aweaver_getopt( $id . '_width_int' );
			$ltag = str_replace( '.', '.l-', $tag );
			if ( $w === 0 || $w === '0' )    // detects 0 rather than false
			{
				aweaver_f_write( $sout, "{$ltag}{width:auto;}\n" );
			} // changed to 100%: version 2.0.10
			elseif ( $w > 0 ) {
				aweaver_f_write( $sout, "{$ltag}{width:{$w}%;}.is-phone {$ltag}{width:100%}\n" );
			} // changed to 100%: version 2.0.10

		}
	}

}

//--


function aweaver_put_link( $sout, $id, $a, $ahover ) {
	aweaver_put_color( $sout, $id . '_color', $a );
	aweaver_put_color( $sout, $id . '_hover_color', $ahover );

	aweaver_put_rule_if_checked( $sout, $id . '_u', $a . '{text-decoration:underline;}' );        // link

	$hover_ul = aweaver_getopt( $id . '_u_h' );        // hover underline?
	if ( $hover_ul ) {
		aweaver_f_write( $sout, "{$ahover}{text-decoration:underline;}\n" );
		if ( $id == 'link' ) {
			aweaver_f_write( $sout, ".wvrx-menu-container a:hover, #nav-header-mini a:hover{text-decoration:none;}\n" );
		}
	}

	$val = aweaver_getopt( $id . '_em' );
	if ( $val == 'on' ) {
		aweaver_f_write( $sout, "{$a}{font-style:italic;}\n" );
	} elseif ( $val == 'off' ) {
		aweaver_f_write( $sout, "{$a}{font-style:normal;}\n" );
	}

	$val = aweaver_getopt( $id . '_strong' );
	if ( $val == 'on' ) {
		aweaver_f_write( $sout, "{$a}{font-weight:bold;}\n" );
	} elseif ( $val == 'off' ) {
		aweaver_f_write( $sout, "{$a}{font-weight:normal;}\n" );
	}
}

//--


function aweaver_put_bgcolor( $sout, $opt, $tag, $important = false ) {
	// put bgcolor and CSS+

	$imp = ( $important ) ? ' !important' : '';

	if ( ( $color = aweaver_getopt( $opt ) ) && $color != 'inherit' ) {
		if ( strpos( $color, 'rgba' ) === false ) {    // regular color
			aweaver_f_write( $sout, sprintf( "$tag {background-color:{$color}{$imp};}\n" ) );
		} else {    // rgba - so create IE8 compatible version as well

			$argb  = aweaver_rgba2argb( $color );
			$split = explode( ',', $tag );
			$ie8   = '';
			foreach ( $split as $id ) {
				if ( $ie8 != '' ) {
					$ie8 .= ',';
				}
				$ie8 .= '.ie8 ' . $id;
			}

			if ( strpos( $opt, 'menubar' ) !== false || ( $opt[0] == 'm' && $opt[1] == '_' ) ) {  // menus don't work with transparent bg in IE 7/8
				$bgcss = 'background-color:#' . substr( $argb, 3 ) . ';';    // use the non-transparent color provided
			} else {

				// reset background for IE
				$bgcss = 'background-color:transparent;' . "\n";
				// Filters for IE:
				$bgcss .= '-ms-filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=' . $argb . ',endColorstr=' . $argb . ' );' . "\n";
				$bgcss .= 'filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=' . $argb . ',endColorstr=' . $argb . ' );' . "\n";
				$bgcss .= 'zoom:1 !important;';
			}
			aweaver_f_write( $sout, sprintf( "$ie8 { $bgcss }\n" ) );
			aweaver_f_write( $sout, sprintf( "$tag {background-color:$color{$imp};}\n" ) );    // the standard value
		}
	}

	aweaver_put_css_plus( $sout, $opt, $tag );
}

//--


function aweaver_rgba2argb( $rgba_in ) {
	// convert rgba( 1,2,3,.4 ) to #aarrggbb
	if ( strpos( $rgba_in, 'rgba' ) === false ) {
		return $rgba_in;
	}
	$rgb = $rgba_in;
	$rgb = str_replace( 'rgba', '', $rgb );    // eliminate the rgba() and spaces
	$rgb = str_replace( '(', '', $rgb );
	$rgb = str_replace( ')', '', $rgb );
	$rgb = str_replace( ' ', '', $rgb );

	list( $r, $g, $b, $a ) = explode( ',', $rgb );    // retrieve the rgba values
	$a   = intval( $a * 255. );
	$r   = intval( $r );
	$g   = intval( $g );
	$b   = intval( $b );
	$hex = "#";
	$hex .= str_pad( dechex( $a ), 2, "0", STR_PAD_LEFT );
	$hex .= str_pad( dechex( $r ), 2, "0", STR_PAD_LEFT );
	$hex .= str_pad( dechex( $g ), 2, "0", STR_PAD_LEFT );
	$hex .= str_pad( dechex( $b ), 2, "0", STR_PAD_LEFT );

	return $hex;
}

//--


function aweaver_put_color( $sout, $id, $tag, $important = false ) {
	// put color and CSS+

	if ( ( $color = aweaver_getopt( $id ) ) && $color != 'inherit' ) {
		if ( $important ) {
			aweaver_f_write( $sout, sprintf( "$tag {color:$color !important;}\n" ) );
		} else {
			aweaver_f_write( $sout, sprintf( "$tag {color:$color;}\n" ) );
		}
	}

	aweaver_put_css_plus( $sout, $id, $tag );
}


function aweaver_put_css_plus( $sout, $id, $tag ) {

	if ( ( $style = aweaver_getopt( $id . '_css' ) ) ) {
		global $wvrx_css_plus;
		$prefix = '';
		$suffix = '';

		if ( is_customize_preview() ) {    // Generate a rule that can be easily modified in the DOM
			$prefix = "/*-=:{$id}_css:=-*/";
			$suffix = "/*-:{$id}_css:-*/";
		}

		if ( strpos( $style, '%selector' ) !== false ) {     // user is using $selectors
			$tags = explode( ',', $tag );
			foreach ( $tags as $selector ) {
				$replaced      = str_replace( '%selector%', trim( $selector ), $style );
				$wvrx_css_plus .= apply_filters( 'aweaver_css', sprintf( "%s%s %s%s\n", $prefix, $selector, $replaced, $suffix ) );
				//aweaver_f_write( $sout, apply_filters( 'aweaver_css', sprintf( "%s%s %s%s\n", $selector, $replaced ) ) );
			}
		} else {
			$wvrx_css_plus .= apply_filters( 'aweaver_css', sprintf( "%s%s %s%s\n", $prefix, $tag, $style, $suffix ) );
			// aweaver_f_write( $sout, apply_filters( 'aweaver_css', sprintf( "%s %s\n", $tag, $style ) ) );
		}
	}
}


function aweaver_put_rule_if_checked( $sout, $id, $rule ) {
	// put just a rule if checked

	if ( aweaver_getopt_checked( $id ) ) {
		aweaver_f_write( $sout, $rule . "\n" );
	}
}


function aweaver_put_rule_if_not_checked( $sout, $id, $rule ) {
	// put just a rule if not checked

	if ( ! aweaver_getopt_checked( $id ) ) {
		aweaver_f_write( $sout, $rule . "\n" );
	}
}

function aweaver_put_elementor_colors( $sout ) {
	/* generate CSS to override Elementor styling */

	$color_1 = aweaver_getopt( 'elementor_primary_color' );
	$color_2 = aweaver_getopt( 'elementor_secondary_color' );

	$color_3 = aweaver_getopt( 'elementor_text_color' );
	$color_4 = aweaver_getopt( 'elementor_accent_color' );


	/* PRIMARY COLOR */
	if ( $color_1 ) {
		aweaver_f_write( $sout,
			"/*PRIMARY*/.elementor-widget-heading .elementor-heading-title{color:{$color_1};}
.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:{$color_1};}
.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:{$color_1};border-color:{$color_1};}
.elementor-widget-image-box .elementor-image-box-content .elementor-image-box-title{color:{$color_1};}
.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:{$color_1};}
.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:{$color_1};border-color:{$color_1};}
.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:{$color_1};}
.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{color:{$color_1};border-color:{$color_1};}
.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title{color:{$color_1};}
.elementor-widget-icon-list .elementor-icon-list-icon i{color:{$color_1};}
.elementor-widget-counter .elementor-counter-number-wrapper{color:{$color_1};}
.elementor-widget-progress .elementor-progress-wrapper .elementor-progress-bar{background-color:{$color_1};}
.elementor-widget-progress .elementor-title{color:{$color_1};}
.elementor-widget-testimonial .elementor-testimonial-name{color:{$color_1};}
.elementor-widget-tabs .elementor-tab-title{color:{$color_1};}
.elementor-widget-accordion .elementor-accordion .elementor-tab-title{color:{$color_1};}
.elementor-widget-toggle .elementor-toggle .elementor-tab-title{color:{$color_1};}
" );
	}


	/* SECONDARY COLOR */
	if ( $color_2 ) {
		aweaver_f_write( $sout,
			"/*SECONDARY*/.elementor-widget-icon-list .elementor-icon-list-text{color:{$color_2};}
.elementor-widget-counter .elementor-counter-title{color:{$color_2};}
.elementor-widget-testimonial .elementor-testimonial-job{color:{$color_2};}
" );
	}


	/* TEXT COLOR */
	if ( $color_3 ) {
		aweaver_f_write( $sout,
			"/*TEXT*/.elementor-widget-image .widget-image-caption{color:{$color_3};}
.elementor-widget-text-editor{color:{$color_3};}
.elementor-widget-divider .elementor-divider-separator{border-top-color:{$color_3};}
.elementor-widget-image-box .elementor-image-box-content .elementor-image-box-description{color:{$color_3};}
.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-description{color:{$color_3};}
.elementor-widget-icon-list .elementor-icon-list-item:not( :last-child ):after{border-top-color:{$color_3};}
.elementor-widget-testimonial .elementor-testimonial-content{color:{$color_3};}
.elementor-widget-tabs .elementor-tab-content{color:{$color_3};}
.elementor-widget-accordion .elementor-accordion .elementor-tab-content{color:{$color_3};}
.elementor-widget-toggle .elementor-toggle .elementor-tab-content{color:{$color_3};}
" );
	}

	/* ACCENT COLOR */
	$accent_color = '';
	if ( $color_4 ) {
		aweaver_f_write( $sout,
			"/*ACCENT*/.elementor-widget-button a.elementor-button, .elementor-widget-button .elementor-button{background-color:{$color_4};}
.elementor-widget-tabs .elementor-tab-title.elementor-active{color:{$color_4};}
.elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active{color:{$color_4};}
.elementor-widget-toggle .elementor-toggle .elementor-tab-title.elementor-active{color:{$color_4};}
" );
	}
}