/*  
Theme Name: Gert-Jan Bosch Web Design
Theme URI: http://www.gertjanbosch.nl
Description: Gert-Jan Bosch Web Design.
Version: 1
Author: Gert-Jan Bosch
Author URI: http://www.gertjanbosch.nl
Theme copyright gertjanbosch.nl
*/



.clear {
	clear: both;
	}	

a img {
	border: none;
	}
	
:focus {
  outline-color: transparent;
  outline-style: none;
}	

#facebook {
	float: right;
	width: 420px;
	margin: -40px 0px 0px 0px;
	position: relative;
	}

.contentimg {
	margin: 0px 20px 20px 0px;
	float: left;
	}	

.contentimg2 {
	margin: 0px 20px 20px 0px;
	float: right;
	}	

html {
	height: 100%;
	}

body {
	height: 100%;
	font-family: Helvetica Neue, Helvetica, 'Droid Sans', Tahoma, Arial ;
	font-size: 13px;
	line-height: 20px;
	color: #2f2f2f;
	background: #ffffff url(images/mainbg.jpg) repeat-x;
	margin: 0;
	padding: 0;
	}

::selection {
	background:#829013;
	color:#fff;
}

::-moz-selection {
	background:#829013;
	color:#fff;
}

::-webkit-selection {
	background:#829013;
	color:#fff;
}	

#wrapper {
	width: 960px;
	min-height: 100%;
	height: auto;
	margin: 0px auto -280px;
	}

#search { 
	float: right;
	}

#nietgevonden {
	width: 600px;
	margin: 0px auto;
	padding: 0px 0px 30px 0px;
	text-align: center;
	}	
	
/*Text*/


a {
	color: #6d3c15;
	font-weight: bold;
	text-decoration: none;
	}

a:hover{
	color: #829013;
	}

h1 {
	font-size: 27px;
	font-family: 'Droid Sans';
	font-weight: normal;
	color: #829013;
	}

h2 {
	font-size: 25px;
	margin: 0px 0px 20px 0px;
	font-family: 'Droid Sans';
	font-weight: normal;
	color: #829013;
	}

h3 {
	font-size: 20px;
	font-family: 'Droid Sans';
	font-weight: normal;
	color: #2f2f2f;
	}

h4 {
	font-size: 16px;
	font-family: 'Droid Sans';
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	vcolor: #2f2f2f;
	}		

h5 {
	font-size: 25px;
	margin: 20px 0px 0px 0px;
	color: #ababab;
	line-height: 50px;
	font-family: 'Droid Sans';
	color: #2f2f2f;
	}

h6 {
	font-size: 70px;
	margin: 0px 0px 30px 0px;
	font-family: 'Droid Sans';
	color: #2f2f2f;
	}

/* header en menu */

#logo {

	}	
	
#header {
	padding: 25px 0px 0px 0px;
	height: 253px;
	background-image: url(images/trans_logo.png);
	background-repeat: no-repeat;
	background-position: top right;
	}		
	
#menu {
	margin: 140px 0px 0px 0px;
	padding: 0px;
	text-transform: uppercase;
	font-weight: bold;
	float: left;
	display: block;
	width: 960px;
	height: 45px;	
}

#nav {
	float: left;
	clear: left;
	list-style-type: none;
	}
      
#nav ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	}

#nav ul li {
	padding-left: 8px;
	float: left;
	overflow: hidden;
	}
       
#nav ul li,
#nav ul li a {
	float: left;
	display: block;
	}
       
#nav ul li a {
	display: block;
	padding: 15px 20px 10px 10px;
	color: #706b66;
	font-family: Helvetica Neue, Helvetica, 'Droid Sans', Tahoma, Arial ;
	font-size: 14px;
	text-decoration: none;
	}

#nav .current_page_item a {
	color: #ffffff;
	}	

#nav ul li a:hover,
#nav ul li a.selected {
	text-decoration: none;
	color: #ffffff;
	}

.current_page_item, 
.current_page_item a {
	color: #ffffff;
	background: url(images/tab-right.png) right top no-repeat;
	height: 48px;
	}

.current_page_item, 
.current_page_item li a {
	color: #ffffff;
	background: url(images/tab-left.png) left top no-repeat;
	height: 48px;
	}
	
#nav .current_page_parent a, 
#nav .current_page_ancestor a, 
#nav .current-cat-parent a {
	color: #ffffff;
	background: url(images/tab-right.png) right top no-repeat;
	height: 48px;
	}

#nav .current_page_parent , 
#nav .current_page_ancestor , 
#nav .current-cat-parent {
	color: #ffffff;
	background: url(images/tab-left.png) left top no-repeat;
	height: 48px;
	}	

.transimg:hover {
	opacity:0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
}

#nieuwsbrief a {
	display: block;
	margin: 10px 0px;
	width: 107px;
	height: 25px;
	padding-top: 3px;
	text-align: center;
	background: url(images/nieuwsbrief.png) center top no-repeat;
	float: right;
	color: #d25105;
	font-weight: normal;
	}

#nieuwsbrief a:hover {
	display: block;
	margin: 10px 0px;
	width: 107px;
	height: 25px;
	padding-top: 3px;
	text-align: center;
	background: url(images/nieuwsbrief.png) center top no-repeat;
	float: right;
	color: #fff;
	}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:450px;
  height:330px;
  display:none;
  z-index:9999;
  background: #f2f2f2;
  padding:20px;
  -moz-border-radius:5px;
}

#nieuwsbrief_bg {
	position:absolute;
	z-index:99999;
	background: url(images/nieuwsbrief_bg.png) no-repeat top right;
	left: 270px;
	bottom: 150px;
	width: 264px;
	height: 231px;
	}

.mc_var_label {
	display:block;
	float:left;
	font-weight:bold;
	margin:0px 20px 0 0;
	width:150px;
	}

#mc_signup_form input {
	background: #fff;
	width: 200px;
	padding: 8px;
	color: #515151;
	border: solid 1px #e3e3e3;	
	-moz-border-radius:5px;
	}

#mc_signup_form input:focus {
	border: 1px solid #829013;
	width: 200px;
	padding: 8px;
	}

/*sub menu*/	

ul.submenu {
	float: left;
	clear: left;
	list-style-type: none;
	margin: 0px;
	width: 400px;
	padding: 0px;
	}
	
ul.submenu li{
	float: left;
	text-align: center;
	background: url(images/submenu_bg.png) center top no-repeat;
	margin: 16px 0px;
	width: 114px;
	height: 31px;
	overflow: hidden;
	}
ul.submenu li a{
	display: block;
	color: #656565;
	font-family: Helvetica Neue, Helvetica, 'Droid Sans', Tahoma, Arial ;
	font-size: 12px;
	width: 104px;
	height: 31px;
	padding: 5px;
	text-decoration: none;
	}
.submenu li a:hover {
	text-decoration: none;
	background: url(images/submenu_bg_hover.png) center top no-repeat;
	color: #829013;
	}
ul.submenu li.current a {
	color: #829013;
	background: url(images/submenu_bg_hover.png) center top no-repeat;
	}

/*second-header*/

#second-header {
	width: 960px;
	height: 315px;
	margin: 15px 0px 0px 0px;
	padding:  0px;
	}	

#second-header1 {
	width: 960px;
	height: 40px;
	margin: 15px 0px 0px 0px;
	padding:  0px;
	}	
	
#showreal {
	float: left;
	width: 628px;
	height: 300px;
	background: url(images/showreal_bg.png) center bottom no-repeat;
	}
	

#highlights {
	float: right;
	width: 300px;
	margin: 0px 0px 0px 0px;
	}

#freelance {
	float: right;
	}

#twitterupdates {
	height: 125px;
	width: 280px;
	background: url(images/twitterupdate_bg.png) bottom no-repeat;
	margin: 102px 0px 0px 0px;
	padding: 10px;
	position: absolute;
	font-family: Georgia;
	font-style: italic;
	text-shadow:0 1px 0 #fff;
}

#twitterupdates:hover {
	height: 125px;
	width: 280px;
	background: url(images/twitterupdate_bg.png) bottom no-repeat;
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.3);
	-moz-box-shadow: 0px 0px 6px rgba(0,0,0,.3);
	box-shadow: 0px 0px 6px rgba(0,0,0,.3);
}	

/*content*/

#content {
}


#contentwerk {
	margin: 70px 0px 40px 0px;
}

#contentoverig {
	margin: 70px 0px 40px 0px;
}

#content_main {
	width: 620px;
	float: left;
	margin: 0px 27px 30px 0px;
}

#content_werk {
	width: 940px;
	float: left;
	margin: 0px 27px 30px 0px;
}

#content_sidebar {
	width: 300px;
	float: right;
	margin: 0px;
}

#content_left {
	width: 295px;
	float: left;
	margin: 0px 27px 30px 0px;
}

#content_right {
	width: 295px;
	float: left;
	margin: 0px 0px 30px 0px;
}

/*werk*/

.workonline {
	font-weight: bold;
	}

#werk_left {
	width: 630px;
	float: left;
	}
	
#werk_left img {
	margin: 0px 0px 20px 0px;
	}	
	
#werk_right {
	width: 280px;
	padding: 20px 0px 0px 20px;
	float: right;
	border-left: solid 1px #cdcdcd;
	}	

.workleft {
	float: left;
	width: 620px;
	height: 500px;
	margin: 20px 0px 40px 0px;
	}

.workright {
	float: right;
	width: 300px;
	height: 460px;
	margin: 60px 0px 40px 0px;
	}	

/*Contact*/

#contactform {
	width: 590px;
	background: #ededed;
	padding: 20px;
	margin: 20px 0px 0px 0px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius: 6px;
	}

.skype {
	margin: 0px 0px 30px 0px;
	}

.contacttekst {
	width: 180px;
	text-align: right;
	padding: 0px 10px 0px 0px;
	}

.contacttekstbericht {
	width: 180px;
	text-align: right;
	padding: 20px 10px 0px 0px;
	vertical-align: top;
	}


#contactfoto {
	width: 298px;
	float: right;
	margin: 45px 0px 0px 0px;
	}	

#contactform input {
	padding: 10px;
	margin: 10px 0px 10px 0px;
	border: solid 1px #e3e3e3;
	width: 300px;
	font-size: 14px;
	font-family: Helvetica Neue, Helvetica, 'Droid Sans', Tahoma, Arial ;
	color: #515151;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;	}	

#contactform .captchacode {
	margin: 10px;
	height: 30px;
	padding: 0px;
	}

#contactform .captcha input {
	padding: 10px;
	margin: 5px 20px 10px 0px;
	border: solid 1px #e3e3e3;
	float: right;
	width: 180px;
	font-size: 14px;
	font-family: Helvetica Neue, Helvetica, 'Droid Sans', Tahoma, Arial ;
	color: #515151;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}

#contactform select {
	padding: 10px;
	margin: 10px 0px 10px 0px;
	border: solid 1px #e3e3e3;
	width: 320px;
	font-size: 14px;
	font-family: Helvetica Neue, Helvetica, 'Droid Sans', Tahoma, Arial ;
	color: #515151;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}

#contactform input:focus {
	border: solid 1px #829013;
	}

#contactform textarea:focus {
	border: solid 1px #829013;
	}

#contactform textarea {
	padding: 10px;
	margin: 10px 0px 10px 0px;
	border: solid 1px #e3e3e3;
	width: 300px;
	font-size: 14px;
	font-family: Helvetica Neue, Helvetica, 'Droid Sans', Tahoma, Arial ;
	color: #515151;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}	

#contactform .submit {
	background: url("images/verzenden.png") repeat scroll 0 0 transparent;
    border: 0 none;
    float: left;
    line-height: 100px;
    margin: 0px 0px 0px 5px;
    text-indent: -999px;
    width: 321px;
    height: 40px;
	}

	
/*footer*/

.push {
	height: 280px; /* .push must be the same height as .footer */
}

#footer{
	height: 280px;
	background: #121212 url(images/footerbg.jpg) repeat-x;
	}

#footer li {
	list-style: none;
	}
#footer ul {
	padding: 0px;
	}	

#footer a {
	color: #5d5550;
	font-weight: normal;
	text-decoration: none;
	}

#footer a:hover{
	color: #6d3c15;
	}
		
#footercontent {
	width: 960px;
	margin: auto;
	padding: 75px 0px 0px 0px;
	color: #98908b;
	font-size: 13px;
	background-image: url(images/trans_logo_footer.png);
	background-repeat: no-repeat;
	background-position: top left;
	}	

#footerleft {
	float: left;
}

#footerright {
	float: right;
	text-align: right;
}	

.foot_home {
	padding: 0px 0px 0px 32px;
	background: url(images/foot_home.png) no-repeat left top;
	line-height: 20px;
	}	

.foot_mail {
	padding: 0px 0px 0px 32px;
	background: url(images/foot_mail.png) no-repeat left;
	line-height: 30px;
	}		
	
.foot_iphone {
	padding: 0px 0px 0px 32px;
	background: url(images/foot_iphone.png) no-repeat left top;
	line-height: 30px;
	}

.foot_skype {
	padding: 0px 0px 0px 32px;
	margin: 6px 0px 0px 0px;
	background: url(images/foot_skype.png) no-repeat left top;
	line-height: 30px;
	}			

#footersocial {
	float: right;
	}	

#footersocial li {
	float: left;
	margin: 0px 0px 0px 7px;
	}		
	
#footer #social_twitter {
  background-image:url(images/social_sprite.png);
  background-position:0px 0px;
  display:block;
  height:24px;
  width:24px;
}

#footer #social_twitter:hover {
  background-image:url(images/social_sprite.png);
  background-position:0px 24px;
  display:block;
  height:24px;
  width:24px;
}

#footer #social_flickr {
  background-image:url(images/social_sprite.png);
  background-position:24px 0px;
  display:block;
  height:24px;
  width:24px;
}

#footer #social_flickr:hover {
  background-image:url(images/social_sprite.png);
  background-position:24px 24px;
  display:block;
  height:24px;
  width:24px;
}

#footer #social_linkedin {
  background-image:url(images/social_sprite.png);
  background-position:48px 0px;
  display:block;
  height:24px;
  width:24px;
}

#footer #social_linkedin:hover {
  background-image:url(images/social_sprite.png);
  background-position:48px 24px;
  display:block;
  height:24px;
  width:24px;
}

#footer #social_facebook {
  background-image:url(images/social_sprite.png);
  background-position:72px 0px;
  display:block;
  height:24px;
  width:24px;
}

#footer #social_facebook:hover {
  background-image:url(images/social_sprite.png);
  background-position:72px 24px;
  display:block;
  height:24px;
  width:24px;
}


/******************************************portfolio*/


.splitter {
  margin: 20px 0px 0px 0px;
  padding: 0px;
  font-size: 12px;
  width: 500px;
  list-style: none;
  float: left;
}

.splitter * {
	margin: 0px;
	padding: 0px;
	}

.splitter li {
	padding:  0px 0px 0px -20px;
	}

.splitter li {
	list-style: none;
	display: inline;
	margin: 0px;
	padding: 0px;
	}

.splitter:after {
  content: "";
  display: block;
  overflow: hidden;
  clear: both;
}


.splitter ul li a  {
 	float: left;
	text-align: center;
	background: url(images/submenu_bg.png) center top no-repeat;
	margin: 16px 0px;
	width: 114px;
	list-style: none;
	display: inline;
	padding: 0px;
	overflow: hidden;
}

.splitter ul li:first-child {
  	margin-left: 0;
  	list-style: none;
  	margin: 0px;
}

.splitter ul li a {
  	padding: 5px 0px 6px 0px;
  	color: #070708;
  	text-decoration: none;
 	margin: 0px;
}


.splitter ul li.selected-0 a,
.splitter ul li.selected-1 a,
.splitter ul li.selected-2 a {
	color: #829013;
	background: url(images/submenu_bg_hover.png) center top no-repeat;
}




/*
---------------------------------------------------------------------- */



.demo {
	margin: 0px;
	padding: 0px;
	width: 1000px;
	}

.image-grid {
	margin: 0px;
	padding: 0px;
	}

.image-grid li {
	list-style: none;
  width: 290px;
  margin: 0px 43px 10px 0px;
  float: left;
  text-align: center;
  font-family: "Helvetica Neue", 'Droid Sans', sans-serif;
  line-height: 17px;
  color: #686f74;
  height: 235px;
  overflow: hidden;
}

.image-grid li img,
.image-grid li strong {
  display: block;
  margin: 0px;
  padding: 0px;
}

.image-grid li strong {
	text-align: left;
	margin: 4px 0px 0px 0px;
  color: #686f74;
}

.image-grid li img {
	border: #fff 4px solid;
}

.image-grid li img:hover {
	border: #dcdcdc 4px solid;
}



.projectNav {
	margin: 30px 0 30px 0;
	border-top: 1px solid #d4d4d4;
	padding-top: 30px;
}

.projectNav a{
	display: block!important;
	width: 28px;
	height: 28px;
	text-indent: -9999px;	
}

.projectNav div {
	float: left;
	margin-right: 10px;
	width: 28px;
	height: 28px;
}

.projectNav .next a{
	background: transparent url(images/project_nav_right.png) no-repeat;
	background-position: 0 -28px;
}

.projectNav .next a:hover {	
	background-position: 0 0;
}

.projectNav .next.inactive{
	background: transparent url(images/project_nav_right.png) no-repeat;
	background-position: 0 -56px;
}

.projectNav .previous a{
	background: transparent url(images/project_nav_left.png) no-repeat;
	background-position: 0 -28px;
}

.projectNav .previous a:hover {	
	background-position: 0 0;

}

.projectNav .previous.inactive{
	background: transparent url(images/project_nav_left.png) no-repeat;
	background-position: 0 -56px;

}