/* -- Black Menu -- */
.menu {
    text-align:center;
	font-family: Arial, san-serif;	
	padding:0; 
	width:100%;
}


.menu a {
    margin:1px;
    font-size: 1.6rem;
	font-weight:bold;
	text-decoration:none;
	background-color:#CCCCCC;
	color:#FF6600;
}

@media (min-width: 550px) {
  .menu a { font-size: 1.3rem; }  
}

@media (min-width: 800px) {
  .menu a { font-size: 1.7rem; }
}

.menu a:hover { 
  color:#000000;
  background-color:#EC6720;
}
  

.submenu {
  position:absolute;
  float:left;
  width:100%;
}  


/* Button ":hover" Styling 
.menu ul li:hover a {color:#000}
.menu ul li:hover ul {display:block; position:absolute; top:42px; left:0; width:152px; margin: 0; padding: 0;}
.menu ul li:hover ul li a.center_hassub {background:#6a3; color:#000;}
.menu ul li:hover ul li:hover a.center_hassub {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}



/* DropDown Styling 
.menu ul li ul {display: none;}

.menu ul li:hover ul li a {background-image: none; display:block;height: 28px; line-height: 26px; color:#000; width:142px; text-align:left; margin: 0; padding:0 0 0 11px;font-weight:normal;}
.menu ul li:hover ul {
	margin: 0 0 0 3px;
	padding: 0;
	background-image:url('../Image/Menu/dropdown.png');
	background-repeat:no-repeat;
	background-position:bottom left; 
}

/* DropDown Menus ":active" or "Selected" Styling 
.menu ul li:hover ul .sub_active {
	background-image:url('../Image/Menu//sub_active.png');
	margin-right: 1px;
}

/* DropDown Menus ":hover" Styling 
.menu ul li:hover ul li a:hover {
  color:#000 !important; background-image:url('../Image/Menu/sub_hover.png');
}

.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}



/* Left Menus ":hover" Styling 
.leftmenu div {
  background-image:url('../Image/Menu/sub_active.png');
  background-repeat:no-repeat;
  color:#FFFFFF;
  font-family:Arial;
  font-size:10pt;
  padding-top:4px;
}
.leftmenu div:hover {
  background-image:url('../Image/Menu/sub_hover.png');
  background-repeat:no-repeat;
  color:#000 !important;
  font-size:11pt;
  font-weight:bold; 
  padding-top:4px;   
}
*/


#nav {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  margin: 0;
  z-index:9990;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

#nav li {
  position: relative;
  list-style:none;
  border-bottom:0;
}
#nav li a {
  color: #ffffff;
  display: block;
}

#nav li a:active {
  background-color: #c00 !important;
}
#nav span:after {
  width: 0;
  height: 0;
  border: 0.313em solid transparent; /* 5 */
  border-bottom: none;
  border-top-color: #efa585;
  content: '';
  vertical-align: middle;
  display: inline-block;
  position: relative;
  right: -0.313em; /* 5 */
}

/* first level */

#nav > ul {
  height: auto;
  width:100%;
  position: relative;
  height: 1.50em;
  background-color: #e15a1f;
} 
#nav:target > ul {
  display: block;
}
#nav > ul > li {
  background-color: #e15a1f;
  margin:0;
  width: 100%;
  float: left;
}
#nav > ul > li > a {
    height: 100%;
    font-size: 1.2em; 
    line-height: 1.50em; 
    text-align: center;
    padding: 0 0.833em; 
} 
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {
  background-color: #cc470d;
}
#nav > ul > li:not( :last-child ) > a {
  border-right: none;

}


/* second level */

#nav li ul {
  background-color: #cc470d;
  display: none;
  margin-top:0;
  margin-bottom:0;
  margin-left:5%;
  margin-right:5%;
  width:90%;

}  

#nav li ul li:hover {
  background-color: #FF6600;
}

#nav li ul a {
  font-size: 1.1em; 
  line-height: 1.5em; 
  border-top: 1px solid #e15a1f;
  padding-left:0.5em;
}

#nav li:hover ul {
  display: block;
  z-index:9990;
}


@media ( min-width: 550px )	{
  #nav {
    margin-top:1.5em;
  }	

  #nav > ul li {
    width:20%;
  }
  #nav li ul {
    position:absolute;
	width:140%;
  }
  
  #nav > ul > li > a {
    height: 100%;
    font-size: 0.8em; 
    line-height: 1.7em; 
    padding: 0 0.4em; 
  }
  
  #nav > ul > li > a {
    height: 100%;
    font-size: 0.8em; 
    line-height: 1.7em; 
    padding: 0 0.4em; 
  }
  
  #nav li ul li {
    width:100%;
  }  
  #nav li ul a {
    font-size: .75em; 
    line-height: 1.3em; 
	padding-left:0.2em;
  }  
       
}

@media ( min-width: 750px )	{
  #nav {
    margin-top:1.9em;
  }	
  
  #nav > ul > li > a {
    font-size: 1.0em; 
    line-height: 1.85em; 
    padding: 0 0.6em; 
  } 
  #nav li ul a {
    font-size: 1.0em; 
    line-height: 1.6em; 
	padding-left:0.25em;
  }        
}

@media ( min-width: 1000px )	{
  #nav {
    margin-top:2.2em;
  }	
  
  #nav > ul > li > a {
    font-size: 1.25em; 
    line-height: 2em; 
    padding: 0 0.75em; 
  } 
  #nav li ul a {
    font-size: 1.2em; 
    line-height: 1.8em; 
	padding-left:0.35em;
  }      
}