/*
Author: Sam Wellens
Website: S-project.be - Nozzle.be
*/

/* RESET
-------------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}a img{border:none;}a{outline:none;}p{margin: 1em 0;}strong, b{font-weight: bold;}em, i{font-style: italic;}img, label, input, textarea, select, button{vertical-align: middle;}
/* Global
-------------------------------------------------------------- */
.right{float: right !important;margin-right: 0 !important;}
.left{float: left !important;margin-left: 0 !important;}
.clear{clear:both;}
.clearL{clear:left;}
.clearR{clear:right;}
@font-face{font-family:'UbuntuTitlingBold';
src: url('../images/fonts/UbuntuTitling-Bold-webfont.eot');
src: url('../images/fonts/UbuntuTitling-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../images/fonts/UbuntuTitling-Bold-webfont.woff') format('woff'),
url('../images/fonts/UbuntuTitling-Bold-webfont.ttf') format('truetype'),
url('../images/fonts/UbuntuTitling-Bold-webfont.svg#UbuntuTitlingBold') format('svg');
font-weight: normal;font-style: normal;}
html, body{background: #d7d0be url(../images/interface/bg.jpeg) top left;  color:#555555;font:1em georgia, Geneva, Arial, sans-serif;}

a:link, a:visited {color:#c12726;text-decoration:none;-webkit-transition:color 200ms ease-in;-webkit-transition:border-bottom 200ms ease-in;-moz-transition:color 200ms ease-in;-moz-transition:border-bottom 200ms ease-in;-o-transition:color 200ms ease-in;-o-transition:border-bottom 200ms ease-in;transition:color 200ms ease-in;transition:border-bottom 200ms ease-in;}
a:hover{color:#333333; border-bottom:1px solid #64583e;}
a.noborder,a.noborder:link,a.noborder:visited{border-bottom:none;}
ul li a:link{border:none;}
h1,h2,h3,h4,h5,h6{font-family:'UbuntuTitlingBold', Verdana, Geneva, Arial, Helvetica, sans-serif;}
/**************************** screen.css**************************************************/
#header-wraper,#content-wraper,#footer-wraper,#footer-contact{margin:0 auto;text-align:left;width:940px;}
#header-wraper-fb,#content-wraper-fb,#footer-wraper-fb,#footer-contact-fb{margin:0 auto;text-align:left;width:520px;margin-left: 10px;}

#header{background:transparent url(../images/interface/menubar-bg.png) top left repeat-x; }
#header-fb{background:transparent url(../images/interface/menubar-bg.png) top left repeat-x; height: 20px;}
h1#logo, h1#logo a{height:186px;width:180px;}

#nav{margin-top:15px;}
ul.menu li{float: left;}
ul.menu li a{display:inline;border:none;padding:0 0 0 30px;font-family:'UbuntuTitlingBold', Verdana, Geneva, Arial, Helvetica, sans-serif;color:#d7d0be;font-size: 1.2em;}
ul.menu li a:hover{background-position:-52px 0px;color:#FFF;}
ul.menu li span.sbut{margin:0 0 0 30px;}

ul.menu a.active,ul.menu a.active:hover{background-position:-52px 0px;color:#FFF;}

/*project home*/
#project_window{width:500px;height:400px; position:relative;overflow:hidden;float:left;margin-top:-100px;}
#project_container {width:99999px;position:absolute;top:0;left:0;}
#obsessed{float:right; margin-top:-50px;}
.project {width:700px;position:relative;float:left;}		
.project_title{position:absolute;top:330px;left:3px;width:497px;}
.project_title h2{color:#333333;font-family:georgia,garamond,serif;font-size:14px;font-style:italic;z-index:10;}
.project_image{width:497px;}
.project_link{position:absolute;top:340px; left:300px;width:690px;}
.project_link a{width:184px;height:51px;display:block;background:url(../images/interface/bekijk-project.png) 0 0 no-repeat;overflow:hidden;text-indent:-9999px;}
.project_link a:hover{border:none;background-position:0 -52px;}
.project a{border:none;color:#fff;text-transform:uppercase;font-weight:bold;display:block;}
.project a:hover{color:#333333;}
.project_number{float:right;width:130px; height:50px;margin: 70px 300px 0 0;}
.counter{background: transparent url(../images/interface/dot ted-line.jpg) bottom right no-repeat; height:30px;width: 50px;margin-top: 5px; padding-right:5px;}
.currentProject{color:#64583e; font-size: 1em;}
.totalProjects{color:#a4937a; font-size: 1em;}
.arrowL, .arrowR{float:right;width: 23px; height: 41px; padding: 0 5px;}
.moveLeft {width: 23px; height: 41px;display:block; background: transparent url(../images/interface/arrow2.png) 0 0 no-repeat; text-indent: -9999px;}
.moveRight{width: 23px; height: 41px;display:block; background: transparent url(../images/interface/arrow.png) 0 0 no-repeat; text-indent: -9999px;}
a.moveRight:hover, a.moveLeft:hover{border: none; background-position: -46px 0;}	
.lijn{position: relative; width: 938px; height: 21px; background: transparent url(../images/interface/lijn.png) bottom center no-repeat; margin: 30px 0;}
.pkw{font-family:'UbuntuTitlingBold', Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 18px;text-shadow: 1px 1px 0px #ffffff;
color:#333333; padding:0 0 5px 0; margin-top: 8px;}

/*diensten home*/
#diensten{}
.dienst{float: left; width: 220px; margin:0 20px 20px 0; background: transparent url(../images/interface/back-arrow.png) 120px 20px no-repeat;}
.last{margin-right: 0px;}
.dienst h2{color: #333333; font-size: 24px;margin-bottom: 5px;}
.dienst p{margin: 0;}
.meer{float: right;margin: 0; padding: 0;}
.meer a{display:block;width: 82px;height: 16px; background: transparent url(../images/interface/portfolio.png) 0 -18px no-repeat;overflow:hidden;text-indent:-9999px;}
.meer a:hover{background-position: 0 0;border: none;}

/*portfolio home*/
#portfolio-wraper{margin:0px auto;text-align:left;width:960px;}
#portfolio-wraper-fb{margin:40px auto;text-align:left;width:520px;}

.pi mg{background-color: #efe7d5; padding: 2px;}
.pimg a{width: 136px; height: 95px;display: block;}
.port_link{float: right;}
.port_link a{width:184px;height:45px;display:block;background:url(../images/interface/meervandat.png) 0 0 no-repeat;overflow:hidden;text-indent:-9999px;}
.port_link a:hover{border:none;background-position:0 -45px;}
ul.filterclients{width: 960px;}
ul.filterClients li {float: left;display: inline;color: #333;background-color: #efe7d5;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-family:'UbuntuTitlingBold', Verdana, Geneva, Arial, Helvetica, sans-serif;padding: 10px;margin:5px 10px 0 0;font-size: 18px;}

ul.clients {list-style: none;padding: 50px 0 0 0;margin: 0;width: 960px;overflow: hidden;}
ul.clients li {float: left;display: inline-block;width: 140px; margin: 10px; height: 140px;overflow: hidden;}
ul.clients li p{font-size: 0.8em;font-style: italic;color: #333333;margin: 0;padding: 0;}
ul.clients li a{background-color: #efe7d5; width: 136px; border:2px solid #efe7d5;}

ul.clients-fb {list-style: none;padding: 20px 0 0 0;margin: 0;width: 520px;overflow: hidden;}
ul.clients-fb li {float: left;display: inline-block;width: 140px; margin: 10px; height: 140px;overflow: hidden;}
ul.clients-fb li p{font-size: 0.8em;font-style: italic;color: #333333;margin: 0;padding: 0;}
ul.clients-fb li a{background-color: #efe7d5; width: 136px; border:2px solid #efe7d5;}

.projecttxt{float: left;margin-right: 20px;width: 460px;}
.projectimg{float: left;width: 460px;background-color: #efe7d5;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.projectimg img{padding: 10px;}
.projecttxt h1{font-size: 28px;margin: 20px 0; }
.website a{display: block; width: 145px; height: 37px;background: transparent url(../images/interface/bezoekProject.png) 0 -42px no-repeat; text-indent: -9999px;border: none;}
.website a:hover{background-position: 0 0;}
.websiteoff a{display: block; width: 145px; height: 37px;background: transparent url(../images/interface/bezoekProject.png) 0 -83px no-repeat; text-indent: -9999px;border: none;} 

#footer{background: #c8bfae url(../images/interface/bg-dark.jpeg) top left;color:#5b5549;}
#footer-wraper{padding-top: 10px;}
.f1{float: left; width: 220px; margin-right: 20px;}
.f2{float: right; width: 440px; margin-right: 0px;}
.f1 h3, .f2 h3{color: #efe7d5; font-size: 1.4em; margin-top: 13px;height: 30px;}
h3.flogo{background: transparent url(../images/interface/footer-logo.jpg) top left no-repeat; width: 147px;height: 43px;text-indent: -9999px;margin-top: 0px;}
#footer a.fb{background: transparent url(../images/interface/social.png) top left no-repeat; width: 73px;height: 17px;text-indent: -9999px;overflow: hidden;display: block;float: left;margin-right: 10px;}
#footer a.fb:hover{background-position: 0 -19px;}
#footer a.tw{background: transparent url(../images/interface/social.png) -96px 0 no-repeat; width: 89px;height: 17px;text-indent: -9999px;overflow: hidden;display: block;float: left;}
#footer a.tw:hover{background-position: -96px -19px;}
#footer .EE{color:#64583e;background: transparent url(../images/interface/expressionengine.png) 0 0 no-repeat; font-family: Lucida Grande;padding:7px 0 0 60px;height: 40px;}
#footer .EE a{color: #64583e;}
#footer a{border:none;}

#footer-contact{margin-bottom: 20px;}
.mess{ background: transparent url(../images/interface/foot-acco.png) top left no-repeat; padding:35px 0 0 130px; width: 450px;font-family:'UbuntuTitlingBold', Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 18px;}
.mail-vcard{float: left;width: 220px; margin-right: 10px; margin-top: 1em;}
.mail-vcard p{width: 220px;height: 46px;background: transparent url(../images/interface/foot-sprite.png) 0 -173px  no-repeat;font-family:'UbuntuTitlingBold', Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 18px;padding:15px 0 0 0px; text-align: center; margin: 0; color:#c12726;}
.vcard span{color: #333;font-size: 10px;}
.qrcode{float: left;width: 220px;margin-right: 20px;}
.qrcode p{text-align: center;background: transparent url(../images/interface/foot-sprite.png) 0 0  no-repeat;width: 172px;height: 172px;}
.qrcode p img{padding: 12px 0 0 0px;}
.map{float: left;background: transparent url(../images/interface/map.png) 0 0  no-repeat;width: 700px;height: 323px; margin-top: 1em; padding-left: 10px;}