/*======================
	RESET
========================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 12px;
	font-family: Arial, Tahoma, Sans-Serif;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1.3;
	color: black;
	text-align:center; 
	background: #8c8c8c;
}

ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/*======================
	HEADER 
========================*/
/*
The container div is what sets the width of your content and centers it in the browser. 
Each of your main divs will have a container div.
*/

/*
Notice that the width of header is set to 100%.
This is so that the background will extend to the edge of the browser.
*/
#header_home
{
	background:url('../images/header_background.jpg') no-repeat 50% 0; 
	float:left; 
	width: 100%; 
	height:170px; 
}
/*
This header_home is so that the home page has the continuing success quote and the address at the top
*/

#header
{
	background:url('../images/header_background2.jpg') no-repeat 50% 0; 
	float:left; 
	width: 100%; 
	height:134px; 
}
/* Heading here is the title of the pages, as in "News" and "Featured" */

#heading
{
	float: left; 
	position: relative; 
	left:20px;
	top:20px;
}

/*This is for when there is a second one BELOW the the first one, like the k-12 programs home page */

#heading-second 
{
	float: left; 
	position: relative; 
	left:20px;
}

/*
The a element (which is usually an inline element) gets changed to a block element
so that it can easily be positioned. This makes it so the BTCI logo at the top
is also a link to the home page
*/
#logo
{
	background:url() no-repeat;
	display:block; 
	position:relative;
	top:30px;
	float:left; 
	width:265px; 
	height:75px; 	
}
/*==================
	MENU
====================*/

#menu
{
	background: #00907e;
	background-image: url('../images/menu_fullbg.jpg');
	background-repeat: no-repeat;
	background-position: 50% 0;
	margin: 0px 0px 0px 0px;
	width: 760px;
	height: 43px;
	padding: 0 0 0 0;
}

#menu ul {
	margin: 0px;
	padding: 9px 10px 4px 10px;
}

#menu ul li {
	margin: 0px;
	display: block;
	float: left;
	list-style: none;
	clear: right;
}

#menu ul li a {
	display: block;
	padding-right: 9px;
	text-decoration: none;
	padding-left: 9px;
	text-align: center;
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 30px;
	font-weight: normal;
	background-image: url('../images/menu_separator.jpg');
	background-repeat: no-repeat;
	background-position: right top;
	
}

#menu ul li.last a {
	display: block;
	padding-right: 9px;
	text-decoration: none;
	padding-left: 9px;
	text-align: center;
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 30px;
	font-weight: normal;
	background-image: none;
	
}

#menu ul li a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background: url('../images/menu-hover.png') repeat-x top;
}

#menu ul li#active {
	text-decoration: none;
	background: url('../images/menu-hover.png') repeat-x top;
}

#menu ul li#active a {
	color: #FFFFFF;
}

/*======================
	MAIN
========================*/
/*
The width is also set to 100% because there is a background image
that we want to go to the edge. 

Notice that height isn't set for #main, this is because it will need to expand
with the content. 
*/

/* This is for the printable versions of 
schedules to have white backgrounds instead of grey */

.schedule
{background: #ffffff;}

.printable
{
	text-align: right;
	width: 92%;
}

.container
{
	margin:0 auto; /* Centers the div */
	width:760px; /*This is the width of your website */
	text-align:left; 
}

#fullcontainer
{
	background: #8c8c8c;
	width: 940px;
	padding-right: 4px;
	margin: 0 auto;
}
#main
{
	background: #8c8c8c;
	float:left; 
	width:100%;
}
/*
All this does is add the background that makes the content appear 
to pop off the screen. 
*/
#wrapper
{
	background: url('../images/base.jpg') no-repeat 50% 0;
	float:left; 	 
	width:100%; 		
}
#belowwrapper
{ 
	background: url('../images/content_background.jpg') repeat-y 50% 0;
	width:100%;
	float:left;
}
	
/*
This div sets the default height of your content. 
*/

#content
{
	background: #ffffff; 
	/* background: url('../images/content_background2.jpg') repeat-y;*/
	float:left;
	width:760px;
	margin-top:0px; 
	margin-left: 0px;
	margin-right: 0px;
	min-height:515px;
	height:auto !important; /* IE 6 min-height fix */
	height:515px; /* IE 6 min-height fix */
}

#no-column
{
	width:760px; 
	float:left;  
}

#no-column-content
{
	width:700px; 
	float:left; 
	padding-left:20px;
	padding-top: 3px;
	padding-right: 20px;
	padding-bottom:10px;
	
}


#no-column-heading
{
	width:760px;
	height:56px;
	float:left;
	background-image: url('../images/green_line_long.jpg');
	background-repeat: no-repeat;
	background-position: bottom left;
}

#no-column-heading-second
{
	width:760px;
	height:36px;
	float:left;
	background-image: url('../images/green_line_long.jpg');
	background-repeat: no-repeat;
	background-position: bottom left;
}

#left-column
{
	width:494px; 
	float:left;  
}

#left-column-content
{
	width:454px; 
	float:left; 
	padding-left:20px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom:10px;
	
}

#left-column-heading
{
	width:494px;
	height:56px;
	float:left;
	background-image: url('../images/green_line_main.jpg');
	background-repeat: no-repeat;
	background-position: bottom left;
}

#right-column-heading
{
	width:266px;
	height:50px;
	float:left;
	background-image: url('../images/green_line_short.jpg');
	background-repeat: no-repeat;
	background-position: bottom left;
}

#right-column
{
	float:left;
	width:266px;
	padding:0px; 
	padding-bottom: 30px;
}
/* We aren't using right-column-content2 it was our example with green dotted border, but it can stay here just for kicks */
#right-column-content2
{
	float:left; 
	background:#f7f7f7;
	width:210px;
	padding-left:12px;
	padding-top: 3px;
	padding-right: 12px;
	padding-bottom:10px;
	margin-left: 10px;
	margin-bottom: 30px;
	border-left: dotted 1px #10705d;
	border-right: dotted 1px #10705d;
	border-bottom: dotted 1px #10705d;
	min-height:386px;
	height:auto !important; /* IE 6 min-height fix */
	height:386px; /* IE 6 min-height fix */
}

#right-column-content
{
	float:left; 
	background:#f7f7f7;
	width:210px;
	border-left: solid 1px #d4d4d4;
	border-right: solid 1px #d4d4d4;
	border-bottom: solid 1px #d4d4d4;
	padding-left:12px;
	padding-top: 3px;
	padding-right: 12px;
	padding-bottom:10px;
	margin-left: 10px;
	margin-bottom: 30px;
	min-height:386px;
	height:auto !important; /* IE 6 min-height fix */
	height:386px; /* IE 6 min-height fix */
}

#right-column-content.sponsorcol
{
	float:left; 
	background:#ffffff;
	width:210px;
	border-left: solid 1px #d4d4d4;
	border-right: solid 1px #d4d4d4;
	border-bottom: solid 1px #d4d4d4;
	padding-left:12px;
	padding-top: 3px;
	padding-right: 12px;
	padding-bottom:10px;
	margin-left: 10px;
	margin-bottom: 30px;
	min-height:386px;
	height:auto !important; /* IE 6 min-height fix */
	height:386px; /* IE 6 min-height fix */
}

.content
{
	float:left;
	padding:10px; 	
}


/*======================
	FOOTER
========================*/
/*
This adds the site bottom and makes it expand to the edge of the screen
like we did with #header and #main
*/ 



#footerpic
{
	background:url("../images/footer.jpg") no-repeat; 
	float:left; 
	width:936px;
	height:67px; 
	padding: 0 0 0 0;
	font-size:12px; 
	color:#ffffff;
	margin-left: auto;
	margin-right: auto;
	
}
#footer 
{	
	color: #ffffff;
	font-size:10px; 
	padding:6px; 
	float:left; 
	width:936px;
	height:125px; 
	padding: 0 0 0 0;
	font-size:12px; 
	color:#ffffff;
	margin-left: auto;
	margin-right: auto;
	
	
}
/*
Adds a 7px margin to the bottom of the menu
*/
#footer-menu 
{
	width: 100%;
	margin-top:10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	
	
}
#footer-menu li
{ 
	padding:0px 6px 0 6px;
	display:inline;
	border-right:solid 1px #fff; 
	list-style:none;
	vertical-align:middle; 
}
/* 
This removes any inherited borders 
*/
#footer-menu li.last
{
	border-right:0; 	
}


#footer-menu li a
{
	font-size:12px; 
	color:#fff; 
	text-decoration:none; 		
}
/* Adds an underline when hovered or active */
#footer-menu li a:hover, #footer ul li.active a
{
	text-decoration:underline; 	
}
#info
{	
	color: #ffffff;
	font-size:10px; 
	padding-top:28px; 
}

.footer
{
	margin:0 auto; /* Centers the div */
	width:932x; /*This is the width of your website */
	text-align:center; 
	color: #ffffff;
	font-size:10px; 
	padding:6px; 
}