@charset "utf-8";
/*BROWSER DEFAULT SETTINGS
As the default styles of the browsers differ from each other, we値l add some reset styles to keep consistency between them and avoid future issues.*/
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;}
 
.nav a { text-decoration: none;}
 
.nav ul li ul li{ list-style: square; }
.nav li { list-style: none; }
/*basic styles to the menu container and float
Then we will add some basic styles to the menu container and float the list items to the left in order to show them on the same line.*/
.nav {
    display: inline-block;
    position: relative;
    cursor: default;
    z-index: 500;}
 
.nav > li {
    display: block;
    float: left;font-size: 13px;}

/*Styling the Menu Links
We will start with the common styles like padding, height, position, etc. Then we値l set the typography styles such as font size, color, text shadow, etc. We値l also set a background color and a left and right border. To keep the styles transitions smooth we値l add a CSS3 transition. Note that we set the same property five times, this is required because this property is not fully implemented in all browsers yet, and as this property is on testing, all the different browsers use a prefix before the property. So if you want to support some current and older browsers use this prefixes.*/
.nav > li > a {
    position: relative;
    display: block;
    z-index: 510;
    height: 2.0em;
    padding: 0 7px;
    line-height: 37px; 
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #000;
    text-shadow: 1px 1px 2px rgba(0,0,0,.30);
 
    background: #f6f6f6;
    border-left: 1px solid #d8d7d3;
    border-right: 1px solid #f6f6f6;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;}
	
	/*For the hover state we will only change the background color. To finish the menu links styling we will add rounded corners to the first link using the :first-child pseudo selector and remove the left border.*/
.nav > li:hover > a { background: #E3F8F7; }
 
.nav > li:first-child > a {
    border-radius: 0;
    border-left: none;}
	
	/*Styling the Search Form

/*The Mega Dropdowns

This is one of the most important parts. We will start by setting the position to absolute, width to 100%, display to block and the top and left values. Then we will hide the dropdowns using the opacity, visibility and overflow properties. After that we will add a background color, rounded corners and some transitions. The reason we will be using this three properties to hide de dropdowns and not the display: none; is because if we use display: none; the transitions won稚 work.*/
.nav > li > div {
    position: absolute;
    display: block;
    width: 110%;
    top: 1.750rem;
    left: -20; 
    opacity: 0;
    visibility: hidden;
    overflow: hidden; 
    background: #f6f5ee;
    border-radius: 0 0 0.188rem 0.188rem; 
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;	
	-webkit-box-shadow: 7px 7px 5px 0px rgba(46,84,94,0.13);
	-moz-box-shadow: 7px 7px 5px 0px rgba(46,84,94,0.13);
	box-shadow: 7px 7px 5px 0px rgba(46,84,94,0.13);
	}

/*To show the dropdowns on hover we need to set the opacity to 1 and the visibility and overflow properties to visible.*/
.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;}	
	
/*Then we will add some basic styles for this content. We値l set the width of each column to be 20%, the padding 2.5% and float the columns to the left. To finish we will add some typography styles for the heading and links.*/
.nav .nav-column {
    float: left;
    width: 25.0%;
    padding: 1.5%;
}
 
.nav .nav-column h3 {
    margin: 10px 0 5px 0;
    line-height: 1.0rem;
 	text-align:left;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 0.85rem;
    color: #000;
    text-transform: uppercase;
}

.nav .nav-column h3 a:link {color:#000;}
.nav .nav-column h3 a:visited {color: #000;}
.nav .nav-column h3 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: underline;}
 
.nav .nav-column h3.orange { color: #ff722b; }
.nav .nav-column li {font-size: 0.900rem;color: #888888;} 
.nav .nav-column li a {
    display: block;
    line-height: 1.0rem; 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 0.850rem;
    color: #888888;
}
 
.nav .nav-column li a:hover { color: #666666;text-decoration: underline; }	
.navcolPAD {padding:0 0 0 0.75rem; border-left: 0.125em solid #ced0d0;display:block;}
.navcolPAD .uline {text-decoration:underline}
/*em2h sets bar height,background,etc before dropdowns*/
.em2h {height:2.0rem; padding: .1rem 0;background: #f6f5ee;text-align:center}	
	/*.em2h ul {margin-left:120px}*/