/******************************************** 
 HTML ELEMENTS 
********************************************/  
 { margin: 0; padding: 0; outline: 0; } /*sets no padding or margin around the body of our document*/  
body {  
background-color: #533132; /*website background color, behind background image (maroon)*/   
background: url(BG.jpg); /*background image*/
background-repeat: repeat; /*repeats our background over and over*/  
color: #E7DEA7; /*sets our default text color for the website*/  
margin: 0px 0; /*sets no padding and a 15px margin around the body of our document*/  
font-family: 'Arial', sans-serif; /*The font type*/  
font-size: 70%; /*sets the font size in %, you can also use 12px or 14px etc... px stands for pixels*/  
line-height: 1.5em; /*sets the height between each line of text.*/  
}

/******************************************** 
WEBSITE LAYOUT 
********************************************/  
#webwrap {  
width: 1001px; /*width of website*/  
background: transparent url(content.jpg) repeat-y center top; /*sets a clear background and uses content.jpg as a background, the background is also repeated along the Y axis*/  
margin: 0 auto; /*margin to auto will center the website*/  
text-align: left; /*default aligns text to the left*/  
}  
#content-wrap {  
clear: both; /*No floating elements allowed on either the left or the right side*/  
background: transparent url(content.jpg) repeat-y center top; /*sets a clear background and uses content.jpg as a background, the background is also repeated along the Y axis*/  
width: 1001px; /*width of our wrap*/  
margin: 0px auto; /*sets top margin at 0 pixels and the rest to auto*/  
padding: 0; /*sets 0 padding*/  
}  

#header {  
position: relative; /*An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position*/  
height: 166px; /*sets header height, this should be the same as header image height*/
width: 1001px; 
background: transparent url(header.jpg) no-repeat center top; /*sets a clear background behind our header and sets our header image onto the page*/  
padding: 0; /*no padding is needed*/   
}
#catbottom {  
clear: both; /*No floating elements allowed on either the left or the right side*/  
margin: 0 auto; /*Margins*/  
padding: 0; /*Padding*/  
background: transparent url(catbottom.jpg) no-repeat; /*finishes the cat background*/  
height: 220px; /*The height of the image */  
width: 1001px; /*The width of the image */  
}  

/******************************************** 
TOP NAV & CONTENT
********************************************/  
#homemenu {  
clear: both; /*No floating elements allowed on either the left or the right side*/  
padding-top: 72px;
padding-left: 22px;
padding-bottom: 0px;
padding-right: 0px;
margin-bottom: 5; 
width: 870px; /*The width of the menu */   
font-size: 14px; /*The font size*/  
}  


 /*TOP ELEMENT 2????*/  

#gallerymenu {  
clear: both; /*No floating elements allowed on either the left or the right side*/  
padding-top: 5px;
padding-left: 0px;
padding-bottom: 3px;
padding-right: 0px;
margin-top: 53px;
margin-bottom: 5px; 
width: 980px; /*The width of the menu */   
font-size: 14px; /*The font size*/  
}  

#gallerymenu ul {  
float: left; /*Floats our menu to the left*/  
list-style: none;  
margin:0; padding: 0 0 0 20px;  
border-color: #000000;
    border-width: 0px 0px 0px 0px;
    border-style: solid;
}  
#gallerymenu ul li {  
display: inline; /*The element will be displayed as an inline element, with no line break before or after the element*/  
}  
#gallerymenu ul li a {  
display: block;  
float: left;  
padding: 0 12px;  
text-decoration: none;  
}  
#gallerymenu ul li a:hover {  
color: #ffffff; /*Mouseover hover color*/  
} 


/******************************************** 
RIGHT MAIN CONTENT
********************************************/  
#main {  
border: 0px solid #000000;  
float: right; /*floats our main content area to the right*/  
width: 570px; /*gives our content area a width of 610pixels*/  
margin-top: 0; 
margin-bottom: 0;
margin-right: 0;
margin-left: 0px;
padding: 10px 10px 10px 10px;  
display: inline;
font-size: 14px; /*The font size*/ 
}  

#main h2 {  
padding: 0;  
margin-bottom: 0;  
color: #E7DEA7;  
font-variant: small-caps;
font-stretch: wider;
font: Arial; /*The font type*/  
font-size: 180%;  
font-style: normal;  
font-weight: bold;  
}  
#main h2 a {    
text-decoration: none;  
}  

#main p, #main h1, #main h2, #main h3, #main ol, #main ul,  
#main blockquote, #main table, #main form {  
margin-left: 25px;  
margin-right: 10px;  
font: Arial; /*The font type*/  
}  
  

/******************************************** 
LEFT MAIN CONTENT
********************************************/  
#sidebar {   
float: left; /*floats our main content area to the right*/  
z-index: 4; 
border: 0px solid #000000;  
width: 390px;
padding: 0px 0 0px 5px; 
margin-top: 0px;  
margin-right: 0;  
margin-bottom: 0;  
margin-left: 0;  
}  
#sidebar h3 {  
margin: 0px 5px 3px 0px;  
font: bold 1.9em Arial; /*The font type*/  
color: #E7DEA7;  
font-variant: small-caps;
font-stretch: wider;
}  
#sidebar p {  
margin-left: 3px;  
}  
   
#sidebar ul.sidemenu {  
list-style: none;  
text-align: left;  
margin: 7px 5px 8px 10; padding: 0;  
text-decoration: none;   
}  
#sidebar ul.sidemenu li {  
list-style: none;  
padding: 2px 0 0px 5px;  /*sets the padding for the text.*/  
margin: 0 2px;  
font-size: 11px;
font: 1.2em Arial; /*The font type*/   
border-bottom: 0px solid #D2E8F7;  
}  
* html body #sidebar ul.sidemenu li {  
height: 1%;  
}  
#sidebar ul.sidemenu li a {  
text-decoration: none;    
}  
#sidebar ul.sidemenu li a:hover {  
}  
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }  
#sidebar ul.sidemenu ul li { border: none; 
}  

/******************************************** 
CENTER CONTENT
********************************************/  
#THECONTENT { 
clear: both; /*No floating elements allowed on either the left or the right side*/  
width: 96%; /*gives our content area a width of 610pixels*/  
border: 0px solid #000000;  
margin: 0; padding: 20px 20px 20px 20px;  
font-size: 14px; /*The font size*/ 
}
#THECONTENT h3 {  
margin: 0px 5px 3px 0px;  
font: bold 1.9em Arial; /*The font type*/  
font-variant: small-caps;
font-stretch: wider;
}  

/******************************************** 
FOOTER 
********************************************/  
#footer {  
background: transparent url(content.jpg) repeat-y center top;  
clear: both;  
width: 1001px;
height: 100%;  
font: bold 1.4em Arial; /*The font type*/  
text-align: center;  
font-size: 90%;  
}    
   

/******************************************** 
WEBSITE LINKS 
********************************************/  
a, a:visited {  
text-decoration: none;  
background: inherit;  
color: #E7DEA7;  
}  
a:hover {  
text-decoration: underline;  
background: inherit; 

}  
a img {text-decoration: none;  border: none; } 
  
 /******************************************** 
WEBSITE TEXT HEADERS 
********************************************/  
 h1, h2, h3 { font-family: 'Trebuchet MS', Tahoma, Sans-serif; }  
h1 {  
font-size: 180%;  
font-weight: normal;  
}  
h2 {  
font-size: 160%;    
font-weight: normal;  
}  
h3 {  
font-size: 135%;  
}  

/******************************************** 
WEBSITE IMAGES 
********************************************/  
img {  
background: #transparent;
border: 0px solid #000000;  
padding-bottom: 5px;  
padding-top: 5px;
}  
 
img.float-right { margin: 5px 0px 10px 10px; }  
img.float-left { margin: 5px 10px 10px 0px; }  
  
h1, h2, h3, p {  
margin: 5px 5px;  
padding: 0;  
}  
ul, ol {  
margin: 5px 15px;  
padding: 0 25px;  
}  

/******************************************** 
LIGHTBOX IMAGES 
********************************************/  
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 5px; }

#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-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../webimages/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../webimages/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; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/******************************************** 
DROP DOWN MENU
********************************************/ 
#dropmenudiv{
position:absolute;
border:0px solid black;
background-color: #625147;
text-decoration: none;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
background-color: #625147;
display: block;
text-indent: 3px;
text-decoration: none;
border-bottom: 1px solid #B1AD7D;
border-left: 1px solid #B1AD7D;
border-right: 1px solid #B1AD7D;
padding: 1px 0;
font: normal 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #7D675B;
}