/** MENU */
/**Hint: the mnemonic for padding and margin specs is T R B L (top right bottom left) or TRouBLe*/
/**Main navigation bar--last margin is left hand.  For wide we used 1px. Now can use 15 
Font size changed from 13 to 16px*/
/**---------------------vv @MEDIA vv------------------------------------------*/
/**These are the specifications for the main navigation bar, not the drop downs. */
/**PORTRAIT
Font size is larger and line height is larger. Also, set padding (this is the spacing between entries on the navigation bar) so that L and R are smaller at 0.5rem. 
This means that the drop downs are wider, but that may be a good idea for easier readability. We'll wait for feedback.
Otherwise, below, you can change it (around line 132) to 	padding:0.5rem 0.5rem 0.5rem 0.5rem;
*/
@media only screen and (max-width:31.25rem), only screen and (orientation: portrait)  {
   ul.navigation{
	margin:0 0 0 1rem;
	padding:0;
	position:relative;
	list-style-type:none;
	font-size:1.75rem;
	}
ul.navigation>li{
	float:left;
}
/**padding is top-right-bottom-left*/
ul.navigation>li>a{
	color: #FFFFFF;
	line-height:2.5rem;
	text-decoration:none;
	padding: 0 0.95rem 0 0.95rem; /**spacing--right and left--between entries on the navigation bar*/
	display:block;
	}
}
/**LANDSCAPE*/
/**
For this and PC, "line-height:" should be same as defaultagain-rem.css "height:
*/
@media only screen and (orientation: landscape)  {
 ul.navigation{
	margin:0 0 0 1rem;
	padding:0;
	position:relative;
	list-style-type:none;
	font-size:1.375rem;
	}  
ul.navigation>li{
	float:left;
}

ul.navigation>li>a{
	color: #FFFFFF;
	line-height:2rem;
	text-decoration:none;
	padding: 0 0.8125rem 0 0.8125rem; /**spacing--right and left--between entries on the navigation bar*/
	display:block;
	}
}
/**For pcs 
@media  screen and (min-width:980px)
*/
@media  screen and (min-width:61.25rem)  {	
 ul.navigation{
	margin:0 0 0 1rem;
	padding:0;
	position:relative;
	list-style-type:none;
	font-size:1.25rem;
	}  
ul.navigation>li{
	float:left;
}

ul.navigation>li>a{
	color: #FFFFFF;
	line-height:2rem;
	text-decoration:none;
	padding: 0 0.8125rem 0 0.8125rem; /**spacing--right and left--between entries on the navigation bar*/
	display:block;
	}

}
/**---------------------^^ @MEDIA ^^------------------------------------------*/

/**This block specifies the background color when hovering over each element in the navigation bar
Changed from #00B45A to #008C8C  */
ul.navigation>li>a:hover{
	background: #008C8C;   /**teal*/
}

ul.navigation>li.active>a{
	background-color: #008C8C;  /**teal*/
}

ul.navigation ul{
	display:none;
	background-color:#323232; /**very dark gray*/
	position:absolute;
	margin:0;
	padding:0;
	list-style-type:none;
}
/**Defines width of navigation drop down */
/**Note: relative fails at right edge
Changed width from 325px to 160px*/
/**---------------------vv @MEDIA vv------------------------------------------*/
/**PORTRAIT
This area determines the width of the drop downs. 
Note that portrait seems to require more room. 12rem seems good at the moment.
left defines starting point of sub sub menu--used 25 less than width above for looks*/
/**top auto meant that each submenu comes in same relative position to main dropdown*/
/**margin-top -24 adjusts so that the submenu box is easier to mouse over to.
Changed navigation to use #008C8C changed left from 300 to 160px
 */

@media only screen and (max-width:31.25rem), only screen and (orientation: portrait)  {
ul.navigation>li>ul>li{
	width: 12rem;  /**Defines width of navigation drop down */
}
ul.navigation ul ul{
	left:12rem; /** Adjust the starting point for the sub-sub-menu to match the width */
	top:auto; 
	margin-top:-1.5rem;
	white-space:wrap;
	background-color:#ffffff;
	border:1px solid #000000;
}
}

/**LANDSCAPE*/
@media only screen and (orientation: landscape)  {
	ul.navigation>li>ul>li{
	width: 10rem;  /**Defines width of navigation drop down */
}
ul.navigation ul ul{
	left:10rem;
	top:auto;
	margin-top:-1.5rem;
	white-space:nowrap;
	background-color:#ffffff;
	border:1px solid #000000;
}
}
/**LANDSCAPE*/
@media only screen and (orientation: landscape)  {
	ul.navigation>li>ul>li{
	width: 10rem;  /**Defines width of navigation drop down */
}
ul.navigation ul ul{
	left:10rem;
	top:auto;
	margin-top:-1.5rem;
	white-space:nowrap;
	background-color:#ffffff;
	border:1px solid #000000;
}
}
/**---------------------^^ @MEDIA ^^------------------------------------------*/



ul.navigation>li:hover>ul,
ul.navigation>li li:hover>ul{
	display:block;
}
/**---------------------vv @MEDIA vv------------------------------------------*/
/**This area controls the separation between items in the drop down sub-menus
Used padding on top and bottom so that the drop downs are not crammed together
PORTRAIT
*/
@media only screen and (max-width:31.25rem), only screen and (orientation: portrait) {
ul.navigation ul a{
	display:block;
	line-height:2rem;
	color:#ffffff;
	text-decoration:none;
	padding:0.85rem 0.8125rem 0.85rem 0.8125rem;  /**separation between items in the drop down sub-menus*/
	}
}
/**LANDSCAPE*/
@media only screen and (orientation: landscape)  {
ul.navigation ul a{
	display:block;
	line-height:1.5625rem;
	color:#ffffff;
	text-decoration:none;
	padding:0.5rem 0.8125rem 0.5rem 0.8125rem; /**separation between items in the drop down sub-menus*/
	}
}	
/**PCs*/
/**For pcs 
@media  screen and (min-width:980px)
*/
@media  screen and (min-width:61.25rem)  {
ul.navigation ul a{
	display:block;
	line-height:1.5625rem;
	color:#ffffff;
	text-decoration:none;
	padding:0.25rem 0.8125rem 0.25rem 0.8125rem;  /**separation between items in the drop down sub-menus*/
	}
}
/**---------------------^^ @MEDIA ^^------------------------------------------*/

ul.navigation ul ul a{
	color:#000000;
}

ul.navigation ul a:hover{
	background-color:#008C8C;
}