/********************************************
*										    *
* Font replacement						    *
*											*
********************************************/

.fonts-loaded header#top #nav-top, .fonts-loaded #nav-top ul li a { 
	font-family: 'Eidetic Modern';	
}

.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
	border: none;
}

/********************************************
*										    *
* Search								    *
*											*
********************************************/

/* Make the search bar itself green and 100%. Then, make the input box seem
   as though it isn't there. */
.nav-search {
	background-color: #234131;
	width: 100%;
}

.nav-search input {
	padding: 20px;
	background: none;
	width: 100%;
	border: 0;
	outline: 0;
	color: #fff8ee;
	font-size: 25px;
	line-height: 32px;
}

/* Make the search placeholder a different color. */
.nav-search input::-webkit-input-placeholder {
   color: #fff8ee;
}
.nav-search input:-moz-placeholder { /* Firefox 18- */
   color: #fff8ee;
}
.nav-search input::-moz-placeholder {  /* Firefox 19+ */
   color: #fff8ee;
}
.nav-search input:-ms-input-placeholder {  
   color: #fff8ee;
}

/********************************************
*										    *
* Phone and table nav header			    *
*											*
********************************************/

/* desktop menu width fix */
@media screen and (min-width: 992px) and (max-width: 1200px)  {
.nav > li > a {
    padding: 12px 13px !important;
	}
}

@media screen and (max-width: 991px) {
#nav-top > div.container.nav-container > nav {
    position: relative;
    display: none;
	margin-left: -15px;
	margin-right: -15px;
	}

#nav-top > div.container.nav-container {
	margin-left:-15px !important;
	margin-right:-15px !important;
	}


@media screen and (min-width: 768px) and (max-width: 991px) {
	
.dropdown-menu {
        min-width: 100% !important;
		position: static;
		margin-bottom: 15px;
	}
}
}


@media (min-width: 100px) {
.navbar {
    border-radius: 0px !important;
	}
}

@media screen and (max-width: 991px) {
	
	/* Hide the constituency menu when the navigation is collapsed. */
	#nav-top {
		margin: 0 !important;
		width: 100% !important;
	}
	
	/* This makes it so that it isn't white on certain break points. */
	#top {
		background: #00583D !important;
	}
	.header {
		border-top: 7px solid #fec33b !important;
	}	
	/* This makes sure the navbars fill the screen and don't have a green border. */
   	.nav-container {
        width: 100% !important;
    }
	
	/* Set a height and background color. Get rid of padding and other things we don't need. */
	#top .navbar-header {
		background: #00583D !important;
		height: 55px !important;
		margin: 0 !important;
		padding: 0 !important;	
	}
	
	/* Reset the size. Otherwise, Bootstrap's default min-height kicks in and things look fugly. */
	#top #nav-top.navbar {
		min-height: 0 !important;
		border: 0 !important;
	}
	
	/* Adjust padding around the logo container */
	#top .navbar-brand {
		padding: 8px 8px 10px 0 !important;
	}
	
	/* Add padding around the logo on tablet and phone. */
	#top .navbar-brand img {
		padding-left: 0px !important;
	}
	
	/* Menu button */
	#top button .icon-bar {
		background-color: #fff !important;
	}
	
	/* Search button */
	#top button .glyphicon-search {
		color: #fff !important;
	}
	
	/* Override default bootstrap for search and menu buttons */
	#top button {
		border: 0 !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 20px 0 20px !important;
		border-radius: 0 !important;
	}
	
	/* Hover for search and menu buttons */
	#top button:hover,
	#top button:active,
	#top button:focus,
		#top .active {
		background-color: #234131 !important;
	}
	
	/********************************************
	*										    *
	* Phone and table nav header - SEARCH	    *
	*											*
	********************************************/
	
	#nav-top ul li.search { display: none !important; }
	
	/********************************************
	*										    *
	* Phone and table nav header - MENUS	    *
	*											*
	********************************************/
	
	.navbar-collapse {
		background: #fff8ee !important;
	}
	
	.navbar-collapse ul.navbar-nav {
		margin-top: 0 !important;
	}
	
	.navbar-collapse ul.navbar-nav > li > a {
		border-bottom: 1px solid #ccc !important;
		padding-top: 20px !important;
		padding-left: 20px !important;
		padding-bottom: 15px !important;	
		font-size: 18px !important;
	}
	
	.navbar-collapse ul.navbar-nav > li > a .caret {
		float: right !important;
		margin-right: 10px;
	}
	
	.navbar-collapse ul.navbar-nav li.divider {
		display: none !important;
	}


	#top > div > div.navbar-collapse.collapse.in > nav > ul > li > ul > li.active > a {
			background-color: #fec33b !important;
	}


	/********************************************
	*										    *
	* Phone and table nav header - SUBMENUS	    *
	*											*
	********************************************/
	
	/* Set the background color of the dropdown menu items,
	   and put some spacing around them so they don't look bad. */
	.navbar-collapse ul.navbar-nav > li > .dropdown-menu {
		background-color: #eee !important;		
		padding-bottom: 0 !important;
		padding-top: 0 !important;
	}
	
	/* Adjust the spacing, font sizes, border, and padding. The !important is
	   necessary to override a few Bootstrap defaults. */
	.navbar-collapse ul.navbar-nav > li > .dropdown-menu > li > a {
		font-size: 14px !important;
		padding-top: 8px !important;
		padding-left: 30px !important;
		border-bottom: 1px solid #ccc !important;
	}
	
	/* Manages the line between the top-level item and the submenu. */	
	.navbar-collapse .open>a, .kc-navbar-collapse .open>a:hover, .kc-navbar-collapse .open>a:focus {
		border-bottom: 1px solid #ccc !important;
	}
		
	/********************************************
	*										    *
	* Phone and table nav header - CONSTITUENCY *
	*											*
	********************************************/
	
	#nav-top ul li a {
		font-family: arial !important; /* This override to EidecticModern. */
		color: black !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		line-height: 30px !important;
		border: none !important;
		font-size: 18px !important;
	}
	
	#nav-top ul li a:hover,
	#nav-top ul li a:active,
	#nav-top ul li a:focus {
		background: none;
		color: #EA9A23 !important;
	}	
}

/********************************************
*										    *
* Constituency Menu						    *
*											*
********************************************/

@media (min-width: 992px) {
	/* Set width, color, fonts, etc., etc. */
	#nav-top {
		width: 100% !important;
		background: #00654e !important;
		z-index: 0 !important;
		border: none;		
		letter-spacing: 1px !important;
		font-family: arial; /* This gets overriden to Eidetic Modern. */
		font-size: 13px !important;
		margin-bottom: 0 !important;
		border-bottom: 1px solid #9c9a9b !important;
	}
		
	/* Make a few modifications to the typography and such. */
	#nav-top .navbar-nav > li > a {
		padding-top: 10px !important; 
		padding-bottom: 10px !important;
		text-transform: uppercase !important;
		color: #fff !important;
		font-size: 80% !important;
	}
	
	/* Nice hover effect on the constituency menu. */
	#nav-top .navbar-nav > li > a:hover,
	#nav-top .navbar-nav > li > a:active,
	#nav-top .navbar-nav > li > a:focus,
	#nav-top .active {
		background-color: #234131 !important;
	}
	
	/* Adjust the spacing so it looks nice and vertically centered. */
	#nav-top.navbar {
		min-height: 20px !important;
		margin-top: -10px;
	}
}



/********************************************
*										    *
* Brand and main navigation				    *
*											*
********************************************/

/* Set colors for the menus and dropdowns on all resolutions. */
#nav-brand .navbar-nav a { color: #00654e !important; }
#nav-brand .navbar-nav li ul li a { color: #000 !important; }
.navbar-default .navbar-nav > li > a { color: #00654e !important; }


/* Make Navigation Toggle on Desktop Hover */
@media only screen and (min-width : 992px) {
    .dropdown:hover .dropdown-menu {
        display: block !important;
    }
}

/* Main navigation styles for anything but mobile. */

@media (min-width: 992px) {
	
	/* Add the cream color and the brand arc, 
	   also set font colors and sizes for the large menu. */
	
	#nav-brand { 
		padding-top: 20px !important; 
		padding-bottom: 20px !important; 
		border: none !important; 
		background-color: #fffcf9 !important;
		/* background-image: url('../img/top-arc.png'); */
		background-position: bottom left !important;
		background-repeat: no-repeat !important;
		font-size: 18px !important;
		color: #FFF2DA !important;	
	}
	
	#nav-brand { 
		padding-top: 20px !important; 
		padding-bottom: 20px !important; 
		border: none !important; 
		background-color: #fffcf9 !important;
		/* background-image: url('../img/top-arc.png'); */
		background-position: bottom left !important;
		background-repeat: no-repeat !important;
		font-size: 18px !important;
		color: #FFF2DA !important;	
	    box-shadow: 3px 3px 20px #ccc !important; 
		border-top: 7px solid #fec33b !important;
		border-bottom: 1px solid #c9c6c1 !important;
	}
	
	#nav-brand .caret{
		border-top: 4px solid #dfd8d0 !important;
	}
	
	/* Bring the logo down a little bit, and add spacing to the side.
	   This also adds the bar on the right of the logo.  */
	#nav-brand .navbar-brand {
		border-right: 1px solid #a09993 !important;
		padding-top: 20px !important;
		padding-left: 0 !important;
		padding-right: 45px !important;
		margin-right: 45px !important;
		height: 90px !important;
	}	
	
	/* Adjust vertical alignment of the main navbar. */
	#nav-brand .navbar-nav {
		margin-top: 20px !important;
		float:left !important;
	}
	
	/* Make the main hover buttons drop. */
	#nav-brand .navbar-nav li:hover > a,
	#nav-brand .navbar-nav li:active > a,
	#nav-brand .navbar-nav li:focus > a,
	#nav-brand .navbar-nav li > a:focus {
		border-radius: 10px !important;
		border-radius: 0 !important;
		background: none !important;
		/*border-top: 3px solid #00654e;
		margin-top: 3px;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;*/
		background-color: rgba(255,255,255,0.4);
	}
		
	/* Adjust spacing on the dropdown menus. */	
 	#nav-brand .navbar-nav li > ul li a {
 	   line-height: 15px !important;
	   padding-top: 8px !important;
	   padding-left: 15px !important;
	   padding-bottom: 5px !important;
	   padding-right: 15px !important;
	   font-size: 14px !important;
	}

	/* Adjust spacing on the dropdown menus. */	
 	#nav-brand .navbar-nav li > ul li a {
 	   line-height: 15px !important;
	   padding-top: 8px !important;
	   padding-left: 15px !important;
	   padding-bottom: 5px !important;
	   padding-right: 15px !important;
	   font-size: 14px !important;
	}

	/* Override main menu border radius so the dropdowns don't have rounded edges. */
 	#nav-brand .navbar-nav li > ul li a:hover {
	   border-radius: 0px !important;
	}
}	

/********************************************
*										    *
* Brand and main navigation WIDTH ADJUST	*
*											*
********************************************/

/* Medium size views */
@media (min-width: 992px) and (max-width: 1200px) {

	/* This reduces the height of the top menu, and also makes some 
	   adjustments to the background. */
	header#top #nav-brand { 
		padding-top: 10px !important; 
		padding-bottom: 10px !important; 
		background-position: 300px 0 !important;
		background-repeat: no-repeat !important;
		font-size: 14px !important;
		color: #FFF2DA !important;	
	}
	
	/* Adjusts positioning of the logo */
	#nav-brand .navbar-brand {	
		height: 80px !important;
		padding-right: 38px !important;
		margin-right: 38px !important;
		margin-top: 0 !important;
	}	
	
	/* Adjusts positioning and spacing of the main navbar */
	 #nav-brand .navbar-nav {
		 margin-top: 0px !important;
		 padding-top: 10px !important;
	 }

	 #nav-brand .navbar-nav li > a {
		 line-height: 20px !important;
		 padding-bottom: 10px !important;
		 margin-top: 5px !important;
	 }
	 
	 /* Adjust font size on dropdowns */
	 #nav-brand .navbar-nav li > ul li a {
		 line-height: 9px !important;
		 font-size: 11px !important;
	 }
	
}

/********************************************
*										    *
* Secondary navigation styles				*
*											*
********************************************/

/* Give us a little bit more room... */
section.body .nav-secondary nav,
section.body .responsive-menu.menu-toggled {
	margin: 0 !important;
	padding: 0 !important;
}

/* Reset spacing and bulleting. Also, make sure we have enough room
   on the bottom of the list in case we put something else in that sidebar...  */
.nav-secondary ul  {
	padding-bottom: 20px !important;
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}
   
.responsive-menu ul  {
	padding-bottom: 20px !important;
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0px !important;
	margin-top: -20px !important;
}

.responsive-menu li a {
	display: block !important;
    border-bottom: 1px solid #ccc;
	padding: 5px 0 15px 0 !important;
}

/* Add lines, spacing, etc. */
.responsive-menu  ul li {
	margin-left: 0 !important;
	margin-right: 20px !important;
}

.nav-secondary ul li{
	margin-left: 0 !important;
	border-bottom: 1px solid #ccc !important;
	margin-right: 20px !important;
}


.responsive-menu li li, .responsive-menu.inline li li {
	display: block !important;
	padding: 20px 20px 0px 0px !important;

}

/* Adjust the color and font size of the links and link hovers. */
.responsive-menu.menu-toggled  ul li a {
	display: block !important;
	color: #000 !important;
	margin: 0px !important;
	border-bottom: 0px solid #ccc;
	padding: 10px 0 15px 0 !important;
}
.nav-secondary ul li a{
	display: block !important;
	color: #000 !important;
	font-size: 15px !important;
	margin: 0px !important;
	padding: 5px 0 5px 0 !important;
}

.nav-secondary ul li a:hover,
.nav-secondary ul li a:active,
.nav-secondary ul li a:focus,
.responsive-menu.menu-toggled ul li a:hover,
.responsive-menu.menu-toggled ul li a:active,
.responsive-menu.menu-toggled ul li a:focus {
	text-decoration: none !important;
	color: #EA9A23 !important;
	background: none !important;
}

/* Set styles for the section header on the secondary nav. */

.nav-secondary h2,
.responsive-menu.menu-toggled h2  {
	border-bottom: 3px solid #ccc !important;
	font-size: 16px !important;
	text-transform: uppercase !important;
	margin-bottom: 15px !important;
	padding: 5px 0 10px 0 !important;
}

.nav-secondary ul li.header a,
.responsive-menu.menu-toggled ul li.header a {
	color: #00583D !important;
}

/********************************************
*										    *
* Secondary navigation styles - MOBILE		*
*											*
********************************************/

/* Secondary nav links on phone and tablet */
@media (max-width: 991px) {
	
	/* Make sure we have spacing on the bottom between the menu bar
	   and the content */
	.nav-secondary {
		margin-bottom: 30px !important;
	}
	
	/* Set the background of the full-width .secondary-nav element */
	.secondary-nav {
		background: black !important;
		color: white !important;
	}
	
	/* Make the button look nice... */
	.navbar-secondary-header .navbar-toggle {
		float: none !important;
		width: 100% !important;
		border: 0 !important;
		text-align: left !important;
		font-size: 18px !important;
		margin: 3px !important;
		border-radius: 0 !important;
	}

	/*  This floats the text next to the icon and gives some spacing. */
	.navbar-secondary-header .menu-button {
		float: left !important; 
		margin-top: 6px !important; 
		margin-right: 10px !important; 
	}
	
	/* Make the icons white */
	.navbar-secondary-header .icon-bar {
		background: #fff !important;
	}

	/* Hover effects for those who are playing with responsive on desktop. */
	.navbar-secondary-header .navbar-toggle:hover,
	.navbar-secondary-header .navbar-toggle:active,
	.navbar-secondary-header .navbar-toggle:focus {
		background: none !important;
		color: #EA9A23 !important;
	}
	.navbar-secondary-header .navbar-toggle:hover .icon-bar,
	.navbar-secondary-header .navbar-toggle:active .icon-bar,
	.navbar-secondary-header .navbar-toggle:focus .icon-bar {
		background-color: #EA9A23 !important;
		
	}
	
	/* Adjust this so that the dropdown hangs under the button */
	.nav-secondary {
		margin-top: -31px !important;
		padding: 0;
	}
	
	/* Border the dropdown */
	.nav-secondary ul  {
		border: 2px solid #333 !important;
		background: #f3f3f3 !important;
		border-top: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		border-bottom-left-radius: 10px !important;
		border-bottom-right-radius: 10px !important;
	}
	
	/* Hide the header element since we put it elsewhere in markup on mobile. */
	.nav-secondary ul li.header {
		display: none !important;
	} 

	/* Get rid of the bottom border, because that's on on the ul border.
	   If we get rid of the bottom border on the UL, things don't look right because
	   the dropdown border is 2px, and the li border is only 1. */
	.nav-secondary ul li:last-child {
		border-bottom: 0 !important; 
	}
	
	/* Make the links look nice. These might seem a little taller than is practical,
	   but it's important to have decent-sized tap targets. */
	.nav-secondary ul li a {
		display: block !important;
		padding: 5px 20px 5px 20px !important;
		width: 100% !important;
		line-height: normal !important;
	}
}
.region-mobilesubmenu {
	margin-top:-40px !important
}