/* 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 10px; }
				
br			{	clear: both; }

table, tr, td{	margin: 0;
				padding: 0; }

h1			{ 	margin: 0;
				font-size: 1.25em; }

h2			{ 	font-size: 1.15em; }

h3			{ 	font-size: 1em;
				font-weight: bold;
				margin: 0 0 0 10px; }
				
h3.success	{	color: Green; }
h3.failed	{	color: #FF0000; }

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;
				text-align: center;
				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.supporters, .nav ul li.supporters a	{	background: transparent url(images/nav_supporters_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; }
					
		.box																	/* all of the common box properties */
		{
			margin: 0 0 4px;
			padding: 0; 
			text-align: left;
		}
						
			.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.signin	{	background: transparent url(images/title_signin_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.password	{	background: transparent url(images/title_password_bg.png) 0 0 no-repeat; }
				
				.box .title h2.changepass{	background: transparent url(images/title_changepass_bg.png) 0 0 no-repeat; }
								
				.box .title h2.newaccount{	background: transparent url(images/title_newaccount_bg.png) 0 0 no-repeat; }
								
				.box .title h2.classroom{	background: transparent url(images/title_classroom_bg.png) 0 0 no-repeat; }
								
				.box .title h2.profile	{	background: transparent url(images/title_profile_bg.png) 0 0 no-repeat; }
								
				.box .title h2.tools	{	background: transparent url(images/title_Tools_bg.png) 0 0 no-repeat; }
								
				.box .title h2.users	{	background: transparent url(images/title_users_bg.png) 0 0 no-repeat; }
			
			.box .info															/* contains the box's content */
			{
				padding: 8px 6px;
			}
			
				.box label, .box .label	
				{	
					display: block;
					float: left;
					margin: 4px 5px 5px 0;
					text-align: right;
					width: 200px;
				}
				
				.box .textright
				{
					display: block;
					float: left;
					margin-top: 4px;
					width: 250px;
				}
				
				.box .error
				{
					margin: 12px 0 16px 205px;
					color: #FF0000;
					font-size: 1em;
					text-align: right;
					width: 250px;
				}
								
				.box input, .box select
				{
					margin: 0 5px 3px 0;
					width: 250px;
				}
								
				.checkbox	{	margin: 3px 0 5px 205px;
								width: 200px; }
				
					.checkbox label, .checkbox input{	display: inline;
														float: none;
														margin: 0;
														padding: 0;
														width: auto; }
														
					.checkbox input					{	margin-right: 5px; }
					
				.box .button{	background-color: #C41F1C;
								border: solid 1px #333;
								color: #FFF;
								font-size: 1.05em;
								font-weight: bold;
								margin: 0 0 16px 205px;
								padding: 3px 0;
								text-align: center;
								width: 80px; }
								
					.box .button a, .box .button a:hover, .box .button a:visited{	color: #FFF; }
					
				.box .softbutton, .box .softbutton a, .box .softbutton a span
				{
					display: inline;
				}
				
				.box .searchfield
				{
					margin: 0 0 4px 20px;
					width: 340px;
				}
				
				.box .lmsFrame
				{	
					background-color: #F3F6FB;
					border: none 0 transparent;
					height: 550px;
					width: 584px;
				}
				
				.pager
				{
					display: block;
					margin: 3px auto 4px;
					text-align: center;
					width: 300px;
				}
				
					.pager select
					{
						margin: 0;
						width: auto;
					}
		
		/* 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; }
				  
	.footer		{	background-image: url(images/footer_bg.png);
					clear: both;
					color: #004369; 
					font-size: 0.9em;
					height: 22px;
					margin: 0 3px;
					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; }