/* Keerpunt.nl Styles Updated: Wed 12.12.07 @ 10:47 a.m. Author: Stephan van Opstal, Netvlies ----------------------------------------------------*/ /* GENERIC NAVIGATION HEADER BLOCKS CONTENT STAF FOOTER ----------------------------------------------------*/ /* =GENERIC ----------------------------------------------------*/ * { margin: 0; padding: 0; } a { outline: none; } img { border: 0; vertical-align: bottom; } body { background: #002663; font: 12px "Verdana", Arial, Helvetica, sans-serif; text-align: center; } .wrapper { width: 950px; margin: 0 auto; text-align: left; } .clr { height: 100%; overflow: hidden; } /* =NAVIGATION ----------------------------------------------------*/ #nav { background: #fff; } #nav ul { position: relative; z-index: 100; overflow: visible; background: #fff; list-style: none; } #nav .main { height: 30px; } #nav ul li { position: relative; float: left; margin: 0 34px 0 0; text-indent: -2000px; } #nav ul li a { height: 100%; display: block; text-decoration: none; } #nav ul li a.home { height: 30px; width: 36px; background: url(/img/nav-main-home.gif) no-repeat; } #nav ul li a.over-keerpunt { height: 30px; width: 92px; background: url(/img/nav-main-over-keerpunt.gif) no-repeat; } #nav ul li a.dienstverlening { height: 30px; width: 101px; background: url(/img/nav-main-dienstverlening.gif) no-repeat; } #nav ul li a.samenwerking { height: 30px; width: 91px; background: url(/img/nav-main-samenwerken.gif) no-repeat; } #nav ul li a.nieuws { height: 30px; width: 46px; background: url(/img/nav-main-nieuws.gif) no-repeat; } #nav ul li a.veelgestelde-vragen { height: 30px; width: 130px; background: url(/img/nav-main-veelgestelde-vragen.gif) no-repeat; } #nav ul li a.contact { height: 30px; width: 49px; background: url(/img/nav-main-contact.gif) no-repeat; } #nav ul li a:hover { background-position: 0 -30px; } #nav ul ul.sub { position: absolute; top: 30px; left: -20px; width: 260px; display: none; background: url(/img/nav-main-bg1.png); } /* IE6: non-transparant background-color */ #nav ul ul.sub li { width: 260px; margin: 0; text-indent: 0; } #nav ul ul.sub li a { padding: 4px 10px 6px 10px; background: url(/img/nav-main-border1.gif) repeat-x top left; color: #ccd7e4; } #nav ul ul.sub li a:hover { background-position: 0 0; font-weight: bold; } #nav ul ul.sub li.more { background: url(/img/ico_arrow3.gif) no-repeat 240px center; } #nav ul li:hover ul.sub { display: block; } #nav ul ul ul.subsub { position: absolute; top: 0; left: 260px; width: 260px; visibility: hidden; background: url(/img/nav-main-bg2.png); /* IE6: non-transparant background-color */ } #nav ul ul ul.subsub li a { background: url(/img/nav-main-border2.gif) repeat-x top left; color: #001847; } #nav ul ul ul.subsub li a:hover { font-weight: bold; } #nav ul ul.sub li:hover ul.subsub { visibility: visible; } #nav .sub li.first a, #nav .subsub li.first a { background: 0; } #nav .sub li.first { background: url(/img/ico-indicator1.png) no-repeat 10px 0; } /* IE6: different background-image */ #nav .sub li.first a { padding-top: 10px; } #nav .subsub li.first { background: 0; } #nav .subsub li.first a { padding-top: 4px; } #nav .sub li.firstmore a, #nav .subsub li.firstmore a { background: 0; } #nav .sub li.firstmore { background: url(/img/ico-indicator1.png) no-repeat 10px 0; } /* IE6: different background-image */ #nav .sub li.firstmore a { padding-top: 10px; } #nav .subsub li.firstmore { background: 0; } #nav .subsub li.firstmore a { padding-top: 4px; } #nav ul ul ul.subsub.inner { left: -260px; } /* subsub-menu appears left of the sub-menu */ /* =HEADER ----------------------------------------------------*/ #header { position: relative; background: #001849 url(/img/header-bg.gif) repeat-x; z-index: 99; } #header .wrapper { position: relative; height: 317px; background: #001849 url(/img/header-inner-bg.jpg) no-repeat top left; } #header .vsl { position: absolute; left: -20px; top: -48px; } #header .jubileum { background: #001849 url(/img/header-inner-bg_jubileum.jpg) no-repeat top left; } /* =BLOCKS ----------------------------------------------------*/ #brand { background: #fff; } #block-a { background: #6cc069; } #block-a .wrapper { height: 164px; background: url(/img/welkom-bg.gif) no-repeat 424px 0; } #block-a .wrapper .inner { background: url(/img/ico-indicator2.png) no-repeat top left; } /* IE6: PNG-hack */ #home-action .text { width: 534px; float: left; padding: 25px 0 0; } #home-action .text h3 { font-size: 20px; color: #fff; margin: 0 0 0 0; } #home-action .text p { padding: 0 25px 0 0; font-size: 12px; color: #001847; line-height: 18px; } #home-action ul { width: 416px; float: right; list-style: none; } #home-action ul li { height: 39px; border-top: 1px solid #90d18e; border-bottom: 1px solid #478b42; font-size: 14px; } #home-action ul li.small { font-size: 13px; } #home-action ul li a { height: 30px; display: block; padding: 9px 0 0 24px; background: url(/img/welkom-ul-bg.gif) repeat-x; color: #002663; text-decoration: none; font-weight: bold; } #home-action ul li a:hover{ background: url(/img/welkom-ul-bg-selected.gif) repeat-x; } #home-action ul li a img { vertical-align: middle; margin: 0 0 0 10px; } #home-action ul li.quick { display:block; overflow: hidden; height: 39px; margin: 0 !important; background: url(/img/welkom-ul-bg.gif) repeat-x; } #home-action ul li.quick h3 { vertical-align: middle; display: block; clear: both; margin:0 !important; padding: 8px 0 2px 24px; overflow: hidden; } #zoeken { position:absolute; top: 230px; right: 0; width: 416px; height: 87px; background: url(/img/zoeken-bg.gif) no-repeat top left; } #zoeken form { margin: 48px 0 0 21px; } #zoeken form input.q { width: 200px; } #zoeken form input { vertical-align: middle; } #block-b { background: #d4ead0; } #block-b .wrapper { height: 105px; background: url(/img/ico-indicator3.png) no-repeat top left; } /* IE6: PNG-hack */ #betekenen { width: 534px; float: left; } #betekenen h3 { font-size: 20px; color: #003876; padding: 20px 0 10px 0; } #betekenen form select { font-size: 10px; color: #224884; } #betekenen form input { vertical-align: middle; margin: -2px 0 0 10px; } #in-beeld { width: 416px; height: 105px; float: right; background: url(/img/in-beeld-bg.gif) repeat-x; position: relative; z-index: 11; } #in-beeld ul { list-style: none; } #in-beeld ul li { height: 30px; border-bottom: 1px solid #64875e; background: #86bc7d url(../img/inbeeld_li_bg.gif) repeat-x top left; font-size: 14px; font-weight: bold; color: #002663; line-height: 30px; } #in-beeld ul li a { padding: 0 0 0 24px; font-size: 14px; color: #001847; text-decoration: none; } #in-beeld ul li.hdr { height: 42px; } #in-beeld ul li * { vertical-align: middle; } #in-beeld ul li h3 { font-size: 20px; margin: 0!important; padding: 8px 0 5px 24px!important; } #in-beeld .screen { position: absolute; top: -4px; left: 280px; } #block-c { background: #fff; } #block-c .wrapper { background: url(/img/ico-indicator4.png) no-repeat top left; } /* IE6: PNG-hack */ #home-nieuws { width: 534px; float: left; padding: 0 0 10px 0; } #home-nieuws h3 { font-size: 20px; color: #003876; padding: 15px 0 0 0; } #home-nieuws p.more { font-size: 14px; } #home-nieuws p.more a { padding: 0 10px 0 0; background: url(/img/ico_arrow2.gif) no-repeat right 6px; text-decoration: none; color: #003876; font-weight: bold; } #home-nieuws .item { padding: 5px 0 5px 0; margin: 0 20px 5px 0; background: url(/img/home-nieuws-item-divider.gif) repeat-x top left; } #home-nieuws .item.first { background: none; } #home-nieuws .item p { color: #001847; font-size: 12px; margin: 0 0 2px 0; } #home-nieuws .item p a { color: #001847; background: url(/img/ico_arrow2.gif) no-repeat right 6px; padding: 0 10px 0 0; } #home-nieuws .item p.dt { color: #002663; font-size: 10px; font-weight: bold; } #home-contact { position: relative; z-index: 10; width: 416px; height: 255px; float: right; background: #bfc9d8; } #home-contact h3 { font-size: 20px; color: #003876; padding: 15px 0 0 22px; } #home-contact p { width: 160px; float: left; font-size: 12px; padding: 0 0 0 22px; color: #002663; line-height: 18px; } #home-contact p a { color: #002663; text-decoration: none; } #home-contact p a:hover { text-decoration: underline; } #home-contact p.more { width: 350px; margin: 10px 0 20px 0; } #home-contact p.more a { font-size: 14px; padding: 0 15px 0 0; background: url(/img/ico_arrow2.gif) no-repeat right 6px; text-decoration: none; color: #003876; font-weight: bold; } #home-contact .banner-a { position: absolute; left: 130px; top: 130px; } #home-contact .banner-b { position: absolute; left: 210px; top: 130px; } #block-d { height: 23px; background: #a6b3c9; border-top: 2px solid #fff; } #block-e { background: #ffffff; } #block-e .wrapper { background: url(/img/content-col-b-bg.gif) repeat-y top right; } #block-e .col-a { width: 534px; float: left; } #block-e .col-b { width: 416px; float: right; } /* =CONTENT ----------------------------------------------------*/ #content { padding: 32px 20px 30px 0; background: url(/img/ico-indicator2.png) no-repeat top left; } #content h1 { font-size: 20px; color: #449f41; font-weight: bold; } #content h2 { margin: 10px 0 10px 0; font-size: 16px; line-height: 18px; color: #001847; font-weight: bold; } #content h3 { margin: 10px 0 10px 0; font-size: 14px; line-height: 18px; color: #001847; font-weight: bold; } #content h4 { margin: 10px 0 10px 0; font-size: 12px; line-height: 18px; color: #001847; font-weight: bold; } #content p { font-size: 12px; color: #001847; margin: 10px 0 5px 0; line-height: 18px; } #content p a { color: #001847; } #content #crumbpath { list-style: none; margin: 2px 0 15px 0; } #content #crumbpath li { font-size: 10px; color: #001847; float: left; margin: 0 5px 0 0; } #content #crumbpath li a { font-size: 10px; color: #001847; } #content ul { list-style: disc; } #content ul li { margin: 0 0 0 15px; color: #001847; line-height: 18px; } #content ul li a { color: #001847; } #content table.table_border { margin: 0; } #content table.table_border { border-collapse: collapse; border: 1px solid #000000; } #content table.table_border td { border: 1px solid #000000; } #content table.no_table_border { margin: 0; } #content table { margin: 10px 0 0 -3px; font-size: 11px; } #content table th { background: #002663 url(/img/content-table-th-bg.gif) repeat-x top left; color: #fff; padding: 2px; font-size: 13px; } #content table td { padding: 2px; font-size: 12px; color: #001847; } #content table td a { color: #001847; text-decoration: none; } #content table td a:hover { text-decoration: underline; } #content table tr.odd td { background: #b5c0d2 url(/img/content-table-td-odd-bg.gif) repeat-x top left; } #content table tr.even td { background: #d9dfe8 url(/img/content-table-td-even-bg.gif) repeat-x top left; } /* nieuws archief */ #content table.nieuwsarchief { width: 100%; } #content table.nieuwsarchief th { xwidth: 80px; } #content table.nieuwsarchief td { vertical-align: top; } #content p a.back { color: #001847; padding: 0 10px 0 0; background: url(/img/ico_arrow2.gif) no-repeat right 5px; } #content .error p { font-size: 12px; color: #760400; font-weight: bold; } #content #frm-staf div { margin: 0 0 6px 0; } #content #frm-staf div p.lbl { width: 150px; float: left; margin: 0; color: #001847; } #content #frm-staf div input { border: 1px solid #b2bac8; font-size: 11px; padding: 3px; width: 150px; background: url(/img/input-bg.gif) repeat-x bottom left; } #content #frm-staf .preview { border: 1px solid #b3bbc9; padding: 0 10px 10px 10px; margin: 10px 0 10px 0; } #content #frm-staf .preview p { color: #4c5d7e; } #content #frm-staf .sbmt { vertical-align: middle; margin: 5px 10px 0 0; } #content #frm-404 { margin: 20px 0 0 0; } #content #frm-404 input { vertical-align: middle; color: #001847; } #content #frm-404 input.q { width: 225px; border: 1px solid #b2bac8; background: #fff; font-size: 10px; padding: 2px; background: url(/img/input-bg.gif) repeat-x bottom left; } #content #search-results form { margin: 20px 0 30px 0; } #content #search-results form input { vertical-align: middle; color: #001847; } #content #search-results form input.q { width: 200px; border: 1px solid #b2bac8; font-size: 11px; padding: 3px; background: url(/img/input-bg.gif) repeat-x bottom left; } #content #search-results .result { margin: 0 0 10px 0; padding: 15px 0 10px 0; background: url(/img/search-results-result-divider.gif) repeat-x top left; } #content #search-results .result.first { background: 0; } #content #search-results .result h2 { margin: 0; font-size: 12px; } #content #search-results .result p { margin: 0; } #content #search-results .result p span { font-weight: bold; background: #bfc9d8; } #content #search-results .result a { color: #001847; padding: 0 15px 0 0; line-height: 18px; background: url(/img/ico_arrow2.gif) no-repeat right 6px; } #content #links .link { width: 100%; } #content #links .link td { background: url(/img/links-link-bg.gif) repeat-x bottom left; border-bottom: 1px solid #c9d7e9; padding: 10px 0 10px 10px; } #content #links .link h2 { font-size: 12px; margin: 20px 0 0 10px; } #content #links .link div { margin: 0; padding: 0 10px 0 10px; } #content #links .link a { color: #001847; padding: 0 15px 0 0; line-height: 18px; background: url(/img/ico_arrow2.gif) no-repeat right 6px; text-decoration: underline; } #content #links .link .logo { margin-right: 5px; } #content #links .paging-az { margin: 20px 70px 0 40px; height: 43px; background: url(/img/paging-bg-bot.gif) repeat-x bottom left; } #content #links .paging-az ul { background: url(/img/paging-bg-mid.gif) repeat-x bottom left; padding: 6px 0 5px 0; height: 16px; border-top: 1px solid #b2bac8; border-right: 1px solid #b2bac8; border-left: 1px solid #b2bac8; list-style: none; text-align: center; } #content #links .paging-az ul li { display: inline; margin: 0; color: #c3d7f3; font-size: 12px; font-weight: bold; } #content #links .paging-az ul li a { margin: 0; padding: 1px; color: #001847; font-weight: bold; text-decoration: none; } #content #links .paging-az ul li.active a { background: #001847; color: #fff; font-weight: bold; } #content #news-items .news { background: url(/img/news-items-news-bg.gif) repeat-x bottom left; border-bottom: 1px solid #c9d7e9; padding: 10px 10px 10px 10px; } #content #news-items .news h2 { margin: 20px 0 0 0; font-size: 12px; } #content #news-items .news p { margin: 0; } #content #news-items .news a { color: #001847; padding: 0 15px 0 0; background: url(/img/ico_arrow2.gif) no-repeat right 6px; } #content #news-items .news .vsl { float: right; width: 120px; height: 120px; margin: 3px 0 0 10px; border: 1px solid #264374; } #content #news-detail p img { margin: 3px 10px 0 0; border: 1px solid #264374; } #content #faq ol { margin: 40px 0 30px 35px; } #content #faq ol li { font-weight: bold; color: #001847; line-height: 22px; } #content #faq ol li a { font-weight: bold; color: #001847; font-weight: normal; } #content #faq .faqx { background: url(/img/faq-faqx-bg.gif) repeat-x bottom left; border-bottom: 1px solid #c9d7e9; padding: 10px; } #content #faq .faqx h2 { font-size: 12px; } #content #faq .faqx p { margin: 0; } #content #faq .faqx a { line-height: 18px; color: #001847; background: url(/img/ico_arrow2.gif) no-repeat right 6px; padding: 0 10px 0 0; } #content #faq #frm-archive select { width: 180px; } /* #content #contact-naw form { float: left; width: 290px; margin: 0 20px 0 0; background: url(/img/contact-naw-form-bg.gif) repeat-y top right; } #content #contact-naw form input { vertical-align: middle; } #content #contact-naw form input.inpt { border: 1px solid #b2bac8; font-size: 12px; padding: 2px; width: 147px; background: url(/img/input-bg.gif) repeat-x bottom left; } #content #contact-naw form div { margin: 10px 0 10px 0; } #content #contact-naw form div p { width: 120px; float: left; margin: 0; } #content #contact-naw form textarea { height: 90px; display: block; width: 266px; margin: 0 0 10px 0; overflow: auto; border: 1px solid #b2bac8; font-size: 12px; padding: 2px; background: url(/img/input-bg.gif) repeat-x bottom left; } #content #contact-naw form .sbmt { margin: 0 10px 0 0; } #content #contact-naw .address { float: right; 200px; } */ #content #contact-naw form { float: left; width: 290px; margin: 0 20px 0 0; background: url(/img/contact-naw-form-bg.gif) repeat-y top right; } #content #contact-naw form input { vertical-align: middle; } #content #contact-naw form input.inpt { border: 1px solid #b2bac8; font-size: 12px; padding: 2px; width: 147px; background: url(/img/input-bg.gif) repeat-x bottom left; } #content #contact-naw form input.inpterror { border: 1px solid #760400; font-size: 12px; padding: 2px; width: 147px; background: url(/img/input-bg.gif) repeat-x bottom left; } #content #contact-naw form div { margin: 10px 0 10px 0; } #content #contact-naw form div p { width: 120px; float: left; margin: 0; } #content #contact-naw form textarea { height: 90px; display: block; width: 266px; margin: 0 0 10px 0; overflow: auto; border: 1px solid #b2bac8; font-size: 12px; padding: 2px; background: url(/img/input-bg.gif) repeat-x bottom left; } #content #contact-naw form textarea.inpterror { border: 1px solid #760400; } #content #contact-naw form .sbmt { margin: 0 10px 0 0; } #content #contact-naw .address { float: right; width: 200px; } #content #contact-naw #bedankt { float: left; width: 290px; margin: 0 20px 0 0; } #content #contact-naw #bedankt .form_link { display: block; margin-top: 15px; } #content #vacatures .vacature { background: url(/img/news-items-news-bg.gif) repeat-x bottom left; border-bottom: 1px solid #c9d7e9; padding: 10px 10px 10px 10px; } #content #vacatures .vacature td { font-size: 12px; line-height: 18px; color: #001847; } #content #vacatures .vacature td a { color: #001847; padding: 0 15px 0 0; background: url(/img/ico_arrow2.gif) no-repeat right 6px; text-decoration: underline; } #content #vacatures .vacature td a.clean { color: #001847; padding: 0; background:none; text-decoration: underline; } #content #vacatures .vacature .vsl { float: right; width: 120px; height: 120px; margin: 3px 0 0 10px; border: 1px solid #264374; } /* GLOBAL ARCHIVE */ #content #frm-archive { background: url(/img/paging-bg-bot.gif) repeat-x bottom left; padding: 0 0 5px 0;} #content #frm-archive div { margin: 20px 0 10px 0; padding: 0 10px 13px 10px; background: url(/img/paging-bg-mid.gif) repeat-x bottom left; border-top: 1px solid #b2bac8; border-right: 1px solid #b2bac8; border-left: 1px solid #b2bac8; } #content #frm-archive * { vertical-align: middle; } #content #frm-archive select { font-size: 11px; padding: 2px; margin: 0 10px 0 0; } #content #frm-archive h4 { margin: 5px 0 5px 0; } /* GLOBAL PAGING FOR #search-result, #links, #news-items */ #content #paging { margin: 20px 70px 0 40px; height: 43px; background: url(/img/paging-bg-bot.gif) repeat-x bottom left; } #content #paging ul { background: url(/img/paging-bg-mid.gif) repeat-x bottom left; padding: 6px 0 5px 0; height: 16px; border-top: 1px solid #b2bac8; border-right: 1px solid #b2bac8; border-left: 1px solid #b2bac8; list-style: none; text-align: center; } #content #paging ul li { display: inline; margin: 0; color: #001847; font-size: 12px; } #content #paging ul li a { margin: 0; padding: 1px; color: #001847; font-weight: bold; text-decoration: none; } #content #paging ul li.active { background: #001847; color: #fff; font-weight: bold; } #content #paging ul li.activeplain { font-weight: bold; } /* =STAF ----------------------------------------------------*/ #staf { list-style: none !important /* overrides list-style from #content */ ; margin: 50px 0 0 0; } #staf li { float: left; font-size: 10px; margin: 0 10px 0 0 !important /* overrides list-style from #content */; padding: 0 10px 0 0; border-right: 1px solid #001847; } #staf li a { color: #001847; text-decoration: none; } #staf li a:hover { text-decoration: underline; } #staf li.staf { border: 0; } #staf #staf_print { display: none; } #staf li.print a { padding: 0 0 0 15px; background: url(/img/ico-print.gif) no-repeat center left; } #staf li.staf a { padding: 0 0 0 15px; background: url(/img/ico-staf.gif) no-repeat center left; } /* =FOOTER ----------------------------------------------------*/ #footer { height: 60px; background: #002663 url(/img/footer-bg.gif) repeat-x; } #footer ul { float: left; list-style: none; margin: 8px 0 0 530px; display: inline; } #footer ul li { float: left; font-size: 9px; color: #fff; border-left: 1px solid #99a8c0; padding: 0 5px 0 5px; } #footer ul li.first { border: 0; } #footer ul li a { color: #99a8c1; text-decoration: none; } #footer ul li a:hover { text-decoration: underline; } /* =SITEMAP ----------------------------------------------------*/ #sitemap { margin: 0 15px; } #sitemap * { font-size: 11px; color: #3c3c3c; } #sitemap a { color: #001847; text-decoration: none; } #sitemap a:hover { text-decoration: underline; } #sitemap a.bold { font-weight: bold; } #sitemap a.titel { font-size: 12px; } #sitemap li { padding: 0 0 0 24px; margin: 0; list-style-type: none; line-height: 20px; } #sitemap li { background: url(../img/extm.gif) no-repeat 0% 0%; } #sitemap li.last { background: url(../img/exlm.gif) no-repeat 0% 0%; } #sitemap ul { padding: 0 0 0 35px; margin: 0 0 0 -24px; list-style-type: none; } #sitemap ul { background: url(../img/exim.gif) repeat-y 0% 0%; } #sitemap ul.last { background-image: none; } #logo_anim { padding: 14px 0; width: 220px; height: 70px; }