@charset "utf-8";
/* CSS Document */

@import url(reset.css);
@import url(rdm_banner.css); /* Rogers Media branding bar */

body {
	background-color: #333;
	color: white;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	}

a:link, a:visited {
	color: #99CCFF;
	text-decoration: none;
	}
a:hover {
	text-decoration: underline;
	}
/* turns all links relating to current language to a special character - for design & usability purposes */
.related-to-currlang a:link, .related-to-currlang a:visited {
	color: #ffcc33; /* should match .current-color */
	}
div.related-to-currlang {
 	height: auto;
	padding: 0;
	margin: 0;
	}


/* Masthead / Main Header Related */
/* NOTE: masthead contains ONLY rdm banner & ad now, doesn't contain actual banner anymore (for new design & IE bug purposes) */
/**********************************/
div#masthead-container {
	width: 990px; /* 970px plus 10px each side to represent white 10px borders */
	height: auto;
	margin: 0px auto;
	border: none;
	padding: 0px;
	text-align: center;
	}

img#news-banner {
	display: block; /* necessary as IE6+7 treats images as inline by default & will add extra space after it */
	border: none;
	margin: 0;
	padding: 0;
	}

div#ad-row {
	width: 100%;
	height: 106px; 
	position: relative; /* makes this a containing block that enables easy positioning of child elements (children will use 'absolute') */
	}

#newsbanner {
	width: 100%;
	height: auto;
	border: none;
	}
#newsticker {
	width: 100%;
	height: auto;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;	
	}

div.ad-top-wide { /* banner ad in masthead, supposed to be 728px x 90px*/
	position: absolute;
	left: 121px;
	top: 8px;  /* height of containing logo-row minus height of ad, divided by 2 for top and bottom margin */
	/* border: 1px solid white; */
	background: black;
}

/* wide ad banner in header for videoplayer pop up page only */
div.ad-top-wide-videopage {
	position: absolute;
	left: 225px;
	top: 35px;
	background: black;
}

/* Side Ad area */
/*****************/	
div#ad-container {
	width: 302px; 
	float: right;
	background-color: black; /* #666;*/
	padding: 6px 9px; /* SHOULD be 9px all around but for some reason extra margin is inserted above any divs this element contains; thus, we compensate */
	overflow: auto;
	}
#ad-container img {
/*	float: right;
	clear: right; */
	padding-bottom: 10px;
	}



/********************
BODY CONTENT GENERAL STUFF
banner, container for all actual content, footer
*********************/
div#body-container, div.body-container {
	width: 990px;
	height: auto;
	background-color: black;
	position: relative;
	margin: 0 auto;
	}
/* adds white l & r borders to the main body. Why so clumsy? We had to put the page banner inside body-container cuz if we put it in a
spearate div, IE would add an extra space after it. Only solution was to put inside the same body container div */
.body-container .white-borders {
	width: 970px;
	border-left: 10px solid #FFF;
	border-right: 10px solid #FFF;
}

/* The home & contact us links laid over the graphic banner */
span#banner-linktext {
	position: absolute;
	right: 150px;
	top: 30px;
	}
span#banner-linktext a:link, span#banner-linktext a:visited {
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	}	
span#banner-datetext {
	position: absolute;
	right: 30px;
	top: 115px;
	text-transform: uppercase;
	font-size: 20px;
	font-family: Helvetica, arial, verdana, sans-serif;
	}
	
/* The general header styling used on all page boxes/titles */
h1.box-header {
	width: 100%;
	height: 19px;
	background: #033361 url(/images/common/header_bg.jpg) left top repeat-x;
	position: relative;
	}
.box-header span {
	font-size: 13px;
	font-weight: 800;
	color: white;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	top: 2px;
	left: 24px;
	}	

/* Footer */
/**********/
div#footer-bar {
	width: 100%;
	background-color: #333;
	padding: 0;
	clear: both;
	text-align: center;
	border-bottom: 1px solid black;
	}


/*******************************
GENERAL BOXES & CONTAINERS & lotsa tags that affect content too
********************************/

#content-container .news-body {
	background: #16233A url(/images/news/menu_bg.jpg) -15px -115px repeat; /* CAREFUL! These offsets allow OMNI NEWS logo img to align with bg! */
	padding: 0px;
	/* position: relative; */
	}

#content-container p{
	line-height: 1.4;
	margin-top: 12px;
	margin-bottom: 12px;
	}
	
/* specifies the color used to id boxes related to current language. eg, all boxes with yellow are current lang, rest are generic to all langs */
.current-color {
	color: #ffcc33; 
}

/* CURVED CORNER BOXES USED ON NEWS PAGES */
.boxoverall {
	width: auto;
	/* the below IE hack to add a height is cuz IE adds a space above some boxoverall divs when nested in certain cases if height is auto.
	So, we added a specific height (which IE treats like min-height anyway) to get rid of it */
	height: auto!important;height:20px;
	background-color: #333333;
	padding: 0;
	margin: 0px 0px 8px 0px;
	}

/* smaller boxes that are 3 to a row on news page */
.triple-box {
	width: 203px;
	float: left;
	margin-right: 9px;
}
.double-box {
	width: 415px;
	float: left;
	margin-right: 9px;
	}
/* need to specify fixed height for boxes to keep clean lines */	
.triple-box .boxcontent, .double-box .boxcontent {
	height: 200px;
	overflow: auto;
	}
.short-triple-box .boxcontent {
	height: 165px;
	}
.short-double-box .boxcontent {	
	height: 315px;
	}
/* the last triple box, so it needs no right margin */
.last-box {
	margin-right: 0px;
	}

/* Related specifically to the rounded corners used */
.boxcornerrow { 
/* creates 'container' that specifies height that the corner divs can sit in & inherit height from. Works well for IE6, not necess otherwise */
/* also creates space between the corners, in effect like padding (since padding messes up corner divs in IE6, even with abs positioning */
	height: 10px;
	width: 100%;
	border: 0;
	padding: 0;
	}
.boxcornerrow div { /* applies vals to the actual corner divs */
	width: 100%;
	height: 100%;
	}	

.silver-header {
	height: 39px;
	background: #666666 url(/images/common/header_triplebox.jpg) left top no-repeat;
	}

.boxtopleft {
	background: url(/images/common/corner_tl.gif) left top no-repeat;
}
.boxtopright {
	background: url(/images/common/corner_tr.gif) right top no-repeat;
}
.boxbottomleft {
	background: url(/images/common/corner_bl.gif) left bottom no-repeat;
}
.boxbottomright {
	background: url(/images/common/corner_br.gif) right bottom no-repeat;
}
.boxcontent {
	padding: 0 10px;
	}
.boxcontent p, .boxcontent ul {
	margin: 0;
	padding: 1px 0px 3px 0px;
	line-height: 1.2;
	}	
.boxcontent h2, .boxcontent h1, .boxcontent h3 {
	padding-top: 5px; /* this should be same .boxcontent p but for some reason needs more just to look the same */
	}	
.boxcontent ul li {
	margin: 0;
	padding: 0;
	line-height: inherit;
	}
h1.headlineheader {
	margin: 8px 10px 4px 12px; /* ideally, left/right matches padding on .boxcontent so that it has same indent as content text */
	text-transform: uppercase;
	font-size: 16px;
	font-weight: bold;
	}
h2.headlineheader, .silver-header a {
	margin: 0;
	padding-left: 10px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	}		
h2.headlineheader a, h2.headlineheader a:visited, h2.headlineheader a:hover, .silver-header a, .silver-header a:visited, .silver-header a:hover {
	color: #ffcc33;
	}
.silver-header a {
	display: block;
	padding: 20px 0px 5px 18px; /* left-padding is equiv to margin 10px on words & 8px on containing div; we can't use margin tho messes up layout in FF */
	}	
/* divider btwn title & content in the general purpose boxes */
.boxdivider03, .boxdividercurr , .boxdividertabs {
	height: 10px;
	color: #464646;
	background-color: #464646;
	border: none;
	/*	margin: 0!important;margin: -7px 0; */
	padding: 0px;
	overflow: hidden;
	}
/* color of divider for current language (ie, highlighted) boxes */
.boxdividercurr {
	background-color: #ffcc33; /* yellow */
	}
/* color of .boxdivider03 for news tabs (unselected) and also general boxes like Featured Stories & Sports */
.boxdividertabs {
	background-color: #87b4e0; /* this is the link color 99ccff with brightness value turned down */
	}

/* The box with links to other areas, usually follows content on each page. eg, "More OMNI News" "More South Asian" */
.morelinks h4 {
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1.4;
	font-weight: bold;
	margin: 8px 3px;
	}

/* specifies space around the main text from stories pulled out of DB. eg, feature & web stories */
/* Note, should roughly match the p & h1 margins/padding. Prob is these are set multiple times. See .content-body p & other rules below. also .boxcontent p above */
.standard-story-text {
	margin: 0 6px 6px 6px;
	}

/******************
SHARE / FEEDBACK / PRINT BAR
**********************/
.share-bar {
	width: auto;
	height: 35px;
	background-color: #222;
	color: white;
	font-size: 10px;
	text-align: right;
	padding: 5px 10px 1px 10px;

	}	
.share-bar a:link, .share-bar a:visited {
	color: white;
	}
.share-bar * {
	vertical-align: middle;
	}	


/*********************/
/* NEWS OUTLOOK TABS */
/*********************/
/* initially we repurposed the general curved boxes (.boxcornerrow etc) to create the curved tabs.
 however, now we are using graphical tabs to acommodate designer's vision */
.news-tab { 
	width: 124px;
	height: auto;
	float: left;	
	border-right: 2px solid black;
	}
.last-tab {
	width: 123px;
	border: none;
	}
.news-tab .tab-curr {
	height: 42px;
	background: #606063 url(/images/common/header_newstab_curr4a.jpg) left top no-repeat;
}

.news-tab .tab-normal {
	height: 42px;
	background: #606063 url(/images/common/header_newstab_regular.jpg) left top no-repeat;
	}

.news-tab a:link, .news-tab a:visited {
	font-size: 12px;
	text-transform: uppercase;
	color: white;
	font-weight: bold;
	
	display: block;
	padding: 20px 0px 0px 0px;
	text-align: center;
	}	
.news-tab a:hover {
	color: #ffcc33;
	}

/* adjust tab width for the videoplayer page since it has an extra tab for the OMNI Hits section */
#videoplayer-tabs .news-tab {
	width: 103px;
	}
#videoplayer-tabs .last-tab {
	width: 102px;
	}	

/******************************/
/* Sidebar NEWS HEADLINES Box */
#ad-container .boxoverall {
	width: 300px;
	}
ul#newsheadlines { 
	list-style: outside disc;
	margin: 10px 5px 10px 18px;
}
#newsheadlines p {
	margin: 10px 0;
	}
#newsheadlines .headlines-title {
	font-style: italic;
	}
h3.headlines-morelink {
	text-transform: uppercase;
	text-align: center;
	font-size: 120%;
	}
.showstate img {
	display: inline;
	padding-right: 2px; 
	vertical-align: text-top;
	}
.switchcontent-link {
	cursor: pointer; /* this is a hand.  Using cursor: hand is unreliable */
	}
	
/************************/	
/* NEWS OUTLOOK CONTENT */

/* text & logos at the top of the outlook box. eg, title, language, airtime */
/* we need this as it provides a nice container to position the elements inside of it. 
Just floating the elements directly without a container causes positioning issues with other elements like the horizontal rule line that follows */
div.outlook-header {
	height: 55px;
	position: relative;
	}
.outlook-header span.air-time-line1, .outlook-header span.air-time-line2 {
	position: absolute;
	right: 57px;
	}
.outlook-header span.air-time-line1 {
	top: 13px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 15px;
	}
.outlook-header span.air-time-line2 {
	top: 27px;
	font-size: 18px;
	}	
.outlook-header h1 {
	position: absolute;
	top: 4px;
	margin: 0;
	padding: 0;
	}
/* News Outlook box's header (the breadcrumbs/title text) */
#news-outlook-content h1 {
	text-transform: uppercase;
	}	


/***************/
/* VIDEOPLAYER */

/* holds the videoplayer (not tabs) */
div#videoplayer {
	width: 606px;
	margin-left: auto;
	margin-right: auto;
	}
/* the bar that holds the tabs */
div#videotab {
	width: 606px;
	margin-left: auto;
	margin-right: auto;
	height: 50px; /* height of #videotab a multiplied by # of rows of videotab a's */
	background-color: black;
	}
/* the tabs */
#videotab a {
	display: block;
	float: left;
	background: black url(/images/videoplayer/videotab_gen.jpg) left top no-repeat;
	color: white;
    width: 101px;
    height: 25px;
    text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 2.2; /* this is to simulate padding-top on text */
    }
#videotab a:link, #videotab a:visited {
	color: white;
	text-decoration: none;
}
#videotab a:hover {
	color: white;
	text-decoration: underline;	
	background: #333 url(/images/videoplayer/videotab_curr.jpg) left top no-repeat;
	}


	
/* TALENT PROFILES */

/* The text in the yellow bar on front page indicating current ethnicity */
span#talent-profiles {
	font-size: 10px; 
	position: relative; 
	top: 1px; 
	left: 16px;
	}

/* GENERAL FRONT PAGE CONTENT RELATED */

/* used to create the lists in the front page box, such as under feature stories & web stories lists */
.frontpage-list {
	padding: 0 0 3px 0;
	margin: 10px 5px 5px 6px;	
	}
.general-list {
	border-bottom: 1px solid #99CCFF; /* div's bottom border is blue */
	}
.currentlang-list {
	border-bottom: 1px solid #FFCC33; /* div's bottom border is yellow */
	}	
.frontpage-list h4 {
	text-transform: uppercase;
	font-weight: bold;	
	color: white;
	margin: 0;
	padding: 0;
	}
.frontpage-list h5 {
	padding: 0;
	margin-top: 3px;
	}





/* Main Content Area */
/*********************/
div#content-container {
	width: 647px; /* leave 3px below max width when combined with ad-container */
	background-color: black;
	margin: 0 3px 0 0;
	float: left; /* shouldn't be necessary, but if removed then big ads push down half of front page content starting after quad tv boxes */
	}
div#content-container+div#ad-container {
	width: 1000px;
	}
#content-container:after { /* ensures container will expand to contain floated columns - compliant browsers would not do so normally */
	content: "."; 
	display: block; 
	height: 0; 
	font-size:0; 
	clear: both; 
	visibility:hidden; 
	} 	

/* cannot use this on News Ontario page, since now the content body bg and the content boxes have diff bg color */
/*
#content-container div {
	
	background-color: #333;
	}
*/
/* This makes content-container div expand to fill height to 100% (used eg, when ads are taller than content). 
We could not use these values on the homepage.  Due to the layout of homepage content, the side ads would
cause the content to be split up unless content container div was floated.  But if that's floated, then can't use
height 100% since floated elements are taken out of flow and thus have no "parent" container to expand into. */
#not-homepage div#content-container {
	float: none;
	clear: left;
	height: 100%;
	}
/* for Internet Explorer */
/*\*/
* html #content-container .content-body {
	/* height: 500px; NO LONGER NEED THIS AS ALWAYS HAVE CONTENT ON PAGE*/
}
/**/
	

/* IMPORTANT */
/* Deals with actual text content inside each of the page's content boxes */
/* Do all of your styling here for typical elements like p, lists, titles, etc */
div.content-body { 
/* this is used to add padding around content inside each box. The box itself cannot have padding directly, since the header/title needs 100% width */	
/* CAREFUL - THIS CLASS MAY BE FURTHER ALTERED inside other boxes using cascading */
	padding: 6px 10px 10px 10px;
	min-height: 300px;
	}
.content-body h1, .content-body h2, .content-body h3, .content-body p, .content-body ul, .content-body li {
	margin: 8px 6px;
	line-height: 1.2;
	}
.content-body ul li {
	list-style: inside square;
	margin: 10px 10px;
	}
.content-body ol li {
	list-style: inside decimal;
	margin: 10px 10px;
}

.content-body h1 {
	font-size: 16px;
	font-weight: 800;
	}
.content-body h2 {
	font-size: 13px; /* make this match the font size used for box-header (ie, the header used in most boxes) */
	font-weight: 800;
	}			
.content-body h3 {
	font-weight: 800;	
	}
.content-body:after { /* ensures container will expand to contain floated columns - compliant browsers would not do so normally */
	content: "."; 
	display: block; 
	height: 0; 
	font-size:0; 
	clear: both; 
	visibility:hidden; 
	} 

/* used for thumb nail images in typical list pages like tv show programming lists, feature story lists, etc 
where you have a thumb on left next to a text summary */
img.list-thumb {
	clear: left;
	float: left;
	margin: 8px 6px; /* should be same as or similar to <p> under content-body, esp the left-right margin */
	}

/* contains the little nav text, breadcrumbs, print icon, etc that appear above main text on article pages */
.content-navtext {	
	font-size: 9px;
	margin: 10px 6px;
}

/********************************************

General table design used on internal pages for listing shows with thumbnails. 
Assumes picture on left, text on right.

*********************************************/
table.general-listing {
	margin: 8px 6px;
}
td.image-cell {
	vertical-align: top;
}
td.image-cell img {
	margin: 9px 0;
	}
td.text-cell {
	vertical-align: top;
}

hr.item-separator {
	/* color & bg-color must be same as the containing element, thus allowing border color to be the line */
	color: #333; 
	background-color: #333; 
	border: 1px dotted #999; 
	border-style: none none dotted;
}



/******************
* POLLS RELATED 
*******************/
.poll-view {
	border-collapse: collapse;
	width: 400px;
	background-color:black;
	border-left: 1px solid #666;
	border-top: 1px solid #888;
	border-right: 1px solid #222;
	border-bottom: 1px solid #111;
	}
.poll-view th {
	background-color: black;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	padding: 12px;
	}
table.poll-view-items {
	width: 100%;
	}
.poll-view-items tr {
	border: 1px solid #CCC;
	}
.poll-view-items td {
	background-color: #fff;
	color: black;
	padding: 8px;
	text-align: left;
		border-bottom: 1px solid #CCC;
	}
.poll-view-items td#poll-submit {
	text-align: center;
	background-color: #222;
	padding-bottom: 12px;
	}	
.poll-result-items td {
	padding-left: 20px;
	text-align: left;
	border-bottom: 1px solid #CCC;	
	}
.front-result-item td, .links-to-other-polls td {
	text-align: left; /* without this, IE6 center aligns everythign! */
	}