@charset "utf-8";
/* MDT Layout Styles */
/* 	Date Created:  10/23/2012
	Date in Prod:  1/6/2014 (first release)
	Date Modified: 1/28/2015 VisionZeroMT release 
	Date Modified:  4/1/2015 Add "TRANSFORMS" section and rotates
	Date Modified: 6/29/2017 Modify orange navigation to add Road & Bridge $ section - legislative mandate for fuel tax increase reporting
	Date Archived: 	
	Do not minify: Minify the production version only
*/
/*************************************************************************************************
	
	COLOR GUIDE						Test at https://webaim.org/resources/contrastchecker/)
									
	page background					white												
	aside, threeCol					Ultimate CSS gradient (see below) EDEDED - very light grey
	h1								333
	h1 link / hover					008FCC - blue / 333 - dark grey				
	mainNav, h2						BB3800 - red (old was D7500E - orange)				
	links / hover					007FFF - blue / 333 - dark grey
									Also tried: 
									  D75003 - orange-red 
									  008FCC blue (need more contrast)
									  006B99 - blue 
	mainNav, .darkFont				333333 - charcoal						
		
	Footer Colors - Sampled from Plan2Live logo
	footer a 						F39A32 - Plan2Live peach		
	footer background				0B3958 - Plan2live dark blue	
	footer link hover background 	749CB4	- Plan2live light blue	
	
*************************************************************************************************/

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

	AGENCY CONTENT 

*************************************************************************************************/
  #pagewrap {padding-top:6em;}
  #agencycontent { 
	background: none;
	border: none;
	position: relative;
	width:90%; min-width:320px; max-width:1140px;
	margin:0 auto;   
  }	
 
/*************************************************************************************************

	TYPOGRAPHY - See text.css   Available fonts saved in /common/styles/fonts/. 

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

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

	MDT HEADER

*************************************************************************************************/ 
  #agencyHead { 
	background: rgba(255,255,255,.25); /* IE fallback in responsive.css */
	height: 65px;
	position: relative;
	margin: 0; padding: 2em;
	overflow: hidden;	
  }
  #mdtLogo  {
	/* Hint: sprite available: top left = blue | bottom left = white | left -195px = black */ 	
	background:url(https://www.mdt.mt.gov/common/images/sprite-mdtLogos.png) left -195px no-repeat;
	position: absolute; top: 25px; left: 25px;
	margin: 0 0 1em; padding: 0; 		
	width: 200px; height: 55px; 
  }	
  #aboutMDT {
	margin:0; 
	position: absolute; top: 22px; left: 236px; 	
  }
  #aboutMDT ul {
	font-size: 1.5em; 
	text-transform: lowercase; 
	margin:0; padding:0;
	background-color: rgba(15,59,91,0.65);
	height:20px;
	vertical-align:middle;
	padding: .25em .5em;
  }
  #vzLogo  {
	background:url(https://mdtwwwdev.mdt.mt.gov/common/images/mdtlogos/VisionZero-horizontal-noMDT.png) left no-repeat;
	position: absolute; top: 15px; right: 25px;
	margin: 0 0 1em; padding: 0; 		
	width: 200px; height: 75px; 
  }	

  @media only screen and (max-width:980px) { 
	  #vzLogo {display:none;}
	  a #vzLogo {display:none;}
  }

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

	MDT MAIN NAV

*************************************************************************************************/ 
  a.skip {position:absolute; left:-999em;} /* so screen readers can skip */
  #mdtNav {background: #D7500E; min-height:42px;}
	#mdtNav h3 {position: absolute; left: -999em;} /* hidden but accessible */
	#mdtNav ul {margin:0; padding:0;}
	  #mdtNav li {
		font-size: 1.6em; 
		text-align: center;
		text-transform: uppercase; 
	  } 
	  #mdtNav a {
		border:none;
		color: #FFFFFF;  
		display:block;
		height: 42px; line-height: 48px;
		padding: .2em .8em;
		text-decoration: none;  
	  }
		#mdtNav a:hover, #mdtNav a:focus {
		  background-color: #333; 
		  color: #FFFFFF;
		  height: 42px; line-height: 48px;
		  padding: .2em .8em;
		}  
		a.short {display:none;} /* Display on small screens. Hide a.long. See responsive.css */  
/*Responsive Nav*/
  .nav-collapse ul {
	margin: 0;
	padding: 0;
	width: 100%;
	display: block;
	list-style: none;
  }
	.nav-collapse li {
	  width: 100%;
	  display: block;
	}
  .js .nav-collapse {
	clip: rect(0 0 0 0);
	max-height: 0;
	position: absolute;
	display: block;
	overflow: hidden;
	zoom: 1;
  }
  .nav-collapse.opened {max-height: 9999px;}
  .nav-toggle {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
  }
/* "About" Nav in Header */
  .selectnav { display: none}
  header select { 
  background-color:#D7500E;
  color:white; font-size:1.3em;
  /*-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;*/
  border:none;
  margin-bottom:1em; padding:.75em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width:200px;
  background: rgba(15,59,91,0.65) url("/common/images/br_down.png") no-repeat 175px center;
  padding-right:15px;
  }
  header select > option {font-size:1.3em;}
  #nav {
	  background: #2f2f2f;
	  background: rgba(255,255,255,.1);
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	  /* -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.8); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.8); box-shadow: 0 1px 2px rgba(0,0,0,.8);*/
  }  
/*************************************************************************************************

	MAINCONTENT LAYOUTS  - See also, "Containers (below)"
	
*************************************************************************************************/
  #mainContent {
	  background: white;
	  position: relative;
	  margin:0; padding: 3%;
	  clear:both;
  }
	#mainContent.noPadding  {padding:0;} /* If it's something you want to take up the full page width */ 
	#mainContent section, #mainContent article {border-bottom:1px dashed DarkGray;} /* Use .noBorder to remove */
	#mainContent section > article {border-bottom:none;}
	#mainContent section > section {border-bottom:none;} 
	#mainContent article > section {border-bottom:none;}
	#mainContent section:last-of-type, #mainContent article:last-of-type {border-bottom:none;}

  	aside figure, .twoColLeft figure, .twoColRight figure,  .threeCol figure {margin: 1em 0;}
  .fullPage {padding: 2em;}
  .twoColLeft, .twoColRight {overflow:hidden;}
	.twoColLeft aside {float:left; width:30%; padding:2%; padding-bottom:1000em; margin-bottom:-1000em;}
	  .twoColLeft article {float:right; width:61%; padding: 2%; padding-bottom:100em; margin-bottom:-100em;}
	.twoColRight aside {float:right; width:30%; padding:2%; padding-bottom:1000em; margin-bottom:-1000em; }
	  .twoColRight article {float:left; width:61%; padding:2%; padding-bottom:1000em; margin-bottom:-1000em; }	
  .threeCol {padding:0; overflow:hidden; clear:both;}
	.threeCol section.leftCol {float:left; width:27%; padding:2%; margin-right:3%; padding-bottom:1000em; margin-bottom:-1000em;}
	.threeCol section.centerCol {float:left; width:28%; padding:2%; margin-right:3%; padding-bottom:1000em; margin-bottom:-1000em;}
	.threeCol section.rightCol {float:left; width:27%; padding:2%; padding-bottom:1000em; margin-bottom:-1000em; }
 /* 50/50 Split */
	.halfA	{float: left; width: 46%; padding-bottom:1000em; margin-bottom:-1000em;}
	.halfB	{float: right; width: 46%; padding-left: 4%; border-left: 1px solid LightGray; padding-bottom:1000em; margin-bottom:-1000em;}


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

	CONTAINERS
	
*************************************************************************************************/
/* MDT Notice - appears below mainNav on every page. See: mdtHeader.inc for text output */
	.mdtNotice  {
			display:block;  /* Use display:block; to enable, display:none; to hide */
			height:300px;
			width:auto; height:100%;
			background:#333; background:rgba(0,0,0,.5); 
      }
        .mdtNotice h3, .mdtNotice p   {color:white; margin:1.5em 2em;}
			.mdtNotice h3 + p {margin-top:-1em;}
			.mdtNotice a {color:#ffffff;}
			.mdtNotice a:hover {color:#DFDFDF;}
		/*override #mainContent {top:-65px;} This is also done in responsive.css*/
		.mdtNotice + #mainContent {top:0!important;} 

@media only screen and (max-width:1137px) { 
	.mdtNotice {height:200px;}
  }

@media only screen and (max-width:600px) { 
	.mdtNotice {height:300px;}
  }
		
/* Announce - a colored box for announcements */
  .announce {
			background: #FAF5D4;
			margin:1.5em 0; padding:3%;
			font-size: 90%;
			/* border-top: 2px solid #ACACAC; border-bottom: 2px solid #ACACAC; font-size: 90%;  */			 
  }
	.announce *:first-child {margin-top:0; margin-bottom: -.25em;}
	 /* alt colors - apply to class stack to override default color */
	.bgWhite { background: white; }
	.bgBlack { background: black; }
	.bgGrey	{ background: #f5f5f5; }
	.bgPaleBlue { background-color: #D4E9F7;}
	.bgPaleGrey {
	  background: #F3F3F3;  /* same as gradientGrey EBE8E0 */
	  background: rgb(238,238,238); /* Old browsers */
	  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
	  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	  background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
	  background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
	  background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
	  background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
	  background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-8 */
	}  
/* Blockquote - an external quote with citation */
  blockquote {
	width: 32%; 
	margin: 2em auto; 
	padding: 5em; 
	background: #535353; 
	border-top-left-radius: 2em; 
	border-bottom-right-radius: 2em;
	color: #dcdcdc;
	line-height:150%;
  } 
  blockquote p {line-height:150%;}
	blockquote a {
		color: #dcdcdc; 
		text-decoration: underline;
	}
	blockquote a:hover {
		color:#fff; 
		text-decoration:none;
	}
	blockquote cite {
		display:block;
		margin:.5em 0;  
		text-align:right; 
		text-transform:uppercase; 
	}
	blockquote cite:before {content:'\0097';} /* an em dash */   
/* Pull Quote - a quote from the text. No citation needed. */
  .pullQuote {
	background: none;
	font: 1.3em 'DejaVuSerifItalic', Arial, sans-serif; color:#666;
	float: right; 
	width: 30%; min-width: 150px; max-width: 200px; 
	margin: 0 1em 1em; padding:0 1em ; 
  }
	.pullQuote p strong {font-family: 'DejaVuSerifBoldItalic', Arial, sans-serif; }
/* Contact container - a contact container for use with or without an image */
  .contact {
	  margin: 0 0 2em 0;
	  padding: 2em;
	  border: 1px solid #ccc;
	  border-radius: 1em;
	  font-size:95%;
	  
	  }
	.contact h3 {margin-top:.75em;}
	.contact p {margin-top: -.75em; } /* due to template.css styling */
	.contact img {
		/* Use 75x75-pixel image or no image, or use without an image */
		width:75px;
		border-radius: 1em;
		margin: 0 2em 2em 0;
	}	
/*3 column sections as "buttonlike" objects using MONTANA brand colors- as seen on DBE homepage*/
	.sectionButtons.leftCol a, .sectionButtons.centerCol a, .sectionButtons.rightCol a {color:#FFFFFF;}
	.sectionButtons.leftCol:hover, .sectionButtons.centerCol:hover, .sectionButtons.rightCol:hover {
		background-color:#F5F0DE; color:#6F9799;}
	.sectionButtons.leftCol:hover a, .sectionButtons.centerCol:hover a, .sectionButtons.rightCol:hover a {
		background-color:#F5F0DE; color:#6F9799;}
	.sectionButtons.leftCol:hover h3, .sectionButtons.centerCol:hover h3, .sectionButtons.rightCol:hover h3 {color:#000000;}	
	
/* Floating "Quick Links" Menu */
  .floatieMenuR {
	  float:right; width:200px;
	  margin-left:20px; margin-bottom:20px;
	  padding: 10px;
	  border-left: 5px solid #E0E0E0;
	  font-size:85%;
  }
  .floatieMenuL {
	  float:left; max-width:200px;
	  margin-right:20px; margin-bottom:20px;
	  padding: 10px;
	  border-right: 5px solid #E0E0E0;
	  font-size:85%;
  }
  /* Promo - You can stack promo sections on top of each other. If you like, use .noBorder to remove bottom borders between stacks */
  .promoContainer {width:100%; margin:2em 0; padding:3% 0;}
	.promoContainer:last-child {margin-bottom:0}
	.promo {position:relative; width:33%; float:left; background-position:0px .1em; }
	.promo .content {padding:0 30px 0 70px; }  /* sets text 20px to the right of the 50-pixel image */
	.promo h3 {margin:0 0 .5em; font-family:'DejaVuSansCondensedBold', Arial, sans-serif;}
	.promo p {font-size:1.4em; margin-bottom:.75em;}
	.promo img {position:absolute; top:0; left:0; width:50px;} /* promo images must be 50x50 */ 
  /* Homepage Feature Container */
  .homeFeature {background:#0B3958; padding-bottom:1em;}
	.homeFeature aside {padding:auto 0;}
	.homeFeature aside img {border-radius:0 2em;}
	.homeFeature article {color:white;}
	.homeFeature h1 {color:#369FBF; margin:0;}
	.homeFeature a, .homeFeature a:hover, .homeFeature a.cta {color:#09C;}

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

	MDT FOOTER
	
*************************************************************************************************/
  #mdtFooter {
	  position:relative; /* trigger hasLayout */
	  background: #0B3958;  /* dark blue */  
	  clear: both;
  }
	#mdtFooter section {
		border: none; 
		color: white; 
		margin:0; padding:0; 
		text-align: center;
		text-decoration: none;
	}
	#mdtFooter section a {
		color: #F39A32; /* Plan2Live orange */ 
		border: none;
	}
	#mdtFooter section a:hover {text-shadow: 0 0 12px #fff, 0 0 24px #fff;} /* glow */
	#mdtFooter section ul {margin:0; padding:0;}
	#mdtFooter li {	
		border-bottom: 2px solid rgba(255,255,255,.1);
		display: block;	
		font-size:1.2em; line-height:1.2em;
		width:100%;
	
	  }
	  #mdtFooter li:first-of-type {border-top:2px solid rgba(255,255,255,.1);}
	  #mdtFooter li:last-of-type {border:none;}
	  #mdtFooter li a {display:block; width:100%; height: 100%; padding: 1.5em 0;}
	  #mdtFooter section a:hover {color:white; text-decoration: none;}
	  #mdtFooter #toTop {position:absolute; top:1em; right:0; bottom:1em; border:none;}
	  #mdtFooter #plan2Live p {position:absolute; left:-999em;} /* hidden but still accessible */
	  #mdtFooter #plan2Live img {margin:2em auto 0;}
	  #mdtFooter #visionzero p {position:absolute; left:-999em;} /* hidden but still accessible */
	  #mdtFooter #visionzero img { max-width:250px; margin:2em auto 0; }
	  	@media (max-width:450px) { #mdtFooter #visionzero img { margin-top:45px; } }  /* room for Top image */
	  #mdtFooter #socialMedia {align:center;}

/*************************************************************************************************
	
	LINKS 

*************************************************************************************************/
  /* Top-of-page  */
  a.top { 
	display:block; 
	margin: 2em auto 0;
	font-size:1.3em; color:#999; 
	text-align:center; text-decoration:none; 
	clear:both; 
  }
	a.top:before, a.top:after {content: "\2014";}*/ /* an em dash */
	a:hover.top {color: #D75003; text-decoration: none; }	
  		.top:hover {text-decoration:none;}
	  @media only screen and (max-width:746px) {  
		  .top {
			  width:50px; height:50px; 
			  background: #eee; 
			  border-radius:5em;	
			  line-height:400%; 
		  
		  }
		  	a.top:before, a.top:after {content:none;}
			.top:hover {background:#ccc;}			  
	  } 
  /* Call-to-action */
  a.cta {
	  color: #BB3800;
	  text-transform: uppercase;
	  font-size: .9em;
	  font-weight:bold;
	  text-decoration:none;
	  border:none;
	  margin:.5em 0 0 0;
  }
	a.cta:after {
		display:inline-block;
		content: "\00BB";  /* a double arrow pointing right */
		margin-left:.5em;
		font-size: 1.25em;
	}
	a.cta:hover {text-decoration:none;}
	
	a.scrollTop {
		padding-right:.75em;
		padding-top: .5em;
	}
  	
/*************************************************************************************************

	LISTS
	
*************************************************************************************************/
  #mainContent ul, #mainContent ol, #mainContent dl {
	  font-size:1.4em;
	  line-height: 150%;
	  margin-bottom: 2em;	
	  list-style-position: outside;	
  }
  #agencycontent ul ul, #mainContent ul ol, #mainContent ul dl,
  #mainContent ol ul, #mainContent ol ol, #mainContent ol dl,
  #mainContent dl ul, #mainContent dl ol, #mainContent dl dl,
  #mainContent li ul, #mainContent li ol, #mainContent li dd,
  #mainContent dl *  {font-size: 100%;} /* maintains font size in nested lists - we may need to add to this */
  
  #mainContent ol ol ol li {list-style-type: lower-roman;}
  #mainContent aside ul, #mainContent aside ol, #mainContent aside dl, #mainContent aside ol.alpha {font-size:1.4em;}
  aside .noBullets, .threeCol .noBullets, 
  aside .inlinePipe, .threeCol .inlinePipe {margin: .75em; padding: 0;} /* reduce gap on the left of unbulleted lists */
  #mainContent aside ul ul li {font-size:.75em;}
	  #mainContent ul {list-style: square;}
	  #mainContent ol {list-style: decimal;}
		#mainContent ol.alpha {list-style: lower-alpha;}
		#mainContent ol ol li {list-style: lower-alpha;}
	  #mainContent li {margin-bottom:0.5em;} 
	/* No Bullets */
 		.noBullets li {list-style: none; list-style-image: none;} 
  /* Definition List */
  #mainContent dl {margin-left: 2.5em;}
  	#mainContent dt {font-family: 'DejaVuSansBold', Arial, sans-serif;}
	  #mainContent dd {
		font-size: inherit;
		line-height: 150%; 
		margin: .5em 0 1.5em 0;
	  }
	/* List Subheadings */
		.listSubhead {font-weight:bold; color:#BB3800; letter-spacing:1px;}  /* used on pages like /publications/forms.shtml */
	/* Inline list - Is this in use?  */
		  ul.inline { 
			  margin-left:0 !important; padding: 0 !important;
			  line-height: 160%;
		  }
			ul.inline li {
				display: inline; 
				margin-left: .5em; 
				font-size: 1.2em;
			}
	/* Quick Links - Ex. see Publications > Forms */
	  .quickLinks {padding-left:0;}
		  @media only screen and (max-width:746px) { .quickLinks {text-align:center;} }
	  .quickLinks li {
			display:inline-block;	
			
			background: rgb(249,249,249); /* Old browsers */
				/* IE9 SVG, needs conditional override of 'filter' to 'none' */
				background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlY2VjZWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
				background: -moz-linear-gradient(top,  rgba(249,249,249,1) 0%, rgba(236,236,236,1) 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(236,236,236,1))); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top,  rgba(249,249,249,1) 0%,rgba(236,236,236,1) 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top,  rgba(249,249,249,1) 0%,rgba(236,236,236,1) 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top,  rgba(249,249,249,1) 0%,rgba(236,236,236,1) 100%); /* IE10+ */
				background: linear-gradient(to bottom,  rgba(249,249,249,1) 0%,rgba(236,236,236,1) 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ececec',GradientType=0 ); /* IE6-8 */
						
			border:1px solid grey;		
			box-shadow: 2px 0px 6px rgba(0,0,0,.5);	
			padding:.5em; margin:0 .25em .5em 0;
		}
		.quickLinks li:nth-child(even) {
			-ms-transform: rotate(5deg); /* IE 9 */
			-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
			transform: rotate(5deg);		
		}
		.quickLinks li:hover {
			background:none; 
			-ms-transform: rotate(-1deg); /* IE 9 */
			-webkit-transform: rotate(-1deg); /* Chrome, Safari, Opera */
			transform: rotate(-1deg);		
		}
		.quickLinks a {color:black; width:100%; padding:.5em 1em; }
		.quickLinks a:hover {color:black; text-decoration:none;}		
	/* Inline Pipe Lists */
	  .inlinePipe li{
			display: inline;
			margin-left: auto; /* needed to override .noBullets when this class is applied to mainContent */
		}
		.inlinePipe li:after {content:" | ";}
		.inlinePipe li:last-child:after {content:"";}		
	/* Four - A 4-column list. See: /publications/datastats/wetlands.shtml */ 
	  .four ul {float:left; width: 22%; margin-right: 4%; margin-left:0; padding:0;}
	  	.four ul:nth-child(4n) {margin-right:0;} 
	  	.four ul:nth-child(4n+1) {clear:both;}
	  .four li {list-style:none;} 
	  	.four li:first-of-type {font-weight:bold; border-bottom: 3px solid #ccc; margin:1.5em 0;}
	  	.four li ul   {background:#ccc; margin-right:auto !important;}
	  		.four li ul li:first-of-type {font-weight:normal; border:none;}
	
	/* Quarters - Four lists floated left with default color */
	  .quarters {display:block; position:relative; float:left; width:100%; height:auto; margin:1.5em 0; padding:0;} 
		.quarters ul {
			position:relative; 
			float:left;
			width: 24%; 
			height:300px; /* override with instance class, .customheight */
			margin:0 1% 0 0; padding:0;
			background:#FCE6CF;  /* override with an instance class */
			border:1px solid #D7500E; 	  
		 }
		.quarters ul:last-of-type {margin-right:0;}
		.quarters li {list-style:none; margin-left:1em;}
			.quarters li:first-child { 
				margin-left:0; padding:.75em; 
				color:white; font-size:1.1em; 
				background:#D7500E;
			}
			.quarters li:nth-child(2) {margin-top:1em;}
			.quarters li:last-child {position:absolute; bottom:.5em; right:1em; text-align:right; text-transform:uppercase;} 
			@media only screen and (max-width:1080px) { .customheight ul {height: auto!important;} /* removes customheight */ }	
		/* Quarters Announcement - implemented on /business/contracting/ */
			.quartersAnnounce {overflow-y: scroll; background: #FEF7BD!important;}
				.quartersAnnounce * {margin-left:0 !important;}
				.quartersAnnounce dl {padding:0 1em;}
		
		/* Quarters variation used on Contracting & Consulting */
		.bizblue ul {
			border:1px solid #06C; 
			background: rgb(238,238,238);  
		  }
		  .bizblue li:first-child {background:#06C;}
		  @media only screen and (max-width: 1080px)  {
			  .bizblue li { border:none!important; }		
		  }
		  @media only screen and (max-width:960px) { 
			  li.invisible {display:none;} 			
			  li.invisible+li {margin-top:auto;} /* reset it */
		  }	
	/* a 4-column inline list */	
		.inner-box {position:relative; height: 32em; }
			.col {
				position: absolute;
				top: 0; bottom: 0;
				padding: 0 2%;
			}	
			.col-1 { left: 0%; right: 75%; }		
			.col-2 { left: 25%; right: 50%; }		
			.col-3 { left: 50%; right: 25%; }		
			.col-4 { left: 75%; right: 0%; }
			@media only screen and (max-width: 991px)  { 
				.inner-box {height:auto; background:none;}	
					.col {position: relative; padding:0; border:none;}
						.col-1, .col-2, .col-3, .col-4 {position:relative; left:0;}
			}
	/* Unordered (<ul>) Lists with very long list items, especially if the list items are links and wrap down onto another line */
		.longListItems {
			padding: 0em;
			padding-left: 2em;
			margin: 0em 0;
		}
		.longListItems li {
			margin: 1em 0 0 3em;
			text-indent: -3em;
		}
	/* Miscellaneous */
		.textIndent, .textIndent li, .textIndent dd {text-indent: 2.5em;}  /* indented first line */
		 ul.noGap {margin-top: -1.5em;} /* removes gap between ul and next ul. For example between stacked ul class=inlinePipe and next ul not an inlinePipe. */
		
		.vGap {display:block; height: 1.5em;}  /* apply to empty li */	
			@media only screen and (max-width:960px) {.vGap {display:none; align:left;} }
		
  	/* For lists inside tables, see below TABLES (Flexible) */
  
/*************************************************************************************************

	BANNERS-  Used on new "Doing Business" pages and for special announcements
	
	Instructions & Examples at https://mdtwwwtest/test/maureen/mdtNotice/
	
*************************************************************************************************/
	section:first-child {padding-top:0;} /* needed to remove extra padding after .banner */ 
	.banner {	  
		position:relative; top:0;
		margin:0; padding: 1.5em;
		background:#333; background: rgba(0,0,0,.5);
		color: white;
	}
	.banner + .banner {border-top: 1px solid LightGrey;}  /* if you want to stack banners */	 
	.banner h1 {color:white; margin:0; text-shadow: 1px 1px 8px rgba(0,0,0,.9);}	
	  .banner li {font-size:1.5em;}
	  .banner h1 a {
		display:block; width:100%; height:100%; 
		border:none; color:white; 
		text-decoration:none; 
		text-shadow: 1px 1px 10px rgba(0,0,0,.9);
		}
		.banner a:hover {color:#ddd; text-shadow:none;}
		.businessImg { 
			background:url(/webapps/images/abstract-design-pattern-sparkle.jpg) no-repeat center center; 
	} 
		.banner a, .banner .cta {color:white;}
	/* medium screens */
	@media only screen and (max-width:1137px)
	{
	  .banner {top:-65px; clear:both;} 
	  .banner h1 a {display:block; padding:.5em 0;}
		  .banner h1 a:hover {padding:.5em 0; text-decoration:none;}	
	}	  
	/* small screens */
	@media only screen and (max-width:480px) {  .banner h1 {font-size:2em;}  }
	 
	/* Banner Notice -  for special announcements */
	.bannerNotice {
    	background: #F2F2EE; background: rgba(0,0,0,.4); 
		padding:.5em 2.5em; color: #f5f5f5;
  	}
	  .bannerNotice h3 {color: #07D3F4;  }
	  .bannerNotice a {color: white; }
		.bannerNotice a:hover {color: #eee; text-decoration: none; }
  		
/*************************************************************************************************

	IMAGES  - Still working on this...
	
*************************************************************************************************/
/* Use these styles in conjunction with an image policy that states required sizes for images on small, medium and large displays */
/* 
Arrive at a policy (and code) for displaying small images on small screens, large images on large screens (medium screens?) 
Always at least 2 versions of an image? What sizes? What pixel densities? 
*/
/* All images will display at 100% of their width if they can. Never larger. */
/* Place images inside a <p> tag or <figure> to indent them. */
/* Use <figure><figcaption> to apply captions to images */
/* The <figure> tag indents images so you don't need to wrap them in a <p> */
/* To scale images to full page width, apply class="flex." Flexed images must be 1140px wide to look decent on large devices. */
/* Apply the class .imgL to images you want to float left and .imgR to images you want to float right */
/* Examples: 
  <img src="_images/myImage.jpg" alt="image description"  alt="image description"> 
  <img src="_images/myImage.jpg" alt="image description"  class="imgR scaleImg"> 
  <img src="_images/myImage.jpg" alt="image description"  class="imgL scaleImg">   
  <img src="..images/myImage.png" alt="image description" class="flex noTopMargin"> If it's first on the page
  <img src="..images/myImage.jpg" alt="image description" class="flex noTopMargin noBottomMargin">  If it's the only thing on the page
  You can also use <figure><figcaption>A photo caption</figcaption></figure> 
*/
#agencycontent img, #agencycontent td img	{max-width:100%; margin:0;} /* it's going to be 100% if it's big enough */
#agencycontent .imgL {float:left; padding:0; margin:.5em 2em 2em 0;}
#agencycontent .imgR {float:right; padding:0; margin:.5em 0 2em 2em;}
.clearImg {overflow:hidden;} /* apply to neighboring <p>s or <div>s to keep text from wrapping around a floated image */
.flex  {display:block; width:100%; margin: 2em 0;} /* it's going to be 100% no matter what */
  .flex ~ span.caption {margin-top: -2.5em;} /* Do you still need this now that you have figure/figcaption style? */
  .flexNoMargin {display:block; width: 100%; margin: 0;}
.scaleImg {width:40%;}  /* images should be 300px/600px(for retina) */
.icons img	{
	background: #fff;
	border: 1px solid #C0C0C0;
	border-radius: 8px;
	box-shadow: 0 0 16px #9C9C9C;
	margin: 0 1em 1em 0;
	padding: 1em; 		
}
  .icons img:hover {
	  border: 1px solid #888;
	  box-shadow: 0 0 10px #62707A;
	  margin: 0 1em 1em 0;
	  cursor: pointer;
  }	
  p.icons a {border:none;}	

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

	FORMS - Basic form styles and instructions:
	  Use fieldsets to group related inputs.
	  Use <label for="something"><input id="something"> to associate labels w/ inputs, and to "activate" labels.
	  Use .required to mark required fields.
	  Set field widths in ems (not pixels) so they scale with the font size.
	  See also: Capitalization and Punctuation Guide: https://msdn.microsoft.com/en-us/library/bb158706.aspx 
	  Normalize form elements across browsers - Was this done in resets?
*************************************************************************************************/	  

  #agencycontent form {
	  box-sizing: border-box;
	  border:1px solid LightGrey; border-radius:2em;
	  background:#F9F9F9; 
	  margin: auto;  padding:1em 2em;  
	  font-size: 95%; 
  } 
	#agencycontent label, #agencycontent legend, #agencycontent form p {font-size: 150%; }
 	#agencycontent textarea {font:inherit; line-height: 150%;} 
 
	#agencycontent form p { margin:1.5em 0;}
	#agencycontent fieldset {padding:1em;}
	  #agencycontent fieldset p:first-of-type {margin-top:0;}
		#agencycontent legend {font-weight:bold;}
			#agencycontent legend,  #agencycontent label {display:block; margin-bottom:.25em;}
	#agencycontent input, #agencycontent select, #agencycontent textarea {margin-bottom:1em; padding:.75em;} 
	#agencycontent input {color:black;}
	  #agencycontent input[type="radio"] {margin-bottom:0;}
	  #agencycontent input[placeholder], [placeholder], *[placeholder] { color: #999; text-align:left; }	
	  #agencycontent input:focus, #agencycontent textarea:focus {color:black; background:lightYellow; border:1px solid black;} 
		#agencycontent input[type="radio"]:focus {border:none;}
	  #agencycontent textarea {width:90%; height:15em; text-align:left;}  	
	#agencycontent .required:after, #agencycontent input[required], [required], *[required] { content:" * "; color: #C00; }
	
	
/************************************************************************************************

	TABLES (Flexible)	
	Hint: <table><thead><thead><tfoot><tfoot><tbody><tbody></table>  Yes, <tfoot> comes "before" <tbody> 
	
************************************************************************************************/
  table {
	  width:100%;
	  background: white;
	  border-collapse: collapse;		
	  margin: 1.5em 0;
	  font-size: 1.4em;	
  }
	table.center td, table.center th, table.center caption {text-align:center;} /* centers all text in the table */
	  td.right, th.right {text-align:right;}
	  td.center, th.center {text-align:center;}
	  td.left, th.left {text-align:left;}
	  td.justify, th.justify {text-align:justify;}
	  .vTop {vertical-align:top;}
	  .vBottom {vertical-align:bottom;}
	  .vMiddle {vertical-align:midddle;}	
	table ul, table ol, table dl  {font-size:inherit !important;} /* prevents oversizing of list fonts */
	caption {padding-bottom:.5em; font:italic 1.3em "Times New Roman", Times, serif;}
	tfoot {font-size:90%;}
  /* mdtTable1 */
	table.mdtTable1 {border: 1px solid #000;}
	/* table.mdtTable1 ul, table.mdtTable1 ol, table.mdtTable1 dl  {font-size:inherit !important;} prevents oversizing of list fonts */
	  table.mdtTable1 ul.inlinePipe {margin:0; padding:0;}
	  table.mdtTable1 thead {
		  text-transform:capitalize; font-size:larger; letter-spacing:1px;
		  border-bottom:1px solid #000;	
	  }
	  table.mdtTable1 thead td { /* for multi-row theads */
		  text-transform:none; background:#6d6d6d; color:white;
	  }
	  table.mdtTable1 td, table.mdtTable1 th {
		  padding:1em;
		  border-right:1px solid #333;
		  vertical-align: top;			
		  /* Text-align:left is the default. Use text-align classes i.e. class="right" to change text-align. */
	  }        	
	  /* Color even rows. Nth-child not supported in IE < 9. Make it work with selectivizr.js(?) */
	  table.mdtTable1 tbody tr:nth-child(even) {background:#EBEBEB;}
	  table.mdtTable1 tbody tr:last-child {border-bottom: 1px solid #000; }
	  table.mdtTable1 tbody tr:hover {background:#ccc;} 
	  /* Optional separator */
	  table.mdtTable1 tbody tr.separator {
		  font:italic 1.3em "Times New Roman", Times, serif; 
		  border-top:1px solid #000; border-bottom:1px solid #000; 
		  background:#E0E0DC;
	  }	
	  table.mdtTable1 tfoot, table.mdtTable1 thead {background:#333; color:#ccc;}
	  table.mdtTable1 tfoot a, table.mdtTable1 thead a {color:#fff; text-decoration:underline;} 
	  table.mdtTable1 tfoot a:hover, table.mdtTable1 thead a:hover {text-decoration:underline; color:#ccc;}
   /*Simple */
	 table.simple {width:90%; margin:1.5em auto 2.5em; border-radius:2em;}
	  @media (max-width:480px) { table.simple {width:100%}; }
		.simple th{border-bottom: 2px solid black; font-weight:bold; text-align:left;}
		.simple tfoot {border-top: 2px solid black; border-bottom:none;}
		.simple tr {border-bottom: 1px solid black; background:white;}
		  .simple tfoot tr {border-bottom:none;}
		.simple td, .simple th {margin:0; padding:1em;}
		.simple tr:nth-child(odd)  {background:#eee;}
		  .simple thead tr, .simple tfoot tr {background:white!important;}
   /* Miscellaneous  */
	.fixed {table-layout: fixed;} /* algorithm is: "table width" divided by # of columns = column width */	
	.noWrap {white-space: nowrap;}
	.noHover {cursor:none; background:none;}  /* removes cursor effect on tables  */	
	.activeRow, .simple .activeRow { 
		background: rgb(235,241,246); /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZjFmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2FiZDNlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzg5YzNlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWViZmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235,241,246,1)), color-stop(50%,rgba(171,211,238,1)), color-stop(51%,rgba(137,195,235,1)), color-stop(100%,rgba(213,235,251,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-8 */
			}
	

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

	BACKGROUNDS, GRADIENTS, GLOWS & BOX SHADOWS
	
*************************************************************************************************/
  .gradientGrey {
	/* https://www.colorzilla.com/gradient-editor/  Neutral Density, Lightness = 75% radial, reverse */
	background: rgb(247,247,247); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmN2Y3ZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTZlNmU2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(230,230,230,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(247,247,247,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#e6e6e6',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
  }
  .gradientBlack {
	background: #45484d; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDg0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-8 */		
  }
  .noBackground {background: none;}
  .hilite {background: #FFFFAA;}

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

	BORDERS & SEPARATORS
	
*************************************************************************************************/
  hr { 	
	display: block;
	margin-before: 0.5em;
	margin-after: 0.5em;
	margin-start: auto;
	margin-end: auto; 
	border-width: 1px;
  }

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

	BORDER RADIUS & SHADOWS  
	
**************************************************************************************************/
  /* 
  Note: border-radius clips images. 
  Hint: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 
  */
  .borderRadius {border-radius: 3%;}
  .borderRadiusCircle {border-radius: 50%;} 
  .borderRadiusLeaf {border-radius: 35% 0; border: 1px solid white;} /* all of a sudden, I have to add a 1px border for this to work. Why? */
  .boxShadow {box-shadow: 4px 4px 8px #B7B7B7}
  .glow {box-shadow: 0 0 16px #fff;}
 	
/*************************************************************************************************

	CLEARING FLOATS 
	
*************************************************************************************************/
  /* Apply class="group" to sections and articles */
	.group:before,.group:after {
		content:"";
		display:table;
	}
	  .group:after {clear:both;}
	  .group {zoom:1;}  /* For IE 6/7 (trigger hasLayout) */
	  
  /* Simple inline clearing for other html elements */
  .clear	{clear:both;} 

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

	GLOBAL STYLES
	
*************************************************************************************************/
  .hidden		{display:none;} /* hide it, and clear the space - use for headings h1-h3, etc. */
  .hideOverflow {overflow:hidden;} /* hides overflow when you use the rollershade effect  */
  .invisible 	{visibility:hidden;} /* Used for top of page links. Invisible on large screens */
  .floatLeft 	{float:left; margin: 0 2em 1em 0;}
  .floatRight {float:right; margin: 0 0 1em 2em;}
		
  #agencycontent .noBorder {border: none;} /* remove dashed border on or only instance section or article */
  #agencycontent .noPadding {padding: 0;}
  #agencycontent .noIndent { margin-left: 0; padding-left: 0; }
  #agencycontent .blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
  
  .borderRed {border: 1px solid red;} /* For use in testing only. */
  .indent1  {margin-left:1em;}
  .indent2 {margin-left:2em;}
  .indent3 {margin-left:3em;}
  
  /* Experimental - I'm includingthese but they're hack-ish There may be a better way to achieve margin and padding changes */
  .addMarginLeft {margin-left: 1em;}
  .addPadding { padding:1.5em 2.5em; }
  .addTopMargin {margin-top:1em;}
  .addTopPadding {padding-top:1em;}
  .addBottomMargin {margin-bottom:1em;}
  .noMargin{margin:0 !important;}
  .noPadding {padding:0 !important;}
  .noTopMargin {margin-top:0 !important;}
  .noBottomMargin {margin-bottom:0 !important;}
  .noLeftPadding {padding-left:0;}
  .noHPadding {padding-left:0 !important; padding-right:0 !important;} 
  .noHMargin {margin-left:0 !important; margin-right:0 !important;}
  .noTopMargin {margin-top:0 !important;} /* remove the top margin */
  .noTopPad {padding-top:0 !important;}

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

	CAROUSELS & SLIDE SHOWS
	
*************************************************************************************************/
/* Slideshow CSS */
 /* Prevent the slideshow from flashing on load */
    #slides, #slides2, #slides3, #slides4 {display: none;}
    /* Center the slideshow */
    .container {margin: 0 auto;}	
	/*Sizing of slides - Without picking one of these, the slides will fill the div width that they are in. */
	.smallSlides {max-width:300px;}
	.mediumSlides {max-width:600px;}	
    /* Show active item in the pagination */
    .slidesjs-pagination .active {color:#D7500E;}
    #slides, #slides2, #slides3, #slides4 {display: none;}
    #slides .slidesjs-previous, #slides2 .slidesjs-previous, #slides3 .slidesjs-previous, #slides4 .slidesjs-previous {
      margin-right: 10px;
      float: left;
	  background-image: url(https://www.mdt.mt.gov/common/images/previous.png);
	  background-position: 0 0;
	  margin-top:5px;
      margin-left:15px;
	  background-repeat: no-repeat;
      display:block;
      width:25px;
      height:25px;
      overflow: hidden;
      text-indent: -9999px;
    }
    #slides .slidesjs-next, #slides2 .slidesjs-next, #slides3 .slidesjs-next, #slides4 .slidesjs-next {
      margin-right: 15px;
      float: left;
	   background-image: url(https://www.mdt.mt.gov/common/images/forward.png);
	  background-position: 0 0;
	  margin-top:5px;
      margin-left:15px;
	  background-repeat: no-repeat;
      display:block;
      width:25px;
      height:25px;
      overflow: hidden;
      text-indent: -9999px;
    }
	#slides .slidesjs-play, #slides3 .slidesjs-play {
	  background-image: url(https://www.mdt.mt.gov/common/images/play.png);
	  background-position: 0 0;
	  margin-top:5px;
      margin-left:15px;
	  background-repeat: no-repeat;
      display:block;
      width:25px;
      height:25px;
      overflow: hidden;
      text-indent: -9999px;
    }
	#slides .slidesjs-stop, #slides3 .slidesjs-stop {
		margin-top:5px;
	  margin-left:15px;
	  background-image: url(https://www.mdt.mt.gov/common/images/stop.png);
	  background-position: 0 0;
	  background-repeat: no-repeat;
      display:block;
      width:25px;
      height:25px;
      overflow: hidden;
      text-indent: -9999px;
    }
    .slidesjs-pagination {
      margin: 10px 0 0;
      float: right;
      list-style: none;
    }
	#slides .slidesjs-pagination {
		margin: 0px 0 0;
	}
    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
	  list-style:none;
    }
    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(https://www.mdt.mt.gov/common/images/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }
    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px;
    }
    .slidesjs-pagination li a:hover {
      background-position: 0 -26px;
    }
    #slides a:link,
    #slides a:visited {
      color: #D7500E;
    }
    #slides a:hover,
    #slides a:active {
      color: #D7500E;
    }
    .navbar {overflow: hidden;}
/* End of Slide Show CSS */
/*************************************************************************************************

	TRANSFORMS 
	
**************************************************************************************************/

	.rotateL { 
		-ms-transform: rotate(-7deg); /* IE 9 */
    	-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    	 transform: rotate(-7deg);
	}
	.rotateR { 
		-ms-transform: rotate(7deg); /* IE 9 */
    	-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    	 transform: rotate(7deg);
	}
	@media (max-width: 767px)  { .rotateL, .rotateR  {transform:none;} }
	
/* End transforms */
/*************************************************************************************************

	VIDEOS
	Courtesy https://www.developerdrive.com/2012/07/adding-responsive-videos-to-your-design/ 
	Videos must look good at width="1048" height="786" and be iframe-formattted in YouTube
	MDT videos are saved here https://www.youtube.com/montanadot 
	
*************************************************************************************************/
  .videoContainer {
	  position: relative;
	  padding-bottom: 56.25%; padding-top: 30px; /* room for video controls */
	  height: 0;
	  overflow: hidden;
  }
  .videoContainer iframe, .videoContainer object, .videoContainer embed {
	  position: absolute; top: 0; left: 0; /* Retain to ensure controls are visible */
	  width: 100%; height: 100%;  
  }
  /* Optionally, you can restrict the video width to some preset value e.g. 320px
  Wrap the video with another <div class="videoWrapper"> tag which specifies a fixed width value as shown below: */
  .videoWrapper {width:320px; max-width: 100%;}