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

Rockleigh Equestrian Centre XHTML and CSS by Kenneth Feldman, http://www.kpfdigital.com/
All associated graphics copyright 2005, Rockleigh Equestrian Centre.

THIS DESIGN IS NOT A TEMPLATE.
YOU MAY NOT REPRODUCE IT ELSEWHERE WITHOUT THE DESIGNER'S WRITTEN PERMISSION.

You may adapt elements of this CSS in your own projects, but the unique
combination of images, colors, sizes, typography, and positioning ("the design") 
is copyright 2005 Rockleigh Equestrian Centre and may not be reproduced.   (*Thanks JZ/HC)
	
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
		
		* A big, BIG nod to the CSS/(X)HTML masters of the Web who taught me everything
		I know; including but not limited to: Jeffery Zeldman (http://www.zeldman.com),
		Eric Meyer (http://www.meyerweb.com), Dan Cederholm (http://www.simplebits.com),
		Vincent Flanders (http://www.webpagesthatsuck.com), Big John & Holly Bergevin 
		(http://www.positioniseverything.net) and Joe Gillespie (http://www.wpdfd.com).
	
		I have been deeply inspired by all of these authors, and in some cases have 
		adapted elements of their CSS techniques to achieve specific design goals. 
		All attempts to correctly attribute those instances have been made.  - KF



	Here we go:
	
	
	PRE-EMPTIVE PRE-STYLING. (Or, how to level the css playing field)
	--------------------------------------------------------------------------------------------

	Purpose: undo some of the default styling of common (X)HTML browsers. These rules reduce
	cross-browser troubleshooting by increasing default consistancy. 
	Based on "undohtml.css" (CC) 2004 Tantek Celik. (http://tantek.com/log/2004/undohtml.css)
	

	The star selector sets rules universally for all elements in the cascade. 
	In this case we'll use it to remove inconsistent padding and margin of elements. 
	Basically, we'll set margin and padding where we want them, rather than remove 
	them every time we don't want them. */

* { padding: 0; margin: 0; }


	/* Safari and Gecko-based browsers (such as Firefox) use padding-left to indent lists;
	Internet Explorer uses margin-left. Neither way is right nor wrong; this just equalizes list behaviors */

ul, ol { padding-left: 0.2em; margin-left: 0; list-style: none; }


	/* Setting consistent margin-bottom makes all elements push the next element down evenly. */

h1, h2, h3, h4, h5, h6, p, blockquote,
 form, label, ul, ol, dl, fieldset, address { margin-bottom: 1em; }
 

	/* Link underlines tend to make hypertext less readable, 
	   because underlines obscure the shapes of the lower halves of words. 
	   So instead I have set a (dotted) bottom border for in-line text links. 
	   IE 5.0pc doesn't display this underline technique, but oh well!   */

:link, :visited { text-decoration: none; border-bottom: 1px dotted #800000; color: #800000;  }


	/* Whoever thought blue linked image borders were a good idea? */

a img, :link img, :visited img { border: 0; }

a { outline: none; }

/*-----------------------------------------------------------------------------------------------
	End of PRE-EMPTIVE PRE-STYLING.
---------------------------------------------------------------------------------------------- */



/* Main Structural Elements 
-------------------------------------------- */	

body {
	background: #800000;
	padding-bottom: 0px;
	text-align: center;
	font: 76%/1.5em  Verdana, Geneva, Helvetica, Arial, Sans-serif;
	color: #333;
	}

#container {
	position: relative;
	background: #800000 url("img/body_bg.gif") no-repeat bottom;
	width: 728px;
	margin: 0px auto;
	margin-top: 5px;
	text-align: left;
	font-size: 1.0em;
	}

#home #container {
	position: relative;
	background: url("img/h_body_bg.gif") no-repeat bottom;
	width: 728px;
	margin: 0px auto;
	margin-top: 5px;
	text-align: left;
	}	
	
#header {
	position: relative;
	height: 136px;
	background: #EFEAD3 url("img/int_header_top.gif") no-repeat;
	}
		
#home #header {
	position: relative;
	height: 139px;
	background: #EFEAD3 url("img/header_bg.gif") no-repeat;
	color: #666;
	}

#inner_header {
	position: relative;
	background:  url("img/header_texture.jpg") no-repeat 14px 11px;
	height: 136px;
	}

#inner_header img {
	position: absolute;
	top: 34px;
	left: 41px;
	}
	
#footer { 
	clear: both; 
	text-align: center;
	color: white;
	}





/* Main Navigation Elements (
-------------------------------------------- */	

/* Absolutely Positioned Navigation technique ala Zeldman/Happy Cog */
	
#nav_bar { height: 15px; width: 624px; position: absolute; top: 108px; left: 72px; line-height: 15px; }
#nav_bar ul { margin: 0; padding: 0; width: 624px; height: 15px; position: relative; }
#nav_bar ul li { height: 15px; margin: 0; padding: 0; position: absolute; top: 0;}
#nav_bar a { height: 15px; display: block; border: 0px; }	
#nav_bar ul li a {text-indent: -9999px; text-decoration: none; }
	
#nav_bar ul li#nb1 { left: 0px; width: 74px; background: url("img/nb.gif") 0px 0px no-repeat; }
#nav_bar ul li#nb2 { left: 74px; width: 68px; background: url("img/nb.gif") -74px 0px no-repeat; }
#nav_bar ul li#nb3 { left: 142px; width: 58px; background: url("img/nb.gif") -142px 0px no-repeat; }
#nav_bar ul li#nb4 { left: 447px; width: 89px; background: url("img/nb.gif") -447px 0px no-repeat; }
#nav_bar ul li#nb5 { left: 536px; width: 88px; background: url("img/nb.gif") -536px 0px no-repeat; }

#nb1 a:hover { height: 15px; width: 74px; background: url("img/nb.gif") 0px -15px no-repeat;}
#nb2 a:hover { height: 15px; width: 68px; background: url("img/nb.gif") -74px -15px no-repeat;}
#nb3 a:hover { height: 15px; width: 58px; background: url("img/nb.gif") -142px -15px no-repeat;}
#nb4 a:hover { height: 15px; width: 89px; background: url("img/nb.gif") -447px -15px no-repeat;}
#nb5 a:hover { height: 15px; width: 88px; background: url("img/nb.gif") -536px -15px no-repeat;}

#nav_bar ul li#onpage1 { left: 0px; width: 74px; background: url("img/nb.gif") -0px -30px no-repeat;}
#nav_bar ul li#onpage2 { left: 74px; width: 68px; background: url("img/nb.gif") -74px -30px no-repeat;}
#nav_bar ul li#onpage3 { left: 142px; width: 58px; background: url("img/nb.gif") -142px -30px no-repeat;}
#nav_bar ul li#onpage4 { left: 447px; width: 89px; background: url("img/nb.gif") -447px -30px no-repeat;}
#nav_bar ul li#onpage5 { left: 536px; width: 88px; background: url("img/nb.gif") -536px -30px no-repeat;}





/* Sub Navigation Elements 
-------------------------------------------- */		
	

#sub_nav { height: 11px; width: 253px; position: absolute; top: 27px; left: 443px; line-height: 11px; }
#sub_nav ul { margin: 0; padding: 0; width: 253px; height: 11px; position: relative; }
#sub_nav ul li { height: 11px; margin: 0; padding: 0; position: absolute; top: 0; }
#sub_nav a { height: 11px; display: block; border: 0;}	
#sub_nav ul li a { text-indent: -9999px; text-decoration: none;}
	
#sub_nav ul li#sn1 { left: 0px; width: 83px; background: url("img/sn.gif") 0px 0px no-repeat; }
#sub_nav ul li#sn2 { left: 83px; width: 73px; background: url("img/sn.gif") -83px 0px no-repeat; }
#sub_nav ul li#sn3 { left: 156px; width: 59px; background: url("img/sn.gif") -156px 0px no-repeat; }
#sub_nav ul li#sn4 { left: 215px; width: 38px; background: url("img/sn.gif") -215px 0px no-repeat; }

#sn1 a:hover { height: 11px; width: 83px; background: url("img/sn.gif") 0px -11px no-repeat;}
#sn2 a:hover { height: 11px; width: 73px; background: url("img/sn.gif") -83px -11px no-repeat;}
#sn3 a:hover { height: 11px; width: 59px; background: url("img/sn.gif") -156px -11px no-repeat;}
#sn4 a:hover { height: 11px; width: 38px; background: url("img/sn.gif") -215px -11px no-repeat;}

#sub_nav ul li#onpage1 { left: 0px; width: 83px; background: url("img/sn.gif") -0px -22px no-repeat;}
#sub_nav ul li#onpage2 { left: 83px; width: 73px; background: url("img/sn.gif") -83px -22px no-repeat;}
#sub_nav ul li#onpage3 { left: 156px; width: 59px; background: url("img/sn.gif") -156px -22px no-repeat;}
#sub_nav ul li#onpage4 { left: 215px; width: 38px; background: url("img/sn.gif") -215px -22px no-repeat;}





/* Main Content Section 
-------------------------------------------- */		


#inner_wrap {
	position: relative;
	padding: 0 14px;
	padding-bottom: 8px;
	}	
	
#home_main_content {
	float: right;
	width: 272px;
	margin-right: 120px;
	margin-bottom: 70px;
	padding-top: 15px;
	display: inline;
	}

#main_content {
	float: left;
	width: 410px;
	margin-bottom: 70px;
	padding-top: 20px;
	background: #FFF;
	}

#gallery_sub {
	float: right;
	width: 280px;
	display: inline;
	margin: 52px 0 57px 0;
	}

#gallery_sub, #gallery #main_content {
	text-align: center;
	}





/* Home Page Left Column 
-------------------------------------------- */		


#features {
	margin-left: 19px;
	margin-top: 38px;
	width: 250px;
	}

#features ul li {
	border-left: 6px solid #800000;
	padding: 0 0 0px 5px;
	margin-bottom: 16px;
	color: #78766A;
	line-height: 9px;
	font-size: .95em;
	}

#features ul li a:link { color: #78766A; text-decoration: none; border-bottom: 0;} 
#features ul li a:visited {color: #78766A; text-decoration: none; border-bottom: 0;}
#features ul li a:hover { color: #78766A; text-decoration: none; border-bottom: 0; }





/* Typography 
-------------------------------------------- */		

/* Featuring the Leahy/Langridge Method of Image Replacement of Text in Header elements */
/* This method contains the Box Model Hack for IE5 and 5.5 PC */
/* http://www.kryogenix.org/code/browser/lir/ */


#home h1 {
	background: url("img/home_h1.gif") top left no-repeat;
	padding-top: 15px;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:15px; /* for pre 6.0 IE Win */
	margin: 9px 0 6px 305px;
	font-size: 14px;
	}
	
#home h2 {
	background: url("img/home_h2.gif") top left no-repeat;
	padding-top: 60px;
	overflow: hidden;
	height: 0px !important; /* for most browsers */
	height /**/:60px; /* for pre 6.0 IE Win */
	margin: 0 0 13px 0px;
	font-size: 14px;
	}

h1, h2, h3, h4 { 
	color: #800000;
	}
	
h2 {
	margin: 0 0 13px 30px;
	font-size: 17px;
	}

h3 {  
	font-size: 1.1em;
	}
	
#main_content p {
	margin-left: 30px;
	margin-right: 25px;
	}
	
#gallery_sub p, #gallery_sub h3 {
	margin-left: 25px;
	margin-right: 25px;
	}
	
#gallery_sub p, 
#gallery_sub h3, 
#gallery #main_content h2,
#gallery #main_content p {
	text-align: left;
	}
	
	
#gallery_vrs #main_content h3 {
	text-align: center;
	}	
	
#gallery_vrs #main_content #special {
	text-align: center;
	}	
	
	
#tv_film h4 {
	margin-left: 30px;
	}

strong {
	color: #800000;
	}

#directions strong {
	color: #333;
	}




/* Images 
-------------------------------------------- */		


#home_picture_top { 
	height: 10px;
	background: #462E2F;
	}

#home_picture {
	height: 247px;
	background: url("img/home_picture.jpg") no-repeat;
	}

#home_picture_bottom {
	height: 14px;
	background: url("img/home_img_bar.gif") no-repeat;
	margin: 0;
	}

#inner_wrap img {
	margin: 0 0 1em 6px;
	}

#lg_img {
	float: right;
	height: 507px;
	width: 280px;
	border-bottom: 1px solid #999;
	display: inline;
	margin-bottom: 57px;
	}

#boarding #lg_img {	background: url("img/boarding_lg_img.jpg") no-repeat; }
#facility #lg_img {	background: url("img/facility_lg_img.jpg") no-repeat; }
#camp #lg_img {	background: url("img/camp_lg_img.jpg") no-repeat; }
#tv_film #lg_img { background: url("img/tv_film_lg_img.jpg") no-repeat; }
#lessons #lg_img { background: url("img/lessons_03.jpg") no-repeat; }
#directions #lg_img { background: url("img/map4.jpg") no-repeat; height: 439px;}

#gallery #main_content img {
	border: 1px solid #000;
	display: block;
	margin-bottom: 25px;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	}
	
#gallery_vrs #main_content img {
	border: 0px solid #000;
	display: block;
	margin-bottom: 25px;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	}

#gallery #gallery_sub img {
	display: block;
	margin-bottom: 25px;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	}





/* Other Lists 
-------------------------------------------- */		


#tv_film #inner_wrap ul {
	margin-left: 31px;
	width: 370px;
	background: transparent;
	}

#tv_film #inner_wrap ul li {
	border-left: 6px solid #800000;
	padding: 0 0 0px 5px;
	margin-bottom: 16px;
	color: #78766A;
	line-height: 9px;
	font-size: .95em;
	}

#directions ol {
	padding-left: 59px;
	margin-right: 20px;
	list-style: decimal;
	}





/* Form Styles
-------------------------------------------- */
	
#thisform {
	margin: 0 20px 0 20px;
	color: #800000;
	}

form dd {
	margin: 0;
		}	
	
#name, #email, #comment {
	width: 300px;
	}	

#thisform label {
	font-weight: normal;
	}

#thisform fieldset {
	border: 1px solid #ccc;
	padding: 10px 20px;
	}

#thisform legend {
	font: bold 1.0em arial, Sans-serif;
	color: #800000;
	border: 1px solid #ccc;
	border-bottom-color: #999;
	border-right-color: #999;
	padding: 4px 8px;
	}	

input:focus, textarea:focus { 
	background: #ffc;
	border: 1px solid #666;
	}

input, textarea	{
	border: 1px solid #BEBEBE;
	}
	
	
	
	
	
	

/* Misc. Styles
-------------------------------------------- */
		
.pushdown, .pushdown a { 
	margin: 0 0 40px 29px;
	}


#bottom-notes {
	width: 675px;
	margin: 15px auto;
	text-align: center;
	font-size: .85em;
	color: #999;
	}

#bottom-notes a {
	color: #999;
	}
#bottom-notes a:hover {
	color: #eee;
	text-decoration: underline;
	}