/* ******************** */
/* Color guide for css: */
/*      black: #000;    */
/*      white: #fff;    */
/*      blue: #16459c;  */
/*      red: #db0035;   */
/* ******************** */


/* ***************************************************************************************************************** */
/* GENERICS ******** */
* { 
	border: 0 solid #000; 
	font: 10pt/1.2em verdana, sans-serif; 
	margin: 0; 
	padding: 0; }
b { font-weight: bold; }
body { background-image: url(images/bodypattern.png); }
h3 {
	font-weight: bold; 
	color: #000; }
select { 
	background: #fff; 
	border: 1px solid #16459c; 
	color: #16459c; 
	font-size: 10px; 
	margin: 0 0 0 20px; 
	max-height: 100px; 
	outline: 0; 
	padding: 0 0 0 3px; 
	width: 300px; }
select option { 
	background: #fff; 
	border: 0; 
	color: #16459c; 
	font-size: 10px; 
	margin: 0; 
	outline: 0; 
	padding: 0; }
strong { font-weight: bold; }
em { font-style: italic; }
table {
	width: 100%; 
	border-collapse: collapse; }
td {
	height: 25px; 
	vertical-align: center; }
	
.backgroundgradient { background: url(images/banner-bg.png) 0 0 repeat-y; }
.navigation ul { 
	list-style-type: none; 
	display: block; }
.navigation li { 
	display: inline; 
	float: right; }
.navigation li a { 
	color: #000; 
	display: block; 
	float: right; 
	clear: none; 
	text-decoration: none; }
.navigation li a:hover { text-decoration: underline; }
.hide {visibility: hidden;}
span.redred { color: #db0035; }
span.blueblue { color: #16459c; }

/* ******************************************************************************************************************* */
/* MAIN CONTAINER */
.main { 
	background-color: #fff; 
	border-color: #db0035; 
	border-width: 0 1px 1px 1px; 
	margin: 0 auto; 
	width: 800px; }

/* **************************************************************************************************************** */
/* HEADER CONTAINER */
.header { 
	background-image: url(images/headershadow.png); 
	height: 50px; 
	position: relative; 
	width: 100%; }
.header .navigation { 
	position: relative;
	height: 34px; 
	background: url(images/tophighlight.png) 0 0 repeat-x; }
#user {
	position: absolute; 
	font: 10pt/1.2em verdana, sans-serif; 
	color: #db0035;
	bottom: -10px; 
	right: 15px; 
	width: 15em; 
	padding: 4px;}
.topleft { 
	left: 0; 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 5; }
/* size the list items the same as the links they contain. */
.header .navigation li { height: 34px; }
.header .navigation #log { width: 173px; }
.header .navigation #yr  { width: 129px; }
.header .navigation #win { width: 101px; }
.header .navigation #rul { width:  77px; }
.header .navigation #gp  { width: 113px; }
/* style the links that the list items contain */
.header .navigation li a { position: absolute; top: 0; height: 34px; z-index: 5; background-position: 0 0; background-repeat: no-repeat; }
.header .navigation #log a { right: 0;     width: 173px; background-image: url(images/login_button.png);        }
.header .navigation #yr a  { right: 173px; width: 129px; background-image: url(images/your_results_button.png); } 
.header .navigation #win a { right: 302px; width: 101px; background-image: url(images/winners_button.png);      }
.header .navigation #rul a { right: 403px; width:  77px; background-image: url(images/rules_button.png);        }
.header .navigation #gp a  { right: 480px; width: 113px; background-image: url(images/game_play_button.png);    }
/* reposition the background of the links on hover */
.header .navigation li:hover a { background-position: 0 -34px; text-decoration: none; }
/* if the current page is this link, then put the link to the hover state for non-hover appearance too */
#login_page #log a, 
#results_page #yr a, 
#winners_page #win a, 
#rules_page #rul a, 
#make_your_picks #gp a {background-position: 0 -34px; }

/* ************ */
/* Content area */
	/* content header */
	.topcontent { padding-left: 0px; height: 160px; }
	.charch-logo { margin-left: 75px;}
	.howtoplay { margin: 0 0 0 -90px; padding: 0; height: 145px; width: 485px; }
	#yourresultsheader, 
	#yourresultstext {position: relative; left: 340px; width: 360px; text-align: center;}
	#yourresultstext {top: -120px; left: 360px; }
	#yourresultsheader {top: -70px; left: 430px; font-size: 12pt; font-weight: bold; letter-spacing: -2px; word-spacing: 2px;}

	/* content main area */
		/* make your picks */
		.bottomcontent { left: 0; position: relative; }
		.vsbanner { position: relative; top: 0; }
		td.leftcolumn {font-size: 11px; width:230px; padding-left: 150px; color: #db0035;}
		td.middlecolumn {width:40px; text-align: center;}
		/* forgot password */
			div#forgotcontent { margin-top: 20px; }
			.submitbuttonForgot {display: block; margin: 0 auto; height: 20px; width:134px; background: url(images/submit.png) 0 0 no-repeat; text-decoration:none;}
			.submitbuttonForgot:hover {background-position: 0 -20px;}
			#email_forgot { text-align:center; margin: 25px auto 10px; }
			input#inputemail { border: 1px solid #db0035; width: 300px; font-size: 11px; }
			form#forgot_password { width: 439px; margin: 0 auto; }
		/* login */
		/* logout */
		#logout_graphic { margin-top: 20px; }
		/* rules */
		/* submit - accept */
		#submit_graphic { margin-top: 20px; }
		/* winners */
		ol {list-style-position: inside;}
		#winners_page ol li { margin-left: 0px !important; margin: 0 0 0 0px !important;}
		#winners_page ol li span { margin-top: -15px; }
		#winners_page ol li span.winnersscore.charch { margin-top: 0; }
		#winners_page ol li span.winnersscore { margin-top: 0; }
		/* your results */
		.charchpicks { list-style-type: none; float: left; margin-left: 135px; width: 225px; }
		.charchpicks li { color: #db0035; font: 11px verdana, sans-serif; margin-bottom: 5px; }
		.yourpicks { list-style-type: none; border: 1px solid #16459c; margin-left: 436px; width: 316px; }
		.yourpicks li { font: 11px verdana, sans-serif; margin-bottom: 5px; }
		td.rightcolumn {font-size: 11px; width:360px; padding-left: 20px;}
		td.rightcolumnPoints {color:#16459c;}
		#results_page .pick .rightcolumnPoints,
		#results_page .pick .yourpoints { font-size: 11px; }
		#yourscore {font-size: 18pt; font-weight: bold;;}
		.yourpoints {width: 80px; color:#16459c; text-align:right; padding-right:20px;}
		.rightcolumnPoints {width:260px; padding-left: 20px;}
		#previousweek, #nextweek {font-size: 8pt; font-weight: bold; text-decoration: none; color:#16459c;}
		#nextweek { float: right; margin-right: 20px;}
		#previousweek:hover, #nextweek:hover {color: #000;}
		#switchweeks td {height: 1.5em;}
		#switchweeks { padding:0; margin:0; height: .5em;  vertical-align: top;}
		#previousweek {float: left;}
		#results_yourrecord {vertical-align: -3px;}
		h3#pointsYou, 
		h3#pointsCharch {text-align: right; margin-right: 10px;}
		#pointsCharchTotal {color: #830017; font-weight: bold;}
		/* rules */
		h3.ruleshead {margin: 10px 10px 0 10px; border-bottom: 1px solid #db0035; color: #db0035;} 
		p.rulestext {padding: 10px; font-size: 11px; }
		ul.rules {list-style-position: inside; margin-left: 10px;}

/* **************** */
/* footer container */
.footer { 
	margin: 1em 0 0 0; 
	position: relative; 
	width: 100%; }
.footer .navigation { 
	height: 38px; 
	background:url(images/bottomstripes.png) 0 0 no-repeat;
	position: relative; }
.bottomstripes {background: url(images/bottomhighlight.png) 0 0 repeat-x;}



/* size the list items the same as the links they contain. */
.footer .navigation li { height: 38px; float: none; }
.footer .navigation #points { width: 126px; }
.footer .navigation #glo    { width: 160px; }
.footer .navigation #sp     { width: 114px; display: none; }
.footer .navigation.showall #sp { display: block; }
.footer .navigation #eg     { width: 111px; }
/* style the links that the list items contain */
.footer .navigation li a { position: absolute; top: 0; height: 38px; z-index: 5; background-position: 0 0; background-repeat: no-repeat; }
.footer .navigation #points a { right: 620px; width: 126px; background-image: url(images/points.png);   }
.footer .navigation #glo a    { right: 440px; width: 160px; background-image: url(images/glorious.png); } 
.footer .navigation #sp a     { right: 250px; width: 114px; background-image: url(images/submit.png);   }
.footer .navigation #eg a     { right: 0;     width: 111px; background-image: url(images/exit.png);     }
/* reposition the background of the links on hover */
.footer .navigation li:hover a { background-position: 0 -49px; text-decoration: none; }