/***************************************
GREEN MENU STYLESHEET

Styles the green menus on several pages
Documentation: https://docs.google.com/document/d/19bnt20NT5ixAWD4CKtM1uOTW8-YyM6wjBoJGt0jLx_I/edit#heading=h.7fy4n7ta1v53

***************************************/

div.green-menu {
	display: block;
	position: relative;
	width: 250px;
}

div.green-menu ul {
	width: 100%;
	list-style: none;
	padding: 0;
}

div.green-menu li {
	margin: 5px auto;
}

div.green-menu a {
	display: block;
	z-index: 10000;
}

div.green-menu ul li.list-header,
div.green-menu ul li.list-header-alt {
	display: block;
	width: 100%;
	background-color: #a0c963;
}

div.green-menu ul li.list-header-coral-alt {
	display: block;
	width: 100%;
	background-color: #e73922;
}

div.green-menu ul li.list-header-alt a,
div.green-menu ul li.list-header > a,
div.green-menu ul li.list-header > a:link,
div.green-menu ul li.list-header > a:visited,
div.green-menu ul li.list-header-coral-alt > a,
div.green-menu ul li.list-header-coral-alt > a:link,
div.green-menu ul li.list-header-coral-alt > a:visited {
	color: white;
	padding: 15px;
	font-weight: bold;
	display: inline-block;
}

li .toggle {
	color: white;
	padding: 15px 5px;
}

div.green-menu ul.sub-menu {
	padding: 0;
	background-color: white;
	display: none;
}

div.green-menu ul.sub-menu li {
	border-bottom: 1px dashed #ccc;
}

div.green-menu ul.sub-menu li:last-child {
	border-bottom: none;
}

div.green-menu ul.sub-menu li > a {
	width: 100%;
	color: #999;
	padding: 15px;
	font-weight: bold;
}

div.green-menu ul.sub-menu li.current_page_item > a {
	color: #333;
}

div.green-menu ul li.list-header.mobile {
	display: none;
}

/********************************************

              MEDIA QUERIES
********************************************/
/*Tablets*/
@media only screen and (max-width: 979px) {
	div.green-menu {
		width: 100%;
	}

	li.menu-header > i {
		display: none;
	}

	div.green-menu ul li.menu-header {
		width: 30%;
		color: white;
	}

	div.green-menu {
		display: block;
	}

	div.green-menu ul li.list-header.mobile {
		display: block;
		margin-left: -20px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	div.green-menu ul li.list-header:not(first-child),
	div.green-menu ul li.list-header-coral-alt,
	div.green-menu ul li.list-header-alt {
		display: none;
	}

	div.green-menu a:link {
		display: inline-block;
	}
}

@media only screen and (max-width: 767px) {
	div.green-menu ul li.list-header:first-child {
		display: block;
		width: 30%;
	}

	div.green-menu ul li.list-header:not(first-child) {
		display: none;
	}

	li.menu-header {
		width: 30%;
	}
}

div.sosHR,
hr.sosHR {
	border: 0;
	border-bottom: 1px dashed #ccc;
	width: 100%;
	height: 1px;
}

div.sosHR {
	float: left;
	margin: 20px auto;
}