/*color list: hunter green: 215E21 	  hunter orange: FF6103    tan background color: E2B872	

Each Page is set up differently:  On the main page for each button ie: home, bear, moose, turkey, snowmobile - there are 2 css classes that govern the left and right sides of the page.  "imagery" governs any pictures on the left side of the page and will be 250px wide. (each thumbnail is 200px) "words" is the class that provides 500px width of space for any descriptions or links and will show up on the right side of the corresponding page.  "pictures" is a class that I made for a pictures only page that branches off of each main page and is set to the full width (800px) of the content div.*/

.banner {
   width: 800px;
   height: 212px;
   background: url(images/nicenewbanner.jpg) top center no-repeat;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;
   padding: 0px;
}

body{
   background-color: #333300;
}

.sidebar{
   display: inline;
}

   /*somehow in firefox there is a bug where it reads the css wrong in interpreting padding in the cascade.  Thereby offsetting elements on the site. Therefore, we must specify within this div to force it to accept padding of 0 and ignoring the other padding from out of nowhere. */
   
ul#mainNav{
   width: 800px;
   margin-left: auto;
   margin-right: auto;									 
   padding: 0px;
   margin-bottom: 0px;
   margin-top: 0px;
   list-style: none;
}

ul#nextback{
   width: 800px;
   margin-left: auto;
   margin-right: auto;					 
   padding: 0px;
   margin-bottom: 0px;
   margin-top: 0px;
   list-style: none;
}

#mainNav a{
   height: 50px;
   padding: 0px 5px 5px 30px;
   display: block;
   background-repeat: no-repeat;
   background-position: left center;
}

#nextback a{
   height: 50px;
   padding: 0px 5px 5px 30px;
   display: block;
   background-repeat: no-repeat;
   background-position: left center;
}
    /*load buttons here  first group of 5 are nav buttons*/

#homebutton a{
   background-image: url(images/homebuttonouttan.jpg);
}

#bearbutton a{
   background-image: url(images/bearbuttonouttan.jpg);
}

#turkeybutton a{
   background-image: url(images/turkeybuttonouttan.jpg);
}

#moosebutton a{
   background-image: url(images/moosebuttonouttan.jpg);
   position: relative;
}

#snowbutton a{
   background-image: url(images/snowbuttonouttan.jpg);
}

/*to pre-load pictures*/
.hiddenPic {
   display: none;
}
/* These are the forward and back buttons */
										
#nextbutton a{
   background-image: url(images/nextbuttonouttan.jpg);
}

#backbutton a{
   background-image: url(images/backbuttonouttan.jpg);
}

#nextbutton{
   float: right;
}

#backbutton{
   float: left;
   clear: left;
}

#mainNav li{
   float: left;
   width: 160px;
   display: inline;
   padding-bottom: 10px;
}

#nextback li{
   width: 125px;
   padding: 0px 100px 0px 100px;
   display: inline;
}
   /* the following are alternate pictures of buttons to make it look like they move when hovered over with mouse*/

#homebutton a:hover{
   background: url(images/homebuttonintan.jpg) no-repeat 95% 50%;
}

#bearbutton a:hover{
   background: url(images/bearbuttonintan.jpg) no-repeat 95% 50%;
}

#turkeybutton a:hover{
   background: url(images/turkeybuttonintan.jpg) no-repeat 95% 50%;
}

#moosebutton a:hover{
   background: url(images/moosebuttonintan.jpg) no-repeat 95% 50%;
}

#snowbutton a:hover{
   background: url(images/snowbuttonintan.jpg) no-repeat 95% 50%;
}

#nextbutton a:hover{
   background: url(images/nextbuttonintan.jpg) no-repeat 95% 50%;
}

#backbutton a:hover{
   background: url(images/backbuttonintan.jpg) no-repeat 95% 50%;
}

/* css for text links */

a:link{
   color:#FF0000;
}

a:visited{
   color:#FF0000;
}

a:hover{
   color:#FF9933;
   text-decoration: underline;
}

a:active{
   color:#FFFF00;
}

p{
   font-family: arial, helvetica, sans-serif;
   font-size: 14px;
   text-indent: 15px;
}

h1{
   text-align: center;
}

h2{
   text-align: center;
   width: 180px;
   font-family: "Times New Roman", Times, serif;
   font-size: 24px;
   color: #FFFFFF;
   padding: 5px 10px 5px 10px;
   background: #5F4636;
   margin: 10px 0px 10px 0px;
}

h3{
   text-align: left;
   text-indent: 5px;
   padding: 0px;
   font-size: 18px;
   color:#FFFFFF;
   background: #86633C;
   clear: both;
}

.home {
   background:url(images/homesilhouette.jpg); height: 24px; width: 24px;
}

.moose{

}

.bear{

}

.turkey{

}

.snow{

}

/*main body with multiple div tags within */

.content {
   width: 800px;
   background-color: #E2B872;
   margin-left: auto;
   margin-right: auto;
   /*no left or right padding cuz it makes content too wide for the banner*/
   padding: 10px 0px 25px 0px;
   clear: both;
   overflow: hidden;
}

/* div group within .content that contains pictures */

.imagery{
   width: 250px;
   padding: 0px 0px 0px 25px;
   float: left;
   clear: left;
}
	
.imagery img{
   padding: 0px 0px 10px 0px;
   background-image:url(images/bearback.jpg) position: absolute; background-repeat: no-repeat;
}	

/* div group within .content that contains text */
.words{
   width: 500px;
   padding: 0px 25px 0px 0px;
   float: left;
   clear: right;
}									 

.pictures{
   width: 800px;
   margin-right: auto;
   margin-left: auto;
   padding: 0px 0px 0px 70px;
}

.pictures img{
   width: 200px;
   padding: 10px;
}

.pictures p{
   width: 200px;
   padding: 10px 10px 0px 10px;
   margin-left: 0px;
   margin-right; 0px;
   float: left;
   text-align: left;
   text-indent: 0px;
}

.pictures h2{
   width: 200px;
   margin-top: 0px;
   text-align: center;
   text-indent: 0px;
   margin-left: 0px;
}

.caption{
   width: 800px;
   margin-right: auto;
   margin-left: auto;
   padding: 0px 0px 0px 70px;
}
.footer {
   width: 650px;
   background-color: #FFFFFF;
   padding: 20px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   clear: both;
}

.hitcounter a:link{
   color:#FFFFFF;
}

.hitcounter a:visited{
   color:#FFFFFF;
}

.hitcounter a:hover{
   color:#FFFFFF;
   text-decoration: underline;
}

.hitcounter a:active{
   color:#FFFFFF;
}

.contact {
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   padding: 10px 0px 25px 0px;
   float: left;
   clear: both;
   overflow: hidden;
}

#mail {
   font-family: "Times New Roman", Times, serif;
   font-size: 28px;
   color: #FFFFFF;
}
/*star html hack takes care of entire area of the buttons being clickable in ie6 and below instead of just the text being clickable. */

* html #mainNav a{
   height: 50px;
}

* html .content {
   padding: 10px, 0px, 25px, 0px;
   height: 850px;
   overflow: visible;
}

* html .imagery {
   padding: 0px 0px 0px 25px;
}

* html .words {
   padding: 0px 25px 0px 0px;
}

* html h3{
   text-align: left;
   text-indent: 5px;
   padding: 0px;
   margin-top: 20px;
   font-size: 18px;
   color:#FFFFFF;
   background: #86633C;
   clear: both;
}

* html #nextback a{
   hei/ght: 50px;
}

* html .content{
   wi/dth: inherit;
}