html, body{
padding : 0;margin : 0;
width:100%;
}
body{
font-size : small;
line-height: 1.3em;
font-family: Verdana,Arial, Helvetica, sans-serif;
color : #FFF;
text-align : center;
background : #FFF url(../imgs/body-bg.gif) no-repeat 50% 75px;
}
body#home{
padding-top: 100px;
background : #FFF;
text-align:center;
}
body#home h1{
z-index : 2;
width : auto; height : 600px;
margin : 0; padding : 0;
background : transparent url(../imgs/h1-home.gif) no-repeat 50% 50%;
text-indent : -3000px;
border : none;
text-decoration : none;
}
body#home h1 a{
display:block;
width: auto; height: 600px;
}
body#home a{
font-size: 80%;
display: block;
color: #2C5E8D;
text-decoration:none;
border-bottom:0;
}
/************************************************
*	containing divs
************************************************/
#wrap{
text-align : left;
position : relative;
width : 775px;
margin : 0 auto;padding: 50px 0 0 0;
}
#head{
width : 775px;height: 142px;
margin:0;padding:0;
position: relative;
}
#head h1{
position: absolute;
top: 0; left: 0;
width : 400px; height : 142px;
margin : 0; padding : 0;
background : transparent url(../imgs/h1.gif) no-repeat 0 0;
text-indent : -3000px;
border : none;
text-decoration : none;
}
#head h1 a{
display : block;
height : 142px;
text-decoration : none;
}
#head h2{
width : 310px; height : 1px;
margin : 0; padding : 0;
/* background : transparent url(../imgs/h2.gif) no-repeat 0 0; */
text-indent : -3000px;
border : none;
}
#nav{
width : 775px;
margin : 10px 0 0 0;padding : 5px 0 0 0;
background : #369 url(../imgs/nav-ul-top.gif) no-repeat 0 0;
}
#content{
width : 775px;height : 331px;
float : right;
clear : left;
margin : 10px 0 0 0;padding : 0;
background : #369 url(../imgs/content-bg-top.gif) no-repeat 0 0;
}
body#home #wrap #content{
padding : 68px 0 0 0;margin : 0;
background : #FFF;
}
#footer{
margin : 0; padding : 5px;
clear : right;
text-align : center;
color : #369;
font-size : 70%;
}
#footer span{
color : #AE0000;
}
#footer a{
color : #369;
}
/************************************************
*	nav div
************************************************/
#nav-ul{
width : 775px;
float : left;
margin : 0;padding : 0;
background : #369 url(../imgs/nav-ul-bot.gif) no-repeat 0 100%;
}
#nav-ul li{
float: left;
display : inline;
}
#nav-ul li a{
text-decoration : none;
float : left;
color : #FFF;
width : 119px;
font-size : 80%;
font-weight : bold;
text-align : center;
padding : 3px 0 12px 0;margin : 0 5px 3px 5px;
background : #369 url(../imgs/nav-bg.gif) no-repeat 0 0;
}
#nav-ul li:hover a, #nav-ul li.busy a{
background : #4877a8 url(../imgs/nav-bg-over.gif) no-repeat 0 0;
}
li#over-ons{
position: relative;
}
ul#subnav{
z-index: 99;
background: #336699;
margin: 0; padding: 4px 0 0 0;
position: absolute;
display : none;
top: 30px;left: 0;
}
ul#subnav li{
float: none;
display: block;
padding: 0; margin: 0;
}
#nav-ul ul#subnav li a{
float: none;
display: block;
background: #4571A0;
}
#nav-ul ul#subnav li a:hover{
background: #4877A8;
}
li#over-ons:hover ul#subnav{
display: block;
}
/************************************************
*	content
************************************************/
#content #left{
float : left;
padding : 0; margin : 0;
width : 309px;height : 331px;
background : #FFF;
border-right : 1px solid #FFF;
}
#content #right{
width : 405px;height : 271px;
float : right;
padding : 30px;margin : 0;
background : #369 url(../imgs/content-right-bg.gif) no-repeat 100% 100%;
}
/************************************************
*	content typo
************************************************/
ul, li{
	list-style:none;
}
#content a{
color : #E6B24C;
text-decoration : none;
}
#content a:hover{
color : #E6B24C;
text-decoration : none;
border-bottom : 1px solid #E6B24C;
}
img{
border : none;
}
#content #right h3{
background : #4877A8 url(../imgs/innercontent-top-bg.gif) no-repeat 0 0;
padding : 20px 20px 10px 20px;margin : 0;
font-size : 90%;
}
#content #right p{
font-size : 70%;
height : 160px;
background : #4877A8 url(../imgs/innercontent-bot-bg.gif) no-repeat 0 100%;
padding : 0 20px 20px 20px;margin : 0;
}
#content #right ul{
background : #4877A8 url(../imgs/innercontent-bot-bg.gif) no-repeat 0 100%;
padding : 0 20px 20px 30px;margin : 0;
}
#content #right a#prev{
display : block;
height : 17px;
text-indent : -3000px;
background : #4877A8 url(../imgs/content-prev.gif) no-repeat 0 0;
margin-bottom: 5px;
}
#content #right a#prev:hover{
background : #4877A8 url(../imgs/content-prev.gif) no-repeat 0 100%;
border : none;
}
#content #right a#next{
display : block;
height : 17px;
text-indent : -3000px;
background : #4877A8 url(../imgs/content-next.gif) no-repeat 0 100%;
margin-top: 5px;
}
#content #right a#next:hover{
background : #4877A8 url(../imgs/content-next.gif) no-repeat 0 0;
border : none;
}
/************************************************
*	content over ons
************************************************/
#gebundelde-kracht #right p, #target-seeking #right p{
font-size : 70%;
height : 181px;
background : #4877A8 url(../imgs/innercontent-bot-bg.gif) no-repeat 0 100%;
padding : 0 20px 20px 20px;margin : 0;
}
/************************************************
*	content projecten
************************************************/
#pr-overzicht #right #inner-top{
height : 21px;
background : #4877A8 url(../imgs/innercontent-top-bg.gif) no-repeat 0 0;
}
#pr-overzicht #right #inner{
background : #4877A8;
width : 405px;
height : 225px;
overflow:auto;
/*scrollbar fuckery*/
scrollbar-base-color:blue;
scrollbar-track-color:#4877A8;
scrollbar-face-color:#336699;
scrollbar-highlight-color:#336699;
scrollbar-3dlight-color:#4877A8;
scrollbar-darkshadow-color:#4877A8;
scrollbar-shadow-color:#4877A8;
scrollbar-arrow-color:white;
}
#pr-overzicht #right #inner-bot{
height : 21px;
background : #4877A8 url(../imgs/innercontent-bot-bg.gif) no-repeat 0 100%;
}
#pr-overzicht #right #inner ul{
width : 320px;
height : 1%;
list-style : none;
padding : 20px 20px 10px 20px;margin : 0;
}
#pr-overzicht #content #right #inner h3{
padding : 0 0 0 20px;
background : none;
}
#pr-overzicht #content #right #inner ul li h3{
float : left;
width : 150px;
padding : 0 20px 0 0;margin : 0;
}
#pr-overzicht #content #right ul span{
float : right;
width : 150px;
font-size : 80%;
}
#pr-overzicht #content #right ul a{
float : left;
width : 170px;
}
#pr-overzicht #content #right ul a:hover{
border : none;
}
#pr-overzicht #content #right li{
behavior: url(/vh-dr/style/hover.htc);
width : 343px;
clear : left;
float : left;
padding: 5px 0;
border-bottom : 1px solid #6D91B7;
}
#pr-overzicht #content #right li:hover, #pr-overzicht #content #right li.hover{
background : url(../imgs/prod-nav-bg.jpg) repeat-y 100% 0;
}
/************************************************
*	content projecten-detail
************************************************/
#pr-detail #left{
width : 249px;
height : 271px;
padding : 30px;
background : #4976A5;
}
#pr-detail #left h3{
margin : 0; padding : 0 0 5px 0;
}
#pr-detail #left h4{
font-size : 80%;
margin : 0; padding : 0 0 25px 0;
}
#pr-detail #left ul{
list-style : none;
font-size : 90%;
padding : 0 ;margin : 0 0 30px 0;
}
#pr-detail #left ul a{
text-decoration : none;
display : block;
padding : 2px 0 2px 0;margin : 0;
color : #FFF;
border-bottom : 1px solid #A1C2E0;
}
#pr-detail #left ul a:hover, #pr-detail #left ul a.busy{
text-decoration : none;
display : block;
padding : 2px 0 2px 0;margin : 0;
color : #FFF;
background : #628EB6;
border-bottom : 1px solid #A1C2E0;
}
#pr-detail #left p{
padding : 5px  30px 5px 5px;
border-left : 1px solid #E6B24C;
font-size : 80%;
}
#pr-detail #left a#detail{
font-size : 80%;
width : 75px;
text-align : center;
float : right;
color : #FFF;
background : #628EB6 url(../imgs/meer-info-top.gif) no-repeat 0 0;
}
#pr-detail #left a#detail:hover{
display : block;
color : #FFF;
padding : 0;
border : none;
background : #E6B24C url(../imgs/meer-info-top.gif) no-repeat 100% 0 !important;
}
#pr-detail #left a#detail:hover span{
background : transparent url(../imgs/meer-info-bot.gif) no-repeat 100% 100%;
}
#pr-detail #left span{
display : block;
color : #FFF;
padding : 1px;
background : transparent url(../imgs/meer-info-bot.gif) no-repeat 0 100%;
}
#pr-detail #content #right h3{
font-size : 90%;
background : #4877A8 url(../imgs/innercontent-top-bg.gif) no-repeat 0 0;
padding : 20px 20px 20px 20px ;margin : 0;
}
#pr-detail #content #right p{
font-size : 70%;
background : #4877A8 url(../imgs/innercontent-bot-bg.gif) no-repeat 0 100%;
padding : 0 20px 20px 20px;margin : 0;
}
#pr-detail #content ul#select-pr{
float:left;
padding:0;
width:100%;
background:none;
}
#pr-detail #content ul#select-pr li{
float:left;
margin-right:8px;
}
#pr-detail #content #placeholder{
border:1px solid #FFF;
width:375px;
height:241px;
margin-bottom:12px;
background:#4877a8 url(../imgs/pr-detail-preload.gif) no-repeat center center;
}
#pr-detail #content #placeholder img{
width:375px;
height:241px;
}
#pr-detail #content ul#select-pr li a{
float:left;
width:25px;
line-height:25px;
text-align:center;
background:url(../imgs/pr-detail-btn.gif) no-repeat 0 0;
color:#A1C2E0;
}
#pr-detail #content ul#select-pr li a:hover, #pr-detail #content ul#select-pr li a:active{
float:left;
width:25px;
line-height:25px;
text-align:center;
background:url(../imgs/pr-detail-btn.gif) no-repeat 0 100%;
color:#FFF;
border:none;
}
/************************************************
*	content projecten-meerinfo
************************************************/
#pr-meerinfo #left{
width : 249px;
height : 271px;
padding : 30px;
background : #4976A5;
}
#pr-meerinfo #left h3{
margin : 0; padding : 0 0 5px 0;
}
#pr-meerinfo #left h4{
font-size : 80%;
margin : 0; padding : 0 0 25px 0;
}
#pr-meerinfo #left ul{
list-style : none;
font-size : 90%;
padding : 0 ;margin : 0;
}
#pr-meerinfo #left ul a{
text-decoration : none;
display : block;
padding : 2px 0 2px 0;margin : 0;
color : #FFF;
border-bottom : 1px solid #A1C2E0;
}
#pr-meerinfo #left ul a:hover{
text-decoration : none;
display : block;
padding : 2px 0 2px 0;margin : 0;
color : #FFF;
background : #628EB6;
border-bottom : 1px solid #A1C2E0;
}
#pr-meerinfo #left a#detail{
font-size : 80%;
width : 75px;
text-align : center;
float : right;
color : #FFF;
background : #E6B24C url(../imgs/meer-info-top.gif) no-repeat 100% 0 !important;
}
#pr-meerinfo #left a#detail:hover{
border : none;
}
#pr-meerinfo #left span{
display : block;
color : #FFF;
padding : 1px;
background : transparent url(../imgs/meer-info-bot.gif) no-repeat 100% 100%;
}
#pr-meerinfo #right #inner-top{
height : 21px;
background : #4877A8 url(../imgs/innercontent-top-bg.gif) no-repeat 0 0;
}
#pr-meerinfo #right #inner-content{
background : #4877A8;
height : 225px;
overflow:auto;
/*scrollbar fuckery*/
scrollbar-base-color:blue;
scrollbar-track-color:#4877A8;
scrollbar-face-color:#336699;
scrollbar-highlight-color:#336699;
scrollbar-3dlight-color:#4877A8;
scrollbar-darkshadow-color:#4877A8;
scrollbar-shadow-color:#4877A8;
scrollbar-arrow-color:white;

}
#pr-meerinfo #right #inner-bot{
height : 21px;
background : #4877A8 url(../imgs/innercontent-bot-bg.gif) no-repeat 0 100%;
}
#pr-meerinfo #content #right h3{
font-size : 90%;
background : none;
padding : 0 20px 20px 20px;margin : 0 10px 0 0;
}
#pr-meerinfo #right p{
padding : 0 20px; margin : 0;
}
/************************************************
*	referenties 
************************************************/
#referenties #right #inner-top{
height : 21px;
background : #4877A8 url(../imgs/innercontent-top-bg.gif) no-repeat 0 0;
}
#referenties #right #inner-content{
background : #4877A8;
height : 225px;
overflow:auto;
/*scrollbar fuckery*/
scrollbar-base-color:blue;
scrollbar-track-color:#4877A8;
scrollbar-face-color:#336699;
scrollbar-highlight-color:#336699;
scrollbar-3dlight-color:#4877A8;
scrollbar-darkshadow-color:#4877A8;
scrollbar-shadow-color:#4877A8;
scrollbar-arrow-color:white;
}
#referenties #right #inner-bot{
height : 21px;
background : #4877A8 url(../imgs/innercontent-bot-bg.gif) no-repeat 0 100%;
}
#referenties #right #inner-content ul{
width : 320px;
height : 1%;
list-style : none;
padding : 20px 20px 10px 20px;margin : 0;
}
#referenties #content #right #inner-content h3{
padding : 0 0 0 20px;
background : none;
}
#referenties #content #right #inner-content ul li h3{
float : left;
width : 150px;
padding : 0 20px 0 0;margin : 0;
}
#referenties #content #right ul span{
float : left;
width : 170px;
}
#referenties #content #right li{
width : 340px;
clear : left;
float : left;
margin-bottom : 5px;
padding-bottom : 5px;
border-bottom : 1px solid #6D91B7;
}
/************************************************
*	contact
************************************************/
#contact #content #left{
float : left;
padding : 0; margin : 0;
width : 464px;
background : #FFF;
border-right : 1px solid #FFF;
}
#contact #content #right{
float : right;
height : 311px;
padding : 10px;margin : 0;
width : 290px;
background : transparent url(../imgs/content-right-bg.gif) no-repeat 100% 100%;
}
#contact #content #right p{
height : 244px;
}
/************************************************
*	meer-weten
************************************************/
#meer-weten #right #inner-top{
height : 21px;
background : #4877A8 url(../imgs/innercontent-top-bg.gif) no-repeat 0 0;
}
#meer-weten #right #inner-content{
background : #4877A8;
height : 225px;
padding : 0 20px; margin : 0;
overflow:auto;
/*scrollbar fuckery*/
scrollbar-base-color:blue;
scrollbar-track-color:#4877A8;
scrollbar-face-color:#336699;
scrollbar-highlight-color:#336699;
scrollbar-3dlight-color:#4877A8;
scrollbar-darkshadow-color:#4877A8;
scrollbar-shadow-color:#4877A8;
scrollbar-arrow-color:white;
}
#meer-weten #right #inner-bot{
height : 21px;
background : #4877A8 url(../imgs/innercontent-bot-bg.gif) no-repeat 0 100%;
}
#meer-weten #content #right h3{
background : none;
padding : 0;margin : 0 0 10px 12px;
}
#meer-weten #right #inner-content div{
clear : left;
margin : 0 0 5px 0; padding : 0;
}
/************************************************
*	vacatures
************************************************/
#vacatures #left{
width : 249px;
height : 271px;
padding : 30px;
background : #4976A5;
}
#vacatures #left ul{
list-style : none;
font-size : 90%;
padding : 0 ;margin : 0;
}
#vacatures #left ul a{
text-decoration : none;
display : block;
padding : 2px 0 2px 0;margin : 0;
color : #FFF;
border-bottom : 1px solid #6D91B7;
}
#vacatures #left ul a:hover{
text-decoration : none;
display : block;
color : #FFF;
background : #628EB6;
border-bottom : 1px solid #6D91B7;
}
#vacatures #left a#detail{
float : right;
color : #FFF;
}
#vacatures #right #inner-top{
height : 21px;
background : #4877A8 url(../imgs/innercontent-top-bg.gif) no-repeat 0 0;
}
#vacatures #right #inner-content{
background : #4877A8;
height : 225px;
overflow:auto;
/*scrollbar fuckery*/
scrollbar-base-color:blue;
scrollbar-track-color:#4877A8;
scrollbar-face-color:#336699;
scrollbar-highlight-color:#336699;
scrollbar-3dlight-color:#4877A8;
scrollbar-darkshadow-color:#4877A8;
scrollbar-shadow-color:#4877A8;
scrollbar-arrow-color:white;
}
#vacatures #right #inner-bot{
height : 21px;
background : #4877A8 url(../imgs/innercontent-bot-bg.gif) no-repeat 0 100%;
}
#vacatures #content #right h3{
font-size : 90%;
background : none;
padding : 20px 20px 10px 20px ;margin : 0;
}
#vacatures #right ul{
list-style : none;
padding : 30px; margin : 0;
}
#vacatures #content #right ul li h3{
background : none;
padding : 0; margin : 0;
}
#vacatures #content #right ul li{
padding : 0; margin : 0 0 5px 0;
}
/************************************************
*	webdesign
************************************************/
#webdesign #right #inner-top{
height : 21px;
background : #4877A8 url(../imgs/innercontent-top-bg.gif) no-repeat 0 0;
}
#webdesign #right #inner-content{
background : #4877A8;
height : 225px;
padding : 0 20px 0 0; margin : 0;
overflow:auto;
}
#webdesign #right #inner-bot{
height : 21px;
background : #4877A8 url(../imgs/innercontent-bot-bg.gif) no-repeat 0 100%;
}
#webdesign #right #inner-content h3{
background : none;
padding : 0 20px 10px 20px;margin : 0 10px 0 0;
}
#webdesign #right #inner-content p{
height: auto;
padding: 0 20px 1px;margin:0 0 20px;
}
/************************************************
*	lang nav
************************************************/
ul#lang{
list-style : none;
position : absolute;
top : 50px; right : 0;
margin : 0; padding :0;
font-size : 80%;
color : #AEAEAE;
text-transform : uppercase;
}
ul#lang li{
width :143px;
height : 21px;
background : url(../imgs/lang-nav-bg.gif) no-repeat 0 0;
}
ul#lang li span{
display : block;
padding : 0 0 0 20px;
}
ul#lang li:hover{
width :143px;
background : url(../imgs/lang-nav-bg.gif) no-repeat 0 100%;
}
ul#lang li ul{
list-style : none;
margin : 0; padding : 0;
display : none;
}
ul#lang li:hover ul{
display : block;
padding : 3px 0 0 0;
}
ul#lang li:hover ul li{
background  : none;
}
ul#lang li:hover ul a{
margin : 0 14px 0 0;padding : 0 0 0 20px;
display : block;
color : #AEAEAE;
text-decoration : none;
background : #eee;
}
ul#lang li:hover ul a:hover{
background : #e8e8e8;
}
/************************************************
*	form
************************************************/
label{
display : block;
}
fieldset{
padding : 10px 0 0 10px;margin : 0 0 10px 0;
border : none;
background : url(../imgs/fieldset-bg.jpg) no-repeat 0 0;
}
div.sbmt{
}
div.sbmt input{
width : 150px;
}
textarea, input{
width : 325px;
padding : 5px;
display: block;
}
textarea{
/*even more scrollbar fuckery!*/
scrollbar-arrow-color: #000000;
scrollbar-base-color: #000000;
scrollbar-dark-shadow-color: #DDDDDD;
scrollbar-track-color: #DDDDDD;
scrollbar-face-color: #D4D0C8;
scrollbar-shadow-color: #DDDDDD;
scrollbar-highlight-color: #DDDDDD;
scrollbar-3d-light-color: #DDDDDD; 
}
div.cr input{
width : auto;
display: inline;
}
span.error{
font-size: 80%;
}