/*
Styles for Website
	
	Hart Mountain Horses
	Developed by STORM GRAFX
	ALL WEBSITE CONTENT IS COPYRIGHTED BY CINDY MCDOUGAL

	Tested Browsers:	Firefox 2.0
				Internet Explorer 6.0 (displays poorly)
				Internet Explorer 7.0
				Safari 3.0 (for Windows)
				Opera 9.0
	
Colors Used:	Background: rgb 250,241,188
		Accent:	rgb 233,169,108
		Text:		rgb 255,255,255
		Text:		rgb 0,0,0
*/

/*  Details that control general content of the web page */
body {background-color: rgb(250,241,188); font-family: sans-serif; font-size: 11pt;}
h1, h2, h3, h4, h5, h6 {font-family: sans-serif; color: rgb(233,169,108);}
a {text-decoration: none;}

/*  Used to control the text of the logo */
#logo {
	position: fixed;
	top: 0;
	bottom: 80px;
	left: 0;
	right: 0;
	text-align: right;
	color: rgb(233,169,108);
	font-size: 40pt;
	font-variant: small-caps;
	padding: 10px;
	overflow: hidden;
	background: rgb(250,241,188);
	}

/*  Horizontal menu that spans across upper portion of page */
#topmenu {
	position: fixed;
	top: 80px;
	bottom: 50px;
	left: 0;
	right: 0;
	color: rgb(233,169,108);
	padding: 10px;
	text-align: center;
	background: rgb(250,241,188);
	border-top: 1px solid rgb(233,169,108);
	border-bottom: 1px solid rgb(233,169,108);
	overflow: hidden;
	}
#topmenu a {font-family: sans-serif; color: rgb(233,169,108); font-size: 11pt; font-weight: bold;}
#topmenu a.newgroup {margin-top: 15px;}
#topmenu a:link {text-decoration: none;}
#topmenu a:visited {text-decoration: none;}
#topmenu a:hover {color: rgb(255,255,255); text-decoration: underline;}
#topmenu a:active {color: rgb(255,255,255); text-decoration: none;}

/*  Vertical menu that sets on the left hand side of the page */
#sidemenu {
	position: fixed;
	top: 130px;
	bottom: 0;
	left: 0;
	right: 150px;
	padding-top: 10px;
	padding-left: 10px;
	background: rgb(233,169,108);
	overflow: hidden;
	}
#sidemenu a {display: block; font-family: sans-serif; color: rgb(255,255,255); font-size: 11pt; font-weight: bold;}
#sidemenu a.newgroup {margin-top: 15px;}
#sidemenu a:link {text-decoration: none;}
#sidemenu a:visited {text-decoration: none;}
#sidemenu a:hover {color: black; text-decoration: underline;}
#sidemenu a:active {text-decoration: none;}

/*  Used to control the main layout of all pages */
#mainbody {
	position: fixed;
	top: 130px;
	bottom: 0;
	left: 150px;
	right: 0;
	padding-left: 10px;
	overflow: scroll;
	background: rgb(250,241,188);
	}

/*  Used as a smaller border for larger photos on pages */
div.border img {
	border: 3px solid rgb(233,169,108);
	}

/*  Used to contain horse listing content */
div.horselist {
	float: left;
	width: 95%;
	margin: 0 10px 10px 0;
	padding-bottom: 10px;
	}
div.horselist img {
	float: left;
	margin: 0px 10px 0px 0px;
	}
div.horselist p {
	margin: 0;
	padding: 10px;
	}	

/*  Photo Link Control. This is used for the larger photos that link to other internal pages */
div.photolink {
	width:	312px;
	float: left;
	margin: 5px 5px 5px 5px;
	padding-bottom: 5px;
	background-color: rgb(233,169,108);
	}
div.photolink img {
	margin: 5px 5px 5px 5px;
	border: 1px solid rgb(255,255,255);
	}
div.photolink p {
	text-align: center;
	margin: 0;
	padding: 5px 5px 5px 5px;
	color: rgb(255,255,255);
	font-size: 15pt;
	font-weight: bold;
	background-color: rgb(233,169,108);
	}

/*  Used to maintain decoration for text links under photos */
#linktxt a {color: rgb(255,255,255);}
#linktxt a:link {text-decoration: none;}
#linktxt a:visited {text-decoration: none;}
#linktxt a:hover {color: black; text-decoration: none;}
#linktxt a:active {text-decoration: none;}
	
/*  Used to put an underline under each horse name */
div.names {
	border-bottom: 1px solid rgb(233,169,108);
	margin: 0px 0px 5px 0px;
	}

/*  General Thumbnails */
div.thumb {
	float: left;
	margin: 5px 5px 5px 5px;
	padding-bottom: 10px;
	background-color: rgb(233,169,108);
	}
div.thumb img {
	float: left;
	border: 1px solid rgb(255,255,255);
	margin: 10px 10px 0px 10px;
	}
div.thumb p {
	margin: 0;
	padding: 10px;
	color: rgb(255,255,255);
	font-weight: bold;
	background-color: rgb(233,169,108);
	}		

/*  Gallery Thumbnails */
div.thumbnail {
	float: left;
	width: 320px;
	margin: 0 10px 10px 0;
	padding-bottom: 10px;
	background-color: rgb(233,169,108);
	}
div.thumbnail img {
	float: left;
	border: 1px solid rgb(255,255,255);
	margin: 10px 10px 0px 10px;
	}
div.thumbnail p {
	margin: 0;
	padding: 10px;
	color: rgb(255,255,255);
	font-weight: bold;
	background-color: rgb(233,169,108);
	}	

/*  Starts new line of photos (acts as a line break) */
.clear {
	clear: left;	
	}

/*  This contains the address that spans across the bottom of the page */
div.address {
	float: left;
	width: 98%;
	height: 25px;
	margin: 20px 0px 0px 0px;
	padding-top: 10px;
	color: rgb(0,0,0);
	font-variant: small-caps;
	text-align: center;
	border-top: 1px solid rgb(233,169,108);
	}
	
/*  This contains the detail information underneath the address */
div.info {
	float: left;
	width: 98%;
	color: rgb(233,169,108);
	font-variant: small-caps;
	font-size: 10pt;
	text-align: center;
	}

/*  This contains prefered browser information below the details */
div.browser {
	float: left;
	width: 98%;
	color: rgb(233,169,108);
	font-variant: small-caps;
	font-size: 8pt;
	text-align: center;
	padding-top: 5px;
	}