/*
 * Copyright (c) 2006 TELUS Communications Inc.,
 *
 * All Rights Reserved.
 * This document contains proprietary information that shall be
 * distributed or routed only within TELUS, and its authorized
 * clients, except with written permission of TELUS.
 *
 * General css rules, always apply.
 *
 * 1. Layout, elements default style and side-wide classes.
 * 2. Content division.
 * 3. List and list like elements formating.
 * 4. Advertisement blocks.
 * 5. Poll block.
 * 6. Tabs.
 * 7. Resizable content.
 * 8. Print formating.
 */


/**
 * 1. Layout, elements default style and side-wide classes.
 */
#page {
	width:975px;
	margin:0 auto;
	text-align:left;
}
body {
	margin:0;
    padding:0;
	color:#363636;
	font-size:12px;
	line-height:15px;
	text-align:center;
	font-family:arial,sans-serif;
    background:#ffffff url(images/bg_page.jpg) repeat-x top left;
}
form {
	margin:0px;
	padding:0px;
}
a,
a:visited {
	border:0;
	outline:none;
	color:#339900;
	text-decoration:none;
}
a:hover {
	color:#339900;
	text-decoration:underline;
}
img {
	border:0;
}
.meta,
a.complete {
	font-size:11px;
}
p.contents_center,
p.contents {
	clear:both;
	margin:0;
	padding:4px 0;
	background-color:#eeeeee;
	border-bottom:3px solid #fff;
}
p.contents_center {
	text-align:center;
}
p.contents a {
	padding:0 18px;
}
a.title,
a.title:hover,
a.title:visited {
	color:#363636;
}
.access {
	display:none;
}
.odd { /* denotes an odd/even alternance */
	background:#f1f1f1;
}


/**
 * 2. Content division.
 */
#pre_content {
	padding-top:5px;
}
#content {
	border-top:3px solid #fff;
	border-bottom:14px solid #fff;
	background:#fff url(images/bg_content.jpg) repeat-y top left;
}
#content .main,
#pre_content .main {
	width:675px;
	float:left;
}
#content .sub,
#pre_content .sub {
	width:300px;
	float:right;
}
#content .main,
#content .sub {
	padding-bottom:18px;
	overflow:hidden; /* must always respect the width specified above */
}
body.homepage #content .main {
	padding-bottom:0;
}
#content img {
	border:1px solid #a2a2a2;
}
#pre_content h1,
#content h1 { /* we always use image replacement */
	height:24px;
	font-size:9px;
	overflow:hidden;
	text-indent:-1000em;
	background-repeat:no-repeat;
	background-position:18px 5px;
}
#pre_content h1,
#pre_content h2,
#content h1,
#content h2 {
	margin:0;
	padding:0;
}
#pre_content h2,
#pre_content h3,
#content h2,
#content h3 {
	font-size:15px;
	font-weight:normal;
}
#content img.item {
	float:left;
	margin-right:16px;
	margin-bottom:18px;
}
#pre_content .wrapper,
#content .wrapper {
	clear:both;
	margin:0;
	padding:0 18px;
}
#pre_content .wrapper p,
#content .wrapper p {
	margin:0.5em 0;
}
#content .main .wrapper.first,
#content table.ranking .first td {
	padding-top:18px !important;
}
#content .sub .wrapper.first {
	margin-top:18px;
}
#content .main .section {
	margin-right:3px;
}
#content .sub .section { /* sections in sub content is always in one column */
	clear:both;
}
#content .main .lines { /* represent columns section alignement */
	overflow:hidden;
	background:#fff url(images/bg_lines.jpg) repeat-y top left;
}
#content .main .line {
	clear:both;
}
#content .main .lines .section {
	width:334px;
}
#content .main .lines .section .line {
	/*background:#fff url(images/bg_lines_section.jpg) repeat-y top left;*/
}
#content .main .lines .section .line .section {
	width:160px;
}
#content .main .lines .section.one {
	float:left;
}
#content .main .lines .section.two {
	float:right;
	margin-right:4px;
}
/* news like sections */
#content .headlines .wrapper {
	padding:8px 18px;
	border-top:1px solid #e7e7e7;
}
#content .headlines .wrapper.last {
	border-bottom:1px solid #e7e7e7;
}
#content .headlines.wide .wrapper {
	padding-top:18px;
}


/**
 * 3. List and list like elements formating.
 * (ranking, list, ul, ol, tools and filter)
 */
#content table.ranking {
	width:100%;
	border-collapse:collapse;
	margin-bottom:8px;
}
#content table.ranking td {
	padding:4px;
	vertical-align:top;
}
#content table.ranking td.position {
	color:#339900;
	font-weight:bold;
	text-align:right;
	padding-left:18px;
}
#content table.ranking td.rating {
	font-weight:bold;
	padding-right:18px;
}
#content table.ranking .first td {
	font-size:15px;
}
#content table.ranking .first td.rating {
	font-weight:normal;
}
#content table.ranking a.platform { /* avoid bottom spacing */
	width:38px;
	display:block;
	line-height:0;
}
table.list {
	width:100%;
	border-collapse:collapse;
	border-bottom:3px solid #fff;
}
table.list a.title {
	background:transparent url(images/list_bullet.gif) no-repeat center left;
	padding-left:10px;
}
table.list th {
/*	padding:0;
	padding-bottom:9px;
}
table.list th a,
table.list th a:visited {
	display:block;*/
	color:#49166d;
	background:#dcc6f5;
	padding:4px 18px;
	font-weight:normal;
}
/*table.list th a:hover,
table.list th a:hover {
	background-color:#ceaff2;
}
table.list th.asc a,
table.list th.asc a:visited {
	background:#ceaff2 url(images/asc.gif) no-repeat center right;
}
table.list th.desc a,
table.list th.desc a:visited {
	background:#ceaff2 url(images/desc.gif) no-repeat center right;
}*/
table.list td {
	padding:2px 18px;
}
table.list td,
table.list th {
	border-right:1px solid #d2c6db;
}
table.list .published {
	border-right:0;
	padding-right:0;
}
table.list td.platform,
table.list td.rating {
	text-align:center;
}
table.list tfoot td {
	padding:6px;
	text-align:center;
	background:#f2f2f2;
	border:0;
}
#content ul {
	margin:0;
	padding:0;
	list-style-type:none;
}
#content ul li {
	clear:both;
	line-height:18px;
	padding:0 18px 0 32px;
	background-image:url(images/list_bullet.gif);
	background-repeat:no-repeat;
	background-position:18px 6px;
}
#content ol li {
	clear:both;
	line-height:18px;
}
#content ul.raw, #pre_content ul.raw { /* used with no links list */
	margin:5px 0;
}
#content ul.raw li, #pre_content ul.raw li {
	background-image:url(images/list_bullet_2.gif);
}
#content ol li a.platform,
#content ul li a.platform {
	margin-top:2px;
	float:right;
}
#content .main ul li .date {
	float:right;
}
#content .sub ol,
#content .sub ul {
	margin:18px 0;
}
#content .main ol {
	margin:6px 0;
}
#content ol {
	padding:0;
	padding-left:26px; /* styling list marker is hard, in between value between ie and ff. */
	color:#7b2a90;
	font-weight:bold;
}
#content ol a,
#content ol a:visited {
	color:#363636;
	font-weight:normal;
}
#content .main .wrapper ol {
	margin-left:-0.8em;
}
#content .main p.tools {
	margin:18px 0;
	padding-top:0;
	color:#959595;
}
#content .main p.tools a,
#content .main p.tools a:visited {
	color:#959595;
	padding:3px 0;
	padding-left:30px;
}
#content .main p.tools a.print {
	background:transparent url(images/print.gif) no-repeat center left;
}
#content .main p.tools a.email {
	background:transparent url(images/email.gif) no-repeat center left;
}
#content .filter {
	border:0;
	margin:0 !important;
	padding:0;
	height:23px;
	list-style-type:none;
	background:#ededed url(images/games/bg_filter.jpg) repeat-x top left;
	border-top:3px solid #fff;
	border-bottom:3px solid #fff;
	padding-left:14px;
}
#content .filter li {
	display:inline;
}
#content .filter a {
	font-size:15px;
	line-height:23px;
	color:#7d4a88 !important;
	padding:0 5px;
}
#content .filter li.active a,
#content .filter li.active a:hover {
	color:#fff;
	background:#7d4a88;
}



/*
 * 4. Advertisement blocks.
 */
.advertisement {
	margin:0 auto;
	background:#e9e9e9;
	border-bottom:3px solid #fff;
}
.advertisement .notice {
	margin:0;
	font-size:10px;
}
.advertisement.graphic .notice {
	text-align:center;
}
.advertisement.graphic a {
	display:block; /* avoid bottom padding after the image */
	line-height:0;
}
.advertisement.text {
	height:37px;
}
.advertisement.text img {
	float:left;
	margin-right:6px;
}
.advertisement.text a,
.advertisement.text a:visited {
	font-size:11px;
	color:#545454;
	font-weight:bold;
}
#content .main .advertisement {
	padding-left:18px;
}
#content .advertisement img {
	border:0;
}


/**
 * 5. Poll block.
 */
#content .poll {
	margin-bottom:18px;
	padding-bottom:6px;
	background:transparent url(images/bg_question_of_the_day.jpg) repeat-y top left;
}
#content .poll .radio {
	margin-left:18px;
}
#content .poll .submit {
	text-align:right;
	color:#7b2a90;
}
#content .poll a {
	color:#7b2a90;
}
#content .poll .submit input {
	vertical-align:middle;
}


/**
 * 6. Tabs.
 */
.tabbutton,
.tabbutton_wrapper,
.tabbutton_on div,
.tabbutton_off div,
.tabbutton_on span,
.tabbutton_off span {
	height:28px;
}
.tabbutton {
	clear:both;
	background:transparent url(images/tabs/back_2.gif) repeat-x bottom left;
}
.tabbutton_wrapper {
	padding-left:3px;
	background:transparent url(images/tabs/back.gif) no-repeat bottom left;
}
#content .main .tabbutton {
	margin:18px 0;
}
#content .main .tabbutton_wrapper {
	padding:0;
	padding-left:18px;
}
.tabbutton_on {
	float:left;
	margin-left:0px;
}
.tabbutton_on div {
	float:left;
}
.tabbutton_on span {
	float:left;
	font-size:13px;
	line-height:28px;
	padding-left:5px;
	padding-right:5px;
	background:url(images/tabs/on_back.gif);
}
.tabbutton_on .tabbutton_left{
	width:5px;
	background:url(images/tabs/on_left.gif);
}
.tabbutton_on .tabbutton_right{
	width:6px;
	background:url(images/tabs/on_right.gif);
}
.tabbutton_off {
	float:left;
	margin-left:0px;
}
.tabbutton_off div {
	float:left;
}
.tabbutton_off span {
	float:left;
	font-size:13px;
	line-height:28px;
	padding-left:5px;
	padding-right:5px;
	background:url(images/tabs/off_back.gif);
}
.tabbutton_off a,
.tabbutton_off a:visited {
	color:#666666;
}
.tabbutton_off a:hover {
	color:#666666;
}
.tabbutton_off .tabbutton_left{
	width:6px;
	background:url(images/tabs/off_left.gif);
}
.tabbutton_off .tabbutton_right{
	width:6px;
	background:url(images/tabs/off_right.gif);
}
.tab_visible {
	clear:both;
}
.tab_hidden {
	display:none;
}
#content .sub .tab_visible {
	border:1px solid #fff;
	background:#fff;
}


/**
 * 7. Resizable content.
 */
/* Resizable text in the content section by user click on A A A */
.contentsmall { font-size:12px; line-height:15px; }
.contentmedium { font-size:13px; line-height:16px; }
.contentbig { font-size:14px; line-height:17px; }
/*.contentsmall .contenttitle {font-size:17px;}*/
/*.contentmedium .contenttitle {font-size:17px;}*/
/*.contentbig .contenttitle {font-size:17px;}*/

#textsmall {font-size:11px;margin-left:5px;}
.textsmallOn a {padding-top:6px;background:transparent url(images/pointer_down.gif) no-repeat top left;font-size:11px;color:#339900;font-weight:bold;}
.textsmallOn a:hover {font-size:11px;color:#339900;font-weight:bold;}
.textsmallOff a {font-size:11px;color:#cccccc;font-weight:bold;}
.textsmallOff a:hover {font-size:11px;color:#cccccc;font-weight:bold;}
#textmedium {font-size:13px;}
.textmediumOn a {padding-top:5px;background:transparent url(images/pointer_down.gif) no-repeat top center;font-size:13px;color:#339900;font-weight:bold;}
.textmediumOn a:hover {font-size:13px;color:#339900;font-weight:bold;}
.textmediumOff a {font-size:13px;color:#cccccc;font-weight:bold;}
.textmediumOff a:hover {font-size:13px;color:#cccccc;font-weight:bold;}
#textbig {font-size:15px;}
.textbigOn a {padding-top:4px;background:transparent url(images/pointer_down.gif) no-repeat top center;font-size:15px;color:#339900;font-weight:bold;}
.textbigOn a:hover {font-size:15px;color:#339900;font-weight:bold;}
.textbigOff a {font-size:15px;color:#cccccc;font-weight:bold;}
.textbigOff a:hover {font-size:15px;color:#cccccc;font-weight:bold;}



/**
 * 8. Print formating.
 * We tweak from the screen formating instead
 * or defining a specific style for print.
 */
@media print {
	#menu,
	#footer,
	#copyright .menu,
	#content .sub,
	#content .tools,
	#header_advertisement,
	.tabbutton {
		/* useless in paper context */
		display:none;
	}
	body,
	#content {
		background-image:none !important;
		border:0;
	}
	#content h1,
	#content h2 {
		text-align:left;
		text-indent:0;
		font-size:15px;
		background-image:none !important;
		background-color:transparent !important;
	}
	#content h1 {
		margin-top:18px;
	}
	#content .main {
		border:0;
		margin:0;
		float:none;
		overflow:visible;
	}
	#header .main {
		margin:0 !important;
	}
	#content .wrapper {
		margin:0;
		padding:0;
	}
	#content .headlines .wrapper {
		border:0;
		border-bottom:1px solid #e7e7e7;
	}
	#content table.list tr {
		border-bottom:1px solid #f1f1f1;
	}
	#content table.list a.title {
		padding-left:18px;
	}
	#copyright {
		width:100%;
		margin:0;
		padding-top:18px;
		text-align:left !important;
		border-top:1px solid #f1f1f1;
	}
	#header {
		margin:0 !important;
		padding:0 !important;
		height:40px !important;
		border-bottom:1px solid #f1f1f1;
	}
	#header a,
	#header .sub {
		display:none;
	}

}


/* ADDED BY ROYSTON */
/* ------------------------------------------------------------------------------ */
/*---- sIFR ---*/
.sIFR-flash { visibility: visible !important; margin: 0; padding: 0;}
.sIFR-replaced { visibility: visible !important;}
.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden;}

/* 
  Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it.
  Conveniently, the object tab is always in a div, so we hide all divs directly inside the replaced element.
*/
.sIFR-replaced > div { display: none !important;}
.sIFR-active div.navbarTitle {visibility: hidden; line-height: 1em;}