/* Theme Name: Radio 6 - 2010 Theme URI: http://www.radio6.nl/ Description: Custom thema voor WPMU site radio6.nl Author: Space Babies Author URI: http://www.spacebabies.nl/ Version: 4.0.5 */ /********************************************************************************************** CSS on Sails Title: Radio6 Author: XHTMLized (http://www.xhtmlized.com/) Date: February 2010 *********************************************************************************************** 1. BASE 1.1 Reset 1.2 Accessibility Navigation & Hide 1.3 Clearfix 1.4 Default Styles 2. LAYOUT 2.1 Structure 2.2 Header 2.3 Content 2.3.1 Generic Styles 2.3.2 Main Content 2.3.3 Secondary Content 2.4 Sidebar 2.5 Footer 2.6 Side Advertising 3. INDIVIDUAL PAGES 3.1 VoorPagina 3.2 Programma 3.3 Programma Afievering 3.4 Concert Agenda 3.5 Gids & Gemist 3.6 Gallery 4. PLUG-INS 4.1 Nivo Slider ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1 Reset -----------------------------------------------------------------------------------------------*/ html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; } q { quotes: none; } q:before, q:after { content: ""; content: none; } a, ins, del { text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; } th, td { vertical-align: top; } th { text-align: left; } /* 1.2 Accessibility Navigation & Hide -----------------------------------------------------------------------------------------------*/ ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; } /* 1.3 Clearfix -----------------------------------------------------------------------------------------------*/ .clearfix:after, .maskedphoto:after, #featured-home:after, #content .box-play a:after, #wrapper:after, #content .post .meta:after, #content .actions:after, #content .vcalendar .vevent:after, #content .show .meta:after, #content .shows .show:after, #footer ul.navigation:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* 1.4 Default Styles -----------------------------------------------------------------------------------------------*/ body { background: #fff; color: #333; font: 62.5%/1.3 Geneva,Verdana,Kalimati,Tahoma,sans-serif; text-align: center; } hr { display: none; } strong { font-weight: bold; } em { font-style: italic; } del { text-decoration: line-through; } th { font-weight: normal; } address, cite, dfn { font-style: normal; } li { list-style: none; } abbr, acronym { border-bottom: 1px dotted #999; cursor: help; } input, textarea, select { font-family: "Arial", "Helvetica", sans-serif; } a { color: #59711D; text-decoration: none; } a:hover { text-decoration:underline; } a span {cursor:pointer;} /* 2. SITE-WIDE LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 2.1 Structure -----------------------------------------------------------------------------------------------*/ html,body {height:100%;} .container { width: 1000px; position: relative; margin: 0 auto; text-align: left; font-size: 1.2em; border-top:34px solid #fff;} #header {height:54px; position:relative; z-index: 2; background-color:#fff; } body {background-image:url(images/bg_body.png);background-repeat:repeat-y;background-position:top center;} .container {background-image:url(images/bg_body.png);background-repeat:repeat-y;background-position:top right;background-color:#fff;} #content { width: 745px; float: right; padding-right:14px; min-height:632px; position:relative; z-index: 1;} #content #content-head {margin:0 -15px 18px;width:775px;height:200px;position:relative;overflow:hidden;} .main-content {width:520px; float:left;} .secondary-content {width:210px; float:right;} .wide-content {clear:both;} #sidebar { width: 217px; float: left; padding-top:157px; } #side-advert {position:absolute; top:46px; padding-top:15px; width:120px; right: -135px;} #footer { clear: both; } /* Main Structure Backgrounds */ #header {background:#FFF url(images/bg_header.png) 0 0 no-repeat;} /* 2.2 Header -----------------------------------------------------------------------------------------------*/ /* Logo */ #header .site-name, #header .site-name a, #header .site-name span { display: block; overflow: hidden; width: 217px; height: 133px; } #header .site-name { position: absolute; top:64px; left:0; } #header .site-name span { background: url(images/logo.png) no-repeat; position: absolute; top: 0; left: 0; z-index: 10; } /* Navigation */ #navigation {position:relative;height:46px;float:left;width:790px;;} #navigation ul {position:absolute;top:0;left:1px;width:789px;} #navigation li {float:left;padding-bottom:0px;height:46px;} #navigation li:hover, #navigation li.active {padding-bottom:18px;background:url(images/bg_nav-hover.png) 50% 0 no-repeat;} #navigation a {float:left;position:relative;text-align:center;font-size:14px;color:#000;padding:13px 0;height:20px;line-height:20px;overflow:hidden;} #navigation a:hover {color:#aa174d;text-decoration:none;} #navigation li.active a, #navigation li.active a:hover {color:#000;cursor:default;} #navigation a span {position:absolute;top:13px;left:0;width:100%;height:20px;background-repeat:no-repeat;background-color:transparent;background-image:url(images/navigation.png);} #navigation .active a span {cursor:default;} /* Navigation Image Replacement */ /* Dimensions */ #nav_home a {width:61px;} #nav_over a {width:110px;} #nav_gids a {width:120px;} #nav_djs a {width:50px;} #nav_prog a {width:182px;} #nav_arti a {width:100px;} #nav_conc a {width:145px;} /* Normal State */ #nav_home span {background-position: 0 0;} #nav_over span {background-position: -61px 0;} #nav_gids span {background-position:-180px 0;} #nav_djs span {background-position:-310px 0;} #nav_prog span {background-position:-350px 0;} #nav_arti span {background-position:-519px 0;} #nav_conc span {background-position:-619px 0;} /* Hover State */ #nav_home a:hover span {background-position: 0 -20px;} #nav_over a:hover span {background-position: -61px -20px;} #nav_gids a:hover span {background-position:-180px -20px;} #nav_djs a:hover span {background-position:-310px -20px;} #nav_prog a:hover span {background-position:-350px -20px;} #nav_arti a:hover span {background-position:-519px -20px;} #nav_conc a:hover span {background-position:-619px -20px;} /* Active State (same as normal) */ #nav_home.active span, #nav_home.active a:hover span {background-position: 0 0;} #nav_over.active span, #nav_over.active a:hover span {background-position: -61px 0;} #nav_gids.active span, #nav_gids.active a:hover span {background-position:-180px 0;} #nav_djs.active span, #nav_djs.active a:hover span {background-position:-310px 0;} #nav_prog.active span, #nav_prog.active a:hover span {background-position:-350px 0;} #nav_arti.active span, #nav_arti.active a:hover span {background-position:-519px 0;} #nav_conc.active span, #nav_conc.active a:hover span {background-position:-619px 0;} /* Search Form */ #cse-search-box {float:right;padding:10px 9px 0 0;width:201px;} #cse-search-box label {position:absolute;left:-999em;} #cse-search-box input {float:right;} #cse-search-box input.text {float:left;margin:2px 3px 0 0;padding:3px 5px 3px 10px;width:153px;border:1px solid #999;color:#333;} #cse-search-results iframe { width: 510px; } /* 2.3 Content -----------------------------------------------------------------------------------------------*/ #content {} #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-weight:bold;} #content h1 {font-size:2em;line-height:1.5em;} /* 24/36 */ #content h2 {font-size:24px;line-height:24px;font-weight:700;} /* 24/24 */ #content h3 {font-size:1.5em;line-height:1.22em;} /* 18/22 */ #content h4 {font-size:1.33em;line-height:1.125em;} /* 16/18 */ #content h5 {font-size:1.25em;line-height:1.2em;font-weight:normal;} /* 15/18 */ #content h6 {font-size:1.16em;line-height:1.28em;} /* 14/18 */ #content h2 {margin-bottom:12px;} #content h4 {margin-bottom:9px;} #content h4 a {color:#000;} #content h4 a:hover {color:#5f8816; text-decoration:none;} #content p {line-height:1.5em;margin-bottom:9px;} #content p.tags {font-style:italic;font-size: 0.91em;line-height:1.63em; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; } #content .alignleft {float:left; margin:5px 15px 5px 0;} #content .alignright {float:right; margin:5px 0 5px 15px;} /* Lists */ #content ul {} #content ul li {background-image:url(images/bull.png);background-repeat:no-repeat;background-position:0 7px;font-size:1em;line-height:1.5em;padding:0 0 0 10px;margin:0 0 4px 0;} #content ul.links li a {color:#000;text-decoration:none;} #content ul.links li:hover {background-image:url(images/bull-h.png);} #content ul.links li:hover a {color:#5f8816;} #content ul.programma li {background:none;font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-size:1.33em;line-height:1.125em;margin:0 0 8px 0;padding:0;} #content ul.programma li a {color:#000;text-decoration:none;} #content ul.programma li a:hover {color:#5f8816;} #content ul.strong li {font-weight:bold;background-image:url(images/bull-big.png);background-position:0 6px;} #content ul.strong li a {color:#000; text-decoration:none;} #content ul.strong li a:hover {color:#5f8816;} /* Tables */ #content table {width:100%; font-family: Arial, "Helvetica Neue", Helvetica, Verdana, sans-serif;} #content table thead th {font-size: 1.33em;line-height:1.125em;padding:5px; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-weight:normal;color:#2E4010;} #content table tbody td {color:#000;background-image:url(images/dots-g.png);background-position:0 0;background-repeat:repeat-x;padding:5px;line-height:18px;} #content table tbody tr:first-child td {background-image:none;} #content table tbody td a.imp, #content table tbody td span.imp {font-weight:bold;color:#000;text-decoration:none;} #content table tbody td a.imp:hover {color:#4C6A19;} #content table tbody td span.small {font-size: 0.83em;line-height:1.8em;color:#666;} #content table.calendar {margin:0 0 25px 0;} #content table.calendar th {padding:0;border:1px solid #e0e4e5;} #content table.calendar th abbr, #content table.calendar th span {display:block;padding:8px 20px 8px 20px;} #content table.calendar th abbr {border:none;} #content table.calendar td {padding:0;background-image:none;border:1px solid #e0e4e5;} #content table.calendar td a, #content table.calendar td span {display:block;padding:0 20px;} #content table.calendar td span {color:#666;} #content table.calendar td span.current {color:#fff;background-color:#4d6a1a;background-repeat:no-repeat;background-position:0 50%;background-image:url(images/bg_calendar-current.png);font-weight:bold;} #content table.calendar td span.disabled {color:#ccc;} #content table.calendar td a {font-weight:bold;color:#3E5314; text-decoration:none;} #content table.calendar td a:hover {background-color:#4D6A1A;color:#fff;} /* Events */ #content .vevent {margin:0 0 8px;} #content .vevent .dtstart {display:block;border:none;color:#4C6A19;font-size:0.91em; line-height:1.63em;background-image:url(images/dots-g.png);background-position:0 100%;background-repeat:repeat-x;margin:0 -15px 4px -15px;padding:2px 15px;} #content .vevent .hide {display:none;} #content .vevent .summary {display:block;font-weight:bold;margin-bottom:2px;} #content .vevent .location {display:block;font-size: 0.91em;line-height:1.63em;font-style:italic;font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;} /* Buttons */ #content div.actions {margin:5px 0 15px 15px;} #content a.btn_listen {float:left;display:inline;height:46px;padding-left:15px;color:#fff; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; text-decoration:none; background-color:#4D6A1A;background-image:url(images/btn_listen.png);background-repeat:no-repeat;background-position:left top; font-size: 1.25em;margin-right:15px;} #content a.btn_listen:hover {background-color:#3f5515;} #content a.btn_listen span {float:left;line-height:46px; font-weight:normal;background-image:url(images/btn_listen-audio.png);background-repeat:no-repeat;background-position:right top;padding-right:40px;} #content a.btn, #content a.btn-fluid {float:left;font-size: 1.25em; line-height:30px;color:#000; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; width:192px;padding:0 10px 0 15px; margin:0 15px 0 0; background:#FFF url(images/bg_button.png) 0 0 no-repeat; text-decoration:none;} #content a.btn-fluid:hover, #content a.btn:hover {color:#4C6A19;} #content a.btn-fluid {width:auto; padding:0 1px 0 0; background-image:url(images/dashg-ver.png);background-position:100% 0;background-repeat:repeat-y; } #content a.btn-fluid span {float:left;padding:0 9px 0 15px;background:url(images/bg_button-long.png) 0 0 no-repeat;} #content a.btn-playlist {background-color:#dae1d1;} /* Form buttons */ #content button {font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;font-size:14px;color:#000;height:28px;background-color:transparent;background-position:0 0;background-repeat:no-repeat;border:none;cursor:pointer;padding:0 0 0 15px;width:200px;text-align:left;background-image:url(images/bg_submit.png);} #content button:hover {background-position:0 -28px;color:#fff;} #content button.reset {color:#666;} #content button.reset:hover {color:#fff;} /* 2.3.1 Generic Elements -----------------------------------------------*/ /* Content head */ #content-head img {float:left;} #content-head h1 {position:absolute;top:50px;left:32px;font-size:48px;font-weight:bold;line-height:1em;color:#fff;} #content-head h2 {position:absolute;top:109px;left:32px;font-size:19px;font-style:italic;line-height:1em;color:#fff;} #content-head .date {position:absolute;left:588px;top:113px;padding-left:28px;line-height:18px;font-size: 1.16em;font-style:italic;color:#fff;background-image:url(images/arr-right.png);background-position:left center;background-repeat:no-repeat; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;} #content-head a {color: white !important;} /* Masked photo - with surrounding dashes */ .maskedphoto {position:relative;} .maskedphoto img {float:left;} .maskedphoto span.n {position:absolute;top:0;left:0;width:100%;height:1px;background-repeat:repeat-x;background-image:url(images/dash-hor.png);} .maskedphoto span.s {position:absolute;bottom:0;left:0;width:100%;height:1px;background-repeat:repeat-x;background-image:url(images/dash-hor.png);} .maskedphoto span.w {position:absolute;top:0;left:0;height:100%;width:1px;background-repeat:repeat-y;background-image:url(images/dash-ver.png);} .maskedphoto span.e {position:absolute;top:0;right:0;height:100%;width:1px;background-repeat:repeat-y;background-image:url(images/dash-ver.png);} /* Boxes */ .box {margin-bottom:15px;padding:0 15px 0 15px;} .box .maskedphoto {margin:0 -15px 0 -15px;} .box .content {padding:10px 15px 5px 15px;margin:0 -15px 0 -15px;} .dash-w {background-image:url(images/dashg-ver.png);background-position:0 0;background-repeat:repeat-y;} .dash-e {background-image:url(images/dashg-ver.png);background-position:100% 0;background-repeat:repeat-y;} .dash-n {background-image:url(images/dashg-hor.png);background-position:0 0;background-repeat:repeat-x;} .dash-s {background-image:url(images/dashg-hor.png);background-position:0 100%;background-repeat:repeat-x;} .padded {padding:10px 15px;} /* Dashed boxes */ .box-dashed .content {background-position:0 100%;background-repeat:no-repeat;} .box-dashed:hover .content {background-color:#ecf1e5;} .main-content .twocol .col2 .box-dashed .content {background-image:url(images/bg_dashed-content-295.png);} .main-content .twocol .col1 .box-dashed .content, .secondary-content .box-dashed .content {background-image:url(images/bg_dashed-content-210.png);} /* Promo boxes */ .box-promo .arrowhead {margin:0 -15px 0 -15px;padding-right:1px;background-color:#4d6a1a;background-image:url(images/dash-ver.png);background-position:100% 0;background-repeat:repeat-y;} .box-promo:hover .arrowhead {background-color:#3a5014;} .box-promo .arrowhead h3 {color:#fff;background-image:url(images/bg_arrowhead.png);background-position:0 0;background-repeat:no-repeat;} .box-promo .arrowhead h3 a {display:block;padding:10px 10px 10px 15px;color:#fff; text-decoration:none;} /* Dots above boxes */ #content .box-dotsep {background:url(images/dots-g.png) 0 0 repeat-x;padding-top:8px;} #content .box-dotsep h2 {margin-top:8px;} /* Spaced boxes */ #content .box-spaced {margin:30px 0;} /* Play boxes */ #content .box-play {padding:0;} #content .box-play a {display:block;position:relative; text-decoration:none;} #content .box-play a img {float:left;} #content .box-play a span.audio, #content .box-play a span.play {width:92px;height:92px;background-position:0 0;background-repeat:no-repeat;position:absolute;top:40px;left:59px;} #content .box-play a span.audio {background-image:url(images/play-green-audio.png);} #content .box-play a span.play {background-image:url(images/play-green.png);} #content .box-play a:hover span.audio, #content .box-play a:hover span.play {background-position:0 -92px;} #content .box-play span.title {position:absolute;bottom:0;left:0;width:190px;padding:4px 10px;line-height:1.5em;color:#fff;background-repeat:repeat;background-position:0 0;background-image:url(images/dark-green-50.png);} #content .box-play a:hover span.title {background-image:url(images/dark-green-75.png);} #content .box-play span.title strong {display:block;} /* Collapsible boxes */ #content div.collapsible {} #content div.collapsible .head {background-color:#4d6a1a;background-image:url(images/bg_lightdash-se.png);background-repeat:no-repeat;background-position:100% 0;padding-right:1px;position:relative;} body.js #content div.collapsible .head {cursor:pointer;} #content div.collapsible .head:hover {background-color:#3a5014;} #content div.collapsible .head h4 {color:#fff;background-image:url(images/bg_head.png);background-repeat:no-repeat;background-position:0 0;padding:10px 0 10px 15px;margin:0;} #content div.collapsible .head span.arr {position:absolute;right:20px;top:16px;width:14px;height:7px;background-position:0 0;background-repeat:no-repeat;} #content div.collapsible .head-closed span.arr {background-image:url(images/arrow-down.png);} #content div.collapsible .head-open span.arr {background-image:url(images/arrow-up.png);} /* 2.3.2 Main Content -----------------------------------------------*/ .main-content .twocol .col1 {float:left;width:210px;} .main-content .twocol .col2 {float:right;width:295px;} .main-content div.player p {margin: 0; font-size: 90%; font-style: italic; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif} /* 2.3.3 Secondary Content -----------------------------------------------*/ /* Blog Menu */ #content ul.blogmenu {padding-left:15px;} #content ul.blogmenu > li {padding:0;background-image:none;margin:0 0 24px 0;} #content ul.blogmenu li h3 {line-height:1em;} #content ul.blogmenu li ul {} #content ul.blogmenu li ul li {margin:0;} #content ul.blogmenu li ul li a {color:#333; text-decoration:none;} #content ul.blogmenu li ul li a:hover {color:#59711D;} #content ul.blogmenu li select {background-color:#ccc;border:1px dashed #fff;padding:5px 10px 5px 10px;width:180px;margin:8px 0 0 0;} #content ul.blogmenu a.sponsor {display:block;margin-top:18px;} /* 2.4 Sidebar -----------------------------------------------------------------------------------------------*/ #sidebar {} /* Accordion */ #sidebar .accordion > li {overflow:hidden;} #sidebar .accordion > li {margin-bottom:9px;background-position:bottom left;background-repeat:no-repeat;background-image:url(images/bg_acc-content.png);background-color:#23050f;} #sidebar .accordion > li {margin-top:9px;} #sidebar .accordion > li > a.head { display: block; } #sidebar .accordion > li > a.head:hover { text-decoration: none; } #sidebar .accordion > li > .head {position:relative;z-index:2;height:46px;background-image:url(images/bg_acc-head.png);background-position:0 0;background-repeat:no-repeat;cursor:pointer;} #sidebar .accordion > li > .head h3 {font-size:21px;line-height:46px;padding:0 40px 0 10px;color:#fff;font-weight:normal;font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;background-position:right center;background-repeat:no-repeat; background-image:url(images/bg_acc_head-h3.png);} #sidebar .accordion > li > .head .arr {display:none;} #sidebar .accordion > li > .content {position:relative;z-index:1;display:none;margin:0 1px 0 1px;} #sidebar .accordion > li.active {} #sidebar .accordion > li.active > .head {cursor:default;} #sidebar .accordion > li.active > .head .arr {display:block;position:absolute;top:45px;left:100px;z-index:5;width:17px;height:10px;background-position:0 0;background-repeat:no-repeat;} #sidebar .accordion > li:hover > .head .arr {background-position:0 -10px;} #sidebar .accordion > li.active > .head h3 {} #sidebar .accordion > li.active > .content {display:block;} /* 2nd Level Accordion - Webkanalen */ #sidebar .accordion .accordion {margin:0 -1px;} #sidebar .accordion .accordion > li {margin:0 1px;background-image:url(images/dots.png);background-repeat:repeat-x;background-position:0 100%;background-color:#44091e;} #sidebar .accordion .accordion > li:hover {background-color:#88123D;} #sidebar .accordion .accordion > li:first-child > .head {} #sidebar .accordion .accordion > li > .head {height:37px;background-image:none;} #sidebar .accordion .accordion > li > .head > h4 {font-size:18px;line-height:37px;color:#fff; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; padding:0 39px 0 9px; margin:0 1px; font-weight:normal; background-position:right center;background-repeat:no-repeat;background-image:url(images/bg_acc2_head-h4.png);} #sidebar .accordion .accordion > li > .head .arr {display:none;} #sidebar .accordion .accordion > li > .content {display:none;} #sidebar .accordion .accordion > li.active {margin:0;position:relative;top:-1px;} #sidebar .accordion .accordion > li.active > .head {background-image:url(images/bg_acc2-head.png);background-color:#88123d;cursor:default;} #sidebar .accordion .accordion > li.active > .head .arr {display:block;position:absolute;top:36px;left:100px;z-index:5;width:17px;height:10px;background-position:0 0;background-repeat:no-repeat;background-image:url(images/bg_acc2-arr.png);} #sidebar .accordion .accordion > li.active > .head h4 {font-size:18px;padding:0 40px 0 10px;margin:0;background-image:none;} #sidebar .accordion .accordion > li.active > .head a.listen {background-image:url(images/bg_acc2_head-act-h4.png);background-position:right center;background-repeat:no-repeat;position:absolute;top:0;right:0;width:30px;height:37px;} #sidebar .accordion .accordion > li.active > .content {display:block;background-color:#23050F;background-image:url(images/bg_acc-content.png);background-position:0 100%;margin:0;} /* 2nd Level Video Accordion */ #sidebar .accordion .accordion-video {} #sidebar .accordion .accordion-video > li > .head {height:auto;padding:7px 16px 7px 16px;} #sidebar .accordion .accordion-video > li > .head p {color:#fff;line-height:18px;} #sidebar .accordion .accordion-video > li > .head p strong {display:block;} #sidebar .accordion .accordion-video > li.active {position:relative;background:none;top:0;} #sidebar .accordion .accordion-video > li.active:hover {background:none;} #sidebar .accordion .accordion-video > li.active > .content {height:215px;overflow:hidden;padding:0 1px 1px;background-image:url(images/dots.png);background-position:0 100%;background-repeat:repeat-x;background-color:transparent;position:relative;z-index:1;} #sidebar .accordion .accordion-video > li.active > .content a {} #sidebar .accordion .accordion-video > li.active > .content a span {position:absolute;top:40px;left:62px;width:92px;height:92px;background-position:0 0;background-repeat:no-repeat;} #sidebar .accordion .accordion-video > li.active > .content a span.play {background-image:url(images/play-red.png);} #sidebar .accordion .accordion-video > li.active > .content a span.audio {background-image:url(images/play-red-audio.png);} #sidebar .accordion .accordion-video > li.active > .content a:hover span {background-position:0 -92px;} #sidebar .accordion .accordion-video > li.active > .head {background-color:transparent;background-image:url(images/dark-red-50.png);background-repeat:repeat; position:absolute;bottom:1px;left:1px;z-index:2;width:183px;} /* More */ #sidebar .accordion .more {background-image:url("images/bg_acc-content.png");background-position:0 100%;background-color:#4d6a1b;margin:0 -1px;padding:0 0 1px 0;} #sidebar .accordion .more p {font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-weight:bold; color:#fff;margin:0 1px;} #sidebar .accordion .more p strong {display:block;background-color:#2e4010;line-height:36px;font-size:12px;padding:0 17px;height:36px;} #sidebar .accordion .more p a {display:block; font-size:16px;line-height:38px;background-color:#4d6a1b;background-image:url(images/dash.png);background-repeat:repeat-x;background-position:0 0;padding:0 17px;color:#fff;} /* Generic Links */ #sidebar .accordion ul.links {padding-top:7px;} #sidebar .accordion ul.links li {color:#fff;padding:7px 16px 9px 16px;background-image:url(images/dots.png);background-position:0 0;background-repeat:repeat-x;} #sidebar .accordion ul.links li:first-child {background-image:none;} #sidebar .accordion ul.links span.date {display:block;font-size:0.75em;line-height:1.8em;margin-bottom:9px;} #sidebar .accordion ul.links p {font-size:1em;line-height:1.5em; margin: 6px 0;} #sidebar .accordion ul.links p.nowplaying { font-size:75%;} #sidebar .accordion ul.links p.nowplaying strong { font-weight: normal; font-size: 110%;} #sidebar .accordion ul.links a {display:block;color:#fff;text-decoration:none;} #sidebar .accordion ul.links a:hover strong {text-decoration:underline;} /* Luister live */ #sidebar .accordion > li#acc-luister > .head {background-color:#aa174d;} #sidebar .accordion > li#acc-luister > .head .arr {background-image:url(images/bg_acc-luister-head-arr.png);} #sidebar .accordion > li#acc-luister:hover > .head {background-color:#80113a;} #sidebar .accordion > li#acc-luister.active > .head h3 {background-image:url(images/ico_luister.png);} /* Kijk live mee */ #sidebar .accordion > li#acc-kijk > .head {background-color:#aa174d;} #sidebar .accordion > li#acc-kijk:hover > .head {background-color:#80113a;} #sidebar .accordion > li#acc-kijk > .head h3 {background-image:url(images/tv_icon.png);} /* Webkanalen */ #sidebar .accordion > li#acc-webkanalen > .head {background-color:#670d2f;} #sidebar .accordion > li#acc-webkanalen > .head .arr {background-image:url(images/bg_acc-webkanalen-head-arr.png);} #sidebar .accordion > li#acc-webkanalen:hover > .head {background-color:#41061e;} #sidebar .accordion > li#acc-webkanalen {background-color:#44091E;} /* Luisterpaal */ #sidebar .accordion > li#acc-luisterpaal > .head {position:relative;z-index:2;background-color:#4c0b23;} #sidebar .accordion > li#acc-luisterpaal > .head .arr {background-image:url(images/bg_acc-luisterpaal-head-arr.png);} #sidebar .accordion > li#acc-luisterpaal:hover > .head {background-color:#280212;} #sidebar .accordion > li#acc-luisterpaal {background-color:#44091E;} #sidebar .accordion > li#acc-luisterpaal > .content {position:relative;z-index:1;background-color:#44091e;} /* 2.5 Footer -----------------------------------------------------------------------------------------------*/ #footer {padding-bottom:10px;border-top:40px solid #fff;} #footer {background-color:#dae1d1;background-image:url(images/bg_footer.png);background-position:50% 0;background-repeat:repeat-x;} #footer .container {position:relative;border:none;background-color:#dae1d1;background-image:url(images/bg_footer.png);background-position:50% 0;background-repeat:repeat-x;padding-top:1px;} #footer a.top {position:absolute;top:-8px;left:0; font-size: 1.16em; line-height:26px; padding:9px 5px 0 5px; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; text-decoration:none; color:#000; background-image:url(images/bg_footer-top.png);background-position:50% 0;background-repeat:no-repeat;} #footer a.top:hover {color:#4C6A19;} #footer ul.navigation {padding:10px 0 45px 0;margin:36px 0 0 225px;background-image:url(images/dots-w-vert-footer.png);} #footer ul.navigation > li {float:left;width:175px;padding:0 0 0 18px;} #footer ul.navigation h3 {font-size: 1.66em; line-height:1em; padding:4px 0; color:#fff; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-weight:bold;} #footer ul.navigation ul {} #footer ul.navigation ul li {} #footer ul.navigation ul li a { display:block;font-size: 1.16em; line-height:1.28em; padding:3px 0 3px 8px;font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; color:#3a5014; text-decoration:none; background-image:url(images/bull-h.png);background-position:0 9px;background-repeat:no-repeat;} #footer ul.navigation ul li a:hover {color:#000;background-image:url(images/bull.png);} #footer .copyright {position:absolute;bottom:0;left:0;font-size: 1.16em;line-height:1.28em; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-weight:normal; color:#000;} /* 2.6 Side Advertising -----------------------------------------------------------------------------------------------*/ /* ad */ .ad {text-align:center;} .ad span {display:block;font-size: 0.83em;line-height:1.4em;} /* 3. INDIVIDUAL PAGES ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 3.1 Voorpagina -----------------------------------------------------------------------------------------------*/ /* Featured */ #featured-home {margin-bottom:15px;} #featured-home .main-content p a {color: #23050f;} .featured {background-color:#4d6a1a;color:#fff;} .featured:hover {background-color:#3a5014;} .featured .content {padding:0 1px 1px 0;background-image:url(images/bg_lightdash-se.png);background-position:100% 100%;background-repeat:no-repeat;} .featured .content .inner {padding:15px 14px 1px 15px;background-image:url(images/bg_featured-w.png);background-repeat:no-repeat;background-position:0 -1px;} .featured h2 a {color:#fff;text-decoration:none;} /* 3.2 Programma -----------------------------------------------------------------------------------------------*/ #programmas h2 {clear: left;} /* Blog Post */ #content .post {padding:0 15px;margin:0 0 35px 0;} #content .post .meta {margin:0 -15px;padding:0 15px 9px 15px;background-image:url(images/dots-g.png);background-repeat:repeat-x;background-position:0 100%;margin-bottom:18px;} #content .post .meta .status {display:block;font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;font-weight:bold;font-style:italic;font-size: 1.25em;line-height:1.2em;color:#4C6A19;} #content .post .meta .date {float:left;font-size: 0.91em;line-height:18px;margin-right:4px;} #content .post .meta .time {float:left;font-size: 0.91em;line-height:18px; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-style:italic; color:#4C6A19;} #content .post .meta .author {float:right;font-size: 0.91em;line-height:18px;} #content .post h2 {font-size:1.75em;line-height:1.23em;padding:5px 0;margin:0 0 5px 0;} #content .post h2 a {color:#000;text-decoration:none;} #content .post h2 a:hover {color:#59711D;} #content .post h3 {margin-bottom: 1em;} /* Playlist */ #content .playlist {margin:18px 0;} #content .playlist .head {height:30px;padding:0 1px 0 0;background-image:url(images/dashg-ver.png);background-position:100% 0;background-repeat:repeat-y;background-color:#dae1d1;} #content .playlist .head h6 {font-weight:normal;line-height:30px;background-image:url(images/bg_button-long.png);background-repeat:no-repeat;background-position:0 0;padding:0 0 0 15px;} #content .playlist .content {padding:0 10px 0 10px;} #content .playlist .content table {} /* 3.3 Programma afievering -----------------------------------------------------------------------------------------------*/ /* Comments Form */ #content #commentform-wrapper {margin:0 0 9px 0; clear: both;} #content #commentform-wrapper .content {background-color:#dae1d1;} #content form.commentform input.text {background-color:#fff;border:1px solid #fff;padding:5px 5px 5px 5px;} #content form.commentform textarea {background-color:#fff;border:1px solid #fff;padding:5px 5px 5px 5px;width:448px;height:132px;margin:0 0 10px 0;} #content form.commentform button {float:left;} #content form.commentform button.reset {float:right;} /* Comments */ #content #comments {} #content #comments div.comment-meta > a {float:right;font-size: 0.83em;position:relative;top:-17px;} #content #comments h5 {background-image:url(images/bg_smallheading.png);background-position:0 0;background-repeat:no-repeat;width:207px;height:46px;line-height:46px;padding:0 5px 9px 5px;text-align:center;} #content ul.comments {} #content ul.comments li {background-image:url(images/dots-g.png);background-position:0 0;background-repeat:repeat-x;margin:0 0 16px 0;padding:8px 0 0 0;} #content ul.comments li:first-child {background-image:none;} #content ul.comments .meta {margin:0 0 9px 0;padding:0;background-image:none;} #content ul.comments .meta .date {float:left;font-size: 0.91em;line-height:1.63em; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;font-style:italic;} #content ul.comments .meta .date .time {color:#4C6A19;float:none;} #content ul.comments .meta .author {float:right;font-size: 0.83em;line-height:1.8em;} #content ul.comments p {font-size: 0.91em;line-height:1.63em;margin:0 0 9px 0; font-family: Arial, "Helvetica Neue", Helvetica, Verdana, sans-serif;} /* date - nav */ #content .archive-nav {position:relative;z-index:5;height:39px;margin:0 0 18px 0;} #content .archive-nav > ul {} #content .archive-nav > ul > li {position:relative;width:362px;height:39px;background-color:#4D6A1A;padding:0;background-image:url(images/bg_dropdown-trigger.png);background-position:0 0;background-repeat:no-repeat;line-height:39px; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;font-weight:bold;color:#fff;font-size: 1.33em;cursor:default;margin:0;} #content .archive-nav > ul > li:hover {background-color:#3f5515;} #content .archive-nav > ul > li strong {float:left;padding:0 15px;width:332px;} #content .archive-nav > ul > li.year {float:left;} #content .archive-nav > ul > li.month {float:right;} #content .archive-nav ul ul {position:absolute;top:39px;left:-999em;width:362px;} #content .archive-nav > ul > li:hover ul {left:0;} #content .archive-nav ul ul li {background-image:none;padding:0;margin:0;} #content .archive-nav ul ul li a {padding:2px 15px;display:block;font-size: 1.08em;line-height:1.38em;font-weight:normal;color:#fff;background-color:#4D6A1A; text-decoration:none;background-image:url(images/dots.png);background-position:0 0;background-repeat:repeat-x;} #content .archive-nav ul ul li:first-child a {background-image:none;} #content .archive-nav ul ul li a:hover {background-color:#3f5515;} #content .archive-nav ul ul a {} #content .archive-nav ul ul a:hover {} /* 3.4 Concert agenda -----------------------------------------------------------------------------------------------*/ /* hCalendar */ #content .vcalendar {padding:0 15px;} #content .vcalendar .vevent {margin:0 0 18px 0;} #content .vcalendar .vevent .event-main {float:left;width:520px;} #content .vcalendar .vevent .event-details {float:right;width:180px;} #content .vcalendar .vevent .dtstart {font-weight:bold;margin:0 -15px 18px -15px;} #content .vcalendar .vevent .summary {font-size:3em;line-height:1em;margin:0px;} #content .vcalendar .vevent .place {font-style:italic;margin:0 0 18px 0;} #content .vcalendar .vevent .description {color:#666;} #content .vcalendar .vevent .location {font-family: Arial, "Helvetica Neue", Helvetica, Verdana, sans-serif;font-style:normal;font-size:1em;} #content .vcalendar .vevent .vcard {color:#666;font-size:1em;line-height:1.5em;margin:0 0 9px 0;} #content .vcalendar .vevent .vcard .given-name {color: #aa174d; font-weight:bold;} #content .vcalendar .vevent .vcard .adr {} #content .vcalendar .vevent .vcard .adr .street-address {display:block;} #content .vcalendar .vevent .vcard .tel {} #content .vcalendar .event-details .actions {margin:0;} #content .vcalendar .event-details .actions .url {background-image:url(images/bg_button-180.png);width:155px;} /* 3.5 Gids & Gemist -----------------------------------------------------------------------------------------------*/ /* Shows */ table {} #content .shows {} #content .shows .show {margin:0 0 35px;} #content .show {padding:0 0 0 15px;} #content .show .meta {margin:0 0 0 -15px;padding:0 0 0 15px;background-image:url(images/dots-g.png);background-repeat:repeat-x;background-position:0 100%;font-size:0.91em;line-height:1.63em;} #content .show .meta .time {float:left;color:#4C6A19;font-weight:bold;} #content .show .show-main {float:left;width:490px;padding:15px 0 0 0;} #content .show .show-details {float:right;width:210px;} #content .show .show-main h2 {font-size:3em;line-height:1em;margin:0;} #content .show .show-main h2 a {color:#000;text-decoration:none;} #content .show .show-main h2 a:hover {color:#4d6a1a;} #content .show .show-main h5 {font-style:italic;margin:0 0 18px 0;color:#000;} #content .show .show-main h3 {font-size:1.75em;line-height:1em;margin:0 0 18px 15px;font-weight:normal;} #content .show .show-main .actions {} #content .show .show-main .actions .btn {float:right;margin:0;} #content .show .show-main .actions .btn-playlist {float:left;} #content .show .show-details {} #content .show .show-details .avatar {position:relative;margin:0 0 9px -15px;width:225px;} #content .show .show-details .avatar img {} #content .show .show-details .avatar span.arr {position:absolute;top:24px;left:0;width:6px;height:12px;background-image:url(images/arr-right.png);background-position:0 0;background-repeat:no-repeat;} #content .show .show-details .actions {margin:0;} #content .show .show-details .btn-fluid span {width:185px;margin:0 0 9px 0;} #content .show .show-details .btn_listen span {width:155px;margin:0 0 9px 0;} /* 3.6 Gallery -----------------------------------------------------------------------------------------------*/ #content.gallery .gallery-item {width: 160px; height:160px; float: left; margin: 0 26px 90px 0;} #content.gallery .gallery-item h4, #content.gallery .gallery-item p {margin: 0 !important;} #content.gallery .gallery-item p {color: #666;} #content.gallery .gallery-item p.url {font-size: 90%; font-style: italic; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif} #content.gallery .gallery-image {width: 140px; height: 140px; background-color: #416628;} .addthis_container { clear: both; margin-top: 2em; margin-bottom: 1em; } /* 4. PLUG-INS ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 3.1 Nivo Slider -----------------------------------------------------------------------------------------------*/ /* Nivo Slider - base */ .nivoSlider{position:relative}.nivoSlider img{position:absolute;top:0px;left:0px}.nivoSlider a.nivo-imageLink{position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none}.nivo-slice{display:block;position:absolute;z-index:50;height:100%}.nivo-caption{position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:1;width:100%;z-index:89}.nivo-caption p{padding:5px;margin:0}.nivo-caption a{display:inline !important}.nivo-html-caption{ display:none}.nivo-directionNav a{position:absolute;top:45%;z-index:99;cursor:pointer}.nivo-prevNav{left:0px}.nivo-nextNav{right:0px}.nivo-controlNav a{position:relative;z-index:99;cursor:pointer}.nivo-controlNav a.active{font-weight:bold} /* Nivo Slider Custom Styling */ #slider-wrapper { margin: 0 0 20px; padding: 1px 0 0 0; background-image: url(images/dashg-hor.png); background-position: 0 0; background-repeat: repeat-x; } #slider-wrapper2 { padding: 0 1px 0 0; background: url(images/dashg-ver.png) 100% 0 repeat-y; } #slider-wrapper3 { height:317px; width:743px; padding: 0 0 0 1px; background: url(images/dashg-ver.png) 0 0 repeat-y; } #slider { position:relative; width:743px; height:282px; background:url(images/loading.gif) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { display:block; } .nivo-controlNav { position:absolute; left:0px; bottom:-35px; width: 743px; height: 34px; line-height: 34px; padding: 0 0 1px; background: #d9e1d0 url(images/dashg-hor.png) bottom left repeat-x; } .nivo-controlNav { display: none; } #main-nivo-controlNav { display: block; } .nivo-controlNav a { display:block; width: 185px; height: 34px; padding: 0; float:left; color: #4d6a1b; text-align: center; background: url(images/dashg-ver.png) 0 0 no-repeat; text-decoration: none; } .nivo-controlNav a span.t { display: block; width: 175px; height: 34px; padding: 0 5px; background: url(images/dashg-hor.png) 0 0 repeat-x; } .nivo-controlNav a:first-child { width: 188px; background-image: none; } .nivo-controlNav a:first-child span.t { padding-left: 7px; padding-right: 6px; } .nivo-controlNav a:hover { text-decoration: none; } .nivo-controlNav a.active, .nivo-controlNav a.active:hover { font-weight: normal; background-color: #2e4010; color: #fff; cursor: default; text-decoration: none; } .nivo-controlNav a.active span { background-image: none; } #content .nivo-caption { background: url(images/bg_slider-caption.png); text-shadow:none; color: #fff; } #content .nivo-caption p { padding: 0 0 12px; margin: 0; } #content .nivo-caption p a { text-decoration: none; } #content .nivo-caption strong { display: block; font-size: 21px; line-height: 24px; padding: 19px 14px 0; background: url(images/dash-hor.png) 0 0 repeat-x; } #content .nivo-caption span.desc { display: block; padding: 0 14px; line-height: 16px; height: 18px; overflow: hidden; } #content .nivo-caption a { color: #fff; text-decoration:underline; } #content .nivo-caption a:hover { text-decoration: none; }