/*this stylesheet is for you navigation panel*/

#navigator {

}

.housebutton {
line-height: 90%;
}

.housebutton a {
font-size: 105%;
font-family:  Verdana, sans-serif;
}

.housebutton a:hover {
font-size: 120%;
font-family:  Verdana, 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: transparent;
border:  transparent;
width: auto;
margin-top: auto;
margin-left: 10px;
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: #42161E;
/*this is where you change the button font color*/
background-color: transparent;
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
}

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

.housebutton a:hover {
color: #C60024; 
/*-----this is where you change the button font color, when the button is hovered over*/
background-color: #92BC8D;
border-top:  none;
border-left: none;
border-bottom:  none;
border-right: none;
}


ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 700px;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
    font-weight: bold;
	font-size: 1.2em;
	background: #92BC8D;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #3C141A;
	text-decoration: none;
}
ul#topnav li:hover { background: #92BC8D; }
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/


ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none; /*--Hide by default--*/
	width: 700px;
	background: #92BC8D;
	color: #3C141A;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}

/* 
	LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #CEE1CC; }
ul.dropdown a:hover		            { color: #C60024; background: #92BC8D; }
ul.dropdown a:active                { color: #C60024; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
	 								  color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #92BC8D; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }



/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #CEE1CC; color: #000; 
									  border-bottom: 1px solid #ccc; float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }