/*this stylesheet is for you navigation panel*/

#navigator {

}

.housebutton {
line-height: 100%;
}

.housebutton a {
font-size: 100%;
font-family:  Tahoma, sans-serif;
}

.housebutton a:hover {
font-size: 100%;
font-family:  Tahoma, sans-serif;
}


/* this part below is for the color on the background, surrounding the buttons. Change the color, and the 
border, if you like. For the border, you can use solid, dashed, or dotted, for different border styles*/

#navigator {

background-color: #a8b48d;/*pale green*/

border:  transparent;


width: auto;

margin-top: auto;

margin-left: 2px;

margin-right: auto;

padding: 2px;

text-align: left;


}

/* want more space between your buttons? just increase the margins
from 1px. Font weight can be bold if you prefer.*/

.housebutton {

font-weight: bold;
text-align: left;
margin-bottom: 0px;
margin-top: 0px;
}


/* this part is for the colors of your buttons "at rest" so to speak.*/




.housebutton a {

padding: 4px;

text-decoration: none;

display: block;

color: #790000; /*-dk maroon--#523d66 is deep purple--this is where you change the button font color*/

background-color: #c8c7ce; /*transparent*/

/*background-image: 
url(../images/patinabutton2.png);*/

border-top: 2px outset #c8c7ce;

border-left: 2px outset #797d77;

border-bottom: 2px outset #797d77;

border-right: 2px outset #c8c7ce;



}

/*this part is how the buttons look, once the pointer passes over them. */




.housebutton a:hover {

color: #005826; /*-dark green---this is where you change the button font color, when the button is hovered over*/

background-image: none;

background-color: #99ac7d;/*greener*/

border-top:  2px inset #797d77;

border-left: 2px inset #eada70;

border-bottom:  2px inset #eada70;

border-right: 2px inset #797d77;

}


/*this part is how the buttons look, after they have been clicked on. */




.housebutton a:visited {

color: #523d66; /*-deep purple---this is where you change the button font color, when the button is hovered over*/

background-image: none;

background-color: #c8c7ce;/*lavender */

border-top:  2px inset #797d77;

border-left: 2px inset #eada70;

border-bottom:  2px inset #eada70;

border-right: 2px inset #797d77;

}





/*------this is the horizontal nav bar*/
#nav ul

{ float: left; 
list-style: none; 
background-image: 
url(../images/border.png);
width: 100%; 
padding: 0; 
margin: 0 0 0 0px; 
height: 30px; 
display: inline;


} 



/*#nav ul li ul
{; 
margin: 0; 
padding: 0; }*/

/*#nav ul li ul:hover 
{ display: block; } */

#nav ul li a 
{ display: block; 
float: left; 
width: auto; 
margin: 0; 
padding: 0 7px;/*this is the gap between the text, and the border*/ 
border-top: none; 
border-right: none;/*this gives a white border, change as required*/ 
border-left: none; /*this gives a white border, change as required*/ 
border-bottom: none; 
color: #523D66; /*-deep purple- text color*/ 
font: bold 12px/30px Tahoma, Geneva, sans-serif; /* sets the font type and size*/ 
/*text-transform: uppercase; /*delete if you dont want uppercase*/ 
text-decoration: none; letter-spacing: 1px; 
position:relative; background-image: 
                   url(../images/border.png);
                  

} 

#nav ul li ul li a {background:#a8b48d;
                    color:#005826;
                    text-transform: none; /*delete if you dont want uppercase*/
                    border-top:  2px outset #797d77;
                    border-left: 2px outset #eada70;
                    border-bottom:  2px outset #eada70;
                    border-right: 2px outset #797d77;
                    font: 12px/30px Tahoma, Geneva, sans-serif; 
                    }
#nav  a:hover {	   background:#523d66;
                    color:#fff;
                    text-transform: none; /*delete if you dont want uppercase*/ 
                    }

/*#nav ul li a:active 
                   { color: #fff; 
                   background-image: 
                   url(../images/border2.png);
                   font: bold; 
                   position:relative;}*/ 
                   
                   
#nav li:hover ul{
					
                    background-image:none;
					display:block;
                    position:absolute;
                   
                 
                   bottom:34em;
					}
                    
/* #nav li ul li:a {
					
                    background-image: 
                   url(../images/border2.png);
					display:block;
                   
					} experiment trying to get mouseover effects*/                  
					


/*#nav a {display:block; width:auto;}*/
#nav li {float:left; width:auto; }
/*div.content {clear:left;}*/








/*#nav li ul li {	font-size:150%;}*/
#nav li:hover ul li {border:none;
						padding:none;
                        display:block;
                  
                        
                   }
/* #nav, #nav ul {	display:block;
						margin:0;
						padding:0;
						list-style:none;}*/
/*#nav li ul li {	float:none;
					width: auto;
					}*/

#nav li ul {
	
    position: relative;
	width: 14em;
	left: auto;
 display:none;
}

#nav li:hover ul {

	left: auto;
  
}