/*================================================================
NAV stylesheet for the website.

Define all aspects (layout AND typography) of:
  - Nav (ul)
  - Nav List Items (li)
  - Nav Links
  - Current Page Definitions
  
================================================================*/

/* NAV (ul)
----------------------------------------------------------------*/
#main-menu, #main-menu ul {
	float: right;
  	list-style: none;
	display: inherit;
	margin: 25px 60px 1em 7px;
	padding: 0;
	font-weight: bold;
  	width: 600px;
	height: 25px;
 	background: #3abde6;
}


/* NAV LIST ITEMS (li)
----------------------------------------------------------------*/
#main-menu li {
	/* width: 8em; */
	padding: 0;
  	float: left;
	display: inline;
}


/* NAV LINKS
----------------------------------------------------------------*/
#main-menu a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 0.25em 10px;
} 

#main-menu a:hover {
background-color: #0e83ab; 
}

/* CURRENT PAGE INDICATORS
-----------------------------------------------------------------
 If you define your body id's and also set each nav link to a 
 class of the same name, then you have a very handy method of
 defining the style for nav buttons relative to the current page.
----------------------------------------------------------------*/
body#home a:link.home, body#home a:visited.home,
body#contact a:link.contact, body#contact a:visited.contact {
  background: 269ec3;
  color: #fff;
}

/* SUBMENUS
----------------------------------------------------------------*/


#main-menu li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 160px;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
	background-color: #269ec3;
	border-width: 1px;
	text-transform: capitalize;
}

#main-menu li li {

	border-top: 1px solid #177d9c;
	background-color: #269ec3;
}

#main-menu li ul a {
	width: 150px;
}
#main-menu li ul ul {
	margin: -1.75em 0 0 14em;
}

#main-menu li:hover ul ul, #main-menu li:hover ul ul ul, #main-menu li.sfhover ul ul, #main-menu li.sfhover ul ul ul {
	left: -999em;
}

#main-menu li:hover ul, #main-menu li li:hover ul, #main-menu li li li:hover ul, #main-menu li.sfhover ul, #main-menu li li.sfhover ul, #main-menu li li li.sfhover ul {
	left: auto;
}

#main-menu li:hover, #main-menu li.sfhover {
	background-color: #269ec3; color: #ccc; 
}

#main-menu li.sfhover a{
	text-align: left; 
}