/*  Drop Down Menu
	-Copy & Link to css file & jquery file
	-Add jquery script to jsp file (sample below)
	-Use UL with formatting/classes (structure below) */

ul.topnav { /* main menu bar */
	list-style: none;
	padding: 0 0px;
	margin: 0;
	float: left;
	width: 920px;
	height:24px; /* need to adjust for height of menu bar */
	background: #222;
	font-size: 1.2em;
	background-color: #000;
}
ul.topnav li { /* main menu bar list items */
	float: left;
	margin: 0;
	padding: 0 0 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{ /* main menu bar links */
	padding: 0px 0px;
	line-height:35px;
	height:24px; /* need to adjust for height of menu bar */
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{ /* main menu bar link hover effects */
	background-color:#ed1c24;
}

/* add for arrow or other trigger drop down */
/*ul.topnav li span { /*--Drop down trigger styles--/
	width: 17px;
	height: 35px;
	float: left;
	background-color:#DDDDDD;
}

ul.topnav li span.subhover {background-color:#00ff06; cursor: pointer;} /*--Hover effect for trigger--*/

ul.topnav li ul.subnav { /* sub menu */
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 24px; /* need to adjust for height of menu bar */
	background: #000;
	margin: 0; padding: 0;
	display: none;
	float: left;
	border: 1px solid #1a1a1a;
}
ul.topnav li ul.subnav li{ /* sub menu list items */
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
}
ul.topnav li ul.subnav li a { /* sub menu links */
	float: left;
	background: #000;
	padding: 2px 20px;
}
ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background-color: #ed1c24;
}

/*******  menu w/ dropdown styles (customize for look)
#BotLinks{
	margin:auto;
	width:794px;
	border-left:3px solid #FFF;
	border-right:3px solid #FFF;
	text-align:center;
	color:#000;
	text-decoration: none;
	}
#BotLinks a, #BotLinks a.menu_on {
	padding:0px;
	margin:0px;
	display:block;
	height:24px;
	width:131px;
	text-decoration: none;
	color:#FFF;
	font-family: 'YardSaleRegular', sans-serif;
	font-size:11pt;
	line-height:17pt;
}
#BotLinks a:hover, #BotLinks a.menu_on{
	color: #FFF;
	background-image:none;
	background-color: #ed1c24; }
	
#BotLinks a{
	background-position: top right;
	background-repeat: no-repeat;
	background-image:none;
	background-color:#000;
	border-right:solid 1px #FFF;
}
#BotLinks ul.topnav li ul.subnav li a{
	border-right:none;
}
****************/

/**********************************/
/******************** sample script:
<script language="JavaScript">
$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

	$("ul.topnav li a").hover(function() { //When trigger is clicked...

		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('200').show(); //Drop down the subnav on click
		//$(this).parent().find("ul.subnav").stop().animate({height:"100%",opacity:1},'200');

		$(this).parent().hover(function() {
		}, function(){
			$(this).parent().find("ul.subnav").slideUp('600'); //When the mouse hovers out of the subnav, move it back up
		//	$(this).parent().find("ul.subnav").stop().animate({height:"0%",opacity:0},'600');
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});
</script> ************************/

/*********************************/
/****************** ul structure
	<ul class="topnav">
    	<li><a href="#">Main Nav Link</a></li>
    	<li>
        	<a href="#">Main Nav Link</a>
        	<ul class="subnav">
            	<li><a href="#">Sub Nav Link</a></li>
            	<li><a href="#">Sub Nav Link</a></li>
        	</ul>
    	</li>
    	<li>
        	<a href="#">Main Nav Link</a>
        	<ul class="subnav">
            	<li><a href="#">Sub Nav Link</a></li>
            	<li><a href="#">Sub Nav Link</a></li>
        	</ul>
    	</li>
    	<li><a href="#">Main Nav Link</a></li>
    	<li><a href="#">Main Nav Link</a></li>
    	<li><a href="#">Main Nav Link</a></li>
    	<li><a href="#">Main Nav Link</a></li>
	</ul>   
**********************************/