/* 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;
		width: 1024px;
		margin-top: 225px; /* To compensate for the 225px height of the top background image */
		/* height: 1445px; */
		/*z-index: -2;*/
		background-image: url(images/background/background_top.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		}
		
/* This div contains and positions the compass images on the header but is now being used to hold the upper background*/
/* removing this as per Yves' request. Under protest though :) 
		#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: 100%;
		height: 100%;
		z-index: 0;
		} */

/* This is for the second compass. Added because the margin was too long with the first single image */
/* Keeping this despite Yves' request */

#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. */

/* This has been revised in 2011. Initially it was decided to stick with just one header, but now we are replacing the watercolours with some old photographs. The id will be changed in individual pages to change the header image. For example, use #header_shop to as the header id in any page to change the header image to the one of the horse in the shop. */


#header	{
		margin-top: -225px;		
		background-image: url(images/background/arch.png);
		background-repeat: no-repeat;
		background-position: right;
		width: 1024px;
		height: 225px;
		z-index: 5;
		}

#header_rimbaud	{
		margin-top: -225px;		
		background-image: url(images/background/rimbaud.png);
		background-repeat: no-repeat;
		background-position: right;
		width: 1024px;
		height: 225px;
		z-index: 5;
		}		

#header_arada	{
		margin-top: -225px;		
		background-image: url(images/background/aradawoch.png);
		background-repeat: no-repeat;
		background-position: right;
		width: 1024px;
		height: 225px;
		z-index: 5;
		}

#header_arch	{
		margin-top: -225px;		
		background-image: url(images/background/arch.png);
		background-repeat: no-repeat;
		background-position: right;
		width: 1024px;
		height: 225px;
		z-index: 5;
		}
		
#header_bad_hair	{
		margin-top: -225px;		
		background-image: url(images/background/bad_hair.png);
		background-repeat: no-repeat;
		background-position: right;
		width: 1024px;
		height: 225px;
		z-index: 5;
		}
		
		
#header_boy_prince	{
		margin-top: -225px;		
		background-image: url(images/background/boy_prince.png);
		background-repeat: no-repeat;
		background-position: right;
		width: 1024px;
		height: 225px;
		z-index: 5;
		}
		
#header_horse_shop	{
		margin-top: -225px;		
		background-image: url(images/background/horse_shop.png);
		background-repeat: no-repeat;
		background-position: right;
		width: 1024px;
		height: 225px;
		z-index: 5;
		}
		
				
/* 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

*/

#main_content	{
	margin-top: -2px;
	background-image: url(images/background/background_3.jpg);
		background-repeat: no-repeat;
		background-position: top center;
		background-attachment: fixed;
	}
		
#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: 96%;
		position: relative;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		/*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: 1.6em;
		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;
		}

#slideshow_images img	{
	position: absolute;
	border: 1px solid #fff;
}

#slideshow_images	{
	width: 983px;
	height: 402px;
	overflow: hidden;
}

#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;*/
	background-color: #291b04;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	/*margin-top: -57px;*/
	/* border: 1px solid #222; */
	border-top: 2px solid yellow;
	height: 54px;
	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	{
		font-size: 120%;
		font-variant: normal;
		font-weight: bold;
		padding: 2px;
		padding-left: 2%;
		padding-right: 2%;
		text-align: right;
		}
		
#contactform	{
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

blockquote	{
		/*font-size: 0.8em;*/
		color: #3f3f3f;
		line-height: 1.6em;
		margin-bottom: 10px;
		z-index: 0;
		font-style: italic;
}