/*
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:  Arial, Helvetica, sans-serif}
body														{background: #D6DFDE url('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: #B2B5BA;font-size:12px;}
a:hover														{color: #B2B5BA; text-decoration: underline}

/* Button */
a.button													{background: url('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('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.1	Navigation
===========================================================*/	
/*Sub Menu*/
.secondLevelNav												{background: #FFFFFF url('subNavBg.gif') repeat-x; width: 960px; margin: 0 auto; height: 34px;}
.secondLevelNav ul 											{list-style: none; padding: 0; margin: 0 0 0 10px}
.secondLevelNav ul li										{display: block; float: left; background: url('subNavDivide.gif') top right no-repeat;}
.secondLevelNav ul li.last									{background: none;}
.secondLevelNav 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*/
.secondLevelNav ul li a span								{font-family: Arial, Helvetica, sans-serif; cursor: pointer}
.sportsNav ul li a											{padding: 0 19px}
.secondLevelNav ul li a:hover								{background: url('subNavBg.gif') center -34px repeat-x}
.secondLevelNav ul li a.selected							{background: url('subNavBg.gif') center bottom repeat-x}
.secondLevelNav ul li a.selected span						{background: url('subNavArrow.gif') bottom right no-repeat; display: block; float: left; height: 33px}

/*tertiary Menu*/
.tertiaryNav												{background: #FFFFFF url('subNavBg.gif') repeat-x; height: 34px;}
.tertiaryNav ul 											{list-style: none; padding: 0; margin: 0 0 0 10px}
.tertiaryNav ul li											{display: block; float: left; background: url('subNavDivide.gif') top right no-repeat;}
.tertiaryNav ul li.last										{background: none;}
.tertiaryNav 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*/
.tertiaryNav ul li a span									{font-family: Arial, Helvetica, sans-serif; cursor: pointer}
.tertiaryNav ul li a:hover									{background: url('subNavBg.gif') center -34px repeat-x}
.tertiaryNav ul li a.selected								{background: url('subNavBg.gif') center bottom repeat-x}
.tertiaryNav ul li a.selected span							{background: url('subNavArrow.gif') bottom right no-repeat; display: block; float: left; height: 33px}


/*Magazine tertiary Menu*/
#magazinePage .tertiaryNav									{background: #FFFFFF url('magazine_menu_bg.gif') repeat-x; height: 29px;}
#magazinePage .tertiaryNav ul#nav							{overflow:hidden; width:100%; margin: 0 0 0 10px}
#magazinePage .tertiaryNav ul#nav li						{height:29px; line-height:24px; display:block; float:left; background:url('magazine_menu_divider.gif') right top no-repeat; padding:0 2px 0 0}
#magazinePage .tertiaryNav ul#nav li.last					{background:none}
#magazinePage .tertiaryNav ul#nav li a						{color:#666; text-decoration:none; display:block; font-family:Arial, Helvetica, sans-serif;  padding:0 11px; font-size:12px; font-weight:bold; padding:0;  margin:0 4px}
#magazinePage .tertiaryNav ul#nav li a span					{line-height:27px; margin:0 5px 0 0; padding: 6px 0 6px 5px; font-family:Arial, Helvetica, sans-serif}
#magazinePage .tertiaryNav ul#nav li a:hover,
#magazinePage .tertiaryNav ul#nav li a.selected				{color: #FFF; background:url('magazine_nav_select.gif') right 4px no-repeat}
#magazinePage .tertiaryNav ul#nav li a:hover span,
#magazinePage .tertiaryNav ul#nav li a.selected span 		{color: #FFF; background:url('magazine_nav_select.gif') left 4px no-repeat}



/* 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('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('footerRepeat.jpg') bottom left repeat-x; width: 100%}
#footer														{background: url('footerBG.jpg') top left repeat-x; width: 962px; margin: 0 auto; position: relative}
/* Navigation */
#footer .mainNav 											{background: url('footerSplit.jpg') 1px 12px no-repeat; padding: 12px 1px 0px 1px; margin: 0px; font-size: 11px; height: 166px}
#footer .mainNav .footerColumn								{background: url('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 {
	overflow:hidden;
	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;
}