@charset "UTF-8";
/* CSS Document */
<!--
body {
	font: 100%/1.4 Helvetica, sans-serif，Verdana, Arial, ;
	margin: 0;
	padding: 0;
	color: #000;
	font-family:Helvetica, Arial, sans-serif;
	background-color:#043777;
}
.menu {font-size:18px;
	background:; height:58px;
    z-index:100;
    width:1024px;
}
/* style the outer div to give it width */

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding-left:238px;list-style-type:none; height:54px; background:#;}

/* style the sub-level lists */
.menu ul ul {width:47px; }
.menu ul ul  ul{width:47px;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left;height:3em;line-height:3em; display:block;}

/* style the sub level list items */
.menu ul ul li {display:block;width:9em;height:auto; line-height:1em;  }

.menu ul ul ul li {display:block;width:242px;height:auto; line-height:1em; padding-left:70px;}


/* style the links for the top level */
.menu a, .menu a:visited {display:block;float:left;height:54px; width:89px; text-decoration:none;color:#fff;background:#043777 center center; padding:0 10px; }
/* hack IE5.x to get the correct the faulty box model and get the width right */
* html .menu a, * html .menu a:visited {width:109px; w\idth:109px;}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {display:block;background:#043777; color:#fff;width:12em;height:97%;line-height:1em;  padding:0.5em 1em; border-bottom:1px solid #0072AB;}
* html .menu ul ul a, * html .menu ul ul a:visited  {width:14em; w\idth:12em;}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {border-collapse:collapse; padding:0; margin:-1px; width:0; height:0; font-size:1em; z-index:1;}


/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#043777;}
/* style the fourth level background */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#043777 ;}
/* style the sub level 1 background */
.menu ul :hover a.sub1 {background:#46A091;}
/* style the sub level 2 background */
.menu ul ul :hover a.sub2 {background:#46A091;}

/* style the level hovers */
/* first */
* html .menu a:hover {background:#032951 url(images/top_grad.gif) center center; position:relative; z-index:100;}
.menu li:hover {position:relative;}
.menu :hover > a {background:#032951 url(images/top_grad.gif) center center;}
/* second */
* html .menu ul ul a:hover{background:#46A091; position:relative; z-index:110;}
.menu ul ul li:hover {position:relative;}
.menu ul ul :hover > a {background:#46A091;}
/* third */
* html .menu ul ul ul a:hover {background:#46A091; position:relative; z-index:120;}
.menu ul ul ul :hover > a {background:#46A091;}
/* fourth */
.menu ul ul ul ul a:hover {background:#46A091; position:relative; z-index:130;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:3em; left:0; width:14em}

/* position the third level flyout menu */
.menu ul ul ul{left:0em;top:0;width:16em;}


/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible; height:auto; padding: 0 54px 54px 54px; left:-54px;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible; left:0em;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding-right: 15px;
	padding-left: 15px; 
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
p{    line-height:20px;
font-size:15px;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a. span, .p{
	text-decoration:none;
	}
a:link {
	color: #FFF;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
	width: 1024px;
	background-color: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	display:block;
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
	background-color: #000;
	height:38px;
}
.header span{
	float:right;
	padding:10px;
	font-size:10px;
}

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/

.content {
	background-color: #fff;
	padding: 10px 0;
}

/* ~~ The footer ~~ */
.footer {
	 display:block;
	text-align:center;
	font-size:11px;
	width: 1024px;
	background-color: #FFF;
	float:left;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	font-size: 1px;
	line-height: 0px;
}
-->