@charset "UTF-8";
/* CSS Document */

/*MENU BAR*/
#overlay {position: absolute;} /*This ensures the menu dropdown items appear over the Flash animation and not beneath it*/
#menu 
{       float: left;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	clear : both;
	width : 85%;
	font-family: Georgia, Calibri, Helvetica, Arial;

}
#menu ul 
{
	float : left;
	width : 100%;
	padding-left : 45px;
	padding-top : 10px;
	margin: 0px;
	list-style-type: none;
 z-index: 10;
}
#menu ul li 
{ 
	float:left; 
	position:relative; 
	z-index: 10;
	display:block; 
	height: 25px;
	line-height:12px;
	padding-right: 35px; /* distance between menu items */
}
#menu ul li a 
{ 
	float : left; 
	color : #0a427c; 
	text-decoration : none; 
}


/* make the dropdown ul invisible */
#menu ul li ul 
{
	display: none;
	font-family: Calibri, Helvetica, Arial, san-serif;
}

/* set the background and foreground color of the main menu li on hover */
#menu ul li:hover a 
{
	color:#ffcc00; 
}

/* make the dropdown block visible on hover and define the position the dropdown block. this block is merely a container with no styling as all the styles are performed in the call below */
#menu ul li:hover ul 
{
	display:block; 
	position:absolute; 
	top: 34px; 
	left: -37px; 
}
/* style the background, borders and text color of the submenu links within the dropdown block. we also define the position of the text and its background area relative to the dropdown block above*/
#menu ul li:hover ul li a 
{
	display:block;
	width: 200px;
	color: #ffffff; 
	background: #5d92c9;
	line-height: 24px;
	margin-top: -20px;
	margin-left: -23px;
	text-indent: 15px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	position: relative; 


}
/* style the background and text color of the submenu links on hover */
#menu ul li:hover ul li a:hover 
{
	background:#1f2b47; 
	color:#ffcc00;
}

.menu-container #menu, 
.menu-container .menu-toggle {
	background: rgba(255,255,255,1);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(219,233,246,1) 54%, rgba(209,226,243,1) 62%, rgba(160,192,228,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(20%, rgba(255,255,255,1)), color-stop(54%, rgba(219,233,246,1)), color-stop(62%, rgba(209,226,243,1)), color-stop(100%, rgba(160,192,228,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(219,233,246,1) 54%, rgba(209,226,243,1) 62%, rgba(160,192,228,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(219,233,246,1) 54%, rgba(209,226,243,1) 62%, rgba(160,192,228,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(219,233,246,1) 54%, rgba(209,226,243,1) 62%, rgba(160,192,228,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(219,233,246,1) 54%, rgba(209,226,243,1) 62%, rgba(160,192,228,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a0c0e4', GradientType=0 );
	position: relative;
}

.menu-container #menu {
	clear: none;
	float: none;
	width: 100%;
}

.menu-container #menu ul {
	float: none;
	padding-bottom: 0;
	padding-top: 0;
}

.menu-container #menu ul li {
	display: inline-block;
	float: none;
	height: auto;
	line-height: normal;
}

.menu-container #menu > ul > li > a {
	display: block;
	padding-bottom: 8px;
	padding-top: 10px;	
}

.menu-container #menu > ul > li:last-child {
	padding-right: 0;
}

.menu-container #menu ul li a {
	float: none;
}

.menu-container #menu ul li:hover ul {  	
  	left: -37px;  	
  	top: 32px;
}

.menu-container #menu ul li:hover ul li a {
	border-top: none;
	margin-top: 0;
}

.menu-container #menu ul li:hover ul li:first-child a {
	border-top: 1px solid black;
}

.menu-toggle {
	display: none;
}

@media (max-width: 991px) {
	.menu-container #menu ul li {
		padding-right: 20px;
	}

	.menu-container #menu ul li:hover ul {  			  	
		top: 30px;
	}

	.menu-container #menu ul li a {
		font-size: 11px;
	}
}

@media (max-width: 769px) {	

	.menu-container #menu ul {
		display: none;
		background-color: #5d92c9;
		padding-left: 0;
	}

	.menu-container #menu ul li {
		border: 1px solid black;
		border-top: none;
		display: block;
		padding-right: 0;
	}

	.menu-container #menu ul li:first-child {
		border-top: 1px solid black;
	}

	.menu-container #menu ul li ul {
		display: block;
	}

	.menu-container #menu ul li ul li {
		border-left: none;
		border-right: none;
		border-top: none;		
	}

	.menu-container #menu ul li ul li:last-child {
		border-bottom: none;
	}

	.menu-container #menu ul li a {
		color: white;
		display: block;
		padding-left: 10px;
		padding-bottom: 8px;
		padding-top: 10px;
	}
	
	.menu-container #menu ul li:hover > a 
	{
		background: #1f2b47;
		color:#ffcc00; 	
	}

	.menu-container #menu ul li ul li a {
		text-indent: 25px;
	}
	
	/* make the dropdown block visible on hover and define the position the dropdown block. this block is merely a container with no styling as all the styles are performed in the call below */
	.menu-container #menu ul li:hover ul 
	{
		display: block; 
		position: relative; 
		top: 0; 
		left: 0; 
	}

	.menu-container #menu ul li:hover ul li {
		border-top: none;	
	}

	.menu-container #menu ul li:hover ul li a 
	{
		display:block;
		width: 100%;		
		line-height: normal;
		margin-top: 0;
		margin-left: 0;		
		border: none;
		position: relative;
	}

	.menu-toggle {
		display: block;
	}
	
	.menu-toggle a {				
		display: inline-block;
		padding: 4px 10px;	
	}

	.menu-toggle .icons {
		display: inline-block;
	}

	.menu-toggle .icon-bar {
		background-color: #0a427c;
		border-radius: 1px;
		display: block;
		height: 2px;
		width: 20px;
	}

	.menu-toggle .icon-bar + .icon-bar {
		margin-top: 4px;
	}

	.menu-toggle .text {
		color: #0a427c;
		display: inline-block;
		font-size: 16px;
		position: relative;
		top: -1px;
	}
}

@media (max-width: 461px) {
	.menu-container #menu ul li a {
		font-size: 10px;
		padding-bottom: 6px;
		padding-top: 8px;
	}

	.menu-toggle a {				
		display: inline-block;
		padding: 2px 10px;	
	}

	.menu-toggle .icon-bar {		
		width: 17px;
	}

	.menu-toggle .icon-bar + .icon-bar {
		margin-top: 2px;
	}

	.menu-toggle .text {
		font-size: 12px;
	}
}