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

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

body {
	background: #336598 URL(/images/common/body_bg.jpg) top right no-repeat;
	/* background-color: #16233A; */
	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;
	}

div#body-container {
	border-left: 1px solid black;
	border-right: 1px solid black;	
	width: 970px;
	background-color: #666;
	position: relative;
	margin: 0 auto;
	}

	
/* 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;
	clear: both;
	text-align: center;
	border-bottom: 1px solid black;
	}


/* Masthead / Main Header Related */
/**********************************/
div#masthead-container {
	width: 100%;
	clear: both;
	}

div#logo-row {
	width: 100%;
	background: url(/images/common/masthead_bg.jpg) top left repeat;
	height: 106px; 
	position: relative; /* makes this a containing block that enables easy positioning of child elements (children will use 'absolute') */
	}

img#logo {
	border: none;
	}

#mainmenu {
	height: 26px;
	width: 100%;
	}
/* 	
ul#mainmenu {
	height: 26px;
	width: 100%;
	}
#mainmenu li {
	float:left;
	display: block;
	margin: 5px 20px 0 20px;
	text-transform:uppercase;
	font-weight: 800;
	}
*/
div.ad-top-wide { /* banner ad in masthead, supposed to be 728px x 90px*/
	/* width: 728px;
	height: 90px;
	*/
	float: right;
	position: absolute;
	right: 10px;
	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;
}


/* Upper Row containing splash image, what's on, etc */
/*****************************************************/
div#splash-row {
	clear: both;

	}
#splash-row div	{ /* ensures all divs in row have proper top/bottom margins */
	margin-top: 3px;
	margin-bottom: 3px;
	}
	
div.splash-box {
	width: 460px;
	height: 240px;
	overflow: hidden;
	background-color: black;
	float: left;
	}
.splash-box img {
	border: none;
	}
	
div.whatson-box {
	width: 182px;
	height: 240px;
	background: black URL(/images/common/whatson_bg.jpg) bottom right repeat;
	float: left;
	margin-left: 3px;
	overflow: hidden;
	}
.whatson-box ul {
	margin: 10px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 9pt;
	}
.whatson-box li { margin: 8px 10px;	}	
.whatson-box span.time { color: #99ccff; }
.whatson-box span.show-title {	margin-left: 7px;}

div.feature-box {
	width: 250px;
	height: 240px;
	background: black URL(/images/common/feature_bg.jpg) bottom left repeat;
	float: left;
	margin-left: 3px;
	position: relative;
	/* clear: right; */ /* ensures new line after this box */
	}	
.show-title a, .show-title a:visited {
	color: white;
	}
.show-title a:hover {
	color: #99CCFF;	
	}
	
/* Side Ad area */
/*****************/	
div#ad-container {
	width: 302px; 
	float: right;
	background-color: #666;
	padding: 9px;
	overflow: auto;
	}
#ad-container img {
/*	float: right;
	clear: right; */
	padding-bottom: 10px;
	}
div.adzone-ad {
	text-align: center;
	margin: 10px 0;
	}

/* Main Content Area */
/*********************/
div#content-container {
	width: 647px; /* leave 3px below max width when combined with ad-container */
	background-color: #666;
	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; 
	} 	

#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: 930px;
}
/**/
	

/* 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: 600px;
	}
.content-body h1, .content-body h2, .content-body h3, .content-body p, .content-body ul, .content-body li {
	margin: 8px 6px;
	line-height: 1.15;
	}
.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;
}
		
/******************

FRONT PAGE STUFF

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


/* Front page content -> News & Polls areas */
/***********************************/
div#newsheadline-box {
	width: 460px;
	height: 233px; /* same as polls-box */
	float: left;
	margin: 0 3px 3px 0;
	overflow: hidden; /* FIX ME - hack exists for forcing divs to be same height */
	}

.headlines-list p {
	font-weight: bold;
	}

#newsheadline-box .content-body {
	float: right;
	width: 290px;
	overflow: hidden;
	}

img#omninewslogo {
	padding: 20px 0 5px 20px;
	}	
	
div#polls-box {
	width: 182px;
	height: 233px; /* same as newsheadline-box */
	float: left;
	margin-bottom: 3px;
	overflow: hidden; /* FIX ME - hack exists */
	}
#polls-box form {
	text-align: center;
	}
	
/* Front page content -> 4 English Featured Shows */
/**************************************************/
div#featuredshow-row {
	margin: 0 0 3px 0;
	width: 645px; /* newsheadlines + polls + margin btwn them +2px cuz weirdness*/
	/* border: 1px solid black; */
	clear: left;
	background-color: #666;
	

}
#featuredshow-row: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; 
} 

#featuredshow-row div.featuredshow {
	width: 159px;
	height: 320px; 
	margin-right: 3px;
	float: left;
	border: none;
	overflow: hidden;
	}

#featuredshow-row div.last {
	margin: 0px;
	}
	
.featuredshow img { /* the show's thumbnail */
	/* width: 120px; */ /* must be <= width of featuredshow div */
	/* margin: 9px 19px 0 19px; */ /* 14px = width of featuredshow div minus width of img, divided by 2 (for left & right) */
	width: 159px;
	border: none;
	}

/* Front Page Content -> Ethnic Cinema left side vertical banners */
/******************************************************************/
div#cinema-column {
	width: 159px; /* must be same as div.featuredshow */
	background-color: #666;
	float: left;
	}
	
#cinema-column div.cinema-box {
	width: 100%;
	height: 303px;  /* 2 of these should ensure left cols are same height as stack of the contests/community/specials boxes (see below) */
	margin-bottom: 3px;
	overflow: hidden;
	}
div.cinema-box+div.cinema-box {
	margin-top: 3px;
	}

.cinema-box img { /* the show's thumbnail */
	width: 120px; /* must be <= width of cinema-column div */
	height: 90px;
	margin: 9px 19px 0 19px; /* 14px = width of cinema-column div minus width of img, divided by 2 (for left & right) */
	border: none;
	}	

#cinema-column h1 { /* set h1 here to less than elsewhere for space considerations */
	font-size: 12px;
	}

.show-date {
	font-weight: 800;
	text-transform: uppercase;
	}
	
		
/* Front Page Content -> General Contests, Community and Specials Boxes (wide, near bottom) */
/********************************************************************************************/
div#general-column {
	width: 485px;
	background-color: #666;
	float: left;
	}
#general-column h1 {
	font-size: 13px;
	}
div.general-box {
	height: 150px;
	margin-bottom: 3px;
	margin-left: 3px;
	overflow: hidden;
	}	

.general-box img {
	padding: 9px 0 9px 15px;
	}
.general-box .content-body {
	width: 320px;
	float: right;
	}


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

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;
}
/*******************************

NEWS PAGES

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

#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; */
	}


/* unused for now */
div#news-transparentbox {
	height: 500px;
	padding: 20px;
	margin: 10px;
	background-color: white;
	filter:alpha(opacity=30);
	opacity: 0.3;
	-moz-opacity:0.3;
}
/* The text at top of page that indicates language that is being viewed and airtime of broadcast */
.news-header-text {
	float: right;
	padding: 33px 20px 0 0;
	
	font-size: 16px;
	font-weight: bold;
	color: #ffff99;
	text-transform: uppercase;
}
/* news headlines box on News Page */
div#news-headlinesbox {
	width: 595px; /* 400px; */
	min-height: 100px;
	padding: 15px;
	margin: 10px;
	background-color: black;
	filter:alpha(opacity=85);
	opacity: 0.85;
	-moz-opacity:0.85;	
	}
#news-headlinesbox li {
	list-style: outside;
	}

/* local news (formerly news outlook) box on News Page */
div.news-localoutlookbox {
	width: 595px;
	min-height: 100px;
	padding: 15px;
	margin: 10px;

	background-color: #222;
	filter:alpha(opacity=85);
	opacity: 0.85;
	-moz-opacity:0.85;		
	}
div#news-tab-bar { 
	/* use this to create a block around tabs, thus enabling them to push other elements down.
	Otherwise, tabs float outside of flow and the other <p> inside news-stories-archive box will push above it */
	position: relative;
	}
a.news-tab {
	float: left;
	display: block;
	width: 195px;
	height: 25px;
	background-color: #222;
	text-align: center;
	padding-top: 10px;
	margin-right: 5px;
	margin-bottom: 20px;
	}	
a.last-news-tab {
	margin-right: 0;
	}	
a.news-tab:hover {	
	background-color: black;
	}
a.news-tab-curr {
	background-color:#666;
	color: white;
	}	
.switchcontent-link {
	cursor: pointer; /* this is a hand.  Using cursor: hand is unreliable */
	}

/* news outlook & webs tories box on News Page */
div#news-outstoriesbox {
	width: 400px;
	min-height: 100px;
	padding: 15px;
	margin: 10px;

	background-color: #222;
	filter:alpha(opacity=85);
	opacity: 0.85;
	-moz-opacity:0.85;		
	}


/* Box containing list of archived web stories */
div#news-stories-archive {
	width: 170px;
	height: auto;
	padding: 10px 7px;
	float: right;
	
	margin-right: 6px;  /* only intended for IE6 */
	
	/* OLD tags used for previous absolutely positioned approach */
	/* min-height: 100px; */	
	/* margin-top: 2px;	 */
	/* left: 450px;
	position: absolute;  */
	/* display: inline; */

	background-color: #222;
	filter:alpha(opacity=85);
	opacity: 0.85;
	-moz-opacity:0.85;		
	}	

html>body div#news-stories-archive { /* IE6 hack - IE6 does not see this. These margins would look wrong under IE6 but render correctly elsewhere */
	margin: 0 12px 12px 0;
	}

/************************************
TV SHOW DETAILS PAGES
************************************/

.show-details #showthumb {
	float: left;
	margin: 0 10px 10px 0;
	}

/**********************
Community Events Pages
***********************/
table.events-calendar {
	border-collapse: separate;
	border-spacing: 0px;
	*border-collapse: collapse; /* IE hack for 0 border spacing */
	width: 550px;
	margin: 0 auto; 
	}
td.events-header {
	height: 30px;
	padding: 0 25px;
	background: #999 url(/images/common/community_hd_bg.jpg) top left repeat;
	border-bottom: 1px solid #333;
	border-right: 1px solid #111;
	border-left: 1px solid #666;		

	color: black;
	text-transform: uppercase;
	vertical-align: middle;
	font-size: 14px;
	font-weight: 600;
	}

td.event-row {
	background-color: #666;
	padding: 10px 20px;
	vertical-align: top;
	*position: relative; /* IE hack for 0 border spacing */

	border-bottom: 1px solid #111;
	border-right: 1px solid #111;
	border-top: 1px solid #999;
	border-left: 1px solid #999;	
	}
td.dark {
	background-color: #403e3e;
	border-top: 1px solid #666;
	border-left: 1px solid #666;	
	}

/********************* 
 Programming Pages
**********************/
table.language-list {
	width: 260px; 
	margin: 0 auto; 

}
table.language-list td {
	padding: 8px;
	border: 1px solid #999;
}
.language-list th {
	font-weight: bold;
	padding: 8px 5px;
	text-transform:uppercase;
}


/****************
Chai Time Page
*****************/
div#chaitime-bg {
	background: #444 url(/images/programming/chaitime/bg_chaitime.jpg) left top no-repeat;
	}

#chaitime-bg h1 {
	text-transform: uppercase;
	}
#chaitime-bg p {	
	width: 270px;
	padding: 12px 10px 12px 12px;
	line-height: 16px;
	
	background-color: #222;
	filter:alpha(opacity=85);
	opacity: 0.85;
	-moz-opacity:0.85;	
}

img#chai-playvideo {
	text-align: center;
	}

table#chaitime-episodes {
	width: 610px;
	margin: 0 auto;
	border: 3px solid #222;
	
	border-collapse: separate;
	border-spacing: 3px;
	
	}
table#chaitime-episodes th {	
	text-align: center;
	width: 50%;
	padding: 12px;
	font-size: 115%;
	color: #e0af56;
	
	background-color: black;
	filter:alpha(opacity=85);
	opacity: 0.85;
	-moz-opacity:0.85;	
	}
table#chaitime-episodes td {
	padding: 12px;

	background-color: #222;
	filter:alpha(opacity=85);
	opacity: 0.85;
	-moz-opacity:0.85;		
	}

table#chaitime-episodes .alt-chai td, table#chaitime-episodes .alt-chai th{ /* alternate color bg in episode table */
	background-color: #111;
	}
	
/******************
Schedule
*******************/
.schedule-table {
	width: 620px;
	margin: 0 auto;
}

td.schedule-time {
	width: 120px;
	padding: 10px;
	text-align: right;
	background-color: #222;
	border: 2px solid #333;	

	vertical-align: top;
	font-weight: 800;
	font-family: verdana;
}
td.schedule-desc {
	width: 500px;
	padding: 10px;
	background-color:  #555;
	border: 2px solid #333;		
	
	vertical-align: top;
	line-height: 1.3;
	font-size: 90%;
}
.schedule-desc span.schedule-title {
	font-weight: bold;
	text-transform: uppercase;
	}
.schedule-desc img {
	float: left;
	margin-right: 10px;
	}

/* Tabs for days across top of schedule */
#schedule-tabs {
	width: 100%;
	background-color: ;
	/* border: 2px solid #333; */
	}
#schedule-tabs td {
	padding: 10px 5px;
	width: 14.5%;
	text-align: center;
	vertical-align: top;
	background-color: #222;
	}
#schedule-tabs td:hover {
	}	
#schedule-tabs .tab-highlight {
	background-color: #99CCFF;
	}
#schedule-tabs a {
	color: white;
	font-weight: bold;
	}
#schedule-tabs a:hover {
	color: #99CCFF;
	font-weight: bold;
	}
#schedule-tabs .tab-highlight a:hover { /* when tab highlighted already, the bkgrd already blue, so don't change link blue when hover */
	color: white;
	}	
	
/********
* Sitemap
*********/	
.sitemap-page ul {
	margin-left: 45px;
	}
/*********
About Us
*********/
.faq-q {
	padding-top: 15px;
	font-weight: bold;
	}


/************************
*
* New News page (jan 2010)
*
****************************/

/* the blue used in design: #3797d1 */

div#news-container {
	background: white url('/images/news/header_bg.jpg') top right no-repeat;
	width: 100%;
	min-height: 1150px;
	
}

div#news-container * {
	color: #777;
	line-height: 1.4;
	}

div#news-container a {
	color: #3797d1;
	}
div#news-container a:hover {
	text-decoration: underline;
	}

div#news-right-rail {
	float: right;
	width: 318px;

	text-align: center;
	
	/* border: 1px solid green;*/
}

div#news-content-container {  /*** CONTENT BOX WIDTH IS 642px MAX (not incl padding), but 638px under IE6. ***/
	width: 638px;
	height: auto;
	/* border: 1px solid orange; */
}



/* NEWS HEADER related */

div#news-header-container {
	height: 125px;
	position: relative;
}

#logo-button {
	display: block;
	height: 107px;
	width: 150px;
}
#news-header-container #broadcast-info {
	position: absolute;
	left: 160px;
	top: 52px;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	color: white;
}
.buttons-container {
	position: absolute;
	top: 75px;
	left: 335px;
}
#news-header-container a.lang-buttons {
	float: left;
	display: block;
	margin-right: 5px;
	
	background: #3399FF url('/images/news/btn_a.jpg') top left repeat-x;
	width: 124px;
	height: 32px;
	overflow: hidden; /* used to hide sizing issues in IE6 when playing with line-height to position text inisde the link */
	
	text-align: center;
	font-size: 13px;
	color: white;
	font-weight: bold;
	text-transform: uppercase;

	line-height: 32px;
}
#news-header-container a.lang-buttons:hover {
	background: #3399FF url('/images/news/btn_b.jpg') top left repeat-x;
}
#news-header-container a#curr-lang-button {
	background: #3399FF url('/images/news/btn_c.jpg') top left repeat-x;
}



/* CURVED EDGE BOX USED ON NEWS PAGE */
/* Gray curved edge box used throughout news section */
.news-box-cornerrow {
	height: 9px;
	width: 100%;
	background: blue url('/images/news/news_horiz.gif') top left repeat-x;
	overflow: hidden;  /* hack for weird IE6 bug that adds extra height to divs when they have other nested divs inside (bug was making this div taller) */
}
.news-box-tl {
	height: 100%;
	width: 100%; 
	background: url('/images/news/news_tl.gif') top left no-repeat;
}
.news-box-tr {
	height: 100%;
	width: 100%;
	background: url('/images/news/news_tr.gif') top right no-repeat;
}
.news-box-bl {
	height: 100%;
	width: 100%;
	background: url('/images/news/news_bl.gif') top left no-repeat;  /* seems like it should be bottom, but set to top due to IE6 bug that adds extra height to the cornerrow div that contains it */
}
.news-box-br {
	height: 100%;
	width: 100%;
	background: url('/images/news/news_br.gif') top right no-repeat;
}
.news-box-middlerow {
	background: white url('/images/news/news_vert.gif') top left repeat-y;
	overflow: hidden;
}
.news-box-content {
	color: black;
	/* padding-right: 9px; */ /* for the background right vert border */
	padding: 11px 20px 11px 11px; /* need more on the right since the box's right border is this div's background img */
	margin-left: 9px;
	background: white url('/images/news/news_vert.gif') top right repeat-y;
}

/* Elements used on News page like dividers, titles, etc */


.news-box-content p {
	margin: 10px 0px;
}
.news-box-content h3 { /* bolded inline title */
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	display: inline;
}
div#news-container .news-title {
	font-size: 20px;
	font-weight: bold;
	font-family:Arial, Helvetica, sans-serif;
	color: #3797d1;
	margin: 0;
	padding: 0;
}


.news-title .news-title-alt {
	color:#999;
	text-transform: uppercase;

}

div.news-divider {
	height: 7px;
	margin: 5px 0px;
	background: url('/images/news/greyslashes.gif') top left repeat-x;
	overflow: hidden;
}
div.news-divider-simple { /* straight line, used in top stories lists */
	height: 5px;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
	

	}


/* TOP STORIES BOX  (also USED ON FEATURED STORIES FRONT PAGE) */

.topstories-main-container { /* the main story shown at top of Top Stories section */
	min-height: 150px;
	position: relative;
	border: 1px solid white;
}
.topstories-thumb {
	width: 150px;
	/* position: absolute;
	left: 0px;
	top: 0px; 
	*/
	margin: 0 10px 0 0;
	float: left;
}
.topstories-text {  /* the actual text next to the thumb of the top stories/featured stories*/
	margin-left: 170px;
	position: relative;
}

.showstate {
 	padding-right: 4px; 
	vertical-align: bottom;
}
.switchcontent-link {
	font-weight: bold; 
	vertical-align: middle;
}

/* HEADLINES BOX */

.headlines-box {
	float: left;
	margin: 0px 3px;
	width: 192px;
	height: 350px;
	display: table-cell;
	overflow: auto;
	}
div#top-headline {
	width: 587px;
	height: auto;
	padding-right: 5px;
}
div#news-container .headlines-title {
	height: 70px;
	padding: 5px;
	overflow: auto;
	background-color: #ddd;
	color: #3797d1;
	font-weight: bold;
}
div#news-container #top-headline .headlines-title {
	height: auto;
	}
div#news-container .headlines-coverage {
	color: #444;
	text-transform: uppercase;
}


/* RIGHT RAIL */

/* Movie preview box */
.movie-thumb {
 	float: left; 
	margin: 0 10px 5px 0;
	width: 120px;
	}