/*----------------------------------------------------------------------------------------------
purpose:	This CSS file is used to control the site layout and formatting
author: 	Julia Parsons - The Mouse Doctor														
change About Us:
version	who		when		change
-----------------------------------------------------------------------------------------------
1.0		JP		11-Oct-07	Original Version
2.0		JP		07-Jun-10	Rebranded site

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

/*----------------------------------------------------------------------------------------------
Main text style declarations. These are the 'normal' formatting options required by most
sites and cover the basic font display items.
----------------------------------------------------------------------------------------------*/	
body {
	background-repeat: repeat-x;
	height: 100%;
	color: #204460;
	font-family: Tahoma, Helvetica, Sans-Serif;
	font-size: 12px;
	line-height: 22px;
	margin: 0px auto;
	padding: 0px;
	text-align: left;
	background-color: #AAC1D1;
}
h1	{
	line-height: 2.0em;
	font-size: 2.0em;
	font-weight: bold;
	text-align: left;
	color: #204460;
	margin: 0;
	padding: 0px 3px 4px 20px;
	}
	
h2	{
	font-weight: bold;
	text-align: left;
	color: #990033;
	margin: 0;
	padding: 0px 3px 4px 20px;
	line-height: 1.2em;
	font-size: 1.4em;
	font-variant: small-caps;
}

h3	{
	list-style: lower-alpha;
	line-height: 1.5em;
	font-size: 1.0em;
	text-align: left;
	margin: 0;
	padding: 2px 3px 4px 2px;
	color: #003333;
	}
	
p	{
	/* default paragraph settings*/
	margin: 0;
	padding: 5px 10px 2px 20px;
	text-align:left;
	}
	p.small {font-size: 85%;}
	p.centered {text-align:center;}
	p.emphasis {font-weight:bold ;}

span {font-weight: bold;}

img {
	border: 0;
	}			/* don't show borders on images */
	img.rightpic {
		float: right;
		margin: 1px 1px 1px 5px;
		padding: 1px;
		border: 3px #000080 solid;
		}
	img.leftpic {
	float: left;
	margin: 1px 5px 1px 1px;
	padding: 1px;
	border: 3px #445864 solid;
}
	img.centered {
		display: block;
		margin: 1px auto;
		padding: 1px;
		border: 3px #000080 solid;
	    }
	img.backbutton {
		float: left;
		margin: 1px 3px 1px 1px;
		padding: 1px;
	}
	img.nextbutton {
		float: right;
		margin: 30px 1px 1px 3px;
		padding: 1px;
		}

a:active {
	color: #333;
	text-decoration: none; 
	font-weight: bold;
	}
a:visited {	
	color: #333;
	text-decoration: none; 
	font-weight: bold;
	}
a:link {
	color: #333;
	text-decoration: none; 
	font-weight: bold;
	}
a:hover {
	color: #FF0000;
	text-decoration: none;
	font-weight: bold;
}

/*-----------------------------------------------------------------------------------------------------------------
Page layout definitions - these all specify a position on the page in some way and are designed to be used together 
------------------------------------------------------------------------------------------------------------------*/
#mainpagebody
{
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
	cursor: default;
	margin-top: 10px !important;
}

#pagecontainer {
	background: #fff;
	position: relative;
	z-index: 0;
	margin: 0 auto;
	width: 1000px;
	min-width: 23px;
	min-height: 23px;
}
#art-sheet-body
{
  position: relative;
  z-index: 1;
  padding: 1px;
	margin: 0 auto;
	width: 1000px;
	background-color: #ABCBE3;
}

#spacer {
	background: #fff;
	width: 800px;
	height: 20px;
	margin: 0 auto;
	padding: 0;
	}
	

#pageframe, #salespageframe, #adminpageframe {
	margin: 0 auto;
	padding: 0;
	width: 1000px;
	background-color: #ABCBE3;
	}
		
#contentpanel {
	width: 740px;
	float: right;
	min-height: 355px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #fff;
}
#innercontentpanel {
	width: 740px;
	float: right;
	min-height: 540px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #fff;
	text-align: center;
}	
	#innercontentpanel #scrollpanel {
		height: 450px;
		overflow: auto;
		}
		#innercontentpanel #scrollpanel ol {list-style-type:lower-alpha;}

		#innercontentpanel #galleryimage {
			height: 250px;
			min-height: 250px;
			display: block;
			margin: 5px auto;
			}
			
		#innercontentpanel #gallerystrip {
			height: 110px;
			margin: 25px 0 0 25px;
			clear: both;
			overflow: auto;
			}
		#innercontentpanel #gallerystrip p {
			margin: 0;
			padding: 0;
			}
		#innercontentpanel #gallerystrip img {padding: 5px 5px 0 5px;}
		
		#innercontentpanel li {text-align:left;}
		
#salesinfocontentpanel {
	width: 1000px;
	float: left;
	min-height: 545px;
	margin: 0;
	padding: 0;
	overflow: visible;
	background-color: #fff;
}
			
#salescontentpanel {
	width: 740px;
	float: left;
	min-height: 545px;
	margin: 0;
	padding: 0;
	overflow: visible;
	background-color: #fff;
	}
		
#clear_floats{clear:both;}

/*************
Layout for the sales information (single horse) page
*************/

table.salesinfo, table.livery {
	width: 100%;
	vertical-align: top;
	}
	table.livery {	margin: 0; 	padding: 0px 3px 4px 20px;}

tr.header {
	font-weight: bold;
	text-align: left;
	color: #990033;
	margin: 0;
	padding: 0px 10px 4px 10px;
	line-height: 1.2em;
	font-size: 1.2em;
	font-variant: small-caps;
	}
td.single {width: 200px; padding: 10px;	border: 1px #000080 solid; 	vertical-align: top;}
td.double {
	width: 350px;
	padding: 10px;
	border: 1px #000080 solid;
	vertical-align: top;
	}


#salesinfocontentpanel #salesthumbnail {
	margin: 0 15px 0 15px;
	width: 20px;
	float: left;
	}
	#salesinfocontentpanel #salesthumbnail #salesthumbnailinner {
		border-top: 1px #000080 solid;
		border-bottom: 1px #000080 solid;
		border-left: 1px #000080 solid;
		width: 98%;
		padding: 5px;
		overflow: hidden;
		}

#salesinfocontentpanel #salesdetail {
	width: 200px;
	height: 200px;
	}
	#salesinfocontentpanel #salesdetail #salesdetailinner{
		border: 1px #000080 solid;
		height: 200px;
		width: 98%;
		padding: 5px;
		}

#salesinfocontentpanel #salesdesc {
	width: 300px;
	float: right;
	}
	#salesinfocontentpanel #salesdesc #salesdescinner{
		margin: 0 15px 0 0;
		overflow: auto;
		border: 1px #000080 solid;
		height: 200px;
		width: 95%;
		padding: 5px;
		}

#salesinfocontentpanel #saleslinks {
	margin: 0 0 0 15px;
	width: 25%;
	padding: 10px;
	clear: left;
	float: left;
}

#salesinfocontentpanel #salesmainpic {
	width: 70%;
	clear: right;
	float: right;
	display: block;
	margin: 5px auto;
	text-align: left;
	}
	
/*************
End of Layout for the sales information (single horse) page
*************/

#menupanel {
	width: 240px;
	float: left;
	margin: 0 10px;
	padding: 0;
	min-height: 400px;
	background-color: #ABCBE3;
	}
	#menupanel #sidebarpic {
		width: 220px;
		margin: 20px auto 0 auto;
		text-align: left;
		color: #fff;
		height: 220px;
		overflow: hidden;
	}
	#menupanel #sidebarpic img {border: 3px #C0C0C0 solid;}
	#menupanel #sidebarpic img.horseoftheweek {border: 3px #FFDB48 solid;}
	#menupanel #sidebarpic p {color: #fff;}	
	#menupanel #sidebartext, #menupanel #sidebartextnopic {
		clear: both;
		font-size: 0.9em;
		margin: 0;
		padding: 0 0 0 5px;
		line-height: 1.2em;
		font-weight: bold;
	}
	#menupanel #sidebartext p, #menupanel #sidebartextnopic p {}	
	#menupanel #sidebartextnopic {
	margin-top: 50px;
}
	#menupanel #sidebartextnopic a {font-size: 1.0em;}
	#menupanel p {
		margin: 0;
		padding: 0;
		text-align: left;
		}
	#menupanel a:active  {
		color: #fff;
		text-decoration: none; /* remove underline */;
		font-weight: bold;
		}
	#menupanel a:visited  {
		color: #fff;
		text-decoration: none; /* remove underline */;
		font-weight: bold;
		}
	#menupanel a:link  {
		color: #fff;
		text-decoration: none; /* remove underline */;
		font-weight: bold;
		}
	#menupanel a:hover{
		color: #445864;
		text-decoration: none; /* remove underline */;
		font-weight: bold;
		}

#contactheader {
	padding: 2px;
	margin: 10px 0 5px 0;
	display: block;
	background: #abcbe3 url('../images/blockheader.png') no-repeat;
	background-position:right top;
	height: 24px;
	line-height: 24px;
	}
	
.page-tr, .page-tl, .page-br, .page-bl, .page-tc, .page-bc, .page-cr, .page-cl {
	position: absolute;
	z-index: -1;
}

.page-tr, .page-tl, .page-br, .page-bl
{
  width: 22px;
  height: 22px;
  background-image: url('../images/sheet_s.png');
}

.page-tl
{
  top: 0;
  left: 0;
  clip: rect(auto, 11px, 11px, auto);
}

.page-tr
{
  top: 0;
  right: 0;
  clip: rect(auto, auto, 11px, 11px);
}

.page-bl
{
  bottom: 0;
  left: 0;
  clip: rect(11px, 11px, auto, auto);
}

.page-br
{
  bottom: 0;
  right: 0;
  clip: rect(11px, auto, auto, 11px);
}

.page-tc, .page-bc
{
  left: 11px;
  right: 11px;
  height: 22px;
  background-image: url('../images/sheet_h.png');
}

.page-tc
{
  top: 0;
  clip: rect(auto, auto, 11px, auto);
}

.page-bc
{
  bottom: 0;
  clip: rect(11px, auto, auto, auto);
}

.page-cr, .page-cl
{
  top: 11px;
  bottom: 11px;
  width: 22px;
  background-image: url('../images/sheet_v.png');
}

.page-cr
{
  right: 0;
  clip: rect(auto, auto, auto, 11px);
}

.page-cl
{
  left: 0;
  clip: rect(auto, 11px, auto, auto);
}

.page-cc
{
  position: absolute;
  z-index: -1;
  top: 11px;
  left: 11px;
  right: 11px;
  bottom: 11px;
  background-color: #fff;
  }
			
#header
{
	margin: 0 auto;
	position: relative;
	z-index: 0;
	width: 998px;
	height: 120px;
	overflow: hidden;
	/*background-image: url('../images/header.jpg');
	background-repeat: no-repeat;*/
}

#header-mask
{
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 998px;
  height: 120px;
  background: url('../images/header.png') no-repeat left top ;
}

#header-image
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 998px;
  height: 120px;
  background: url('../images/header.gif') no-repeat center center;
}

/* end Header */
#page-background {
	position: absolute;
	background-image: url('../images/page_g.jpg');
	background-repeat: repeat-x;
	top: 0;
	width: 100%;
	min-width: 1000px;
}

#page-background-gradient
{
  position: absolute;
  background-image: url('../images/page_sg.jpg');
  background-repeat: repeat-x;
  top: 0;
  width: 100%;
  height: 900px;
  min-width: 1000px
}

#footer {
	clear: both;
	margin: 0 auto;
	height: 32px;
	line-height: 32px;
	padding: 0;
	width: 1000px;
	font-size: 0.9em;
	background-color: #fff;
}
	#footer #copyright {
		width: 40%;
		float: left;
		text-align: left;
		padding: 0 0 0 5px;
		margin: 0;
		height: 30px;
	}
	#footer #notices {
	width: 50%;
	float: right;
	padding: 0 5px 0 0;
	}
	#footer #notices p {	text-align: right;}

	
	#mainmenu {
		width: 100%;
		margin: 0px;
		padding: 15px 0 0 0;
		color: #003333;
	}
	
	#mainmenu ul {
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
		}
	#mainmenu li {
		width: 90%;
		margin: 1px auto 5px auto;
		padding: 0;
		height: 1.8em;
		min-height: 1.8em;
		line-height: 1.8em;
		text-align: left;
		font-size: 1.1em;
		font-weight: bold;
	}
	#mainmenu li a {
		height: 32px;
	  	voice-family: "\"}\""; 
	  	voice-family: inherit;
	  	height: 30px;
		text-decoration: none;
		padding: 0 11px 0 11px;
		display: block;
		background: url('../images/vmenuitem.png') 0 0;
		color: #445864;
		}	
		#mainmenu li a:visited {
			background: url('../images/vmenuitem.png') 0 0 ;
			color: #445864;
			}
		#mainmenu li a:link {
			background: url('../images/vmenuitem.png') 0 0;
			color: #445864;
		}
		#mainmenu li a:hover {
			background: url('../images/vmenuitem.png') 0 -30px;
			color: #fff;
			}
		#mainmenu li a.active {
			background: url('../images/vmenuitem.png') 0 -60px;
			color: #fff;
			}	

			
#mousedoctor {
	clear: both;
	width: 1000px;
	text-align: right;
	padding: 0 15px 0 0;
	margin: 0 auto;
	color: #4D435B;
	line-height: 1.5em;
	font-size: 0.9em;
}
#mousedoctor a {color: #990033;}

/*----- End of CSS Declarations-----*/