/**************************************************************************************************************** * Copyright 2011 HotHouse Interactive :: www.hothouse.com.au :: All Rights Reserved * ------------------------------------------------------------------------------------------------------------- * * GLOBAL STYLE SHEETS * Version: 0.2 ***************************************************************************************************************** 1. CSS Reset 2. General 3. Layout 4. Forms 5. Widgets 6. Individual Pages 7. Clearing ****************************************************************************************************************/ /* -------------------------------------------------------------------------------------------------------------- CSS Reset -------------------------------------------------------------------------------------------------------------- */ body,html,form,p,ul,li,ol,img,h1,h2,h3,h4,h5,h6,dl,dd,dt,blockquote{margin:0;padding:0}li{list-style:none}body,html{width:100%}body{font-size:62%}a img{border:none}a{text-decoration:none}img{border:medium none;display:block}acronym,abbr{border-bottom:medium none}.access{display:block;height:0;overflow:hidden;position:absolute;width:0;z-index:-1}header,article,footer,section,nav,address,menu{display:block} /* -------------------------------------------------------------------------------------------------------------- General -------------------------------------------------------------------------------------------------------------- */ /* ----- Typography ----- */ body {font-size: 12px; color: #fff;} body, input, select, textarea {font-family: Arial, Helvetica, sans-serif;} /* ----- Default ----- */ strong, .bold {font-weight: bold;} em, q {font-style: italic;} small, .small {font-size: 0.9em;} .normal {text-transform: none;} big, .big {font-size: 1.1em;} sup {position: relative; top: -3px; font-size: 0.8em;} sub {font-size: 0.8em;} del, strike {text-decoration: line-through;} hr {height: 0; border: none; border-bottom: 1px solid #ccc;} .hide {display: none;} /* ----- Paragraph ----- */ p {padding-bottom: 15px;} p.last {padding-bottom: 0;} /* ----- Hyperlinks ----- */ a {color: #fff; text-decoration: underline;} a:hover {color: #fff; text-decoration: none;} /* ----- Headings ----- */ h1, h2, h3, h4, h5, h6 {font-weight: bold; line-height: 1.5em;} h1 {font-size: 32px;} h2 {font-size: 30px; line-height: 26px; padding: 0 0 5px 0; text-transform: uppercase;} h3, .byline {font-size: 18px; font-weight: normal; text-transform: uppercase;} .module-feature .feature-title h3, .entry-form .feature-title h3, .box-b .content .description h3, .show-listing dt.letter {font-size: 24px; font-weight: bold; line-height: 24px;} .module-feature .feature-title, .entry-form .feature-title {background: url(images/bg-colour-a-heading.png) transparent 0 0 repeat; padding: 15px 10px;} .module-feature .feature-title h3, .entry-form .feature-title h3 {border-left: 2px solid #708fb2; padding-left: 9px;} .module-twitter #twtr-widget-1 .twtr-bd, .module-twitter #twtr-widget-1 .twtr-timeline i a, .module-twitter #twtr-widget-1 .twtr-bd p {color: #334f73 !important;} .module-twitter #twtr-widget-1 .twtr-tweet a {color: #1c2e40 !important;} .module-tvguide .top h3 {font-size: 18px; font-weight: bold; line-height: 18px; text-transform: uppercase;} .module-tvguide .top p, .module-tvguide .middle dl {font-size: 14px; font-weight: bold; line-height: 14px; text-transform: uppercase;} #nav-global .meganav .area h3, #footer .site-map h3 {color: #a8bfd9; font-size: 18px; font-weight: bold;} #main h1, #extras h2, .module-featured-event dl dt, .module-listing .listing h3, #title-wrapper h1 {font-size: 30px; font-weight: bold; line-height: 30px; padding: 0 0 10px 0; text-transform: uppercase;} .byline {padding: 0;} .module-listing .listing h4, .module-listing .listing h5, .module-featured-event dl dd.date, .module-featured-event dl dd.location, .events-details {font-size: 14px; line-height: 17px;} #article h2, #competition h2 {color: #a7bfd7; font-size: 15px; font-weight: bold;} /* ----- Lists ----- */ /* Unordered */ ul.list-a-b {padding-bottom: 15px; color: white; padding: 10px 0 0 0;} ul.list-a-b li {background: none; color: #fff; font-weight: bold; height: 15px; line-height: 15px; padding: 0 0 15px 20px;} /* Ordered */ ol.list-a {padding-bottom: 15px;} ol.list-a li {} /* Definition */ dl.list-a {padding-bottom: 15px;}/*cleared*/ dl.list-a dt {float: left; width: 100px; font-weight: bold;} dl.list-a dd {float: left; width: 200px;} /* ----- Grid ----- */ .grid {} .grid .row {}/*cleared*/ .grid .row .col {float: left; padding-right: 10px; width: 100px;} .grid .row .col-first {} .grid .row .col-last {padding-right: 0;} /* ----- Content ----- */ /* Notice Board style boxes/buttons */ .notice-board {background-color: #000; border: 0; color: #fff; display: inline-block; font-weight: bold; height: 30px; line-height: 30px; padding: 0 25px 0 0; text-decoration: none;} .notice-board:hover {text-decoration: none;} .notice-board span, .new-search form {border: 0; color: #fff; display: block; font-size: 14px; height: 22px; line-height: 22px; margin: 0; padding: 4px 5px 4px 12px; text-transform: uppercase; width: auto;} .notice-board span span {background: none; float: left; padding: 0; margin: 0 5px 0 0;} a.notice-board:hover span {color: #a7bfd7;} a.notice-board span {cursor: pointer;} .btn-a-a {cursor: pointer;} .btn-a-a, .board-a-a {padding: 0 7px 0 0;} .box-a {} .btn-a-a-arrow, #nav-global ul li ul li .panel-button .btn-a-a-arrow, .entry-form .button-wrapper {background: url(images/sprite-arrows.png) #000 right -105px no-repeat; padding: 0 25px 0 0;} .btn-a-a-arrow span {background-position: 0 0;} .entry-form .button-wrapper input {background: url(images/bg-submit-button.png) 0 0 no-repeat transparent; padding: 0 25px 7px 10px; width: 80px;} .poll .button-wrapper input {background: url(images/bg-vote-button.png) 0 0 no-repeat transparent; padding: 0 10px 7px; width: 59px;} .entry-form .button-wrapper input, .poll .button-wrapper input {background-color: #000; border: 0; color: #fff; cursor: pointer; float: right; font-size: 14px; font-weight: bold; line-height: 22px; height: 28px; padding: 0; text-align: center; text-transform: uppercase;} #extras h3.notice-board {display: block;} .btn-fb-comments-close {background: #000 none; height: 13px; padding: 10px; width: 13px;} .btn-fb-comments-close span {background: url(images/sprite-icons.png) transparent -556px 0 no-repeat; height: 13px; padding: 0; text-indent: -9999px; width: 13px;} .btn-fb-comments-open {background: url(images/sprite-arrows-vertical.png) #000 right 12px no-repeat;} /* Icons */ .icon {text-indent: -9999px;} .icon-arrow-a-left {background: url(images/sprite-icons.png) 0 0 no-repeat transparent; display: block; float: right; height: 15px; margin-top: 2px; margin-left: 5px; width: 13px;} .notice-board .icon {height: 22px; margin: 0 5px 0 0; width: 22px;} .notice-board .icon-facebook {background: url(images/sprite-icons.png) -184px 0 no-repeat transparent;} .notice-board .icon-gallery {background: url(images/sprite-icons.png) -211px 0 no-repeat transparent;} .notice-board .icon-blog {background: url(images/sprite-icons.png) -232px 0 no-repeat transparent;} .notice-board .icon-events {background: url(images/sprite-icons.png) -420px 0 no-repeat transparent;} .notice-board .icon-comedy-channel-logo {background: url(images/sprite-icons.png) -442px 0 no-repeat transparent;} .notice-board .icon-thumbs-up {background: url(images/sprite-icons.png) -475px 0 no-repeat transparent;} .notice-board .icon-thumbs-down {background: url(images/sprite-icons.png) -500px 0 no-repeat transparent;} .icon-foxtel {background: url(images/sprite-icons.png) -255px 0 no-repeat transparent; display: block; height: 20px; width: 97px;} .icon-foxtel-medium, .notice-board .icon-foxtel-medium {background: url(images/sprite-icons.png) -578px 0 no-repeat transparent; display: block; height: 15px; width: 78px;} .notice-board .icon-foxtel-medium {display: inline-block; float: none; margin: 0 5px;} .icon-foxtel-small {background: url(images/sprite-icons.png) -530px 0 no-repeat transparent; display: block; float: right; height: 15px; margin-top: 3px; margin-left: 5px; width: 18px;} .icon-austar {background: url(images/sprite-icons.png) -350px 0 no-repeat transparent; display: block; height: 30px; width: 67px;} .icon-rating {background: url(images/sprite-tv-guide-icons.gif) 0 0 no-repeat transparent; height: 28px; text-indent: -9999px; width: 28px;} .icon-rating-g {background-position: 0 0;} .icon-rating-pg {background-position: -31px 0;} .icon-rating-m {background-position: -62px 0;} .icon-rating-ma {background-position: -93px 0;} .icon-rating-r {background-position: -124px 0;} .icon-feature {background: url(images/sprite-tv-guide-icons.gif) 0 0 no-repeat transparent; height: 15px; text-indent: -9999px; width: 15px;} .icon-feature-cc {background-position: 0 -34px;} .icon-feature-wide {background-position: -18px -34px;} .icon-feature-hd {background-position: -36px -34px;} .icon-feature-series-start {background-position: -54px -34px;} .icon-feature-subtitled {background-position: -72px -34px;} /* -------------------------------------------------------------------------------------------------------------- Layout -------------------------------------------------------------------------------------------------------------- */ /* ----- General ----- */ body {background: #000 url(images/bg-main.jpg) repeat-y fixed top center;} #wrapper-main {} #wrapper-main #wrapper-top {background: url(images/bg-wrapper-top.png) transparent 0 0 repeat-x;} #wrapper-main #wrapper-bottom {} #wrapper-main #wrapper-bottom #inner-wrapper {min-width: 960px; overflow-x: hidden;} #wrapper-main #container {margin: 0 auto; position: relative; width: 960px;} #wrapper-main #content {position: relative; margin-bottom: 10px;} #wrapper-main #content .content-wrapper {}/* cleared */ #extras {float: right; width: 300px;} .background-left {display: block; height: 800px; left: -200px; position: absolute; top: 0; width: 200px;} .background-right {display: block; height: 800px; position: absolute; right: -200px; top: 0; width: 200px;} .background-link-left {cursor: pointer; display: block; height: 800px; left: -200px; position: absolute; top: 0; width: 200px; z-index: 1;} .background-link-right {cursor: pointer; display: block; height: 800px; position: absolute; right: -200px; top: 0; width: 200px; z-index: 1;} /* ----- Templates ----- */ .template-a #wrapper-main #main, .template-b #wrapper-main #main {float: left; padding: 0 21px 0 0; width: 639px; min-height: 400px;} .template-c #wrapper-main #main, .template-d #wrapper-main #main {float: left; padding: 0 21px 0 0; width: 639px; min-height: 400px;} .template-a #wrapper-main #main-2, .template-b #wrapper-main #main-2 {clear: both; padding: 30px 0 0;} .template-c #wrapper-main #wrapper-2, .template-d #wrapper-main #wrapper-2 {padding-top: 28px;} .template-e #wrapper-main #main {} /* ----- Default columns ----- */ .columns-2 .second-main-1, .columns-2 .second-main-2 {float: left; width: 50%;} .columns-3 .second-main-1, .columns-3 .second-main-2, .columns-3 .second-main-3 {float: left; width: 33%;} .template-a .columns-3 .second-main-1, .template-a .columns-3 .second-main-2, .template-a .columns-3 .second-main-3 {float: left; padding: 0 29px 20px 0; width: 300px;} .template-a .columns-3 .second-main-3 {padding: 0; width: 300px;} /* ----- Header ----- */ #branding-nav {min-height: 120px; padding: 0 0 20px; position: relative; text-transform: uppercase;} #branding-nav #logo {float: left; padding: 20px 20px 0 0;} #branding-nav #logo a {} #branding-nav #logo .logo-screen {display: inline;} #branding-nav #logo .logo-print {display: none;} #branding-nav .skip {margin: 0; padding: 0;} #branding-nav .skip a {display: block; height: 1px; left: -9999px; overflow: hidden; position: absolute; width: 1px;} /* ----- Navigation ----- */ #nav-global {height: 54px; padding: 5px 6px 9px 0; position: absolute; text-transform: uppercase; top: 52px; right: 0; width: 772px; z-index: 52;} #nav-global ul.list {}/*cleared*/ #nav-global ul.list li.item {float: left; margin: 0 78px 0 0; padding: 10px 15px;} #nav-global ul.list li.item a.link, #nav-global ul.list li.item strong.strong {display: block; font-weight: normal; height: 34px; text-decoration: none;} #nav-global ul.list li.item a.link span.span, #nav-global ul.list li.item strong.strong span.span {cursor: pointer; display: block; font-size: 16px; font-weight: bold; height: 22px; line-height: 22px; margin: 0 5px; padding: 5px 0; text-align: center;} #nav-global ul.list li.item a.link:hover span.span {color: #a7bfd7;} #nav-global ul.list li.item strong.strong span.span em.em {display: none;} #nav-global ul.list li.item.on {} #nav-global ul.list li.item.on a.link, #nav-global ul.list li.item.on strong.strong {} #nav-global ul.list li.item.on a.link span.span, #nav-global ul.list li.item.on strong.strong span.span {border-bottom: 2px solid #fff;} #nav-global ul.list li.item.last {margin-right: 0; padding-right: 0;} #nav-global ul.list li.hover {background-color: #162533; border-left: 1px solid #243851; border-right: 1px solid #243851; border-top: 1px solid #243851; padding: 9px 14px 10px;} #nav-global ul.list li.item.hover a.link span.span {color: #fff;} #nav-global .nav-sec-shows, #nav-global .nav-sec-videos {width: 70px;} #nav-global h6 {display: none;} #nav-meta {display: none;} /* ----- Meganav ----- */ #nav-global ul.list li.hover .meganav, #nav-global ul.list li.hover .meganav-arrow {display: block;} #nav-global ul.list li .meganav-arrow {background-color: #162533; display: none; height: 5px; position: absolute; width: 98px; z-index: 51;} #nav-global .nav-sec-shows .meganav-arrow {top: 56px; left: 167px;} #nav-global .nav-sec-videos .meganav-arrow {top: 56px; left: 345px;} #nav-global .meganav {background: url(images/bg-meganav.png) -1956px 100% no-repeat transparent; display: none; padding: 0 0 15px 0; position: absolute; top: 54px; left: -191px; width: 978px; z-index: 50;} #meganav-fade {background: #000; display: none; position: fixed; left: 0; top: 0; opacity: 0.5; filter: alpha(opacity=50); z-index: 49; width: 100%; min-height: 100%;}/*cleared*/ #meganav-fade hr {display: none;} #nav-global .meganav .meganav-wrapper {background: url(images/bg-meganav.png) 0 0 no-repeat transparent; padding-top: 15px;} #nav-global .meganav .meganav-inner {background: url(images/bg-meganav.png) -978px 487px repeat-y transparent; min-height: 70px; padding: 0 10px;} #nav-global .meganav .area {background: url(images/bg-meganav-content.png) 0 0 repeat-x transparent; padding: 0 19px 19px;} #nav-global .meganav .area h3 {padding: 10px 0 5px 45px;} #nav-global .meganav .area ul {} /* clear */ #nav-global .meganav .area a {text-decoration: none;} #nav-global .meganav .area a:hover {color: #a7bfd7;} #nav-global .meganav .module-show-box-row ul, #nav-global .meganav .area .panel-videos ul {padding: 0 0 15px 26px;} /* Panel - boxes */ #nav-global .meganav .area .panel-boxes {padding-bottom: 10px;} /* Panel - shows */ #nav-global .meganav .area .panel-shows {} #nav-global .meganav .area .panel-shows .grid {padding: 0 26px 10px;} #nav-global .meganav .area .panel-shows .grid .row {padding-left: 20px;} #nav-global .meganav .area .panel-shows .grid .row .col {padding-right: 0; width: 216px;} #nav-global .meganav .area .panel-shows .grid .row .col-last {width: 159px;} #nav-global .meganav .area .panel-shows .grid .row .col ul {} #nav-global .meganav .area .panel-shows .grid .row .col ul li {padding-bottom: 10px;} /* Panel - videos */ #nav-global .meganav .area .panel-videos {clear: both; padding-bottom: 15px;} #nav-global .meganav .area .panel-videos ul li {float: left; font-size: 0.9em; padding: 0 19px 10px;} /* Panel - button */ #nav-global .meganav .area .panel-button {padding-right: 49px;}/*cleared*/ #nav-global .meganav .area .panel-button a {float: right;} /* ----- Section navigation - Contentnav ----- */ #contentnav {font-size: 14px; height: 164px; line-height: 14px; padding: 0 0 20px 0; position: relative; z-index: 2;} #contentnav .contentnav-wrapper {}/*cleared*/ #contentnav .contentnav-wrapper .contentnav-left {background: url(images/bg-show-logo.png) 0 0 no-repeat transparent; float: left; height: 120px; padding: 11px 0 22px 11px; width: 200px;} #contentnav .contentnav-wrapper .contentnav-right {float: right; width: 728px;} #contentnav .nav {background: url(images/bg-colour-a-nav.png) transparent 0 0 repeat; height: 52px; margin: 10px 0 0 0; width: 728px;} #contentnav .nav ul {padding: 0 15px;}/*cleared*/ #contentnav .nav ul li {float: left; padding: 11px 15px 12px; position: relative;} #contentnav .nav ul li.last {padding-left: 0; padding-right: 0;} #contentnav .nav ul li.showing {float: right;} #contentnav .nav ul li .item {color: #fff; display: block; font-weight: bold; text-decoration: none; text-transform: uppercase;} #contentnav .nav ul li.active a {color: #fff;} #contentnav .nav ul li.active a span span {border-bottom: 1px solid #fff;} #contentnav .nav ul li .item:hover {color: #a7bfd7;} #contentnav .nav ul li .item span {display: block;} #contentnav .nav ul li .item span span {padding: 7px 0;} #contentnav .nav ul li.showing .item {cursor: default;} #contentnav .nav ul li.showing .item span span {color: #fff; font-weight: normal;} #contentnav .nav .subnav {display: none; left: 0; min-width: 150px; position: absolute; top: 53px; z-index: 10;} #contentnav .nav li:hover {padding-bottom: 14px;} #contentnav .nav li:hover .subnav {display: block;} #contentnav .nav .subnav ul {padding: 0;} #contentnav .nav .subnav li {float: none; padding: 0 0 1px;} #contentnav .nav .subnav a {background: url(images/bg-colour-a-subnav.png) transparent 0 0 repeat; display: block; padding: 10px 15px; text-decoration: none; text-transform: uppercase;} #contentnav .nav .subnav a:hover {color: #a7bfd7;} /* ----- Content ----- */ #wrapper-2 {position: relative; z-index: 1;} /* Title Wrapper */ #title-wrapper {border-bottom: 1px solid #fff; padding: 10px; width: 619px;} #title-wrapper h1 {padding: 0;} /* ----- Footer ----- */ #footer {padding: 50px 0 0 0;} #footer .content .ad {background: url(images/bg-footer-ad.png) transparent 210px 0 no-repeat; height: 90px; margin: 0 auto; padding: 11px 11px 12px 221px; width: 728px;} #footer .content .site-map {background: url(images/bg-footer-sitemap.png) transparent 1px 28px no-repeat; margin: 0 auto; height: 281px; padding: 28px 0 0 0; width: 960px;} #footer .site-map .row {} #footer .site-map .row .column {float: left; height: 232px; padding: 0 0 0 12px; width: 217px;} #footer .site-map .row .no-heading {padding-top: 35px;} #footer .site-map .row .column-1 {border-left: 2px solid #1c2e40; border-right: 2px solid #1c2e40;} #footer .site-map .row .column-3 {border-right: none;} #footer .site-map h3 {margin: 0; padding: 0 0 6px 0;} #footer .site-map ul {} #footer .site-map ul li {padding: 0 0 8px;} #footer .site-map ul li a {text-decoration: none; text-transform: uppercase;} #footer .site-map ul li a:hover {color: #a7bfd7;} #footer .copyright-info {height: 54px; padding: 18px 0 0 0;} #footer .copyright-info ul {} /* clear */ #footer .copyright-info ul li {float: left; height: 36px; line-height: 36px;} #footer .copyright-info ul li.last {border-left: 1px solid #708fb2; } #footer .copyright-info a.foxtel {padding: 12px 20px 0 15px; display: block;} #footer .copyright-info a.austar {padding: 3px 25px 0; display: none;} #footer .copyright-info a span {cursor: pointer;} #footer .copyright-info .copyright {padding: 2px 0 0 30px; text-transform: uppercase;} /* -------------------------------------------------------------------------------------------------------------- Forms -------------------------------------------------------------------------------------------------------------- */ /* ----- Default ----- */ input.field, dl.field dd input, select, textarea {padding: 3px; color: #333; border: solid 1px #ccc; font: 0.9em Arial, Tahoma, Verdana, Helvetica, sans-serif; background: #fff;} select {padding: 2px 3px;} select option {padding-right: 10px;} textarea {overflow: auto;} /* -------------------------------------------------------------------------------------------------------------- Widgets -------------------------------------------------------------------------------------------------------------- */ /* ----- Boxes ----- */ .box {position: relative;} .box:hover {color: #fff; text-decoration: none;} a.box:hover {cursor: pointer;} .box:hover img {filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;} .box:hover .description, .box:hover .description h3, .box:hover .description p, .box:hover .time {filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;} .box .content {position: relative;} .box .description {bottom: 0; font-weight: bold; left: 8px; position: absolute; text-transform: uppercase;} .box .description h3 {font-size: 12px; margin: 0; padding: 0 8px;} .box .description p {font-size: 11px; height: 33px; line-height: 11px; padding: 3px 2px 2px 2px;} .box .description .actor-name {font-size: 12px; height: auto; line-height: 12px; padding: 4px 0 0;} .box .description .character-name {font-size: 10px; height: auto; line-height: 10px; padding: 0 0 10px;} .box .details {color: #fff; display: none; font-size: 10px; font-weight: bold; height: 78px; left: 10px; line-height: 10px; padding: 7px 6px 5px 6px; position: absolute; text-transform: uppercase; top: 9px; width: 147px; z-index: 2;} .box:hover .details {display: block;} .box .time {font-size: 11px; font-weight: bold; padding: 3px 0 0; position: relative;} .box .icon-video-play {background: url(images/icon-video-play.png) center center no-repeat; height: 80px; left: 32px; position: absolute; top: 5px; width: 119px;} .box:hover .icon-video-play {display: none;} /* Box A */ .box-a {display: block; text-decoration: none; width: 178px;} .box-a .content {padding: 9px;} .box-a .content .description {bottom: 10px; left: 10px; width: 158px;} /* Box - Time */ .box-time .content .description {bottom: 26px; height: 38px;} /* Box B */ .box-b {display: block; height: 240px; text-decoration: none; width: 191px;} .box-b .content {height: 220px; padding: 10px;} .box-b .details {padding: 3px 3px 5px 1px; width: 155px;} .box-b .content .description {left: 10px; width: 165px;} .box-b .content .description h3 {height: 130px; padding: 5px 0 0;} .box-b .content .description p {height: 45px; line-height: 13px;} /* Box C */ .box-c {} .box-c .content {padding: 10px 20px; width: 260px;} /* Box - Date */ .box-date .content {padding: 6px 7px 10px; width: 280px;} .box-date .content .image {height: 158px; position: relative;} .box-date .content .blog-date {font-size: 20px; padding: 5px 9px; position: absolute; top: 0; left: 0;} .box-date .content .title {font-weight: bold; height: 26px; padding: 7px; position: absolute; bottom: 1px; left: 1px; line-height: 13px; width: 264px;} .box-date .content .title a {text-decoration: none;} .box-date .content .description {padding: 10px 0 0 0;} .box-date .content .description p {font-size: 11px;} .box-date .content .description .social {padding: 0 0 20px;} .box-date .content .description .tags {font-size: 12px; font-weight: bold;} /* Boxes used in article pages for containing images and their captions, also used in gallery thumbnails. These use CSS rather than background images. */ /* Box D */ .box-d .caption {color: #a7bfd7; font-size: 12px; line-height: 30px; min-height: 30px; padding: 0 10px; text-transform: uppercase;} .box-d .caption a {color: #fff; text-decoration: none;} .box-d .content {} .box-d .content .description {bottom: 5px; display: none; filter:alpha(opacity=1); left: 6px; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; width: 113px;} .box-d .content .description p {padding: 3px 4px 2px;} .box-d-a .content {padding: 5px;} .box-d-b .content {padding: 0px;} /* Boxes for cast members */ .box-cast {display: block; height: 46px; position: relative; text-decoration: none; width: 84px;} .box-cast .name {color: #fff; display: none; font-size: 11px; font-weight: bold; height: 36px; padding: 8px 5px 3px 5px; position: absolute; top: 0; left: 0; text-align: center; text-transform: uppercase; width: 76px;} .box-cast:hover {text-decoration: none;} .box-cast:hover img {filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0;} .box-cast:hover .name {display: block;} .box-cast.current img {filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;} /* Boxes for blog archive */ .box-blog-archive .content h3 {font-size: 1.4em; padding-bottom: 5px; color: #edb723;} .box-blog-archive .content dl {padding-bottom: 10px;} .box-blog-archive .content dl dt {cursor: pointer; background: url(images/sprite-arrows.png) no-repeat scroll 0 -241px transparent; padding: 2px 0 3px 22px;} .box-blog-archive .content dl.active dt {background-position: 0 -302px;} .box-blog-archive .content dl.close dd {display: none;} .box-blog-archive .content dl dd {padding: 1px 0 1px 30px;} .box-blog-archive .content dl dd a {text-decoration: none;} .box-blog-archive .content dl dd a:hover {color: #edb723; text-decoration: none;} /* Consistent box colours */ .box-a-a, .box-b-a, .box-c-a, .box-d-a, .box-d-b, .box-cast-a {color: #fff;} .box-a-a .content, .box-b-a .content, .box-c-a .content, .box-c-a .content .blog-date, .box-c-a .content .title, .box-d-a, .box-d-a .content, .box-d-b, .box-d-b .content, .box-cast-a, #glossary #wrapper-main #main {background: url(images/bg-colour-a.png) transparent 0 0 repeat;} .box .details {background: none #000;} .box-a-a .content .description, .box-d-a .content .description {background: url(images/bg-colour-a-overlay.png) transparent 0 0 repeat;} .box-a-a .content img, .box-b-a .content img, .box-c-a .content img {border: 1px solid #000;} /* ----- Bar ----- */ .bar {}/*cleared*/ .bar ul {}/*cleared*/ .bar ul li {color: #fff; float: left;} .bar ul li a {color: #fff; display: block; text-align: center; text-decoration: none;} .bar ul li a span {display: block;} /* List */ .bar ul.list li {padding: 0 50px 0 0;} .bar ul.list li.text {height: 18px; padding: 5px 50px 5px 0; text-align: right;} .bar ul.list li a {height: 18px; padding: 5px 0 3px;} .bar ul.list li.prev a span {background: url(images/sprite-arrows.png) -4px -349px no-repeat transparent; padding-left: 15px;} .bar ul.list li.next a span {background: url(images/sprite-arrows.png) 40px -109px no-repeat transparent; padding-right: 15px;} .bar ul.list li.date {line-height: 23px; height: 23px;} .bar ul.list li.active a {border-bottom: 1px solid #fff;} .bar ul.list li a:hover {color: #708fb2;} .bar ul.list li.text {} .bar ul.list li.last {padding: 0;} /* Pagination */ .bar-pagination ul.list {float: right;} .bar-pagination ul.list li {padding: 0 14px 0 0;} .bar-pagination ul.list li.next {padding: 0;} /* Schedule */ .bar-schedule {padding: 0 0 10px 0;} .bar .notice-board {display: block; width: auto;} .bar .notice-board span {padding: 0 5px 14px 12px;} .bar .notice-board span span {margin: 0; padding: 0;} .bar .notice-board ul.list li a span {cursor: pointer;} .bar .notice-board ul.list li a:hover, .bar .notice-board ul.list li a:hover span {color: #708fb2;} .bar .notice-board ul.list li.active a:hover span {color: #fff;} /* Date bar on tv guide */ .bar-listing-date {position: relative; z-index: 3;} .bar-listing-date .notice-board {padding: 0;} .bar-listing-date .notice-board span {padding: 0;} .bar-listing-date ul.list {position: relative;} .bar-listing-date ul.list li {padding: 0;} .bar-listing-date ul.list li a {height: 30px; margin: 0; padding: 0;} .bar-listing-date ul.list li.prev a span, .bar-listing-date ul.list li.next a span {background: url(images/sprite-bar-arrows.gif) no-repeat 0 0 transparent;} .bar-listing-date ul.list li.prev {position: absolute; left: 0;} .bar-listing-date ul.list li.prev a span {background-position: 0 -10px; line-height: 30px; height: 30px;} .bar-listing-date ul.list li.date {display: block; font-size: 18px; height: 30px; line-height: 30px; text-align: center; width: 100%;} .bar-listing-date ul.list li.next {position: absolute; right: 0;} .bar-listing-date ul.list li.next a span {background-position: 100% -59px; line-height: 30px; height: 30px;} /* ----- Homepage gallery ----- */ #a-feature {background: url(images/bg-afeature-main.png) transparent 0 0 no-repeat; position: relative; height: 455px; width: 960px;} #a-feature .media {height: 348px; position: absolute; top: 11px; left: 11px; overflow: hidden; width: 949px;} #a-feature .media ul.media-group {position: absolute; top: 0;} #a-feature .media ul li {float: none; padding: 0 0 10px 0;} /* clear */ #a-feature .media .image {float: left; height: 348px; width: 618px;} #a-feature .media .details {float: left; height: 348px; padding: 0 0 10px 31px; width: 300px;} #a-feature .media .controls a.previous {top: 142px; left: 0;} #a-feature .media .controls a.next {top: 142px; left: 606px;} #a-feature .module-sponsor-box {position: absolute; top: 307px; left: 650px;} /* ----- Features ----- */ /* A Feature, Image and Video Gallery Feature */ .media-feature .thumbnails {height: 84px; overflow: hidden; position: absolute; top: 363px; left: 11px; width: 601px;} .media-feature .thumbnails ul {position: absolute; top: 0; left: 22px; width: 2000px;} .media-feature .thumbnails ul li {float: left; padding: 4px 5px 3px 0;} .media-feature .thumbnails ul li.current span {color: #d09ecb;} .media-feature .thumbnails ul li.current img {filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;} .media-feature .thumbnails ul li a {color: #fff; display: block; font-weight: bold; height: 75px; text-decoration: none; width: 125px;} .media-feature .thumbnails ul li a .content {padding: 6px 5px 5px 6px; width: 113px;} .media-feature .box:hover .description, .media-feature .box:hover a .description {display: block;} .media-feature .box:hover .description, .media-feature .box:hover .description h3, .media-feature .box:hover .description p, .media-feature .box:hover .time {filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;} .media-feature .thumbnails ul li a img {filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; height: 63px; width: 113px;} .media-feature .box:hover .description h3, .media-feature .box:hover .description p, .media-feature .box:hover .time {filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;} .media-feature .thumb-controls a {background: url(images/sprite-arrows.png) -140px 0 no-repeat #000; display: block; height: 75px; text-indent: -9999px; width: 17px; position: absolute; z-index: 2;} .media-feature .thumb-controls a.previous {background-position: 0 -321px; top: 367px; left: 11px;} .media-feature .thumb-controls a.next {background-position: 0 -82px; top: 367px; left: 612px;} .media-feature .media .controls a {background: url(images/sprite-arrows.png) -240px 0 no-repeat #000; display: block; height: 65px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -khtml-opacity: 0.3; -moz-opacity: 0.3; opacity: 0.3; outline: none; position: absolute; text-indent: -9999px; width: 12px; } .media-feature .media .controls a:hover {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1;} .media-feature .media .controls a.previous {background-position: -2px -326px;} .media-feature .media .controls a.next {background-position: -1px -86px;} .media-feature .media .controls .disabled {display: none;} .media-feature .media .details h2 {width: 250px;} .media-feature .media .details h3 {background-color: transparent; padding: 0;} .media-feature .media .details h3 span {padding: 0;} .media-feature .media .details .description {padding: 6px 0 10px;} .media-feature .media .details .description p {padding: 0 0 5px 0;} .media-feature .media .details .links {clear: both;} .media-feature .media .details .links li {float: left; margin: 0 10px 0 0;} /* Image and Video Gallery */ .video-gallery, .image-gallery {background: url(images/bg-media-gallery.png) transparent 0 0 no-repeat; position: relative; height: 830px; width: 960px; z-index: 2;} .video-gallery .media, .image-gallery .media {height: 726px; position: absolute; top: 10px; left: 11px; overflow: hidden; width: 938px;} .image-gallery .media .media-group {position: relative;} .video-gallery .media .details, .image-gallery .media .details {float: left; height: 170px; padding: 30px 0 0 0; width: 609px;} .video-gallery .media .details {padding: 26px 0 0 0;} /* Fix to keep things lining up with brightcove player taking up more vertical room */ .video-gallery .thumbnails, .image-gallery .thumbnails {top: 741px; left: 11px;} .video-gallery .thumb-controls a.previous, .image-gallery .thumb-controls a.previous {top: 745px;} .video-gallery .thumb-controls a.next, .image-gallery .thumb-controls a.next {top: 745px; left: 603px;} .video-gallery .module-ad, .image-gallery .module-ad {border-bottom: none; position: absolute; top: 569px; left: 659px;} .image-gallery .media .media-group li {float: left; width: 938px;} .image-gallery .media .media-group li .links li {width: auto;} .image-gallery .media .controls .previous {position: absolute; top: 231px; left: 0;} .image-gallery .media .controls .next {position: absolute; top: 231px; left: 926px;} .video-gallery .media {overflow: visible;} /* B Feature */ #b-feature {background: url(images/bg-bfeature-main.png) transparent 0 0 no-repeat; position: relative; height: 275px; width: 650px; z-index: 1;} #b-feature .features {position: absolute; top: 11px; left: 26px; overflow: hidden; width: 602px; height: 240px;} /* clear */ #b-feature .features ul {margin: 0 auto; position: absolute; top: 0; left: 0; width: 99999px;} #b-feature .features ul li {float: left; padding: 0 5px;} #b-feature .features ul li .details {background: none;} #b-feature .thumb-controls {height: 40px; position: absolute; top: 240px; width: 630px;} #b-feature .thumb-controls ul.dots {left: 222px; position: absolute; text-align: center; top: 22px; width: 200px;} /*clear */ #b-feature .thumb-controls ul.dots li {display: inline; font-size: 0; height: 14px; line-height: 0; padding: 0 7px; vertical-align: top; width: 8px;} #b-feature .thumb-controls ul.dots li a {background: url(images/bg-bfeature-control-point.png) 0 0 no-repeat transparent; display: inline-block; height: 8px; outline: 0; vertical-align: top; width: 8px;} #b-feature .thumb-controls ul.dots li.current a {background-position: -8px 0;} #b-feature .thumb-controls .previous, #b-feature .thumb-controls .next {background: url(images/sprite-arrows.png) 0 -2px no-repeat #000; display: block; height: 240px; position: absolute; text-indent: -9999px; top: -229px; width: 12px;} #b-feature .thumb-controls .previous {background-position: -2px -240px; left: 11px;} #b-feature .thumb-controls .next {background-position: -1px 0; left: 632px;} .facebook-comments {background: url(images/bg-line.png) transparent 0 -568px repeat-y; padding: 0 0 6px 11px; width: 618px;} .facebook-comments .content {background-color: #fff; padding: 20px; width: 587px;} /* clear */ .facebook-comments .button-group {float: right;} .facebook-comments .fb-comments {clear: both; padding: 10px 0 0 0;} #article .facebook-comments {background: none; padding: 0 0 6px;} /* ----- Blog feature ----- */ #blog-feature {background-color: #333; position: relative; height: 467px; padding: 0 0 10px; width: 634px;} #blog-feature .media {height: 467px; padding: 10px 0 0 1px; position: absolute; top: 0; left: 12px; overflow: hidden; width: 608px;} #blog-feature .media .image {height: 342px; width: 608px;} #blog-feature .media .controls a.previous {top: 165px; left: 3px;} #blog-feature .media .controls a.next {top: 165px; left: 582px;} #blog-feature .media .details {background-color: #ccc; height: 93px; padding: 10px; width: 588px;} #blog-feature .media .blog-date {float: left; margin-right: 6px;} /* ----- Top Search and Share Bar ----- */ #search-box {background: url(images/bg-search-bar.png) transparent 0 0 repeat-x; float: left; height: 33px; padding: 15px 0 0 10px; width: 460px;} #search-box ul li {float: left; height: 21px; padding-right: 10px;} #search-box ul li label {float: left; height: 21px; line-height: 21px; padding: 0 5px;} #search-box ul li.search {border: none; padding: 1px 0; width: 210px;} #search-box ul li #search-bar, .new-search #search {border: 1px #ccc solid; float: left; height: 15px; padding: 2px; text-transform: uppercase; width: 174px;} #search-box ul li .search-button, #search-box-tv-guide ul li .search-button, .new-search .button {background: url(images/sprite-icons.png) -20px 2px no-repeat transparent; border: 0; cursor: pointer; display: block; float: left; height: 21px; margin: 0 0 0 5px; padding: 0; text-indent: -9999px; width: 25px; font-size: 0; line-height: 0;} #share-box {background: url(images/bg-search-bar.png) transparent 0 0 repeat-x; float: left; height: 33px; padding: 12px 6px 3px 20px; width: 283px;} #share-box h6 {float: left; height: 15px; line-height: 15px; margin: 0; padding: 12px 13px 13px 0; width: 97px;} #share-box ul.share-icons {float: right; width: 108px;} #share-box ul.share-icons li {display: block; float: left; height: 26px; padding: 0 10px 0 0; text-indent: -9999px; width: 26px;} #share-box .facebook {width: 26px; height: 26px; display: block; background: url(images/sprite-icons.png) -53px 0 no-repeat transparent;} #share-box .twitter {width: 26px; height: 26px; display: block; background: url(images/sprite-icons.png) -80px 0 no-repeat transparent;} #share-box .youtube {width: 73px; height: 26px; display: block; background: url(images/sprite-icons.png) -108px 0 no-repeat transparent;} #share-box .googleplus {width: 26px; height: 26px; display: block; background: url(images/sprite-icons.png) -664px 0 no-repeat transparent;} #share-box a.cta-link {cursor: pointer; float: left; padding: 3px 10px 0 0; text-decoration: none; width: 190px;} #share-box a.cta-link {padding: 3px 10px 0 11px; width: 145px;} /* Styling when the icon sprite isn't present in the link */ #share-box a.cta-link .icon-foxtel-small {display: none;} #share-box a.cta-link span {float: left; height: 21px; line-height: 21px;} #share-box a.cta-link span span {background-position: -530px 0; border: none; float: right;} #share-box a.cta-link:hover {color: #a7bfd7;} #search-box, #share-box, #share-box a, #search-bar, #search-bar-epg {font-size: 14px; font-weight: bold; text-transform: uppercase;} /* ----- Search bar on search page ----- */ .new-search {display: block;} .new-search form fieldset {float: right; width: 316px;} .new-search, .new-search span {} .new-search #search, .new-search h2, .new-search span, .new-search:hover, .new-search:hover span {font-size: 12px; line-height: 21px;} .new-search h2 {float: left; font-size: 14px; padding: 0 10px 0 0;} .new-search div {float: left;} .new-search fieldset {border: 0; margin: 0; padding: 0;} .new-search span {background: none; padding: 0;} .new-search label {display: none;} .new-search #search {color: #1d2e3e; font-size: 14px; font-weight: bold; float: left; line-height: 15px;} /* ----- TV Guide ----- */ .module-tvguide {background: transparent; position: relative;} .module-tvguide a {text-decoration: none;} .module-tvguide .top {background: url(images/bg-colour-a-heading.png) repeat 0 0 transparent; padding: 15px 10px; height: 32px;} .module-tvguide .top h3 {border-left: 2px solid #708fb2; padding: 0 0 0 7px;} .module-tvguide .top p {border-left: 2px solid #708fb2; padding: 0 0 0 7px;} .module-tvguide .middle dl dt {float: left; padding: 0 0 7px 9px; width: 45px;} .module-tvguide .middle dl dd {border-left: 2px solid #708fb2; float: left; padding: 0 0 7px 9px; width: 144px;} .module-tvguide .middle .now dl {height: 40px; overflow: hidden;} .module-tvguide .middle .now dl dt span, .module-tvguide .middle .now dl dd span {display: table-cell; height: 3em; vertical-align: middle;} .module-tvguide .middle .guide {padding: 10px 0 0 0;} .module-tvguide .middle .guide .now {background: url(images/bg-module-tvguide-now.png) transparent 0 0 no-repeat; font-weight: bold; height: 49px; padding-top: 12px;} .module-tvguide .middle .guide .now .onnow {color: #a7bfd7; position: absolute; right: 0; top: 107px; text-transform: uppercase; width: 30px;} .module-tvguide .middle .guide .later {position: relative; padding: 30px 0 12px 0; min-height: 232px;} .module-tvguide .middle .guide .later .thumb-controls a {background: url(images/sprite-arrows-vertical.png) 0 0 no-repeat #000; display: block; height: 12px; text-indent: -9999px; width: 300px; position: absolute;} .module-tvguide .middle .guide .later .thumb-controls a.previous {background-position: -21px 2px; left: 0; top: 10px;} .module-tvguide .middle .guide .later .thumb-controls a.next {background-position: -332px 2px; bottom: 0; left: 0;} .module-tvguide .middle .guide .later .features {height: 210px; overflow: hidden; position: relative; width: 225px;} .module-tvguide .middle .guide .later .features .list {position: absolute;} .module-tvguide .bottom {height: 37px; padding: 10px;} .module-tvguide .bottom dl.ad {} .module-tvguide .bottom dl.ad dt {display: none;} .module-tvguide .bottom dl.ad dd {padding: 5px 10px;} .module-tvguide .bottom dl.ad dd img {display: block;} /* ----- Feature Module ----- */ .module-feature {position: relative;} .module-feature ul {padding: 10px 0 0 0;} /* clear */ .module-feature ul li {float: left; padding: 0 0 5px 67px;} .module-feature .feature-inner {padding: 0;} .module-feature .feature-underlay-top {display: none;} .module-feature .feature-underlay-bottom {display: none;} .module-feature .feature-main {padding: 20px;} .module-feature-wide {padding-bottom: 20px; width: 960px;} .module-feature-wide .feature-inner {border-bottom: 5px solid #000; padding: 0;} .module-feature-wide .feature-underlay-top {height: 163px; position: absolute; top: 5px; left: 468px; width: 454px;} .module-feature-wide .module-sponsor-box {margin: 8px; position: absolute; top: 0; right: 0;} /* Consistent box colours */ .module-feature-a, .module-tvguide .bottom, .entry-form {border-bottom: 5px solid #000;} .module-feature-a, .module-feature-wide .feature-inner, .module-tvguide .later, .module-tvguide .bottom, .module-listing .listing {background: url(images/bg-colour-a.png) repeat 0 0 transparent;} .module-feature-wide-b .feature-inner {background: url(images/bg-colour-a.png) repeat 0 0 transparent;} /* ----- Wide thumbnail gallery ----- */ .module-wide-thumbnail-gallery .thumb-controls a {background: url(images/sprite-arrows.png) 0 0 no-repeat #000; display: block; text-indent: -9999px;} .module-wide-thumbnail-gallery .thumb-controls a.previous {background-position: 0 -303px; height: 108px; position: absolute; top: 64px; left: 0; width: 12px;} .module-wide-thumbnail-gallery .thumb-controls a.next {background-position: 0 -64px; height: 108px; position: absolute; top: 64px; right: 0; width: 12px;} .module-wide-thumbnail-gallery .thumbnails {height: 130px; overflow: hidden; position: relative; left: 12px; width: 936px;} .module-wide-thumbnail-gallery .thumbnails ul {position: absolute; top: 0; left: 10px; width: 2000px;} .module-wide-thumbnail-gallery .thumbnails ul li {padding: 0 13px 0 0;} /* ----- 3 column feature ----- */ .module-feature-3-column {width: 638px;} .module-feature-3-column .thumbnails {width: 614px;} .text .module-feature-3-column {width: 628px;} .text .module-feature-3-column .thumbnails {width: 604px;} /* ----- Full feature ----- */ .module-full-feature .feature-main {padding: 0px;} .module-full-feature .feature-main .text {padding: 15px 10px 0 10px;} /* ----- Show box row ----- */ .module-show-box-row {clear: both;} .module-show-box-row ul li {float: left; padding: 0 19px;} /* ----- Competition accordion ----- */ .module-comp-accordion .accordion-header {cursor: pointer; padding: 0 15px 0 0; position: relative; z-index: 5;} .module-comp-accordion .accordion-header span {width: 282px;} .module-comp-accordion .accordion-header h2 {font-size: 18px; font-weight: normal; line-height: 19px;} .module-comp-accordion .accordion-header h2 a {color: #fff; font-weight: normal; text-decoration: none;} .module-comp-accordion .accordion-header .details {color: #edb723; font-size: 12px; font-weight: bold;} .module-comp-accordion .accordion-content {display: none;} .module-comp-accordion .content {position: relative;} .module-comp-accordion .accordion-arrow {background: url(images/sprite-arrows.png) no-repeat right 0 transparent; height: 15px; position: absolute; top: 20px; right: 15px; width: 15px;} .module-comp-accordion .open .accordion-arrow {background-position: right -62px;} /* ----- List feature accordion ----- */ .module-list-feature ul {padding: 0;} .module-list-feature ul li {padding: 0;} .module-list-feature .feature-main {padding: 20px 10px 5px;} .module-list-feature .accordion-box .content {position: relative; width: 280px;} .module-list-feature .accordion-box .accordion-arrow {background: url(images/sprite-arrows.png) no-repeat -2px -115px transparent; height: 11px; position: absolute; right: 0; top: 1px; width: 11px;} .module-list-feature .accordion-box.open .accordion-arrow {background: url(images/sprite-arrows-vertical.png) no-repeat -599px 0 transparent;} .module-list-feature .accordion-box .accordion-content {display: none;} .module-list-feature .accordion-header h3 {line-height: 12px; padding: 0 0 10px 0;} .module-list-feature .accordion-header h3 a {color: #a7bfd7; display: block; font-size: 12px; text-decoration: none;} /* ----- Cast Members ----- */ .module-cast-members ul {padding: 7px 0 3px 0;} .module-cast-members ul li {float: left; padding: 0 6px 7px;} .module-cast-members .feature-main {padding: 0 6px;} /* ----- Listing ----- */ .module-listing {} .module-listing .listing {margin-bottom: 1px; padding: 19px 0 15px 3px;} /*cleared*/ .module-listing .listing .col-left {float: left; width: 170px;} .module-listing .listing .col-right {float: left; width: 440px; padding: 0 0 0 20px;} .module-listing .listing h3, .module-listing .listing h3 a {color: #fff; font-size: 18px; font-weight: normal; padding-bottom: 0; text-decoration: none;} .module-listing .listing h4, .module-listing .listing h4 a {color: #a8bfd9; font-size: 11px; line-height: 11px; text-decoration: none;} .module-listing .listing h5, .module-listing .listing h5 a {color: #a8bfd9; font-size: 11px; line-height: 11px; padding: 0 0 10px 0; text-decoration: none;} /* ----- Featured Event----- */ .module-featured-event h3 {color: #fff;} .module-featured-event .wrapper {padding: 10px 0 0 10px;} .module-featured-event dl {padding: 0 0 10px 0;} .module-featured-event dl dt {color: #edb723; font-size: 1.4em; padding-bottom: 0;} .module-featured-event dl dd {padding-bottom: 0;} .module-featured-event dl dd.date {color: #a03c96;} .module-featured-event dl dd.location {color: #639;} /* ----- Calendar ----- */ .module-calendar {} .module-calendar .bar {margin-bottom: -4px;} .module-calendar table {border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; margin: 0 0 0 5px; width: 302px;} .module-calendar table thead {} .module-calendar table th, .module-calendar table td {border: 1px solid #ccc; border-right: none; border-bottom: none; font-size: 1.4em; font-weight: normal; padding: 4px 0; text-align: center;} .module-calendar table th {font-size: 1.5em;} .module-calendar table a {text-decoration: none;} .module-calendar .box:hover {color: #000!important;} .module-calendar .box table td.on, .module-calendar .box:hover table td.on:hover {background: #639; color: #fff;} .module-calendar .box table td.on a {color: #fff;} .module-calendar .box:hover table td:hover {color: #639; cursor: pointer;} .module-calendar .view-listing {width: 303px;} .module-calendar .view-listing span {} .module-calendar .view-listing a {color: #fff; display: block; font-size: 12px; font-weight: bold; padding: 0; text-decoration: none;} .module-calendar .bar-listing-date ul.list li.prev a span, .module-calendar .bar-listing-date ul.list li.next a span {text-indent: -9999px;} /* ----- Twitter ----- */ .module-twitter {padding: 0 3px;} .module-twitter #twtr-widget-1 .twtr-doc, .module-twitter #twtr-widget-1 .twtr-hd a, .module-twitter #twtr-widget-1 h3, .module-twitter #twtr-widget-1 h4 {background-color: #334f73 !important;} .template-a .columns-3 .module-twitter {padding: 0;} #home .twtr-timeline {height: 380px !important;} /* ----- Facebook recommendations ----- */ .module-facebook-recommendations {padding: 0 3px 10px;} .module-facebook-recommendations .facebook iframe {background-color: #fff;} /* ----- Share buttons ----- */ .social {clear: both; padding: 0 3px 10px 0;} .social .st_twitter_button, .social .st_facebook_button, .social .st_sharethis_button, .social .fb-like {display: block; float: left;} .social .fb-like {background-color: transparent; height: 21px; padding: 0 0 0 5px; width: 80px;} /* ----- Side modules ----- */ .module-ad, .module-featured-event, .module-calendar, .module-facebook-recommendations, .module-twitter, .module-asset {padding-bottom: 30px;} .module-ad, .module-cast-members, .module-full-feature, .module-list-feature, #extras .poll {margin: 0 0 30px 0;} /* ----- Ads ----- */ .module-ad {border-bottom: 1px solid #fff; padding: 0 0 10px; width: 300px;} .banner {background-color: #fff; height: 90px; width: 728px;} /* ----- Sponsor box ----- */ .module-sponsor-box {background-color: #fff; height: 35px; padding: 1px 0; width: 280px;} .module-sponsor-box p {border-right: 2px solid #334f73; color: #334f73; display: block; float: left; font-size: 13px; font-weight: bold; margin: 3px 15px 3px 6px; padding: 7px 10px; text-transform: uppercase;} .module-sponsor-box .logo, .module-tvguide .bottom dl.ad dd {} .module-sponsor-box .logo img, .module-tvguide .bottom dl.ad dd img {display: block;} .module-feature .module-sponsor-box {margin: 10px;} /* ----- Poll ----- */ #extras .poll {position: relative;} #extras .poll h2 {line-height: 14px; padding: 0 0 16px 0;} #extras .poll h2, #extras .poll p, #extras .poll ul, #extras .poll form {position: relative; z-index: 3;} #extras .poll ul li {float: none; padding: 0 0 16px 0;} #extras .poll form {position: relative; padding: 0;} #extras .poll ul {padding: 0;} #extras .poll ul li label {margin-left: 7px;} #extras .poll .notice-board {float: right;} #extras .poll .asset {position: absolute; bottom: 8px; left: 3px; height: 154px; width: 290px; z-index: 2;} /* ----- Asset containers ----- */ .asset-full-width {clear: both; width: 960px;} .asset-full-width img {margin: 0 auto;} /* ----- Facebook Like Buttons ----- */ .fb-like {background-color: #000; height: 20px; padding: 5px 9px; width: 80px;} .fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {display: none !important;} /* Hides comment popup for like button */ /* ----- Custom Scroll Bar ----- */ .Scroller {position: relative; width: 500px; height: 400px;} .Scroller-Content {position: absolute; top: 50px; right: 100px; width: 400px; height: 200px;} #Scroller-1 {position: absolute; overflow: hidden; width: 400px; height: 200px;} .Scroller-Container {position: absolute; top: 0px; left: 0px;} #Scrollbar-Container {position: absolute; top: 40px; right: 60px;} .Scrollbar-Track {position: absolute; top: 24px; left: 2px; width: 30px; height: 161px; opacity: 0.1; filter: alpha(opacity=10);} .Scrollbar-Handle {position: absolute; display: block; width: 30px; height: 22px; background: #fff;} .Scrollbar-Up, .Scrollbar-Down {position: absolute; display: block; text-indent: -9999px; cursor: pointer; background: url(images/sprite-homepage-gallery-buttons.png) no-repeat 0 0 transparent; opacity: 0.6; filter: alpha(opacity=60);} .Scrollbar-Down {top: 187px; background-position: -70px 0;} .Scrollbar-Up:hover, .Scrollbar-Down:hover {opacity: 1; filter: alpha(opacity=100);} /* * CSS Styles that are needed by jScrollPane for it to operate correctly. * * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane * may not operate correctly without them. */ .jspContainer {overflow: hidden; position: relative;} .jspPane {position: absolute;} .jspVerticalBar {position: absolute; top: 0; right: 0; width: 36px; height: 100%;} .jspHorizontalBar {position: absolute; bottom: 0; left: 0; width: 100%; height: 16px;} .jspVerticalBar *, .jspHorizontalBar * {margin: 0; padding: 0;} .jspCap {display: none;} .jspHorizontalBar .jspCap {float: left;} .jspTrack {position: relative;} .jspDrag {background: url(images/bg-popup-scrollbar.png) repeat-y 0 0 transparent; position: relative; top: 0; left: 0; cursor: pointer;} .jspDrag:hover {background-position: -36px 0;} .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {float: left; height: 100%;} .jspArrow {background: url(images/sprite-arrows-scrollbar.png) no-repeat 0 0 transparent; text-indent: -20000px; display: block; cursor: pointer; height: 24px; width: 36px;} .jspArrow.jspDisabled {visibility: hidden;} .jspVerticalBar .jspArrow:focus {outline: none;} .jspCorner {background: #eeeef4; float: left; height: 100%;} .jspArrowUp {} .jspArrowDown {background-position: 0 -24px;} /* Yuk! CSS Hack for IE6 3 pixel bug :( */ * html .jspCorner {margin: 0 -3px 0 0;} /* ----- Popup ----- */ #fade {background: #000; display: none; position: fixed; left: 0; top: 0; opacity: 0.8; filter: alpha(opacity=80); z-index: 100; width: 100%; height: 100%;}/*ie6*/ .popup_block {background: #fff; display: none; float: left; position: fixed; top: 50%; left: 50%; z-index: 99999;}/*ie6*/ .popup_block .close {background: url(images/btn-popup-close.png) 0 0 no-repeat transparent; float: right; height: 30px; position: absolute; bottom: -42px; right: 0; text-indent: -9999px; width: 90px;} /* Popup Styling */ #popup-a.popup_block {background: #1c2e40; padding: 20px 60px 10px 33px;} #popup-a.popup_block h2 {color: #fff; font-size: 2em; font-weight: bold; padding-bottom: 15px;} #popup-a.popup_block h3 {color: #fff; font-size: 1.5em;} #popup-a.popup_block .inner {background: #fff; border: 1px solid #c9c9c9; padding: 10px; height: 450px;} #popup-a.popup_block .inner .scrollable-content {height: 450px; width: 535px;} #popup-a.popup_block .bottom {padding: 10px 0 5px;} #popup-a.popup_block .bottom label {color: #fff; font-size: 1.1em; font-weight: bold;} #popup-a.popup_block .bottom label a {color: #edb723;} #popup-a.popup_block .jspPane p, #popup-a.popup_block .jspPane div {color: #333; width: 475px;} /* -------------------------------------------------------------------------------------------------------------- Pages -------------------------------------------------------------------------------------------------------------- */ /* ----- Home and show pages ----- */ #home #extras, .show-home #extras {background: url(images/bg-bfeature-main.png) transparent -650px 0 no-repeat; height: 261px; position: absolute; left: 650px; top: 29px; width: 310px;} #home #extras .module-ad, .show-home #extras .module-ad {border: none; margin: 0; padding: 0 0 0 9px;} #home #wrapper-main #main, .show-home #wrapper-main #main {height: 275px; min-height: 275px; padding: 29px 0 0 0; width: 650px;} .show-home #wrapper-main #main {height: auto;} #home #main-2 .module-feature ul, .show-home #main-2 .module-feature ul {min-height: 343px;} #article.show-home #wrapper-3 #main .text {border: none; margin: 0; padding: 0;} /* ----- Show Home ----- */ .show-listing {clear: both; padding: 40px 0 60px 18px;} .show-listing dt {} .show-listing dd {margin: 0 0 15px;} .show-listing a {text-decoration: none; text-transform: uppercase;} .show-listing a:hover {color: #a7bfd7;} .show-listing .column {float: left; width: 220px;} .show-listing .row .column {float: left; width: 216px;} .show-listing .row .no-heading {padding-top: 35px;} .show-listing .row .column-4 {padding: 0;} .show-listing .row .column dl {border-left: 2px solid #1b2e3f; margin: 0 0 30px; padding: 0 0 0 11px; width: 215px;} .show-listing dt.letter {color: #a8bfd9; padding: 0 0 10px;} #glossary #wrapper-main #main {border-bottom: 12px solid #000; padding: 31px 0 0 40px; width: 910px;} #glossary #wrapper-3 {border-left: 1px solid #fff; border-top: 1px solid #fff; padding: 10px 10px 0;} #glossary #title-wrapper {border: none;} /* ----- Show Cast ----- */ .cast-listing {} /* clear */ .cast-listing li {float: left; padding: 5px;} /* ----- Article page ----- */ #article h1 {padding: 0;} #article h2 {padding: 0 0 5px;} #article .image-left {float: left; margin: 0 20px 10px 0;} #article .image-right {float: right; margin: 0 0 10px 20px;} #article .image-center {clear: both; margin: 0 0 20px 0;} #article .image-left img, #article .image-right img {max-width: 278px;} #article .image-left .caption, #article .image-right .caption {max-width: 258px;} #article .box-d-a {padding: 0;} #article .box-d-a .caption {padding: 0 5px;} #article #wrapper-3 #main .text, #competition #wrapper-3 #main .text {border-left: 1px solid #fff; margin: 0 0 30px 0; padding: 10px 0 10px 10px;} .text p a, .text p a:hover, form a, form a:hover {color: #a7bfd7;} blockquote {background: url(images/bg-colour-a.png) 0 0 repeat transparent; border-bottom: 5px solid #000; clear: both; font-weight: bold; margin: 0 0 10px; padding: 20px 110px 20px 35px; position: relative; text-transform: uppercase; width: 483px;} blockquote p {font-size: 24px; line-height: 24px; padding: 8px 0;} blockquote .citation {color: #a7bfd7; font-size: 12px; line-height: 10px; padding: 0;} blockquote .citation cite {font-style: normal;} /* ----- Events page ----- */ .events-header {padding: 10px 0 0 0;} /* clear */ .events-header .social {float: left;} .events-header .events-listing {float: right;} .events-details {font-weight: bold; padding: 0 0 10px 0;} .events-details ul li {list-style: none;} .events-details .label {color: #a03c96; display: inline-block; padding: 0 5px 0 0; text-align: right; width: 78px;} .events-details .details {color: #663399;} .events-details .details a {color: #663399;} /* ---- Blog overview page ----- */ .blog-entry-boxes .box-date {float: left; margin: 0 9px 10px;} /* ----- Competition pages ----- */ #comp-winners #wrapper-main #main {padding: 0 13px 0 0; width: 306px;} #comp-winners #wrapper-main #main-2 {clear: none; float: left; padding: 0 15px 0 0; width: 624px;} #competition #title-wrapper {border-left: 1px solid #fff; border-bottom: none;} #competition .permit-numbers {font-size: 10px; font-weight: bold; padding: 0 0 5px; text-transform: uppercase;} #competition .text .box-e-b {color: #fff;} #competition .text ul, #comp-winners .text ul {padding: 10px 0 0;} #competition .text ul li, #comp-winners .text ul li, #comp-winners .module-comp-accordion .accordion-content ul li {font-weight: bold; height: 15px; line-height: 15px; padding: 0 0 15px 20px;} #comp-winners .module-comp-accordion ul li {height: auto; line-height: normal; padding: 0;} #competition #wrapper-3 #main .text {padding-bottom: 0; padding-top: 0;} #competition .social {padding-top: 10px;} /* ----- TV Guide ----- */ #tv-guide h1 {float: left; padding-top: 20px;} #tv-guide .link-other-channel {float: right; padding: 22px 0 0;} #tv-guide .bar {clear: both;} #tv-guide #guide-header {background: url(images/bg-epg-search.png) transparent bottom right no-repeat; height: 41px; padding: 10px 7px 0 0;} #tv-guide #guide-header .foxtel {float: left; padding: 0 10px 0 0;} #tv-guide #guide-header .notice-board {float: right;} #tv-guide #guide-header .notice-board .icon-foxtel-medium {background-position: -578px 3px; height: 21px;} #tv-guide #guide-header #search-box-tv-guide {float: right; padding: 3px 15px 0 0;} #tv-guide #guide-header #search-box-tv-guide ul {width: 293px;} #tv-guide #guide-header #search-box-tv-guide ul li .search-button {float: right;} #tv-guide #guide-header #search-box-tv-guide ul li #search-bar-epg {float: left; width: 257px;} #tv-guide-tcc {border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-top: 1px solid #fff; clear: both; margin: 0 0 20px 0; padding: 10px 0 0 10px;} /* clear */ #tv-guide-tcc .listing-date {background: url(images/bg-tv-guide-tcc-header-footer.png) 0 0 no-repeat transparent; color: #fff; font-size: 18px; height: 47px; line-height: 41px; position: relative; text-align: center; width: 646px; z-index: 3;} #tv-guide-tcc .listing-footer {background-position: 0 -51px;} #tv-guide-tcc .listing-container {float: left; width: 628px;} #tv-guide-tcc .listings {margin: 2px 0 1px 0; width: 628px;} #tv-guide-tcc .listings table {background: url(images/bg-colour-a.png) 0 0 repeat transparent; border-collapse: collapse;} #tv-guide-tcc .listings table tr {} #tv-guide-tcc .listings table tr td {border-bottom: 1px solid #2c3139; border-right: 1px solid #000; padding: 10px;} #tv-guide-tcc .listings table tr td.time {font-weight: bold; vertical-align: top;} #tv-guide-tcc .listings table tr td.icons {border-right: none; width: 38px;} #tv-guide-tcc .listings table tr td.icons .icon-rating {margin: 0 auto;} #tv-guide-tcc .listings table tr td.icons .feature-icons {padding: 7px 0 0;} #tv-guide-tcc .listings table tr td.icons .feature-icons li {float: left; padding: 0 2px 2px;} #tv-guide-tcc .listings h3 {color: #fff;} #tv-guide-tcc .listings h4 {color: #708fb2; text-transform: uppercase;} #tv-guide-tcc .listings-ads {float: left; padding: 0 0 0 21px; width: 300px;} #tv-guide-tcc .listing-footer {padding: 0 0 10px 0;} #win-homepage #wrapper-main #main {height: 300px; min-height: 300px;} #win-homepage #wrapper-main #main-2 {clear: none; float: left; padding: 0 15px 0 0; width: 624px;} /* ----- Competition Entry form ----- */ .entry-form {margin: 10px 0 0 0;} .entry-form .lights {width: 163px;} .entry-form .required {color: #fff;} .entry-form .required span, .entry-form fieldset label dfn {color: #a7bfd7;} .entry-form .content {padding: 0;} .entry-form .form-wrapper {padding: 10px 50px 20px 10px;} .entry-form fieldset {border: 0; margin: 0; padding: 0;} .entry-form fieldset div {clear: both; padding: 0 0 10px;} /* clear */ .entry-form fieldset label {color: #fff; display: block; font-weight: normal; float: left; padding: 0 10px 0 0; text-align: right; width: 150px;} .entry-form fieldset input, .entry-form fieldset textarea {float: left; width: 350px;} .entry-form fieldset fieldset input {width: 12px;} .entry-form fieldset fieldset label {padding: 0 0 0 10px; text-align: left; width: 335px;} .entry-form .button-wrapper {float: right; width: 86px;} .entry-form fieldset div.error label {border-left: 3px solid #a7bfd7; padding: 0 10px; width: 165px;} .entry-form fieldset div.error label em {color: #a7bfd7; display: block; font-weight: bold;} .entry-form fieldset div.error input, .entry-form fieldset div.error textarea {border: 3px solid #a7bfd7; width: 322px;} /* ----- Search results ----- */ #search-results .text {border-left: 1px solid #fff; padding: 10px 0 0 10px;} #search-results .byline {background-color: #000; color: #a8bfd9; height: 24px; margin: 0 0 10px; padding: 12px 10px;} #search-results .new-search {margin: 10px 0 0; padding: 9px 0;} #search-results .module-listing .listing .col-right {padding: 0 7px; width: auto;} /* --------------------------------------------------------------------------------------------------- Fonts -------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------- Clearing -------------------------------------------------------------------------------------------------------------- */ /* IE6 & IE7 */ /*ie*/ /* Modern Browsers */ #branding-nav:after, #nav-global ul.list:after, #content:after, #content .content-wrapper:after, .form dl:after, dl.list-a:after, .grid .row:after, #a-feature:after, #a-feature .media ul li:after, #b-feature .features ul:after, #b-feature .thumb-controls ul:after, .image-gallery .media ul:after, .image-gallery .media ul li:after, .facebook-comments .content:after, #wrapper-main #wrapper-3:after, .module-feature ul:after, .module-show-box-row ul:after, .module-tvguide .middle dl:after, .poll form:after, .cast-listing:after, .module-cast-members ul:after, .columns-2:after, .columns-3:after, .meganav .area .panel-button:after, #contentnav .contentnav-wrapper:after, #contentnav .nav ul:after, .events-header:after, #footer .copyright-info ul:after, .bar:after, .bar ul:after, .module-listing .listing:after, .entry-form fieldset div:after, #tv-guide-foxtel:after, #tv-guide-tcc:after, #tv-guide-tcc .listings table tr td.icons .feature-icons:after, #nav-global .meganav .area ul:after, .social:after, .clearfix:after {content: "."; display: block; height: 0; clear: both; line-height: 0; visibility: hidden;} /* ----- Div Clearing ----- */ div.cleaner {margin: -1px 0 0 0; height: 1px; clear: both; visibility: hidden;} div.cleaner hr {display: none;} @media only screen and (device-width: 768px) { /* For general iPad layouts */ #tv-guide #guide-header #search-box-tv-guide ul li #search-bar-epg { width: 245px; } } /* --------------------------------------------------------------------------------------------------- Magnolia B feature Carousel - Admin mode Hack -------------------------------------------------------------------------------------------------------------- */ #home.admin-mode #wrapper-main #main {height:auto;} .promoLogo { margin: -60px 0 0 30px; } .promoLogo > img { height:80px; width:130px; } .promoLogo > a > img { height:80px; width:130px; } .promoLogoRight > img { height:60px; width:100px; } .promoLogoRight > a > img { height:60px; width:100px; } .promoLogoRight { position:absolute; right:60px; top:95px; }