/* 1 - General 2 - Layout general 3 - Layout website 4 - Layout content items 5 - Other 6 - Print 7 - Client area 8 - General content 9 - List 10 - Color 11 - Image 12 - Icon 13 - Form 14 - Other 15 - Mainmenu 16 - Submenu 17 - Language 18 - Footermenu 1 - GENERAL ******************************************************************************** */ /*mac hide \ */html,body{ height:100%; margin:0; padding:0; }/* end hide */ body{ background:#F2F2F2 url(../gfx/bg_body.jpg) repeat-x left top; color:#000; text-align:center; margin:0; padding:0; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,label,p,blockquote,th,td,a{ font-family:arial; margin:0; padding:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset,img{ border:0; } ol,ul{ list-style:none; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,label,input,p,blockquote,th,td,a,b,acronym{ font-size:small; } /* SET RELATIVE FONT-SIZE */ body,div,label,input,p,th,td,a,b,acronym{ line-height:150%; } div.clear,br.clear{ clear:both; height:0; font-size:1px; line-height:0; margin:0; } .skip,img.preload_image{ display:none; } /* 2 - LAYOUT GENERAL ******************************************************************************** */ div#layout_container{ width:992px; text-align:left; margin:auto; } div#layout_leftside{ background:url(../gfx/layout_leftside.jpg) no-repeat right top; width:45px; height:394px; float:left; } div#layout_rightside{ background:url(../gfx/layout_rightside.jpg) no-repeat left top; width:45px; height:394px; float:left; } div#website_container{ background:url(../gfx/bg_website.gif) repeat-y left top; width:902px; float:left; } /* 3 - LAYOUT WEBSITE ******************************************************************************** */ div#header{ background:url(../gfx/bg_header.jpg) no-repeat left top; width:100%; height:191px; float:left; overflow:hidden; margin:0 0 10px; } div#header div.container{ text-align:center; margin:107px 0 0; } div#menu{ background:#1A2729 url(../gfx/bg_menu.jpg) no-repeat left top; width:880px; height:41px; float:left; clear:left; margin:0 0 10px 11px; } div#content_main{ width:587px; height:auto; float:left; margin:0 0 0 20px; padding:0; } div#content_right,div#content_right_eng{ background:url(../gfx/bg_rightcolumn.jpg) no-repeat right top; width:283px; height:auto; float:right; margin:0 10px 0 0; } div#content_right_eng{ background:url(../gfx/bg_rightcolumn_eng.jpg) no-repeat right top; } div#content_right div.container,div#content_right_eng div.container{ margin:0 0 0 21px; } div.order_banner{ margin:125px 0 5px; } div#footer{ background:url(../gfx/bg_footer.gif) no-repeat left bottom; width:100%; height:60px; float:left; margin:0; } div#footer div.container_left{ float:left; color:#898A8B; margin:24px 0 0 28px; } div#footer div.container_right{ float:right; text-align:left; color:#898A8B; margin:20px 25px 0 0; } div#copyright{ float:left; background-color:#F2F2F2; width:100%; height:30px; font-size:90%; text-align:center; color:#BFBFBF; padding:12px 0 0; } /* 4 - LAYOUT CONTENT ITEMS ******************************************************************************** */ div.block_noborder{ width:534px; height:auto; float:left; margin:0 0 0 23px; } div.block_small_left,div.block_small_right{ background:url(../gfx/block_small_bg.gif) repeat-y left top; width:281px; height:auto; float:left; margin:0 17px 0 0; } div.block_small_right{ margin:0; } div.block_small_header{ background:url(../gfx/block_small_header.gif) no-repeat left top; width:281px; height:17px; float:left; margin:0; } div.block_small_container{ width:242px; float:left; clear:both; margin:0 0 0 18px; } div#block_small_container_height{ padding-bottom:12px; } div.block_small_footer{ background:url(../gfx/block_small_footer.gif) no-repeat left bottom; width:281px; height:40px; float:left; margin:0; } div.block_large{ background:url(../gfx/block_large_bg.gif) repeat-y left top; width:576px; height:auto; float:left; } div.block_large_header{ background:url(../gfx/block_large_header.gif) no-repeat left top; width:576px; height:17px; float:left; margin:0; } div.block_large_container{ width:540px; float:left; clear:both; margin:0 0 0 18px; } div.block_large_footer{ background:url(../gfx/block_large_footer.gif) no-repeat left bottom; width:576px; height:40px; float:left; margin:0; } div#noscript{ position:absolute; left:0; top:0; background-color:#192527; height:30px; width:100%; text-align:center; border-bottom:1px solid #F2F2F2; } div#noscript div.container{ background:#192527 url(../gfx/bg_noscript.jpg) no-repeat center top; height:30px; width:992px; margin:auto; } div#noscript div.container,div#noscript div.container a,div#noscript div.container a:hover{ line-height:30px; color:#FFF; font-weight:bold; font-size:11px; } /* 7 - CLIENTAREA ******************************************************************************** */ div#dashboard{ width:300px; min-height:200px; display:block; margin:15px 0 20px 125px; } a.viewdocument,a.downloaddocument{ float:left; clear:both; background:#fff url(../gfx/document_view.gif) no-repeat left top; height:25px; text-decoration:none; color:#000; display:block; line-height:22px; font-size:13px; font-weight:bold; margin:5px 0 6px; padding:0 0 0 35px; } a.downloaddocument{ background-image:url(../gfx/document_download.gif); margin:4px 0 5px; } a.viewdocument:hover,a.downloaddocument:hover{ color:#0B56AF; } strong.download_title{ clear:both; display:block; font-size:15px; font-weight:bold; color:#FF7000; margin:22px 0 13px 35px; } /* 8 - GENERAL CONTENT STYLE ******************************************************************************** */ h1{ background:url(../gfx/header_small.gif) no-repeat left top; width:245px; height:52px; line-height:230%; font-size:133%; font-weight:bold; color:#FFF; text-align:center; margin:0 0 15px; padding:0; } h2{ font-size:130%; font-weight:bold; color:#0B56AF; margin:0; padding:28px 0 21px; } h3{ background:url(../gfx/bg_h3.jpg) no-repeat left top; width:576px; font-size:130%; font-weight:bold; color:#FFF; text-indent:32px; clear:both; margin:0; padding:25px 0 30px; } h4{ font-size:115%; font-weight:bold; color:#0B56AF; margin:25px 0 2px; padding:0; } h5{ background:url(../gfx/bg_h5.jpg) no-repeat left top; width:543px; font-size:130%; font-weight:bold; color:#FFF; text-indent:13px; clear:both; margin:0 0 23px; padding:10px 0 25px; } h6{ font-size:210%; font-weight:normal; color:#FFF; letter-spacing:-0.3px; margin:0; padding:10px; } h6 big{ font-size:125%; } a,a:hover{ color:#000; text-decoration:underline; } hr{ border-top:1px solid #FFF; border-left:1px solid transparent; border-right:1px solid transparent; border-bottom:1px dashed #0B56AF; clear:both; margin:6px 0; } html>body hr{ border-top:1px solid transparent; margin:11px 0; } /* 9 - LIST ******************************************************************************** */ ul{ list-style:disc outside; margin:0; padding:0; } ul.faq{ margin-left:45px; } ul.checklist{ list-style:none; margin-left:7px; } ul.checklist li{ background:url(../gfx/check.gif) no-repeat left 1px; font-weight:bold; margin:0 4px 10px 0; padding:0 0 0 30px; } ul.greylist{ list-style:none outside; } ul.greylist li{ background-color:#EBEBEB; font-weight:bold; text-align:right; clear:both; margin:0 0 2px; padding:6px 14px 6px 0; } ul.greylist li .left{ float:left; width:115px; font-weight:bold; text-align:left; margin:0; padding:0 0 0 14px; } /* 10 - COLOR ******************************************************************************** */ .blue,.blue a,.blue a:hover,a.blue,a.blue:hover{ color:#0B56AF; } .blue_bold,.blue_bold a,.blue_bold a:hover,a.blue_bold,a.blue_bold:hover{ color:#0B56AF; font-weight:bold; } .lightblue,.lightblue a,.lightblue a:hover,a.lightblue,a.lightblue:hover{ color:#0094FF; } .orange,.orange a,.orange a:hover,a.orange,a.orange:hover{ color:#FF7000; } .red_bold,.red_bold a,.red_bold a:hover,a.red_bold,a.red_bold:hover{ color:red; font-weight:bold; } .black_bold,.black_bold a,.black_bold a:hover,a.black_bold,a.black_bold:hover{ color:#000; font-weight:bold; } /* 11 - IMAGE ******************************************************************************** */ img.border{ border:solid 1px #0B56AF; } img.float_left,a.float_left,a.float_left:hover{ float:left; border:solid 1px #0B56AF; margin:4px 18px 10px 0; padding:0; } img.float_right,a.float_right,a.float_right:hover{ float:right; border:solid 1px #0B56AF; clear:both; margin:4px 0 10px 18px; padding:0; } /* 12 - ICON ******************************************************************************** */ div.browser_ie,div.browser_firefox,div.browser_opera,div.browser_safari{ background:url(../gfx/browser_IE.gif) no-repeat center top; float:left; font-weight:bold; margin:0 14px 0 4px; padding:45px 0 0; } div.browser_ie{ padding-left:20px; padding-right:20px; } div.browser_firefox{ background-image:url(../gfx/browser_FireFox.gif); } div.browser_opera{ background-image:url(../gfx/browser_Opera.gif); } div.browser_safari{ background-image:url(../gfx/browser_Safari.gif); } .contact{ float:left; display:block; width:55px; color:#0B56AF; font-weight:bold; } a.code_button{ background:url(../gfx/button_code_off.gif) no-repeat left top; display:block; width:260px; line-height:48px; font-weight:bold; color:#000; text-indent:12px; text-decoration:none; margin:0 0 5px 9px; padding:0; } a.code_button:hover{ background-image:url(../gfx/button_code_on.gif); color:#000; } /* 13 - FORM ******************************************************************************** */ form{ margin:0; padding:0; } label{ float:left; width:222px; color:#0B56AF; font-size:105%; font-weight:bold; margin:0 10px 8px 4px; padding:4px 0 0; } div.value{ float:left; width:222px; color:#000; font-size:105%; font-weight:normal; margin:0 10px 8px; padding:4px 0 0; } input{ float:left; background:#EBEBEB url(../gfx/bg_formfields.gif) no-repeat right top; width:282px; height:20px; line-height:20px; font-size:105%; border:1px solid #BDB9B9; margin:0 0 8px; padding:5px 3px 4px 5px; } input.small{ width:44px; font-size:105%; } input.checkbox,.checkbox input{ float:left; width:auto; margin-top:5px; font-size:105%; background-color:#FFF; } input.file{ width:292px; height:30px; padding-top:4px; font-size:105%; } textarea{ float:left; background:#EBEBEB url(../gfx/bg_formfields.gif) no-repeat right top; width:290px; height:200px; font-family:arial; font-size:105%; border:1px solid #BDB9B9; margin:2px 0 8px; padding:6px; } html>body textarea{ width:278px; } textarea:focus,input:focus{ border:1px solid #192728; } input.submit{ background:url(../gfx/button_order_off.gif) no-repeat left top; float:left; display:block; width:121px; height:34px; font-size:105%; font-weight:bold; color:#fff; text-align:center; border:0; margin:22px 0 0; padding:0; } input.submit:hover{ background-image:url(../gfx/button_order_on.gif); color:#000; } br.form_spacer{ height:7px; line-height:7px; font-size:7px; } div.form_errormessage ul{ list-style:disc outside; margin:10px 0 16px 17px; } /* 14 - OTHER ******************************************************************************** */ .floatright{ float:right; } .floatleft{ float:left; } acronym{ border-bottom:1px solid #d2d2d2; } h1 a,h1 a:hover,h3 a,h3 a:hover,h5 a,h5 a:hover,h6 a,h6 a:hover{ font-size:100%; color:#FFF; } h2 a,h2 a:hover,h4 a,h4 a:hover{ font-size:100%; color:#0B56AF; } a:hover,a.no_style,a.no_style:hover{ text-decoration:none; } a.float_left:hover,a.float_right:hover{ border:solid 1px #0094FF; } /* 15 - MAINMENU ******************************************************************************** */ ul.menu{ list-style:none outside; } ul.menu li{ float:left; } ul.menu li a{ float:left; height:41px; text-decoration:none; overflow:hidden; margin:0; padding:0 0 0 22px; } ul.menu li a .inner{ display:block; float:left; width:auto; height:41px; font-weight:bold; color:#FFF; margin:0; padding:13px 23px 0 0; } ul.menu li a:hover{ background:url(../gfx/menu_left_hover.gif) no-repeat left top; height:41px; text-decoration:none; padding:0 0 0 22px; } ul.menu li a:hover .inner{ background:url(../gfx/menu_right_hover.gif) no-repeat right top; height:41px; font-weight:bold; color:#000; padding:13px 23px 0 0; } ul.menu li a.on{ background:url(../gfx/menu_left_on.gif) no-repeat left top; float:left; height:41px; text-decoration:none; margin:0; padding:0 0 0 22px; } ul.menu li a.on:hover{ background:url(../gfx/menu_left_on.gif) no-repeat left top; float:left; height:41px; text-decoration:none; margin:0; padding:0 0 0 22px; } ul.menu li a.on .inner{ background:url(../gfx/menu_right_on.gif) no-repeat right top; display:block; float:left; height:41px; font-weight:bold; color:#000; margin:0; padding:13px 23px 0 0; } ul.menu li a.on:hover .inner{ background:url(../gfx/menu_right_on.gif) no-repeat right top; display:block; float:left; height:41px; font-weight:bold; color:#000; margin:0; padding:13px 23px 0 0; } /* 16 - SUBMENU ******************************************************************************** */ ul.submenu{ list-style:none outside; } ul.submenu li{ float:left; margin:0 20px 0 0; padding:20px 0 16px; } ul.submenu li a{ color:#0B56AF; font-size:105%; font-weight:bold; text-decoration:none; } ul.submenu li a:hover{ text-decoration:underline; } /* 17 - LANGUAGE ******************************************************************************** */ ul.language{ list-style:none outside; margin:10px 11px 0 0; } ul.language li{ float:right; } ul.language li a{ float:left; height:22px; width:26px; text-decoration:none; margin:0 0 0 8px; padding:0; } ul.language li a:hover{ text-decoration:none; } ul.language li#english a{ background:url(../gfx/lang_english_off.gif) no-repeat left top; } ul.language li#english a:hover{ background:url(../gfx/lang_english_on.gif) no-repeat left top; } ul.language li#english_on a{ background:url(../gfx/lang_english_on.gif) no-repeat left top; } ul.language li#english_on a:hover{ background:url(../gfx/lang_english_on.gif) no-repeat left top; } ul.language li#nederlands a{ background:url(../gfx/lang_nederlands_off.gif) no-repeat left top; } ul.language li#nederlands a:hover{ background:url(../gfx/lang_nederlands_on.gif) no-repeat left top; } ul.language li#nederlands_on a{ background:url(../gfx/lang_nederlands_on.gif) no-repeat left top; } ul.language li#nederlands_on a:hover{ background:url(../gfx/lang_nederlands_on.gif) no-repeat left top; } ul.language li#espanol a{ background:url(../gfx/lang_espanol_off.gif) no-repeat left top; } ul.language li#espanol a:hover{ background:url(../gfx/lang_espanol_on.gif) no-repeat left top; } ul.language li#espanol_on a{ background:url(../gfx/lang_espanol_on.gif) no-repeat left top; } ul.language li#espanol_on a:hover{ background:url(../gfx/lang_espanol_on.gif) no-repeat left top; } /* 18 - FOOTERMENU ******************************************************************************** */ ul.footermenu{ list-style:none outside; } ul.footermenu li{ float:left; } ul.footermenu li a{ float:left; color:#898A8B; text-decoration:none; } ul.footermenu li a:hover{ color:#0B56AF; text-decoration:none; } ul.footermenu li.spacer{ float:left; padding:0 10px; } div.container_right ul.footermenu li{ margin-left:10px; line-height:25px; }