/* This stylesheet contains all the styles for Equus 2009. The idea is to maintain all the statements in one stylesheet to enable easy maintenance of the site. This revision is being made in August 2009 and is the first major revision to the Equus site. Major changes include two columns instead of one, a wider screen area and a few other aesthetic changes*/

/*Here are some general rules for the body */

body	{
		margin: 0px;
		padding: 0px;
		font-size: medium;
		font-family: Verdana, Helvetica, Arial, sans-serif;
		background-color: #000;
		}

/* This is the container for all the content. Centred. */
#content	{
		position: relative;
		margin: 2px auto;
		background-image: url(images/background/background.jpg);
		background-repeat: no-repeat;
		background-position: top left;
		/*background-attachment: fixed;*/
		width: 1024px;
		height: 1445px;
		/*z-index: -2;*/
		}
		
/* This div contains and positions the compass images on the header */
#compass_header	{
		position: absolute;
		margin: -70px 0px 0px -80px;
		background-image: url(images/background/compass_one.png);
		background-repeat: no-repeat;
		background-position: top left;
		width: 200px;
		height: 322px;
		/*z-index: 5;*/
		}

/* This is for the second compass. Added because the margin was too long with the first single image */
#compass_two	{
		position: absolute;
		margin: -13px 0px 0px 217px;
		background-image: url(images/background/compass_two.png);
		background-repeat: no-repeat;
		background-position: top left;
		width: 178px;
		height: 246px;
		z-index: 250;
		}
		
/* This div contains all header elements. The dance painting is included as background image on this div so it doesn't go to waste. Seperate rules are introduces so three possible headers are possible. */
#header	{
		background-image: url(images/background/dance.png);
		background-repeat: no-repeat;
		background-position: right;
		width: 1024px;
		height: 225px;
		}

#header_court	{
		background-image: url(images/background/court.png);
		background-repeat: no-repeat;
		background-position: right;
		width: 1024px;
		height: 225px;
		}
		
#header_horse	{
		background-image: url(images/background/horse_fight.png);
		background-repeat: no-repeat;
		background-position: right;
		width: 1024px;
		height: 225px;
		}
		
/* What we have here is a div for the logo. I know this may be an overdose of divs but it just helps with the positioning of the header and getting it right the first time and making things simpler to move around during another revision */

#logo	{
		position: absolute;
		margin: 0px 0px 0px 45px;
		background-image: url(images/background/logo2.png);
		background-repeat: no-repeat;
		background-position: top left;
		width: 202px;
		height: 297px;
		}
		
/* Header extends 225px from top. Navigation starts after that and extends for 39px excluding margin before textual content.  The following is for navigation background with transparency. The actual navigation div is absolutely positioned on top of this div so that it isn't affected by the transparency.*/ 

/* Moving navigation to a seperate stylesheet using suckerfish dropdown method from 'A list apart'. Commenting out the rest of this for testing purposes

*/
		
#small_title	{
	/*position: relative;*/
	height: 39px;
	width: 290px;
	/*background-color: none; */
	margin: -39px 0 0 10px;
	/*border-bottom: 2px solid red;*/
	}

#small_title h3	{
	font-size: 1.3em;
	font-style: italic;
	color: #d1d1d1;
	margin: 0;
	}
		
		/* Textual content containers start here. Beginning with the left column */

		
#leftcol 	{
		/*commenting out and trying to use another method here so that we can have both the transparent background and the content in one div */
		/*background-color: rgb(185, 185, 185);
		/* for IE 
		filter:alpha(opacity=25);
		/* CSS3 standard
		opacity:0.25;*/
		

		position: relative;
		padding: 5px;
		padding-right: 10px;
		padding-bottom: 0px;
		float: left;
		height: auto;
		width: 280px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 8px;
		border-right: 1px solid #000;
		/*border-bottom: 1px solid #000;*/
		background-image: url(images/background/main_back.png);
		background-repeat: repeat;
		max-height: 1090px;
		overflow: auto;
		/*border-bottom: 5px solid black;*/
		/* min-height: 250px; */
		/*z-index: -1;*/
		}

		
		/* This is another method for the transparency taken from here: http://www.agileapproach.com/blog-entry/transparent-backgrounds-with-css */
		
		/*<!-[if lte IE 6]>
		div.transp {
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='images/background/left_trans_25.png');
		}
		<![endif]-> */

	/*	div.transp[class] { 
		background-image: url(images/background/left_trans_25.png);
		} */
		
#leftcol p	{
		font-size: 0.74em;
		color: #2f2f2f;
		line-height: 1.75em;
		margin-bottom: 10px;
		}
		
#leftcol h3	{
		font-size: 1.2em;
		color: #852b19;
		line-height: 1.3em;
		}
	/*	
#leftcol a	{
	color: #993300;
	font-style: italic;
	}*/
		
/*.home_height	{
		min-height: 710px;
		}*/

.snapshot	{
	color: #d1d1d1;
	font-size: 1.3em;
	margin: 0;
	margin-bottom: 5px;
	padding-bottom: 3px;
	border-bottom: 1px dashed #ffffff;
	/*background-image: url(images/background/snap_back.png);
	background-repeat: no-repeat;*/
}
	
	
.long_story	{
	/*min-height: 1090px;*/
	background-image: url(images/defense.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	}
	
.short_story	{
	/*min-height: 1090px;*/
	background-image: url(images/pasta.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	}
	
.trail_story	{
	/*min-height: 900px;*/
	background-image: url(images/postcard.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	}
	
.ethiopia_story	{
	/*min-height: 1090px;*/
	background-image: url(images/mirror.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	}
	
.cheshire_story	{
	/*min-height: 1090px;*/
	background-image: url(images/kebele.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	}
	
.contact_story	{
	/*min-height: 1090px;*/
	background-image: url(images/barbers.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	}
	
.story_headline	{
	margin: 0px;
	padding: 0px;
	}
	
/* And continuing with the right column */

#rightcol {
		background-image: url(images/background/main_back.png);
		background-repeat: repeat;
		padding: 0px 10px 5px 10px;
		width: 680px;
		position: relative;
		margin-top: 10px;
		/*margin-left: 9px;*/
		margin-right: 10px;
		/*margin-bottom: 25px;*/
		height: 1145px;
		overflow: auto;
		/*z-index: -1;*/
		/*To fix a bug in IE7 where the drop down menu goes below the main text */
		}
		
/*#rightcol_content	{
		position: absolute;
		width: 680px;
		height: 1145px;
		margin-top: -1155px;
		margin-left: 315px;
		padding: 5px 10px;
		overflow: auto;
		}*/

#rightcol p	{
		font-size: 0.8em;
		color: #2f2f2f;
		line-height: 1.6em;
		margin-bottom: 10px;
		z-index: 0;
		}
		
#rightcol li	{
		font-size: 0.8em;
		color: #2f2f2f;
		line-height: 1em;
		list-style: disc outside;
		margin-left: 20px;
		float: none;
		width: 600px;
		height: 20px;
		text-align: left;
		z-index: 0;
		}
		
#rightcol h2	{
		font-size: 1.5em;
		color: #852b19;
		line-height: 1.6em;
		margin: 0;
		margin-top: 5px;
		z-index: 0;
		}
		
#rightcol h3	{
		font-size: 1.15em;
		color: #852b19;
		line-height: 1.6em;
		z-index: 0;
		}
		
#rightcol h4	{
		font-size: 0.9em;
		color: #852b19;
		/*line-height: 1.6em;*/
		margin-bottom: 0px;
		z-index: 0;
		}



#address p	{
		margin: 0;
		padding: 0px;
		}

#address h4	{
	margin: 0;
	padding: 0px;
	padding-top: 3px;
	margin-top: 5px;
	
	}
		
.Image_Centre	{
	text-align: center;
	}
	
.large_image	{
	border: 2px solid #ffffff;
	}
	
.smallimage	{
	/*padding: 2px;*/
	float: left;
	margin-right: 5px;
	border: 1px solid #fff;
}

.smallimage_right	{
	/*padding: 2px;*/
	float: right;
	margin-left: 4px;
	border: 1px solid #fff;
}

.image_small	{
margin: 4px;
border: 1px solid #fff;
}

.clear_left	{
	clear: left;
	}
	
.linkh4 {
	color:#993300;
	font-size:85%;
	font-weight:bold;
}

#footer_back	{
	background-image: url(images/background/footer_back.png);
	background-repeat: repeat;
	width: 295px;
	margin-left: 10px;
	margin-top: -57px;
	border: 1px solid #000000;
	color: #ffffff;
	font-size: 0.7em;
	font-style: italic;
		}
	/*	
#footer	{
		position: absolute;
		
		width: 295px;
		height: 45px;
		margin-left: 10px;
		margin-top: -46px;
		color: #ffffff;
		font-size: 0.7em;
		font-style: italic;
		}*/
		
#footer_back p	{
		padding: 2px;
		padding-left: 5px;
		text-align: center;
		}