/* CSS Document */

/* General html tag styles */
body		{	background-color: #F8FAF5;
				color: #004369; 
				font-family: Arial, Verdana, sans-serif; 
				font-size: 12px; 
				line-height: 133%;
				margin: 0; 
				padding: 0;
				text-align: center; }

div			{ 	margin: 0; padding: 0; }			/* all divs default to 0 margins and padding */

p			{ 	text-align: left;
				margin: 0 0 1em; }

h1			{ 	margin: 0;
				font-size: 125%; }

h2			{ 	font-size: 115%; }

h3			{ 	font-size: 1em;
				font-weight: bold;
				margin: 0; }

h1 span, h2 span{ visibility: hidden; }	/* hide the text in the titles so that it exists but the user sees the background image instead */

a			{ 	color: #C41F1C; 
				text-decoration: underline; }

a:visited	{ 	color: #990000; 
				text-decoration: underline; }

a:hover		{ 	color: #C41F1C; 
				text-decoration: none; }
					  
/* layout and html tag overwrite styles */
.main		{	background: #F8FAF5 url(images/content_bg.gif) 0 0 repeat-y;	/* main column that contains whole site: header, content, footer */
				margin: 0 auto;
				padding: 0 7px 5px;
				width: 802px; } /* 7px padding on the sides of 802px make the actual width 816px */

	.header		{	background: #FFF url(images/header_bg.gif) 0 0 repeat-y;		/* top header which contains title and main nav */
					height: 104px; 
					padding: 0 2px;
					margin-bottom: 4px;
					width: 798px; } /* 2px padding on the sides of 798px make the actual width 802px */
		
		h1.title	{	background: transparent url(images/title_bg.png) 0 0 no-repeat;	/* the text in the span is hidden in the html tags above */
						height: 75px; }
						
		.nav		{	background: #5F9BD1 url(images/nav_bg.gif) 0 0 repeat-x;		/* main navigation container */
						height: 29px; }
						
			.nav ul		{	float: right;													/* navigation is an un-ordered list */
							height: 29px;
							list-style: none;
							margin: 0;
							padding: 0; }
			
				.nav ul li	{	float: left;													/* make all the list items sit beside one another */
								margin: 0 6px; }
			
				.nav ul li, .nav ul li a {	display: block;										/* each list item and it's link are a block */
								height: 29px;
								overflow: hidden;
								padding: 0;
								text-decoration: none; }
								
						.nav ul li a span	{ visibility: hidden; }
			
				/* the navigation specific backgrounds and widths */
				.nav ul li.home, .nav ul li.home a				{	background: transparent url(images/nav_home_bg.gif) 0 0 no-repeat;
																	width: 48px; }			
				.nav ul li.course, .nav ul li.course a			{	background: transparent url(images/nav_course_bg.gif) 0 0 no-repeat;
																	width: 60px; }			
				.nav ul li.resources, .nav ul li.resources a	{	background: transparent url(images/nav_resources_bg.gif) 0 0 no-repeat;
																	width: 80px; }			
				.nav ul li.news, .nav ul li.news a				{	background: transparent url(images/nav_news_bg.gif) 0 0 no-repeat;
																	width: 49px; }			
				.nav ul li.community, .nav ul li.community a	{	background: transparent url(images/nav_community_bg.gif) 0 0 no-repeat;
																	width: 82px; }			
				.nav ul li.contactus, .nav ul li.contactus a	{	background: transparent url(images/nav_contactus_bg.gif) 0 0 no-repeat;
																	width: 86px; }
								
				.nav ul li.current, .nav ul li.current a, .nav ul li a:hover	{ background-position: left bottom; } /* current and over states show bottom half */
					
	.content	{	background-color: #F8FAF5;													/* contains all of the content */
					font-size: 1em;
					text-align: left; }
						
		.imageboxleft	{	float: left;
							margin: 0 0 ;															/* all of the common box properties */
							padding: 0; }
							
		.imageboxright	{	float: right;
							margin: 0 0 ;															/* all of the common box properties */
							padding: 0; }
					
		.box		{	margin: 0 0 4px;															/* all of the common box properties */
						padding: 0; }
						
			.box .title	{	height: 33px;																/* contains the h2 with the class that shows the title image */
							margin: 0 0 4px; }
							
				.box .title h2{	height: 33px;
								margin: 0;
								overflow: hidden;
								padding: 0; }
				
				/* specific title images, each title will need it's own class */
				
				.box .title h2.community	{	background: transparent url(images/title_community_bg.png) 0 0 no-repeat; }	
				.box .title h2.contact		{	background: transparent url(images/title_contact_bg.png) 0 0 no-repeat; }						
				.box .title h2.course		{	background: transparent url(images/title_course_bg.png) 0 0 no-repeat; }							
				.box .title h2.help			{	background: transparent url(images/title_help_bg.png) 0 0 no-repeat; }
				.box .title h2.latestnews	{	background: transparent url(images/title_latestnews_bg.png) 0 0 no-repeat; }	
				.box .title h2.members		{	background: transparent url(images/title_members_bg.png) 0 0 no-repeat; }
				.box .title h2.news			{	background: transparent url(images/title_news_bg.png) 0 0 no-repeat; }		
				.box .title h2.resources	{	background: transparent url(images/title_resources_bg.png) 0 0 no-repeat; }								
				.box .title h2.signin		{	background: transparent url(images/title_signin_bg.png) 0 0 no-repeat; }
				.box .title h2.weather		{	background: transparent url(images/title_weather_bg.png) 0 0 no-repeat; }
				.box .title h2.welcome		{	background: transparent url(images/title_welcome_bg.png) 0 0 no-repeat; }	
			
			
			.box .info	{	padding: 4px 10px; }	
																/* contains the box's content */
		
		/* box overwrites */
		.narro		{	background: #F3F7FB url(images/box_narro_bg.gif) 0 0 repeat-y;
						width: 204px; }
						

			.narro .title{	background: transparent	url(images/box_narro_title_bg.png) left top no-repeat; }
						
			.narro .info{	background: transparent url(images/box_narro_bot.gif) left bottom no-repeat; }
					
		.mid		{	background: #F3F7FB url(images/box_mid_bg.gif) 0 0 repeat-y;
						width: 390px; }
						
			.mid .title	{	background: transparent	url(images/box_mid_title_bg.png) left top no-repeat; }
						
			.mid .info	{	background: transparent url(images/box_mid_bot.gif) left bottom no-repeat; }
					
		.wide		{	background: #F3F7FB url(images/box_wide_bg.gif) 0 0 repeat-y;
						width: 596px; }
						
			.wide .title{	background: transparent	url(images/box_wide_title_bg.png) left top no-repeat; }
						
			.wide .info	{	background: transparent url(images/box_wide_bot.gif) left bottom no-repeat; }
						
		/* common layout/alignment classes */
		.left		{	float: left;
						margin-right: 2px; }
		
		.right		{	float: right; }
		
		.topright		{	float: right; }
				  
	.footer		{	background-image: url(images/footer_bg.png);
					clear: both;
					color: #004369; 
					font-size: 0.9em;
					height: 22px;
					margin: 0 2px;
					padding-top: 8px;
					text-align: center; 
					width: 798px; }
					
		.footer a, .footer a:hover, .footer a:visited	{	color: #004369;		/* overwrite link colors */
															margin: 0 20px; }
															
.bottom		{	background: #F8FAF5 url(images/bottom_bg.gif) 0 0 no-repeat;
				height: 20px;
				margin: 0 auto;
				padding: 0 7px;
				width: 802px; }
					
/* the overwrites */
.clear_all		{ 	clear: both; 
					height: 15px; }