﻿<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">
<style>

body { 
  -webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

.menuwrapper {
    text-align: -webkit-left;
	 background: #f1f3f3;
    height: 50px;
    border-bottom: 2px solid #bbd3aa;
	 /* border-bottom: 2px solid #F0C975; Yellow Line */
}

.guidance-index-mobile {
	margin-top: 15px;
}

input[type="checkbox"]#togglebox {
  /* checkbox used to toggle menu state */
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

label#navtoggler {  /* Main label icon to toggle menu state */
	z-index: 9;
    display: block;
    position: relative;
    font-size: 8px;
    width: 4em;
    height: 2.5em;
    top: 14px;
    left: 27px;
    margin-bottom: 6px;
    /*text-indent: -1000px;*/
    border: 0.6em solid #335a1f;
    border-width: 0.6em 0;
    cursor: pointer;
}


label#navtoggler::before {
  /* inner strip inside label */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0.5em;
  top: 50%;
  margin-top: -0.3em;
  left: 0;
  background: #335a1f; /* stripes background color. Change to match border color of parent label above */
}

label#navtoggler::after { /* text description */
    content: 'Plan Menu';
    font-size: 24px;
    font-weight: bold;
    color: #457826;
    position: absolute;
    left: 44px;
    top: -13px;
    white-space: nowrap;
}



nav#expand-fullpagemenu{ /* Full screen nav menu */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  -webkit-transform: scale(0.9);  /* initially scale down nav size */
  transform: scale(0.9);
  background: #ebeded;
  display: block;
  position: fixed;
	z-index: 100;
  opacity: 0;
	text-align: center;
	overflow: auto;
  -moz-transition: visibility 0s 0.5s, opacity 0.5s, -moz-transform 0.5s; /* transition settings */
  -webkit-transition: visibility 0s 0.5s, opacity 0.5s, -webkit-transform 0.5s;
  transition: visibility 0s 0.5s, opacity 0.5s, transform 0.5s;
}

input[type="checkbox"]#togglebox:checked ~ nav#expand-fullpagemenu{ /* nav state when corresponding checkbox is checked */
	visibility: visible;
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
  -ms-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -transition-delay: 0s;
  z-index: 1001;
}

nav#expand-fullpagemenu label#closex{ /* Large x close button inside nav */
    font-family: 'Droid Sans', sans-serif, Arial;
    width: 40px;
    height: 40px;
    overflow: hidden;
    display: block;
    position: absolute;
    cursor: pointer;
    text-indent: -1000px;
    z-index: 10;
    top: 2px;
    right: 6px;
}

nav#expand-fullpagemenu label#closex::before, nav label#closex::after{ /* render large cross inside close button */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: black;
  top: 50%;
  margin-top: -3px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

nav#expand-fullpagemenu label#closex::after{ /* render large cross inside close button */
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

nav#expand-fullpagemenu a {
	text-decoration: none;
  /*color: #335a1f;*/
  color: #4d7e54;
  /* text-transform: uppercase; */
}

nav#expand-fullpagemenu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-height: 100%;
  top: 50%; /* center UL vertically inside nav */
  /* -webkit-transform: translateY(-50%); */ /* center UL vertically inside nav */
  /* transform: translateY(-50%); */
  font: bold 1em 'Bitter', sans-serif; /* use google font inside nav UL */
}

nav#expand-fullpagemenu ul li{
  margin-top: 5px; 
  line-height: 20px;
}

nav#expand-fullpagemenu ul li a{
  padding: 5px;
  border-radius: 4px;
}

nav#expand-fullpagemenu ul li a:hover{
  /*background: #d8dedf;*/
}

@media (min-width:892px) {
	.menuwrapper {
		display: none;
	}
}

@media (max-width:891px) {
	.menuDesktop {
		display: none;
	}
}
</style>

<script>

	// Extra function to control menu state from anywhere on your page/ inside your script
	function expandfullscreenmenu(action){ //param: 'open', 'close', or empty to toggle menu state
		var togglebox = document.getElementById("togglebox")
		var newstate =	(action == 'open')? true : (action == 'close')? false : !togglebox.checked
		togglebox.checked = newstate
	}

</script>

<!--[if lte IE 8]>

	<style>

	/* IE8 specific CSS */

	label#navtoggler{
	  border-width: 0.6em;
	}

nav#expand-fullpagemenu label#closex{
	font-size: 2em;
	text-indent: 0;
}

	#expand-fullpagemenu{
		visibility: hidden;
	}

	</style>

	<script>
	 // IE8 MENU COMPATIBILITY CODE:
	document.createElement("nav")

	function expandfullscreenmenu(action){
		var nav = document.getElementById("expand-fullpagemenu")
		var newstate =	(action == 'open')? 'visible' : (action == 'close')? 'hidden' : nav.style.visibility == 'hidden'? 'visible' : 'hidden'
		nav.style.visibility = newstate
	}

	window.attachEvent("onload", function(){
		document.getElementById("navtoggler").onclick = function(){
			expandfullscreenmenu('open')
		}
		document.getElementById("closex").onclick = function(){
			expandfullscreenmenu('close')
		}
	})
	
	</script>

<![endif]-->

