/** HTML
		<ul class="dropdown">
			<li><a>How Do I? <span class="arrow"></span></a>
				<ul class="submenu">
					<li>
					stuff that drops down
					</li>
				</ul>
			</li>
		</ul>


*/

/** Dropdown w JQuery **/
/** -------------------------- **/


	/* LEVEL ONE */
	
	/* container */
	ul.dropdown, ul.calendar-dropdown { 
		position: relative;
		margin: 0 0 0;
		z-index: 9999;
		list-style: none;
		padding: 0;
	}
	
	/* list item */
	ul.dropdown > li, ul.calendar-dropdown > li { 
		height: 37px;
		background: url(/data/images/portal_bg.png) top repeat-x;
		font-weight: normal; 
		float: left; 
		zoom: 1; 
		position: relative; 
		padding: 0;
		margin: 0;
		cursor: pointer;
		border-right: 1px solid white;
		border-left: 1px solid #7E93A9;
	}
	
	/* calendar list item */
	ul.calendar-dropdown > li {
		height: 40px;
		background: url(/data/images/ltblue_bg.png) repeat-x;
		background-size: 100% 100%;
		width: 200px;
		border: 1px solid #6B8098;
		
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		margin:5px 0 10px 0;
		padding-left: 10px;
	}
	
	/* list item links */
	ul.dropdown > li > a { 
		height: 37px;
		line-height: 37px;
		display: block; 
		padding: 0 34px;
		color:#18325C;
		font-weight: 400;
		font-size: 15px;
		text-decoration: none;
		position: relative;
	}
	
	ul.calendar-dropdown > li > a {
		height: 40px;
		line-height: 40px;
		display: block;
		padding: 0 15px 0 40px;
		color: #192E3C;
		text-decoration: none;
		font-weight: 700;
		font-size: 15px;
		position: relative;
		background: url(/data/images/icon_calendar.png) left no-repeat;
	}
	
	.arrow {
		position: absolute;
		width: 6px;
		height: 5px;
		background: url(/data/images/arrow_down.png) no-repeat;
		top:16px;
		right: 10px;
	}
	
	ul.calendar-dropdown .arrow-down {
		position: absolute;
		width: 10px;
		height: 9px;
		background: url(/data/images/arrow_large.png) no-repeat;
		top:16px;
		right: 14px;
	}
	
	.ie7 .arrow {
		margin-top:-27px;
	}
	
	ul.dropdown > li.hover,
	ul.dropdown > li:hover { 
		position: relative; 
		background: #243E54;
	}
	
	ul.calendar-dropdown > li.hover,
	ul.calendar-dropdown > li:hover {
		position: relative;
		background: #ADC1D6;
	}
	
	ul.dropdown > li.hover > a,
	ul.dropdown > li:hover > a {
		color: #ffffcc;
	}
	
	ul.calendar-dropdown > li.hover > a,
	ul.calendar-dropdown > li:hover > a {
		
	}

		/* LEVEL TWO */
		ul.dropdown ul.submenu, ul.calendar-dropdown ul.calendar-submenu { 
			width: 220px; 
			display:none; 
			position: absolute; 
			left: 0; 
			margin: 0;
			padding: 0;
			z-index: 999;
			list-style: none;
		}
		
		ul.calendar-dropdown ul.calendar-submenu {
			z-index: 998;
			width: 210px;
		}
		
		ul.dropdown ul.submenu li,
		ul.calendar-dropdown ul.calendar-submenu li { 
			float: left; 
			background: none;
			margin: 0px;
			padding: 0;
		}