/*
Theme Name: SCG 2013 - the why approach
Theme URI: sunchildgarden.com
Description: A minimalist WordPress template theme built with HTML 5 based on Jeff Starrs Version 1 of H5.
Version: 1.0
Author: Sascha MT Knopp
Author URI: http://sosascha.com
Tags: minimalist, template, html5

	H5 v1.0
	http://diggingintowordpress.com/

	This theme was lovingly designed and developed by Jeff Starr, 
	and taken to next steps by smtk. Still work in progress!

	The CSS, HTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-3.0.html
*/

/*
	colors:
	scg-red: dc4040 / 220,64,64
	better furious red: #d7131f;
	better furious darker red: #C5282D;

	immensily beautiful brown google navigation bar color: #393832;https://support.google.com/chrome/answer/95671?hl=en

		really nice grey: color: #a1a1a1;
	light grey: #EEE
	border darker light grey: d5d2d2
	
	full width: 972px
	standard space: 12px (x6 = 72px)
	standard box width: 180px
	double box width: 372px (180+12+180)
	triple box width: 564px (180+12+180+12+180)
	quad box width: 756px
	fivefold box width: 948px

	gradient:
	background: #A22125; /* for non-css3 browsers - BASE SCG RED: #DC4040 */
	/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
	/* background: -webkit-gradient(linear, left top, left bottom, from(#BA676B), to(#A22125)); /* for webkit browsers */
	/*background: -moz-linear-gradient(top,  #BA676B,  #A22125); /* for firefox 3.6+ */ /*
	
	shadows - how beautiful:
	-moz-box-shadow: 3px 3px red, -1em 0 0.4em olive;
	-webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive;
    box-shadow: 3px 3px red, -1em 0 0.4em olive;
	
	
	grey gradient for the navigation:
	background-image: linear-gradient(bottom, rgb(161,161,161) 9%, rgb(238,238,238) 80%);
	background-image: -o-linear-gradient(bottom, rgb(161,161,161) 9%, rgb(238,238,238) 80%);
	background-image: -moz-linear-gradient(bottom, rgb(161,161,161) 9%, rgb(238,238,238) 80%);
	background-image: -webkit-linear-gradient(bottom, rgb(161,161,161) 9%, rgb(238,238,238) 80%);
	background-image: -ms-linear-gradient(bottom, rgb(161,161,161) 9%, rgb(238,238,238) 80%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.09, rgb(161,161,161)),
		color-stop(0.8, rgb(238,238,238))
	);
	
*/
/**** KEY COLOR DEFINITIONS: ****/ 

/* (NEW) SCG DARK RED is rgb(192, 28, 27) or #C01C1B */
/* Should be used for headlines, links, call to action, everything important and strong.

/* FFF plain WHITES, ie for backgrounds of regular text: #fff: */

/* DDD-GREYs - mostly for borders: #ddd: */

/* EEE-GREYs - mostly for backgrounds: #eee: */
/* FONT ON EEE-GREY IN #646464; */
/* A MORE SOFT RED for small links on EEE-grey: rgb(207, 75, 88) or #CF4B58 */


/* == BASICS == */


header, footer, section, article, aside, nav {
	display: block;
	}
body {
	margin: 0 auto;
	/*width: 972px;*/

	font-family: 'Open Sans', 'Skia', 'Lucida Grande', 'Verdana', 'Tahoma', 'Arial', 'Helvetica', 'sans-serif';
	

	/*background-color: #F4AF54;*/
}
ol {
	margin: 12px;	
	padding: 12px;
}
.clearboth {
	clear: both;
}
.display-inline {
	display: inline;
}
.alignright {
	float:right;
	margin: 0 0 12px 12px;
}
.alignleft {
	float: left;
	margin: 0 12px 12px 0;
}
.aligncenter {
	margin: 0 auto 12px auto;
}

input {
	font-size: 1.0em;
	background: #fff;
	border:1px solid #ddd;
	margin: 0px;
	cursor:pointer;
	height: 30px;
}
input[type="submit"] {
	margin: 8px 4px 4px 0px;
	font-size: 1.0em;
	border:1px solid;
	cursor:pointer;
	color: #fff;
	border: #C01C1B; 
	background: #C01C1B; 
}
textarea {
	font-size: 1.0em;
	border:1px solid #ddd;
	margin: 0px;
	cursor:pointer;
}
p.wp-caption-text {
	font-size: 0.8em;
}
/* for a definition of the "+" sign, see here: http://www.w3.org/TR/CSS2/selector.html "adjacent sibling selector", it means, that when section directly followes nav, then it should have the defined parameters: */

/* I think, I don't need this anymore, though: */
/* nav+section { 
	overflow: hidden;
	width: 600px;
	float: left;
	clear: none;
	}*/
	
customsection {
	/* overflow: hidden;
	width: 900px;*/
	
	clear: both;
	display: block;
	}

/* more sections: */

/* this is entire white content area section: */
#content-area {
	overflow: hidden;
	clear: both;
	background: #fff;
	
	/*width: 948px; /* it's 972 in total (plus the following 12px padding left and right)*/
	padding: 0 0 0 0; /* used to be: 1em 12px 0 12px;*/
	
	
	/* rounded corners */
	/*-moz-border-radius: 0 4px 4px 4px;
	-webkit-border-radius: 0 4px 4px 4px;*/
	
	/* shadows how beautiful 999 eee*/
	/*-moz-box-shadow:  3px 3px 1em #eee, -3px 3px 2em #ddd;
    -webkit-box-shadow: 3px 3px 1em #eee, -3px 3px 2em #ddd;
    box-shadow: 3px 3px 1em #eee, -3px 3px 2em #ddd;*/	
}
#main-content-area {
	/*float: left;*/
	/*width: 564px;/* :triple box */
	margin-top: -15px;
}
/*section { /* no idea, why i defined this, but it kind of messed up the footer, so i let it go: 
	clear: both;
}*/


/* == LINKS == */

a:link, a:visited,
a:hover, a:active {
	text-decoration: underline;
	color: #C01C1B;
}
.grey-button {
	padding: 8px;
	margin: 0px 0px 16px 0px;
	border: 1px solid #eee;
	font-size: 0.8em;
	background: #eee;
}

/* == HEADER == */

body>header {
	/*background: #111;*/
	/*color: #ccc;*/
	padding: 0px 0px 12px 0px;
	
	/*background-image: url(images/bg_SCG_big.jpg);
	background-repeat: repeat-x;*/
	/*background: #fbfbfb;
	/*background: #f7f7f7;*/
	}
	body>header h1 {
		margin: 0;
		
		font-size: 2.0em; /* was 2.4 */
		}
		body>header h1 a:link, body>header h1 a:visited, 
		body>header h1 a:hover, body>header h1 a:active {
			text-decoration: none;
			color: #C01C1B;
			}
	body>header h2 {
		font-size: 0.8em;
		margin: 0 0 12px 0;
		color: #C01C1B;
		}

#logo_box {
	float: left;
	margin: -0.4em 0.9em 0.5em 0.8em;
	position: absolute;
	z-index: 10;
	
	padding: 1.7em 0.2em 0em;
	background: #C01C1B;
	
	-webkit-box-shadow:1px 1px 8px 0px #000;
	-moz-box-shadow:1px 1px 8px 0px #000;
	box-shadow:1px 1px 8px 0px #000;
	
	/* rounded corners */ 
	/*-moz-border-radius: 0 0 0.4em 0;
	-webkit-border-radius: 0 0 0.4em 0;
	border-radius: 0 0 0.4em 0;*/
	}

#svg2 { /* here comes the svg logo style: */
	width: 5.8em; /* used to be 121px x 121px */
	height: 8em;
	/*display: none;*/
}
#svg2 g#layer1 path {
	fill: #fff !important;
}
#title_box {
	padding: 1.8em 0 0 8em;
	float: left;	
}
#title_box h1, #title_box h2 {
		font-family: 'Skia', 'Lucida Grande', 'Verdana', 'Tahoma', 'Arial', 'Helvetica', 'sans-serif';
}
#headersettings {
	float: right;
	width: 180px;
	font-size: 0.8em;
}
#headersettings span.widget-title {
	float: left;
}
#headersettings a.menu-item-link-area {
	text-transform:lowercase;
}
	
/* == NAVIGATION == */
nav {
	/*text-align: center;*/
	clear: both; 
}
#page-posts p {
	margin: 16px 0px 8px 0px;
}
body>nav, body>nav ul { /* all lists */
	padding: 0 0 0 3.7em;
	margin: 0 ;
	list-style: none;
	overflow: hidden;
	
	/* gradient background old red: */
	background: #C01C1B; /* for non-css3 browsers - BASE SCG RED: #DC4040 */

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C01C1B', endColorstr='#85181C'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#C01C1B), to(#85181C)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #C01C1B,  #85181C); /* for firefox 3.6+ */

}

body>nav li { /* all list items */
	float: left;
	/*width: 10em; /* width needed or else Opera goes nuts */
	width: auto; /* hope this works for opera, else try "min-width" */
	border-right: 1px solid #C01C1B;
}

body>nav a {
	display: block;
	/*width: 10em;*/
	height: 2.8em;
	/* new: height: 64px;	*/	
	padding: 2px 14px 0 12px;
	
	/*font-style: italic;*/
	/*line-height: 28px;*/
	line-height: 2.8em;
	letter-spacing: 0px;
	/*font-weight: bold;*/
	font-size: 1.3em;
	/*font-family: tahoma,sans-serif;*/

	
	/* rounded corners */ 
	/*-moz-border-radius: 4px 6px 0px 0px;
	-webkit-border-radius: 4px 6px 0px 0px;	 */
	
	
	/* new grey gradients coming up: */
	/* background-image: linear-gradient(bottom, rgb(161,161,161) 9%, rgb(238,238,238) 80%);
	background-image: -o-linear-gradient(bottom, rgb(161,161,161) 9%, rgb(238,238,238) 80%);
	background-image: -moz-linear-gradient(bottom, rgb(161,161,161) 9%, rgb(238,238,238) 80%);
	background-image: -webkit-linear-gradient(bottom, rgb(161,161,161) 9%, rgb(238,238,238) 80%);
	background-image: -ms-linear-gradient(bottom, rgb(161,161,161) 9%, rgb(238,238,238) 80%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.09, rgb(161,161,161)),
		color-stop(0.8, rgb(238,238,238))
	);*/
}

body>nav a:link, body>nav a:visited,
body>nav a:hover, body>nav a:active {/* styling of the first level nav items */
	text-decoration: none;
	color: #fff;
}
body>nav a:hover { /* first level navigation background when in hover-state */
	/* no gradient background */
	background: #C01C1B; /*- old red */
	/* new: background:  #000;*/
}
body>nav li ul { /* second-level lists */
	position: absolute;
	
	width: 10em; /* for unknown reasons required to block-style the second level navi instead of display all items inline */
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	
	background: #fff;
		
}
body>nav li ul li {
	width: 10em;
	
} 
body>nav li ul a { /* styling of the second level nav items */
	background: #eee;
	border: 1px solid #ddd;	
	
	/* no rounded corners here and below */ 
	-moz-border-radius: 0 0 0 0;
	-webkit-border-radius: 0 0 0 0;
}
body>nav li ul a:link, body>nav li ul a:visited, 
body>nav li ul a:hover, body>nav li ul a:active {
	text-decoration: none;
	color: #C01C1B;
}
body>nav li ul a:hover { 
	background: #ddd;
	border: 1px solid #ccc;	
}
body>nav li ul ul { /* third-and-above-level lists */
	/*margin: -1em 0 0 10em;*/
	margin: -2.3em 0 0 10em;
} 
body>nav li:hover ul ul, body>nav li:hover ul ul ul, body>nav li.sfhover ul ul, body>nav li.sfhover ul ul ul {
	left: -999em;
}
body>nav li:hover ul, body>nav li li:hover ul, body>nav li li li:hover ul, body>nav li.sfhover ul, body>nav li li.sfhover ul, body>nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}
/* only to fix it for the IEs (using the sfhover suckerfish js file: */
body>nav li:hover ul, body>nav li.sfhover ul {
	left: auto;
}

#menu-topnavi .menu-element-description { /* smtk: this eats all the descriptions from the top-navi (makes them invisble) */
	display: none; 
}

/* == BREADCRUMB == */

.breadcrumb {
	/*border-bottom: 1px solid #ccc;*/
	/*padding: 6px 0 0 4px;
	margin: 0px -4px 0px -4px;/*-12px;*/
	/*margin: -4px -12px 0px -12px;
	/*height: 20px;*/
	/*min-width: 10px;	*/
	padding: 0 0 0 8px;
	margin: 0;
	color: #ccc;
	color: #bbb;
	font-style: italic;
	
	/* rounded corners */ 
	/*-moz-border-radius: 0px 0px 4px 4px;
	/*-webkit-border-radius: 0px 0px 4px 4px;

	/* gradient background */
	background: #eee; /* for non-css3 browsers - BASE SCG RED: #DC4040 */

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#fff'); /* for IE */
	background: -webkit-gradient(linear, left top, right top, from(#eee), to(#fff)); /* for webkit browsers */
	background: -moz-linear-gradient(left,  #eee,  #fff); /* for firefox 3.6+ */ 
	
	background: #eee;
}
.breadcrumb li {
	list-style: none;
	display: inline;
}
.breadcrumb a {
	padding: 0px 4px 4px 4px;
	font-size: 0.9em;
}
.breadcrumb a:link, .breadcrumb a:visited {
	text-decoration: none;
	color: #ccc;
	color: #bbb;
}
.breadcrumb a:hover, .breadcrumb a:active {
	text-decoration: underline;
	color: #aaa;
	color: #646464;
}

/* == TEASER == */
/* class names of page teaser widget: fpw-layout-wrapped, fpw-layout-big, fpw-layout-banner */
.widget-container {

}
#index-first-row {
	display: block;
}
#index-first-row ul {
	padding: 0;
}

#index-first-row .widget_fpw_widget {
	position: relative; /* first block is part of css hack, see below */
	overflow: hidden;

	list-style: none;
	/*min-height: 240px;*/
	/*width: 50%;
	float: left;*/

	color: #fff;

	/*padding: 160px 0 0;*/
	/*height: 80px;*/
	
	/*display: block;
	/*background-color: rgba(255,0,0,0.5);
	border: 3px solid blue;*/
	

}
#index-first-row .fpw-page-title {
		
	position: absolute; /* first block is part of the css hack to set it above the picture, this one specifically put the excerpt upon the background color. */
	color: #fff;
	font-size: 2em;
}
#index-first-row .fpw-featured-image {
	position: absolute; /* first block is part of the css hack */
	/*top: -50%;*/
	/*width: 80px;*/
}
.attachment-fpw_custom_thumbnail { /*smtk: to fix the 3.7.1 problem of inline height and width=1. */
	width: 100%;	
}


#index-first-row .fpw-layout-wrapped {
	display: none;
}
#index-first-row .fpw-layout-banner {
	display: none;
	
	width: 100%;
	height: 400px;
	position: relative;
}
#index-first-row .fpw-layout-big {
	display: block;
	height:500px;
	
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) /*, 3px 3px 5px #C5282D*/;
	
	/* fallback coloring, if there's no page image: */
	background-color: rgba(255,0,0,0.5);
	
	background-image: linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -o-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -moz-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -webkit-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -ms-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);

	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, rgba(222,0,144,0.4)),
		color-stop(0.92, rgba(240,255,28,0.4)),
		color-stop(0.09, rgba(255,84,141,0.4))
	);

}
#index-first-row .fpw-layout-big a.fpw-featured-link-button { 

	display: block;
	position: absolute;
	z-index: 5;
	height: auto;
	width: auto;
	
	background: white;
	padding: 20px !important;
	border: 4px solid #C01C1B;/* rgba(0,0,0,0.4);*/
	
	top:82%;
	right:2em;
	
	text-shadow: none;
	-moz-box-shadow:    1px 1px 30px 1px rgba(0, 0, 0, 0.4);
  	-webkit-box-shadow: 1px 1px 30px 1px rgba(0, 0, 0, 0.4);
  	box-shadow:         1px 1px 30px 1px rgba(0, 0, 0, 0.4);

}
#index-first-row .fpw-layout-big .fpw-featured-image {
	position: absolute; 
	top: -25%;
}

#index-first-row .fpw-layout-big .fpw-excerpt {
	position: absolute;
	top: 70%;
	padding: 1%;
	font-size: 1.1em;
}

#index-first-row .fpw-layout-big .fpw-page-title {
	top: 60%;
	padding: 1%;
	color: #fff;
}

.fpw-layout-big .fpw-featured-image-copyright-caption {
	position: absolute;
	color: #D3D3D3;
	bottom: 0.5%;
	font-size: 0.005em;
	padding-left: 1%;
}

#index-second-row {
	/*display: none;*/
	
}

/* == MENUs == */

ul {
	list-style: none;
	padding: 0;
}

#menu-home2 li.menu-item, #menu-home2_en li.menu-item {
	height: 300px;
	font-size: 2em;

    overflow: hidden;
    position: relative;
    width: 50%;
    float: left;
} 

#menu-home2 img.wp-post-image, #menu-home2_en img.wp-post-image {
	position: absolute;
	top: -33%;
	max-width: 100% !important;
	height: auto !important;
}
#menu-home2 span.image-caption, #menu-home2_en span.image-caption {
	position: absolute;
	bottom: 0.5%;
	font-size: 0.005em;
	color: #D3D3D3;
	padding-left: 2%;
}
#menu-home2 span.linked-page-title, #menu-home2_en span.linked-page-title {
	position: absolute;
	color: #fff;
	/*width: 100%;
	height: 100%;*/
	padding: 2%;
	bottom: 5%;
	
	background-color: rgba(255,0,0,0.5);
	
	background-image: linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -o-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -moz-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -webkit-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -ms-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);

	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, rgba(222,0,144,0.4)),
		color-stop(0.92, rgba(240,255,28,0.4)),
		color-stop(0.09, rgba(255,84,141,0.4))
	);
}
#menu-home2 a { /* smtk: required when menu without image: */
	/*display: block;
	height: 100%;
	width: 100%;*/
}
#menu-home2 a:link, #menu-home2 a:visited, #menu-home2 a:hover, #menu-home2 a:active {
	/* smtk: required when menu without image: */
	/*width: 100%;
	height: 100%;*/
}
#menu-home2 a:link, #menu-home2 a:visited, #menu-home2_en a:link, #menu-home2_en a:visited { /* smtk: required when menu without image: */
	text-decoration: none;
}
#menu-home2 a:hover, #menu-home2 a:active, #menu-home2_en a:hover, #menu-home2_en a:active { /* smtk: required when menu without image: */
	text-decoration: underline;
}
#menu-home2 a span.page-title:link, #menu-home2 a span.page-title:visited, #menu-home2_en a span.page-title:link, #menu-home2_en a span.page-title:visited  {
	text-decoration: none;
}
#menu-home2 a span.page-title:hover, #menu-home2 a span.page-title:active, #menu-home2_en a span.page-title:hover, #menu-home2_en a span.page-title:active {
	text-decoration: underline;
}

#menu-home2 a.menu-element-link-area, #menu-home2_en a.menu-element-link-area {
	display: block;
	margin: 5% auto 0;
	padding: 0 2%;
	
}
#menu-home2 a.menu-element-description, #menu-home2_en a.menu-element-description {
	display: block;
	position: absolute;
	padding: 2%;
	color: #d5d2d2;
	font-size: smaller;
}

/* == WOOCOMMERCE DESIGN == */
.shop-content-area {	
	margin: 2% 2% 0 !important; 
}
#content-area h1 {
	color: #C01C1B;
}

.woocommerce-info {
	border-top: 3px solid #C01C1B !important;
}
.woocommerce-info:before {
	background-color: #C01C1B !important;
}
.woocommerce-message, .woocommerce-error, .woocommerce-info {
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
	/*-webkit-box-shadow: none !important;
	box-shadow: none !important;*/
}
img.attachment-shop_single { /* set a maximum height for the pdv image and position it centered */
	width: 50% !important; 
	max-height: 360px !important;
	
	margin: 0 auto;
}
a.woocommerce-main-image { /*req. to make room for centered positioning */
	display: block; 
}
.woocommerce div.product p.price, .woocommerce-page div.product p.price {
	color: #C01C1B !important;
}
.woocommerce button.button.alt, .woocommerce-page button.button.alt {
	background: #C01C1B !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C01C1B', endColorstr='#85181C') !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#C01C1B), to(#85181C)) !important;
	background: -webkit-linear-gradient(#C01C1B,#85181C) !important;
	background: -moz-linear-gradient(top, #C01C1B, #85181C) !important;
}


/* == POSTS == */

/*smtk: fyi: all the .sticky classes in the following, 
	are for the special design of sticky posts. */ 

.article-info {
	/*margin: 0px 0px 0px 4px;*/
	/*background: blue;*/
}

.category-tags {
	display: block;
	margin: 0px 0px 16px 0px;
}

.single-post-image {
	display: block;
	margin-bottom: 12px;
}

article>section>a>img {
	display: block;
	float: left;
	
	margin: 0px 1.8em 1.8em 0px;
	
	/*border-style: solid;
	border-width: 1px;
	border-color: #ddd; /*#d5d2d2;*/
	
	/* rounded corners */
	/*-moz-border-radius: 4px;
	-webkit-border-radius: 4px; */
	
	/*margin: 0 auto;*/
}


article>hr {
	border: 0px; /* Für Firefox und Opera */
	border-bottom: transparent;
	border-top: solid 1px #ddd; /* #d5d2d2;*/
	margin: 0px 0px 12px 12px;
}


article[id*=post-] {
	
	
	/* padding: 0px 12px 0px 12px; */

	/*background: #fff; */
	
	
	/* rounded corners */
	/*-moz-border-radius: 4px;
	-webkit-border-radius: 4px;*/
	
	/* to enclose all the floating elements: */
	/*overflow: auto; */
	width: 58%;
	margin: 0 auto;
	overflow: hidden; /* :to enclose all child elements */
	margin-top: 3em;
	}
/*article:before { /*to stop the float of the stickies :) */
  /* content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}*/
article p {
	margin-top: 0px;
}

article>header {
	margin: 0px 0px 16px 0px;
}
article>header h1 {
	margin: 0px;
	color: #C01C1B; 
	
	font-size: 2em;
	}
article>header a:link, article>header a:visited {
	text-decoration: none;
}

article>header a:hover, article>header a:active {
	text-decoration: underline;
}
article>header p {
	padding-top: 8px;
}
article>header p ,
article>footer p {
	font-style: italic;
	color: #646464;
	font-size: 0.8em;
	margin: 0px 0px 12px 0px;
	}

article>footer {
	clear: both;
	background: #eee;
	padding: 12px 12px 0px 12px;
	margin-bottom: 12px;
	border: 1px solid #ddd;
	
	/* rounded corners */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	
	
}

article>footer a:link, article>footer a:visited,
article>footer a:hover, article>footer a:active {
	color: #CF4B58;
}
article+nav {
	font-weight: bold;
	}
section>h1 {
	padding-top: 10px;
	}
article>section p {
	font-size: 1.1em;
}
article>section p b {
	color: #C01C1B;
}
#stickybox {
	width: 100%;
	/*border: 1px blue solid;*/
	overflow: auto;
	margin-bottom: 2em;
	
}	
article[id*=sticky-].sticky {	
	
	min-height: 240px; 
	/*width: 460px;*/
	/*width: 50%;*/
	min-width: 50%;
	
	/*width: auto;*/
	float: left;
	overflow: hidden;
    _overflow: visible; /* for IE */
    _zoom: 1; /* for IE */
	
	/*-webkit-box-shadow:1px 1px 8px 0px #000;
	-moz-box-shadow:1px 1px 8px 0px #000;
	box-shadow:1px 1px 8px 0px #000;*/

}
article.sticky>header {
	margin: 0px 0px 0px 0px;
}
article.sticky>header a:link, article.sticky>header a:visited {
	/*text-decoration: none;*/
	color: #fff;
	
	/*position: absolute;
	z-index: 2;
	width:480px;*/
	padding: 160px 24px 0;
	height: 80px;
	
	display: block;
	background-color: rgba(255,0,0,0.5);
	
	background-image: linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -o-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -moz-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -webkit-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);
	background-image: -ms-linear-gradient(left top, rgba(222,0,144,0.4) 0%, rgba(240,255,28,0.4) 92%, rgba(255,84,141,0.4) 9%);

	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, rgba(222,0,144,0.4)),
		color-stop(0.92, rgba(240,255,28,0.4)),
		color-stop(0.09, rgba(255,84,141,0.4))
	);
	
}
article.sticky>header p.article-info {
	display: none;
}
article.sticky>section>a {
	width: 480px;
	margin: 0 auto;
	display: block;
}
article.sticky>section>a>img {

	/*position: absolute;
	z-index: 1;
	width: 42%;
	max-width: 100%;*/
}
article.sticky>section>p {
	/*position: absolute;
	z-index: 3;
	margin-top: 100px;
	width:460px;*/
	display: none;
		
	/*overflow: hidden;*/
}
article.sticky>section>span.category-tags {
	display: none;
}
article.sticky>header h1 {
	font-size: 2em;
}
article.sticky>footer {
	display: none;
}

/* == COMMENTS == */

#comments-section {
	background: #eee;
	padding: 12px 12px 12px 12px;
	border-color: #ddd;
	border-style: solid;
	border-width: 1px 1px 0px 1px;
	width: 538px;
	/* rounded corners */
	-moz-border-radius: 4px 4px 0px 0px;
	-webkit-border-radius: 4px 4px 0px 0px;
}
.single-comment-section {
	width: 538;	
	padding-left: 72px;
	padding-bottom: 12px;	
}
#comments-section h3 {
	margin: 0px 0px 12px 0px;
}

.avatar.avatar-48.photo {
	float: left;
	padding: 12px 12px 0px 12px;
}
article[id*=comment-] {
	background: #fff;
	
	margin-bottom: 4px;
	}
	article[id*=comment-] h4 {
		margin: 0;
		padding: 20px 12px 0px 12px;
		
		font-size:0.8em;
		font-style:italic;
		}
	article[id*=comment-] p {
		margin: 0;
		}

	.alt {
		/*border: 1px solid #ddd;
		background: lime; /*#eee;*/
		}
#comments-form {
	background: #eee;
	padding: 12px 12px 12px 12px;
	margin-bottom: 12px;
	border: 1px solid #ddd;
	width: 538px;
	/* rounded corners */
	-moz-border-radius: 0px 0px 4px 4px;
	-webkit-border-radius: 0px 0px 4px 4px;
}
#comments-form>form>input {
	margin-bottom: 12px;
	
}
#input-area {
	background: #fff;
	padding: 4px;
	border: 1px solid #ccc;
	
	/* rounded corners */
	-moz-border-radius: 0px 0px 4px 4px;
	-webkit-border-radius: 0px 0px 4px 4px;
}
#input-area form[method=post] label {
	display: block;
}
#input-area textarea {
	display: block;	
	float: left;
	border: 0 none;
	margin: 0px 0px 4px 0px;
	height: 80px;
	font-size: 1.2em;
	width: 420px;
	}
	#input-area form[method=post] textarea:focus {
	/*	height: 100px;*/
	}
#input-area input[type="submit"] {
	margin: 54px 0px 0px 12px;
}

/* == SIDEBAR == */
aside {
	overflow: hidden;	
	width: 372px;
	float: right; 
	clear: none;
	color: #C01C1B;
	margin: 48px 0; 
	
	/* in for sticky: */
	width: 100%;
	float: none;
	/* end in for sticky */
	
	}
	aside h1 {
		display: block;
		font-size: 1.3em;
		color: #C01C1B;
	}
	aside ul {
		padding: 0px 0px 0px 0px;
		}
	aside>ul>li {
		
		/*font-size: 1em;*/
		color: #000;
		
		list-style: none;
		background: #fff;	
					
		border: 1px solid #ccc;		
		padding: 0px 12px 12px 12px;
		margin: 12px 0px 12px 0px; 
		
		/* rounded corners */
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		
		}
		aside li ul li {
			list-style: disc outside;
			margin: 0px 0px 0px 12px; 
			}

/* == FOOTER == */

/* body>footer { */
#footer {
	width: 100%;
	
	border-top: 1px solid #dfdfdf;
	background-color: #f7f7f7;
	
	margin-top: 40px;
	
	}
#footer h3 {
	font-size: 1em;
	margin-bottom: 0;
	line-height: normal;
	
}
.footerwidget {
	/*border: 1px solid #ddd;*/
}
.footerwidget ul {
	padding: 0;
	/*margin: 8px;*/
}
.footerwidget li {
	list-style: none;
}
#footer-4fold {
	/*float: left;*/	
}
#footer-4fold>ul {
	width: 75%;
	margin: 0 auto;
}
#footer-4fold>ul>li {
	float: left;
	line-height: 1.8em;
	margin: 0 1%;
}
#footer-1 {
	float: left;
	width: 24.5%;
}
#footer-2 {
	float: left;
	width: 24.5%;
}
#footer-3 {
	float: left;
	width: 24.5%;
}
#footer-4 {
	float: left;
	width: 24.5%;
}


#boilerplate {
	text-align: center;
	width: 100%;
	background-color: #f7f7f7;
	clear: both;
	padding: 20px 0 12px;
	font-size: 0.9em;
}
#footer-boilerplate { /* for the widget: */
	color: #c3c3c3;
}
#footer-boilerplate .textwidget { 
	color: #000;
}
#footer-boilerplate .widget-polylang {
	float:right;
}
#footer a {
	color: #a1a1a1;
}
#footer a:link, #footer a:visited {
	text-decoration: none;
}
#footer a:hover, #footer a:active {
	text-decoration: underline;
	
}
#footer #svg2 g#layer1 path {
	fill: #a1a1a1 !important;
}


/* == SEARCH == */
#search-box {
	margin: 20px auto 20px auto;
	text-align: center;
	width: 404px;
	border: 1px solid #ddd;
}
#search-box input {
	border: 0 none;
	/*border: 1px solid fuchsia;*/
	margin: 4px 0px 8px 4px;
	width: 320px;
	height: 32px;
}
#search-box input[type="submit"] {
	width: auto;
	margin: 8px 8px 0px 4px;
	}
label[for=s] {
	display: none;
	}

element {
	border-color: white;
	background: aqua;
	}

/* == ELEMENTS == */

/* a place for misc. styles */
.uparrow {
	width: 0	;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 9px solid #fff;
	margin: -9px auto 0 auto;
}


/* == CUSTOM PAGE ATTRIBUTES == */
.custom-page-image-box {
	display: block;
	/*height: 300px;*/
	overflow: hidden;
	margin-bottom: 16px;
}
.custom-page-image-box>.wp-post-image {
	height: 100% !important;
	width: 100% !important;
}

/* == ALL YOUR CODE ARE BELONG TO POETRY == */


/* // sunchildgarden.com/test.php
#test_article {
	background-color: fuchsia;
	position: relative;
	height: 150px;
	width: 350px;
	overflow: hidden;
}
#test_article img {
	position: absolute;
	top: -50%;
}
#test_bild_div {
	position: absolute;
	z-index: 2;
	background: rgba(255,0,0,0.5);
	height: 240px;
	width: 300px;
}
a {
	background-color: blue;
	position: absolute;
	z-index: 9;
	height: 60px;
	width: 120px;
	top: 0px;
}*/