/*
===============================================================
Home Stylesheet
===============================================================
AUTHOR			: Christian Wach <needle@haystack.co.uk>
LAST MODIFIED	: 02/04/20046
---------------------------------------------------------------
NOTES

This is a specific stylesheet for the homepage

---------------------------------------------------------------
*/ 




/*
===============================================================
Master Styles
===============================================================
*/ 

* 
{
	margin: 0;
	padding: 0;
}



body
{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #fff;
	text-align: center;
}



acronym
{
	text-decoration: none;
	border: 0;
}



a, a:visited
{
	color: #3e6af0;
	text-decoration: underline;
	border: 0px;
}

a:hover, a:active
{
	color: #1d316e;
	text-decoration: underline;
	border: 0px;
}

a img
{
	border: 0px;
}

/* ensure h2, h3, h4 links don't underline */
h2 a, h3 a, h4 a,
h2 a:visited, h3 a:visited, h4 a:visited
{
	text-decoration: none;
}

h2 a:hover, h3 a:hover, h4 a:hover,
h2 a:active, h3 a:active, h4 a:active
{
	text-decoration: underline;
}




/* 
------------------------------------------------------
#footer encloses all item footer elements
------------------------------------------------------
*/

#footer
{
	clear: both;
	margin: 0 0 0 0;
	padding: 0 12px 0 24px;
	border: 0px solid red;
	border-top: 1px solid #ddd;
	background-color: #fff;
}

#footer:after {
    content: "."; 
    display: block; 
    position:relative; /*works better in IE5.5 or float in float situations*/
    height: 0; 
    clear: both; 
    visibility: hidden;
}

	#footer p
	{
		color: #3e6af0;
		font-size: 12px;
		line-height: 16px;
		font-weight: bold;
		margin: 0;
		padding: 4px 0 4px 12px;
	}
	
	#footer ul
	{
		margin: 0;
		list-style: none;	
	}
	
	#footer li 
	{
		margin: 0;
		padding: 4px 0 4px 12px;
		float: left;
		list-style: none;	
		color: #3e6af0;
		font-weight: bold;
		font-size: 12px;
		line-height: 16px;
	}

	#footer ul.supportedby
	{
		margin: 0;
		padding: 0;
		float: right;
		width: 330px;
	}

	#footer ul.supportedby li
	{
		margin: 0;
		padding: 4px 0 4px 12px;
		float: left;
		text-align: right;
	}

	#footer ul.supportedby li#mscape_desc
	{
		width: 130px;
	}

	#footer ul.supportedby li#mscape_img
	{
		width: 170px;
		text-align: right;
	}

	#footer a:hover, #footer a:active
	{
		color: #1d316e;
		text-decoration: underline;
		border: 0px;
	}
	


	
/* 
------------------------------------------------------
.clearer is used wherever IE screws up floated elements
------------------------------------------------------
*/

.clearer {
	clear: both; 
	margin: 0px;
	padding: 0px;
	line-height: 0px;
	font-size: 1px;
	height: 1px;
	border: 0px solid blue;
	background: transparent;
}




/* 
------------------------------------------------------
#container encloses all body content
------------------------------------------------------
*/

#container
{
	margin: 0px auto;
	padding: 0;
	border: 0px solid yellow;
	background-color: transparent;
	width: 920px;
	text-align: left;
}



/* 
------------------------------------------------------
#header encloses all header items
------------------------------------------------------
*/

#header
{
	height: 160px;
	background: transparent;
}

	#title_space
	{
		float: left;
		height: 160px;
		padding: 0;
		background: transparent;
	}
	
		#title
		{
			padding: 30px 0 0 208px;
		}
		
	#logo_space
	{
		float: right;
		width: 172px;
		height: 124px;
		background: transparent;
	}
	
		#logo
		{
			margin: 22px 0 0 0;
			width: 172px;
			height: 43px;
			background: transparent;
		}
		
	#search_space
	{
		float: right;
		clear: right;
		height: 24px;
		background: transparent;
	}
	
		#search
		{
			width: 172px;
			height: 24px;
			background: transparent;
		}
		
		#search form input#search_field
		{
			margin: 2px 0 0 2px;
			width: 124px;
		}
		
		#search form input#search_button
		{
			margin: 0 0 0 2px;
			vertical-align: top;
		}
	



/* 
------------------------------------------------------
#content encloses all, er, content
------------------------------------------------------
*/

#content 
{
	margin: 12px 0 0 208px;	
	width: 700px;
	border: 0px solid blue;
	background-color: transparent;
}

	#flash 
	{
		margin: 0;	
		width: 700px;
		height: 200px;
		border: 0px solid blue;
		background-color: #fff;
	}
	


/* 
------------------------------------------------------
#boxes encloses all feature items
------------------------------------------------------
*/

#boxes 
{
	margin: 12px 0 12px 12px;
	width: 896px;
	height: 260px;
	clear: both;
	border: 0px solid green;
	background-color: transparent;
}

	#boxes h2
	{
		margin: 12px;
		font-weight: bold;
		font-size: 18px;
		color: #1d316e;
		line-height: 22px;
		height: 42px;
	}
	
	#boxes p
	{
		margin: 0 12px 12px 12px;
		font-weight: normal;
		font-size: 14px;
		color: #3e6af0;
		line-height: 20px;
	}
	
	#teachers 
	{
		float: left;
		margin: 0 12px 0 12px;
		height: 260px;
		border: 0px solid green;
		background: transparent url(/images/interface/home_background_line.gif) no-repeat top left;
		width: 172px;
	}
	
		#teachers_header
		{
			margin: 0;
			padding: 0;
			height: 42px;
			width: 172px;
		}
		
		#teachers_area
		{
			margin: 12px 0 12px 12px;
			padding: 0 0;
			border: 0px solid green;
			width: 148px;
			background: transparent;
		}
		
			#teachers_area p
			{
				margin: 0 12px 12px 12px;
				font-weight: normal;
				font-size: 14px;
				color: #3e6af0;
				line-height: 20px;
			}
			
		#teachers_copy
		{
			margin: 0;
			padding: 0;
			width: 172px;
		}
		
	#what 
	{
		float: left;
		margin: 0 12px 0 0;
		height: 260px;
		border: 0px solid green;
		background: transparent url(/images/interface/home_background_fill.gif) no-repeat top left;
		width: 172px;
	}
	
		#what_header
		{
			margin: 0;
			padding: 0;
			height: 42px;
			width: 172px;
		}
		
		#what_area
		{
			margin: 12px 0 12px 12px;
			padding: 0 0;
			border: 0px solid green;
			width: 148px;
			background: transparent;
		}
		
			#what_area p
			{
				margin: 0 12px 12px 12px;
				font-weight: normal;
				font-size: 14px;
				color: #3e6af0;
				line-height: 20px;
			}
			
		#what_copy
		{
			margin: 0;
			padding: 0;
			width: 172px;
		}
		
	#create 
	{
		float: left;
		margin: 0 12px 0 0;
		height: 260px;
		border: 0px solid green;
		background: transparent url(/images/interface/home_background_fill.gif) no-repeat top left;
		width: 172px;
	}
	
		#create_header
		{
			margin: 0;
			padding: 0;
			height: 42px;
			width: 172px;
		}
		
		#create_area
		{
			margin: 12px 0 12px 12px;
			padding: 0 0;
			border: 0px solid green;
			width: 148px;
			background: transparent;
		}
		
			#create_area p
			{
				margin: 0 12px 12px 12px;
				font-weight: normal;
				font-size: 14px;
				color: #3e6af0;
				line-height: 20px;
			}
			
		#create_copy
		{
			margin: 0;
			padding: 0;
			width: 172px;
		}
		
	#scrapbook 
	{
		float: left;
		margin: 0;
		height: 260px;
		border: 0px solid green;
		width: 332px;
		background: transparent url(/images/interface/home_background_fill_big.gif) no-repeat top left;
	}
	
		#scrapbook_header
		{
			margin: 0;
			padding: 0;
			height: 42px;
			width: auto;
		}
		
			#scrapbook_header h2
			{
				margin: 12px 12px 2px 12px;
				font-weight: bold;
				font-size: 18px;
				color: #1d316e;
				line-height: 22px;
				height: auto;
				width: auto;
			}
			
			#scrapbook_header p
			{
				margin: 0 12px 12px 12px;
				font-weight: normal;
				font-size: 14px;
				color: #3e6af0;
				line-height: 20px;
			}
			
		#scrapbook_area
		{
			margin: 12px 0 12px 12px;
			padding: 0;
			border: 0px solid green;
			width: 308px;
			background: transparent;
		}
		
			#scrapbook_area p
			{
				margin: 0 12px 12px 12px;
				font-weight: normal;
				font-size: 14px;
				color: #3e6af0;
				line-height: 20px;
			}
			
		#scrapbook_copy
		{
			margin: 0;
			padding: 0;
		}
		

/* ensure h2 links don't underline */
h2 a
{
	text-decoration: none;
}

h2 a:hover
{
	text-decoration: underline;
}





/*
===============================================================
Menu Stylesheet for pages other than Homepage
===============================================================
AUTHOR			: Christian Wach <needle@haystack.co.uk>
LAST MODIFIED	: 03/04/20046
---------------------------------------------------------------
NOTES

This is a stylesheet for the menu on generic page layouts

---------------------------------------------------------------
*/ 



/* 
------------------------------------------------------
#menu encloses all menu items
------------------------------------------------------
*/

#menu 
{
	clear: both;
	margin: 12px 0 0 0;
	width: 196px;
	float: left;
	border: 0px solid red;
	background-color: transparent;
}



	/* Top Level */
	#menu ul
	{
		margin: 0;
		padding: 0;
		list-style: none;	
	}
	
	#menu ul li 
	{
		margin: 0;
		padding: 0 0 0 12px;
		list-style: none;	
		color: #3e6af0;
		font-weight: bold;
		border: 0px solid red;
	}
	
		#menu ul li a
		{
			display: block;
			padding: 4px 12px 4px 24px;
			width: 148px;
			color: #3e6af0;
			text-decoration: none;
			border: 0px solid green;
			font-size: 14px;
			line-height: 15px;
		}
		
		#menu ul li a:hover
		{
			display: block;
			padding: 4px 12px 4px 24px;
			width: 148px;
			color: #1d316e;
			text-decoration: underline;
			border: 0px solid green;
		}
		
		#menu ul li#active_item div#menu_top
		{
			height: 7px;
			background: transparent url(/images/interface/menu_184_top.gif) no-repeat top left;
		}
	
		#menu ul li a.active_link
		{
			padding: 4px 12px 4px 0px;
			width: 172px;
			background: transparent url(/images/interface/menu_184_repeat.gif) repeat-y top left;
		}
	
		#menu ul li#active_item span#menu_arrow
		{
			width: 14px;
			height: 12px;
			margin: 2px 3px 6px 7px;
			float: left;
			background: red;
			background: transparent url(/images/interface/blue_arrow.gif) no-repeat top left;
		}
	
		#menu ul li#active_item div#menu_bottom
		{
			height: 7px;
			background: transparent url(/images/interface/menu_184_bottom.gif) no-repeat top left;
		}
	



			/* Second Level */
			#menu ul li ul
			{
				margin: 0;
				padding: 0;
				list-style: none;	
			}
			
			#menu ul li ul li 
			{
				margin: 0;
				padding: 0 0 0 12px;
				list-style: none;	
				color: #3e6af0;
				font-weight: bold;
				border: 0px solid red;
			}
			
				#menu ul li ul li a
				{
					display: block;
					padding: 4px 12px 4px 24px;
					width: 136px;
					color: #3e6af0;
					text-decoration: none;
					border: 0px solid green;
					font-size: 14px;
					line-height: 15px;
				}
				
				#menu ul li ul li a:hover
				{
					display: block;
					padding: 4px 12px 4px 24px;
					width: 136px;
					color: #1d316e;
					text-decoration: underline;
					border: 0px solid green;
				}
				
				#menu ul li ul li#active_item div#menu_top
				{
					height: 7px;
					background: transparent url(/images/interface/menu_172_top.gif) no-repeat top left;
				}
			
				#menu ul li ul li a.active_link
				{
					padding: 4px 12px 4px 0px;
					width: 160px;
					background: transparent url(/images/interface/menu_172_repeat.gif) repeat-y top left;
				}
			
				#menu ul li ul li#active_item span#menu_arrow
				{
					width: 14px;
					height: 12px;
					margin: 2px 3px 6px 7px;
					float: left;
					background: red;
					background: transparent url(/images/interface/blue_arrow.gif) no-repeat top left;
				}
			
				#menu ul li ul li#active_item div#menu_bottom
				{
					height: 7px;
					background: transparent url(/images/interface/menu_172_bottom.gif) no-repeat top left;
				}
			
		
		
		
					/* Third Level */
					#menu ul li ul li ul
					{
						margin: 0;
						padding: 0;
						list-style: none;	
					}
					
					#menu ul li ul li ul li 
					{
						margin: 0;
						padding: 0 0 0 12px;
						list-style: none;	
						color: #3e6af0;
						font-weight: bold;
						border: 0px solid red;
					}
					
						#menu ul li ul li ul li a
						{
							display: block;
							padding: 4px 12px 4px 24px;
							width: 124px;
							color: #3e6af0;
							text-decoration: none;
							border: 0px solid green;
							font-size: 14px;
							line-height: 15px;
						}
						
						#menu ul li ul li ul li a:hover
						{
							display: block;
							padding: 4px 12px 4px 24px;
							width: 124px;
							color: #1d316e;
							text-decoration: underline;
							border: 0px solid green;
						}
						
						#menu ul li ul li ul li#active_item div#menu_top
						{
							height: 7px;
							background: transparent url(/images/interface/menu_160_top.gif) no-repeat top left;
						}
					
						#menu ul li ul li ul li a.active_link
						{
							padding: 4px 12px 4px 0px;
							width: 148px;
							background: transparent url(/images/interface/menu_160_repeat.gif) repeat-y top left;
						}
					
						#menu ul li ul li ul li#active_item span#menu_arrow
						{
							width: 14px;
							height: 12px;
							margin: 2px 3px 6px 7px;
							float: left;
							background: red;
							background: transparent url(/images/interface/blue_arrow.gif) no-repeat top left;
						}
					
						#menu ul li ul li ul li#active_item div#menu_bottom
						{
							height: 7px;
							background: transparent url(/images/interface/menu_160_bottom.gif) no-repeat top left;
						}
					
				
				
				
							/* Fourth Level */
							#menu ul li ul li ul li ul
							{
								margin: 0;
								padding: 0;
								list-style: none;	
							}
							
							#menu ul li ul li ul li ul li 
							{
								margin: 0;
								padding: 0 0 0 12px;
								list-style: none;	
								color: #3e6af0;
								font-weight: bold;
								border: 0px solid red;
							}
							
								#menu ul li ul li ul li ul li a
								{
									display: block;
									padding: 4px 12px 4px 24px;
									width: 112px;
									color: #3e6af0;
									text-decoration: none;
									border: 0px solid green;
									font-size: 14px;
									line-height: 15px;
								}
								
								#menu ul li ul li ul li ul li a:hover
								{
									display: block;
									padding: 4px 12px 4px 24px;
									width: 112px;
									color: #1d316e;
									text-decoration: underline;
									border: 0px solid green;
								}
								
								#menu ul li ul li ul li ul li#active_item div#menu_top
								{
									height: 7px;
									background: transparent url(/images/interface/menu_148_top.gif) no-repeat top left;
								}
							
								#menu ul li ul li ul li ul li a.active_link
								{
									padding: 4px 12px 4px 0px;
									width: 136px;
									background: transparent url(/images/interface/menu_148_repeat.gif) repeat-y top left;
								}
							
								#menu ul li ul li ul li ul li#active_item span#menu_arrow
								{
									width: 14px;
									height: 12px;
									margin: 2px 3px 6px 7px;
									float: left;
									background: red;
									background: transparent url(/images/interface/blue_arrow.gif) no-repeat top left;
								}
							
								#menu ul li ul li ul li ul li#active_item div#menu_bottom
								{
									height: 7px;
									background: transparent url(/images/interface/menu_148_bottom.gif) no-repeat top left;
								}
							
						
						
						
	/* The selected menu item */
	#menu a.active_link
	{
		color: #1d316e;
	}



						
/* 
------------------------------------------------------
.skip uses the off-left technique as described here:
http://css-discuss.incutio.com/?page=ScreenreaderVisibility
and here:
http://www.defacto-cms.com/what-are-skip-links.html

http://geek.focalcurve.com/archive/2005/03/accessibly-hiding-skiplinks/
has a different approach again...
.skip { visibility: hidden; position: absolute; left: -9999px; }
------------------------------------------------------
*/

#menu p a.skip 
{
	/* visibility: hidden; add this if tab-order is to be skipped */
	position: absolute;
	left: -9999px;
}

#menu p a.skip:active,
#menu p a.skip:focus
{
	top: 0em;
	left: 10em;
	border: 3px #3399cc solid;
	background-color: transparent;
}