/*

Name:		Girton Grammar
Designer:	Chris Stirton
Date:		May 11, 2006

*/


	/* CSS Reset */

	body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0;padding:0;}
	table {border-collapse:collapse;border-spacing:0;}
	fieldset, img{border:0;}
	h1, h2, h3, h4, h5, h6, address, caption, cite, code, dfn, em, strong, th, var {font-style:normal;font-weight:normal;}
	caption, th {text-align:left;}
	h1, h2, h3, h4, h5, h6 {font-size:100%;}
	q:before, q:after {content:'';}


	/* Base Styles */

	html {
		font-size:100%;
		}

	body {
		background:rgb(49,49,49);
		color:rgb(0,0,0);
		font-size:62.5%;	
		font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
		line-height:1.5;
		}
		

	/* Base Styles: Headings */
		
	h1 {
		color:rgb(0,102,204);
		font-size:1.6em;
		line-height:1.4em;
		font-family:helvetica;
		margin:20px 25px 20px 0;
		}

	h2 {
		color:rgb(255,102,0);
		font-weight:bold;
		font-size:1.2em;
		text-transform:uppercase;
		margin:20px 0 0px 0;
		}			

	h3 {
		color:rgb(255,102,0);
		font-size:1.2em;
		font-weight:bold;
		margin:10px 0 0 0;
		}	

	h4 {
		color:rgb(255,102,0);
		font-size:1.1em;
		font-weight:bold;
		margin:10px 0 0 0;
		}	
	
	h5, h6 {
		font-size:1.2em;
		font-weight:bold;
		margin:20px 0 0 0;
		}

	h6 {
		font-size:1.1em;
		font-weight:bold;
		margin:20px 0 0 0;
		}		

	h1, h2, h3, h4, h5, h6 {
		margin-left:35px;
		}	

	h1.title-images {
		margin:0 0 20px 0;
		}
		
	p {
		margin:0 25px 0 35px;
		}

	p, ul, ol, dl, address {
		font-size:1.1em;
		margin-bottom:10px;
		}
		
	ul, ol {
		margin-left:30px;
		}
				
	ul ol,
	ol ul,
	ul ul, 
	ol ol {
		margin-left:0;
		margin-bottom:0px; /* removes margin-bottom from nested lists */
		font-size:1em;
		}

	li {
		margin-left:25px;
		}
		
	dl {
		background:rgb(255,255,255);
		border-width:1px;
		border-style:solid;
		border-color:rgb(204,204,204);
		font-size:1em;
		margin:0 25px 10px 35px;
		padding:10px 10px 0 10px;
		}
		
	dt {
		font-size:1.1em;
		font-weight:bold;
		}
	
	dd {
		font-size:1em;
		margin-bottom:10px;
		}
		
	dd p {
		font-size:1em; /* resets nested paragraphs, inheritance is a problem */
		margin-left:0;
		}

	address {
		background:rgb(255,255,255);
		border-color:rgb(204,204,204);
		border-style:solid;
		border-width:1px;
		margin:0 25px 10px 35px;
		padding:5px 10px;		
		}

	pre {
		font-size:1.3em;
		font-family:"courier","courier new",monospace;
		background:rgb(255,255,255);
		border-style:solid;
		border-width:1px;
		padding:5px 10px;		
		margin-bottom:10px;		
		overflow:auto;
		}
		
	em {
		font-style:italic;
		}
		
	strong {
		font-weight:bold;
		}
		
	em strong,
	strong em {
		font-style:italic;
		font-weight:bold;
		}

	table {
		border-color:rgb(204,204,204);
		border-style:solid;
		border-width:4px 0 0 0;
		clear:both;
		margin:0px 25px 10px 35px;
		}
		
	td {
		background:rgb(255,255,255);
		border-color:rgb(204,204,204);
		border-style:solid;
		border-width:0 0 1px 0;
		padding:3px 5px;
		}
	
	hr {
		display:none;
		}
		
	img { /* very very temporary */
		float:left;
		margin:0 10px 0px 0;
		border-color:rgb(204,204,204);
		border-style:solid;
		border-width:1px;
		padding:4px;
		background:white;
		}


	/* Base Styles: Links */

	a img {
		border:0;
		}

	a:link,
	a:visited {
		color:rgb(51,153,255);
		text-decoration:underline;
		}
		
	a:hover,
	a:active {
		color:rgb(204,0,0);
		text-decoration:none;
		}		
	
	h3 a:link {
		color:rgb(0,0,0);
		text-decoration:none;
		}
		
	h3 a:visited {
		color:rgb(102,102,102);
		text-decoration:none;
		}


	/* Misc. Rules */
	
	#header-home img,
	#splash img,
	#header img,
	#title-image, 
	#content h1 img,
	#clearspan img,
	#calendar img {
		border:0;
		float:none;
		margin:0;
		padding:0;
		}
		
	#header h1,
	#header-home h1 {
		margin:0;
		}
		

	/* Skip Links */

	#skiplinks {
		display:none; /* hide top nanvigation/links */
		}		
		
	/* Header */
	
	#header, #header-home {
		background:rgb(226,0,26) url(../images/bg-header.gif) 0 80px no-repeat;
		border-left:2px solid rgb(255,255,255);
		border-right:2px solid rgb(255,255,255);
		margin:0 auto;
		width:755px;
		}
	
	#logo {
		background:transparent url(../images/bg-logo.gif) top right repeat-y;
		height:80px;
		}


	/* Container */
	
	#container {
		background:transparent url(../images/bg-container.gif) top left repeat-y;
		border-color:white;		
		border-style:solid;
		border-width:0 2px;
		margin:0 auto;
		position:relative;
		width:755px;
		}

	body#bec-home #container {
		background:transparent url(../images/bg-container-home.gif) top left repeat-y;
		}

	#inner-container {
		background:transparent url(../images/bg-innercontainer.gif) 0 125px no-repeat;
		_height: 1%; /* I hate hacks */
		}

	/* doesn't seem to be needed
	* html #inner-container {
		background:transparent url(../images/bg-innercontainer.gif) 0 -145px no-repeat;
		}*/

	body#bec-home #inner-container {
		background:transparent url(../images/bg-innercontainer-home.gif) 0 0 no-repeat;
		}
		

	/* Navigation */	
		
	#navigation {
		display:none; /* hide side nanvigation/menu */
		}		
		
	/* Content */
	
	#content {
		float:left;
		width:545px;
		}

		
	* html #content {
		overflow:hidden;
		}

	#title-image {
		display:none; /* hide image */
		}	


	/* Site Path */

	#sitepath {
		background:transparent url(../images/bg-sitepath.gif) top right repeat-y;
		margin-left:85px;
		padding:2px 0 2px 0;
		}

	* html #sitepath {
		padding-bottom:4px;
		}

	#sitepath p {
		color:rgb(255,255,255);
		font-size:1em;	
		line-height:1.5em;
		margin:0;
		}

	#sitepath a:link,
	#sitepath a:visited {
		color:rgb(255,255,255);
		text-decoration:none;
		}
		
	#sitepath a:focus,	
	#sitepath a:hover,
	#sitepath a:active {
		text-decoration:underline;
		}
		

	/* Splash */

	#splash {
		background:rgb(255,255,255) url(../images/bg-splash.jpg) top right no-repeat;
		height:1%;
		margin-left:210px;
		padding-top:38px;
		padding-bottom:20px;
		}
		
	#splash h1 {
		margin-top:0;
		margin-bottom:5px;
		}
		
	#splash p {
		color:rgb(51,51,51);
		font-size:1.1em;
		margin:0 250px 0 35px;
		}


	/* Calendar */

	#calendar {
		width:315px;
		float:left;
		}

	#calendar h1 {
		margin:0;
		}

	#calendar ul {
		list-style:none;
		margin-left:35px;
		}

	#calendar ul li {
		margin-left:0;
		}

	#calendar ul li a {
		background:transparent url(../images/bg-calendar-li.gif) 0 3px  no-repeat;
		padding-left:10px;
		}


	/* Photo Gallery */
		
	#photogallery {
		background:transparent url(../images/bg-photogallery.gif) 0 170px no-repeat;
		float:left;
		padding-bottom:110px;
		width:230px;
		}
		
	#photogallery h1 {
		margin:0;
		}

	#photogallery h2 {
		color:rgb(255,255,255);
		margin:20px 20px 0 20px;
		}

	#photogallery p {
		color:rgb(204,221,234);
		margin:0 20px;
		}

	#photogallery a:link,
	#photogallery a:visited {
		color:rgb(255,255,255);
		}

	#photogallery a:hover,
	#photogallery a:active {
		text-decoration:none;
		}


	/* Clearspan */
	
	#clearspan {
		clear:both;
		margin-left:210px;
		padding-top:110px;
		}			

	body#bec-home #clearspan {
		padding-top:0;
		}
		

	/* Footer */

	#footer {
		background:rgb(255,255,255) url(../images/bg-footer.gif) top left repeat-y;
		border-color:rgb(255,255,255);
		border-style:solid;
		border-width:10px 2px 10px 2px;
		margin:0 auto;
		width:755px;
		}	
	
	#footer p {
		color:rgb(102,102,102);
		margin:0 25px 0 245px;
		}
		
	#footer #logo-cofgb {
		float:left;
		display:inline;
		margin:10px 0 0 35px;
		padding:0;
		}
		
	#footer #logo-eeaa {
		float: right;
		display: inline;
		margin:10px 30px 0 35px;
		padding: 0;
	}

	#footer img {
		margin:0;
		padding:0;
		border:0;
		float:none;
		}

	#footer p a:link,
	#footer p a:visited {
		color:rgb(102,102,102);
		font-weight:normal;
		text-decoration:none;
		}

	#footer p a:hover,
	#footer p a:active {
		text-decoration:underline;
		}
		
	#footer p.links {
		color:rgb(153,153,153);
		margin-top:10px;
		margin-bottom:5px;
		}		
		
	#footer p.links a:link,
	#footer p.links a:visited {
		color:rgb(51,153,255);
		text-decoration:underline;
		}

	#footer p.links a:hover,
	#footer p.links a:active {
		text-decoration:none;
		}

	#footer p.links a.internal:link,
	#footer p.links a.internal:visited {
		color:rgb(51,51,51);
		}

/* The photo gallery -- this should be fun */
	#gallery {
	}
	
	img#galleryimage {
		width: 474px;
		height: 315px;
		float: none;
		margin: 0 33px;
		padding: 0;
		
		border: none;
	}
	
	#gallerycomment {
		padding: 2px 13px;
		margin: 0 38px 0 33px;
		overflow: hidden;
		border-bottom: 1px solid rgb(255,255,255);
		background-color: rgb(0,0,0);
		color: rgb(255,255,255);
	}
	
	#gallerythumblist {
		width: 474px;
		height: 84px;
		overflow: hidden;
		position: relative;
		float: left;
		background: transparent url(../images/bg-gallery-thumbs.gif) no-repeat top left;
		margin: 0; padding: 0;
	}
	
	#gallerythumblist p {
		position: absolute;
		display: block;
		white-space: nowrap;
		padding: 10px 13px;
		margin: 0;
		left: 0px; top: 0px;
	}
	
	#gallerythumblist p img {
		display: inline;
		margin: 0 5px 0 0;
		padding: 0;
		width: 80px;
		height: 60px;
		border: 2px solid rgb(0,61,122);
		float: none;
		cursor: hand;
		cursor: pointer;
	}
	
	#gallerythumblist p .selected { border-color: rgb(255,255,255); }
	
	#gallerypick {
		clear: both;
		margin: 0px 15px;
	}
	
	#gallerypick .scrollleft, #gallerypick .scrollright {
		display: block;
		width: 18px;
		height: 84px;
		overflow: hidden;
		text-indent: -999px;
		background: transparent url(../images/bg-gallery-left.gif) no-repeat center left;
		float: left;
	}
	
	#gallerypick .scrollright { background-image: url(../images/bg-gallery-right.gif); }
	
	#gallerynav .previous { float: left; margin-left: 14px; }
	#gallerynav .next { float: right; margin-right: 24px; }