/********************************************************************************************** CSS on Sails Title:Radio1 Author:XHTMLized Date:August 2008 ********************************************************************************************** 1. BASE 1.1 Reset 1.2 Default styles 1.3 Basic styles 2. LAYOUT 2.1 Header 2.2 Content 2.2.1 Main-Content 2.2.2 Secondary-content 2.2.3 Wide-content 2.2.4 Forms 2.3 Sidebar 2.4 Footer ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1 Reset -----------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;} body {line-height:1;} ol, ul {list-style:none;} :focus {outline:0;} ins {text-decoration:none;} del {text-decoration:line-through;} table {border-collapse:collapse;border-spacing:0;} /* 1.2 Default styles -----------------------------------------------------------------------------------------------*/ body {font-family:Tahoma,Arial, Helvetica, sans-serif;text-align:center;font-size:62.5%;} hr {display:none; clear:both;} strong {font-weight:bold;} em {font-style:italic;} abbr, acronym {border-bottom:1px dotted #999;cursor:help;} input, textarea, select {font:1.2em Tahoma,Arial, Helvetica, sans-serif;} a {color:#57a827;text-decoration:none;} a:hover, a:active { text-decoration:underline;} #footer a {color:#b3b3b3;} /* 1.3 Basic styles -----------------------------------------------------------------------------------------------*/ .hide {display:none;} .clear {clear:both;} br.clear {font-size:0;line-height:0;height:0;overflow:hidden;} .fleft {float:left;} .fright {float:right;} p.center {text-align:center;} p.right {text-align:right;} p.left {text-align:left;} .clearfix:after, #main:after, #sidebar .box:after, dl.program:after, div.tabs:after, ul.audio-links:after, div.gids-text:after, dl.text:after, div.preview:after, div.multiple-tables:after, .twocol:after, div#player_wrapper #player:after, #main ul.hints li:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix, #main, #sidebar .box, dl.program, div.tabs, ul.audio-links, div.gids-text, dl.text, div.preview, div.multiple-tables, .twocol, div#player_wrapper #player, #main ul.hints li { display:inline-block; } /* Hides from IE-mac \*/ * html .clearfix, * html #main, * html #sidebar .box, * html dl.program, * html div.tabs, * html ul.audio-links, * html div.gids-text, * html dl.text, * html div.preview, * html div.multiple-tables, * html .twocol, * html div#player_wrapper #player, #main ul.hints li { height:1%; } .clearfix, #main, #sidebar .box, dl.program, div.tabs, ul.audio-links, div.gids-text, dl.text, div.preview, div.multiple-tables, .twocol, div#player_wrapper #player, #main ul.hints li { display:block; } /* 2. LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ #pOCN #pOCNBG {width:950px !important;position:relative;left:-3px;} .container {position:relative;margin:0 auto;text-align:left;width:950px;} #header .container {height:145px;overflow:hidden;} #header {margin-bottom:10px;} #footer {margin-top:10px;} #footer .container {height:40px;} #content {width:710px;float:right;} #main-content {float:left;width:470px;} #secondary-content {float:right;width:230px;} .twocol {margin-bottom: 1em;} .twocol .col1 {float:left;width:470px;} .twocol .col2 {float:right;width:230px;} body.one-column #content {width:auto;float:none;} #sidebar {width:230px;float:left;} #footer {clear:both;} body {background:#fff url(../images/ui/backgrounds/bg_body.gif) top repeat-x;} #header {background:url(../images/ui/backgrounds/bg_header.gif) bottom repeat-x;} #footer {background:url(../images/ui/backgrounds/bg_footer.gif) bottom repeat-x #373737;} /* 2.1 Header -----------------------------------------------------------------------------------------------*/ #header .logo a, #header .logo span {cursor:pointer;overflow:hidden;display:block;width:201px;height:98px;} #header .logo { position:absolute;top:11px;left:12px;z-index:1;} #header .logo a {line-height:80px;font-size:50px;font-weight:normal;letter-spacing:2px;} #header .logo span {position:absolute;top:0;left:0;z-index:10;background:url(../images/ui/logo.gif) no-repeat;} #header .motto {position:absolute;top:22px;left:252px;width:508px;height:50px;text-align:left;line-height:25px;color:#333;text-transform:uppercase;font-size:20px;font-weight:normal;} #header .motto span {position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background-image:url(../images/ui/motto.gif);background-repeat:no-repeat;} #header a.luister-live {position:absolute;top:98px;left:0;z-index:3;width:111px;height:38px;text-align:center;line-height:38px;color:#333;text-transform:uppercase;} #header a.luister-live span {cursor:pointer;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background-image:url(../images/ui/but_luisterlive.gif);background-repeat:no-repeat;} #header a.luister-live:hover span {background-position:0 -38px;} #navigation {position:absolute;top:98px;left:240px;width:710px;height:38px;background:url(../images/ui/backgrounds/bg_nav.gif) #414141;} #navigation li {float:left;} #navigation li a {position:relative;float:left;text-align:center;height:38px;line-height:38px;font-size:14px;color:#fff;font-weight:normal;text-transform:uppercase;text-decoration:none;} #navigation li a span {cursor:pointer;position:absolute;top:0;left:0;width:100%;height:38px;background-image:url(../images/ui/nav.png);background-repeat:no-repeat;} #navigation li a:hover {text-decoration:underline;} #navigation li.active a {cursor:default;font-weight:bold;} #navigation li.active a span {cursor:default;} #navigation li#l-home a {width:60px;} #navigation li#l-gids a {width:52px;} #navigation li#l-teru a {width:134px;} #navigation li#l-prog a {width:117px;} #navigation li#l-muzi a {width:70px;} #navigation li#l-over a {width:114px;} #navigation li#l-sear {width:163px;} #navigation li#l-home a span {background-position:0 0;} #navigation li#l-gids a span {background-position:-60px 0;} #navigation li#l-teru a span {background-position:-112px 0;} #navigation li#l-prog a span {background-position:-246px 0;} #navigation li#l-muzi a span {background-position:-363px 0;} #navigation li#l-over a span {background-position:-433px 0;} #navigation li#l-home a:hover span {background-position:0 -38px;} #navigation li#l-gids a:hover span {background-position:-60px -38px;} #navigation li#l-teru a:hover span {background-position:-112px -38px;} #navigation li#l-prog a:hover span {background-position:-246px -38px;} #navigation li#l-muzi a:hover span {background-position:-363px -38px;} #navigation li#l-over a:hover span {background-position:-433px -38px;} #navigation li#l-home.active a span {background-position:0 -76px !important;} #navigation li#l-gids.active a span {background-position:-60px -76px !important;} #navigation li#l-teru.active a span {background-position:-112px -76px !important;} #navigation li#l-prog.active a span {background-position:-246px -76px !important;} #navigation li#l-muzi.active a span {background-position:-363px -76px !important;} #navigation li#l-over.active a span {background-position:-433px -76px !important;} /* #navigation li#l-top100 a {width:76px;} #navigation li#l-top100 a span {background-image:url(../images/ui/nav-top100.png);background-position:0 0;} #navigation li#l-top100 a:hover span {background-position:0 -38px;} #navigation li#l-top100.active a span {background-position:0 -76px !important;} */ #navigation li#l-sear form {padding:7px 0 0 11px;} #navigation li#l-sear form input {float:left;} #navigation li#l-sear form input#query {position: relative; top: 2px; border:1px solid #2e2e2e;height:17px;font-size:13px;color:#999;padding:2px 5px;width:105px;background-image:url(../images/ui/backgrounds/bg_search.gif);background-color:#e6e6e6;background-repeat:no-repeat;} body.js #navigation li#l-sear form input#q {background-image:url(../images/ui/backgrounds/bg_search-l.gif);} body.js #navigation li#l-sear form input#q.active {background-image:url(../images/ui/backgrounds/bg_search.gif);} #secondary-navigation {height:40px;position:absolute;top:0;right:0;z-index:3;} #secondary-navigation li {float:left;} #secondary-navigation li a {float:left;line-height:40px;height:40px;padding:0 15px 0 14px;background:url(../images/ui/header-sep.gif) right center no-repeat;color:#b3b3b3;font-size:1.1em;} #secondary-navigation li a:hover {color:#666;text-decoration:none;} #secondary-navigation li.last a {background:none;} #header .sizeswitch {position:absolute;top:0;right:0;width:59px;height:44px;top:40px;right:4px;} #header .sizeswitch a {position:relative;height:44px;line-height:44px;color:#b3b3b3;} #header .sizeswitch a:hover {color:#57a827;} #header .sizeswitch a.s {float:left;font-size:13px;width:14px;} #header .sizeswitch a.d {float:left;font-size:16px;width:20px;} #header .sizeswitch a.l {float:left;font-size:20px;width:25px;} #header .sizeswitch a span {cursor:pointer;position:absolute;top:0;left:0;width:100%;height:44px;background-image:url(../images/ui/sizeswitch.gif);background-repeat:no-repeat;} #header .sizeswitch a.s span {background-position:0 0;} #header .sizeswitch a.d span {background-position:-14px 0;} #header .sizeswitch a.l span {background-position:-34px 0;} #header .sizeswitch a.s:hover span {background-position:0 -44px;} #header .sizeswitch a.d:hover span {background-position:-14px -44px;} #header .sizeswitch a.l:hover span {background-position:-34px -44px;} #header .sizeswitch a.current span {cursor:default;} #header .sizeswitch a#styles-s.current span {background-position:0 -88px !important;cursor:default;} #header .sizeswitch a#styles-d.current span {background-position:-14px -88px !important;cursor:default;} #header .sizeswitch a#styles-l.current span {background-position:-34px -88px !important;cursor:default;} /* 2.2 Content -----------------------------------------------------------------------------------------------*/ #main h1 {font-family:"Franklin Gothic Medium",Arial,Helvetica,sans-serif;font-size:2em;font-weight:normal;margin:8px 0 2px 0;} #main h2 {font-family:"Franklin Gothic Medium",Arial,Helvetica,sans-serif;font-size:2em;font-weight:normal;margin:8px 0 2px 0;} #main h2 a {color: black;} #main h3 {font-family:Verdana,Arial,Helvetica,sans-serif;padding:0 9px;font-size:1.1em;letter-spacing:1px;word-spacing:0px;color:#dd3519;text-transform:uppercase;line-height:1.4em;} #main h3 a.all {float:right;text-transform:none;font-family:Tahoma,Helvetica,Arial,sans-serif;letter-spacing:0;word-spacing:0;color:#666;padding-right:20px;margin-right:-9px;background-image:url(../images/ui/ico/more-b.gif);background-position:right 4px;background-repeat:no-repeat;} #main h3 a.all:hover {text-decoration:none;color:#dd3519;background-image:url(../images/ui/ico/more-bh.gif);} #main h3 a.back {float:right;text-transform:none;font-family:Tahoma,Helvetica,Arial,sans-serif;letter-spacing:0;word-spacing:0;color:#666;padding-left:13px;background-image:url(../images/ui/ico/back.gif);background-position:left 4px;background-repeat:no-repeat;} #main h3 a.back:hover {text-decoration:none;color:#dd3519;background-image:url(../images/ui/ico/back-h.gif);} #main h4 {font-size:1.1em;line-height:1.63em;font-weight:bold;color:#666;} #content {padding-top:3px;} #main h3 strong {color:#57a827;} #main h5 {font-size:1.1em;color:#333;margin:0 0 3px 0;} #main h6 {font-size:1.1em;font-weight:normal;text-align:center;color:#b3b3b3;margin:13px 0;} #main-text h6 {text-align:left; color: #333; font-weight: bold; margin: 13px 0 5px 0;} #main div.dots {background:url(../images/ui/backgrounds/bg_dots.gif) left center repeat-x;height:7px;clear:both;font-size:0;line-height:0;overflow:hidden;} #main ul.dotted {margin:7px 0 20px 0;} #main ul.dotted li {padding:3px 8px;background:url(../images/ui/backgrounds/bg_dots.gif) bottom left repeat-x;} #main ul.dotted li.more {background:none;height:17px;padding-right:0;} #main ul.dotted li.more a.more {background-position:right 4px;} #main ul.dotted li .nb {float:left;min-width:13px;padding-right:3px;} #main ul.dotted a.teaserbrd {float:right;left:4px;margin-left:16px;position:relative;} * html #main ul.dotted li .nb {width:13px;} #main p, #main ul {font-size:1.1em;line-height:1.63em;color:#333;margin-bottom:5px;} #main p.bigger {font-size:1.2em;font-weight:bold;margin-bottom:15px;line-height:1.5em;color:#333;} #main p.spaced {margin-bottom:10px;} #main p.date {font-weight:bold;color:#999;margin-bottom:10px;} #main p.fourofour {color:#666;margin:12px 0 30px 20px;} #main p.extra {font-weight:bold;color:#57a827;margin-bottom:10px;} #main p.name {font-weight:bold;margin-bottom:0;} #main p.teaser {font-weight: bold; font-size: 1.2em; line-height:1.5em;color:#333;} #main p.react {background: url(../images/ui/ico/react.gif) no-repeat left;padding-left: 17px;margin:10px 0;} #main p a.lees-meer {color:#666;font-weight:bold;text-decoration:none;padding:0 13px 0 0;background-position:right 0.3em;background-repeat:no-repeat;background-image:url(../images/ui/ico/leesmeer.gif);white-space:nowrap;} #main p a.lees-meer:hover {color:#dd3519;text-decoration:none;background-image:url(../images/ui/ico/leesmeer-h.gif);} #main a.onpage {color:#666;font-weight:normal;} #main a.more {display:block;clear:both;float:right;padding-right:20px;background-image:url(../images/ui/ico/more-b.gif);background-position:right 0.55em;background-repeat:no-repeat;font-size:1.1em;line-height:1.5em;color:#666;text-decoration:none;} #main a.more:hover {text-decoration:none;color:#dd3519;background-image:url(../images/ui/ico/more-bh.gif);} #main #breadcrumbs strong>a {color: #57a827;} #main #breadcrumbs a {color: #dd3519;} #content ul.links {margin:12px 0 12px 5px;} #content ul.links li {font-size:1em;list-style:none;padding-left:17px;color:#999;line-height:1.27em;padding-top:0.18em;padding-bottom:0.18em;background-repeat:no-repeat;background-position:left 4px;} #content ul.links li.tags {background-image:url(../images/ui/ico/tags.gif);} #content ul.links li.comm {background-image:url(../images/ui/ico/comm.gif);} #content ul.links li.audio {background-image:url(../images/ui/ico/audio.gif);background-position:-1px 0;} #content ul.links li.mp3 {background-image:url(../images/ui/ico/audio.gif);background-position:-1px 0;} #content ul.links li.bezoek {background-image: url(../images/ui/ico/webs.gif);background-position:-1px 0;} a.teaserbrd, img.teaserbrd { display:block;width:100px;height:75px;padding:11px 14px 14px 13px; background-image:url(../images/ui/backgrounds/bg_teaser.gif); background-position:top left; background-repeat:no-repeat; } img.teaserpage { width: 165px; height: 124px; margin-top: -5px !important; background-image: url(../images/ui/backgrounds/page_teaser.gif); } a.teaserbrd:hover {background-position:bottom left;} /* 2.2.1 Main Content */ #main-content {} /* Article Teaser */ div.art-teaser {padding:0 8px 0 8px;} div.art-teaser .teaserbrd, .teaserbrdright {float:right;margin-left:16px;position:relative;left:4px;} #main-content.weer div.art-teaser {margin-bottom: 3em;} /* Reclame */ div.reclame {text-align:center;padding-bottom:15px;} div.reclame * * {margin:0 auto;} /* Weer */ table#weersverwachting thead th { padding: 8px; background: #ddd; color: #999; text-transform: uppercase; background-image:url(../images/ui/backgrounds/bg_comp.png);} table#weersverwachting tbody th { padding: 8px; width: 12px; background: #ddd; color: #999; text-transform: uppercase; font-weight: normal; text-align:center;background-image:url(../images/ui/backgrounds/tr_tbody_th.png); background-position: left top;} table#weersverwachting td {text-align: center; font-weight: bold; padding: 8px;} /* Article */ #teaserimg {float: left;} #article a.teaserbrd, .gids-afl a.teaserbrd, .programma-info a.teaserbrd, .overradio a.teaserbrd { float: left; margin: 0 11px 5px 0; position:relative;left:-4px;} #article img.network-logo-small {float:right;margin:0;} div.article-buttons img {margin-left:7px;} #main-text{padding:0 9px; margin-bottom: 10px;} #main-text ul {margin: 10px 35px 5px 0;padding-left:24px;} #main-text ul.links {margin-left:0;padding-left:5px;} #main-text ul li {list-style-type: none;font-size: 1.1em;line-height:1.26em;padding:0.2em 0 0.2em 14px;background-repeat:no-repeat;background-position:0 0.7em;background-image:url(../images/ui/bull.gif);} #main-text ol {margin:10px 35px 10px 38px;} #main-text ol li {list-style-type:decimal;font-size:1.1em;line-height:1.26em;padding:0.2em 0 0.2em 0;} #main-text .imgbrd { display:block;width:433px;height:227px;padding:11px 14px 14px 13px; background-image:url(../images/ui/backgrounds/bg_teaser.gif); background-position:top left; background-repeat:no-repeat; } #main-text b {font-weight: bold;} #main-text strong.deel {font-size:13px;line-height:15px;} #main-text b.shadow {position:relative; left:4px;} #main-text img, #main-text b.shadow {float: right; margin: 5px 0 5px 10px;} #main-text b.shadowleft {float:left;margin:5px 5px 5px 0;} #main-text b.shadowleft img {float:left;} #main-text a.teaserbrd img {margin:0;} #main-text b.shadow img {margin:0 !important;} b.shadow, b.shadow b {float:left;overflow:hidden;} b.shadow {background:url(../images/ui/brd_t.gif) top repeat-x;} b.shadow b {background:url(../images/ui/brd_tl.gif) top left no-repeat;} b.shadow b b {background:url(../images/ui/brd_tr.gif) top right no-repeat;} b.shadow b b b {background:url(../images/ui/brd_bl.gif) bottom left no-repeat;} b.shadow b b b b {background:url(../images/ui/brd_br.gif) bottom right no-repeat;padding:12px;} b.shadow b b b b img {float:left !important;} #comments {margin-top: 30px;} /* #comments label {display:block;font-size:11px;font-weight:bold;margin-left:20px;} .form-item {margin: 5px 0px 10px 10px;} #edit-name {width: 180px;} #edit-email {width: 180px;} #edit-reaction {margin-left: 10px;border: 1px inset;} #warning-email { font-weight: normal; color: #999999; } #send { float:right; position: relative; top: -50px; } .form-item input { margin: 5px 5px 10px 10px; border: 1px inset; text-align: left; } .form-item .checkbox { margin: 0px; } .checkbox-label { border-left:1px none; left:10px; position:relative; text-align:left; top:13px; } */ div.comment { margin: 5px 0 5px 0; padding:0 9px; } #main-text table.deel { width:100%;margin:1em 0; } #main-text table.deel tr td { vertical-align:middle; border:1px solid #DDD; background-color:#EFEFEF; width:50%; padding:5px; font-size:13px; } #main-text table.deel tr td a { color: #000; } #main-text table.deel tr td img {margin:0;float:left;margin-right:7px;margin-bottom:1px;} a.wijzig {display:block;position:relative;width:59px;height:21px;text-align:center;text-transform:uppercase;} a.wijzig span {cursor:pointer;position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../images/ui/wijzig.gif);background-repeat:no-repeat;} a.wijzig:hover span {background-position: 0 -21px;} a.retweet { display: block; margin-top: 1em; font: 10px Verdana, sans-serif; color: #000; text-decoration: none; border: 0px; } a.retweet span { width: 68px; height: 14px; background: url(/images/ui/retweet.png); color: #FFF; padding: 2px 8px 2px 22px; } a.retweet:hover span {background-position: bottom;} /* Star Rating */ #main-text .star-rating-wrapper ul {margin:0;padding:0;} #main-text .star-rating-wrapper ul li {padding:0;background-image:none;background-position:0 0;line-height:22px;} .star-rating-wrapper {display:block;clear:both;line-height:22px;height:22px;margin:12px 0;} /* Icon to the left */ .star-rating-wrapper .icon {float:left;width:16px;height:22px;margin:0 6px 0 0;background-repeat:no-repeat;background-position:50% 50%;} .star-rating-wrapper .icon-checked {background-image:url(../images/ico-checked.gif);} /* The 5 stars */ .star-rating-wrapper .star-rating {position:relative;float:left;width:90px;height:22px;overflow:hidden;background-image:url(../images/star.png);background-repeat:repeat-x;} /* Current state */ .star-rating-wrapper .star-rating .current {} .star-rating-wrapper .star-rating .current span {float:left;height:22px;text-align:left;text-indent:-999em;background-image:url(../images/star.png);background-repeat:repeat-x;background-position:0 -22px;} .star-rating-wrapper .star-rating .current .rating-1 {width:18px;} .star-rating-wrapper .star-rating .current .rating-2 {width:36px;} .star-rating-wrapper .star-rating .current .rating-3 {width:54px;} .star-rating-wrapper .star-rating .current .rating-4 {width:72px;} .star-rating-wrapper .star-rating .current .rating-5 {width:90px;} /* Hover state */ .star-rating-wrapper .star-rating:hover .current {display:none;} .star-rating-wrapper .star-rating li {float:left;width:18px;height:22px;} .star-rating-wrapper .star-rating a {position:absolute;z-index:20;width:18px;height:22px;} .star-rating-wrapper .star-rating a:hover {left:0;background-position:0 -22px;z-index:2;background-image:url(../images/star.png);background-repeat:repeat-x;background-position:0 -22px;} .star-rating-wrapper .star-rating a.rating-1 {} .star-rating-wrapper .star-rating a.rating-1:hover {left:0;} .star-rating-wrapper .star-rating a.rating-2 {left:18px;} .star-rating-wrapper .star-rating a.rating-2:hover {left:0;width:36px;} .star-rating-wrapper .star-rating a.rating-3 {left:36px;} .star-rating-wrapper .star-rating a.rating-3:hover {left:0;width:54px;} .star-rating-wrapper .star-rating a.rating-4 {left:54px;} .star-rating-wrapper .star-rating a.rating-4:hover {left:0;width:72px;} .star-rating-wrapper .star-rating a.rating-5 {left:72px;} .star-rating-wrapper .star-rating a.rating-5:hover {left:0;width:90px;} /* Status */ .star-rating-wrapper .status {float:left;padding:0 0 0 10px;line-height:22px;font-size:1.1em;} /* 2.2.2 Secondary Content */ #secondary-content {} #secondary-content h3 {clear: both;} #secondary-content a.more {margin-bottom: 2em;} div.tabs {width:100%;background-image:url(../images/ui/backgrounds/bg_tabs.gif);background-position:right bottom;background-repeat:no-repeat;height:28px;margin-bottom:10px;margin-top:6px;} #wide-content div.tabs {margin-bottom:0;} div.tabs ul.tabs {height:28px;margin-right:1px;background-image:url(../images/ui/backgrounds/bg_tabs.gif);background-position:left bottom;background-repeat:no-repeat;padding-left:2px;} ul.tabs li {float:left;border-right:1px solid #f4f4f4;margin-top:3px;height:25px;} ul.tabs li a {float:left;height:25px;line-height:25px;font-size:1.1em;font-weight:bold;padding-left:10px;padding-right:10px;color:#000;border-right:1px solid #dbdbdb;} ul.tabs li a.prev span, ul.tabs li a.next span {float:left;height:25px;width:12px;background-position:center center;background-repeat:no-repeat;} ul.tabs li a.prev span {background-image:url(../images/ui/ico/back.gif);} ul.tabs li a.next span {background-image:url(../images/ui/ico/arro.gif);} ul.tabs li a:hover {text-decoration:none;background:url(../images/ui/tab-hover.gif) bottom repeat-x;} ul.tabs li.current {border-right:none;position:relative;left:-2px;margin-top:0;height:28px;margin-right:-2px;} ul.tabs li.current a {margin-top:0;padding-top:2px;border-width:1px 1px 0 1px;border-style:solid;border-top-color:#d5d4d4;border-left-color:#cac9c9;border-right-color:#cac9c9;background-color:#fff;color:#57a827;cursor:default;text-decoration:none !important;} ul.tabs li.current a:hover {background:#fff;} #secondary-content dt { float: right; height: 15px; } #secondary-content dl.programma-day dt {float:none;height:auto;} div.tab-contents {margin-bottom:20px;padding:0 8px;} div.tab-content {position:absolute;left:-9999px;} div.tab-active {position:static;left:0;} #secondary-content .program { margin-bottom: 25px; } ul.articles, ul.latestarticles { margin:9px 0; font-size:1.1em; line-height:1.23em; } ul.recent-news { margin-top: 30px; } ul.articles li a, ul.latestarticles li a {display:block;padding-left:17px;padding-top:0.2em;padding-bottom:0.2em;color:#666; background-repeat:no-repeat;background-position:0 0.5em;background-image:url(../images/ui/ico/links.gif);} ul.articles li a:hover, ul.latestarticles li a:hover {color:#dd3519;text-decoration:none;background-image:url(../images/ui/ico/links-h.gif);} ul.latestarticles li a {background-image:url(../images/ui/ico/leesmeer.gif);background-position:4px 0.5em;} ul.latestarticles li a:hover {background-image:url(../images/ui/ico/leesmeer-h.gif);} ul.pagecontents {margin:10px 0 20px;} ul.pagecontents li {padding-left:15px;font-size:1.1em;line-height:1.23em;} ul.pagecontents li a {display:block;padding-left:17px;padding-top:0.2em;padding-bottom:0.2em;color:#666; background-repeat:no-repeat;background-position:0 0.5em;background-image:url(../images/ui/ico/leesmeer.gif);background-position:4px 0.5em;font-weight:bold;} ul.pagecontents li a:hover {color:#dd3519;background-image:url(../images/ui/ico/leesmeer-h.gif);} /* Pagination */ .pagination {margin-top:3em;height:22px;margin-bottom:15px;font-weight:bold;color:#333;font-size:1.1em;text-align:center;} .pagination a {color:#333;} .pagination a, .pagination span {padding:6px;border-width:1px;border-style:solid;border-top-color:#e6e6e6;border-left-color:#dddcdc;border-bottom-color:#d5d4d4;border-right-color:#dddcdc;background:url(../images/ui/backgrounds/bg_pagination.gif) top repeat-x #e6e6e6;} .pagination a.previous, .pagination a.next {padding-top:0;padding-bottom:0;} .pagination a.previous span, .pagination a.next span {padding-top:6px;padding-bottom:6px;cursor:pointer;border:none;background-repeat:no-repeat;background-color:transparent;} .pagination a.previous span {float:left;padding-left:14px;background-position:0 7px;background-image:url(../images/ui/ico/prev.gif);} .pagination a.next span {float:right;padding-right:14px;background-position:right 7px;background-image:url(../images/ui/ico/next.gif);} .pagination a:hover {color:#dd3519;background:url(../images/ui/backgrounds/bg_pagination-h.gif) top repeat-x #fff;text-decoration:none;} .pagination .current {color:#57a827;text-decoration:none !important;background:#fff;cursor:default;} .pagination .previous {float:left;position:relative;top:-6px;} .pagination .next {float:right;position:relative;top:-6px;} /* IE7 pagination */ *+html .pagination a, .pagination span {zoom:1;} *+html .pagination .previous {top:0;} *+html .pagination .previous span {float:none;} *+html .pagination .next {top:0;width:72px;} *+html .pagination .next span {float:none;} /* 2.2.3 Wide Content */ #wide-content { /*padding: 0 8px;*/ position: relative; } img.logo { position: absolute; top: 25px; right: 17px; display: block;} /* gids */ div.gids-text {padding:0 9px;margin-bottom:25px;} div.gids-text a.teaserbrd { float:right; margin-left: 15px; margin-right:-5px; } h3.multi-color-title span { color: #57a827; } .gids-text h3.multi-color-title span { padding-top: 30px !important; } .wide-table { width: 100%; font-size: 1.1em; } .map-table {float:left;width:230px;margin-right:9px;font-size:1.1em;} .map-table-last {float:right;margin-right:0;} .radio1-podcast-table{width: 455px;} th {font-size:11px;} .wide-table th, .address-table th, .map-table th { background: url(../images/ui/backgrounds/bg_table_head.jpg) top left repeat-x; color: #999; padding: 14px 7px 14px 7px; text-transform: uppercase; font-family:"Franklin Gothic Medium",Arial,Helvetica,sans-serif; font-weight: normal; text-align: left; vertical-align: middle; letter-spacing: 2px; white-space:nowrap;} .wide-table th.no-padd { padding: 0 3px;} .wide-table td, .map-table td { color: #666; padding: 5px 7px 5px 7px; background:url(../images/ui/dots-wide.gif) bottom left repeat-x; } .map-table th.gemeente {width: 170px;} .map-table th.mhz {width: 55px;} .wide-table th.uitzendtijd {width: 170px;} .wide-table th.tijd {width: 100px;} .tab-content .wide-table th.uitzendtijd, .wide-table th.uitzenddatums {width: 147px;} .wide-table th.uitzenddatum {width: 110px;} .wide-table th.titel {width: 220px;} .wide-table th.beschrijving {width: 310px;} .tab-content .wide-table th.terugluisteren {width: 150px;} .wide-table td a { color: #666; font-weight: bold; text-decoration: none!important; } .wide-table td ul.links a, .wide-table td.hover ul.links a, .wide-table td:hover ul.links a {color:#57a827;font-weight:normal;text-decoration:none;;} #content .wide-table td ul.links li {font-size:11px;} .wide-table td img { vertical-align: top; } .wide-table tr.last td, .map-table tr.last td, #main #content .map-table td.no-border {background-image:none;} #main #content table.wide-table tr.last td {background:none;} #main #content table.wide-table tr.last:hover td {background-image:url(../images/ui/backgrounds/bg_tr_hover.jpg);background-color:#f2f2f2;background-repeat:repeat-x;background-position:bottom left;} #main .wide-table tr:hover td, .wide-table tr.hover td, #main .map-table tr:hover td, .map-table tr.hover td { /*color: #333; font-weight: bold;*/ color:#000; background: #f2f2f2 url(../images/ui/backgrounds/bg_tr_hover.jpg) bottom left repeat-x;} table tr:hover strong {color:#DD3519;} .wide-table tr:hover td a, .wide-table tr.hover td a, .map-table tr:hover td a, .map-table tr.hover td a { color: #DD3519; } #main .gids-afl p.bigger, #main .programma-info p.bigger, #main .overradio p.bigger { font-size: 1.2em; } #main #content .wide-table tr.future td {color:#ccc;} #main #content .wide-table tr.future td a {color:#ccc;font-weight:bold;} #main #content .wide-table tr.future td {background:url(../images/ui/dots-wide.gif) bottom left repeat-x;} #main #content .wide-table tr.future td {font-weight:normal;} .narrow-content { margin-right: 170px!important; /*padding-left:8px;*/ } .small-table { margin: 25px 0; font-size: 1.1em;} .small-table td { padding: 3px 0;} .small-table td strong { color: #999; } #side-content { position: absolute; top: 30px; right: 8px; width: 140px;} .narrow-table { border: 1px solid #DFDEDE; font-size: 1.1em; font-weight: bold; width: 100%; border-collapse: separate; } .narrow-table td { background: #E7E7E7 url(../images/ui/backgrounds/bg_links_table.png) 0 0 repeat-x; padding: 5px 6px 4px 6px; vertical-align: middle; color: #333; border-bottom: 1px solid #DFDEDE; } .narrow-table td.first-cell { border-right: 1px solid #DFDEDE; } .narrow-table td.second-cell { border-left: 1px solid #fff; } .narrow-table tr.alt-row td { border-top: 1px solid #fff;} .narrow-table td span { padding-left: 5px;} .narrow-table tr a { color: #333; line-height: 1.5em;} .narrow-table tr.active a, .narrow-table tr a:hover { color: #DD3519; } .narrow-table.mt { margin-top: 50px;} #side-content img.logo-static { float: right; margin-bottom: 30px;} #main .floatright {float:right;margin:0 0 15px 20px;} ul.iconlist#sidelist {float:right;margin:60px 0 20px 0;} ul.iconlist {margin-top:60px;} ul.iconlist {width:150px;} ul.iconlist li {float:left;} ul.iconlist li a {float:left;font-size:1.1em;line-height:1.272em;padding:4px 0 5px 0;color:#000;font-weight:bold;border-width:1px 0 0 0;border-style:solid;border-color:#fff;background-image:url(../images/ui/backgrounds/bg_listicon.gif);background-color:#f2f2f2;background-position:bottom left;background-repeat:no-repeat;background-position:bottom left;} ul.iconlist li.first a {border-top:1px solid #e6e6e6;} ul.iconlist li a:hover {color: #DD3519;text-decoration:none;background-position:bottom right;} ul.iconlist li a span {cursor:pointer;float:left;padding-left:33px;width:112px;padding-right:5px;background-position:7px center;background-repeat:no-repeat;} ul.iconlist li.i-down a span {background-image:url(../images/ui/ico/down.gif);} ul.iconlist li.i-down a:hover span {background-image:url(../images/ui/ico/down-h.gif);} ul.iconlist li.i-abon a span {background-image:url(../images/ui/ico/abon.gif);} ul.iconlist li.i-abon a:hover span {background-image:url(../images/ui/ico/abon-h.gif);} ul.iconlist li.i-webs a span {background-image:url(../images/ui/ico/webs.gif);} ul.iconlist li.i-webs a:hover span {background-image:url(../images/ui/ico/webs-h.gif);} ul.iconlist li.i-spee a span {background-image:url(../images/ui/ico/audio.gif);} ul.iconlist li.i-spee a:hover span {background-image:url(../images/ui/ico/audioh.gif);} ul.iconlist li.i-arro a span {background-image:url(../images/ui/ico/arro.gif);background-position:10px center;} ul.iconlist li.i-arro a:hover span {background-image:url(../images/ui/ico/arro-h.gif);} /* programma */ .programma-info #right-box, .programma-info #left-box { float: left; margin-bottom: 30px;} .programma-info #left-box { width: 450px; margin-right: 8px; } .programma-info #left-box p, .programma-info dl {padding-left:8px;} .programma-info #right-box { width: 230px;} /* overradio*/ div.preview { padding:0pt 8px; } div.preview .teaserbrd { float: right; left:4px; margin-left:16px; margin-bottom:15px; position:relative;} div.results-container div.preview {margin:10px 0;} #main div.results-container p.date {margin-bottom:5px;} #content div.results-container ul.links {margin-top:5px;margin-bottom:5px;} .overradio ol { list-style: decimal; font-weight: bold; font-size: 1.1em; margin: 10px 0 25px 40px;} .overradio li { margin-bottom: 6px;} .overradio ol li span { font-weight: normal; color: #666;} .overradio dt { font-size: 1.1em; color: #333; font-weight: bold; margin-bottom: 3px;} .overradio dd { line-height: 1.4em; margin-bottom: 25px; } div.multiple-tables table.address-table {width:230px;float:left;margin-right:9px;} div.multiple-tables table.address-table-last {margin-right:0;float:right;} table.address-table { width: 100%; border-collapse: separate!important; font-size: 1.1em;} table.address-table td { color: #666; padding: 3px 9px 4px 9px; background:url(../images/ui/dots-wide.gif) bottom left repeat-x; border-spacing: 8px!important; border-top:1px solid #fff;} table.address-table td address { font-style: normal; line-height: 1.6em;} table.address-table td address strong { font-size: 1.1em; display: block; margin-bottom: 1px;} table.address-table tr:hover td, table.address-table tr.hover td { background: url(../images/ui/backgrounds/bg_address_table.png) #f2f2f2 repeat-x bottom left !important; border-top:1px solid #fff; color: #333;} table.address-table tr:hover td strong, table.address-table tr.hover td strong { color: #DD3519;} .map-table td { vertical-align: middle;} div.multiple-tables {background:url(../images/ui/backgrounds/bg_table_head.jpg) top repeat-x; margin-bottom: 20px;} .podcast-table { width: 230px; font-size: 1.1em; margin-right:9px; float:left;} .podcast-table-last {float:right;margin-right:0;} .podcast-table th { background: url(../images/ui/backgrounds/bg_table_head.jpg) top left repeat-x; color: #999; padding: 14px 7px 14px 7px; text-transform: uppercase; font-family:"Franklin Gothic Medium",Arial,Helvetica,sans-serif; font-weight: normal; text-align: left; vertical-align: middle; letter-spacing: 2px;} .podcast-table th.no-padd { padding: 0 3px;} .podcast-table td { color: #666; padding: 4px 7px 5px 7px;; background:url(../images/ui/dots-wide.gif) bottom left repeat-x; border-top:1px solid #fff; } .podcast-table td a { color: #666; font-weight: bold; text-decoration: none!important; display: block; padding-top: 4px; } .podcast-table td img { vertical-align: top; float: left; margin: 0 5px 0 0; } .podcast-table tr.last td {background-image:none;} .podcast-table tr.last:hover td {background-image:url(../images/ui/backgrounds/bg_podcast_hover.png);} .podcast-table tr:hover td, .podcast-table tr.hover td { border-top:1px solid #fdfdfd; background: url(../images/ui/backgrounds/bg_podcast_hover.png) #f2f2f2 bottom left repeat-x; } .podcast-table td:hover a, .podcast-table td.hover a { color:#DD3519; } .podcast-table .program td a { display: inline; padding-right: 3px;} .podcast-table .program td { padding: 6px 7px 7px 7px;} .podcast-table .program td:hover, .podcast-table .program td.hover { background: url(../images/ui/backgrounds/bg_tr_hover.jpg) #f2f2f2 bottom left repeat-x;color:#333; } .podcast-popup {position:absolute;bottom:17px;left:-9999px; width:350px;padding: 14px 18px;border: 1px solid #999; background-color: #FFF;} * html .podcast-popup {bottom:28px;} *+html .podcast-popup {bottom:19px;} #main table.wide-table tr td .podcast-popup p {font-size:1em;line-height:1.5em;} #main table.wide-table tr td .podcast-popup p strong {color:#000;} #main .podcast-popup h3 {padding:0;font-size:1em;} tr:hover td div.relative {position:relative;} tr:hover td div.relative .podcast-popup {left:80px;} div.form-bg { background: url(../images/ui/backgrounds/bg_form.png) 0 0 repeat-x; height: 38px;margin-bottom:20px;} #main div.imageprog {float:left;margin:0 5px 0 0;width:61px;height:37px;padding:3px 4px 4px 3px;overflow:hidden;text-align:center;background-position:top left;background-repeat:no-repeat;background-image:url(../images/ui/backgrounds/bg_imageprog.gif);} #main tr:hover div.imageprog {background-position:bottom left;} #main div.imageprog img {float:none;margin:0 auto;display:block;} /* Calendar */ div.calendar {width:225px;padding-top:10px;margin-bottom:30px;} div.calendar .head {height:23px;line-height:23px;border-width:1px 1px 1px 1px;border-style:solid;border-color:#d5d4d4;} div.calendar .head .prev, div.calendar .head .next {float:left;width:31px;height:21px;padding-top:2px;background:url(../images/ui/backgrounds/bg_day.gif) top left no-repeat;} div.calendar .head a:hover {background:url(../images/ui/tab-hover.gif) top left repeat-x;cursor:pointer;} div.calendar .head .current {float:left;border-width:0 1px;border-style:solid;border-color:#d5d4d4;width:159px;line-height:23px;text-align:center;font-size:1.1em;font-weight:bold;color:#000;background:url(../images/ui/backgrounds/bg_calendar-th.gif) top repeat-x #fff;} div.calendar .head .next span {display:block;width:31px;height:21px;background:url(../images/ui/ico/arro.gif) center center no-repeat;} div.calendar .head .prev span {display:block;width:31px;height:21px;background:url(../images/ui/ico/back.gif) center center no-repeat;} div.calendar table {width:100%;text-align:center;} div.calendar table td, div.calendar table th {border:1px solid #d5d4d4;width:31px;height:23px;line-height:23px;font-size:1.1em;} div.calendar td {background-position:top left;background-repeat:repeat-x;background-color:#ececec;background-image:url(../images/ui/backgrounds/bg_day.gif);cursor:pointer;} div.calendar td a {color:#666;display:block;height:23px;line-height:23px;width:31px;} div.calendar td a:hover {color:#dd3519;background:url(../images/ui/backgrounds/bg_day-h.gif) top left repeat-x #fff;text-decoration:none;} div.calendar td.disabled {color:#ccc;background-color:#fff;background-image:none;cursor:default;} div.calendar td.noshow {color:#ccc;cursor:default;} div.calendar td.current {color:#fff;font-weight:bold;cursor:default;background-color:#5f5f5f;background-image:url(../images/ui/backgrounds/bg_day-current.gif);} div.calendar table th {border-top:none;border-right:none;border-left:none;color:#666;font-weight:normal;background:url(../images/ui/backgrounds/bg_calendar-th.gif) top left repeat-x #ffffff;} div.calendar table th.last {border-right:1px solid #d5d4d4;} div.calendar table th.first {border-left:1px solid #d5d4d4;} /* 2.2.4 Forms */ form.extended { margin:0 0 20px 0; line-height:2em; overflow:hidden; width:452px; padding-left:9px; } form.extended fieldset { position:relative; } form.extended fieldset fieldset { width:100%; border-width:0; } form.extended fieldset.submit { border-top:none; padding-top:10px; padding-bottom:5px; line-height:22px; } form.extended fieldset.submit input.upper {float:right;margin-top:7px;} form.extended fieldset.submit input.button {color:#000;background:#fff;border:1px solid #c0bfbf;padding:5px 12px;font-weight:bold;cursor:pointer;} form.extended ol { padding:5px 0 5px 0; list-style: none; } form.extended ol.nospace { padding:0 0; } form.extended ol ol { padding:0 0 0 125px; } form.extended li { float:left; width:100%; padding-top:0; } form.extended li.inline { padding-left:125px; width:493px; } form.extended li li { clear:none; width:auto; } .form-bg form.extended ul { width: 600px; margin-left: 10px;} .form-bg form.extended li { width: 160px; margin-top: 6px;} /* Level 1 Form elements */ form.extended label { display:block;width:100%; padding:6px 5px 3px 9px; font-size:1.1em; font-weight:bold; line-height:21px; float:left; text-align:left; cursor:pointer; } form.extended label em {font-style:normal;color:#999;padding:0 5px;font-weight:normal;} form.extended input.text, form.extended input.password { float:left; width:197px;height:16px; padding:1px 5px; background-color:#fff; } form.extended select { } form.extended input.small { width: 2em; margin-right: 1em;} form.extended textarea { float:left; width:90%; overflow:auto; padding:1px 5px; background-color:#fff; } form.extended select { float:left; padding:2px; background-color:#fff; } form.extended li.inline input { float:left; } form.extended ol.checkboxes {float:left;width:330px;} form.extended ol.checkboxes label {width:auto;padding:0 0 0 5px;} form.extended ol.checkboxes input {float:left;} form.validate input.error, form.validate textarea.error {border:1px solid #dd3519;} /* Level 2 Form elements */ form.extended fieldset fieldset legend span { position:absolute;top:2px;left:0; width:120px; padding-right:5px; background-color:transparent; color:#000; font-size:11px; font-weight:bold; line-height:18px; text-align:left; } form.extended fieldset fieldset label { position:relative;top:-1px; clear:none; width:auto; padding-left:5px; text-align:left; } form.extended .inline label { padding-left:5px; } form.extended fieldset fieldset select { float:left; margin-right:10px; } form.extended fieldset fieldset input.checkbox { float:left; } form.extended fieldset fieldset input.radio { float:left; } form.extended ol li.demi { width:50%;float:left; } form.extended ol li.demi label { width:auto; } form.extended ol li textarea { height: 150px;} /* 2.3 Sidebar -----------------------------------------------------------------------------------------------*/ #sidebar {} #sidebar .box {clear:both;padding:4px 0;margin-bottom:20px;} #sidebar .box .dots {margin-bottom:10px;} #sidebar .em {background-color: #ddd; background: url(../images/ui/backgrounds/bg-em-box.gif); margin-top: -30px; padding: 6px;} #sidebar .em h4 {color: black;} #sidebar .em h5 {color: #aaa; font-weight: bold;} #sidebar .em .on-air h5 {color: #dd3519; text-transform: uppercase; font-weight: bold;} #sidebar .em .on-air div.dots {background:url(../images/ui/backgrounds/bg_red_line.gif) left center repeat-x;height:7px;clear:both;font-size:0;line-height:0;overflow:hidden;} #sidebar .em a.lees-meer {color:#57a827;background-image:url(../images/ui/ico/leesmeer-hlt.gif);} #sidebar .em a.lees-meer:hover {background-image:url(../images/ui/ico/leesmeer-h-hlt.gif);color:#DD3519;} /* SideMenu */ #sidebar #branding img {clear:both;float:left;margin-top:12px;} #side-navigation {clear:both;border-top:1px solid #010101;padding:0;} #side-navigation {width:230px;/*height:150px;*/background:#414141;list-style:none;overflow:hidden;} #side-navigation li {float:left;list-style:none;padding:0;} #side-navigation li a {position:relative;float:left;text-align:left;width:230px;height:30px;line-height:30px;font-size:12px;color:#fff;font-weight:bold;text-transform:uppercase;text-decoration:none;background-color:#434343;text-indent:10px;} #side-navigation li a span {cursor:pointer;position:absolute;top:0;left:0;width:230px;height:30px;background-image:url(../images/ui/sidenav.gif);background-repeat:no-repeat;} #side-navigation li a:hover {text-decoration:underline;background-color:#5c5c5c;} #side-navigation li.active a {cursor:default;font-weight:bold;} #side-navigation li.active a span {cursor:default;} #side-navigation li#l-webc a span {background-position:0 0;} #side-navigation li#l-luis a span {background-position:0 -30px;} #side-navigation li#l-bel0 a span {background-position:0 -60px;} #side-navigation li#l-mail a span {background-position:0 -90px;} #side-navigation li#l-bezo a span {background-position:0 -120px;} #side-navigation li#l-webc a:hover span {background-position:-230px 0;} #side-navigation li#l-luis a:hover span {background-position:-230px -30px;} #side-navigation li#l-bel0 a:hover span {background-position:-230px -60px;} #side-navigation li#l-mail a:hover span {background-position:-230px -90px;} #side-navigation li#l-bezo a:hover span {background-position:-230px -120px;} a.small-banner {width:226px;display:block;padding:1px;border-width:1px;border-style:solid;border-color:#d5d4d4;overflow:hidden;margin-bottom:12px;} a.right-banner {width: 230px;display:block;border: 1px solid #d5d4d4;margin-bottom:1em;} div.contest_button {font-size: 130%;background-image:url(../images/ui/backgrounds/bg_contest_button.png);width:226px;height:60px;padding:1px;border-width:1px;border-style:solid;border-color:#d5d4d4;margin-bottom:12px;} a.small-banner:hover, a.right-banner:hover, div.contest_button:hover {border-color:#9e9e9e;} div.contest_button img {float:left; margin-right: 14px;} div.contest_button h4 {margin-top: 6px;} /* Poll */ #content div.poll h4 {color: black;} #content div.poll-voted > p {text-align: right;} #content div.poll-voted ul { margin: 5px 0 1em } #content div.poll-voted ul li { padding-bottom: 6px; clear:left; } #content div.poll-voted ul li span.result-bar { background-image: url(../images/ui/backgrounds/poll-result.gif); display: block; width: 1px; height: 10px; float: left; margin-left: 1em;} #content div.poll-voted ul li em { float: left; font-style: normal; color: #999; margin: 0 0 6px 1em; } /* Blockquote */ #main blockquote {padding:0 9px; overflow:hidden;} #main blockquote p.date {color:#b3b3b3;margin-bottom:0;font-weight:normal;} #main p span.lq {text-indent:-9999px;float:left;width:21px;position:relative;left:-4px;background:url(../images/ui/lq.gif) left center no-repeat;} #main p span.rq {text-indent:-9999px;padding:0 10px;position:relative;left:4px;background:url(../images/ui/rq.gif) right center no-repeat;} /* Banners */ #sidebar .box a.small-banner, #sidebar .box a.small-banner img {float:left;clear:both;} /* Radio Program */ dl.program {width:230px;margin-bottom:5px;background-color:#e6e6e6;border-bottom:1px solid #d5d5d5;} dl.program dd, dl.program dt {float:left; border-width:1px 0 0 0;border-style:solid;border-color:#d5d4d4; font-size:1.1em;line-height:1.3em;color:#333; background-color:#e6e6e6;background-image:url(../images/ui/backgrounds/bg_dl-program.gif);background-repeat:no-repeat;} dl.program .program-first {background-image:url(../images/ui/backgrounds/bg_dl-program-1st.gif);border-color:#e6e6e6;} dl.program dt {clear:left; width:67px; padding:0.4em 0 0.4em 9px; color:#666; background-position:left top; font-size:11px !important;} dl.program dd { width:136px; padding:0.4em 9px; background-position:right top; font-weight:bold;} dl.program dt.hover, dl.program dd.hover, dl.program .program-first.hover {background-image:url(../images/ui/backgrounds/bg_dl-program-h.gif);background-color:#fff;} dl.program dd a {color:#333;text-decoration:none;} * html dl.program dd a {float:left;} /*To avoid misplacements of the icons on multiple-lines elements*/ dl.program dd a:hover {color:#dd3519;} dl.program dt.hover {color:#333;} #main a.audio {padding-right:16px;background-image:url(../images/ui/ico/audio.gif);background-position:right center;background-repeat:no-repeat;} #main a.audio:hover {background-image:url(../images/ui/ico/audioh.gif);} #main a.audio-block {display:block;padding-left:16px;background-image:url(../images/ui/ico/audio.gif);background-position:left center;background-repeat:no-repeat;font-size:11px;} #main a.audio-block:hover {background-image:url(../images/ui/ico/audioh.gif);} /* Daily Program */ dl.programma-day {font-size:1.1em;line-height:1.63em;} dl.programma-day dt {font-weight:bold;margin-top:10px;} dl.programma-day dt.first {margin-top:0;} /* audio-links */ ul.audio-links {margin:9px 0 25px 0;border-bottom:1px solid #d5d5d5;} ul.audio-links li {float:left;width:100%;background:url(../images/ui/backgrounds/bg_dl-program.gif) right top no-repeat #e6e6e6;border-top:1px solid #d5d4d4;} ul.audio-links li:hover {background-image:url(../images/ui/backgrounds/bg_dl-program-h.gif);} ul.audio-links li:hover span {background-image:url(../images/ui/backgrounds/bg_dl-program-h.gif);} ul.audio-links li span {float:left;padding-right:1px;background:url(../images/ui/backgrounds/bg_dl-program.gif) left top no-repeat;padding-left:9px;} ul.audio-links li a {float:left;width:230px;} ul.audio-links li a:hover {text-decoration:none;} ul.audio-links li span a b {font-weight:bold;float:left;font-size:1.1em;line-height:1.3em;color:#333;text-decoration:none;padding-top:0.4em;padding-bottom:0.4em;} ul.audio-links li span a:hover b {color:#dd3519;text-decoration:none;} #main ul.audio-links a.audio {padding-right:0;background-image:none;background-position:right center;background-repeat:no-repeat;} #main ul.audio-links a.audio:hover {background-image:none;} #main ul.audio-links a.audio b {cursor:pointer;padding-right:16px;background-image:url(../images/ui/ico/audio.gif);background-position:right center;background-repeat:no-repeat;} #main ul.audio-links a.audio:hover b {background-image:url(../images/ui/ico/audioh.gif);} a.download { clear: both; padding-left:16px; background-image:url(../images/ui/ico/down.gif); background-position:left center; background-repeat:no-repeat; } a.download:hover {background-image:url(../images/ui/ico/down-h.gif);} /* Dl.text */ dl.text {margin:25px 0;font-size:1.1em;line-height:1.2em;} dl.text dt {float:left;clear:left;width:160px;color:#999;font-weight:bold;padding:0.2em 0;} dl.text dd {float:left;width:300px;padding:0.2em 0;} /* 2.4 Footer -----------------------------------------------------------------------------------------------*/ #main ul.menucols {} #main ul.menucols li {float:left;width:158px;} #main ul.menucols li h3 {display:block;height:23px;line-height:23px;padding-left:19px;color:#000;background:url(../images/ui/backgrounds/bg_menucol-h2.gif) top left repeat-x #e7e7e7;font-size:1.1em;border-left:1px solid #fcfcfc;border-right:1px solid #dfdede;border-top:1px solid #e6e6e6;border-bottom:1px solid #d5d4d4;text-transform:none;letter-spacing:0;} #main ul.menucols li li {clear:left;} #main ul.menucols li li a {float:left;width:125px;font-size:1.1em;line-height:1.36em;padding:4px 10px 4px 20px;background:url(../images/ui/backgrounds/bg_dots.gif) bottom left repeat-x;color:#666;} #main ul.menucols li li a:hover {color:#dd3519;text-decoration:none;} #main ul.menucols li li.meer {text-align:right;} #main ul.menucols li li.meer a {background:url(../images/ui/ico/arro.gif) right center no-repeat;} #main ul.menucols li li.meer a:hover {background-image:url(../images/ui/ico/arro-h.gif);} #footer .container {text-align:center;} #footer ul {margin:0 auto;} #footer ul li {display:inline;} #footer ul li a {line-height:40px;font-size:1.1em;padding:0 15px 0 14px;background-position:left center;background-repeat:no-repeat;background-image:url(../images/ui/footer-sep.gif);} #footer ul li.first a {background:none;} #footer ul li a:hover {text-decoration:none;color:#fff;} /* Added classes */ a.feed-icon { float: right; } div.square_banner { text-align: center; padding: 1em;} div.square_banner span {color: #999; display: block; font-size: 11px; margin-bottom: 4px;} div.flag_form { display: none;} p#question { font-size: 130%; font-weight: bold;} div.feedback { margin: 0 0 1em 9px; font-size: 110%; } div#rtn_widget { padding-bottom: 1em;} div#pbcn-background-bar { height: 29px; background:transparent url('http://balk.omroep.nl/centrale-navigatie/images/bar/bar-background-middle-unused.gif') repeat-x scroll 0 0;} div#pbcn-container-bar { margin:0 auto; width:960px; } /* popup styles */ /* Wrappers */ body.popup #main {font-size: 10px;background:#fff url(../images/ui/bg_body-popup.gif) bottom left repeat-x;height:100%;} body.popup .container {width:766px;text-align:left;} body.popup #main {padding-bottom:20px;} body.popup div#header { background:url(../images/ui/bg_header-popup.gif) top left repeat-x;margin-bottom:6px;} body.popup div#header .container {height: 101px;} /* Header */ body.popup div#header .logo {top:2px;left:6px;} body.popup div#header .logo a {text-indent:-9999px;} body.popup div#header .logo a, body.popup div#header .logo span {width:220px;height:98px;} body.popup div#header .logo span {background-image:url(../images/ui/logo-popup.gif);} body.popup div#header .luister-live {top:33px;right:11px;left:auto;} /* Content */ body.popup #content {float:left;padding:21px 19px 19px 19px;width:338px;border:1px solid #bfbfbf; min-height:254px;background:#fff;} * html body.popup #content {height:254px;} body.popup #content h3 {padding:4px 12px;background:url(../images/ui/backgrounds/bg_dots.gif) bottom left repeat-x;margin:0 0 17px 0;} /* Promo-box */ body.popup .promo-box {float:right;width:380px;padding-top:22px;text-align:center;} body.popup .promo-box .promo {margin:0 auto;} body.popup .promo-box .promo img {padding:1px 1px 0 1px;background:#fff;border:1px solid #bfbfbf;} /* layouts/mediaplayer */ div#player_wrapper { border:1px solid #030303; background:#2f2f2f url(../images/ui/bg_player-wrapper.gif) top left repeat-x; padding:13px 10px 13px 10px; } div#player_wrapper #player {border-top:1px solid #000000;border-bottom:1px solid #6a6a6a;min-height:20px;} div#player_wrapper #player span {float:left;} /* layouts/green_hornet */ body#green_hornet {background-image: url(../images/ui/backgrounds/bg_green_hornet.gif);} body#green_hornet #green_content {width: 367px;} body#green_hornet #green_content h1 {color: white; font-size: 10px; text-transform: uppercase; font-weight: bold; height: 27px; line-height: 27px;} body#green_hornet #green_content h4 {color: white; background-image: url(../images/ui/backgrounds/green_stelling.gif); width: 330px; height: 23px; margin-top: 12px; padding: 12px 0 0 0;} body#green_hornet #green_content ul {margin: 12px 0 0 0;} body#green_hornet #green_content li {float: left; margin-left: 12px;} body#green_hornet #green_content p.right { clear: left;} /* Luister Selection form */ form#luister_selection {} form#luister_selection fieldset {padding:4px 0;} form#luister_selection label {clear:both;display:block;color:#57a827;line-height:14px;margin:7px 0 0 0;padding:4px 0;text-transform:uppercase;font-weight:bold;} form#luister_selection select {font-family: Verdana,Geneva,Kalimati,Tahoma,sans-serif;font-size:11px;height:20px;width:212px;} form#luister_selection select.hour {float:left;margin:0 11px 0 0;width:80px;} form#luister_selection input.buttonimg { position: relative; top: -2px; left: 55px;} /* layouts/radioplayer */ body#radioplayer {background: white; text-align: left; font-size: 70%;} body#radioplayer div#content { width: auto; float: none;} body#radioplayer h3 span {text-transform: none; color: #666; float: right; font-weight: normal;} body#radioplayer li a {color: #666;} /* layouts/verkiezingskaravaan */ body#verkiezingskaravaan #main > a img {margin: 20px 0 30px 0;} /* 3. UNIQUE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 2.1 Tourspel -----------------------------------------------------------------------------------------------*/ /* body.tourspel #navigation {width:670px;left:280px;background-image:url(../images/ui/backgrounds/bg_nav_tourspel.gif);} */ body.tourspel #header .motto {width:184px;height:26px;top:47px;left:221px;} body.tourspel #header .motto span {background-image:url(../images/ui/motto-tourspel.gif);} body.tourspel #sidebar {float:right; width:220px; height:140px; background:#FFF url(../images/ui/backgrounds/bg_tourdefrance.png) 50% 0 no-repeat;} body.tourspel #content {float:left;width:720px;} body.tourspel #content #main-content {float:right;width:570px;} .tourspel-main {position:relative; top:-10px; border-bottom:1px solid #e0e0e0; background:#ffc20e url(../images/ui/backgrounds/bg_tourspel-main.png) 50% 0 no-repeat;} .tourspel-main .container {height:125px;padding-top:30px;} .tourspel-main h3 {position:relative;margin:0 0 23px 81px;width:192px;height:52px;text-align:center;line-height:52px;} .tourspel-main h3 span {position:absolute;top:0;left:0;width:100%;height:100%; background:url(../images/ui/txt_tourspel.png) 0 0 no-repeat;} .tourspel-main h4 {float:left;font-size:22px;line-height:50px;padding:0 14px;color:#fff;font-weight:normal;letter-spacing:2px;} .tourspel-main ul {float:left;} .tourspel-main ul li {float:left;} .tourspel-main ul a {float:left;font-size:20px;line-height:50px;color:#37820a;width:37px;text-align:center;font-weight:normal;text-shadow: 1px 1px 1px #333333;} .tourspel-main ul a:hover, .tourspel-main ul a.active {text-decoration:none; color:#fff;} .tourspel-main ul a:hover {text-decoration: underline;} /* Greenbox */ #main .box-green {background-color:#eaf5e5;margin:3px 0;} #main .box-green .dots {height:1px;margin:0;} #main .box-green .inner {padding:15px 20px;} #main .box-green .inner .dots {height:7px;} /* Simple form */ #main form.simple {margin:15px 0;} #main form.simple ol li {clear:both;padding-top:8px;} #main form.simple label {float:left;width:125px;text-align:right;padding:0 15px 0 0;line-height:22px; text-transform:uppercase; color:#dd3519;font-size:1.1em; font-weight:bold; letter-spacing:1px; cursor:pointer;} #main form.simple input.password, #main form.simple input.text {font-size:12px;height:14px; padding:4px 5px 4px 10px;width:305px;} #main form.simple li.checkbox {padding-left:140px;} #main form.simple li.checkbox input {float:left;} #main form.simple li.checkbox label {width:auto;padding:0 0 0 5px;color:#000; text-transform:none; font-weight:normal; letter-spacing:normal; line-height:19px;} #main form.simple fieldset.submit {clear:both;padding-top:30px;padding-left:140px;} /* Buttons */ #main button.forward {float:left;border:none;background-color:transparent;padding:0;text-align:left; height:32px; overflow:hidden; width:104px;position:relative;cursor:pointer;} #main button.forward span {float:left;padding-right:28px;padding-left:14px;height:34px;line-height:34px;width:62px;color:#fff; font-weight:normal; background-image:url(../images/ui/backgrounds/btn_forward.png); background-position:50% 50%; background-repeat:no-repeat;cursor:pointer;} /* Inner footer */ #content-footer {clear:both;margin:0 0 18px; padding-top:18px;} #content-footer ul {background-color:#d6ebcc; height:35px; padding-left:154px;} #content-footer ul li {float:left;background-image:url(../images/ui/backgrounds/bg_content-footer-sep.gif);background-position:0 50%; background-repeat:no-repeat;} #content-footer ul li:first-child {background:none;} #content-footer ul a, #content-footer ul span {float:left;line-height:35px;padding:0 8px; font-size:1.2em; color:#000;} #content-footer ul a:hover {text-decoration:underline;} #content-footer ul li.active {font-weight:bold; cursor:default; text-decoration:none;} /* Statische page */ #main .statische {font-size: 12px;} #main .statische h1 {padding:0 9px;} #main .statische h3 {margin:7px 0;} #main .statische p {margin:5px 0 5px 0;padding:0 9px;} #main .statische ul li {list-style: disc; margin: 0 0 1em 1em;} /* Center graphic and caption */ #main .centergraphic {margin:24px 0 12px 0;text-align:center;} #main .centergraphic .caption {background-color:#d6ebcc;margin:0 0 9px 0;padding:6px 9px;} #main .centergraphic img {margin:0 auto;} /* Klassement */ #main .klassement {margin-left:80px;} #main .klassement .table-wrapper {border:1px solid #363d32;margin:4px 0;} #main .klassement table {width:100%;margin:0 0 30px 0;} #main .klassement table th {border-bottom:1px solid #3d6824;background-color:#449315;font-size:2.2em;line-height:1.13em;padding:10px; color:#fff; text-transform:uppercase; letter-spacing:2px; font-weight:normal;} #main .klassement table td {text-align:left; font-size:1.4em; line-height:22px;padding:4px 10px; background:url(../images/ui/dots-wide.gif) repeat-x left bottom;} #main .klassement table .odd td {background-color:#d7e6ce;} #main .klassement table td.pos {text-align:right; font-size:1.8em; font-weight:bold; color:#37820a;} #main .klassement table .punten {text-align:center;} #main .klassement table td.punten {font-weight:bold;} #main .klassement .caption {background-color:#d7e6ce;color:#000;font-size:1.1em;line-height:1.25em; padding:7px 14px; letter-spacing:1px; text-transform:uppercase; font-weight:bold;} /* Hints */ #main .hints-wrapper h3 {margin:0 0 4px 0;} #main ul.hints {background:url(../images/ui/backgrounds/bg_dots.gif) top left repeat-x; margin:0 0 24px 0;} #main ul.hints li {background:url(../images/ui/backgrounds/bg_dots.gif) bottom left repeat-x; padding:10px 10px;line-height:25px;} #main ul.hints li.active {background-color:#449315;color:#fff;border-width:1px 0;border-style:solid;border-color:#3d6824; background-image:none;} #main ul.hints li h2 {float:left; width:90px; padding:0 10px 0 0; font-size:2.2em;line-height:25px; margin:0; letter-spacing:2px; text-transform:uppercase; color:#7db75c;} #main ul.hints li h4 {float:left; font-size:1.2em; line-height:25px; width:120px; margin:0; letter-spacing:1px; text-transform:uppercase; color:#cc3300;} #main ul.hints li p {float:right; color:#999; font-size:1.4em; line-height:25px; width:470px;} #main ul.hints li.active h2, #main ul.hints li.active h4, #main ul.hints li.active p {color:#fff;} /* Hints - Reageer */ #reageer {background:url(../images/ui/backgrounds/bg_dots.gif) top left repeat-x; padding-top:1px;} #reageer fieldset {padding:10px 10px 10px;background:url(../images/ui/backgrounds/bg_dots.gif) bottom left repeat-x;} #reageer fieldset label {float:left;width:220px; text-align:right; letter-spacing:1px; font-size:1.1em; line-height:22px; color:#cc3300; text-transform:uppercase; font-weight:bold; cursor:pointer; padding:0 10px 0 0;} #reageer h2 { float:left; text-align:left; font-size:22px; line-height:22px; letter-spacing:2px; color:#7db75c; text-transform:uppercase; width:220px; padding:0 10px 0 0; margin:0;} #reageer .errorExplanation {margin: 1em 0 2em 0; padding: 0 0 0 10px;} #reageer .errorExplanation h2 {width: auto; text-transform: none;} #reageer p {clear:both; padding-top:8px; line-height:1.27em; font-size:1.1em; margin:0; width:600px; letter-spacing:1px;} #reageer fieldset li { clear:both; padding-top:10px;} #reageer fieldset input.text { float:left; padding:3px 5px 3px 10px; width:300px;} #reageer fieldset input.naam { width:170px; margin:0 10px 0 0;} #reageer fieldset input.straat { width:208px; margin:0 10px 0 0; } #reageer fieldset input.straatnr { width:65px; } #reageer fieldset .radios label {width:auto; white-space:nowrap; clear:none; padding:0 7px 0 0;} #reageer fieldset .radios input {float:left; margin-left:0; margin-right:14px;} #reageer fieldset.highlight {background-color:#eaf5e5;} #reageer fieldset.submit {padding-top:10px;padding-bottom:18px;} #reageer fieldset.submit h2 { line-height:27px; } #reageer fieldset.submit p {float:left; clear:none; width:220px; padding:0 15px 0 15px; line-height:27px; background-color:#97cb7d; font-size:1.2em;} #reageer fieldset.submit .buttons {clear:both;padding-top:20px;} #reageer fieldset.submit .buttons .back {float:left;} #reageer fieldset.submit .buttons .forward {float:right;} #reageer fieldset.hint_choices ol {margin-left: 230px;} #reageer fieldset.hint_choices label {float: none; text-transform: none; font-weight: normal; color: black;} #reageer fieldset.hint_choices label.error {float:right; color:red;} /* Back button */ #main button.back {float:left;border:none;background-color:transparent;padding:0;text-align:right; height:32px; overflow:hidden; width:104px;position:relative;cursor:pointer;} #main button.back span {float:left;padding-right:14px;padding-left:28px;height:34px;line-height:34px;width:50px;color:#fff; font-weight:normal; background-image:url(../images/ui/backgrounds/btn_back.png); background-position:50% 50%; background-repeat:no-repeat;cursor:pointer; }