/*
HTML5 Reset :: style.css
----------------------------------------------------------
We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://ericmeyer.com
HTML5 Doctor :: http://html5doctor.com
and the HTML5 Boilerplate :: http://html5boilerplate.com
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}	

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't screw with your line-heights
gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {font: 13px Helmet, Freesans, sans-serif;}

/* using local fonts? make sure to read up on Paul Irish's
Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #D95204; color: #000; text-shadow: none;}
::selection {background: #D95204; color: #000; text-shadow: none;}

/* j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #D95204;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}
/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------- END RESET | BEGIN CUSTOM ---------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
   MICROFORMATS
	Syntax: v1
	For example see hCard 1.0 (http://microformats.org/wiki/hcard)
	as opposed to the namespaced v2 syntax such as h-*, u-*, etc.
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
   BASE

	Selectors
		Element Selector (ul)
		Descendent Selector (ul li)
		Child Selector (ul > li)
		Pseudo-class Selector (:hover or :nth-of-type)

	The goal is to set global defaults
		reset style framework, such as HTML5Reset
		heading sizes
		link styles
		font styles
		body backgrounds

	NO !important
	NO ID Selectors (#custom)
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
/* Clear floats. Replace HTML5Reset default. */
.group:before, .group:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.group:after { clear: both; }
.group { zoom: 1; }

/* Use to hide content from sighted users without hiding from screen-readers */
.is-visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
	.is-visually-hidden.focusable:active,
	.is-visually-hidden.focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}

abbr, abbr[title] {border: 0 none;}

body {
	font-size:100%;
	margin: 0; padding: 0;
	color: #333333; /* old browsers */
	color: rgb(51,51,51); /* K80 */
	background-color: #B2B2B2; /* old browsers */
	background-color: rgb(178,178,178); /* K30 */
}
img {max-width: 100%;}

h1, h2, h3, h4, h5, h6 {
	font-family: "Salvo Serif", "Rockwell", Arial, Helvetica, serif;
	font-style: normal;
	font-weight: bold;
}

p, li, dt, dd {font-family: Arial, Helvetica, sans-serif;}


/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
   LAYOUT (.l-$name or .grid-$name)

	Focused on how major/minor components relate to each other, 
	not the design of those components.

	Selectors
		ID Selector (#custom) [NO namespace]
		Class Selector (.l-custom) [use namespace]

	Prefer a single selector
	Contextual exception (.l-alt #custom)
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */



/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
   MODULE aka COMPONENTS (.$module-name)

	Modules sit inside Layout components
	A Sub-module sits inside another Module
	Examples: nav bar, carousel, dialog, widgets

	Avoid ID Selectors (#custom)
	Avoid Element Selectors (ul)
	Prefer Sub-class Selectors (.pod-subclass) over invoking parent (#sidebar .pod)

	Selectors to use
		Class Selectors (.$module-name)
		Class Descendent Selector (.$module-name li)
		CLass Child Selector (.$module-name > li)


--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
.l-wrapper {/* PLACEHOLDER */}
	.ie8 .l-wrapper {
		width: 747px;
		margin: 3.375em auto 0.5625em auto;
	}

.l-nav-skip {
	background-color: #FFF;
	display: block;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1em;
	margin: 0;
	padding: 1em 5%;
	width: 90%;
}

.l-footer-legal {
	font-size: 10px; /* old browser */
	font-size: 0.625rem; line-height: 1em; /* 10/10 */
	text-align: center;
	padding: 9px 18px;
	color: #666666; /* old browsers */
	color: rgb(102,102,102); /* K60 */
}
	.ie8 .l-footer-legal {
		width: 711px;
		margin: 0 auto 0 auto;
	}
.l-footer-legal a:link, 
.l-footer-legal a:visited {
	color: #666666; /* old browsers */
	color: rgb(102,102,102); /* K60 */
}
	.l-footer-legal a:hover,
	.l-footer-legal a:focus {
		color: #000000; /* old browsers */
		color: rgb(0,0,0); /* BLACK */
	}
	.l-footer-legal a:active {
		color: #000000; /* old browsers */
		color: rgb(0,0,0); /* BLACK */
	}

.l-footer-legal .legal-copyright {
	margin-bottom: 9px;
}
.l-footer-legal .legal-copyright small {
	font-size: 10px; /* old browser */
	font-size: 0.625rem; line-height: 1em; /* 10/10 */
}
.l-footer-legal #logo-peci {
	width: 80px;
	margin:9px auto 0 auto;
}
	.l-footer-legal #logo-peci a {
		display: block;
		height: 39px;
	}

.l-footer-legal #logo-peci a {
	background: transparent url('../img/logo-peci-small-link.png') no-repeat left top;
}
.l-footer-legal #logo-peci a:hover, 
.l-footer-legal #logo-peci a:focus {
	background: transparent url('../img/logo-peci-small-hover.png') no-repeat left top;
}

/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
   STATE (.is-$state-name may relate to view state as well)

	If a state is specific to a module, 
		then it should include the module name (.is-module-state)
		and be inserted in teh Module section, not the State section.
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
   THEME [.theme-$theme-name (such as .theme-customer)]

	For colors and images. Enabling thematic variations.
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

/* --------------------------------------------------------- Regional Landing */
.t-regional-landing .l-main {
	padding: 1em 1em 1em 1em;
	background-color: #FFFFFF; /* old browsers */
	background-color: rgb(255,255,255); /* WHITE */
}
	.ie8 .t-regional-landing .l-main {
		padding: 3.375em 3.9375em 3.9375em 3.9375em;
	}
/* ------------------------------------- Regional Introduction */
.t-regional-landing .l-header {
	text-align: center;
}
.t-regional-landing .main-title {
	font-size: 26px; /* old browser */
	font-size: 1.625rem; line-height: 1.3846153em; /* 27/36 */
	padding-bottom: 0.6666em; /* 18 */
	letter-spacing: normal;
	text-transform: none;
	color: #D95204; /* old browsers */
	color: rgb(217,82,4); /* ESG-Orange-@100 */
}

.t-regional-landing .lede {
	font-weight: bold;
	font-size: 14px; /* old browsers */
	font-size: 0.875rem; line-height: 1.2857142em; /* 14/18 */
	max-width: 34em; /* based on line-break */
	margin: 0 auto;
	color: #707B75; /* old browsers */
	color: rgb(112,123,117); /* ESG-Grey@80 */
}

.t-regional-landing .instruction {
	font-weight: bold;
	font-size: 16px; /* old browser*/
	font-size: 1rem; line-height: 1em; /* 16/16*/
	letter-spacing: 0.0625em;
	color: #D95204; /* old browsers */
	color: rgb(217,82,4); /* ESG-Orange */
	padding: 1.125em 0 1.4375em 0;
}

/* ------------------------------------- Regional Selection Navigation */
.t-regional-landing .nav-region {
	display: block;
	margin: 0 0 1.125em 0;
	max-width:420px;
	background-position: 0% 0%;
	background-size: 100% auto;
	border-radius: 0 0.5625em 0.5625em 0.5625em;
}
	.ie8 .t-regional-landing .nav-region {
		float: left;
		width: 31.400966%;
		margin-right: 2.8985507%;
	}
		.ie8 .t-regional-landing .nav-region.last {
			margin-right: 0em;
		}

.t-regional-landing .nav-region-california {
	background-position: 0% 0%;
	background-size: 100% auto;
}
.t-regional-landing .nav-region-northwest {
	background-position: 0% 30%;
	background-size: 100% auto;
}
.t-regional-landing .nav-region-northeast {
	background-position: 0% 30%;
	background-size: 100% auto;
}

	.t-regional-landing .nav-region-california {
		background-position: 0% 0%;
		background-image: url('../img/region-landing-california.jpg');
	}
		.ie8 .t-regional-landing .nav-region-california {
			background-position: 0% 0%;
			background-image: url('../img/ie8-region-landing-california.jpg');
		}
	.t-regional-landing .nav-region-northwest {
		background-position: 0% 30%;
		background-image: url('../img/region-landing-northwest.jpg');
	}
		.ie8 .t-regional-landing .nav-region-northwest {
			background-position: 0% 0%;
			background-image: url('../img/ie8-region-landing-northwest.jpg');
		}
	.t-regional-landing .nav-region-northeast {
		background-position: 0% 30%;
		background-image: url('../img/region-landing-northeast.jpg');
	}
		.ie8 .t-regional-landing .nav-region-northeast {
			background-position: 0% 0%;
			background-image: url('../img/ie8-region-landing-northeast.jpg');
		}

.t-regional-landing .nav-region a {
	display:block;
	position: relative;
	text-decoration: none;
}
.t-regional-landing .nav-region-title {
	font-family: "Salvo Serif", "Rockwell", Arial, Helvetica, serif;
	font-style: normal;
	font-weight: bold;
	font-size: 12px; /* old browser */
	font-size: 0.75rem; line-height: 1em; /* 12/12 */
	letter-spacing: 0.05em;
	position: absolute; left: 0; top: 0; z-index: 3000;
	padding: 0.5em 1em 0.5em 0.5em; /* 6 12 6 6 */
	color: white;
	background-color: #D95204; /* old browsers */
		background-color: rgb(217,82,4); /* Orange */
	border-radius: 0 0 0.5625em 0;
}

.t-regional-landing .nav-region-utilities {
	padding: 2.25em 1.125em 1.125em 2.25em;
	min-height: 7.3125em; /* 10.6875em - margin */
}
	.t-regional-landing .nav-region a:hover .nav-region-utilities,
	.t-regional-landing .nav-region a:focus .nav-region-utilities {
		background-color: #FFFFFF; /* old browsers */
		background-color: rgba(255,255,255,0.8); /* WHITE@20% */
	}
		.ie8 .t-regional-landing .nav-region a:hover .nav-region-utilities,
		.ie8 .t-regional-landing .nav-region a:focus .nav-region-utilities {
		/*
			Using opacity since CSS3PIE didn't work on server.
			Note that this also makes the text semi-opaque, so
			don't lighten any further.
		*/
			color: #121614; /* Darken text by a factor of 1.25 to compensate for opacity. */
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* list with prefix first */
			filter: alpha(opacity=80); /* list second, after prefixed rule */
		}

.t-regional-landing .nav-region-utilities > li {
	padding:0.25em;

	list-style-type: disc;
	font-size: 12px;
	font-size: 0.75rem; line-height: 1.1666em; /* 12/14 */
	color: #4C5A52; /* old browsers */
	color: rgb(76,90,82); /* ESG-Grey@100 */
}
	.t-regional-landing .nav-region a:hover .nav-region-utilities li,
	.t-regional-landing .nav-region a:focus .nav-region-utilities li {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}
/* ------------------------------------- Regional Contact Info Footer */
.t-regional-landing .l-footer-contact {
	padding: 0.5em 1em 0.5625em 1em;
	background-color: #423C2F; /* old browsers */
	background-color: rgb(66,60,47); /* ESG-Brown */
}
	.ie8 .t-regional-landing .l-footer-contact {
		padding: 0.5em 1em 0.5625em 1em;
	}
.t-regional-landing .l-footer-contact p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-size: 0.625rem; line-height: 1em;
	text-align: center;
	color: white;
}


/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
   MEDIAQUERY
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */
@media screen and (min-width:321px) {
.t-regional-landing .nav-region-california {
	background-position: 0% 50%;
}

/* END MEDIA QUERY */}
@media screen and (min-width:466px) {
.t-regional-landing .nav-region {
	float: left;
	width: 47.85714%;
	margin-right: 4.28571%;
}
	.t-regional-landing .nav-region:nth-child(2) {
		margin-right: 0em;
	}

.t-regional-landing .nav-region-california {
	background-position: 10% 0%;
	background-size: 140% auto;
}
.t-regional-landing .nav-region-northwest {
	background-position: 50% 30%;
	background-size: 140% auto;
}
.t-regional-landing .nav-region-northeast {
	background-position: 40% 30%;
	background-size: 200% auto;
}
/* END MEDIA QUERY */}
@media screen and (min-width:747px) {
.l-wrapper {
	width: 90%;
	max-width: 747px;
	margin: 3.375em auto 0.5625em auto;
	border-radius: 0.5625rem;
	box-shadow: 0 0 0.25em rgba(0,0,0,0.8);
}
.l-footer-legal {
	max-width: 711px;
	margin: 0 auto 0 auto;
}
.t-regional-landing .l-main {
	padding: 3.375em 3.9375em 3.9375em 3.9375em;
	border-radius: 0.5625rem 0.5625rem 0 0;
}

.t-regional-landing .l-footer-contact {
	padding: 0.5em 1em 0.5625em 1em;
	border-radius: 0 0 0.5625rem 0.5625rem;
}

.t-regional-landing .nav-region {
	float: left;
	width: 31.400966%;
	margin-right: 2.8985507%;
}
	.t-regional-landing .nav-region:nth-child(2) {
		margin-right: 2.8985507%;
	}
	.t-regional-landing .nav-region.last {
		margin-right: 0em;
	}
.t-regional-landing .nav-region-california {
	background-position: 0% 0%;
	background-size: 100% auto;
}
.t-regional-landing .nav-region-northwest {
	background-position: 0% 30%;
	background-size: 100% auto;
}
.t-regional-landing .nav-region-northeast {
	background-position: 0% 30%;
	background-size: 100% auto;
}

/* END MEDIA QUERY */}


/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
-------------------------- NOTHING BEYOND THIS BLOCK ---------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */