/* by David Lubinski  /

 /* ----------------------------------------------------------------------

	:: LUBINSKI STYLES, STILL TO BE ORGANIZED

	---------------------------------------------------------------------- */
	
	
	/* override foundation p font size */
body {
	color:#313131;  /* was 555, too light of gray */
/* 	font-size: 1.4rem; */
	}
p {
	font-size: 1.4rem;	/* was 1.3rem */
	}



/*  fix a Chrome bug where #anchor links on a page don’t scroll downward when landing on an <hr> with id="name"
*/
hr {
	overflow: visible;
	}	

/* Switch ordered sub-bullets from numbers to letters */
ol ol {
    list-style-type: lower-latin;
}	
	
   /* czo switcher code derived from http://toddmotto.com/flawless-clickable-drop-down-navigation */
   
.click-nav {
	position: absolute;
	width: 220px;
	right: 20px;
	top: 0;
	z-index:1000;
	}
   
.click-nav ul {
	position:relative;
	font-weight:normal;
	}

.click-nav ul li {
	position:relative;
	list-style:none;
	cursor:pointer;
	margin-bottom:0px; /*otherwise inherits 12 px from foundation.css*/
	}

.click-nav ul li ul {
	position:absolute;
	left:0;
	right:0;
	box-shadow: 0px 8px 10px rgba(0,0,0,0.3), -10px 8px 15px rgba(0,0,0,0.3), 10px 8px 15px rgba(0,0,0,0.3);
	}

.click-nav ul .clicker {
	position:relative;
	background-color:rgb(255,255,255); /*fallback for IE8 etc*/
	background-color:rgba(255,255,255,0.7);
	color:#33352d;
	text-align: center;
	border-radius: 0 0 25px 25px;
	box-shadow: 0px 8px 10px rgba(0,0,0,0.2), -10px 8px 15px rgba(0,0,0,0.2), 10px 8px 15px rgba(0,0,0,0.2);
	}
	

.click-nav ul .clicker:hover,.click-nav ul .active {
	background-color:#ffffff;
	text-shadow:none; /*otherwise inherits yellow text shadow from czo.css*/
	box-shadow: 0px 8px 10px rgba(0,0,0,0.3), -10px 8px 15px rgba(0,0,0,0.3), 10px 8px 15px rgba(0,0,0,0.3);
	}
	
.click-nav ul .active {
	border-radius: 0 0 0 0;
	}	
	

/*
.click-nav img {
	position:absolute;
	top:9px;
	left:12px;
	}
*/

.click-nav ul li a {
	transition:background-color 0.2s ease-in-out;
	-webkit-transition:background-color 0.2s ease-in-out;
	-moz-transition:background-color 0.2s ease-in-out;
	display:block;
	padding:8px 10px 8px 5px;
	background:#313131;
	color:#FFF;
	text-decoration:none;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
	border-left: 1px solid #666;
	}
	
.click-nav ul li ul li a {
	padding-left: 20px;
	}

.click-nav ul li a:hover {
	background:#000; /*backup hover color of black*/
	text-shadow:none; /*otherwise inherits yellow text shadow from czo.css*/
	}
	
/*different colors for each CZO upon hover*/
.click-nav ul li a.national-dkcolor:hover {
	background:#7a834a;
	}
.click-nav ul li a.boulder-dkcolor:hover {
	background:#546f82;
	}
.click-nav ul li a.calhoun-dkcolor:hover {
	background:#876344;
	}
.click-nav ul li a.catalinajemez-dkcolor:hover {
	background:#67655c;
	}
.click-nav ul li a.christina-dkcolor:hover {
	background:#76825c;
	}
.click-nav ul li a.eel-dkcolor:hover {
	background:#6e7967;
	}
.click-nav ul li a.iml-dkcolor:hover {
	background:#7b673f;
	}
.click-nav ul li a.luquillo-dkcolor:hover {
	background:#448082;
	}
.click-nav ul li a.reynolds-dkcolor:hover {
	background:#837461;
	}
.click-nav ul li a.shalehills-dkcolor:hover {
	background:#618795;
	}
.click-nav ul li a.sierra-dkcolor:hover {
	background:#576f8b;
	}

/* Fallbacks */
.click-nav .no-js ul {
	display:none;
	}

.click-nav .no-js:hover ul {
	display:block;
	}
	

.small.button.specialbutton {
	width:20%;
	}
	
.yellow.button { 
	background-color: #ffffcc; 
	color: #333; 
	}

.yellow.button:hover { 
	background-color: #ffff7f; 
	color: #333; 
	}
	
.yellow.button:focus { 
	background-color: #ffff7f; 
	color: #000; 
	}
	
.orange.button { 
	background-color: #D66F00; 
	color: #FFF;
	border:1px solid #FFF; 
	text-shadow: 0 -1px rgba(0,0,0,0.3);
	}

.orange.button:hover { 
	background-color: #A05300; 
	color: #FFF;
	border:1px solid #FFF;
	text-shadow: 0 -1px rgba(0,0,0,0.3); 
	}
	
.orange.button:focus { 
	background-color: #f68b01; 
	color: #000;
	border:1px solid #000; 
	text-shadow: none;
	}

dl.sub-nav dd.active a {
	background: #666;
	}

dl.sub-nav {
	margin-bottom: 2em;
	}


/* intrinsic ratio based container for square iframed elements like square google calendars*/
.flex-container-square {
	position: relative;
	padding-bottom: 105%;
	padding-top:10px;
	height: 0;
	overflow: hidden;
}

.flex-container-square iframe,
.flex-container-square object,
.flex-container-square embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




/* - parrish */
.whiteText {
	color:#fff;
	}
	
/* dataset field areas and CZO authors.  width changes with media queries */
.datasetextras {
	float:right;
	margin-left:4%;
	width:66%;
	}
.sidebaralign {
	text-align: right;
	}

/* black at 20% transparency overlayed on title color */
.homeiconcolor {
	color:#6f7743; 
	}

/* misc additions to file */

.lateralbox {
	margin-top:-10px;
	margin-bottom: 10px;
	color:#DCDCDC;
	}
.lateralbox a {
	color:#666;
	}

.colortitle {
	background-color:#8b9554;
	}

dl.tabs.vertical.sectionnav {
	border-bottom:none;
	}

dl.tabs.vertical.sectionnav dd a {
	color:#fff; 
	background-color:transparent;
	background-image:url('/images/national/banners-footers-ui/navarrow_rt_align_white.gif');
	padding: 10px 20px 10px 0;
	border:none;
	text-align:right; 
	font-size: 1.4rem;
	}
	
dl.tabs.vertical.sectionnav dd a:hover {
	text-decoration: underline;
	}
	
	
dl.tabs.vertical.sectionnav dd a.active {
	color:#fff;  
/* 	font-weight: bold; */
	background-color:transparent;
	background-image:url('/images/national/banners-footers-ui/navarrow_rt_align_white_active.gif');
	}
	
dl.tabs.vertical.sectionnav dd a:active {
	color:#000000;  
	background-color:#ffff7f;
	}
	
.initialmargin a {
	color:#ffffff;
	}


.initialimagefull {
	width:100%; margin-bottom:10px;
	}

.initialimagemed {
	float:left; width:40.5%; margin-right:4.4%; margin-bottom:10px;
	}
	
.initialimagesm {
	float:left; width:33%; margin-right:4.4%; margin-bottom:10px;
	}

.initialimages {
	max-width:100%;
	border:1px solid #999999;
	}
.prevnext p {
	margin-bottom:0px;
	margin-right:20px;
	text-align:right;
	}
.prevnext a {
	color:#ffffff;
	}
.initialtext h3, .flexwidthrow h3, .noflex h3 {
	font-weight:200;
	}
.initialtext h3, .initialtext h4, .initialtext h5 {
	margin-bottom:1em;  
	line-height:1em;
	color:#ffffff;
	}
.initialtext a {
	text-decoration: underline;
	}	
.rightalign {
	text-align:right;
	}	
	
.initialmargin {	
	background-color:#8b9554;
	}	
.initialbackground {	
	background-color:#8b9554;
	}
.colorsecondary {
	background-color:#8b9554; /* used to be #7a834a. for secondary level pages, this color overrides color of .initialmargin and .initialbackground. Create such a color in Fireworks or Photoshop by taking the original color and overlaying with black at 10% transparency */
	}
	
.initialtext p {
	line-height: 1.4;
}

.flexwidthrow ul, .initialtext ul, .multicolumn ul, .noflex ul, .basictext ul {
	list-style-type: disc;
	margin:-5px 0 14px 15px; /*left margin here and the next 3 declarations was 30px before adding list-style inside*/
	list-style: inside;
	}
.flexwidthrow ul {
	list-style: outside;
	margin:-5px 0 14px 30px;
	font-size: 1.4rem; /*needed to be a bit bigger */
	}
.flexwidthrow ol {
	font-size: 1.4rem; /*needed to be a bit bigger and match corresponding ul size too */
	}	
.flexwidthrow li, .initialtext li, .multicolumn li, .noflex li, .basictext li {
	margin-bottom: 4px;
	}
.initialtext ul ul, .multicolumn ul ul, .noflex ul ul, .basictext ul ul {
	list-style-type: circle;
	margin:2px 0 0 15px; 
	list-style: inside;
	}
.flexwidthrow ul ul {
	margin: 2px 0 18px 40px; /* not sure if this substantial margin change looks ok with .initialtext, .multicolumn etc */
	list-style-type: circle;
	list-style-position: outside;
	}	
.flexwidthrow ol ul, .initialtext ol ul, .multicolumn ol ul, .noflex ol ul, .basictext ol ul {
	list-style-type: circle;
	margin:2px 0 0 15px;
	list-style: inside;
	}	
	
.flexwidthrow h5, .multicolumn h5, .noflex h5 {
	font-weight: bold;
	color:#73583d;
	margin-top:1.5em;
	margin-bottom:0.9em;
	}
.multicolumn {
	margin-bottom:15px;
	}
.associatedfiles a {
	font-weight: bold;
	}

.fancyboxhidden {
 	display: none;   
 	}
.galleryul {
	margin-top:1em;
 	margin-bottom:0.3em;
 	}		
.czogallery img {
	float:left;
 	margin-right:16px;
 	margin-bottom:16px;
 	}
 	
 /* fix specificity fancybox lightbox css */	
.fancybox-skin a:hover {
	 background-color: transparent;	
 	}
 	
.hrthick { 
	background: none;
	border: solid #666666;
	border-width: 2px 0 0 0;
	height: 0;
	width: 100%;}
	
.keyfield {
	padding:20px;
	color:#FFFFFF;
	text-align:right;
	border-radius:8px;
	}
	
.keyfield p {
	font-size:1.2em;	
	}
	
.firstyline::first-line {
	font-weight: bold;
	font-size:1.2em;
	}	
div.firstyletter p:first-of-type:first-letter  {
	float: left; font-size: 40px; font-weight:bold; color:#999; line-height: 30px; padding-top: 4px; padding-right: 4px; padding-left: 3px; font-family: 'Ubuntu', "Proxima", "Helvetica Neue", "Helvetica", Arial, sans-serif;
	}
	
/*quick partial solution to the firstyletter being applied to paragraphs within list items*/
div.firstyletter li p:first-of-type:first-letter {
	float: none; font-size: 1.4rem; font-weight:normal; color:none; line-height: 1.25; padding-top: 0px; padding-right: 0px; padding-left: 0px; font-family: Verdana, 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
	} 	
	
	
/* need to fix the overlap of tabs and content on mobile when multiple tabs are present */
ul.tabs-content { 
	clear:both;
	}
	
.hkeychar {
	font-size:0.9em;
	color:#666;	
	}
.pkeychar {
	font-size:1.1em;
	color:#000000;
	}	
.button:hover, .button:focus { 
	background-color: #11639d; 
	color: #ffffff; 
	}
.brown.label { 
	background-color: #E4DED8; /* was #73583d too dark, too prominent */ 
	color:#73583d;
	}
.dkgray.label { 
	background-color: #E0E0E0; /* was #666 too dark, too prominent*/
	color:#666; 
	}
.mud.label  { 
	background-color: #b2ae9b; 
	}


/* basic anchor colors */
a {
	color:#11639d;
	}

a:hover {
	color:#000;
	background-color:#ffffcc;
	}

a:active {
	background-color:#ffff7f;
	}

/* utility nav section with About | News | Events | Opportunities | Contact */
#utility_nav {
 	position: absolute; 
 	right: 260px; /* was 20px */
 	top: 5px;  /* was 70px */
 	height: 20px; 
 	width: auto; 
 	text-shadow:0px 0px 25px #FFF;
 	background-color: rgba(255,255,255,0.3); 
 	padding:2px 5px; 
 	border-radius:6px;/* consider square top corners when launching sitewide search box */
 	color:#999;
 	}
#utility_nav a {
 	color:#000;
  	}
#utility_nav a:hover {
 	text-decoration: underline;
 	background-color:transparent;
  	}
#utility_nav a:active {
	background-color:#ffff7f;
	}

 
 /* the top banner, different backgrounds per czo with CZO specific css files  */	
.banner {
	background-color:#FFFFFF;
	background: url(/images/national/banners-footers-ui/banner_gradient.jpg) top left no-repeat;
	height: 110px;
	border-right: 1px solid #999; 
	border-left: 1px solid #999;
	}
.banner h4 {
	margin:45px 0 0 115px; 
	line-height:22px; 
	text-shadow:0px 0px 7px #DDD;
	text-transform: uppercase;
	}
.banner .banner_subtitle {
	font-weight:200; 
	font-style:italic;
	}

.banner a {
	color:#000;
	}

.banner a:hover {
	text-decoration:none;
	background-color:transparent;
	text-shadow:0px 0px 21px #ffff7f;
	}

.banner a:active {
	background-color:#ffff7f;
	text-shadow:none;
	}

/* the main search box within the banner */	
.main_search_box {
	position: absolute;
	right: 20px; 
	top: 70px; 
	height: 25px; 
	width: auto;
	opacity:0.7; 
	}
	
/* the secondary search box within the lateral czo + search row */	
.section_search_box {
	text-align: right;
	}
	
	
/* main menu layout and borders  
note that z index of 32 puts it on top of orbit right left arrows, which have a z-index of 30 and timer arrow of 31.*/
.main_menu {
	height:39px; 
	border-top: 1px solid #666; /* or maybe 3px black?*/
	border-right: 1px solid #c4b9a2; 
	border-left: 1px solid #c4b9a2; 
	border-bottom: 1px solid #c4b9a2; 
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px; 
	background-image:url(/images/national/banners-footers-ui/menubar_national.gif);
	background-position: bottom left; 
	background-repeat: repeat-x;
	padding-top:0;/*override former 3px*/
	z-index:32;
	}	

/* a tightened up list style*/
ul.condensed {
	margin-top: -8px;
	}
ul.condensed li {
	margin-bottom: 4px;
	}
	
 /* green background for national main nav, to be overridden by per czo stylesheets?*/
.main_nav {
	background-color: #bfc4a1;
	}

/*  add some whitespace between main banner+menu and the page content, which starts with title */
.pagetitle {
	padding-top: 20px;
	margin-bottom: 15px;
	}

/* placement of the logo, select field, and small menu button on phone banner */
 .banner_phones {
 	background:url(/images/national/banners-footers-ui/banner_phones.png) no-repeat bottom left, -moz-linear-gradient(top, #8eb3ce 0%, #dfe2d0 100%);
		background:url(/images/national/banners-footers-ui/banner_phones.png) no-repeat bottom left,  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8eb3ce), color-stop(100%,#dfe2d0));
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8eb3ce', endColorstr='#dfe2d0',GradientType=0 );
		background: url(/images/national/banners-footers-ui/banner_phones.png) no-repeat bottom left, -o-linear-gradient(top, #8eb3ce, #dfe2d0);
	height: 45px;
	border-bottom: 5px solid #000;
	text-shadow:0px 0px 7px #fff;
	}
.logo_phones { 
	margin-top:10px;
	}
.logo_phones_txt { 
	color:#000; 
	font-family: 'Ubuntu', "Proxima", "Helvetica Neue", "Helvetica", Arial, sans-serif; 
	margin-left:15px;
	}
.logo_phones_czo {
	font-size:22px;
	font-weight:600;
	}
.logo_phones_pipe {
	font-size:22px;
	font-weight:200;
	}
.logo_phones_site {
	font-family:'arial';
	font-weight:600;
	text-transform: uppercase;
	}
.logo_phones_dnarrow {
	color: #999;
	}
.small.button.menu_phones {
	float:right; 
	margin-right:18px; 
	margin-top:5px; 
	padding-right:10px; 
	padding-left:10px;
	color:#555;
	opacity:0.8;
	}

/* start a typography section? */
h2.titleh2, h3.titleh2 {
	color:#fff;
	margin-left:20px;
	margin-top:-10px; 
	margin-bottom:0px;
	line-height: 1.1em;
	}
	
h2.titleh2 { 
	margin-bottom:-0.4em;
	}	

/* setting up the footers */
.footer_local {
	margin-top:30px;
	height:130px;
	padding-left: 130px;
	}

.footer_local h3 a {
	color:#000;
	}
.footer_natl {
	height:170px;
	}
.footer_natl h2 {
	float:left; 
	color:#fff; 
	font-family: 'Ubuntu', "Proxima", "Helvetica Neue", "Helvetica", Arial, sans-serif; 
	vertical-align:top;
	text-shadow: 0px 0px 7px #303030;
	}
.footer_natl h4 {
	color:#fff; 
	margin-top:2px; 
	font-size:16px; 
	vertical-align: middle; 
	font-family: 'Ubuntu', "Proxima", "Helvetica Neue", "Helvetica", Arial, sans-serif; 
	text-shadow:0px 0px 7px #303030;
	}
.tagline {
	color:#fff; 
	font-weight:300; 
	margin-top:0px; 
	font-family: 'Ubuntu', "Proxima", "Helvetica Neue", "Helvetica", Arial, sans-serif; 
	text-shadow:0px 0px 7px #303030;
	}

.footer_logoblock {
	height:100%;
	width:100%;
	display: block;
	}
.footer_logoblock:hover {
	background-color:transparent;
	}

.footer_natl a:hover h2, .footer_natl a:hover h4 {
	color:#fff;
	text-shadow:0px 0px 21px #ffff7f;
	}

.footer_natl a:active h2, .footer_natl a:active h4 {
	background-color:#ffff7f;
	color:#000;
	text-shadow:none;
	}

.footer_logo {
	font-weight:600; 
	margin-right:-5px;
	}
.footer_logo_pipe {
	font-size:40px;
	font-family: 'Ubuntu', "Proxima", "Helvetica Neue", "Helvetica", Arial, sans-serif; 
	font-weight:100; 
	margin-right:5px;
	}
.footer_logo_subtitle {
	font-weight:200; 
	font-style:italic;
	}

.footersect {
	padding-top:25px; 
	position:relative;
	}

.footerpartners p, .footerpartners a {
	text-align:right; 
	color:#fff;
	text-shadow:0px 0px 7px #303030;
	}

.footerpartners a:hover {
	color:#000;
	}


.footerpartners .socialbuttons {
	text-align:right;
	}	
.footerpartners .socialbuttons img {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
	}	
.footerpartners .socialbuttons img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	}	
.footer_natl .footerpartners .socialbuttons a:hover {
	background-color:#303030;
	}

.footer_natl_phones .socialbuttons {
	text-align:center;
	margin-bottom: 1em;
	}	
.footer_natl_phones .socialbuttons img {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
	}	
.footer_natl_phones .socialbuttons img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	}	
.footer_natl_phones .socialbuttons a:hover {
	background-color:#303030;
	}


.footer_natl_phones {
	margin-bottom:0px; 
	background-color:#313131;
	}
.footer_natl_phones_inner {
	padding-top:20px; 
	position:relative; 
	background-color:#313131;
	}
.footer_natl_phones h2 {
	float:left; 
	color:#fff; 
	font-family: 'Ubuntu', "Proxima", "Helvetica Neue", "Helvetica", Arial, sans-serif; 
	margin-left:10px;
	}
.footer_logo_phones {
	font-weight:600; 
	margin-right:-5px;
	}
.footer_natl_phones h4 {
	color:#fff; 
	margin-top:2px; 
	font-size:16px; 
	vertical-align:middle; 
	font-family: 'Ubuntu', "Proxima", "Helvetica Neue", "Helvetica", Arial, sans-serif; 
	}
dl.tabs.vertical.footernav_phones {
	margin-top:20px;
	border-bottom:1px solid #666;
}


/*inset images and callout/pull quote text for main flexible row */

.flexwidthrow p, .noflex p { /*need to tweak this as need it to increase on mobile*/
	/* font-size: 14px; */
	font-size:1.4rem;
	line-height: 1.6;	
	}
.insetimage_left {
	float:left; 
	margin-right:4%;
	}
.insetimage_ { /* this is the default if no callout/pullquote alignment is given */
	float:left; 
	margin-right:4%;
	}
.insetimage_right {
	float:right; 
	margin-left:4%;
	}
.insetimage_left img, .insetimage_right img, .insetimage_ img {
	max-width:100%
	}
.insetimage_size_fullwidth {
	width: 100%;
	float:none; 
	text-align: center;
	}
.insetimage_size_medium {
	width: 38%;
	}
.insetimage_size_small {
	width: 20%;
	}
.insetimage_size_ {/*  default size for embedded image */
	width: 38%;
	}
.insetimage_left p, .insetimage_right p, .insetimage_ p {
	font-style: italic;
	font-size: 1.3rem;
	color:#73583d;
	line-height: 1.6rem;
	margin-top: -0.5rem; 
	}
	
.callout_right {
	float:right; 
	width:34%; 
	margin-left:4%; 
	margin-top:10px;
	}
.callout_ {   /* this is the default if no callout/pullquote alignment is given */
	float:right; 
	width:34%; 
	margin-left:4%; 
	margin-top:10px;
	}
.callout_left {
	float:left; 
	width:34%; 
	margin-right:4%; 
	margin-top:10px;
	}
.callout_right p, .callout_left p, .callout_ p {
	font-weight:100;
	color:#73583d;
	font-size:120%; 
	line-height:120%;
	font-style:italic; 
	padding:10px; 
	text-align:center;
	}
 
 /* right aligned more info link */
p.goto {
	text-align:right;
	margin-top:-0.5em;
	font-size:90%;
	font-style: italic;
	clear:both; /*added 2015-09-24 after clearfix class stopped working*/
	}

 /* misc */

p.spottitle {
	margin-top:0.5em;
	color:#684b2e; 
	font-size:0.85em; 
	font-weight:100;
	}

.row_topmargin {
	margin-top:20px;
	}

.featuredlabel {
	margin-bottom:0; 
	color:#684b2e; 
	font-size:11px; 
	font-weight:100;
	}

.imagecaption {
	font-style: italic;
	color:#73583d;
	font-size:90%;
	margin-top:-0.5em;
	}

.exploreborder {
	margin:25px -20px 0px -20px;
	border-top:10px solid #dfe2d0;
	}

.explorefurther {
	padding-top:10px; 
	margin-bottom:50px;
	}

.explorefurther_ph {
	padding-top:10px; 
	}

.explorefurther_ph h4 {
	margin-left:-10px; 
	}

.small.button.explore_top {
	float:right; 
	padding-right:10px; 
	padding-left:10px;
	}

/* had to set font to 16px, not 14px to prevent annoying zoom behavior on iphone 
	in webkit the size of search input is determined by the font-size you declare on them? */
.search_phones {
	width:280px; 
	font-size:16px;
	}

.utility_nav_phones {
	font-size:90%;
	color:#ccc; 
	margin-bottom:2em;
	}

dl.tabs.vertical.subnav_phones dd a {
	margin-left:-20px; 
	margin-right:-20px;
	background-image: url(/images/national/banners-footers-ui/navarrow_white.gif);
	}

dl.tabs.vertical.footernav_phones dd a {
	color:#fff; 
	background-color:#313131;
	background-image:url(/images/national/banners-footers-ui/navarrow_gray.gif); 
	border-left:none; 
	border-right:none; 
	border-top:1px solid #666;
	}

h4 {
	margin-bottom:15px;
	}

.newsstory {
	height:100%;
	width:100%;
	display: block;
	color:#555;
	padding:5px 0;
	}

.newsstory:hover {
	color:#555;
	text-decoration:none;
	background-color:transparent;
	}

.newsstory h6, .eventy h6 {
	font-weight:bold;
	color:#11639d;
	margin-bottom: 0.3em;
	}

.newsstory:hover h6 {
	color:#000;
	background-color:#ffffcc;
	}

.newsstory:active h6 {
	background-color:#ffff7f;
	}

.newsstory:active {
	background-color:#ffff7f;
	}

.spotlight {
	height:100%;
	width:100%;
	display: block;
	color:#555;
	}

.spotlight:hover {
	color:#555;
	background-color:transparent;
	}

.spotlight h6 {
	color:#11639d;
	font-weight:bold
	}

.spotlight:hover h6 {
	color:#000;
	background-color:#ffffcc;
	}

.spotlight:active h6 {
	background-color:#ffff7f;
	}

.spotlight:active {
	background-color:#ffff7f;
	}

.pubs a {
	font-weight:bold;
	}
	
.boldanchor a {
	font-weight:bold;
	}



/* -------------------------------------------------------------

   :: OVERRIDES OF ZURB FOUNDATION-SPECIFIC PRESENTATION CSS

------------------------------------------------------------- */


/*set max width larger than default 980px, 1140px fits with most assets, 1200px a bit harder for making banners etc*/
.row { max-width: 1140px; }  

/*  footer background, body font to verdana, */
/* unfortunately chrome and to a lesser extent safari temporarily show the footer at the top before placing at bottom */
body { 
	background: url(/images/national/banners-footers-ui/background_footer.jpg) repeat-x  bottom left; 
	font-family: Verdana, "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	} 

/* attach top background an element other than body since IE7 & IE 8 choke on multiple backgrounds 
	use the overflow-y scroll declaration to fix a horizontal jog/offset on many browsers related to vertical scrollbar
*/
html {
	background: url(/images/national/banners-footers-ui/background_swirl.jpg) repeat-x top left;
	overflow-y: scroll;
	} 

/*  button font to verdana to match body font */
.button {
	font-family: Verdana,"Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
	} 

/*  sub nav vertical tabs to be thinner and different colors than default, add arrows */
dl.tabs.vertical dd a {
	padding: 12px 20px;
	background: url(/images/national/banners-footers-ui/navarrow.gif) no-repeat right #8b9554;
	border: solid 0 #ccc;
	border-width: 1px 1px 0;
	color:#ffffff;
	}
dl.tabs.vertical dd a.active {
	background: url(/images/national/banners-footers-ui/navarrow.gif) no-repeat right #ffff7f;
	color:#000;
	}

/* Header font to ubuntu, which comes from Google web fonts, in head html */
h1, h2, h3, h4, h5, h6 {
  	font-family: 'Ubuntu', "Proxima", "Helvetica Neue", "Helvetica", Arial, sans-serif; 
  	color:#000;
  	}
  
/*	PANELS. changed color of background gradient from gray to lt brown */
div.panel {
	background: -moz-linear-gradient(top, #FFFFFF 0%, #dfe2d0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#dfe2d0));
	background: -o-linear-gradient(top, #ffffff 0%,#dfe2d0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#dfe2d0',GradientType=0 );
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	border-radius:6px;
	} 
/* a brand new panel, the same but different color */
div.panelneutral {
	padding: 20px 20px 2px 20px;
	background: #cccccc;
	background: -moz-linear-gradient(top, #f6f6f6 0%, #EEEEEE 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#EEEEEE));	
	background: -o-linear-gradient(top, #f6f6f6 0%,#EEEEEE 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#EEEEEE',GradientType=0 );
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	border-radius:6px;	
	margin: 0 0 20px 0;
	}

/* addition to zurb button styles */
.datestamp.button {
	line-height:2em; 
	padding: 4px 18px 5px 18px;
	}	

/* ORBIT SLIDER, a number of changes, note that some classes added via javascript */

/* default green background for carousel slider, overridden in individual czo css files */
.homeslider {
	background-color:#ffffff;
	}

/* timer css rules override display none in the main foundation css */
.timer {
	display: inherit !important;
	}
div.orbit-wrapper div.timer {
    opacity: .6;
	}
/* make the arrow nav smaller */
div.orbit-wrapper div.slider-nav span {
    width: 20px;
    height: 60px;
    }
div.orbit-wrapper div.slider-nav span.right {
    background: url(/images/national/banners-footers-ui/right-arrow.png);
    right: 0px; 
	}
div.orbit-wrapper div.slider-nav span.left {
    background: url(/images/national/banners-footers-ui/left-arrow.png);
    left: 0px; 
	}
/* make a narrow row for bullets, was 40px*/
div.orbit.with-bullets {
	margin-bottom: 30px;
	}


/* hide the whole annoying spinner timer thingy for now, later try to keep the pause and play icons visible at all times */

div.orbit-wrapper span.rotator {
    display: none;
    background: none;
	}
div.orbit-wrapper span.mask.move {
    background: none; 
	}

/* creates inner padding for the initial row, don't need that padding on phones */
.initialmargin {
	padding-top:20px; 
	padding-left:20px;
	padding-right:20px; 
	}

/* replacement bullets that look better on colored background */
ul.orbit-bullets li {
    background: url(/images/national/banners-footers-ui/orbit_bullets.png) no-repeat 4px 0;
    }

 /* redundant with above? */ 
 div.orbit-wrapper .slider-nav span.right {
    background: url(/images/national/banners-footers-ui/right-arrow.png);
	}
div.orbit-wrapper .slider-nav span.left {
    background: url(/images/national/banners-footers-ui/left-arrow.png);
	}
	
/* turns off default black box - parrish */
	.orbit-wrapper .orbit-caption {
    background: none;
    padding: 0px;
	}
/* a and h4 text color control - parrish */
	.orbit-wrapper .orbit-caption h4 {
	color:#fff; 
	}	
	.orbit-wrapper .orbit-caption a {
	color:#fff; 
	}	

/* move the timer/slideshow controls so they don't interfere with right arrow nav */
	div.orbit-wrapper div.timer {
		bottom: -35px;
		top:auto;
		right:0px;
		}

/* caption styles on the LEFT */
div.orbit-wrapper .orbit-caption .orbit_leftno {
	text-align:left; 
	margin:-25% 55% 0 45px;
	padding-top:20px;
	}
div.orbit-wrapper .orbit-caption .orbit_left {
	text-align:left; 
	margin:-23% 50% 0 45px; 
	padding:20px;
	background: black;
	background: rgba(0, 0, 0, .7);
	}	
/* caption styles on the RIGHT - parrish */
div.orbit-wrapper .orbit-caption .orbit_rightno {
	text-align:left; 
	margin:-25% 45px 0 55%;
	padding-top:20px;
	}
div.orbit-wrapper .orbit-caption .orbit_right {
	text-align:left; 
	margin:-23% 45px 0 50%; 
	padding:20px;
	background: black;
	background: rgba(0, 0, 0, .7);
	}
/* caption styles on the TOP  - parrish */
div.orbit-wrapper .orbit-caption .orbit_top {
	text-align:center; 
	margin:-30% 0px 16% 0%; 
	padding:45px 20px 15px 20px;
	background: black;
	background: rgba(0, 0, 0, .7);
	}
/* caption styles on the BOTTOM */
div.orbit-wrapper .orbit-caption .orbit_bottom, div.orbit-wrapper .orbit-caption .orbit_ {
	text-align:center; 
	margin:0% 0px 0% 0%; 
	padding:18px 8px 12px 8px;
	background: black;
	background: rgba(0, 0, 0, .7);
	}
	
	
/* Reduce flash of unstyled content of carousel by setting initial size, need to do it as several breakpoints */
#slider_slideshow { 
    width: 1140px;
    height: 300px;
    background: #000 url('../images/orbit/loading.gif') no-repeat center center;
    overflow: hidden; 
   }
 
 /* Reduce flash of unstyled content of carousel by setting initial size, need to do it as several breakpoints */
#slider_slideshow.smallshow { 
    width: 812px;
    height: 214px;
    background: #000 url('../images/orbit/loading.gif') no-repeat center center;
    overflow: hidden; 
   }


/*    EDUCATIONAL RESOURCE MISC */

.audience a.active {
	color:#ffffff;
	font-weight: bold;
	background-color:#7e7e7e;
	padding: 3px 5px;
	border-radius:3px; 	
	}

/*    EDUCATIONAL RESOURCE GRID */
   
   ul.edu-resource-grid { 
      box-sizing:border-box;
      text-align:center;
      }      
      
   .edu-resource-grid .edu-resource-cell {
      height:330px;
      border:1px solid gray;
      position:relative;
      border-radius: 10px;
      background-color:#F6F6F6; /*light gray*/
      }
      @media only screen and (max-width: 1000px) {
         .edu-resource-grid .edu-resource-cell {
            height:305px;
            }
         }
      @media only screen and (max-width: 768px) {
         .edu-resource-grid .edu-resource-cell {
            height:auto;
            }
         }
         
   .block-grid.four-up.edu-resource-grid>li {
      margin-bottom: 4%;   
      }  
      @media only screen and (max-width: 768px) {
         .block-grid.four-up.edu-resource-grid>li {
            margin-bottom: 8%;
            }
         }
   .edu-resource-cell img {
      max-width:100%;
      border-radius: 8px 8px 0 0; 
      margin-bottom:6px;
      }
   .edu-resource-cell .grades {
      font-size:0.9em;
      margin-top:0em;
      margin-bottom:0.2em;
      margin-left:10px; 
      margin-right:10px;
      color:#6E6E6E;
      }
   .edu-resource-cell .resource-title {
      margin:0 10px 1em 10px;
      font-weight:bold;
      }
   .edu-resource-cell .innerdiv {
      position:absolute;
      bottom:0;
      width:100%;
      border-radius: 0 0 8px 8px;
      }
      @media only screen and (max-width: 768px) {
         .edu-resource-grid .edu-resource-cell .innerdiv {
            position:static;
            bottom:auto;
            width: auto;
            }
         }

   .innerdiv.cross-czo {
	   background-color:#A0A0A0; 
	   }
   .innerdiv.national {
	   background-color:#bfc4a1;
	   }	   
   .innerdiv.boulder {
	   background-color:#b8c0cc;
	   }
   .innerdiv.calhoun {
	   background-color:#d5c5b7;
	   }
   .innerdiv.catalina-jemez {
	   background-color:#cac6bb;
	   }	   
   .innerdiv.christina {
	   background-color:#b9bfa8;
	   }	   
   .innerdiv.eel {
	   background-color:#b7c0b2;
	   }	   
   .innerdiv.luquillo {
	   background-color:#a7c9cc;
	   }
   .innerdiv.reynolds {
	   background-color:#cec3b5;
	   }
   .innerdiv.shale-hills {
	   background-color:#bbc8d1;
	   }
   .innerdiv.sierra {
	   background-color:#a3adbf;
	   }
	   
         
   .edu-resource-cell .innerinnerdiv {
      background-color:#F6F6F6;   /*light gray*/
      }

   .edu-resource-cell .edu-subject {
      margin-bottom:0.1em;
      font-size:0.8em;
      color:#6E6E6E;
/*       text-transform: uppercase; */
      }
      
   .edu-resource-cell .edu-subject i {
      font-size:1.6em;
      }
            
  .edu-resource-cell .edu-type {
      padding-bottom:0.8em; 
      margin-bottom:0.4em;
      font-size:0.8em;
      color:#6E6E6E;
      text-transform: uppercase;
      }     
   .edu-resource-cell .edu-preview {
      clear:both;
      font-size:0.9em;
      color:gray;
      margin-bottom:0.6em;
      padding-bottom:8px;
      }
   .edu-resource-cell .edu-czo {
      font-size:0.9em;
      color:white;
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.30);
      margin: -3px 0 4px 0;
      }  
      @media only screen and (max-width: 768px) {
         .edu-resource-grid .edu-resource-cell .edu-czo {
            margin: 0 0 0 0;
            padding-bottom: 6px; 
            }
         }
 
 /* EDUCATIONAL RESOURCE - HOVER STYLES FOR CELLS/CARDS*/
 
	.edu-resource-cell:hover {
		background-color: #fffdcc; /* #fcc48b; */ /*light orange*/
		border:1px dashed black; /* #f68b01; */ /*dark orange*/
		color: black;
/*
		outline: 1px dashed white;
		outline-offset: -5px;
*/
		}
 
	.edu-resource-cell:hover img {
  -webkit-filter: contrast(1.3);
  filter: contrast(1.3);
	}		

	.edu-resource-cell:hover .innerdiv {
		background-color:rgba(0, 0, 0, 0.3);
	}

	.edu-resource-cell:hover .innerinnerdiv {
		background-color:#fffdcc;
	}


 /*	EDUCATIONAL RESOURCE MODIFIED TOOLTIP */

 	.edu-preview .has-tip {
	  border-bottom: none;
	  cursor: help;
	  font-weight: normal;
	  color: #11639d;
	}
  
	.tooltip {
    display: none;
	  background: rgba(0,0,0,0.95);
	  }

      
/* EDUCATIONAL RESOURCE MODAL */

   .edu-resource-modal {
      text-align:center;
      background: #F6F6F6;
      }
   .edu-resource-modal img {
      max-width:50%; 
      margin:0 0 10px 0;
      }
   .edu-resource-modal .mgrades {
      margin-bottom:0;
      font-size:1em;
      }
   .edu-resource-modal .mresource-title {
      margin-bottom:0.6em;
      }
   .edu-resource-modal .medu-subject {
/*       text-transform:uppercase; */
      }
   .edu-resource-modal .medu-subject i {
      font-size:1.6em;
      }
   .edu-resource-modal .medu-subject span {
      display:inline-block;
      margin-right:0.5em;
      }
   .edu-resource-modal .medu-type {
      text-transform:uppercase;
      margin-top: -0.5em;
      }
   .edu-resource-modal .medu-czo {
      clear:both;
      }
   .edu-resource-modal .medu-more-info {
      text-align:left;
      }  
      
      
      
      

 /* ----------------------------------------------------------------------

	:: MEDIA QUERIES BASED ON WIDTH

	---------------------------------------------------------------------- */

@media only screen and (min-width:1141px) {
	/* djl flexible width content row, keeping linelength readable 
	9 column wide */
	.flexwidthrow {
		width: 73.9%;
		}
		
	/* make sure CZO name fits ok by the tree */
	.footer_local {
		margin-top:30px;
		height:130px;
		padding-left: 230px;
		}		
	}
	
@media only screen and (max-width:1140px) {
 	/* djl div class that removes the 20px margins in the .banner, .main_nav, orbit slider, and panel row for widths between 768px and 1140px.  the 768px doesn't need to be specified here, ie because the banner is hidden on phones/mobile */
	.nomargins {
		margin: 0 -20px; 
		}
/* djl div class that removes the 20px margins in the .banner, .main_nav, orbit slider, and panel row for widths between 768px and 1140px.  the 768px doesn't need to be specified here, ie because the banner is hidden on phones/mobile */
	.nomargins2 {
		margin: 0 -20px; 
		}
/* djl flexible width content row, keeping linelength readable 
	10 column wide */
	.flexwidthrow {
		width: 82.6%;
		}				
		
	}
@media only screen and (max-width:980px) {
	/* djl flexible width content row, keeping linelength readable 
	10 column wide */
	.flexwidthrow {
		width: 91.3%;
		}
	}
	
@media only screen and (max-width:955px) {	
	/* calendar datestamp width */
	.datestamp.button {
	line-height:2em; 
	padding: 4px 10px 5px 10px;
		}
	}	
	
@media only screen and (max-width:890px) {
	/* 12 columns wide */
	.flexwidthrow {
		width: 100%;
		}
	}


	
/* tried to increase font-size too, but interferes with inset captions, mobile sizes, and more. might still be worth working on later. a more subtle increase in font size 15px > 14 px > 13 px might be nice.  */
/*
@media only screen and (min-width:768px) {

	.flexwfontrow p {
		font-size: 15px;
		font-size:1.5em;
		line-height: 1.4;
		}
	}
	
	
@media only screen and (min-width:940px) {

	.flexwfontrow p {
		font-size: 16px;
		font-size:1.6em;
		line-height: 1.5;
		}
	}
*/



/* Mobile */
@media only screen and (max-width: 767px) {

	.small.button.specialbutton {
	width:90%;
	}

	
	/* Remove gradient at top of page & remove footer background */		
	body {
		background: url() repeat-x top left; 
		}
	/* what's this for? */
	 .initialmargin {
		padding-left:0px;padding-right:0px
		}

 	/*Restore margins for colored top row on mobile */
	.nomargins2 {
		padding: 0 20px; 
		}

	h2.titleh2, h3.titleh2 {
		margin-left:0px;
		}
		
	.homeslider {
	background-color:#8b9554;
		}

	/*push the captions down for now */
	div.orbit-wrapper .orbit-caption {
		bottom: -45px;
		}
	/* Move the captions below the slider image */
	#slider_slideshow {
		margin-top:10px;
		margin-bottom:170px;
		}

	/* move the left aligned caption styles to bottom to fit on mobile */
	div.orbit-wrapper .orbit-caption {
		text-align:center; 
		margin:0;
		margin-bottom:-80px;
		background:none;
		}
	div.orbit-wrapper .orbit-caption .orbit_, 
	div.orbit-wrapper .orbit-caption .orbit_leftno, 
	div.orbit-wrapper .orbit-caption .orbit_left, 
	div.orbit-wrapper .orbit-caption .orbit_rightno,	
	div.orbit-wrapper .orbit-caption .orbit_right, 
	div.orbit-wrapper .orbit-caption .orbit_top, 
	div.orbit-wrapper .orbit-caption .orbit_bottom {
		text-align:center; 
		margin:0;
		margin-bottom:-25px;
		background:none;
		padding:0;
		padding-left:10px;
		padding-right:10px;
		}
	ul.orbit-bullets {
		display: none;
		}
	.timer {
		display: none !important;
		}	
		
	.initialmargin {
		margin-left:-20px; margin-right:20px;
		}
	.initialbackground {	
		padding-left:20px; 
		padding-right:20px;
		background-color:#8b9554;
		}
	.keyfield {
		text-align:left;
		}
	/* Reduce flash of unstyled content of carousel by setting initial size, need to do it as several breakpoints */
	#slider_slideshow { 
	    width: 767px;
	    height: 202px;
	    background: #000 url('../images/orbit/loading.gif') no-repeat center center;
	    overflow: hidden; 
	   }
	 /* Reduce flash of unstyled content of carousel by setting initial size, need to do it as several breakpoints */
	#slider_slideshow.smallshow { 
	    width: 728px;
	    height: 192px;
	    background: #000 url('../images/orbit/loading.gif') no-repeat center center;
	    overflow: hidden; 
	   }
	   
	/* dataset field areas and CZO authors.  width changes with media queries */
		.datasetextras {
			float:left;
			margin-right:3%;
			width:25%;
			}   
		.sidebaralign {
			text-align:left;
			}
			
	/* make sure CZO name fits ok by the tree */
		.footer_local {
			padding-left: 75px;
			/* text-align:right; */
			}

}


/* Small Screens */
@media only screen and (max-width: 350px) {

	/* inset images and callout text for main flexible row
	won't fit well, convert to inline, single column */
	.insetimage_left, .insetimage_right, .insetimage_ {
		float:none; 
		width:auto; 
		margin-right:0;
		}
	.callout_right, .callout_left, .callout_ {
		float:none; 
		width:auto; 
		margin-left:4%; 
		margin-right:4%;
		margin-top:10px;
		}
		
	.block-grid.mobilesm { margin-left: 0; }
	.block-grid.mobilesm > li { float: none; width: 100%; margin-left: 0; }
	
	/* Reduce flash of unstyled content of carousel by setting initial size, need to do it as several breakpoints */
	#slider_slideshow, #slider_slideshow.smallshow { 
	    width: 350px;
	    height: 92px;
	    background: #000 url('../images/orbit/loading.gif') no-repeat center center;
	    overflow: hidden; 
	    }	
	   
	/* dataset field areas and CZO authors.  width changes with media queries */
		.datasetextras {
			float:left;
			margin-right:4%;
			width:40%;
			}
		.sidebaralign {
			text-align: left;
			}  
			
	/* make sure CZO name fits ok by the tree */
		.footer_local {
			padding-left: 60px;
			/* text-align:right; */
			}

}