/* ++++++++++++ STYLES FOR SCREEN +++++++++++ */ @media screen { /* ++++++++++++++++++++ RESET TAGS +++++++++++++++++++++ */ * { margin:0; padding:0; font-family: Trebuchet, Arial, Verdana, Geneva, Helvetica, sans-serif; font-size:100%; color:#000; text-decoration:none; } html { } html, body { height:100%; background-color:#fff; color:#000; } fieldset { border:0px solid #fff; } table, td, th { border-collapse:collapse; } img { display:block; border:none; } ul { width:auto; list-style:none; } li a { display:block; } * html li { height:1%; } a.pdf { display:block; padding:0 0 3px 25px; background:url(../media/icon_acrobat.gif) 0 0 no-repeat; color:blue; text-decoration:none; } a.word { display:block; padding:0 0 3px 25px; background:url(../media/icon_word.gif) 0 0 no-repeat; color:blue; text-decoration:none; } a.pdf:hover, a.word:hover { color:red; text-decoration:underline;} /* ++++++++++++++++++++ End RESET TAGS ++++++++++++++++++++ */ #overlay { top:0; left:0; width:100%; background:#6d7f97; opacity:0.72; position:absolute; z-index:996; height:200px; z-index:998; } #popUp { position:absolute; top:50px; left:50px; width:400px; height:100px; z-index:999; padding:3px; border-radius:3px; background:#fff; } #popUp a { width:43px; height:43px; z-index:999; background:transparent url(../media/close.svg) 0px 0px no-repeat; display:block; text-indent:-999em; position:absolute; top:-50px; right:-30px; } #popUpIframe { width:100%; } #popUpContainer { height:645px; overflow:auto; } .text-only { display:none; } body, html { background:#fff url(../media/bg.gif) 0 0 repeat-x; } #container { margin:0 auto; padding:50px 0 25px 0; width:776px; } #header { background:url(../media/bg-header.gif) 0 0 no-repeat; height:122px; } /* ++++++++++++++++++++ MAIN NAVIGATION +++++++++++++++++++++ */ #navigation { } #navigation .nav-holder { width:776px; overflow:hidden; } #navigation ul#main-navigation { width:300px; float:left; overflow:hidden; margin:47px 0 0 45px; } ul#main-navigation li, ul#main-navigation li a { display:block; float:left; outline:none; } ul#main-navigation li a span { display:none; } #aboutLink { background:transparent url(../media/mainAbout_off.gif) 0px 0px no-repeat; width:78px; height:26px; padding-right:2px;} #aboutLink:hover { background:transparent url(../media/mainAbout_over.gif) 0px 0px no-repeat;} #aboutLink.on, #aboutLink.on:hover { background:transparent url(../media/mainAbout_on.gif) 0px 0px no-repeat;} #workLink { background:transparent url(../media/mainWork_off.gif) 0px 0px no-repeat; width:72px; height:26px; padding-right:2px;} #workLink:hover { background:transparent url(../media/mainWork_over.gif) 0px 0px no-repeat;} #workLink.on, #workLink.on:hover { background:transparent url(../media/mainWork_on.gif) 0px 0px no-repeat;} #contactLink { background:transparent url(../media/mainContact_off.gif) 0px 0px no-repeat;width:96px; height:26px; } #contactLink:hover { background:transparent url(../media/mainContact_over.gif) 0px 0px no-repeat;} #contactLink.on, #contactLink.on:hover { background:transparent url(../media/mainContact_on.gif) 0px 0px no-repeat;} /* ++++++++++++++++++++ FLASH ANIM +++++++++++++++++++++ */ #navigation #flash { display:block; float:right; background:transparent; height:80px; width:246px; } /* ++++++++++++++++++++ SUB NAVIGATION +++++++++++++++++++++ */ #navigation #sub-navigation { } #sub-navigation ul { overflow:hidden; width:360px; margin:10px 0 0 193px; } #sub-navigation ul li { display:block; float:left; } #sub-navigation ul a { display:inline; float:left; outline:none;} #sub-navigation ul a span { display:none; } #werk0 { background:transparent url(../media/werk0_off.gif) 0px 0px no-repeat; width:69px; height:29px; margin-right:3px;} #werk0:hover { background:transparent url(../media/werk0_over.gif) 0px 0px no-repeat;} #werk0.on, #werk0.on:hover { background:transparent url(../media/werk0_on.gif) 0px 0px no-repeat;} #werk1 { background:transparent url(../media/werk1_off.gif) 0px 0px no-repeat; width:69px; height:29px; margin-right:3px;} #werk1:hover { background:transparent url(../media/werk1_over.gif) 0px 0px no-repeat;} #werk1.on, #werk1.on:hover { background:transparent url(../media/werk1_on.gif) 0px 0px no-repeat;} #werk2 { background:transparent url(../media/werk2_off.gif) 0px 0px no-repeat; width:69px; height:29px; margin-right:3px;} #werk2:hover { background:transparent url(../media/werk2_over.gif) 0px 0px no-repeat;} #werk2.on, #werk2.on:hover { background:transparent url(../media/werk2_on.gif) 0px 0px no-repeat;} #werk3 { background:transparent url(../media/werk3_off.gif) 0px 0px no-repeat; width:69px; height:29px; margin-right:3px;} #werk3:hover { background:transparent url(../media/werk3_over.gif) 0px 0px no-repeat;} #werk3.on, #werk3.on:hover { background:transparent url(../media/werk3_on.gif) 0px 0px no-repeat;} /* ++++++++++++++++++++ VISUAL +++++++++++++++++++++ */ #visual { } /* ++++++++++++++++++++ CONTENT +++++++++++++++++++++ */ #content { background:transparent url(../media/bg-content.png) 0 100% no-repeat; padding:15px 30px 25px 30px; overflow:hidden; height:1%; } #content h2 { background:transparent 540px 0 no-repeat; width:175px; height:24px; padding:0 0 12px 600px;} #content h2#work0 { background:url(../media/h2-work-0.gif) 540px 0 no-repeat; width:175px; height:24px;} #content h2#work1 { background:url(../media/h2-work-1.gif) 540px 0 no-repeat; width:175px; height:24px;} #content h2#work2 { background:url(../media/h2-work-2.gif) 540px 0 no-repeat; width:175px; height:24px;} #content h2#work3 { background:url(../media/h2-work-3.gif) 540px 0 no-repeat; width:175px; height:24px;} #content h2#about { background:url(../media/h2-about.gif) 540px 0 no-repeat; width:175px; height:24px;} #content h2#contact { background:url(../media/h2-contact.gif) 540px 0 no-repeat; width:175px; height:24px;} #content .panel { background:url(../media/bg-panel-bottom.gif) 0 100% no-repeat; margin-bottom:25px; } #content .panel .top { background:url(../media/bg-panel-top.gif) 0 0 no-repeat; padding:24px;} #content .textWork { padding:5px 20px 0 5px; font-size: 12px; color: #496270; line-height: 1.4em; vertical-align: baseline;} #content .textWork .emphasis { font-size: 14px; font-weight: bold; color: #666666;} #content .textWork .bold { font-size: 12px; font-weight: bold; color: #666666;} #content a { color:#9987cf; outline:none; } #content a:hover { text-decoration:underline; } #content ul.list li {background:url(../media/liDot.gif) 0 4px no-repeat; padding:0 0 0 20px; margin:0; font-size: 12px; color: #496270;} /* tables */ #content table .width85 { width:85px; } #content table .width145 { width:145px; } #content table .width228 { width:228px; } #content table .width290 { width:290px; } /* ++++++++++++++++++++ OPEN POPUP BUTTONS - TEXTUEEL !! U-l +++++++++++++++++++++ */ ul.popupUl { overflow:hidden; margin-right:0px; } ul.popupUl li { display:block; float:right; } ul.popupUl a { float:left; display:inline; width:68px; height:27px; margin-left:4px; } ul.popupUl a span { display:none; } ul.popupUl a.popup1 { background:transparent url(../media/popup1_off.gif) 0px 0px no-repeat; } ul.popupUl a.popup1:hover { background:transparent url(../media/popup1_over.gif) 0px 0px no-repeat; } ul.popupUl a.popup2 { background:transparent url(../media/popup2_off.gif) 0px 0px no-repeat; } ul.popupUl a.popup2:hover { background:transparent url(../media/popup2_over.gif) 0px 0px no-repeat; } ul.popupUl a.popup3 { background:transparent url(../media/popup3_off.gif) 0px 0px no-repeat; } ul.popupUl a.popup3:hover { background:transparent url(../media/popup3_over.gif) 0px 0px no-repeat; } ul.popupUl a.popup4 { background:transparent url(../media/popupBedrLoket_off.gif) 0px 0px no-repeat; } ul.popupUl a.popup4:hover { background:transparent url(../media/popupBedrLoket_over.gif) 0px 0px no-repeat; } ul.popupUl a.popup5 { background:transparent url(../media/popup5_off.gif) 0px 0px no-repeat; } ul.popupUl a.popup5:hover { background:transparent url(../media/popup5_over.gif) 0px 0px no-repeat; } ul.popupUl a.popup6 { background:transparent url(../media/popup6_off.gif) 0px 0px no-repeat; } ul.popupUl a.popup6:hover { background:transparent url(../media/popup6_over.gif) 0px 0px no-repeat; } ul.popupUl a.popup7 { background:transparent url(../media/popup7_off.gif) 0px 0px no-repeat; } ul.popupUl a.popup7:hover { background:transparent url(../media/popup7_over.gif) 0px 0px no-repeat; } /* ++++++++++++++++++++ OPEN POPUP BUTTONS - GENUMMERD !! U-2 +++++++++++++++++++++ */ ul.popupU2 { overflow:hidden; margin-right:0px; } ul.popupU2 li { display:block; float:right; } ul.popupU2 a { float:left; display:inline; width:23px; height:21px; margin-left:8px; } ul.popupU2 a span { display:none; } ul.popupU2 a.popup1 { background:transparent url(../media/popupNr1_off.gif) 0px 0px no-repeat; } ul.popupU2 a.popup1:hover { background:transparent url(../media/popupNr1_over.gif) 0px 0px no-repeat; } ul.popupU2 a.popup2 { background:transparent url(../media/popupNr2_off.gif) 0px 0px no-repeat; } ul.popupU2 a.popup2:hover { background:transparent url(../media/popupNr2_over.gif) 0px 0px no-repeat; } ul.popupU2 a.popup3 { background:transparent url(../media/popupNr3_off.gif) 0px 0px no-repeat; } ul.popupU2 a.popup3:hover { background:transparent url(../media/popupNr3_over.gif) 0px 0px no-repeat; } ul.popupU2 a.popup4 { background:transparent url(../media/popupNr4_off.gif) 0px 0px no-repeat; } ul.popupU2 a.popup4:hover { background:transparent url(../media/popupNr4_over.gif) 0px 0px no-repeat; } ul.popupU2 a.popup5 { background:transparent url(../media/popupNr5_off.gif) 0px 0px no-repeat; } ul.popupU2 a.popup5:hover { background:transparent url(../media/popupNr5_over.gif) 0px 0px no-repeat; } ul.popupU2 a.popup6 { background:transparent url(../media/popupNr6_off.gif) 0px 0px no-repeat; } ul.popupU2 a.popup6:hover { background:transparent url(../media/popupNr6_over.gif) 0px 0px no-repeat; } /* ++++++++++++++++++++ POPUP 1 width:800px 400 - 800 +++++++++++++++++++++ */ .docs { background:#fff; } .docs .two-columns { background:url(../media/popUpHeaderBg.png); z-index:200; height:35px; overflow:hidden; position:relative;} .docs.werk .two-columns .left { width:300px; height:30px; float:left; margin:5px 0 0 10px; display:inline; } .docs.werk .two-columns .right { height:30px; width:30px; float:right; margin:0px 0 0 0px; } /* ++++++++++++++++++++ POPUP 2 width:400px 200 - 400 +++++++++++++++++++++ */ .docs2 { background:#fff; } .docs2 .two-columns { background:url(../media/popUpHeaderBg2.png); z-index:200; height:35px; overflow:hidden; position:relative;} .docs2.werk .two-columns .left { width:200px; height:30px; float:left; margin:5px 0 0 10px; display:inline; } .docs2.werk .two-columns .right { height:30px; width:30px; float:right; margin:0px 0 0 0px; } /* ++++++++++++++++++++ POPUP 3 width:1050px >800 VBS-YS +++++++++++++++++++++ */ .docs3 { background:#fff; } .docs3 .two-columns { background:url(../media/popUpHeaderBg3.png); z-index:200; height:35px; overflow:hidden; position:relative;} .docs3.werk .two-columns .left { width:300px; height:30px; float:left; margin:5px 0 0 10px; display:inline; } .docs3.werk .two-columns .right { height:30px; width:30px; float:right; margin:0px 0 0 0px; } /* ++++++++++++++++++++ POPUP 4 width:120px BANNER trail +++++++++++++++++++++ */ .docs4 { background:#fff; } .docs4 .two-columns { background:url(../media/popUpHeaderBg4.png); z-index:200; height:35px; overflow:hidden; position:relative;} .docs4.werk .two-columns .left { width:120px; height:30px; float:left; margin:5px 0 0 10px; display:inline; } .docs4.werk .two-columns .right { height:30px; width:30px; float:right; margin:0px 0 0 0px; } /* ++++++++++++++++++++ POPUP NAVIGATION +++++++++++++++++++++ */ ul#page-navigation { overflow:hidden; width:100%; margin-bottom:12px; } ul#page-navigation li, ul#werk-navigation a { display:block; float:left; } ul#page-navigation a { width:23px; height:21px; margin-right:3px; } ul#page-navigation a span { display:none; } ul#page-navigation a#page1 { background:transparent url(../media/1_off.gif) 0px 0px no-repeat; } ul#page-navigation a#page1:hover { background:transparent url(../media/1_over.gif) 0px 0px no-repeat; } ul#page-navigation a#page1.on, ul#page-navigation a#page1.on:hover { background:transparent url(../media/1_on.gif) 0px 0px no-repeat; } ul#page-navigation a#page2 { background:transparent url(../media/2_off.gif) 0px 0px no-repeat; } ul#page-navigation a#page2:hover { background:transparent url(../media/2_over.gif) 0px 0px no-repeat; } ul#page-navigation a#page2.on, ul#page-navigation a#page2.on:hover { background:transparent url(../media/2_on.gif) 0px 0px no-repeat; } ul#page-navigation a#page3 { background:transparent url(../media/3_off.gif) 0px 0px no-repeat; } ul#page-navigation a#page3:hover { background:transparent url(../media/3_over.gif) 0px 0px no-repeat; } ul#page-navigation a#page3.on, ul#page-navigation a#page3.on:hover { background:transparent url(../media/3_on.gif) 0px 0px no-repeat; } ul#page-navigation a#page4 { background:transparent url(../media/4_off.gif) 0px 0px no-repeat; } ul#page-navigation a#page4:hover { background:transparent url(../media/4_over.gif) 0px 0px no-repeat; } ul#page-navigation a#page4.on, ul#page-navigation a#page4.on:hover { background:transparent url(../media/4_on.gif) 0px 0px no-repeat; } ul#page-navigation a#page5 { background:transparent url(../media/5_off.gif) 0px 0px no-repeat; } ul#page-navigation a#page5:hover { background:transparent url(../media/5_over.gif) 0px 0px no-repeat; } ul#page-navigation a#page5.on, ul#page-navigation a#page5.on:hover { background:transparent url(../media/5_on.gif) 0px 0px no-repeat; } ul#page-navigation a#page6 { background:transparent url(../media/6_off.gif) 0px 0px no-repeat; } ul#page-navigation a#page6:hover { background:transparent url(../media/6_over.gif) 0px 0px no-repeat; } ul#page-navigation a#page6.on, ul#page-navigation a#page6.on:hover { background:transparent url(../media/6_on.gif) 0px 0px no-repeat; } ul#page-navigation a#page7 { background:transparent url(../media/7_off.gif) 0px 0px no-repeat; } ul#page-navigation a#page7:hover { background:transparent url(../media/7_over.gif) 0px 0px no-repeat; } ul#page-navigation a#page7.on, ul#page-navigation a#page7.on:hover { background:transparent url(../media/7_on.gif) 0px 0px no-repeat; } ul#page-navigation a#page8 { background:transparent url(../media/8_off.gif) 0px 0px no-repeat; } ul#page-navigation a#page8:hover { background:transparent url(../media/8_over.gif) 0px 0px no-repeat; } ul#page-navigation a#page8.on, ul#page-navigation a#page8.on:hover { background:transparent url(../media/8_on.gif) 0px 0px no-repeat; } ul#page-navigation a#page9 { background:transparent url(../media/9_off.gif) 0px 0px no-repeat; } ul#page-navigation a#page9:hover { background:transparent url(../media/9_over.gif) 0px 0px no-repeat; } ul#page-navigation a#page9.on, ul#page-navigation a#page8.on:hover { background:transparent url(../media/9_on.gif) 0px 0px no-repeat; } /* ++++++++++++++++++++ IMAGE_PRINT +++++++++++++++++++++ */ #image { z-index:100; margin:-5px 0 0 0px; overflow:auto; } #image img { display:block; } /* ++++++++++++++++++++ BANNERS_ETC +++++++++++++++++++++ */ #banner { z-index:100; margin:-5px 0 0 0px; position:absolute; min-height: 100px;} }