/* RESET CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: none; }
:focus { outline: 0; }
body { line-height: 1; }
ul, ol { font-family: Arial; font-size: 12px; color: #606060; line-height: 17px; margin-left: 15px; padding-left: 0px;}
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* MAIN CSS */
* body { }
* html { height:100%; overflow-x: hidden; }
p { font-family: Arial; font-size: 12px; color: #a5a5a5; line-height: 17px; }
a { color: #a2a2a2; }
a:hover { color: #a2a2a2; text-decoration:none; }
form{ margin:0px; }
form label { width:260px; display:block; margin-top:5px; font-family:Arial; font-size:12px; color:#000; }
input, select, textarea { font-family: Arial; font-size: 12px; color: #000; border:1px solid #FFF; }
#message { display:none; }
.cform { margin:0px; }
.cformFields { width:365px; padding:3px; margin-top:5px; font-size:12px; color:#000; background-color:#CCC; border:1px solid #FFF; }
.cformBtn { width:160px; height:40px; overflow:hidden; background:url(/img/formsend.gif); border:0; cursor:pointer; margin-top:20px; }
.cformBtn:hover { background-position:0 -40px; }
.contactLeft { width:370px; margin-right:20px; float:left; }
.contactRight { width:370px; float:left; }
h1 { font-family:Arial; color:#FFF; font-size:36px; font-weight:normal; text-transform:uppercase; margin-bottom:10px; }
h2 { font-family:Arial; color:#9b9b9b; font-size:18px; font-weight:bold; text-transform:uppercase; margin-bottom:10px; }
.clear { content:"."; clear:both; height:0px; display:block; overflow:hidden; }
.container { margin:0 auto; width:980px; font-family:Arial; font-size:12px; }
.white { color:#FFF; }
.black { color:#000; }
.pink { color:#e30059; }
.grey { color:#747474; }
.nieuwsTitel { font-family:Arial; font-size:12px; font-weight:bold; color:#FFF; }
.nieuwsTitel a { color:#FFF; text-decoration:none; }
.nieuwsTitel a:hover { color:#FFF; text-decoration:underline; }
.mTop { width:980px; height:130px; }
.mTopLeft { width:700px; height:130px; float:left; }
.mTopRight { width:280px; height:130px; float:left; }
.menuSec { height:60px; width:680px; font-size:11px; font-family:Arial; text-transform:uppercase; color:#a2a2a2; padding:10px; }
.menuSec a { text-decoration:none; }
.menuSec a:hover { text-decoration:none; color:#000; }
.menuPrim { height:30px; width:700px; }
.bodyLeft { width:700px; float:left; }
.bodyRight { width:280px; float:left; background-image:url(/img/fadeRight.gif); background-position:0 20px; background-repeat:no-repeat; }
.header { width:700px; height:350px; z-index:10; }
.bodyContent { width:660px; padding:20px; background-image:url(/img/bodybg.gif); background-position:top; background-repeat:no-repeat; min-height:200px; }
.bottom { width:940px; height:210px; background-image:url(/img/bottom.gif); background-repeat:no-repeat; margin-top:20px; padding:20px; font-family:Arial; font-size:11px; color:#666; text-align:center; }
.bottom a { color:#666; text-decoration:none; }
.bottom a:hover { color:#666; text-decoration:underline; }
.bodyRightWork { width:280px; height:271px; overflow:hidden; margin-top:20px; text-align:right; padding-top:10px; font-family:Arial; font-size:11px; color:#3c3c3c; line-height:17px; }
.bodyRightOnderzoek { width:260px; height:306px; margin-top:20px; text-align:right; padding:10px 0 0 20px; font-family:Arial; font-size:11px; color:#3c3c3c; line-height:17px; }
.klant label { float:left; width:200px; color: #7f7f7f; line-height: }
.klant input { line-height:20px; width:250px; margin-top:5px; }
.klant p { clear:both; }
.slider { height:50px; border-bottom: 1px solid #7f7f7f; margin-top:10px; padding-top:10px; }
.stxt { position:absolute; width:100px; }
.rightTab { width:250px; margin-left:30px; }
.rightTabBtn { width:125px; height:34px; overflow:hidden; float:left; }
.rightTabBtn a:hover img, .rightTabBtnImg_on { margin-top:-34px; }
.tabDivs { width:250px; padding:20px 0 0 0; color:#FFF; font-size:11px; overflow:hidden; text-align:right; background:#000; }
.nieuwsberichtHome { width:250px; border-bottom:1px solid #3b3b3b; padding-bottom:10px; margin-bottom:10px; }
.linkBtn { height:60px; overflow:hidden; }
.linkBtn a:hover img { margin-top:-60px; }
.portfolioHeader { width:980px; height:315px; margin-top:20px; }
#contactblok { width:760px; height:360px; padding:20px; }
#loader { position:absolute; width:980px; height:165px; background-color:#fff; margin-top:20px; z-index:100; padding-top:150px; }
.mensenNav { width:30px; height:185px; float:left; padding-top:130px; }
.mensenImage { width:560px; float:left; margin-right:20px; overflow:hidden; }
.mensenInfo { width:340px; height:265px; float:left; padding-top:50px; overflow:hidden; }
.mensenNavBtn { width:30px; height:30px; overflow:hidden; }
.mensenNavBtn a:hover img { margin-top:-30px; }
.marquee { width:980px; height:95px; padding:20px 0 20px 0; overflow:hidden; }
.mensenThumb { width:80px; height:80px; overflow:hidden; float:left; margin-right:20px; }
.mensenTxt { width:680px; padding:0 0 0 20px; margin-right:30px; float:left; }
.mensenVacatures { width:250px; float:left; padding:20px 0 0 0; font-family:Arial; color:#FFF; font-size:12px; line-height:18px; }
.mensenVacatures a { color:#FFF; text-decoration:none; }
.mensenVacatures a:hover { color:#FFF; text-decoration:underline; }
#contentArea { height:335px; overflow:hidden; }
#Referenties { height:335px; overflow:hidden; position:relative; }
a.navi { width:30px; height:30px; overflow:hidden; position:absolute; top: 150px; margin:10px; }
a.navi:hover img { margin-top:-30px; }
.portfolioItem { width:190px; height:155px; float:left; margin-right:20px; padding:20px; background-image:url(/img/portfolioThumbBg.gif); cursor:pointer; }
.portfolioNav { width:980px; height:30px; margin-top:20px; }
/*.portfolioBtn { width:230px; height:30px; overflow:hidden; }
.portfolioBtn a:hover img { margin-top:-30px; }*/
.wp { color:#313131; }
.wp a { color:#313131; text-decoration:none; }
.wp a:hover { color:#313131; text-decoration:underline; }
/*fancybox*/
div#fancy_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 30;}
div#fancy_loading { position: absolute; height: 40px; width: 40px; cursor: pointer; display: none; overflow: hidden; background: transparent; z-index: 100;}
div#fancy_loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background: transparent url('/img/fancy_progress.png') no-repeat;}
div#fancy_outer { position: absolute; top: 0; left: 0; z-index: 90; padding: 20px 20px 40px 20px; margin: 0; background: transparent; display: none;}
div#fancy_inner { position: relative; width:100%; height:100%; background: #FFF;}
div#fancy_content { margin: 0; z-index: 100; position: absolute;}
div#fancy_div { background: #000; color: #FFF; height: 100%; width: 100%; z-index: 100;}
img#fancy_img { position: absolute; top: 0; left: 0; border:0; padding: 0; margin: 0; z-index: 100; width: 100%; height: 100%;}
div#fancy_close { position: absolute; top: -12px; right: -15px; height: 30px; width: 30px; background: url('/img/fancy_closebox.png') top left no-repeat; cursor: pointer; z-index: 181; display: none;}
#fancy_frame { position: relative; width: 100%; height: 100%; display: none;}
#fancy_ajax { width: 100%; height: 100%; overflow: auto;}
a#fancy_left, a#fancy_right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; z-index: 111; display: none; background-image: url("data:image/gif;base64,AAAA"); outline: none; overflow: hidden;}
a#fancy_left { left: 0px; }
a#fancy_right { right: 0px; }
span.fancy_ico { position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; z-index: 112; cursor: pointer; display: block;}
span#fancy_left_ico { left: -9999px; background: transparent url('/img/fancy_left.png') no-repeat;}
span#fancy_right_ico { right: -9999px; background: transparent url('/img/fancy_right.png') no-repeat;}
a#fancy_left:hover, a#fancy_right:hover { visibility: visible; background-color: transparent;}
a#fancy_left:hover span { left: 20px; }
a#fancy_right:hover span { right: 20px; }
#fancy_bigIframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent;}
div#fancy_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 70; border: 0; padding: 0; margin: 0;}
div.fancy_bg { position: absolute; display: block; z-index: 70; border: 0; padding: 0; margin: 0;}
div#fancy_bg_n { top: -20px; left: 0; width: 100%; height: 20px; background: transparent url('/img/fancy_shadow_n.png') repeat-x;}
div#fancy_bg_ne { top: -20px; right: -20px; width: 20px; height: 20px; background: transparent url('/img/fancy_shadow_ne.png') no-repeat;}
div#fancy_bg_e { right: -20px; height: 100%; width: 20px; background: transparent url('/img/fancy_shadow_e.png') repeat-y;}
div#fancy_bg_se { bottom: -20px; right: -20px; width: 20px; height: 20px; background: transparent url('/img/fancy_shadow_se.png') no-repeat;}
div#fancy_bg_s { bottom: -20px; left: 0; width: 100%; height: 20px; background: transparent url('/img/fancy_shadow_s.png') repeat-x;}
div#fancy_bg_sw { bottom: -20px; left: -20px; width: 20px; height: 20px; background: transparent url('/img/fancy_shadow_sw.png') no-repeat;}
div#fancy_bg_w { left: -20px; height: 100%; width: 20px; background: transparent url('/img/fancy_shadow_w.png') repeat-y;}
div#fancy_bg_nw { top: -20px; left: -20px; width: 20px; height: 20px; background: transparent url('/img/fancy_shadow_nw.png') no-repeat;}
div#fancy_title { position: absolute; z-index: 100; display: none;}
div#fancy_title div { color: #FFF; font: bold 12px Arial; padding-bottom: 3px; white-space: nowrap;}
div#fancy_title table { margin: 0 auto;}
div#fancy_title table td { padding: 0; vertical-align: middle;}
td#fancy_title_left { height: 32px; width: 15px; background: transparent url('/img/fancy_title_left.png') repeat-x;}
td#fancy_title_main { height: 32px; background: transparent url('/img/fancy_title_main.png') repeat-x;}
td#fancy_title_right { height: 32px; width: 15px; background: transparent url('/img/fancy_title_right.png') repeat-x;}
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable { /* required settings */ position:relative; overflow:hidden; width: 980px; height:195px; /* custom decorations */}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
.scrollable .items { /* this cannot be too large */ width:20000em; position:absolute; clear:both; margin-top:20px;}
/* active item */
.scrollable .active { z-index:20; position:relative; background-color:#FFF; background-image:none;}
/* this makes it possible to add next button beside scrollable */
.scrollable { float:left; }
/* prev, next, prevPage and nextPage buttons */
a.browse { display:block; width:230px; height:30px; float:left; margin:20px 0; cursor:pointer; font-size:1px; overflow:hidden;}
/* right */
a.right { background-position: 0; float:right; background:url(/img/btn_volgende.gif) no-repeat; }
a:hover.right { background-position:0 -30px; float:right; }
/* left */
a.left { margin-left: 0px; float:left; background:url(/img/btn_vorige.gif) no-repeat; }
a:hover.left { background-position:0 -30px; float:left; }
/* disabled navigational button */
a.disabled { visibility:hidden !important;}