<?php 


	//GENERAL
	$bgd_color = esc_html( get_theme_mod('bgd_color', '#ffffff') );
	$box_bgd = esc_html( get_theme_mod('box_bgd', '#f5f5f5') );
	$box_txt = esc_html( get_theme_mod('box_txt', '#444') );
	$box_title =  esc_html( get_theme_mod('box_title', '#444') );
	$box_primary_bgd = esc_html( get_theme_mod('box_primary_bgd', '#ebf7fd') );
	$box_primary_txt = esc_html( get_theme_mod('box_primary_txt', '#2d7091') );
	$box_primary_title =  esc_html( get_theme_mod('box_primary_title', '#2d7091') );

	//TYPOGRAPHY
	$text_color = esc_html( get_theme_mod('text_color', '#444') );
	$text_primary_color = esc_html( get_theme_mod('text_primary_color', '#2d7091') );
	$text_muted_color = esc_html( get_theme_mod('text_muted_color', '#999') );
	$textlink_color = esc_html( get_theme_mod('textlink_color', '#07d') );
	$textlink_color_hover = esc_html( get_theme_mod('textlink_color_hover', '#059') );


	//NAVIGATION
	$button_bgd = esc_html( get_theme_mod('button_bgd', '#eee') );
	$button_bgd_hover = esc_html( get_theme_mod('button_bgd_hover', '#f5f5f5') );
	$primary_button_bgd = esc_html( get_theme_mod('primary_button_bgd', '#00a8e6') );
	$primary_button_bgd_hover = esc_html( get_theme_mod('primary_button_bgd_hover', '#35b3ee') );
	$icon_button_bgd = esc_html( get_theme_mod('icon_button_bgd', '#eee') );
	$icon_button_bgd_hover = esc_html( get_theme_mod('icon_button_bgd_hover', '#f5f5f5') );
	$navbar_bgd = esc_html( get_theme_mod('navbar_bgd', '#eee') );
	$navbar_bgd_hover = esc_html( get_theme_mod('navbar_bgd_hover', '#ddd') );
	$navbar_bgd_active = esc_html( get_theme_mod('navbar_bgd_active', '#f5f5f5') );
	$navbar_bgd_dropdown = esc_html( get_theme_mod('navbar_bgd_dropdown', '#f5f5f5') );

	$bst_customizercss = "

		/* GENERAL */
		html {
			background: {$bgd_color};
			color: {$text_color};
			font: 400 14px/20px 'Open Sans'; 
		}

		.uk-panel-box {
			background-color: {$box_bgd};
			color: {$box_txt};
		}

		.uk-panel-box .uk-panel-title, 
		.uk-panel-box .uk-article-meta {
			color: {$box_title}; 
		}

		.uk-panel-box-primary {
			background-color: {$box_primary_bgd};
			color: {$box_primary_txt};
		}

		.uk-panel-box-primary .uk-panel-title {
			color: {$box_primary_title}; 
		}



		/* TYPEOGRAPHY */
		h1,h2,h3,h4,h5,h6,
		.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6 {
			font-family: 'Merriweather'; 
		}

		.uk-text-primary {
			color: {$text_primary_color} !important; 
		}

		.uk-text-muted {
			color: {$text_muted_color} !important; 
		}

		a, 
		.uk-link, 
		.uk-nav-side ul a, 
		.uk-nav-dropdown ul a, 
		.uk-nav-navbar ul a, 
		.uk-navbar-content > a:not([class]), 
		.uk-subnav > * > a,
		.uk-subnav > * > :focus, 
		.uk-subnav > .uk-active > * , 
		.uk-tab > li > a, 
		.uk-button-link {
			color: {$textlink_color}; 
		}

		a:hover, 
		.uk-link:hover, 
		.uk-nav-side ul a:hover, 
		.uk-nav-dropdown ul a:hover, 
		.uk-nav-navbar ul a:hover, 
		.uk-navbar-content > a:not([class]):hover, 
		.uk-subnav > * > :hover,
		.uk-subnav > * > :focus, 
		.uk-subnav > .uk-active > *, 
		.uk-tab > li > a:hover, 
		.uk-button-link:hover {
			color: {$textlink_color_hover}; 
		}



		/* NAVIGATION */
		.uk-button {
			background-color: {$button_bgd}; 
		}

		.uk-button:hover,
		.uk-button:focus {
			background-color: {$button_bgd_hover}; 
		}

		.uk-button-primary, 
		.uk-pagination > .uk-active > span,
		.uk-contrast .uk-button-primary, 
		.uk-pagination > .uk-active > span {
			background-color: {$primary_button_bgd}; 
		}

		.uk-button-primary:hover,
		.uk-button-primary:focus,
		.uk-contrast .uk-button-primary:hover,
		.uk-contrast .uk-button-primary:focus {
			background-color: {$primary_button_bgd_hover}; 
		}

		.uk-icon-button {
			background-color: {$icon_button_bgd}; 
		}

		.uk-icon-button:hover,
		.uk-icon-button:focus {
			background-color: {$icon_button_bgd_hover}; 
		}

		.uk-navbar {
			background-color: {$navbar_bgd};
			 }

		.uk-navbar-nav > li > a {
			font-family: 'Open Sans';
		}

		.uk-navbar-nav > li:hover > a,
		.uk-navbar-nav > li > a:focus,
		.uk-navbar-nav > li.uk-open > a, 
		.uk-navbar-nav > li.uk-active > a, 
		.uk-nav-navbar > li > a:hover  {
			background-color: {$navbar_bgd_hover}; 
		}

		.uk-navbar-nav > li.uk-active > a {
			background-color: {$navbar_bgd_active};
		}

		.uk-dropdown, 
		.uk-dropdown-navbar {
			background-color: {$navbar_bgd_dropdown};
		}

	";