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

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

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

/*	CSS scrollbar color generator http://iconico.com/CSSScrollbar/ */
scrollbar-arrow-color: #464646;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-darkshadow-color: #999999;
scrollbar-face-color: #D4D0C8;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #CCCCCC;
scrollbar-track-color: #e6e6e6;
	}

a:link, a:visited {
	color: #cc0000;
	text-decoration: none;
	}
a:hover {
	text-decoration: underline;
	}

/**
* HEADER 
**********/

div#body-container {
	width: 850px;
	height: auto;
	overflow: hidden;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	}
	
div#header-container {
	width: 100%;
	height: 135px;
	background: url('/images/common/header_bg.gif') left bottom repeat-x;
	position: relative;
	}
img#site-logo {
	position: absolute;
	bottom: 0px;
	border: none;
	}
#header-brandbar {
	position: absolute;
	bottom: 0px;
	left: 270px;
	height: auto;
	width: auto;
	}
#header-brandbar img {
	float: left;
	border: none;
	}
#header-links {
	color: #aaa;
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	right: 15px;
	top: 10px;
	}
#header-links a:link, #header-links a:visited {
	color: #aaa;
	text-decoration: none;
	}
#header-links a:hover {
	text-decoration: underline;
	}


/** SEARCH in Header Bar **/
#search-top {
	position: absolute;
	right: 15px;
	top: 83px;
	color: #cc0000;
	font-weight: bold;
	line-height: 1.4;
	}
#search-top img {
	vertical-align: top;
	}


/**
* LOGIN BAR / GENERIC RED BAR *  (This red bar is used in other places too)
***********************************/

div.login-bar {
	width: 100%;
	height: 30px;
	background-color: #cc0000; /* red */
	border: none;
	overflow: hidden;
	position: relative;
	}
.login-bar .top-grad {
	width: 100%;
	height: 100%;
	background: url('/images/common/login_grad_top.gif') left top repeat-x;
	}
.login-bar .bott-grad {
	width: 100%;
	height: 100%;
	background: url('/images/common/login_grad_bottom.gif') left bottom repeat-x;
	}
.login-bar * {
	color: white;
	}

.login-bar a, .login-bar a:visited {
	color: white;
	text-decoration: underline;
	}
.login-bar a:hover {
	color: black;
	}
.login-bar input {
	color: black;
	}
.login-bar form {
	position: absolute;
	top: 3px;
	left: 20px;
	font-weight: bold;
	}
.login-bar form *{
	vertical-align: middle;
	}	
.login-bar .welcome-text {
	position: absolute;
	top: 7px;
	left: 20px;
	font-size: 14px;
	font-weight: bold;
	}
.login-bar .terms-text {
	font-size: 11px;
	}
.login-bar .terms-text a {
	vertical-align: baseline;	
	}
.login-bar .logout-link {
	position: absolute;
	top: 7px;
	right: 20px;
	font-size: 14px;
	font-weight: bold;
	}
.login-bar .register-link {
	position: absolute;
	top: 8px;
	right: 20px;
	font-weight: bold;
	}


/****
* SHOW LIST TITLE BAR
*********************/
div.show-bar { /* grey bar */
	width: 100%;
	height: 30px;
	background: #c1c1c1 url('/images/common/showbar_grad_top.gif') left top repeat-x;
	overflow: hidden;
	font-weight: bold;
	position: relative;
	}	
div.station-links {
	position: absolute;
	right: 20px;
	top: 0px;
	height: 100%;
	text-transform: uppercase;
	}
div.station-links a, div.station-links a:visited {
	display: block;
	height: 100%;
	float: left;
	padding: 10px;
	color: black;
	}
div.station-links a:hover, div.station-links a.current-station, div.station-links a:visited.current-station {
	background-color: #cc0000;
	color: white;
	text-decoration: none;
	}
	
div.show-bar-title {
	position: absolute;
	top: 10px;
	left: 20px;
	font-size: 14px;
	color: #cc0000;
	}
div.alpha-links{ /* alphabet list for linking to lists of shows starting with a certain letter */
	text-transform: uppercase;
	position: absolute;
	top: 5px;
	left: 20px;
	}
div.alpha-links a, .alpha-links a:visited {
	color: white;
	margin-right: 1.5px;
	}
.alpha-links a:hover {
	color: black;
	}
	
.no-sub-bar { /* adds red thick border to bottom of show bar when not showing the sub bar of stations */
	border-bottom: 10px solid #cc0000;
	}
	
/* sub bar for specific station links when main bar is All Shows & shows all brands */
div.show-bar-sub {
	width: 100%;
	height: 23px;
	overflow: hidden;
	background: #cc0000 url('/images/common/login_grad_top.gif') left top repeat-x;
	position: relative;
	font-weight: bold;
	}
.show-bar-sub .station-links { /* careful! .station-links is defined elsewhere! */
	right: 15px;
	text-transform:none;
	}
.show-bar-sub .station-links a, .show-bar-sub .station-links a:visited {
	display: block;
	height: 100%;
	float: left;
	padding: 5px 6px;
	color: white;
	}
.show-bar-sub .station-links a:hover, .show-bar-sub .station-links a.current-station, .show-bar-sub .station-links a:visited.current-station {
	background: white url('/images/common/showbarsub_grad.gif') left top repeat-x;
	color: black;
	text-decoration: none;
	}

/**
* SHOWS LIST BOX 
********************/

div.show-list-box {
	width: auto;
	height: auto;
	overflow: auto;
	padding: 10px 30px 20px 30px;
	background: white url('/images/common/showlist_grad.gif') left bottom repeat-x;
	}
ul.show-list {
	float: left;
	width: 33%;
	}
.show-list li {
	margin: 10px 5px;
	}
.show-list li a, .show-list li a:visited {
	color: #666;
	font-weight: bold;
	}
.season-text {
	color: #cc0000;
	font-size: 10px;
	}

/**
* FOOTER
**********/
#footer-bar {
	width: 100%;
	height: 30px;
	background-color: #666;
	color: white;
	font-weight: bold;
	position: relative;
	overflow: auto;
	}
#footer-links {
	position: absolute;
	top: 8px;
	right: 20px;
	}
#footer-links a, .footer-links a:visited {
	color: white;
	}
#footer-logo {
	position: absolute;
	top: 0px;
	left: 20px;
	}	
	
	
/***************************
** MAIN CONTENT BOX
****************************/
div#main-content-box {
	width: auto;
	height: auto;
	padding: 10px 20px 20px 20px;
}


/****
** Rounded Corner Box 
**********************/
div.rounded-box {
	width: auto;
	height: auto; /* this can get overridden as box is used in diff circumstances Or else control box width with the rounded-box-content div */
	background: white url('/images/common/roundcorner_left.gif') top left repeat-y;
	}
div.rounded-top {
	width: 100%;
	height: 13px;
	background: url('/images/common/roundcorner_top.gif') top left repeat-x;
	overflow: hidden;
	}
div.rounded-bottom {
	width: 100%;
	height: 15px;
	background: url('/images/common/roundcorner_bottom.gif') bottom left repeat-x;
	overflow: hidden;
	}	
.rounded-tl, .rounded-tr, .rounded-br, .rounded-bl {
	height: 100%;
	width: 100%;
	}
.rounded-tl {
	background: url('/images/common/roundcorner_tl.gif') left top no-repeat;
	}
.rounded-tr {
	background: url('/images/common/roundcorner_tr.gif') right top no-repeat;
	}
.rounded-bl {
	background: url('/images/common/roundcorner_bl.gif') left bottom no-repeat;
	}
.rounded-br {
	background: url('/images/common/roundcorner_br.gif') right bottom no-repeat;
	}
div.rounded-box-content {
	width: auto; /* if u set this to 100%, padding will push out the width beyond 100% of its container! */
	height: auto;
	padding: 0 13px; 
	background: url('/images/common/roundcorner_right.gif') top right repeat-y;
}

/* Front page media player */
#front-media-player {
	width: 400px;
	height: 243px;
	float: left;
	border: 1px solid #ccc;
}

#frontplayer {
	margin: 12px 10px;
}
/**
* Press Releases & Latest News Box on Front Page
*************************************************/

#pressnews-box {
	float: right; 
	width: 400px;

	}
#pressnews-box h1 {
	color: #cc0000;
	font-size: 15px;
	font-weight: bold;
	border-bottom: 2px dotted #cc0000;
	}
#press-list, #news-list {
	height: 200px;
	width: auto;
	overflow-x: hidden;
	overflow-y: auto;
	}	
.pressnews-entry {
	width: auto;
	height: 75px;
	border-bottom: 1px dotted #666;
	overflow: hidden;
	}
img.pressnews-image {
	float: left;
	margin: 10px 10px 5px 5px;
	}
.pressnews-content {
	padding-top: 5px;
	height: auto;
	width: 300px;
	overflow: hidden;
	}
.pressnews-content p {
	margin: 0 0 7px 0;
	font-weight: bold;
	}
.pressnews-content .pressnews-readmore {
	float: right;
	}	
	
	
/***
* Floating Submenu with Rounded Edges - Used as left side submenu for stations
******************************************/

div.submenu-floating {
	width: 150px;
	height: auto;
	}
.submenu-floating img.station-logo {
	width: 85px;
	}
.submenu-list {
	border-top: 2px dotted #666;
	list-style-position: outside;
	list-style-type: disc;
	padding-left: 14px;
}
.submenu-list li {
	margin: 5px 0;
	list-
	}
.submenu-list a:link, .submenu-list a:visited {
	color: #666;
	font-weight: bold;
	}	
.submenu-list a:hover {
	color: #cc0000;
	}
.submenu-list a:link.current-submenu, .submenu-list a.current-submenu, .submenu-list a:visited.current-submenu {
	color: #cc0000;
	}
	
/***
* Primary Content. ie, The content that sits to the right of the left submenu
* This is where most of your actual content will sit
************************************/
.primary-content {
	/* should be 660px left in the .main-content-box after padding & a 150px left submenu */
	width: 640px;
	height: auto;
	float: right;
	}
.no-float { /* used when don't want primary-content column to be floated right, ie when no left menu box */
	float: none;
	width: auto;
	}	
.primary-content h1 {
	font-size: 15px;
	font-weight: bold;
	}
.primary-content h1 span.breadcrumb-curr {
	font-size: 14px;
	color: #666;
	}	
.primary-content h2 {
	font-size: 14px;
	font-weight: bold;
	}
.primary-content h3 {
	font-size: 13px;
	font-weight: bold;
	}	
.primary-content h1, .primary-content h2, .primary-content h3, .primary-content p {
	margin: 0.8em 0;
	}
.primary-content p {
	line-height: 1.4;
	}

/* grey bar at top of every content area */
/*****************************************/
.primary-content .header-bar {
	width: auto;
	height: 23px;
	background-color: #ddd;
	border-top: 1px solid #999;
	margin-bottom: 1em;
	position: relative;
}
.header-bar h2 {
	position: absolute;
	margin: 0;
	top: 5px;
	left: 10px;
	color: #cc0000;
	text-transform: uppercase;
	}

/* reusing the station-links div class (used for shows list title bar normally), but tweaking */
.header-bar div.station-links {
	position: absolute;
	right: 20px;
	top: 0px;
	height: 100%;
	text-transform: uppercase;
	}
#primary-content-topbar div.station-links {
	text-transform: none; /* citytv stations didn't fit in the top bar if uppercased */
	right: 15px;
	}
.header-bar div.station-links a, .header-bar div.station-links a:visited {
	display: block;
	height: auto;
	float: left;
	color: black;
	padding: 5px 5px;
	margin: 0;
	font-weight: bold;
	}
.header-bar div.station-links a:hover, .header-bar div.station-links a.current-station, .header-bar div.station-links a:visited.current-station {
	background-color: white;
	color: black;
	text-decoration: none;
	}

.breadcrumbs {
	width: auto;
	height: auto;
	padding: 0 10px; /* should match horizontal padding of .header-bar */	
	}

.also-airing-bar {
	height: 20px;
	margin: 5px 10px 0 10px;
	font-weight: bold;
	}
.also-airing-bar h4 {
	color: #cc0000;
	display: inline;
	margin: 0;
	}
.dotted-divider {
	line-height: 0.1;
	border-bottom: 2px dotted #666;
	}
	
/** Share Bar **/
/***************/
.share-bar {
	height: 25px;
	width: auto;
	background-color: #cccccc;
	position: relative;
	}
.share-bar .share-bar-content {
	position: absolute;
	top: 3px;
	right: 20px;
	}
.share-bar a, .share-bar a:visited {
	color: #666;
	}
.share-bar a:hover {
	color: #cc0000;
	}	
.share-bar img {
	vertical-align: middle;
	}


/** Related Content Boxes **/
/***************************/

.related-box {
	border: 2px solid white;
	height: auto;
	width: auto;
	background-color: #cccccc;
	
	font-weight: bold;
	vertical-align: top;
	}
.related-box-border {
	width: auto;
	height: auto;
	border: 1px solid #cccccc;
	}	
.related-box-content, .related-box-content-vert { 
/* added the -vert version for the related files box as we don't want the <a> to be floated or displayed same way anymore */
	width: 80%;
	margin: 5px auto;
	}
.related-box-content * {
	vertical-align: middle;
	}
.related-box-content a {
	display: block;
	float: left;
	width: 33%;
	}

/** Search Page **/
/*****************/

ul.search-results {
	margin: 10px 20px 20px 20px;
	list-style: outside;
	}
.search-results li {
	margin: 5px 0;
	}	

/** Episode Descriptions Page **/
/*******************************/
.episode-desc-wrapper { /* contains the text content from episode descriptions page; used to apply special formatting */
	height: auto;
	width: auto;
	}
.episode-desc-wrapper h3 {	
	color: #669999
	}

	
/** Press Rls & News Pages **/
/*************************/
.pressnews-entry {
	width: auto;
	height: auto;
	border-bottom: 1px dotted #666;
	overflow: hidden;
}

.pressnews-content {
	padding-top: 5px;
	height: auto;
	width: 280px;
	overflow: hidden;
}

.pressnews-list-wide li *{
	vertical-align: middle;
}
.pressnews-list-wide li {
	margin: 5px 0;
	border-bottom: 1px solid #eee;
}

.goodnews {
	width: auto;
	height: auto;
	padding: 0 10px 14px 10px;
	border-bottom: 1px solid #eee;
	overflow: hidden;
	}
.goodnews * {	
	vertical-align: middle;
}
.goodnews .dl-link {
	float: right;
	padding-top: 14px;
	}

/** Show Description Page **/
/***************************/
img.show-image {
	float: right;
	margin: 14px 0 10px 10px; /* top margin shoudl match margin-top of p */
	padding: 5px;
	border: 1px solid #666;
}

/** Brand /Station Desc Page **/
/*******************************/
img.desc-station-logo {
	float: right;
	margin: 0.3em 0 10px 10px; /* top margin shoudl match margin-top of p */
	padding: 5px;
	border: 1px solid #666;
	}
/** screening room related **/
ul.simple-dot-list {
	list-style: outside disc;
	padding-left: 20px;
	}
.simple-dot-list li {
	padding: 10px 0;
	border-bottom: 1px dotted #eee;
	}
	
/** Gallery page full sized (eg, Sales Party gallery) **/
/**************************************/
#gallery-fullpage a img {
	margin: 10px;
}