/* Remember the golden rule, CSS covers both LAYOUT (i.e. the various boxes that things fit into), and DESIGN
(i.e. the placement and font of stuff in the boxes).  */

html, body {
	margin: 0px;
	padding:0px;
	background-image:url(../images/bg.gif);
}

h1, h2, h3, h4, h5, h6, p, form {
	margin: 0px;
	padding:0px;
}

/* Dan used this to position the foosball*/
#football {
	float:left;
	padding: 10px 0 0 10px;  /* when there are 4 numbers, they are top right bottom left */
}

/* 1024 is the width of the page, Dan thinks the 'auto' is what is centering it*/
#wrapper {
	width:1024px;
	margin:0px auto;
	background-color:#FFF;
}

/* This used to be 778 pixels when it was 800 width */
#content {
	width:1002px;
	margin:0px auto;
	background-image:url(../images/bg_header_top.gif);
	background-repeat:repeat-x;
	background-position:top;
}


#header {
	height:49px;
}

#logo {
	width:258px;
	float:left;
}

#logo h1{
	font-family:"Trebuchet MS";
	font-size:26px;
	color:#F76B0C;
	font-weight:normal;
	text-decoration:none;
	padding-left:40px;
}

#logo h4 {
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#808080;
	font-weight:normal;
	text-decoration:none;
	padding-left:75px;
}

#links ul {
	margin:0px; 
	padding-top:20px;
}

#links li{
	float:left;
	list-style-type:none;
	width:129px;
	height:25px;
	text-align:center;
	background-color:#b25c11;
	border-left:1px solid #FFF;
	padding-top:4px;
}

#links a{
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
}

/* a:hover means only to apply this when they are hovering over the link (remember a href...). 
If you put #links *, that means apply it to everything */
#links a:hover{
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#fff;
	font-weight:normal;
	text-decoration:underline;
}

#mainimg {
	background-image:url(../images/top_banner.gif);
	background-repeat:no-repeat;
	height:80px;
	text-align:right;
	width:800px;
}

#mainimg h3 {
	font-family:"Trebuchet MS";
	font-size:48px;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
	padding:10px 40px 0px 0px;
}

#mainimg h4 {
	font-family:"Trebuchet MS";
	font-size:18px;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
	padding:0px 40px 0px 0px;
}

#banner_ad {
	height:60px;
	text-align:center;
	width:800px;
	padding-top:14px;

}

#banner_ad h3 {
	font-family:"Trebuchet MS";
	font-size:30px;
	font-weight:normal;
	text-decoration:none;
	padding:5px 0px 0px 0px;
}

#contentarea {
	clear:both;
	padding:25px 0px;
}

#leftbar {
	float:left;
	width:539px;
	border-right:1px solid #BCBDBC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

#leftbar h1{
	font-size:24px;
}

#leftbar h2{
	font-family:"Trebuchet MS";
	font-size:26px;
	color:#bba627;
	font-weight:normal;
	text-decoration:none;
	padding-left:0px;
	padding-bottom:5px;
}

#leftbar p{
	font-family:"Trebuchet MS";
	font-size:14px;
	color:#b25c11;
	font-weight:normal;
	text-decoration:none;
	padding:0px 40px;     /* when there are only 2 numbers, that is top/bottom and right/left */
}

#leftbar a {
	color:#b25c11;
	font-weight:bold;
	text-decoration:underline;
}

#leftbar a:hover {
	color:#bba627;
	font-weight:bold;
	text-decoration:underline;
}

/* Notice the fact that this is only 237px.  So there is still some space on the right when I switched the 
width to 1024.  The rest of the space is taken up by #google because I didn't specify a width.  But if
I had said 500 for google, it wouldn't fit and would go down below the flash app */
#rightbar {
	float:left;
	width:237px;
}

#google {
	float:left;
	width:224px;
}
#google h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	padding:25px 25px;
}

#google p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-left:25px;
}
#rightbar h2{
	font-family:"Trebuchet MS";
	font-size:26px;
	color:#000000;
	font-weight:normal;
	text-decoration:none;
	padding-left:14px;
	padding-bottom:5px;
}

#rightbar p{
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#000000;
	font-weight:bold;
	text-decoration:none;
	padding:0px 25px;
}

.orangetext {
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#EE8907;
	font-weight:bold;
	text-decoration:none;
}

#bottom {
	clear:both;
	height:32px;
	padding-top:25px;
}

#email {
	float:left;
	width:500px;
	background-color:#bba627;
	height:27px;
	padding-top:5px;
}

#email a{
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#fff;
	font-weight:normal;
	text-decoration:underline;
	padding:0px 40px;
}

#email a:hover{
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
	padding:0px 40px;
	
}

#validtext {
	float:left;
	width:278px;
	background-color:#bba627;
	height:27px;
	padding-top:5px;
}

#validtext p{
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#bba627;
	font-weight:normal;
	text-decoration:none;
	text-align:right;
	padding-right:35px;
}

#validtext a{
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#fff;
	font-weight:normal;
	text-decoration:underline;
}

#validtext a:hover{
	font-family:"Trebuchet MS";
	font-size:11px;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
}
#wrapper #content #contentarea #leftbar table {
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
#wrapper #content #contentarea #leftbar td {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}