/* ------------------------------------------------- */ /* GENERIC RULES /* ------------------------------------------------- */ body { background:#FFF url(../img/bg.png) no-repeat top center; color:#000; font:12px/16px 'Trebuchet MS', Helvetica , Jamrul, sans-serif; padding:0; } input:focus { outline:none; background:#000 !important; color:#FFF !important; } span.red { color:#ED1C24; } span.blue { color:#008FD5; } span.yellow { color:#FAD81C; } p.small { font-size:10px; } #tooltip { position:absolute; border:1px solid #333; background:#000; padding:2px 5px; color:#FFF; display:none;} a { color:#FFF; text-decoration:none; } em { font-style:italic; } /* ------------------------------------------------- */ /* LAY-OUT RULES /* ------------------------------------------------- */ #wrapper { position:relative; width:990px; margin:0 auto; } #wrapper #main { position:relative; width:990px; } #wrapper #header { float:left; height:160px; position:relative; width:810px; margin-bottom:10px; } #wrapper #content-wrapper { float:left; width:990px; overflow:hidden; margin-bottom:30px; } #wrapper #content-wrapper #sidebar { float:left; list-style:none; margin:0; padding:0; width:180px; } #wrapper #content-wrapper #content { background:#FFF; float:left; list-style:none; margin:0 0 0 4px; padding:0; width:806px; } /* ------------------------------------------------- */ /* HEADER RULES /* ------------------------------------------------- */ #logo { position:absolute; top:0px; left:-52px; border:0; width:263px; height:163px; } #menu { list-style:none; margin:64px 0 0 180px; padding:0; } #menu li { display:inline; list-style:none; margin:0; padding:0; } #menu li a { background:#FFF; text-align:center; color:#000; display:block; font-size:15px; float:left; line-height:15px; margin:0 0 0 4px; padding:8px 0px; text-decoration:none; text-transform:uppercase; width:86px; } #menu li a:hover { background:#000; color:#FFF; } #menu li a.current { background:#000; color:#FFF; } #language { list-style-type: none; position: absolute; top: 72px; right: 25px; } #language li { display:inline; list-style:none; margin:0; padding:2px; } #language li a { color: #008FD5; } #language li a:hover { color: #FAD81C; } /* ------------------------------------------------- */ /* SCROLLABLE /* ------------------------------------------------- */ div.scrollable { float:left; position:relative; width:536px; height:406px; color:#FFF; overflow:hidden; } div.scrollable div.items { position:absolute; width:20000em; } div.scrollable div.items div.item { position:relative; float:left; width:536px; background:transparent; } div.scrollable div.items div.item img { display:block; margin-bottom:4px; } div.scrollable div.items div.item p { float:left; width:526px; background:#000; padding:5px; } a.navigation { position:absolute; cursor:pointer; top:50%; height:51px; width:53px; margin-top:-25px; background:url(../img/scrollable-arrows.png) no-repeat; z-index:10; } a.prev { left:5px; background-position:0 0; } a.next { right:5px; background-position:-53px 0; } a.prev:hover { left:5px; background-position:0 -51px; } a.next:hover { right:5px; background-position:-53px -51px; } a.disabled { display:none; } a.navigation span { display:none; } /* ------------------------------------------------- */ /* CONTENT /* ------------------------------------------------- */ #wrapper #content-wrapper #content.concept-main { background:transparent; } #wrapper #content-wrapper #content.concept-main #slideshow { float:left; position:relative; width:536px; height:406px; margin-right:4px; } #wrapper #content-wrapper #content.concept-main #text { float:left; background:#000; width:242px; color:#FFF; padding:8px 16px 0 8px; min-height:379px; } #wrapper #content-wrapper #content.concept-main #text h1 { color:#FFF; font-size:16px; text-transform:uppercase; margin:14px 0 18px 0; } #wrapper #content-wrapper #content.concept-main #text h2 { color:#FFF; font-size:16px; margin:14px 0 18px 0; } #wrapper #content-wrapper #content.concept-main #text p { margin:0 0 9px 0; } #wrapper #content-wrapper #content.concept-main #text ul { list-style:none; margin:0; padding:0; } #wrapper #content-wrapper #content.agenda-main { background:transparent; } #wrapper #content-wrapper #content.agenda-main div.agenda-item { float:left; width:806px; padding:0; background-color:#000; margin-bottom:4px; } #wrapper #content-wrapper #content.agenda-main div.agenda-item a.agenda-data { float:left; display:block; width:698px; min-height:82px; padding:10px 10px 10px 8px; text-decoration:none; color:#FFF; } #wrapper #content-wrapper #content.agenda-main div.agenda-item a.agenda-data:hover { background:#FFF; color:#000; } #wrapper #content-wrapper #content.agenda-main div.agenda-item a.agenda-data:hover h1 { color:#000; } #wrapper #content-wrapper #content.agenda-main div.agenda-item a.agenda-data:hover p { color:#000; } #wrapper #content-wrapper #content.agenda-main div.agenda-item a.agenda-data h1 { color:#FFF; font-size:16px; text-transform:uppercase; margin-bottom:10px; } #wrapper #content-wrapper #content.agenda-main div.agenda-item a.agenda-data p { color:#FFF; } #wrapper #content-wrapper #content.agenda-main div.agenda-item ul { background:#FFF; color:#000; float:right; width:90px; list-style:none; margin:0; padding:0; } #wrapper #content-wrapper #content.agenda-main div.agenda-item ul li { width:90px; height:34px; } #wrapper #content-wrapper #content.agenda-main div.agenda-item ul li a { display:block; background:url(../img/li-arrow.png) no-repeat 10px 0px; width:65px; height:34px; line-height:34px; padding:0px 0px 0px 25px; color:#000; text-decoration:none; text-transform:uppercase; } #wrapper #content-wrapper #content.agenda-main div.agenda-item ul li a:hover { background:#FAD81C url(../img/li-arrow.png) no-repeat 10px -32px; color:#FFF; } #wrapper #content-wrapper #content.agenda { background:transparent; } #wrapper #content-wrapper #content.agenda div.agenda-item { float:left; width:626px; padding:0; background-color:#FFF; margin-bottom:4px; } #wrapper #content-wrapper #content.agenda div.agenda-item a.agenda-data { float:left; position:relative; display:block; width:553px; min-height:82px; padding:10px 65px 10px 8px; text-decoration:none; color:#000; } #wrapper #content-wrapper #content.agenda div.agenda-item a.agenda-data h1 { color:#000; font-size:16px; text-transform:uppercase; margin-bottom:10px; } #wrapper #content-wrapper #content.agenda div.agenda-item a.agenda-data p { color:#000; } #wrapper #content-wrapper #content.agenda div.agenda-item a.agenda-data span { position:absolute; bottom:0; right:0; display:block; color:#FFF; background:#000 url(../img/li-arrow.png) no-repeat 10px -32px; padding:0 15px 0 25px; height:32px; line-height:32px; text-decoration:none; text-transform:uppercase; } #wrapper #content-wrapper #content.agenda div.agenda-item a.agenda-data:hover { background:#000; color:#FFF; } #wrapper #content-wrapper #content.agenda div.agenda-item a.agenda-data:hover h1 { color:#FFF; } #wrapper #content-wrapper #content.agenda div.agenda-item a.agenda-data:hover p { color:#FFF; } #wrapper #content-wrapper #content.agenda div.agenda-item a.agenda-data:hover span { background:#FAD81C url(../img/li-arrow.png) no-repeat 10px 0px; color:#000; } #wrapper #content-wrapper #content.agenda div.archief a.agenda-data { color:#b3b3b3; } #wrapper #content-wrapper #content.agenda div.archief a.agenda-data h1 { color:#b3b3b3; } #wrapper #content-wrapper #content.agenda div.archief a.agenda-data p { color:#b3b3b3; } #wrapper #content-wrapper #content.agenda div.archief a.agenda-data span { background:#b3b3b3 url(../img/li-arrow.png) no-repeat 10px -32px; } #wrapper #content-wrapper #content.locatie { background:transparent; } #wrapper #content-wrapper #content.locatie #gmap { float:left; position:relative; width:536px; height:506px; margin-right:4px; background:#000; } #wrapper #content-wrapper #content.locatie #text { float:left; background:#000; width:242px; color:#FFF; padding:0 16px 0 8px; } #wrapper #content-wrapper #content.locatie #text h1 { color:#FFF; font-size:16px; text-transform:uppercase; margin:14px 0 18px 0; } #wrapper #content-wrapper #content.locatie #text p { margin:0 0 18px 0; } #wrapper #content-wrapper #content.info { background:transparent; } #wrapper #content-wrapper #content.info #slideshow { float:left; position:relative; width:536px; height:406px; margin-right:4px; background:transparent; } #wrapper #content-wrapper #content.info #text { float:left; background:#FFF; width:242px; height:352px; color:#000; padding:4px 16px 0 8px; } #wrapper #content-wrapper #content.info #text h1 { color:#000; font-size:16px; text-transform:uppercase; margin:14px 0 8px 0; } #wrapper #content-wrapper #content.info #text h2 { color:#000; font-size:12px; font-weight:bold; margin:6px 0 4px 0; } #wrapper #content-wrapper #content.info #text p { margin:0 0 16px 0; } #wrapper #content-wrapper #content.info #text a { color:#000; } #wrapper #content-wrapper #content.info #text ul { margin:0 0 16px 16px; } #wrapper #content-wrapper #content.pers { background:transparent; } #wrapper #content-wrapper #content.pers div.pers-item { float:left; width:806px; padding:0; background-color:#FFF; margin-bottom:4px; } #wrapper #content-wrapper #content.pers div.pers-item a.pers-data { float:left; display:block; width:798px; padding:4px; text-decoration:none; color:#000; } #wrapper #content-wrapper #content.pers div.pers-item a.pers-data img { float:left; margin-right:8px; } #wrapper #content-wrapper #content.pers div.pers-item a.pers-data h1 { color:#000; font-size:16px; text-transform:uppercase; margin-bottom:10px; margin-top:4px; } #wrapper #content-wrapper #content.pers div.pers-item a.pers-data p { color:#000; } #wrapper #content-wrapper #content.pers div.pers-item a.pers-data:hover { background:#000; color:#FFF; } #wrapper #content-wrapper #content.pers div.pers-item a.pers-data:hover h1 { color:#FFF; } #wrapper #content-wrapper #content.pers div.pers-item a.pers-data:hover p { color:#FFF; } #wrapper #content-wrapper #content.archief-main { background:transparent; } #wrapper #content-wrapper #content.archief-main ul { width:806px; list-style:none; } #wrapper #content-wrapper #content.archief-main ul li { width:806px;} #wrapper #content-wrapper #content.archief-main ul li a { position:relative; display:block; line-height:30px; height:30px; width:790px; background:#000; margin-bottom:4px; padding:0 8px; text-transform:uppercase; color:#FFF; text-decoration:none; } #wrapper #content-wrapper #content.archief-main ul li a span { position:absolute; top:0; left:630px; width:150px; height:30px; z-index:5; line-height:30px; background:url(../img/li-arrow.png) no-repeat left center; padding-left:18px; } #wrapper #content-wrapper #content.archief-main ul li a:hover { background:#FFF; color:#000; } #wrapper #content-wrapper #content.archief-main ul li a:hover span { background-position:left top; } #wrapper #content-wrapper #content.partners-main ul { width:806px; list-style:none; } #wrapper #content-wrapper #content.partners-main ul li { float:left; display:table; width:20%; vertical-align:middle; text-align:center; height:125px; } #wrapper #content-wrapper #content.partners-main ul li a { display:table-cell; vertical-align:middle; border:none; } #wrapper #content-wrapper #content.partners { background:transparent !important; } #wrapper #content-wrapper #content.partners ul.partners { float:left; width:806px; list-style:none; background:#FFF; } #wrapper #content-wrapper #content.partners ul.partners li { float:left; display:table; width:25%; vertical-align:middle; text-align:center; height:145px; overflow:hidden; background-position: center center; background-repeat: no-repeat; } #wrapper #content-wrapper #content.partners ul.partners li a { display:table-cell; vertical-align:middle; border:none; } #wrapper #content-wrapper #content.partners ul.partners li a span { display:none; } #wrapper #content-wrapper #content.pers-main { background:transparent; } #wrapper #content-wrapper #content.pers-main div.pers-item { float:left; width:806px; padding:0; background-color:#000; margin-bottom:4px; } #wrapper #content-wrapper #content.pers-main div.pers-item a.pers-data { float:left; display:block; width:798px; padding:4px; text-decoration:none; color:#FFF; } #wrapper #content-wrapper #content.pers-main div.pers-item a.pers-data img { float:left; margin-right:8px; } #wrapper #content-wrapper #content.pers-main div.pers-item a.pers-data h1 { color:#FFF; font-size:16px; text-transform:uppercase; margin-bottom:10px; margin-top:4px; } #wrapper #content-wrapper #content.pers-main div.pers-item a.pers-data p { color:#FFF; } #wrapper #content-wrapper #content.pers-main div.pers-item a.pers-data:hover { background:#FFF; color:#000; } #wrapper #content-wrapper #content.pers-main div.pers-item a.pers-data:hover h1 { color:#000; } #wrapper #content-wrapper #content.pers-main div.pers-item a.pers-data:hover p { color:#000; } #wrapper #content-wrapper #content.contact-main { background:transparent; } #wrapper #content-wrapper #content.contact-main #gmap { float:left; position:relative; width:536px; height:506px; margin-right:4px; background:#000; } #wrapper #content-wrapper #content.contact-main #text { float:left; background:#000; width:242px; color:#FFF; padding:0 16px 0 8px; } #wrapper #content-wrapper #content.contact-main #text h1 { color:#FFF; font-size:16px; text-transform:uppercase; margin:14px 0 18px 0; } #wrapper #content-wrapper #content.contact-main #text p { margin:0 0 18px 0; } #wrapper #content-wrapper #content.contact-main #text a { color: #fff; } #wrapper #content-wrapper #content.archief { background:transparent; } #wrapper #content-wrapper #content.archief div.archief-wrapper { float:left; position:relative; width:806px; padding:0; margin-bottom:4px; } #wrapper #content-wrapper #content.archief div.archief-wrapper div.archief-content { float:left; display:block; width:696px; padding:0 20px 0 0; text-decoration:none; color:#000; background-color:#FFF; margin: 0 0 6px 0; } #wrapper #content-wrapper #content.archief div.archief-wrapper div.archief-content img { float:left; margin-right:8px; } #wrapper #content-wrapper #content.archief div.archief-wrapper div.archief-content div.archieftekst { float:left; width:510px; padding-bottom:20px; } #wrapper #content-wrapper #content.archief div.archief-wrapper div.archief-content h1 { font-size:16px; text-transform:uppercase; margin-bottom:10px; margin-top:8px; } #wrapper #content-wrapper #content.archief div.archief-wrapper div.archief-date { background:#FFF; text-align:center; color:#000; display:block; font-size:13px; font-weight:bold; float:left; line-height:15px; margin:0; padding:8px 0px; text-decoration:none; text-transform:uppercase; width:90px; } #wrapper #content-wrapper #content.archief div.archief-wrapper ul { list-style:none; margin:0; padding:0; } #wrapper #content-wrapper #content.archief div.archief-wrapper ul li { list-style:none; margin:0; padding:0; } #wrapper #content-wrapper #content.archief div.archief-wrapper ul li a { background:#000; text-align:center; color:#FFF; display:block; font-size:15px; float:left; line-height:15px; margin:4px 0 0 4px; padding:8px 0px; text-decoration:none; text-transform:uppercase; width:86px; } #wrapper #content-wrapper #content.archief div.archief-wrapper ul li a:hover { background:#FFF; color:#000; } #wrapper #content-wrapper #content.affiche { text-align:center; background:transparent; } div.pagination { float:left; position:relative; width:796px; margin-top:4px; background-color:#000; color:#000; padding:5px; } div.pagination a:hover { color:#ED1C24; } div.pagination a.qp_prev { float:right; display:block; } div.pagination a.qp_next { float:left; display:block; } div.pagination a.qp_disabled { opacity:0.5; filter:alpha(opacity=50); } /* ------------------------------------------------- */ /* SIDEBAR /* ------------------------------------------------- */ #sidebar li { float:left; display:inline; height:31px; list-style:none; margin:0; padding:0; background:#000; margin:0 0 4px 0; overflow:hidden; width:180px; } #sidebar li a { text-align:left; color:#FFF; display:block; font-size:15px; float:left; line-height:15px; padding:8px 10px; text-decoration:none; width:160px; opacity:0.75; filter:alpha(opacity=75); margin-right:4px; } #sidebar li a:hover { opacity:1; filter:alpha(opacity=100); } #sidebar li.current { width:184px; } #sidebar li.current a { opacity:1; filter:alpha(opacity=100); } /* ------------------------------------------------- */ /* SUB-MENU /* ------------------------------------------------- */ #sub-menu { list-style:none; padding:0; border-bottom:4px solid #ed1c24; overflow:hidden; background:#000; } #sub-menu li { display:inline; list-style:none; margin:0; padding:0; } #sub-menu li a { background:#000; text-align:center; color:#FFF; display:block; font-size:15px; float:left; line-height:15px; padding:8px 0px; margin: 0 14px 0 14px; text-decoration:none; text-transform:uppercase;} #sub-menu li a:hover { color:#ED1C24; } #sub-menu li a.current { color:#FAD81C; } #sub-menu li.last a { border-right:none; } /* ------------------------------------------------- */ /* FOOTER RULES /* ------------------------------------------------- */ #footer #counter { position:absolute; top:-80px; left:20px; background:transparent; } #footer form { position:relative; background:url(../img/bg-nieuwsbrief.png) no-repeat 0 0; width:280px; height:38px; margin-left:40px; } #footer form label { float:left; font-size:10px; height:28px; line-height:28px; text-transform:uppercase; padding-left:6px; } #footer form input { background:#FFF; border:none; float:left; font:10px/10px 'Trebuchet MS', Helvetica , Jamrul, sans-serif; height:14px; padding:2px; width:134px; margin:5px 5px 5px 9px; } #footer form button { float:right; border:none; background:transparent; font:10px/10px 'Trebuchet MS', Helvetica , Jamrul, sans-serif; text-transform:uppercase; margin-left:8px; margin-top:10px; margin-right:18px; } #footer div.error-message { position:absolute; top:38px; left:10px; font-size:10px; width:175px; padding:3px 6px; background:#008fd5; } #scroller { position:absolute; width:100%; height:41px; left:0; top:74px; } #scroller div.scrollWrapper { position:relative; width:100%; height:100%; overflow:hidden; } #scroller div.scrollWrapper div.scrollableArea { position:relative; width:auto; height:100%; } #scroller div.scrollWrapper div.scrollableArea img { float:left; display:block; padding-left:35px; } #social-media-hub { position:absolute; padding:0; margin:0; list-style:none; /*width:138px; height:16px;*/ width:152px; height:40px; top:0px; right:25px; } #social-media-hub li { float:left; display:inline; padding:0; margin:0 0 7px 7px; list-style:none; width:16px; height:16px; } #social-media-hub li a { float:left; display:block; padding:0; margin:0; list-style:none; background:url(../img/social-media-hub.png) no-repeat; width:16px; height:16px; } #social-media-hub li a span { display:none; } #social-media-hub .btn01 a { background-position:0px 0px; } #social-media-hub .btn01 a:hover { background-position:0px -16px; } #social-media-hub .btn02 a { background-position:-23px 0px; } #social-media-hub .btn02 a:hover { background-position:-23px -16px; } #social-media-hub .btn03 a { background-position:-46px 0px; } #social-media-hub .btn03 a:hover { background-position:-46px -16px; } #social-media-hub .btn04 a { background-position:-69px 0px; } #social-media-hub .btn04 a:hover { background-position:-69px -16px; } #social-media-hub .btn05 a { background-position:-92px 0px; } #social-media-hub .btn05 a:hover { background-position:-92px -16px; } #social-media-hub .btn06 a { background-position:-115px 0px; } #social-media-hub .btn06 a:hover { background-position:-115px -16px; } #social-media-hub .btn07 a { background-position:-138px 0px; } #social-media-hub .btn07 a:hover { background-position:-138px -16px; } #social-media-hub .btn08 a { background-position:-161px 0px; } #social-media-hub .btn08 a:hover { background-position:-161px -16px; } #social-media-hub .btn09 a { background-position:-184px 0px; } #social-media-hub .btn09 a:hover { background-position:-184px -16px; } #social-media-hub .btn10 a { background-position:-207px 0px; } #social-media-hub .btn10 a:hover { background-position:-207px -16px; } #social-media-hub div.social-link { float:left; width:69px; padding-top:2px; } #social-media-hub div.social-share { float:left; border-left:#0066CC 1px solid; height:40px; margin-left:8px;} #social-media-hub div.social-share h1 { padding: 0 0 0 7px; margin:0; height:23px; color:#008fd5; } /* ------------------------------------------------- */ /* SCROLLPANE RULES /* ------------------------------------------------- */ .jScrollPaneContainer{position:relative;overflow:hidden;z-index:1;background-color:#FFF;} .jScrollPaneTrack{position:absolute;cursor:pointer;right:0;top:0;height:100%;background:#aaa;} .jScrollPaneDrag{position:absolute;background:#666;cursor:pointer;overflow:hidden;} .jScrollPaneDragTop{position:absolute;top:0;left:0;overflow:hidden;} .jScrollPaneDragBottom{position:absolute;bottom:0;left:0;overflow:hidden;} /* ------------------------------------------------- */ /* STICKY FOOTER RULES by Steve Hatcher /* ------------------------------------------------- */ html, body, #wrapper {height:100%;} body > #wrapper { height:auto; min-height:100%; } #main { padding-bottom: 145px; } /* must be same height as the footer */ #footer { position:relative; margin-top:-145px; height:145px; clear:both; } /* CLEAR FIX*/ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */