/*this is the css for the vertical version*/
.vertical ul{
			font-family:Arial;/*Century Gothic*/
			list-style-type: none;
			padding: 0px;
			width:179px; margin:0px;
		}
.vertical li a{
			background:url(../images/l_arrow.gif) no-repeat left top;
			display: block;
			width:179px;
			text-decoration: none;
			height: 1em;
			padding-top: 5px; padding-bottom:7px; padding-left:20px;
			font-size:12px; font-weight:bold;
			border-bottom: 1px solid #B5D3FF;
			border-right:1px solid #b2d2fb;
		}
* html .vertical li a{
			background:url(../images/l_arrow.gif) no-repeat left top;
			display: block;
			width:181px;
			text-decoration: none;
			height: 1em;
			padding-top: 5px; padding-bottom:7px; padding-left:20px;
			font-size:12px; font-weight:bold;
			border-bottom: 1px solid #B5D3FF;
			
		}

.vertical li li a{
			display: block;
			background:none;
			text-decoration: none;
			height: 1em; width:170px;
			padding-top: 3px; padding-bottom:5px; padding-left:5px;
			font-size:12px; font-weight:normal; font-family:Arial; text-transform:none;
			border-bottom: 1px solid #B5D3FF;
		}

* html .vertical li li a{
			display: block;
			background:none;
			text-decoration: none;
			height: 1em; width:175px;
			padding-top: 3px; padding-bottom:5px; padding-left:5px;
			font-size:12px; font-weight:normal; font-family:Arial; text-transform:none;
			border-bottom: 1px solid #B5D3FF;
		}
.vertical li{ display: inline; } /*Needed for IE. Don't ask me why, It was a lucky guess.*/

.vertical li ul{ position: absolute; margin-top:-25px; margin-left: 200px; width:175px; background:#ffffff; border:1px solid #B5D3FF; }
* html .vertical li ul{ position: absolute; margin-top:-30px; margin-left: 200px; width:175px; background:#ffffff; border:1px solid #B5D3FF; }

		/*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
		/*Not sure if I recommend this or not*/
		
.inaccesible li ul{	display: none;	} 

/*Arrow code - looks like <a class="haschild" href="#">Text <span>Arrow</span></a> can be turned on/off with arrow class*/
.arrow a span{ 	padding-left: 1em; font-size: 85%; }
.arrow a:hover span{ padding-left: 2em; }
.arrow a span.noshow{ visibility: hidden; }
		
/*colors for menu*/
.blackwhite li a{ background-color: white; color: #636563; border-color: #B5D3FF; }
.blackwhite li a:hover{ background-color: #E0F3FC; color: #396DB5; border-color:#B5D3FF; }
.blackwhite ul{ border-color:none; }