/* TVNZ Screen Stylesheet version: 1.0 date: 9/12/08 website: www.tvnz.co.nz author: Aim Proximity TABLE OF CONTENTS: 0.1 Import stylesheets Fundamental Styles: 1.0 Common 1.1 Links 1.2 Tables 1.3 Form Elements 1.4 Primary Colors Main Templates: 2.0 Header 2.1 Navigation 2.2 Container 2.3 Choose Medium 2.4 Footer ===========================================================*/ /* 0.1 Import stylesheets ===========================================================*/ @import url("reset.css"); /* Other imported styles have been removed to minimise HTTP requestes there styles have been added below */ /*==================================================================================================================== FUNDAMENTAL STYLES (Previously imported) ======================================================================================================================*/ /* Common */ * {font-family: Tahoma, Arial, Helvetica, sans-serif} body {background: #D6DFDE url('../images/bgRepeat.gif') repeat-x; padding: 0; margin: 0; color: #727567} h1, h2, h3, h4, h5 {font-family: Arial, Helvetica, sans-serif; font-weight: normal; line-height: normal} h1 /* 24px */ {font-size: 2em} h2 /* 20px */ {font-size: 1.67em} h3 /* 18px */ {font-size: 1.50em; color: #fff} h4 /* 16px */ {font-size: 1.33em} h5 /* 14px */ {font-size: 1.17em} .bold {font-weight: bold} .center {margin: auto} .float-left {float: left} .float-right {float: right} .clear-both {clear: both} .clear-left {clear: left} .clear-right {clear: right} .text-left {text-align: left} .text-center {text-align: center} .text-right {text-align: right} .middle {vertical-align: middle} .block {display: block} .inline {display: inline} .hide {display: none} .uppercase {text-transform: uppercase} .underline {text-decoration: underline} .line-height {line-height: normal} .border-zero {border: 0 none} body.popup {background: #fff} /* 1.1 Links ===========================================================*/ a:link, a:active, a:visited {color: #4A5F75} a:hover {color: #4A5F75; text-decoration: underline} /* Button */ a.button {background: url('../images/button.gif') top left no-repeat; color: #fff; display: inline-block; height: 21px; line-height: 21px; text-decoration: none; font-weight: normal} a.button span {background: url('../images/button.gif') top right no-repeat; display: block; padding: 0 20px 0 0; margin: 0 0 0 20px; white-space: nowrap; cursor: pointer; cursor: hand; font-size: 11px; font-family: tahoma, arial, sans-serif; color: #fff; font-weight: bold} a:hover.button {background-position: bottom left; text-decoration: none;} a:hover.button span {background-position: bottom right; text-decoration: none; color: #fff; text-decoration: none;} #footer .mainNav a:link, #footer .mainNav a:active, #footer .mainNav a:visited {font-size: 11px; text-decoration: none; color: #fff} #footer .subNav ul li a, #footer .subNav ul li a:link, #footer .subNav ul li a:active, #footer .subNav ul li a:visited {font-size: 11px; color: #B2B5BA; text-decoration: none} #footer .mainNav a:hover, #footer .subNav ul li a:hover {text-decoration: underline} .newsPanel a.moreNews {font-size: 11px; color: #E5997F; padding: 0 0 0 18px; margin: 0; display: block} .showPanel ul li a {color: #CDCCCF; text-decoration: none;} a.custom:link, a.custom:active, a.custom:visited {color: #4A5F75; font-weight: normal; text-decoration: none} a.custom:hover {color: #4A5F75; font-weight: bold; text-decoration: none} /* 1.2 Tables ===========================================================*/ .table {background-color: #000; margin: 0; padding: 0; border: 1px solid #1F2F46; border-top: none} .table th, .table td {color: #65b2ff; margin: 0; padding: 1px 2px; border: 1px solid #1F2F46} table.custom {margin: auto; width: 80%; border: 1px solid #999; border-collapse: collapse} table.custom td {border: 1px solid #999} table.custom th.col1, table.custom th.col2 {width: 120px} table.custom th.col3 {width: auto} table.custom th.col4 {width: 50px} table.custom th.col5 {width: 50px} /* 1.3 Form Elements ===========================================================*/ div#read div#feedback {display : none;} div#read div#suggest {display : none;} div#read div#share {display : none;} div#read div#nominate {display : none;} /* 1.4 Primary Colors ===========================================================*/ .black {color: #000} .blackBG {background-color: #000} .white {color: #FFF} .whiteBG {background-color: #FFF} .red {color: #F00} .redBG {background-color: #F00} /* Shades of Gray */ .veryLightGrey {color: #CCC} .veryLightGreyBG {background-color: #CCC} .nobel {color: #999} .nobelBG {background-color: #999;} .dimGray {color: #666;} .dimGrayBG {background-color: #666;} .nightRider {color: #333;} .nightRiderBG {background-color: #333} /* Custom Colours */ .carmine {color: #8A0917} .carmineBG {background-color: #8A0917} .supernova {color: #FFB03B} .supernovaBG {background-color: #FFB03B} .hillary {color: #A7A37E} .hillaryBG {background-color: #A7A37E;} .scotchMist {color: #EFECCA} .scotchMistBG {background-color: #EFECCA;} .darkGreen {color: #002F2F} .darkGreenBG {background-color: #002F2F} .blueLagoon {color: #046380} .blueLagoonBG {background-color: #046380} /*==================================================================================================================== MAIN STRUCTURE ======================================================================================================================*/ /* 2.0 Header ===========================================================*/ #headerBackground {background: url('../images/headerRepeat.jpg') top center no-repeat; width: 100%; margin: 0; padding: 0; height:240px; display: block} #header {background-color: #070213; width: 960px; margin: 0 auto; position: relative} /* Global Navigation */ #primaryBar {background: url('../images/global/barBg.gif') repeat-x; height: 20px; width: 100%; display: block; } ul#primaryNav {height: 29px; padding:11px 0 0 25px;} ul#primaryNav li {float: left; margin: 0 4px 0 0;} ul#primaryNav li a {float: left; display: block; text-indent: -9999px; height: 29px; background-position: top;} ul#primaryNav li a#navNews {background: url('../images/global/buttonNews.gif') no-repeat; width: 104px;} ul#primaryNav li a#navSport {background: url('../images/global/buttonSport.gif') no-repeat; width: 104px;} ul#primaryNav li a#navTelevision {background: url('../images/global/buttonTelevision.gif') no-repeat; width: 145px;} ul#primaryNav li a:hover#navNews, ul#primaryNav li a:hover#navSport, ul#primaryNav li a:hover#navTelevision, ul#primaryNav li a:hover, ul#primaryNav li a.selected {background-position: bottom !important;} /* Navigation */ .navigation {position: relative} #header .topNav {background-color: #1D2634; height: 26px; font-size: 11px; line-height: 26px} #header .topNav a {color: #B2B5BA; text-decoration: none} #header .topNav a:hover {text-decoration: underline} #header .topNav a#TVNZHome {display: block; float:left; width: 199px; height:26px; border-right: 1px solid #070213; text-indent: 15px} #header .topNav div.weather {display: block; float:left; width: 390px; height:26px; border-left: 1px solid #29374B; border-right: 1px solid #070213; text-indent: 18px; color: #dddee1; line-height: 16px; visibility: hidden} #header .topNav div.weather .location {text-transform: capitalize} #header .topNav div.weather a {color: #BC9B57; margin: 0 0 0 10px; font-size: 10px} #header .topNav div.weather img {margin: 0 0 -8px 0} #header .topNav div.weather span {margin: 0 0 0 4px} #header .topNav div.weather span.low {border-left: 1px solid #B2B5BA; padding: 0 0 0 8px} #header .topNav div.weather span.high strong {color: #c30} #header .topNav div.weather span.low strong {color: #39c} #header .topNav ul li {display: block; float: left; padding: 0 15px; border-left: 1px solid #29374B; border-right: 1px solid #070213} #header .topNav ul li.last {border-right: none; padding: 0 0 0 15px} /* Banner */ #header .topBanner {height: 120px; position: relative} #header .topBanner a#logo {position: absolute; top: 0; left: 25px} #header .topBanner .ad {text-align: right; float: right; display: block; width: 760px; height: 120px} #header .topBanner .ad .promo {float:left;padding:15px 13px} /* Search */ a#WatchEpisodesButton {background: url('../images/global/watchEpisodesBtn.jpg') no-repeat; position:relative; top: 11px; left: 133px; display: block; text-indent: -9999px; width:113px; height: 23px;} a:hover#WatchEpisodesButton {background: url('../images/global/watchEpisodesBtnHover.jpg') no-repeat} span.divide {display: block; width: 1px; height: 37px; position: relative; left: 260px; top:-20px; background: url('../images/global/searchDivide.gif') no-repeat} #header .search {display:block; height:40px; position:absolute; right:0; width:550px;} #header .search form {margin:0; padding:0; position: absolute; top: 11px; right:10px;} #header .search form input {float: left} #header .search form input.searchField {border: 1px solid #fff; width: 187px; height: 16px; padding: 3px 0 0 3px; margin: 0 10px 0 0; color: #74A4A5; font-size: 11px} #header .search form input.searchField:focus {border: 1px solid #2cb7ca; color: #000} #header .search form .searchButton {background: url('../images/headerSearchButton.gif') no-repeat; height: 21px; width: 62px; border: none; cursor: hand; cursor: pointer; color: #fff; font-size: 0} #header .search .affairs {background: url('../images/headerSearchSelect.gif') top no-repeat; display: block; width: 202px; height: 21px; color: #fff; text-decoration: none; font-size: 11px; font-weight: bold; line-height: 21px; text-indent: 10px} #header .search .affairsBG {background: url('../images/headerAffairsBG.gif') no-repeat 0 37px; width: 210px; height: 29px; position: absolute; right: 0; margin: 0 5px 0 0; top: 3px; padding: 8px 0 0 7px} #header .search .affairsBG.selected {background-position: 0px 0px} #header .search .selected .affairs {background: url('../images/headerSearchSelected.gif') top no-repeat} #affairsContent {background-color: #1D2634; display: none; padding: 0 5px; overflow: hidden; position: absolute; top: 0; margin: 0px; left: 0} #affairsContent .content {width: 950px; padding: 0 0 10px 0; left bottom repeat-x; overflow: hidden} #affairsContent .content {width: 950px; padding: 0 0 10px 0; background: #1D2634 url('../images/affairsBG.gif') left bottom repeat-x; overflow: hidden} #affairsContent .content .item {width: 140px; margin: 10px 6px; float: left; height: 56px; overflow: hidden} #affairsContent .content .item .title, #affairsContent .content .item .date, #affairsContent .content .item .link {font-size: 11px; line-height: 14px} #affairsContent .content .item .title a {color: #D96640; font-weight: bold; text-decoration: none} #affairsContent .content .item .title a:hover {text-decoration: underline} #affairsContent .content .item .date, #affairsContent .content .item .link {color: #CAD5D3} #affairsContent .content .item .link a {color: #E5997F} /* 2.1 Navigation ===========================================================*/ /* Main menu */ .navigation {z-index: 10} .navigation .mainNav {background: #547272 url('../images/mainNav.gif') center top repeat-x; height: 32px} .navigation .mainNav ul {list-style: none; padding: 0; margin: 0 0 0 10px} .navigation .mainNav ul li {float: left; display: block} .navigation .mainNav ul li a {font-family: Arial, Helvetica, sans-serif; color: #DAE1E1; float: left; display: block; text-decoration: none; font-size: 13px; height: 32px; line-height: 32px; padding: 0 28px} /*.navigation .mainNav ul li a span {padding: 0 29px 0 0; display: block; font-family: Arial, Helvetica, sans-serif}*/ .navigation .mainNav ul li a:hover {background-color: #466060} .navigation .mainNav ul li a.selected:hover, .navigation .mainNav ul li a.selected {background: #EBEFEF url('../images/headerNav.gif') left top no-repeat; color: #727567; margin: 3px 0 0 0; height: 29px; line-height: 29px} /*.navigation .mainNav ul li a.selected span {background: #EBEFEF url('../images/headerNav.gif') right top no-repeat}*/ .navigation .mainNav ul li span.split {background: #4b6768 url('../images/mainNav.gif') center bottom repeat-x; height: 32px; width: 1px; display: block} /*Sub Menu*/ .navigation .subNav {background: #FFFFFF url('../images/global/subNavBg.gif') repeat-x; height: 34px;} .navigation .subNav ul {list-style: none; padding: 0; margin: 0 0 0 10px} .navigation .subNav ul li {display: block; float: left; background: url('../images/global/subNavDivide.gif') top right no-repeat;} .navigation .subNav ul li.last {background: none;} /*.navigation .subNav ul li span.split {display: none; background: url('../images/global/subNavDivide.gif') top center repeat-x; display: block; height: 29px; width: 1px}*/ .navigation .subNav ul li a {font-family: Arial, Helvetica, sans-serif; display: block; float: left; padding: 0 19px; line-height: 29px; font-size: 12px; text-decoration: none; color: #5f6156} /*#727567*/ .navigation .subNav ul li a span {font-family: Arial, Helvetica, sans-serif; cursor: pointer} .navigation .sportsNav ul li a {padding: 0 19px} .navigation .subNav ul li a:hover {background: url('../images/global/subNavBg.gif') center -34px repeat-x} .navigation .subNav ul li a.selected {background: url('../images/global/subNavBg.gif') center bottom repeat-x} .navigation .subNav ul li a.selected span {background: url('../images/subNavArrow.gif') bottom right no-repeat; display: block; float: left; height: 33px} /* 2.2 Container ===========================================================*/ #container {width: 100%; position: relative} #container #main {background-color: #fff; width: 960px; margin: 0 auto; padding:0; position: relative} /* Every style that should be used within #main should be in extras.css */ #container #main hr {border: none; border-top: 1px dashed #E8EDEC; height: 1px; margin: 6px 0; clear: both;} #container #main hr.hrWidth {margin: 5px 10px} /* 2.3 Choose Medium (How would you like your news?) ===========================================================*/ #chooseMedium {padding: 10px 0; border-top: 1px dashed #E8EDEC; border-bottom: 1px dashed #E8EDEC; clear: both; overflow: hidden; width: 940px; margin:10px 10px 0} #chooseMedium h4 {background: url('../images/chooseMediumTitle.gif') no-repeat; color: #D2BD46; text-indent: -9999px; display: block; width: 283px; height: 24px} #chooseMedium hr {border: none; border-top: 1px dashed #E8EDEC; height: 1px} #chooseMedium .box {display: block; float: left; width: 180px; padding: 0 4px 0 3px; font-size: 10px; color: #727B87; line-height: 1.2em; border-left: 1px solid #E8EDEC} #chooseMedium .first {border: none} #chooseMedium .box a.img {border-right: 1px solid #E8EDEC; margin: 0 6px 0 0; float: left; display: block; height: 55px; width: 40px; text-align: center} #chooseMedium .box h6 {padding: 0 0 4px 0} #chooseMedium .box h6 a {color: #D96640; font-size: 11px; text-decoration: none} #chooseMedium .box h6 a:hover {text-decoration: underline} #chooseMedium .box p a {text-decoration: none; color: #727567} /* 2.4 Footer ===========================================================*/ #footerBackground {background: url('../images/footerRepeat.jpg') bottom left repeat-x; width: 100%} #footer {background: url('../images/footerBG.jpg') top left repeat-x; width: 962px; margin: 0 auto; position: relative} /* Navigation */ #footer .mainNav {background: url('../images/footerSplit.jpg') 1px 12px no-repeat; padding: 12px 1px 0px 1px; margin: 0px; font-size: 11px; height: 166px} #footer .mainNav .footerColumn {background: url('../images/footerSplit.jpg') top right no-repeat; padding: 13px; height: 140px; width: 294px; float: left} #footer .mainNav .footerTitle {padding-bottom: 15px; font-weight: bold; color: #D2BD46} #footer .mainNav .footerTitle a {font-weight: bold; color: #D2BD46} #footer .mainNav .footerColumn ul {list-style: none; padding: 0; margin: 0} #footer .mainNav .footerColumn ul li {background: none; float: left; width: 147px; font-weight: normal; line-height: 15px} /* Sub Navigation */ #footer .subNav {background-color: #1D2634; height: 36px; text-align: center} #footer .subNav ul {list-style: none; margin: 0 auto; padding: 14px 0 0 0; width: 850px} #footer .subNav ul li {float: left; display: block; color: #B2B5BA; font-size: 11px; border-right: 1px solid #B2B5BA; padding: 0 10px 1px 0; margin: 0 0 0 10px} #footer .subNav ul li.last {border: none} div#copyright {font-size:11px; color:#9C9E94; margin:30px 10px 0 10px; padding:0 0 10px 0; text-align:center} div#copyright h1 {font-size:11px !important; color:#9C9E94; display: inline} #idTracking {position: absolute; top: -9999px; left: -9999px} .main_nav_container { height: 40px; background: #527173; } .portable_main_nav { height: 20px; background: #527173; font: 10px Arial; color: #BDCBC8; } .portable_nav { padding: 3px 4px; } .portable_nav a { color: #BDCBC8; } .portable_nav_highlight { padding: 3px 4px; } .portable_nav_highlight a { color: #FFF; }