/* Start of CMSMS style sheet 'SBC Main Stylesheet' */
/* 
Somerville Baptist College:
Stylesheet for screen output.
*/

/*-------------------------------------
PAGE STRUCTURE
-------------------------------------*/

	body 
		{
		/*background-color: rgb(246,217,171);*/
		background-color: rgb(255,255,255);
		background-image: url('images/bodybg.png');
		background-repeat: repeat-x;
		font-size: 62.5%;
		margin: 0;
		padding: 0;
		}

	div#container_main
		{
		width: 100%;
		background-image: url('images/headerbg.jpg');
		background-repeat: no-repeat;
		background-position: top center;
		}
		
		
		div#container_centre
			{
			/* all content comes inside this section, so this must fit within the screen at all times - 960px will work fine on a standard 1024x768 monitor */
			margin: 0 auto;
			width: 960px;
			padding: 0;
			text-align: left;
			}
		
			div#header
				{
				clear: both;
				
				height: 170px;
				background-image: url('images/title.jpg');
				background-repeat: no-repeat;
				
				overflow: visible;
				
				width: 960px;
				margin: 0; padding: 0;
				
				
				}
		
				
		
		
					div#container_contact_search
						{
						width: 425px;
						
						float: right;
						
						
						text-align: right;
						
						color: rgb(0,0,0);
						
						font-size: 0.8em;
						
						display: block;
						
						overflow: hidden;
						}
		
						div#contact_details
							{
							width: 400px;
							float: right;
							}
		
						div#search_form
							{
							width: 400px;
							float: right;
							}
							
							div#search_form label
								{
								display: none;
								}
							
							.search_input_container input
								{
								width: 10em;
								}
							
							div#search_form input.submit
								{
								width: 5em;
								}
		
				div#main_menu_container
					{
					float: left;
					padding-left: 133px;
					overflow: visible;
					height: 33px;
					
					position: absolute;
					top: 137px;
					}
			
					ul#main_menu
						{
						width: 150em;
						
						height: 33px;
						list-style: none;
						padding: 0;
						margin: 0;
						}
			
						ul#main_menu li /* style the current, rollovers, visited etc later in the file.  structure only here */
							{
							float: left;
							margin: 0;
							
							padding: 0 0 0 10px;
							
							background: url("images/slidingtab_left.gif") no-repeat left top;
							
							overflow: visible; display: block;
							}
							
							ul#main_menu li a
								{
								display: block;
								padding: 9px 12px 4px 2px;
								height: 20px;
								background: url("images/slidingtab_right.gif") no-repeat right top;
								
								width: 0.1em; /* this is used to make the IE6 area more clickable.  This will break other browsers, but it is fixed in the selector below */
								
								white-space: pre;
								}
							
							
							div#main_menu_container > ul a {width:auto;} /**/
							
							ul#main_menu li:hover, ul#main_menu li.over
								{
								background-position: 0 -103px;
								}
							
							ul#main_menu li:hover a, ul#main_menu li.over a
								{
								background-position: 100% -103px;
								}
							
							ul#main_menu li.current
								{
								background-position: 0 -206px;
								}
							
							ul#main_menu li.current a
								{
								background-position: 100% -206px;
								color: white;
								}
								
							
							
						ul#main_menu li:hover,ul#main_menu li.over,
							{
							overflow: visible; 
							}
						
							ul#main_menu li ul
								{
								display: none;
								
								background-color: rgb(102,85,68);
								list-style: none;
								
								border: 2px solid rgb(102,85,68);
								
								margin: 0 0 0 -10px; /* align to the <li> not the <a> */
								padding: 0;
								border-top: none;
									
									position: absolute; /* this prevents the <li> width expanding to include the submenu popup */
									/*width: 30em;*/
									min-width: 20em;
								
								
								z-index: 50;
								}
								
							/*\*/ * html ul#main_menu li ul { width: 35em; } /**/
								
								ul#main_menu li:hover ul, ul#main_menu li.over ul
									{
									display: block;
									}
								
								ul#main_menu li ul li
									{
									display: block;
									background-image: none;
									margin: 0; padding: 0;
									border-top: 1px solid rgb(246,217,171);
									float: none;
									clear: both;
									}
									
								

								
								ul#main_menu li ul li a
									{
									display: block;
									width: auto;
									
									background-image: none;
									margin: 0; padding: 2px 6px 4px 6px;
									color: white;
									white-space: pre;
									overflow: hidden;
									}
								
								ul#main_menu li ul li a:hover
									{
									background-color: rgb(246,217,171);
									color: rgb(0,0,0);
									}
		
			div#menubar
				{
				width: 960px; 
				height: 19px;
				clear: both;
				}
				
				
			div#container_submenu_body_pictures
				{
				clear: both;
				margin: 0 auto;
				width: 960px;
				}
				


				div#retaining_wall_left /* Just have an all green background with a white / transparent gif at the bottom to give the rounded illusion */
					{
					width: 18px;
					float: left;
					
					background-color: rgb(108,91,71);
					background-image: url('images/retaining_wall_footer.gif');
					background-position: center bottom;
					background-repeat: no-repeat;
					}
		
				ul#submenu
					{
					list-style: none;
					padding: 0;
					margin-top: 5px;
					float: left;
					width: 136px; 
					}
		
					ul#submenu li /* style the current, rollovers, visited etc later in the file.  structure only here */
						{
						font-size: 1.4em;
						margin: 3px 8px;
						padding: 0;
						}
						
						ul#submenu li a
							{
							margin: 0;
							padding: 5px;
							display: block;
							width: 110px;
							}
		
			
				div#container_pictures_news
					{
					float: right;
					width: 202px;
					padding: 10px;
					}
		
					div#container_pictures_news img
						{
						display: block;
						margin-bottom: 10px;
						}
		
					div#container_pictures_news img.landscape
						{
						display: block;
						width: 220px;
						height: 166px;
						}
		
					div#container_pictures_news img.portrait
						{
						display: block;
						width: 220px;
						height: 293px;
						}
					
					div#container_pictures_news div#news
						{
						width: 206px; /* same width as image but with 1px border and 6px padding on each side */
						border: 1px solid rgb(102,85,68);
						padding: 6px; 
						font-size: 1.2em;
						
						background-color:  rgb(246,239,227);
						}
						
						div#news
							{
							text-align: left;
							}

						div#news h2
							{
							display: block;
							margin: -6px -6px 0 -6px;
							background-color: rgb(102,85,68);
							color: white;
							
							font-family: Verdana, Arial, sans-serif;
							font-size: 1.3em;
							padding: 1px 4px 4px 4px;
							}
							.NewsSummary
								{
								display: block;
								margin: 4px 0 15px 0;
								}
								
							
							.NewsSummaryLink a
								{
								font-family: Verdana, Arial, sans-serif;
								font-size: 1.2em;
								font-weight: 600;
								color: rgb(102,85,68);
								}
								
							
							.NewsSummaryDetails
								{
								font-family: Verdana, Arial, sans-serif;
								font-size: 0.9em;
								}
							
							.NewsSummaryContent
								{
								font-family: Verdana, Arial, sans-serif;
								}
							
							.NewsSummaryContent p
								{
								font-size: 1em;
								margin: 3px 0 3px 0;
								}
					
				div#container_title_breadcrumbs_content
					{
					padding-left: 160px; /* it's 11.8 * 1.4 = 16.52 */
					padding-right: 222px; 
					}

				div#container_title_breadcrumbs_content.nopictures
					{
					padding-right: 0px; 
					}
		
					h1#page_title
						{
						}
		
					div#printicon
						{
						float: right;
						}
		
					div#printicon a
						{
						text-decoration: none;

						display: block;
						border: 1px solid rgb(102,85,68);
						padding: 0 3px 3px 3px;
						margin: 11px 0px 11px 3px;
						}
		
					div#printicon a img
						{
						border: 0;
						vertical-align: middle;
						}
		
					div#breadcrumbs
						{
						padding-left: 0;
						}
			
					div#container_content
						{
						margin-top: 0.5em; 
						}
						
					/*IE6only*//*\*/ * html div#container_title_breadcrumbs_content
						{
						/*border: 1px solid rgb(200,200,200);*/
						} /**/
						
						div.flashContainer
							{
							width: 802px;
							/*height: 426px;*/
							margin: 0 0 0 -1px; padding: 8px 0;
							display: block; float: left;
							z-index: 0;
							}
			
						div#prev_next_links
							{
							clear: both;
							padding-left: 16.52em; /* it's 11.8 * 1.4 = 16.52 */
							margin-left: -16.52em; /* it's 11.8 * 1.4 = 16.52 */
							font-size: 0.8em;
							margin-top: 30px;
							width: 100%;
							}
			
							span#prev_link
								{
								display: block;
								float: left;
								}
			
							span#next_link
								{
								display: block;
								float: right;
								}
			
			div#centre_bottom_line
				{
				/* this bottom line causes the div#container_submenu_body_pictures to stretch out to the bottom */
				width: 100%; 
				height: 1px;
				display: block; 
				clear: both;
				}
					
		
		
	div#footer
		{
		clear: both;
		}
		
		div#footer_left
			{
			
			}
		
		div#footer_centre
			{
			/* position it the same as the main content container */
			margin: 0 auto;
			font-size: 0.8em;
			}
		
			div#footer_navigation
				{
				margin: 0 10em 0 11em;
				text-align: center;
				}
		
			div#footer_copyright
				{
				margin: 0 10em 0 11em;
				text-align: center;
				}
		
		div#footer_right
			{
			
			}
		

/*-------------------------------------
MAIN MENU
-------------------------------------*/

ul#main_menu li a
	{
	font-family: Verdana, Arial, sans-serif;
	color: black;
	text-decoration: none;
	
	font-size: 1.5em;
	}

ul#main_menu li ul li a
	{
	font-family: Verdana, Arial, sans-serif;
	color: white;
	text-decoration: none;
	font-size: 1.4em;
	}


/*-------------------------------------
SUB MENU
-------------------------------------*/
ul#submenu li a
	{
	border: 1px rgb(246,217,171) solid;
	background-color: white;
	font-family: Verdana, Arial, sans-serif;
	color: black;
	text-decoration: none;
	}

ul#submenu li.current a
	{
	border: 1px rgb(246,217,171) solid;
	background-color: rgb(246,217,171);
	}
	

ul#submenu li a:hover 
	{
	border: 1px rgb(246,217,171) solid;
	background-color: rgb(246,217,171);
	}

/*-------------------------------------
FOOTER MENU
-------------------------------------*/

/*-------------------------------------
TYPOGRAPHY
-------------------------------------*/


h1#page_title
	{
	font-size: 4.2em;
	font-family: Georgia, Times, Times New Roman, Serif;
	font-weight: 400;
	}
	
div#breadcrumbs
	{
	font-size: 1.2em;
	font-family: Verdana, Arial, sans-serif;
	
	margin: 3px 0;
	}

h2, h3, h4, h2 a, h3 a, h4 a
{
color: rgb(0,127,0);
}

h2
	{
	/* H2 Headers */
	font-size: 2em;
	font-family: Verdana, Arial, sans-serif;
	font-weight: 500;
	line-height: 1.4em;
	
	margin: 0 0 0em 0; /* Order: top right bottom left*/
	}

h3
	{
	/* H2 Headers */
	font-size: 1.6em;
	font-family: Verdana, Arial, sans-serif;
	font-weight: 500;
	line-height: 1.4em;
	
	margin: 0 0 0em 0; /* Order: top right bottom left*/
	}

h4
	{
	/* H2 Headers */
	font-size: 1em;
	font-family: Verdana, Arial, sans-serif;
	font-weight: 800;
	line-height: 1.4em;
	
	margin: 0 0 0em 0; /* Order: top right bottom left*/
	}



	
#container_content, p, label
	{
	/* main content area and paragraphs outside this */
	font-size: 1.4em;
	font-family: Verdana, Arial, sans-serif;
	line-height: 1.6em;
	}
		
#container_content p, #container_content label
	{
	/* paragraphs within the main content area, stop them getting heaps bigger. */
	font-size: 1em;
	line-height: 1.3em;
	
	margin: 0 0 1.2em 0;
	
	}
	
#container_content p.small	
	{
	/* things where we want the text size small */
	font-size: 0.8em;
	}
		
/*-------------------------------------
IMAGES
-------------------------------------*/

.thumbnailLeft
	{ display: block; float: left; margin: 10px 10px 10px 0; width: 120px; height: 90px; }

.thumbnailRight
	{ display: block; float: right; margin: 10px 0 10px 10px; width: 120px; height: 90px; }

.floatInCentre
	{ display: block; margin: 10px auto; }

.floatLeft
	{ display: block; float: left; margin: 0px 10px 10px 0; }

.floatRight
	{ display: block; float: right; margin: 0px 0 10px 10px; }

/* For use in the gallery, can't see an easy way to change that stylesheet */

.thumb
{
width: 120px;
padding: 0 15px 10px;
}

.leftThumb
{
clear: left;
}

.thumb a img
{
border: 0;
}

/*-------------------------------------
LINKS
-------------------------------------*/



/*-------------------------------------
FORMS
-------------------------------------*/

/* taken from FORM BUILDER */
.contactform fieldset {padding: 1em; background-color: #eee;} 

.contactform fieldset legend {font-weight: bold;} 

.contactform div {width: 100%; padding: 0.25em 0 0.25em 0;} 

.contactform div label {display: block; width: 20em; } 

.contactform div.required {color: #f00;} 


fieldset.search { border: 0; padding: 0; margin: 0; }

/*-------------------------------------
GENERIC CLASSES (eg. hidden)
-------------------------------------*/

	.container
		{
		display: block;
		border: 0 solid black;
		margin: 0;
		}

	.hidden, .accessibility
		{
		display: none;
		}
/*-------------------------------------
FLASH OBJECTS
-------------------------------------*/


/* End of 'SBC Main Stylesheet' */