/* ===================================================================== */
/* =======================       CSS RESET       ======================= */
/* ===================================================================== */
* { padding: 0; margin: 0; }
img { border: none; }
a { text-decoration: none; color: #444444; }
a:hover { text-decoration: underline; color: #999966 }
.clearall { clear: both; }
.alignLeft { float: left; }
.alignRight { float: right; }
.alignCenter { text-align: center; }
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	background: url('../images/backgrounds/body_bg.jpg') repeat-x #5F2001;
	color: #333333;
}

#wrapper {
	width: 760px;
	margin: 0 auto 0 auto;
}

#header { width: 100%; height: 272px; }
#menu { width: 100%; height: 40px; background: url('../images/backgrounds/menu_bg.png') no-repeat; line-height: 39px; }
#mainContent { width: 740px; padding: 0 10px 10px 10px; }
#footer { width: 100%; text-align: center; padding: 10px 0 5px 0; color: #ffffff; letter-spacing: 1px; }
#footer a, #footer a:hover { color: #ffffff; text-decoration: none; }

#header #logo { float: left; width: 236px; height: 99px; margin: 100px 0 0 10px; }
#header #photo_group { float: right; width: 469px; height: 252px; margin: 20px 5px 0 0; background: url('../images/photos_group.png') no-repeat; }

#menu ul { float: left; width: 740px; list-style-type: none; text-align: center; margin-left: 10px; letter-spacing: 1px; }
#menu ul li { display: inline; font-size: 1.0em; margin: 0 8px 0 8px; text-transform: uppercase; }
#menu ul li .firstLetter { font-size: 1.3em; }
#menu ul li a { color: #ffffff; }
#menu ul li a:hover { color: #eeeeee; }

#mainContent #small_content { float: left; width: 435px; background: url('../images/backgrounds/narrow_bottom.jpg') no-repeat bottom #fef8dc; padding: 5px 0 10px 0; }
#mainContent #wide_content { float: left; width: 740px; background: url('../images/backgrounds/wide_bottom.jpg') no-repeat bottom #fef8dc; padding: 5px 0 10px 0; }
#mainContent #photos { float: right; width: 250px; padding: 20px 0 10px 0; }
#mainContent #photos img { margin: 0 0 10px 0; }
#mainContent #photoGallery { width: 680px; padding: 10px; margin: 10px 0 0 20px; text-align: center; }
#mainContent #photoGallery img { width: 70px; height: 55px; padding: 5px; }
#mainContent #mares { width: 95%; margin: 0 auto 0 auto; font-size: 1.1em; line-height: 17px; }
#mainContent #mares .mare { float: left; width: 50%; text-align: center; padding: 10px 0 10px 0; margin: 20px 0 20px 0; }

.horse { margin-left: 10px; }
.levelOne { float:left; width: 175px; padding: 5px 0 5px 0; margin: 0 2px 0 2px; }
.levelTwo { float: left; width: 175px; padding: 5px 0 5px 0; margin: 0 2px 0 2px; }
.levelThree { float:left; width: 175px; padding: 5px 0 5px 0; margin: 0 2px 0 2px; }
.levelFour { float:left; width: 175px; padding: 5px 0 5px 0; margin: 0 2px 0 2px;  }

.horsePair { float: left; width: 165px; border-right: 1px solid #333333; margin: 5px 0 5px 0; padding-left: 5px; line-height: 16px; background-color: #FCEDAB; }
.levelFour .horsePair { border: none; }

.mainItem { width: 400px; margin: 10px auto 10px auto; text-align: center; font-size: 1.1em; line-height: 18px; }
.mainItem img { width: 200px; padding: 5px; }
.subItem { float: left; width: 200px; margin: 20px 0 20px 35px; text-align: center; font-size: 1.1em; line-height: 18px; }
.subItem img { width: 120px; padding: 5px; }

h1 { color: #5a1f00; font-style: italic; padding: 5px 0 5px 10px; font-weight: normal; letter-spacing: 1px; }
h2 { color: #5a1f00; font-style: italic; font-weight: normal; padding: 5px 0 2px 15px; letter-spacing: 1px; }
h3 { color: #ff0000; width: 90%; font-style: italic; padding: 5px; border: 1px solid #ff0000; margin: 5px 0 5px 10px; background-color: #FFD7C2; }
h3.success { color: #444444; border: 1px solid #00FF00; background-color: #E5FFE5; }
p { padding: 5px 20px 5px 20px; color: #444444; font-size: 1.1em; line-height: 17px; }
p a { color: #5a1f00; }

form { width: 400px; margin: 0 0 0 15px; padding: 5px 0 5px 0; font-size: 1.1em; }
form label { float: left; width: 100%; padding: 3px 0 3px 0; text-indent: 5px; font-weight: bold; }
form input, form textarea { float: left; width: 95%; border: 1px solid #444444; padding: 2px 5px 2px 5px; margin: 0 0 15px 0; }

ul#linksList { list-style-type: none; font-size: 1.1em; margin-left: 20px; margin-right: 20px; line-height: 16px; }
ul#linksList li { margin-bottom: 30px; }
ul#linksList li strong { color: #5a1f00; }
ul#linksList li a { color: #5a1f00; margin-left: 40px; }

ol { font-size: 1.2em; margin: 10px 60px; }
ol li { line-height: 20px; padding: 3px 0 3px 0; }

/****************** LIGHTBOX ******************/
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; } 
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url('../images/lightbox/blank.gif') no-repeat; /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url('../images/lightbox/prevlabel.gif') left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url('../images/lightbox/nextlabel.gif') right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; 	width: 100%	}
#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }