﻿/* Light Green: #d8e6b6 */
/* Dark Green: #a0bf80 */
/* Orange: #F15A22 */

/* ---Top Menu--- */
#TopMenu
{
	box-sizing: border-box;
	white-space: nowrap;
	height: auto;
	padding: 0px;
	padding-left: 30px;
	background-color: #a0bf80;
}


#MenuPackage a {display: block; cursor: pointer; text-decoration: none;}
#TopMenu ul {list-style: none; margin: 0px; padding: 0px;}
#TopMenu ul li {display: block;}
/*Mobile Menu Controls*/#ToggleMenu {display: none; cursor: pointer;}

/*Main Menu CSS*/
.MenuItem {position: relative; float: left; margin-right: 15px; margin-bottom: 0px; height: 30px;}
.MenuText, .MenuTextLink {box-sizing: border-box; height: 30px; width: auto; overflow: visible; padding-top: 8px; padding-left: 10px; padding-right: 10px; text-align: center;  font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 12px;}
.MenuGraphic, .MenuGraphicLink {overflow: hidden; width: width: auto; overflow: visible; height: 30px;}
.MenuGraphicLink img {border-style: none;}

/*Sub Menu CSS*/
.SubMenu {z-index: 1000; display: none; position: absolute; background-color: #544338; background-image: url(/MainSiteGraphics/TransparentBackground.png)\9;}
.SubMenuItem {z-index: 1001; position: relative; margin: 0px;}
.SubMenuText, .SubMenuLink {z-index: 1002; padding: 5px 15px 5px 15px; margin: 0px; white-space: nowrap; font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 12px;}

/*IE 8 specific*/
.MenuItem {background-image: url(/MainSiteGraphics/TransparentBackground.png)\9;}
.MenuTextLink:hover {background-color: #38777f\9; color: #ffffff\9;}
.MenuItem:hover > .SubMenu {display: block\9; left: 0px\9; top: 35px\9;}
.SubMenu:hover {display: block;\9}
.SubMenuItem:hover > .SubMenu{display: block\9; top: 0px\9; left: 100%\9;}
.SubMenuLink:hover {color: \9;}

.MenuLinkOn {background-color: #F15A22; color: #ffffff;}
.LevelTwoOn {color: ;}
.LevelThreeOn {color: ;}

/*Large Screens*/
@media (min-width: 769px) {
/*Hover CSS*/

.MenuTextLink {letter-spacing: 2px;;}

.MenuTextLink:hover {background-color: #F15A22; color: #ffffff;}
.MenuItem:hover > .SubMenu{display: block;}
.SubMenu:hover {display: block;}
.SubMenuItem:hover > .SubMenu{display: block; top: 0px; left: 100%;}
.SubMenuLink:hover {color: ;}
}

/*Small Screens*/
@media (max-width: 768px) {
#Main {overflow: hidden; width: 90%; margin: 5%;}
#ContentLeft, #ContentRight {float: none;}
#ContentRight {float: none;}
#TopMenu {height: auto; padding: 0px;}
#ToggleMenu {display: block; box-sizing: border-box; margin-bottom: 10px; width: 100px; height: 45px; padding-top: 10px; background-color: #969696; color: #ffffff; font-size: 26px; font-weight: bold;}#ToggleMenuPlusMinus {display: inline-block; width: 20px;}
/*Reset Styling*/
.MenuItem, .MenuText, .MenuTextLink, .MenuGraphic, .MenuGraphicLink, .SubMenu, .SubMenuItem, .SubMenuText, .SubMenuLink {float: none; position: relative; margin: 0px; padding: 0px; background-color: transparent; border: none;}
.MenuText, .MenuTextLink, .SubMenuText, .SubMenuLink {box-sizing: border-box; padding: 10px; height: 45px; font-size: 26px; color: #000000; text-align: left;}
.MenuItem {height: auto; background-color: transparent; border-bottom: solid 1px #000000;}
.MenuText, .MenuTextLink, .MenuGraphic, .MenuGraphicLink {box-sizing: border-box; padding: 10px; height: 45px; padding-left: 20px; background-color: transparent;}

.LevelTwo {background: color: #dcdcdc;}
.LevelTwo > .SubMenuItem {box-sizing: border-box; background-color: #dcdcdc; border-top: solid 1px #000000;}
.LevelTwo > .SubMenuItem > .SubMenuText, .LevelTwo > .SubMenuItem > .SubMenuLink {padding-left: 60px; background-color: #dcdcdc;}
.LevelThree {background-color: #bebebe; border-bottom: solid 2px aqua;}
.LevelThree > .SubMenuItem {background-color: #bebebe; border-top: solid 1px #000000; padding-left: 90px;}
.LevelThree > .SubMenuItem > .SubMenuText, .LevelThree > .SubMenuItem > .SubMenuLink {background-color: #bebebe;}
.MenuItem .HasSubMenu > a:after {content: '+'; position: absolute; margin-left: 10px; box-sizing: border-box; height: 45px; padding-top: 5px; top: 0px; left: 0px; font-size: 1.5em; display: block;}
.MenuItem.HasSubMenu > a.active:after {content: '-'; padding-top: 0px;}
.SubMenuItem.HasSubMenu > a:after {content: '+'; position: absolute; margin-left: 30px; box-sizing: border-box; height: 45px; padding-top: 5px; top: 0px; left: 0px; font-size: 1.5em; display: block;}
.SubMenuItem.HasSubMenu > a.active:after {content: '-'; padding-top: 0px;}
.Show {display: block;}
.Hide {display: none;}
}
