﻿@charset "utf-8";
/* CSS Document */

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, section, time, mark, audio, video, a { font-size: 100%; padding: 0; border: 0 none; margin: 0; }

body { font: 100%/1.4 Arial, Verdana, Helvetica, sans-serif; background-color: #fff; padding: 0; margin: 0; color: #333;}

article, aside, figure, footer, header, hgroup, nav, section { display: block; }

p, ul, ol, li { font-size: 1em; line-height: 160%; margin-bottom: 14px; }
p.center, h3.center { text-align: center; }

a { color: #17b; text-decoration: none; }
a:visited { color: #17b; text-decoration: underline; }
a:hover { text-decoration: underline; }

/* for skip navigation link, from webaim.org/techniques/css/invisiblecontent, "Skip to main content" links section */
#skip a { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
#skip a:focus { position: static; width: auto; height: auto; }

sup { font-size: 0.8em; vertical-align: top; }
p.bcrumb { font-size: 0.9em; font-style: italic; line-height: 140%; margin-bottom: 20px; } 

h1 { color: #036; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.5em; text-transform: uppercase; margin-bottom: 16px; }
h1#page_title a { display: none; color: #036; text-decoration: none; padding: 0; margin: 0; }
h2 { color: #500; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; text-transform: uppercase; padding-top: 10px; margin: 0 0 14px 0; }
h3 { color: #036; font-family: Arial, Helvetica, sans-serif; font-size: 1em; text-transform: uppercase; padding-top: 6px; margin: 0 0 14px 0; }
h3 a { color: #17b; }
h3 a:hover { text-decoration: underline; }
h4 { color: #500; font-family: Arial, Helvetica, sans-serif; font-size: 1em; padding-top: 6px; margin: 0 0 14px 0; }

header { /*position:fixed;*/ min-height: 138px; width: 100%; padding: 0; background-color: #fff; border-bottom: 10px solid #800; margin: 0; /*z-index: 999;*/ }
header #header_inside { max-width: 1102px; padding: 0 10px; margin: 0 auto; }
header #header_inside #logo { float: left; max-width: 25%; margin: 28px 0 0 0; }
header #header_inside #search { float: right; width: 50%; }
header #header_inside nav { font-size: 1em; float: right; width: 60%; /*height: 110px;*/ margin: 0; }
header #header_inside #message { float: right; max-width: 68%; margin-top: 34px; }

.fa { margin-bottom: 5px; } /* puts vertical space below the icons in the nav menu */

/* responsive nav menu moved to nav-nr.css */

#sticky { height: 148px; } /* for sticky header offset */
a.anchor {  } /* { padding-top: 158px; margin-top: -158px; }  anchor link style (needed due to fixed header; added 10px + 148px height of header) */

#slider { width: 100%; padding: 0; background-color: #036; border-bottom: 10px solid #800; margin: 0 auto; }
#slider #slider_inside { max-width: 1102px; line-height: 0; padding: 0 10px; margin: 0 auto; }
#slider #slider_inside img { max-width: 100%; border: 0; padding: 0; margin: 0; }
#slider #slider_inside li { margin-bottom: 0; }
/* from js/jcarousel.css -- Not needed? */
.jcarousel-wrapper { width: 100%; padding: 0; margin: 0 auto; position: relative; }
.jcarousel { position: relative; overflow: hidden; /*width: 100%;*/ max-width: 960px; line-height: 0; padding: 0; margin: 0 auto; }
.jcarousel img { display: block; max-width: 100%; height: auto !important; }

.container { font-size: 1em; max-width: 1102px; background-color: #fff; padding: 0 10px; margin: 0 auto; } /* for centering the #main div content */
#main { float: left; width: 100%; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; padding: 30px 0 34px 0; background-color: #fff; margin: 0 auto; }
#main ul, #main ol { list-style: none outside none; margin: 0 0 10px 20px; }
#main ul li, #main ol li { background: url("../images/bullet.gif") no-repeat scroll 0 8px; padding-left: 18px; }
#main ol { list-style-type: decimal; margin: 0 0 10px 24px; }
#main ol li { background: none; }

#main #left_col { float: left; width: 100%; padding: 0; border-right: none; margin: 0; } 
#main #left_col img { max-width: 100%; max-height: 100%; }

#main #left_col .image_right { float: right; margin: 0 0 20px 30px; }
#main #left_col .image_left { float: left; margin: 0 30px 20px 0; }
#main #left_col p.photo_caption, span.photo_caption { color: #555; font-size: 0.9em; line-height: 140%; }

footer { width: 100%; text-align: center; padding: 20px 0 50px 0; background-color: #ddd; margin: 0; }
footer .go-top { position: fixed; bottom: 1em; right: 2em; padding: 1em; /* display: none; */ }
footer #footer_inside { max-width: 1102px; margin: 0 auto; }
footer #footer_inside p { padding: 0; margin: 0 0 14px 0; }
footer #footer_inside p a {  color: #258; font-weight: bold; text-decoration: none; text-transform: uppercase; margin: 0 14px; }
footer #footer_inside p.hhs { font-size: 0.9em; }
footer #footer_inside p.hhs a { color: #258; font-weight: normal; text-transform: none; margin: 0; }

.clear { clear: both; }

/* July 13 video announcement */
.home_vid { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; text-align: center; margin: 10px 0 20px 0; }
.home_vid iframe, .home_vid object, .home_vid embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

/* FORM STYLES */
.mylabel { float:left; width:40%; text-align:right; padding-right:10px; }
.form { width:100%; }

tr.row td, tr.row th { padding: 3px 10px; text-align: left; }

table.videos { width: 100%; background-color: #ddd; }
table.videos td { padding: 4px; background-color: #fff; }

#CPH1_divDetail { float:left; font:inherit; font-size:13px; padding:2px 5px; width:auto; border:solid 2px #CCC; -moz-border-radius:0 7px 7px 0; -webkit-border-radius:0 7px 7px 0; border-radius:0 7px 7px 0; display:none; color:#333; }
#CPH1_divDetail p { font: inherit; }

@media screen and (max-width : 868px) {
	header { border-bottom: none; }
	header #header_inside { padding: 0; }
	header #header_inside #logo { float: none; padding-left: 1em; }
	header #header_inside #search { float: none; width: 100%; }
	header #header_inside #message { float: none; width: 100%; padding: 0 1em; } /* formerly nav bar */
	#slider { border-top: 10px solid #800; }
	
    /*Make left_col and right_col stack automatically on mobile phone*/
	#main { float: none; width: 100%; }
    #main #left_col { float: none; width: 100%; padding: 0; border-right: none; margin: 0; }
    #main #right_col { float: none; width: 100%; }
}

@media screen and (max-width : 480px) {
	h1#page_title a { display: block; margin: 1em 1em 0 1em; }	
	header #header_inside #logo { display: none; }
}

@media print {
    header { position: relative; width: 100%; }
    #main { float: none; width: 100%; }
    #main #left_col { float: none; min-width: 95%; border-right: none; padding: 0; margin: -148px 0 0 0; }
    #main #right_col { display: none; max-width: 5%; }
    footer { display: none; }
}