html, body{ margin: 0; padding: 0; height: 100%; }
body { width: 100%; background-color: #000; color: #FFF; font: 13px Verdana, sans-serif; line-height:22px; -moz-opacity: .99999; }
body *{ background-color: transparent; }
/* clear all */
h1,h2,h3,p,div,img,ul,li{ margin: 0; padding: 0; border: 0; }
ul { list-style: none; }
p { margin-bottom: 10px; }
a, a *{ color: #B3B3B3; }
a:hover, a:hover *{ color: #C1272D; }
a.active{ }
a.inactive{ }
/* default styles */
h1,h2,h3{ font-family: arial, sans-serif; }
h1,h3{ color: #808080; }
h1,h2{ text-transform: uppercase; }
h1{ font-size: 30px; line-height: 35px; margin-bottom:10px; }
h2{ font-size: 20px; line-height: 25px; margin-bottom:10px; }
h3{ font-size: 15px; }
h1 a, h2 a, h3 a { color: #808080; text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover { color: #C1272D; }
h1 a, h1.link object, h1.link embed{ background: transparent url('/images/arrow_large.gif') no-repeat right center; }
h3 a, h3.futura.link object, h3.futura.link embed{ background: transparent url('/images/arrow_right_333333.gif') no-repeat right center; display: block; float: left; width: 100%; }
object{ outline: none; }
img{ border: 0; }
ul.horizontal{ list-style: none; display: block; float: left; }
ul.horizontal.right{ float: right; }
ul.horizontal li{ list-style: none; display: block; float: left; margin-right: 20px; text-align: center; }
/* bgcolors */
.bg-dark { background-color: #1A1A1A; }
.bg-light { background-color: #333333; }
.txt-middle { color: #808080; }
.txt-light { color: #B3B3B3; }
.txt-red { color: #C1272D; }
/* toolbox */
.center-page{ margin: 0 auto; }
.clear { clear: both; }
.center { margin: auto auto; } /* does this actually work (vertically)??? - pb */
.left { float: left; }
.right { float: right; }
.padding{ padding: 10px; }
.ptop { padding-top: 10px; }
.pbott { padding-bottom: 10px; }
.pright { padding-right: 10px; }
.pleft { padding-left: 10px; }
.margin { margin: 10px; }
.mtop { margin-top: 10px; }
.mbott { margin-bottom: 10px; }
.mright { margin-right: 10px; }
.mleft { margin-left: 10px; }
.mltop { margin-top: 30px; }
.mlbott { margin-bottom: 30px; }
.mstop { margin-top: 2px; }
.msbott { margin-bottom: 2px; }
.small-txt { font-size: .846em; line-height: 1.5em; }
.visible_onready{ visibility: hidden; }
.hide{ display: none; }
.block{ display: block; }
.relative{ position: relative; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 0; }
/* basic layout */
.row { display: block; float: left; clear: both; } /* _width-hack to keep columns floating in IE6 */
.column { display: block; float: left; }
.column { width: 960px; margin-right: 0; }
.column.half-pane { width: 450px; margin-right: 60px; _margin-right: 57px; }
.column.third-pane { width: 330px; margin-right: 60px; _margin-right: 57px; }
.column.two-third-pane { width: 570px; margin-right: 60px; _margin-right: 57px; }
.column.two-third-pane .column { width: 255px; margin-right: 60px; _margin-right: 57px; }
.column.last { margin-right: 0; }
.panel{ overflow: hidden; padding: 10px 20px; background-color: #333333; }
/* main divs */
#framework{ position: relative; display:block; float: none; width: 960px; padding-bottom: 20px; }
div#header{ min-height: 140px; margin-bottom: 10px; _height:140px; }
div#content{ margin: 10px 0; }
div#header-visual{ margin: 10px 0; height: 150px; }
/* content block */
.cblock { padding-top: 5px; background: transparent url('/images/dotted_999999.gif') repeat-x 0 0; margin-bottom: 10px; display: block; float: left; clear: both; width: 100%; overflow: hidden; }
.cblock.last { height: 1px; padding: 0; float: none; }
.cblock .banner { background: transparent url('/images/arrow_large.gif') no-repeat 2px 2px; padding-left: 40px; display: block; }
.cblock .banner.information { background: transparent url('/images/icon_information.gif') no-repeat 5px 5px; padding-left: 40px;}
.cblock .banner.information strong { color: #C1272D; font-weight: normal; }
.cblock .banner.mailinglist { background: transparent url('/images/icon_mailinglist.gif') no-repeat 5px 5px; padding-left: 40px; overflow: hidden;}
.cblock .banner.timeline { background-image:none; padding: 0; }
.cblock .banner.timeline a { background: #000 url('/images/timeline_attention_getter.gif') no-repeat 0 0; display: block; float: left; width: 330px; height: 161px; padding: 0; }
.cblock .banner.timeline a:hover { background-image: url('/images/timeline_attention_getter_rollover.gif'); }
.cblock .banner.timeline a span { display: none; }
.cblock.item ul.horizontal li{ text-align: left; width: 285px; margin: 0; padding: 0; }
.half-pane .cblock .banner.timeline a { width: 450px; height: 221px; background-position: 60px 30px;}
/* header */
.flash_container{ line-height: 0; }
#flash-head div.flash_container{ height: 350px; }
#flash-head div.type_home{ height: 440px; }
#nav-head{ position: absolute; z-index: 10; top: 0; height: 140px; width: 960px; }
/* generic navigation */
#generic-nav { clear: both; height: 100px; width: 100%; }
#generic-nav ul { margin-top:10px;float: right; }
#generic-nav ul li a { text-decoration:none; }
#generic-nav ul li a span { visibility:hidden; }
#generic-nav ul li.Grolsch a{ display:block; width:50px; padding-bottom: 40px; padding-left: 10px; background: transparent url('/images/logo_grolsch.gif') no-repeat center 10px; }
div.logo{ display: block; float: left; width: 170px; height: 100px; background: transparent url('/images/logo-mojo.gif') no-repeat -20px 0;}
div.logo a{ display: block; float: left; height: 100%; width: 100%; cursor: pointer; }
div.logo a span {display:none;}
/* main navigation */
#main-nav { clear: both; height: 40px; background: #000; }
#main-nav ul li { margin-right:50px; }
/* letter spacing for sifr replacement */
#main-nav ul li a { letter-spacing: 0.1em; text-transform: uppercase; font-family: Arial; font-size:16px; line-height: 40px; text-decoration:none; font-weight:bold; }
/* breadcrumb */
.breadcrumb{ }
.breadcrumb ul.horizontal li{ font-size:11px; padding: 5px 0; margin: 0; }
.breadcrumb ul.horizontal li a{ color: #B3B3B3; }
.breadcrumb ul.horizontal li a:hover{ color: #C1272D; }
/* sub nav */
div#sub-nav{ font-weight:bold; font-size: 13px; line-height:auto; text-transform: uppercase; }
div#sub-nav ul{ margin: 0; padding: 0; list-style: none; border: none; }
div#sub-nav ul li{ margin: 0; padding: 0; border-bottom: 2px solid #000000; }
div#sub-nav ul li a{ display: block; padding: 3px 3px 3px 30px ; background:#1A1A1A url('/images/arrow_right_1a1a1a.gif') no-repeat 10px 10px; color: #B3B3B3; text-decoration: none; }
div#sub-nav ul li.active a, div#sub-nav ul li a:hover{ background:#333333 url('/images/arrow_right_rollover_333333.gif') no-repeat 10px 10px; color: #FFFFFF; }
div#sub-nav ul li.active a *, div#sub-nav ul li a:hover *{ color: #FFFFFF; }
/* footer */
#footer{ margin: 20px 0 0 0; display: block; float: left; clear: both; width: 100%; border-bottom: 20px solid #000000; }
#footer .menu, #footer .content{ font-size: 12px; padding: .75em 0; border-bottom: 2px solid #000; display: block; float: left; width: 100%;}
#footer .content .left{ width: 840px; }
#footer .content .left ul{ padding-left: 20px; }
#footer .content .right{ float: right; width: 120px; }
#footer .content{ background-color: #1a1a1a; }
#footer .content img{ margin-right: 13px; _margin-right: 10px;}
#footer .menu{ background-color: #333333; }
#footer .menu a{ text-transform:lowercase; color: #B3B3B3; text-decoration:none; }
#footer .menu a:hover{ text-decoration:underline; }
/* article */
div.intro{margin-bottom: 10px; font-weight:bold; }
div.body{ margin-bottom: 10px; }
div.body ul { list-style: disc; padding: 0 0 10px 25px; }
/* JQtabs default layout as paginator */
div.JQtabs{ display:block; float: left; clear: both; width: 100%; background-color: transparent; border-bottom: 2px solid #000; }
div.JQtabs .tabs{ display:block; float: left; clear: both; width: 100%; background-color: #1A1A1A; border-bottom: 1px solid #000; }
div.JQtabs ul.horizontal{ width:auto; margin: 0 0 0 5px; }
div.JQtabs ul.horizontal.right{ margin: 0 5px 0 0; }
div.JQtabs ul.horizontal li{ margin: 0; }
div.JQtabs ul.horizontal li a{ padding: 0 5px; display: block; float: left; height: 27px; line-height: 27px;}
div.JQtabs li a { color: #B3B3B3; text-decoration: none; font-weight: bold; outline: 0; }
div.JQtabs.rotator li a { font-weight: normal; text-transform: uppercase; }
div.JQtabs li a:hover { color: #B3B3B3; text-decoration: underline; }
div.JQtabs li.tabs-selected a, div.paginator li.tabs-selected a:hover{ color: #FFFFFF; text-decoration: none; }
div.JQtabs li.prev a, div.paginator li.next a { padding: 0; width: 21px; }
div.JQtabs li.prev a { background: transparent url('/images/arrow_left_1a1a1a.gif') no-repeat center center; }
div.JQtabs li.prev a:hover { background: transparent url('/images/arrow_left_rollover_1a1a1a.gif') no-repeat center center; }
div.JQtabs li.next a { background: transparent url('/images/arrow_right_1a1a1a.gif') no-repeat center center; }
div.JQtabs li.next a:hover { background: transparent url('/images/arrow_right_rollover_1a1a1a.gif') no-repeat center center; }
.tabs-hide{ display: none; }
/* JQtabs as media rotator */
.two-third-pane .viewport{ overflow: hidden; display:block; float: left; clear: both; width: 100%; }
div.JQtabs.rotator { margin:15px 0; }
div.JQtabs.rotator .tabs{ background-color: #000000; border-bottom: 1px solid black; }
div.JQtabs.rotator .tabs ul{ margin-left: 0; }
div.JQtabs.rotator .tabs li{ background: #1A1A1A url('/images/tabcorner_1a1a1a.gif') no-repeat right top; padding-right: 10px; }
div.JQtabs.rotator .tabs li.tabs-selected{ background: #333333 url('/images/tabcorner_333333.gif') no-repeat right top; }
div.JQtabs.rotator .content-nav { background-color: #1A1A1A; }
div.JQtabs.rotator .content-nav .title{ padding: 5px; font-weight: bold; text-transform: uppercase; color: #FFFFFF; border-bottom: 1px solid black;}
div.JQtabs.rotator .content-item div.img { border-bottom: 1px solid black; background-color:#1A1A1A; }
div.JQtabs.rotator .content-item .description{ padding: 10px; background: #333333; color: #b2b2b2; }
/* event facts */
.inline-img-spacer{ display: inline-block; height:100%; }
.inline-img-spacer.left{ float: left; padding-right: 10px; }
.inline-img-spacer.right{ float: right; padding-left: 10px; }
.two-third-pane .event{ display: block; margin-top: 2px; width: 510px; float: left; clear: both; }
.two-third-pane .event.left{ width: 224px; float: left; clear: left; }
.two-third-pane .event.right{ width: 224px; float: right; clear: right; }
.two-third-pane .event.data{ background: #1A1A1A; padding: 10px; width: 550px;}
.event.data ul{ display: inline-block; width: 450px; }
.two-third-pane .event.data .logo-image { float: left; }
.event.download{ background: #333333 url('/images/icon_pdf.gif') no-repeat 10px 19px; padding: 10px 10px 10px 50px; }
.event.aanvragen{ background: #333333 url('/images/icon_aanvragen_333333.gif') no-repeat 5px 17px; padding: 10px 10px 10px 50px; }
.event.aanvragen td, .event.download td{ height: 50px; padding: 0; }
.event.aanvragen a, .event.download a{ text-transform: uppercase; font-weight: bold; font-size: 1em; line-height: 1.1em; text-decoration: none; }
.event .title{ font-size: 13px; text-transform: uppercase; font-weight: bold; color: #808080; }
.event .description{ font-weight: bold; }
.event span.url { color: #b3b3b3;font-size:11px; }
.event span.url a { text-decoration: none; }
/* lists like newsitems */
div.list{ display: block; float: left; clear: both; width: 100%; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;}
div.list div.item { display: block; float: left; width: 100%; border-bottom: 2px solid #000000; padding: 10px 0; _padding-left: 10px; _width: 320px; }
div.list div.item h3 { font-size:13px; }
div.list div.item h3 a { display: block; background: transparent url('/images/arrow_right_333333.gif') no-repeat right 7px; }
div.list div.item h3 a span { font-family: Verdana; display: block; color: #FFFFFF; margin-right:12px; }
div.list div.item h3 a:hover{ background: transparent url('/images/arrow_right_rollover_333333.gif') no-repeat right 7px; }
div.list div.item h3 a:hover span { color: #B3B3B3; }
div.list div.item h3 a span .logo-image { display: inline-block; float: left; padding-right: 5px; }
div.list div.item div.img { width: 105px; height: 78px; background-color: #B3B3B3; margin-left: 10px; margin-right: 10px; }
.third-pane div.list div.item { _width: 320px; }
.half-pane div.list div.item { _width: 440px; }
.two-third-pane div.list div.item { _width: 560px; }
div.list div.item div.txt { width: 310px; }
.third-pane div.list div.item div.txt { width: 195px; }
.half-pane div.list div.item div.txt { width: 310px; }
.two-third-pane div.list div.item div.txt { width: 435px; }
div.list div.item div.date { color: #B3B3B3; font-size: .846em; line-height: 1.5em; }
div.list div.cblock.item div.img{ margin-left: 0; }
.two-third-pane div.list div.cblock.item div.txt{ width: 455px; }
/* decoration */
.download h3{ padding-left: 35px; background: transparent url('/images/icon_pdf.gif') no-repeat left center;}
.download .pdf{ background: transparent url('/images/icon_pdf.gif') no-repeat left center; }
/* forms */
dl.legenda{ display: block; float: left; width:100%; margin: 10px 0; padding: 0; }
dl.legenda dt{ display: inline-block; float: left; margin: 0 10px 0 0; line-height: 17px; height: 17px; }
dl.legenda dd{ display: inline-block; float: left; margin: 0 20px 0 0; line-height: 17px; height: 17px; }
form{ display: block; clear: both; }
div.form-error{ background-color: #C1272D; color: white; }
ul.fieldset li{ padding: 3px 0; }
ul.fieldset label{ float: left; width: 150px; _width: 147px; padding-right: 3px; text-align: right; clear: left; }
ul.fieldset input, ul.fieldset textarea{ border:0; background-color: white; width: 300px; }
ul.fieldset input.submit{ border: auto; background-color: auto; width:auto; }
.event-mandatory{ background: url('/images/form_verplicht_333333.gif') no-repeat 525px 17px; }
ul.form-event-list{ background: #1A1A1A; }
ul.form-event-list li.form-event { background: transparent url(/images/dotted_999999.gif) repeat-x scroll 0 0; }
ul.form-event-list li.form-event-last { clear:both; height: 1px; background: transparent url(/images/dotted_999999.gif) repeat-x scroll 0 0; }
ul.form-event-list li input { float:left; display:block;}
ul.form-event-list li label { float:left;display:block;font-weight:bold; margin-left:10px; width:240px; }
ul.form-event-list li ul {float:right; width: 250px; }
div.form-general-info input { float:left; display:block; }
div.form-general-info label { float:left; display:block; }
.padding.indent { padding-left: 153px; }
form li.required{ background: transparent url('/images/form_verplicht_333333.gif') no-repeat right bottom; }
form ul.radio_list.required{ width: 550px; background: transparent url('/images/form_verplicht_333333.gif') no-repeat right bottom; }
form .padding.indent ul.radio_list.required{ width: 397px; }
form ul.radio_list li{ background: none; }
form li.gender ul.radio_list.required{ width: 397px; }
/* captcha image */
img#captcha{ margin-left: 153px; }
/* PAGE SPECIFIC STYLES */
/* homepage */
#homepage-left-column div.cblock h1 { margin-bottom:0; }
#homepage-left-column div.cblock { padding:15px 0; margin:0; }
#homepage-left-column h1 a { display:block; background: transparent url('/images/arrow_large.gif') no-repeat right top; }
#homepage-right-column h1 { margin-top:15px; }
/* gender in hp form */
li.gender{ display: block; float: none; clear: both; }
ul.radio_list{ display: block; float: left; width: auto; padding-top: .25em; }
ul.radio_list li{ display: block; float: left; width: auto; }
ul.radio_list li input{ display: block; float: left; width: auto; clear: none; background-color: transparent; }
ul.radio_list li label{ display: block; float: left; width: auto; clear: none; }
/* timeline */
div.timeline-event{ width:150px; border:1px solid #B3B3B3; padding:3px;}
div.timeline-event div.date{color:#C1272D;font-weight:bold;}
div.timeline-event h3{margin:0;padding:0;font-weight:bold;border-bottom:1px solid #B3B3B3;}
div.timeline-item{ margin-bottom:5px; padding:3px;border-bottom:1px dotted #B3B3B3;}