/*
==============================================================================
**
** NAV
**
** SCOPE: 		GLOBAL
** REVISION:	0.1
** DATE:		03/25/11
** AUTHORS:		DUNCAN MCALESTER (DUNCAN@LAYER-51.COM)

** USAGE:

** NOTES:

** TODO:

** REVISION HISTORY
------------------------------------------------------------------------------






==============================================================================
*/
/* ==================== REQUIRED LIBRARIES DO NOT REMOVE ===================== */
/* Including lib.less - this template is intentionally left blank and does not need to be included  on the live server */
/* =========================================================================== */
#main-nav {
  position: relative;
  z-index: 1000;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: visible;
  /* This is for mobile main menu */

}
#main-nav h1 {
  display: none;
}
#main-nav ul#results li {
  margin: 0 0 0 20px;
}
#main-nav > ul {
  position: relative;
  float: right;
  overflow: visible;
  margin: 2.75em 0 0 0;
  padding: 0;
  text-transform: uppercase;
}
#main-nav > ul > li {
  position: static;
  font-family: PTSansNarrowRegular, sans-serif;
  font-size: 1.15em;
  line-height: 1.2;
  padding: 0;
  float: left;
}
#main-nav > ul > li a {
  display: block;
  padding: 1em 1.25em .75em 1.5em;
  color: #3c4f59;
  height: auto;
  text-decoration: none !important;
}
#main-nav > ul > li:hover {
  background: #1784b6;
}
#main-nav > ul > li:hover a {
  color: #fff !important;
}
#main-nav li > .sub {
  position: absolute;
  background: #1784b6;
  overflow: hidden;
  opacity: 0;
  visibility: collapse;
  display: none;
  height: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  margin: 0;
  text-align: left;
  padding: 0;
  -webkit-transition: height ease-out 0.133s;
  -moz-transition: height ease-out 0.133s;
  -o-transition: height ease-out 0.133s;
  transition: height ease-out 0.133s;
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.13);
  -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.13);
  -o-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.13);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.13);
}
#main-nav li > .sub ul {
  width: 25%;
  float: left;
  padding: 0;
  margin: 1.5em 0 1.5em 1.5em;
}
#main-nav li > .sub ul li {
  margin: 0 0 0 0;
  padding: 0;
}
#main-nav li > .sub ul li a {
  padding: .55em .55em .15em .55em;
  color: #fff !important;
}
#main-nav li > .sub ul li a:hover {
  background: #1b9bd6;
}
#main-nav li > .sub .snippet {
  border-left: 1px solid rgba(255, 255, 255, 0.33);
  font-family: sans-serif;
  color: #fff;
  color: rgba(255, 255, 255, 0.7);
  text-transform: none;
  padding: 0 3em 0 1.5em;
  margin: 2.5em 0 1.5em 0;
  width: 60%;
  float: right;
  font-size: .8rem;
}
#main-nav li > .sub .snippet p {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  color: #fff;
  color: rgba(255, 255, 255, 0.7);
  text-transform: none;
  font-size: .8rem;
}
#main-nav li > .sub .snippet p + p {
  margin-top: 1em;
}
#main-nav li:hover > .sub {
  display: block;
  opacity: 1;
  visibility: visible;
  height: auto;
  padding: 0;
}
/* Special Layout for Contact */
/* Special Layout for Services using discrete <dl> similar to Coons

Uncomment this and comment out the other #mn5 just below
#mn5 {
	.sub {

		padding-bottom: 1.5em !important;

		dl {
			//padding: .55em 0 .15em 1.55em;
			width: 29.5% !important;
			float: left;}

		dt, dd {
			margin: 0;
			padding: 0;
			padding-top:	7.7px;
			padding-right:	7.7px;
			padding-bottom:	2.1px;
			padding-left:	7.7px;
			width: 100%;  }

		dt:hover, dd:hover,
		dt:hover+dd, dd:hover+dt {
			background: lighten(@link-color,7%);}

		a {
			padding: 0; }

		dt {
			margin: 1em 0 0 0;
			display: block;
			a {
				color: #fff !important; } }

		dd {
			display: block;
			height: 4.5em;
			overflow: hidden;

			font-family:	sans-serif;
			font-size: .8255em;
			color: #fff;

			color: rgba(255,255,255,.7);
			text-transform: none;
			}
	}
}
*/
#mn5 .sub,
.multiple-descriptions .sub {
  padding-bottom: 1em !important;
}
#mn5 .sub ul,
.multiple-descriptions .sub ul {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
#mn5 .sub li,
.multiple-descriptions .sub li {
  padding: 1% 1% 1.5% 1% !important;
  width: 28%;
  height: 5em;
  margin: 1em 0 0 3% !important;
  float: left;
}
#mn5 .sub li a,
.multiple-descriptions .sub li a {
  font-size: 1em;
  height: auto !important;
  margin: 0;
}
#mn5 .sub li:hover,
.multiple-descriptions .sub li:hover {
  background: #1b9bd6;
}
#mn5 .sub .snippet,
.multiple-descriptions .sub .snippet {
  margin: 0 !important;
  padding: 0 !important;
  float: none;
  clear: both;
  width: 100% !important;
  border: none !important;
}
#main-nav > ul > li.no-descriptions {
  position: relative;
}
#main-nav > ul > li.no-descriptions .sub {
  width: 200px !important;
}
#main-nav > ul > li.no-descriptions .sub ul {
  width: 90% !important;
}
#main-nav > ul > li.no-descriptions .sub ul li {
  width: 90% !important;
}
/* Special Layout for Priorities */
#mn4 .sub form,
.render-include .sub form {
  margin-top: 1em;
  border-bottom: 1px solid #0e5372;
}
#mn4 .sub label,
.render-include .sub label {
  color: #fff;
  margin: 0 0 1em 0;
}
#mn4 .sub fieldset,
.render-include .sub fieldset {
  padding: 1em 3.5% 3.5% 3.5%;
  background: none !important;
  margin: 0;
}
#mn4 .sub input[type="text"],
.render-include .sub input[type="text"] {
  width: 100%;
  float: left;
}
#mn4 .sub .button,
.render-include .sub .button,
#mn4 .sub #search_issues_go,
.render-include .sub #search_issues_go {
  padding: .8em .5em .7em .5em !important;
  float: right;
  background: white;
  color: #1784b6 !important;
  font-family: PTSansNarrowBold, sans-serif;
  width: 7%;
}
#mn4 .sub .col,
.render-include .sub .col {
  padding: 1% 1% 0 1% !important;
  width: 28% !important;
  margin: 1em 0 1.5em 3% !important;
  float: left;
  /*
			margin: 0 !important;
			padding: 0 !important;
			width: 100% !important;
			*/
}
#mn4 .sub li,
.render-include .sub li {
  /*
			padding: 1% 1% 0 1% !important;
			width: 28%;
			border: 1px solid red;
			margin: 1em 0 0 3% !important;
			float: left;
		*/
}
#mn4 .sub .issue-lookup-label,
.render-include .sub .issue-lookup-label {
  color: #fff;
}
#mn4 .sub #static-issue-list,
.render-include .sub #static-issue-list {
  padding-bottom: 1.5em !important;
  width: 100% !important;
}
#mn4 .sub #static-issue-list li,
.render-include .sub #static-issue-list li {
  margin-right: 3%;
  width: 98%;
  float: left !important;
}
/*

.ie7 .wide .sub {
	position: 					absolute !important;
	top: 						55px !important;
	left: 						0;

	input[type="text"] {
		width:					88%; }}

*/
#results {
  background: #136d96;
  margin: 0 !important;
  padding: 0 0 0 0;
  width: 100% !important;
}
#results ul {
  padding-left: 0;
}
#results li {
  width: 100% !important;
  border-bottom: 1px solid #10597b;
  clear: both;
  padding: .55em !important;
  overflow: auto;
  color: #fff;
  color: rgba(255, 255, 255, 0.99);
  /* this is a fix for Chrome which for some reason seems to freak out with hex values or rgb*/

}
#results li:hover {
  background: #1b9bd6;
}
#results a {
  padding: 0 !important;
  display: block !important;
  text-transform: none;
}
#results h3 {
  padding: 0;
  font-size: 1.6em !important;
}
#results li:last-child {
  margin-bottom: 0;
}
#results img {
  float: left;
  padding: 0;
  margin: .25em 0 0 .55em;
  overflow: auto;
}
#results .result-text {
  float: left;
  width: 70%;
  margin-left: 1em;
  overflow: auto;
}
#results .no-img .result-text {
  width: 90%;
}
#results p {
  color: #fff;
}
#results p a {
  padding: 0;
  color: #fff;
}
#main-nav .selected,
#main-nav #contact #mn1,
#main-nav #about #mn2,
#main-nav #newsroom #mn3,
#main-nav #issues #mn4,
#main-nav #services #mn5,
#main-nav #state #mn6 {
  background: #1784b6;
}
#main-nav .selected a,
#main-nav #contact #mn1 a,
#main-nav #about #mn2 a,
#main-nav #newsroom #mn3 a,
#main-nav #issues #mn4 a,
#main-nav #services #mn5 a,
#main-nav #state #mn6 a,
#main-nav .selected a:link,
#main-nav #contact #mn1 a:link,
#main-nav #about #mn2 a:link,
#main-nav #newsroom #mn3 a:link,
#main-nav #issues #mn4 a:link,
#main-nav #services #mn5 a:link,
#main-nav #state #mn6 a:link {
  color: #fff !important;
}
/*
** 900
**
** DESCRIPTION:	Styles that apply to screens 900 pixels wide and down
** USAGE:
** NOTES: Typically this means tablets users in portrait mode and desktop users smaller than average screens
**
*/
@media only screen and (max-width: 900px) {
  #main-nav ul li {
    font-size: 1em;
  }
}
/*
** 768
**
** DESCRIPTION:	Styles that apply to screens 768 pixels wide and down
** USAGE:
** NOTES: Edge case for nav/masthead collision
**
*/
@media only screen and (max-width: 768px) {
  #main-nav {
    top: 70px;
  }
  #main-nav > ul {
    clear: both;
    float: none;
  }
}
/*
** 480
**
** DESCRIPTION:	Styles that apply to screens 480 and bellows pixels wide and down
** USAGE:
** NOTES: Typically this means mobile phones held in portrait
**
*/
@media only screen and (max-width: 600px) {
  #main-nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background: #1784b6;
    width: 100%;
    -webkit-transform: translate3d(0, 0, 0);
  }
  #main-nav h1 {
    margin: 0;
    width: 100%;
    font-size: 1.231em;
    text-align: center;
    display: block;
    text-index: 0;
    font-family: PTSansNarrowRegular, sans-serif;
    text-transform: uppercase;
    border-bottom: 1px solid #5ca8cb;
  }
  #main-nav h1 a {
    display: block;
    padding: .9em 0;
    color: #fff !important;
  }
  #main-nav h1 a:hover {
    text-decoration: none;
    background: none;
  }
  #main-nav ul {
    display: block;
    margin: 0;
    position: absolute;
    background: #1784b6 !important;
    overflow: hidden;
    height: 0;
    width: 100%;
    border-left: none;
    border-right: none;
  }
  #main-nav ul li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: relative;
    text-transform: none;
    font-size: 1.1em;
    padding: .25em 1em 1em 1em !important;
    margin: 0;
    height: 54px;
    width: 50% !important;
    float: left;
    text-align: center;
    text-shadow: none;
    text-transform: uppercase;
    border: none;
    border-bottom: 1px solid  #5ca8cb;
  }
  #main-nav ul li a {
    color: #fff;
  }
  #main-nav ul li:nth-child(odd) {
    border-right: 1px solid  #5ca8cb;
  }
  #main-nav ul .sub {
    display: none !important;
  }
  .mshadow {
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.43);
    -o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.43);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.43);
  }
}
.ie7 .sub,
.ie7 li:hover > .sub {
  display: none !important;
}