/*live-layout.css*/

/* colors */
/* red - #e60202 */
/* gold - #fc3 */
/* green - #090 */


* {margin:0px; padding:0px}

html {font-size:125%;}

body {font-family:Verdana, Arial, sans-serif; font-size:50%;text-align:center;}

#container{min-width:780px; max-width:960px;margin-top:10px;
	margin-left:auto; margin-right:auto; /* centers the layout in SCBs */
	text-align:left;} /* stops elements inheriting the body's text-center */

div#contentarea {
	background-color:#fff; /* faux columns graphic left column */
	position:relative;
	clear:both; /* set positioning context  for left sidebar div */
	background-image: url(images/left.gif);
	background-repeat: repeat-y;
	background-position: left top;
	}
div#contentarea2 {background-color:#fff; /* ensures bg is white if faux graphic doesn't load */
	background:url(images/right.gif) repeat-y top right; /* faux columns graphic right column */
	position:relative; /* set positioning context  for right sidebar div */
	}

a {text-decoration:none;}

#bigheading{background:url(images/ecc183.gif) #e60202 no-repeat  top left;height:200px;}
#bigheading h1 {padding-left:180px; padding-top:165px;font-weight:bold; font-size:2.0em;letter-spacing:-0.025em;
	 text-transform:uppercase; color:#fff; font-style:italic;}

#heading{background:url(images/ecc100.gif) #e60202 no-repeat  top left;height:120px;}
#heading h1 {padding-left:100px; padding-top:10px;font-size:1.5em;letter-spacing:-0.025em;
	 text-transform:uppercase; color:#fff; font-style:italic;}
#heading h2 {text-align:right; text-transform:uppercase; color:#fff; font-style:italic;font-weight:bold; font-size:2.4em;padding-top:60px;padding-right:20px;}

/*Top navigation bar */

#topmenu{text-transform:uppercase;	text-align:center; padding:10px 0 10px 0; font-size:1.3em; color:#fff; background-color:#090;}

#topmenu a {
    	padding:8px 10px; 	 		 	 /*creates space each side of menu item's text */
	    color:#fff;						 /* sets the type color */
	    }
#topmenu a, #leftside a, #rightside a{color:#ffc; font-weight:bold;}
#topmenu a:hover {color:#fc3;}

#leftside a:hover{color:#e60202;background-color:yellow;}
#leftside img:hover{color:#e60202;background-color:#fc3;}
#leftside a, #rightside a{color:#e60202; font-weight:bold;}

#leftside {
	width:200px;
	color: #000;
	float:left;
	padding-top:10px;
	overflow:hidden;
	text-align:center;
	background-color: #FC3;
}
#leftside h1{font-size:1.8em; font-weight:bold; text-align:center;border-bottom:1px solid black;}
#leftside h3{font-size:1.6em;padding-top:10px;text-align:center;}
#leftside h4{font-size: 1.2em;padding-top:10px;}
#leftside p{font-size:1.3em;padding:0px;}
#leftside img{border:none;margin-top:10px;}

#levels {padding:5px; }
#levels h2{font-size:1.6em;padding-top:10px;}
#levels h3{font-size:1.5em;padding-top:10px;text-align:left;}

#levels p{font-size:1.3em;text-align:left;}
.nav {display:block;padding:5px 0px;}


#content{
	margin:0 200px 0 200px;
	background:#fff;
	font-weight: bold;
}

 
#content h3, h2, p{padding:0 20px;}

#content h2 {font-size:2.3em;  font-style:normal; padding-bottom:5px;}
#content h3 {font-size: 1.6em;padding-top:5px;}
#content p {font-size: 1.3em; padding-bottom:5px;}
#content p:first-child {padding-top:10px;}
#content a{color:#f03;}
#content ul{padding:3px 20px;list-style-position:inside;font-size:1.2em;}
#content li{padding-top:3px;}
#content a:hover{text-decoration:underline;}
/*#content table{border-collapse:collapse;padding:5px;}
#content td, #content th{padding:5px;border:1px solid black;vertical-align:top;font-size:1.3em;}
#content table ul{list-style-position:inside;}
*/
#rightside {background-color:#fc3; width:200px; color: #000; float:right;  padding-top:10px; overflow:hidden;}
#container #contentarea #contentarea2 #rightside h1 {
	font-size: 2.2em;
	color: #E60202;
	text-align: center;
	padding: 10px;
	font-weight: bold;
}

#rightside h3{font-size:1.8em; padding-top:10px;margin-left:10px;}
#rightside li{color: #ffc; list-style-type:none;}
#rightside li a:hover{text-decoration:underline;}
#rightside p{
	font-size:1.3em;
	margin-left:2px;
	padding: 5px;
}
.floatright {
	float: right;
}
#container #contentarea #contentarea2 #leftside h4 {
	line-height: 1.2em;
	padding-top: 2px;
	padding-right: 3px;
	padding-bottom: 5px;
	padding-left: 5px;
	text-align: left;
}
#container #contentarea #contentarea2 #content h1 {
	font-size: 2.6em;
	font-weight: bold;
	color: #E60202;
	line-height: 1em;
	text-align: center;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}

#right-images {float:left; text-align:center;padding-left:5px;}
#right-images  a, img{text-decoration:none; border:none;padding-top:10px;}

#footer{border-top:2px solid #0c0; padding:10px; text-align:center; font-size:1.2em;background-color:#e60202;color:#fff;}
#footer p{padding-bottom:2px; font-weight:normal; color:#000;}
#footer a{color:#fff; font-size:1.0em;}
#footer a:hover{text-decoration:underline;}
#footer h4{font-size:1.0em;}

/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */
.green {
	color: #090;
	font-weight: bolder;
	text-transform: uppercase;
}
#jersey {
	padding: 0px;
	margin-right: 20px;
	margin-left: 20px;
}
#leftside h5 {
	font-size: 1.1em;
	padding-top:10px;
	text-align: left;
	margin: 0px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#container #contentarea #contentarea2 #content dl {
	font-size: 1.2em;
	list-style-position: inside;
	margin-right: 10px;
	margin-left: 10px;
}
#container #contentarea #contentarea2 #content dl dt {
	font-size: 1.2em;
	list-style-position: inside;
	font-weight: bold;
	text-transform: uppercase;
	color: #090;
	border-bottom-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #090;
	margin-top: 5px;
	margin-right: 300px;
	margin-bottom: 0px;
	margin-left: 5px;
}
#container #contentarea #contentarea2 #content dl dd {
	margin-left: 10px;
	margin-top: 3px;
	margin-bottom: 5px;
}
.floatleft {
	float: left;
}
#content_shirts {
	background:#fff;
	font-weight: bold;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 200px;
}
#rideshare {
	width:530px;
	color: #000;
	float:none;
	padding-top:10px;
	overflow:hidden;
	text-align:center;
	background-color: #9F9;
	background-image: url(images/rideshare.gif);
	background-repeat: no-repeat;
	background-position: 10px center;
	margin-left: 10px;
	border: medium groove #0C63D4;
}
#content #rideshare p {
	color: #000;
	float:none;
	overflow:hidden;
	text-align:left;
	margin-left: 10px;
	padding-right: 10px;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding-left: 80px;
	padding-bottom: 0px;
}