/** 
 * Standard layout styles
 * 
 * @project   
 * @author    masone (Christian Felder)
 * @cssdoc    version 1.0-pre
 * @site      www.masone.ch
 * 
 */ 

/* clearfix */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: block; }
* html .clearfix { height: 1%; }
html, body{ 
	font-size:13px;
	font-family:Helvetica, Arial, Verdana;
}
hr{
	background:#e7eaec;
	color:#e7eaec;
	border:none;
	height:5px;
	clear:both;
	margin-bottom:20px;
	width:870px;
	line-height:0;
	font-size:0;
}

/* Simple scaling background */
#background{ position:absolute; }
#background img{ width:100%; }

/* Advanced caling background */
html, body, #background, #background table, #background td {
    height:100%;
    width:100%;
    overflow:hidden;
}
body.page-template-gallery-php #header{
	position:relative;
	width:100%;
}
body.page-template-gallery-php #background { position:static; } /* override simple scaling background */
body.page-template-gallery-php #background img{ width:auto; } /* override simple scaling background */
body.page-template-gallery-php #main_wrapper{
	overflow:hidden;
}
#background div {
    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
}
#background td {
    text-align:center;
    vertical-align:middle;
}
#background img {
    margin:0 auto;
    min-height:50%;
    min-width:50%;
}
#background_left, 
#background_right{
	position:absolute;
}
#background_left.available,
#background_right.available{
	cursor:pointer;
}
#background_left{
	left:0;
	top:0;
	width:25%;
	height:100%;
	background:url(../images/no-no.gif);

}
#background_right{
	margin-left:75%;
	width:25%;
	height:100%;
	background:url(../images/no-no.gif);
}

#main_wrapper {
  position:absolute;
  top:0;
	left:0;
	overflow-y:scroll;
	overflow-x:hidden;
	width:100%;
	height:100%;
}
#main_container {
  margin: 0 auto;
	min-width:870px;
}
#content_wrapper{
	background:#FFF;
}
#main ol{
	list-style-type:decimal;
	margin:0 2em 1.5em 3em;
	color:#A8A8A8;
}
#content{
	color:#333;
	line-height:1.5em;
	width:910px;
	padding:50px 30px;	
	margin-bottom:30px;
}
#content a, 
#content a:link, 
#content a:visited{
	color:#333;
	font-weight:bold;
	text-decoration:none;
	border-bottom:1px dotted #333;
}
#content a:active, 
#content a:hover, 
#content a:focus{
	color:#666;
}
#content .light_links a, 
#content .light_links a:link, 
#content .light_links a:visited{
	font-weight:normal;
	color:#666;
	border-color:#a8a8a8;
}
#content .light_links a:active, 
#content .light_links a:hover,
#content .light_links a:focus{
	color:#333;
}
#main{ 
	float:left; 
	width:560px;
	margin-bottom:40px;
}
body.blog #main,
body.single #main,
body.page-template-default #main,
body.category #main,
body.page-template-about-php #main{ 
	margin-right:60px;
}
#sidebar{
	float:left;
	width:250px;
	color:#a8a8a8;
	font-size:12px;
}
h4{
	color:#5d9cde;
	font-weight:bold;
	margin-bottom:10px;
}
#sidebar .feeds{ padding-bottom:1em; zoom:1; }
#sidebar .left{ display:block; float:left; margin-right:4%; }
#sidebar .right{ display:block; float:right; }
#sidebar .social li{ display:inline; margin-right:1em; }
#sidebar .social img{ vertical-align:bottom; }
#sidebar .stream_container{ height:20em; }

.sidebar_box{
	padding:20px 0;
	border-top:1px solid #e7eaec;
}
.sidebar_box.first{
	border-top:5px solid #f3f3f3;
}
ul.stream_element li{
	width:100%;
	margin-bottom:1em;
}
.stream_element_content{
	padding:10px;	
	background:#f3f3f3;	
}
.stream_element_meta{
	text-align:right;
	color:#a8a8a8;
	margin-top:5px;
	margin-bottom:-5px;
}
#sidebar ul.stream_element li{
	padding:10px;
	background:#f3f3f3;
}
	

div.post_meta{
	color:#a8a8a8;
	font-weight:bold;
	margin-bottom:20px;
}
#content h2 a,
#content h2 a:link, 
#content h2 a:visited{ color:#5d9cde; border-bottom:none; }
h2{ font-weight:bold; color:#5d9cde; font-size:20px; margin-bottom:30px; }
h3{ font-weight:bold; color:#5d9cde; font-size:15px; margin-bottom:5px; }
#main .post h2{
	margin-bottom:0px;
}
#main .post span.extern{ display:none; }
#main h2 span{ color:#a8a8a8; font-weight:normal; font-size:13px;}
#main p,
form p{
	margin-bottom:20px;
}
#main .post{
	border-bottom:1px solid #e7eaec;
	padding-bottom:10px;
	margin-bottom:30px;
}
#main .post.last{
	border-bottom:none;
}
#main .post ul li{
	color:#8a8a8a;		
	list-style-type:disc;
	margin-left:1.3em;
}
#main .post ul{
	margin-bottom:20px;
}

/* liste mit haken */
body.page-template-portfolio-php .main_left ul li,
body.page-template-portfolio-php .main_left ul li,
body.page-template-about-php .main_left ul li,
ul#opensourced .col2 ul li{
	padding-left:20px;
	color:#8a8a8a;
	background:url(../images/li-check.gif) 0px 3px no-repeat;
}
/* carousels */
body.page-template-portfolio-php .jcarousel-list li,
body.page-template-portfolio-php .jcarousel-item {
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 495px;
    height: 310px;
}

body.page-template-about-php .jcarousel-list li,
body.page-template-about-php .jcarousel-item {
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 250px;
    height: 189px;
}

/* Layout */
#visual{
	height:180px;
	overflow:hidden;
	position:relative;
}
#visual img{
	position:absolute;
	bottom:0;
	width:100%;
}
#header{
	color:#FFF;
	background:#000;
	z-index:100;
	position:relative;	
}
body.page-template-gallery-php #header_inner{
	width:auto;
	padding-right:30px;
}
#header_inner{
	width:870px;
}
#branding{
	float:right;
	background:#000 url(../images/sprites.png) no-repeat 186px 9px;
	float:right;
	margin:0.5em 0;
}
#branding a, #branding a:link, #branding a:visited{
	color:#FFF;
	border-bottom:none;
	text-decoration:none;
}
#branding h1{
	font-family:Georgia;
	font-size:20px;
}

/* navigation */
#navigation a, #navigation a:link, #navigation a:visited{
	color:#FFF;
	text-decoration:none;
}
#navigation a:active, #navigation a:hover, #navigation a:focus{
	color:#a8a8a8;
	border-bottom:1px dotted #a8a8a8;
}
#navigation a.active{
	color:#a8a8a8;
}
ul#navigation{
	padding-left:30px;
}
ul#navigation li{
	padding:0.5em 0.5em 0.5em 0.5em;	
	float:left;
	margin-right:50px;
	cursor:pointer;
	position:relative;
}
ul#navigation li.navigation_element{
	margin-top:0.3em;
}
ul#navigation li .dropdown,
ul#navigation li .label{
	float:left;
}
ul#navigation li .dropdown{
	padding-left:7px;
	margin-left:7px;
	border-left:1px dotted #FFF;	
	background:url(../images/triangle-dropdown-black.gif) no-repeat 7px 0.4em;
	width:10px;
}
ul#navigation ul{
	position:absolute;
	z-index:100;
	display:none;
	background:#000;
	padding:8px 10px;
	top:2.7em;
	left:-10px;
}
ul#navigation ul.subnavigation{
	cursor:default;		
}
ul#navigation ul.subnavigation li{
	margin-right:70px;
}

ul#navigation ul li{
	top:0;
	left:0;
}


/* subnavigation (tabs) */
div#subnavigation_wrapper{
	padding:0;
	padding-left:30px;
	color:#a8a8a8;		
	background:#f1f0eb;	
}
div#subnavigation_wrapper,
div#subnavigation_wrapper h2{
	font-size:16px;	
	color:#a8a8a8;
}
ul#subnavigation{
	width:auto;
	position:static;
}
ul#subnavigation li,
div#subnavigation_wrapper h2{
	overflow:hidden;
	padding-right:20px;
	float:left;
	margin-bottom:0;
}
div#subnavigation_wrapper h2{
	padding:10px 10px 10px 0;	
}
ul#subnavigation li{
	padding:10px;
}
ul#subnavigation li:hover,
ul#subnavigation li.active,
ul#subnavigation li:hover a{
	background:#FFF;
	color:#333;
}
ul#subnavigation li.active{
	border-left:1px dotted #e7eaec;
	border-right:1px dotted #e7eaec;	
}

div#subnavigation_wrapper .arrow{
	padding:10px 0px 10px 0;	
	margin-right:10px;
	width:5px;
	height:1em;
	display:block;
	float:left;
	background:url(../images/triangle-lightgrey.gif) no-repeat 50% 50%;
}
#subnavigation a, #subnavigation a:link, #subnavigation a:visited{
	color:#a8a8a8;
	text-decoration:none;
	border:none;
	font-weight:normal;
}
#subnavigation a:active, #subnavigation a:hover, #subnavigation a:focus{
	color:#333333;
}
#subnavigation a span{ font-size: 13px; }


/* Thumbnails */
#thumbnails_wrapper{
	background:#FFF;
	position:absolute;
	width:100%;
	bottom:0;
	
}
ul#thumbnails{
	margin:25px 0px 15px 30px;
}
ul#thumbnails li{
	float:left;
	margin-right:15px;
	padding-bottom:15px;
}

.tooltip{ 
	position:absolute;
	display:inline;
	z-index: 20; 
	display: none; 
	background:#000; 
	color:#FFF; 
	padding:2px 5px; 
}

div#content_footer{
	clear:both;
	border-top:1px solid #e7eaec;
	padding-top:15px;
}

ul#content_footer_elements li{
	float:left;
	width:260px; /* 280 width - 20 padding */
	margin-right:30px;
	border-right:1px solid #e7eaec;
	padding:5px 20px 5px 0;
	height:7em;
}
ul#content_footer_elements li ul li{
	float:none;
	width:auto;
	height:auto;
	margin:0;
	border:none;
	padding:0;
}
ul#content_footer_elements li ul.social li{ margin-right:1em; }
ul#content_footer_elements li ul.flickr_images li{
	float:left;
	margin-right:8px;	
}
ul#content_footer_elements li.last{
	margin-right:0;
	width:250px;	
	border-right:none;
}
ul.social li{ display:inline; margin-right:1em; }
ul.social img{ vertical-align:bottom; }

/* forms */
input, textarea, select{ 
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #eee;
	border-bottom:1px solid #eee;
	background:#f9f9f9;
	padding:5px 4px;
	color:#666;
}
input.checkbox, input.radiobutton{
	border:none;
	background:none;
}
a.button,
button{
	position:relative;
	color:#FFF;
	border:none;
	cursor:pointer;
}
#content a.button, 
#content a.button:link, 
#content a.button:visited{
	color:#FFF;
	font-weight:normal;
	text-decoration:none;
	border:none;
}
#content a.button:active, 
#content a.button:hover, 
#content a.button:focus{
	color:#666;
	background:#F1F0EB url(../images/arrow-grey.gif) right no-repeat;	
}
a.button{
	padding:7px 20px 7px 9px;
	font-size:16px;
	font-weight:normal;
	background:#f5b800 url(../images/arrow-orange.gif) right no-repeat;
}
button{
	padding:5px 7px 5px 7px;	
	font-size:13px;	
	background:#5d9cde;
}
button{
	padding:5px 18px 5px 7px;	

	font-size:13px;
	background:#5d9cde url(../images/arrow-blue.gif) right no-repeat;
}
button:hover{
	color:#666;
	background:#F1F0EB url(../images/arrow-grey.gif) right no-repeat;	
}

button img{
	margin-left:5px;
	margin-bottom:-2px;
}
/* contact form */
form span.wpcf7-not-valid-tip-no-ajax{
	display:block;
}
form .wpcf7-validation-errors{
	background:#ff8f35;
	padding:3px 5px;
	color:#FFF;
	top:0.1em;
	position:relative;
}
form label{ color:#666; }
form .wpcf7-response-output{ clear:both; text-align:center; }
form .left{
	float:left;
	width:340px; 
}
form .right{
	float:right;
	width:190px;
}
form .left textarea,
form .left input{ width:332px; /* 340 - 8px padding */ }
form .right input{	width:182px; /* 190 - 8px padding */ }


/* comment list */
ul.comments{ margin-bottom:30px;}
ul.comments li{ margin-bottom:30px; zoom:1; }
ul.comments .left{ float:left; width:160px; background:url(../images/triangle-grey.gif) right no-repeat; }
ul.comments .highlighted .left{ background:url(../images/triangle-lightblue.gif) right no-repeat; }
ul.comments .right{ float:left; background:#f3f3f3; width:370px; }
ul.comments .highlighted .right{ background:#e8f1fa; }
ul.comments .comment_author{ font-size:17px; color:#666; }
ul.comments .comment_date{ font-size:11px; color:#a8a8a8; }
ul.comments .comment_body{ color:#8a8a8a; padding:10px 15px; }

/* portfolio */
body.page-template-portfolio-php #main{
	width:870px;
}
body.page-template-portfolio-php .main_left{
	width:295px;
	float:left;
	margin-right:60px;
}
body.page-template-portfolio-php .main_right{
	width:495px;
	float:left;	
}	
body.page-template-portfolio-php .main_left p{
	margin-bottom:40px;
}

body.page-template-portfolio-php ul#content_footer_elements li{
	width:305px; /* 325px width - 20 padding */
}
body.page-template-portfolio-php ul#content_footer_elements li.last,
body.page-template-portfolio-php ul#content_footer_elements li.last li{
	width:520px;	
}


/* Open source */
body.page-template-opensource-php #main{
	width:870px;	
}
ul#opensourced li{
	border-bottom:1px solid #e7eaec;
	margin-bottom:30px;
	padding-bottom:30px;
}
ul#opensourced li.last{
	border:none;
}
ul#opensourced ul {
	margin:0;
}
ul#opensourced li ul li{
	margin:0;
	padding:0;
	border:none;
}
ul#opensourced h2{
	margin-bottom:20px;
}
body.page-template-kontakt-php #main .col1,
ul#opensourced .col1{
	width:560px;
	margin-right:60px;
	float:left;
}
body.page-template-kontakt-php #main .col2,
ul#opensourced .col2{
	width:250px;
	float:left;	
}
body.page-template-kontakt-php #main .col2{
	margin-top:0;
}

ul#opensourced .col2 ul{
	margin-top:18px;
}

/* about */
body.page-template-about-php #main,
body.page-template-kontakt-php #main{
	width:870px;
	margin-right:0;
}
body.page-template-about-php .main_left{
	width:560px;
	float:left;
	margin-right:60px;
}
body.page-template-about-php .main_right{
	width:250px;
	float:left;	
}
body.page-template-about-php #main ul li{
	list-style-type:none;
	margin-left:0;
}
body.page-template-about-php ul.left{
	width:250px;
	margin-right:60px;
	float:left;
}
body.page-template-about-php ul.right{
	width:250px;	
	float:left;	
}
body.page-template-about-php img.profile{
	margin-bottom:0.7em;
}
body.page-template-about-php ul.social li{ display:block; float:left; margin-bottom:1em; margin-right:1.5em;}
ul.flickr_images li{
	float:left;
	margin-right:6px;
}
#content ul.flickr_images li a{
	border:none;
}
body.page-template-homepage-php .main_left ul.stream_element li,
body.page-template-about-php .main_left ul.stream_element li{ padding:0 0 1em 25px; background:none; border-bottom:1px solid #e7eaec; background-repeat:no-repeat; }
body.page-template-homepage-php #main ul.stream_element p,
body.page-template-about-php #main ul.stream_element p{ margin-bottom:0; background:none; padding:0; }
.ff-thumbnails img{ margin-right:5px; }

#introduction{
	color:#666;
	font-size:18px;
	line-height:1.8em;
	font-weight:normal;
	vertical-align:center;
}
#introduction em{
	color:#333;
	font-family:Georgia;
	font-size:22px;
}

#content ul.social li a,
#main a.noborder{ border:none; }

#content .alignright{
	float:right;
	margin-bottom:0.5em;
	margin-left:1em;
}
#content .alignleft{
	float:left;
	margin-bottom:0.5em;
	margin-right:1em;
}
code{
	font-family:"Consolas","Courier New",Courier,mono;
	font-size:12px;
}

/* teasers on homepage */
body.page-template-homepage-php .main_left{
	width:560px;
	float:left;
	margin-right:60px;
}
body.page-template-homepage-php .main_right{
	width:250px;
	float:left;	
}
body.page-template-homepage-php #main{
	width:870px;
}
#content ul.post_teasers li a, 
#content ul.post_teasers li a:link, 
#content ul.post_teasers li a:visited{
	font-weight:normal;
	color:#FFF;
	border-bottom:none;
}
ul.post_teasers{
}
ul.post_teasers li.post_teaser{
	width:250px;
	height:180px;	
	float:left;
	margin-right:60px;
	position:relative;
	overflow:hidden;
}
ul.post_teasers li.last{
	margin-right:0;
}
ul.post_teasers li div.post_teaser_text{
	color:#FFF;
	padding:5px 7px 5px 7px;	
	font-size:13px;
	background:#5d9cde;
	position:absolute;
	width:236px;
	bottom:0;
	left:0;
}
body.page-template-homepage-php hr{
	margin:30px 0 30px 0;
}
#introduction{
	padding-bottom:10px;
}
.autoviewer_gallery{
	height:100%;
}
.page-template-gallery-autoviewer-php #main_container{
	height:100%;
}
.page-template-gallery-autoviewer-php #autoviewer{
	padding:20px 0;
}
.page-template-gallery-autoviewer-php{
	background:#222222;
}