/*
=========================================================================
	
	CSS - Styleguide

	www.temporausch.com
   	css styles V 0.8
   
   	Copyright 2011, Markus Spiske
   	http://www.temporausch.com

==========================================================================
*/

/**************************************/
/*              FONTS                 */
/**************************************/
body{font: 11px 'Helvetica', Arial, sans-serif; letter-spacing: 0px; line-height: 130%;}


h1, h2, h3 {line-height: 1.5em; margin:0 0 0 0; }
h1 {font: 28px 'Helvetica', Arial, sans-serif; letter-spacing: 0px; line-height: 160%; background: white;}
h2 {font: 12px'Helvetica', Arial, sans-serif; letter-spacing: 0px; line-height: 130%; margin-bottom: 10px; font-weight: bold; text-transform: uppercase;}
h3 {font-size:11px; font-weight: normal;}


/**************************************/
/*                BODY                */
/**************************************/
body {background:#fff; color:#222; margin:0; padding:0;}


/**************************************/
/*         TEXT & FONT SIZES          */
/**************************************/
p{margin-bottom:10px;}
hr{margin:40px 0; background:#ccc; height:4px;}
.text_top{font: 30px 'Helvetica', Arial, sans-serif; letter-spacing: 0px; line-height: 140%; background: white; padding: 2px 0px 0px 2px;}


/**************************************/
/*              LINKS                 */
/**************************************/
a{text-decoration:none; font: 12px 'Helvetica', Arial, Helvetica, sans-serif; font-weight: normal;}
a:link {color:#222;}
a:visited{color:#222;}
a:hover{color: #595959; text-decoration:none;}
a:active{color:#222;}

a.filterlink{text-decoration:none;  font-size: 12px; color:#222; font-weight: bold;}
a.filterlink:hover{color:#595959; text-decoration:none; font-weight: bold;}

a.client{text-decoration:none;  font-size: 12px; letter-spacing: 0px; line-height: 160%; color:#222;}
a.client:hover{color:#222; text-decoration:none;}

a.mail{text-decoration:none;  font-size: 14px; line-height: 160%; color:#222; font-weight: normal;}
a.mail:hover{text-decoration:underline; color:#222;}

a.footer{text-decoration:none; line-height: 170%;}
a.footer:hover{text-decoration:underline; color:#222;}


/**************************************/
/*              LAYOUT                */
/**************************************/
#wrapper {width:896px; margin:0 auto;}
.section{width:896px; margin:0 auto;}
.content{padding:42px 0;}
.clients{padding:30px 0px 0px 0px; border-top:1px #ccc solid; margin-bottom:0px;}
.clientbox{padding:10px 0px 0px 0px;}


/**************************************/
/*             NAVIGATION             */
/**************************************/
.header{padding-top:90px; margin-bottom:200px;}
.title{padding-bottom:0px; margin-top:0px; width: 896px;}
#logo{width:350px; float:left; margin-bottom:0;}
#info{float:right; margin-bottom:0; line-height:280%; background:transparent url(../img/mail_2.png) no-repeat scroll 0 0px; padding: 0px 0px 0px 50px; font-size: 14px; letter-spacing: 0px;}
#text{float: left; width: 896px; float:left; margin:40px 0px 20px 0px; padding: 35px 0px 30px 0px; background:transparent url(../img/bg_info.gif) no-repeat scroll 0 0px;}
#filter{float: left; padding: 10px 0px 7px 0px; border-bottom:1px #ccc solid; border-top:1px #ccc solid;}


/**************************************/
/*         CAPTIONS & FANCYBOX        */
/**************************************/
.has-caption{position:relative; text-decoration:none !important;}
.caption, .entry-content .caption{position:absolute; bottom:0px; left:0px; background:rgba(0,0,0,0.7); color:#fff; padding:7px 0px 0px 10px; text-align:left; font-size:11px; line-height: 150%;}
.JS .caption{display:none;}
.caption p{margin:0; padding:0; color:#fff; display:inline;}
.has-zoom{overflow:hidden; position:relative;}
.zoom{background:url("../img/zoom.png"); position:absolute; top:-40px; right:-40px; height:40px; width:40px; overflow:hidden; text-indent:-900px;}
.wp-caption .zoom{margin:5px 5px 0 0;}
#fancybox-title-left {background:none;}
#fancybox-title-main {background:none;}
#fancybox-title-right {background:none;}
/*
#fancybox-left, #fancybox-right {width: 20%;}
#fancybox-left:hover, #fancybox-right:hover {background-color:rgba(0,0,0,0.7);}
#fancybox-left:hover span {left: 50%;}
#fancybox-right:hover span {left: auto; right: 50%;}
*/
.caption:link, .caption:visited{color:#eee; font-weight: normal;}
.caption:hover{color:#fff; background:rgba(0,0,0,0.9);}


/**************************************/
/*          FILTER                    */
/**************************************/
.portfolio-content{margin-top:0px; padding:40px 0px 0px 0px; width:896px; overflow:hidden;}
.portfolio-content .container{width:936px; padding-left:0px; min-height:229px;}
.filter{margin:0px 0px 0px 10px; padding:0; overflow:hidden; float:left; text-transform: uppercase;}
.filter li{float:left; display:block; margin-left:30px; font-weight:normal;}
.filter li.firstinput{float:left; display:block; margin-left:0px; font: 12px 'Helvetica', Arial, sans-serif; padding-top: 0px;}
.filter li.current-cat a{color: #abc12d; cursor:default; font-weight: bold;}
.filter li.current-cat a:hover{text-decoration:none; font-weight: bold;}
.portfolio-content .project{position:relative; padding-top:170px; margin-bottom:50px;}
.project .frame{background:url("../img/project-image-bg.png") no-repeat; width:272px; height:160px; position:absolute; top:-5px; left:-15px; padding:5px 15px 25px 15px;}
.project .frame .thumbnail-link{margin-bottom:10px; display:block; width:272px; height:160px; overflow:hidden;}
.project a.project-link{display:block;}
.project .thumbnail-link:hover{ }
.project img{width:272px;}
.project .caption{width:260px; padding:5px 6px; color:#fff;}
.project h3{margin:0; display:relative; z-index:10;}
.project h3 a{display:block;}


/**************************************/
/*              FOOTER                */
/**************************************/
.footer{width: 896px; margin-top:10px;}
.footer p{text-align:center;}
.footer .container{border-top:1px #ccc solid; padding:30px 0; margin-bottom: 0px;}
.footer .sitemap{display:inline-block; overflow:hidden; margin:0 0 0px 0;}
.footer .sitemap li{display:block; padding:0; margin:0 10px; float:left;}
.gotop{width: 896px; float: left; padding: 40px 0px 0px 0px; margin: 0px;}