/* Web site designed & built by Mariella Smith 
   InSightGraphicDesign.net. © 2011, all rights reserved. 
   ########################################################################## */

/* ___________________________________________
   Contents
   -------------------------------------------
   
	A. HTML5 ✰ Boilerplate 2.0 using Normalize instead of Reset
		~A.1 HTML5 display definitions
		~A.2 Base
		~A.3 Links
		~A.4 Typography
		~A.5 Lists -- removed
		~A.6 Embedded content
		~A.7 Figures & Tables
		~A.8 Forms

My NOTE: block-level p, h1, h2, h3, etc. have default top & bottom margins. Set 'em how you want 'em. Also, Lists have default padding, margins, bullet styles. Keep the nav reset below, but delete the other list settings and set your own per each list -- unless you have a lot of lists.

	B. Primary Styles - Mariella's
		~B.0 @font-face
		~B.1 Resets
		~B.2 Type Styles
		~B.3 Main Sections
		~B.4 Map Styles
		~B.5 Fine-tuning, helpers
			
	C. Boilerplate 2.0 non-semantic helper classes
	D. Print Styles

   -------------------------------------------
   Color guide (see droptown.css for nav colors)
   -------------------------------------------
  #a60000 = Bright, Dark Red | heads, h1, h2
  #800000 = Dark Red rules
  #730b0b = Darker Red | h3, subheads?
  #c54001 = Lighter Red  |  h3
  #666a80 = Dove Gray background
  #00FF55 = Bright Green map highlight stroke
  #00571D = Dark Green map highlight fill (50%)
  #48d978 = Medium Green for selection highlights
   __________________________________________________________________________ */
   
/***  A  *** primary styles ###################################################
   HTML5 ✰ Boilerplate 2.0 using Normalize instead of Reset
   ########################################################################## */


/* =============================================================================
   ~A.1  HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   ~A.2  Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body {
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.231;
}

body, button, input, select, textarea { 
	font-family: Verdana, "Lucida Sans", Helvetica, sans-serif; 
	color: #222; 
}

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * ### changed hot pink to green ###
 */

::-moz-selection { background: #48d978; color: #fff; text-shadow: none; }
::selection { background: #48d978; color: #fff; text-shadow: none; }


/* =============================================================================
   ~A.3  Links
   ========================================================================== */

a { color: #002Bff; text-decoration: underline; } /* Boilerplate: 00e */
a:visited { color: #261aab; text-decoration: underline; } /* Boilerplate: 551a8b */
a:hover { color: #0073e6; text-decoration: underline; } /* Boilerplate: 06e */
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   ~A.4  Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

em { font-style: italic; } /* I added this one */

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

/* hr moved to ~B.3 Main Sections, line 650+ */

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   ~A.6  Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e */
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
}
/*
 * Correct overflow not hidden in IE9 
 */
svg:not(:root) { overflow: hidden; }

/* =============================================================================
   ~A.7  Figures & Tables
   ========================================================================== */

figure { margin: 0; }
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
	border: 2px solid #404980;
}
th, td {
	text-align: left;
	vertical-align: bottom;
	padding: 8px 16px;
	border: 1px solid #404980;
}
th { 
	background-color: #bfcaff;
	border-bottom: 2px solid #404980; 
}
tr:nth-child(odd) {
    background: #d9e0ff;
}
tr:nth-child(even) {
    background: #f7f9ff;
}


/* =============================================================================
   ~A.8  Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/* Consistent box sizing and appearance */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } /* box size includes border + padding */
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* Remove inner padding and border in FF3/4: h5bp.com/l  */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }



/***  B  *** PRIMARY STYLES ###################################################
   Author: Mariella Smith, InSightGraphicDesign.net
   ########################################################################## */


/* =============================================================================
	~B.0  Fonts
   ========================================================================== */

@font-face {
    font-family: 'FontSiteSansBoldCondensed';
    src: url('../fonts/FontSiteSans-BoldCd-webfont.eot');
    src: url('../fonts/FontSiteSans-BoldCd-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/FontSiteSans-BoldCd-webfont.woff') format('woff'),
url('../fonts/FontSiteSans-BoldCd-webfont.ttf') format('truetype'),
url('../fonts/FontSiteSans-BoldCd-webfont.svg#FontSiteSansBoldCondensed') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'FontSiteSansLightCondensed';
    src: url('../fonts/FontSiteSans-LightCd-webfont.eot');
    src: url('../fonts/FontSiteSans-LightCd-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/FontSiteSans-LightCd-webfont.woff') format('woff'),
url('../fonts/FontSiteSans-LightCd-webfont.ttf') format('truetype'),
url('../fonts/FontSiteSans-LightCd-webfont.svg#FontSiteSansLightCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'GaramondModernFSBold';
	src: url('../fonts/garamondmodernbold-webfont.eot');
	src: url('../fonts/garamondmodernbold-webfont.eot?iefix') format('eot'),
url('../fonts/garamondmodernbold-webfont.woff') format('woff'),
url('../fonts/garamondmodernbold-webfont.ttf') format('truetype'),
url('../fonts/garamondmodernbold-webfont.svg#webfontTQGAvffs') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
    font-family: 'GaramondModernFSItalic';
    src: url('../fonts/garamondmodernitalic-webfont.eot');
    src: url('../fonts/garamondmodernitalic-webfont.eot?iefix') format('eot'),
url('../fonts/garamondmodernitalic-webfont.woff') format('woff'),
url('../fonts/garamondmodernitalic-webfont.ttf') format('truetype'),
url('../fonts/garamondmodernitalic-webfont.svg#webfontjpGYFTVp') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'GaramondModernFSLight';
    src: url('../fonts/garamondmodernlight-webfont.eot');
    src: url('../fonts/garamondmodernlight-webfont.eot?iefix') format('eot'),
url('../fonts/garamondmodernlight-webfont.woff') format('woff'),
url('../fonts/garamondmodernlight-webfont.ttf') format('truetype'),
url('../fonts/garamondmodernlight-webfont.svg#webfontA6nWoHw6') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GaramondModernFSLightItalic';
    src: url('../fonts/garamondmodernlightitalic-webfont.eot');
    src: url('../fonts/garamondmodernlightitalic-webfont.eot?iefix') format('eot'),
url('../fonts/garamondmodernlightitalic-webfont.woff') format('woff'),
url('../fonts/garamondmodernlightitalic-webfont.ttf') format('truetype'),
url('../fonts/garamondmodernlightitalic-webfont.svg#webfontArTGItv9') format('svg');
    font-weight: normal;
    font-style: italic;
}

/* =============================================================================
	~B.1  Resets
   ========================================================================== */

ol, ul {margin:0; padding:0;}
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

/* =============================================================================
	~B.2  Type Styles
   ========================================================================== */

p {
	font-family: 'GaramondModernFSLight', 'Times New Roman', Times, serif;
	font-size: 16px;
	line-height: 20px;
	padding: 0px;
	margin: 0 0 12px 0;
}
p em {
	font-family: 'GaramondModernFSLightItalic', 'Times New Roman', Times, serif;
	font-style: italic;
}
p strong {
	font-family:'GaramondModernFSBold', 'Times New Roman', Times, serif;
	font-weight: bold;
}
h1 {
	font-family:'FontSiteSansBoldCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 40px;
	line-height: 40px;
	font-weight: bold;
	color: #a60000;
	text-align:center;
	margin: 0 0 16px 0;
}
h2 {
	font-family:'FontSiteSansBoldCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 22px;
	line-height: 24px;
	font-weight: bold;
	color: #a60000;
	/* [disabled]letter-spacing: 0.5px; */
	padding: 0;
	margin: 16px 0 8px 0;
}
h3 {
	font-family:'FontSiteSansBoldCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 20px;
	line-height: 22px;
	font-weight: bold;
	color: #730b0b;
	letter-spacing: 1px;
	margin: 16px 0 6px 0;
	padding: 0;
}
h4 {
	color: #000000;
    font-family: 'FontSiteSansboldCondensed','Helvetica Condensed',Verdana,sans-serif;
    font-size: 20px;
    line-height: 22px;
	font-weight: bold;
	margin: 6px 0 18px 0;
	padding: 0;
}
.subhead1 {
	font-size: 28px;
	line-height: 28px;
	text-align: center;
	margin: -12px 0px 12px 0px;
}
/* Tables */
th {
    font-family: 'FontSiteSansboldCondensed','Helvetica Condensed',Verdana,sans-serif;
    font-size: 18px;
    line-height: 20px;
	font-weight: bold;
}
td {
	font-family:'FontSiteSansLightCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 16px;
}

/* to make headlines, excerpts link to articles */
.teasers h2 a { color: #a60000; text-decoration: none; }
.teasers h2 a:visited { color: #a60000; text-decoration: none; }
.teasers h2 a:hover { color: #06e; text-decoration: underline; }
.teasers h2 a:focus, h { outline: none; }

.action {
	font-family:'FontSiteSansLightCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 18px;
	line-height: 22px;
	color: #002bff;
}
.action strong {
	font-family:'FontSiteSansBoldCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-weight: bold;
	font-size: 20px;
	line-height: 22px;
	color: #002bff;
	letter-spacing: 1px;
}
.action a:focus { outline: none; }
		
.readmo {
	font-family: 'GaramondModernFSLightItalic', 'Times New Roman', Times, serif;
	font-style: italic;
}

/* type in footer defined in footer sections below */

.footnote {
	font-family: Verdana, "Lucida Sans", Helvetica, sans-serif;
	font-size: 9px;
	text-align: right;
}
.blue {
	color: #002bff;
}
.build-built { /* accent d or t in Build-out & Built-out */
	color: #000;
	text-decoration: underline;
}

/* =============================================================================
	~B.3  Main Sections 
   ========================================================================== */
body {
	background-color:#666a80;
	background-image: url(../images/bg_noise.png);
}

#wrapper { /* centered wrapper for most pages */
	position: relative;
	width: 1018px;
	margin-right: auto;
	margin-left: auto;
	background-color:#ffffff;
	border-bottom: 2px solid #454857; 
	border-left: 2px solid #454857;
	border-right: 2px solid #454857;
}

#container {
	position: relative;
	width: 940px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 18px;
}
header {
	float: left;
	width: 230px;
}

/* Headers with no logo get class #no-logo-head (data-table.html) */

header#no-logo-head h1, /* The Price of Sprawl headline */
header#no-logo-head h1 a { 
	font-family:'FontSiteSansBoldCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 24px;
	line-height: 24px;
	font-weight: bold;
	color: #a60000;
	text-align:left;
	margin: 20px 0 4px 0;
	text-decoration:none;
}
header#no-logo-head h1 a:hover { 
	color: #06e; 
	text-decoration: underline; 
}
header#no-logo-head h2 { 
	font-family:'FontSiteSansBoldCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: 1px;
	font-weight: bold;
	color: #575C80;
	text-align:left;
	margin: 0;
}

#main-nav {
	float: right;
	width: 680px;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color:#000;
}
#main {
	float: right;
	width: 700px;
}

footer {
	position: relative;
	width: 940px;
	margin-right: auto;
	margin-left: auto;
	padding: 20px 40px 20px 40px;
	color:#ffffff;
}
footer p {
	font-size:15px;
	line-height:20px;
}
#fineprint {
	float: left;
	width: 100%;
	font-family: Verdana, "Lucida Sans", Helvetica, sans-serif;
	font-size: 11px;
	line-height: 30px;
	text-align: center;
	margin: -10px auto 0 auto;
}
#fineprint li {
	list-style-type: none;
	display: inline;
	padding: 0 9px 0 6px;
	border-right: 1px solid #ACB6E6;
	margin: 0;
}
#fineprint li.last {
	border-right: none;
}
footer a { color: #ffffff; text-decoration: underline; }
footer a:visited { color: #ffffff; text-decoration: underline; }
footer a:hover { color: #ffdf40; text-decoration: underline; }
footer a:focus { outline: none; }

#sidebar {
	float: left;
	width: 220px;
	margin-top: 15px;
}
#social {
	width: 220px;
	margin-top: -4px;
}
#social-wide {
	/* [disabled]border-top: 1px solid #666a80; */
	padding-top: 10px;
}
#social h3,
.social h3,
#social-wide h3 {
	color:#c54001;
}
#social-wide h3 {
	margin: 0 12px 0 0;
}
#social p,
.social p,
#social-wide p {
	font-family: 'GaramondModernFSLightItalic', 'Times New Roman', Times, serif;
	font-style: italic;
	font-size: 16px;
	line-height: 24px;
	color:#555555;
	margin: 6px 0 0 0;
}
#social-wide #share-pills {
	margin: 0 16px 10px 0;
}
#soc-icons-horiz, #share-pills {
	margin: 8px 0;
}
#soc-icons-horiz img {
	margin-right: 5px;
}
#soc-icons-vert {  /* ul within #social div - unused - previously used for vertical column */
	float: left;
	margin: 2px 15px 0 0;
	padding: 0;
	list-style: none;
}
#soc-icons-vert li {   /* unused - previously used for vertical column */
	margin-bottom: 10px;
}
#share-pills .fb-like,
#share-pills .twitter-share {
	float: left;
	margin: 0 8px 8px 0;
}
#share-pills .email-share { /* less right margin so the row breaks only with 5-digit Facebook likes */
	float: left;
	margin: 0 -5px 8px 0;
}

#main-article {
	position: relative;
	width: 650px;
	float: right;
	border: 1px solid #7d86b2;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	background-image:url(../images/grade1.png);
	background-repeat:repeat-x;
/* gradient fill from #d8dfff to #ffffff for 440px (about 50%)
	ie8 doesn't render text well over filter, so using image 
	CSS3: background: linear-gradient(top, #d8dfff 0%,#ffffff 50%);
*/
	-webkit-box-shadow: 2px 2px 5px #7d86b2;
	-moz-box-shadow: 2px 2px 5px #7d86b2;
	box-shadow: 2px 2px 5px #7d86b2;
	padding: 20px 25px 10px 25px;
}

/*  #####  These are just for contact.html  ##### */

#contact-main {
	position: relative;
	width: 680px;
	float: right;
	padding: 0;
	margin-top: 20px;
}

#contact-right {
	width: 180px;
	float: left;
	margin: 18px 0 20px 30px;
}

/*  #####  These are just for coming-soon.html  ##### */

#main-article_wrapper {
	position: relative;
	width: 650px;
	float: right;
}
#main-article.coming-soon {
	float: none;
	margin: 40px auto;
	background-image: none;
	background-color: #ffffff;
	width: 400px;
	padding: 25px;
}
#main-article.coming-soon h1 {
	color: #acb8e6;
}
#main-article.coming-soon p {
	color: #7d87b2;
	text-align: center;
	font-size: 18px;
	line-height: 27px;
}

/* ----------------  Columns & Callouts  -------------------- */

#water-alt { /* 2/3 in water article */
	float: right;
	width: 420px;
	background-image:url(../images/moneytap.jpg);
	background-repeat:no-repeat;
	background-position: 0px 20px;
	padding-top: 15px;
}
#water-action {
	float: right;
	width: 100px;
	padding-top: 190px;
	text-align:right;
	margin-right: 20px;
}
.col-half-art { /* half column in article, add .floatr to 2nd */
	float: left;
	width: 310px;
	position: relative;
}
.col-water { /* last in water article - floats right! */
	float: right;
	width: 280px;
}
.col205 { /* 1/3 column in article */
	float: left;
	width: 205px;
}
.col220 { /* 1/4 column */
	float: left;
	width: 220px;
}
.col440 { 
	float: left;
	width: 440px;
}

.callout {
	font-family: 'GaramondModernFSLightItalic', 'Times New Roman', Times, serif;
	font-style: italic;
	text-align:center;
	font-size: 18px;
	line-height: 24px;
	border-top: 3px solid #800000;
	border-bottom: 3px solid #800000;
	padding: 12px 0;
}
.callout strong {
	font-family:'GaramondModernFSBold', 'Times New Roman', Times, serif;
	font-weight: bold;
	font-style: normal;
	text-align:center;
	font-size: 18px;
	line-height: 24px;
}

/* -------------  Horizontal Rule  ------------ */

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

/* Gradient Rule: color1 - color2 - color1 */
		
hr.fade-ends {
	border: 0;
	height: 1px;
	background: #666a80;
	background-image: -webkit-linear-gradient(left, #C3C9E6, #666a80, #C3C9E6);
	background-image:    -moz-linear-gradient(left, #C3C9E6, #666a80, #C3C9E6);
	background-image:     -ms-linear-gradient(left, #C3C9E6, #666a80, #C3C9E6);
	background-image:      -o-linear-gradient(left, #C3C9E6, #666a80, #C3C9E6);
	background-image:         linear-gradient(left, #C3C9E6, #666a80, #C3C9E6);
}

/* -------------  frames  all have same border  ------------ */

.frame {
	border: 1px solid #222222;
}
.frame-mat { /* white mat */
	background-color: #ffffff;
	border:  1px solid #222222;
	padding: 10px;
}
.frame-shado {
	border: 1px solid #222222;
	-webkit-box-shadow: 3px 3px 5px #7d86b2;
	-moz-box-shadow: 3px 3px 5px #7d86b2;
	box-shadow: 3px 3px 5px #7d86b2;	
}

/* pop-out photos placed as inline images, with negative margins defined in id, plus .frame-shado class */

#suburbugly {
	margin: 0 0 20px -140px;
}
#glades-sprawl {
	margin: 0px 20px 10px -264px;
}
#traffic {
	margin: 5px -50px 15px 15px;
}

.mybutton {
	-moz-box-shadow: 2px 2px 2px 0 #D9E0FF inset;
	-webkit-box-shadow: 2px 2px 2px 0 #D9E0FF inset;
	box-shadow: 2px 2px 2px 0 #D9E0FF inset;
	background-color:#c2caf2;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #7d87b2;
	display:inline-block;
	color:#001580;
	font-family:Verdana;
	font-size:12px;
	font-weight:normal;
	padding:4px 8px;
	text-decoration:none;
	text-shadow:1px 1px 1px #ffffff;
}
.mybutton:hover {
	background-color:#acb6e6;
	color: #001580; 
	text-decoration:none;
}
.mybutton:active {
	position:relative;
	top:1px;
	color: #001580; 
	text-decoration:none;
}

.mybutton:visited { 
	color: #001580; 
	text-decoration: none;
}


/* =============================================================================
	~B.4  Rollover Map, Info-box Styles
   ========================================================================== */

#map-div {
	width: 700px;
	min-height: 530px;
	position: relative;
	float: right;
}
#map-holder {
	position: absolute;
	top: 0;
	left: 135px;
	width: 565px;
	z-index: 300;
}
#map-intro {
	width: 360px;
	position: relative;
	left: 20px;
	top: 76px;
	font-family: 'GaramondModernFSLightItalic', 'Times New Roman', Times, serif;
	font-style: italic;
	font-size:18px;
	line-height:23px;
}
#info-box {
	position: absolute;
	top: 210px;
	left: 0px;
	width: 420px;
	min-height: 264px;
	padding: 18px;
	background: #f1f3ff; /* Old browsers */
	/* gradient fill */
	background: -moz-linear-gradient(top, #ffffff 15%, #f1f3ff 85%, #e5eaff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#ffffff), 	color-stop(85%,#f1f3ff), color-stop(100%,#e5eaff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 15%,#f1f3ff 85%,#e5eaff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 15%,#f1f3ff 85%,#e5eaff 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 15%,#f1f3ff 85%,#e5eaff 100%); /* IE10+ */
	/*	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5eaff',GradientType=0 ); -- not confident in this for IE6-9 */
	background: linear-gradient(top, #ffffff 15%,#f1f3ff 85%,#e5eaff 100%); /* W3C */
	/* end gradient fill */
	border: 1px solid #7d86b2;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	-webkit-box-shadow:  2px 2px 5px #7d86b2;
	-moz-box-shadow:  2px 2px 5px #7d86b2;
	box-shadow: 2px 2px 5px #7d86b2;
}

.info-panel {
	position: relative;
	width: 416px;
	margin: 2px 0 0 2px;
}
#info-start {
	/* disabled margins used before */
}
#info-holder {
} 
.info-head {
	width: 100%;
	border-bottom: 1px solid #777;
	margin: 2px 0px 8px 0px;
	height: 18px;
}
.info-head h2 {
	font-size: 24px;
	line-height: 10px;
	letter-spacing: 1px;
	margin: 0;
	padding-bottom: 3px;
}
.info-head h2 .fine, .info-panel h4 .fine {
	font-size: 14px;
	line-height: 10px;
	font-weight: normal;
	font-family: 'FontSiteSansLightCondensed', "Lucida Sans", Helvetica, sans-serif;
	letter-spacing: normal;
	margin: 0;
	padding: 0;
}
.info-left {
	float: left;
	width: 220px;
}
.info-right {
	float: left;
	width: 170px;
	margin-left: 20px;
}
.info-panel h4 {
	font-family:'FontSiteSansBoldCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 20px;
	line-height: 22px;
	font-weight: bold;
	color: #000000;
	margin: 6px 0 0 0;
	padding: 0;
}
.info-panel h5 {
	font-family:'FontSiteSansBoldCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 16px;
	line-height: 18px;
	font-weight: bold;
	color: #444444;
	margin:0 0 0 20px;
	padding: 0;
}
.info-panel p {
	font-size: 14px;
	line-height: 16px;
	margin: 0;
}
.info-panel .value {
	color: #cc4400;
}
#chart-link { 
	position: absolute;
	top: 466px;
	left: 480px;
	z-index:301;
}

/* =============================================================================
	~B.5  Fine-tuning, helpers
   ========================================================================== */

.mt0 {
	margin-top:0px;
}
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}

.mr20 {margin-right:20px;}
.ml20 {margin-left:20px;}

.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}


/***  C  *** NON-SEMANTIC HELPER CLASSES  ##################################
   Please define your styles before this section.
   ########################################################################## */

/* Boilerplate image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

.block {display:block;}

/* Float/clear classes from DW templates */
.floatr {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.floatl { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear: both;
	height: 0; /*only necessary for IE */
	font-size: 1px;
	line-height: 0px;
}

.clearboth {clear: both;}

/* Boilerplate Clearfix to Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/***  D  *** PRINT STYLES *** removed at client's request *********************
   If you want to add them back, see HTML5 Boilerplate print styles: 
   https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
   ****************************************************************************/
 
@media print {
}