@import url('/whc3/css/fonts.css');

/*------------------------------------------------------------*/ 
/*                         Standards                          */ 
/*------------------------------------------------------------*/

.clearFloat {
	clear: both;
	height: 0;
	line-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: px; /*for IE*/
}

.icon {padding-left: 3px; margin-right: 5px; vertical-align: baseline;}

IMG {vertical-align: top;}

A IMG {border: none;}

/* ------------------------------------------------------------ 
                         OVERRIDES 
---------------------------------------------------------------*/
BODY {
	font-family: "OpenSans", Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.6em;
	font-weight: normal;
	margin: 18px 0px 18px 0px;
	background-color: #e6e7e8; /* Old browsers */
	text-align: left;
}
@media (min-width: 768px) { /* tablet */
	BODY {font-size: 13px; line-height: 1.6em;}
}

/* ----------- Below overrides the print styles from the bootstrap.css file --------- */
@media print {
	a[href]:after {
		content: none;
	}
	  abbr[title]:after {
		content: none;
	  }
	  a[href^="javascript:"]:after,
	  a[href^="#"]:after {
		content: none;
	  }	
	.navbar {
		display: inherit;
	}
}
/*--------- end print overrides ----------*/


/*--------- no-gutter: remove spacing between columns ------------*/
/* add no-gutter class to row */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:0;
  padding-left:0;
}
/* the below have been changed from the originals */
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
  padding:0;
}
/* remove left padding from last column */
.row.no-gutter [class*='col-']:last-child {
  padding:0;
}
/* --- end  no-gutter --- */


/*--------- row compressed: change the col gutter width to make it smaller than the default 30px -- for .rows with an added class of .compressed ------------*/
.row.compressed {margin-left: 0px !important; margin-right: 0px !important;}
.row.compressed [class*="col-"] {padding-right: 15px !important; padding-left: 0px !important;}
/* end gutter width */

h1, h2, h3, h4, h5,
.h1 .h2, .h3, .h4, .h5 {
	text-rendering: optimizeLegibility;
}
h2 + ul {margin-top: 15px;}


p {margin-bottom: 15px; text-rendering: optimizeLegibility;}

ul li, ol li {margin-bottom: 5px; text-rendering: optimizeLegibility;}

a, a:visited {color: #3f4750; cursor:pointer;}
a:hover {color: #00aeef;}

ul.noIndent {list-style-position:inside; padding-left:0px;}

/* ------------------------------------------------------------ 
                         FRAMEWORK AND HEAD BANNER
---------------------------------------------------------------*/

.framework {
	margin-left: auto;
	margin-right: auto;
	width: 970px;
	text-align: left;
	border: 1px solid #000;
	background-color: #fff;
	margin-bottom: 32px;
}

.headBanner {
	margin-top: 0px;
    height: 172px;
}

@media (max-width: 421px) {
  .headBanner {
  	background-image: url(/whc3/images/headbanner_340.gif);
    background-repeat: no-repeat;
    height: 99px;
  }
}

@media (min-width: 422px) and (max-width: 480px) {
  .headBanner {
    background-image: url(/whc3/images/headbanner_480.gif);
    background-position: top left;
    background-repeat: no-repeat;
    height: 124px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .headBanner {
    background-image: url(/whc3/images/headbanner_768.gif);
    background-repeat: no-repeat;
    height: 136px;
  }
}
@media (min-width: 769px) {
  .headBanner {
    background-image: url(/whc3/images/headbanner_768.gif);
    background-repeat: no-repeat;
    height: 136px;
  }
}

@media (min-width: 992px) {
  .headBanner {
    background-image: url(/whc3/images/headbanner.gif);
    background-repeat: no-repeat;
    height: 172px;
  }
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#content {
	width: 970px;
	padding-top: 0px;
	max-width: 100%;
	border: 1px solid #000;
	background-color: #FFFFFF;
}

/* ------------------------------------------------------------ 
                         ACCESSIBILITY
---------------------------------------------------------------*/
#skiptocontent a {
	position: absolute;
	top:-40px;
	left:0px;
	font-family: "OpenSans", OpenSans, Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-weight: bold;
	color:#ffffff;
	padding: 8px 20px;
	border-right:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	border-bottom-right-radius: 0;
	background:transparent;
	-webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100;
}

#skiptocontent a:focus {
	position:absolute;
	left:0px;
	top:0px;
	background:#0071A9;
	outline:0;	
	-webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear;
}

/* ------------------------------------------------------------
            //! COLOR SWITCHER
---------------------------------------------------------------*/
.colorSwitcher {
margin-top: 0px;
  margin-bottom: 10px;
}
.colorSwitcher {
  margin-top: 0px;
}
.colorSwitcher a.btn {
  font-size: .8em;
  line-height: 1;
  padding: 4px 12px;
  font-weight: normal;
  margin-right: 10px;
  background: #39454e;
  color: #ffffff;
  border-color: #ffffff;
}
.colorSwitcher a.btn:hover {
  text-decoration: none;
  background: #f5a81c;
  border-color: #ffffff;
}
.colorSwitcher a.btn.active {
  background: #00a4e4;
  color: #ffffff;
}
.colorSwitcher a.btn.active:hover {
  text-decoration: none;
  background: #0092cb;
}
.colorSwitcher a.btn#highContrast {
  background-color: #39454e;
}
.colorSwitcher a.btn#highContrast:hover {
  background: #f5a81c;
  }
  .colorSwitcher a.btn.active#highContrast:hover {
  background: #0092cb;
  }



/* ------------------------------------------------------------ 
                         MAIN NAVBAR
---------------------------------------------------------------*/
#navbarBox {
  background-color: #009BDF;
  height: 30px;
  max-width: 100%; 
  border: 0px;  
  clear: both;
}

.navbar li {padding-top: 5px; margin-bottom: 0;}

.navbar-default {
  background-color: #009BDF;
  border-radius: 0px;
}

.navbar-collapse {
	background-color: #009BDF;
	max-height: 100%;
}

.navbar-collapse UL {
	margin-top: 0;
	margin-bottom: 0;
}

.navbar-default .navbar-nav > li#locations.open  > a,
.navbar-default .navbar-nav > li#locations.open  > a:hover,
.navbar-default .navbar-nav > li#locations.open  > a:focus {
	color: #FFFFF;
	background-color: #009BDF;
}

	
	@media (min-width: 768px) { /* tablet */
		.navbar-collapse {
			background-image: none;
			background-color: none;
			padding-right: 0px;
			padding-left: 0px;
			border-radius: 5px;
		}
	}	


/* ------------- navbar toggle ------------- */
.navbar-default .navbar-toggle {
  border-color: #000000;
  background-color: #35414d;
  padding: 7px;
  margin: 8px 20px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #009BDF;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #FFFFFF;
}
/* end navbar toggle */

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover {
    color: #FFFFFF;
    font-size: 1em;
    margin-left: 5px;
}
.navbar-default .navbar-nav {
	margin-bottom: 10px;
}


/*-------------- default (mobile) state of navbar items --------------*/
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:link,
.navbar-default .navbar-nav > li > a:visited {
	margin: 0;
	padding: 0px 20px 0px 20px;
	color: #FFFFFF;
	line-height: 30px;
	border-right: none;
	font-family: "OpenSansSemiBold", Arial, Helvetica, sans-serif;
	font-size: 1em;
}
.navbar-default .navbar-nav >  li > a:focus,
.navbar-default .navbar-nav >  li > a:hover {
	color: #E67125;
}

/* set dropdown menu to color of section */
.navbar-default .navbar-nav > li#locations .dropdown-menu > li > a {color: #FFFFFF;}
.navbar-default .navbar-nav > li#locations .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav > li#locations .dropdown-menu > li > a:hover {
	color: #FFFFFF;
	background-color: #E67125;
}
.navbar-default .navbar-nav > li#locations.open  > a,
.navbar-default .navbar-nav > li#locations.open  > a:hover,
.navbar-default .navbar-nav > li#locations.open  > a:focus {
	color: #FFF;
	background-color: #E67125;
}

@media (max-width: 767px) {
	.navbar-nav .open .dropdown-menu .dropdown-header {padding: 5px 10px 5px 0px;}
	.navbar-default .navbar-nav > li#locations > a:hover {background-color: #009BDF; color: #E67125; }
}

/*-------------- default (tablet) state of navbar items --------------*/	
	@media (min-width: 768px) { /* tablet */
		.navbar {margin-bottom: 0;}
		.navbar-default .navbar-brand {display: none;}
		.navbar-default .navbar-nav {padding-left: 20px;}
		
		.navbar-default {background: none; border: 0;}
		.navbar-default .navbar-toggle {background: none; border: 0;}
		.navbar-collapse {background: none; border: default;}
	
		.navbar-collapse .dropdown-menu {background-color: #009BDF;}
		
		
		.navbar-default .navbar-nav > li > a,
		.navbar-default .navbar-nav > li > a:link,
		.navbar-default .navbar-nav > li > a:visited,
		.navbar-default .navbar-nav > li > a:active {
			border-right: none;
			text-shadow: none;
			padding: 0px 10px 0px 10px;
			line-height:20px;
		}
		
		.navbar-default .navbar-nav > li > a:hover { color: #E67125; text-shadow: none; background: none; text-decoration: none;}
		.navbar-default .navbar-nav > li > a:focus { color: #E67125; text-shadow: none; background: none; text-decoration: none;}
						
	}

/*-----------------------------------------------------------
                          CONTENT COLUMN					
--------------------------------------------------------------*/
.leftCol {

}

.leftCol h1 {
    font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif;
	color: #009BDF;
	font-size: 22px;
	font-weight: bold;
	margin: 20px 5px 15px 20px;
	}
.leftCol h2 {
    font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif;
	color: #009BDF;
	font-size: 16px;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 10px;
	margin-left: 20px;
}
.leftCol h3 {
    font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif;
	color: #009BDF;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
	margin-right: 10px;
	margin-left: 20px;
	padding-top: 5px;
}


.leftCol p {
    font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 18px;
	margin-left: 20px;
	margin-right: 15px;
}

.leftCol ul li {
    font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.3em;
	margin-left: 15px;
	margin-right: 10px;
}

#walkPic {
	margin-top: 10px;
	margin-left: 20px;
}

@media (max-width: 535px) {
	#walkPic {margin-left: 5px;}
}

@media (max-width: 480px) {
	.leftCol h1 {margin-left: 5px;}
	.leftCol h2 {margin-left: 5px;}
	.leftCol img {margin-left: 0px;}
	.leftCol p {margin-left: 5px;}
	.leftCol ul li {margin-left: 0px;}
}

.leftCol a {
	color: #009BDF;
}


/*-----------------------------------------------------------
                     FACEBOOK AND LOGOS COLUMN					
--------------------------------------------------------------*/
.rightCol {
	padding-left: 20px;
	padding-top: 60px;
}

.rightCol .fb img {
	margin-left: 20px;
	margin-top: 20px;
	float: left;
}

.rightCol .hmbs {
	float: left;
	margin-bottom: 30px;
}

.rightCol .hmbcbs {
	float: left;
	margin-bottom: 30px;
}
.rightCol .hmbcbsde {
	float: left;
	margin-bottom: 30px;
}

.disclaimer {
	width: 192px;
	font-size: 9px;
	color: #585858;
	line-height: 10px;
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 7px;
}
@media (max-width: 480px) {
	.disclaimer {padding-right: 10px;}
}


/* ---------------------------------------------------------------------------------- 
                         COLLAPSIBLE PANELS (ACCORDION)
--------------------------------------------------------------------------------------*/
.btnOpenClose {margin-top: 20px; margin-bottom: 15px; }

.panel-group {clear: both; margin-bottom: 30px;}
.panel-group .panel {border-radius: 0;}
.panel.panel-default {margin-bottom: 10px;}

.panel-default > .panel-heading {background-color: #f8f9fa; padding: 7px 10px;}
.panel-heading .accordion-toggle:after {
    /* symbol for "open" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    font-size: .7em;
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: #97a5ae;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

.panel-title {
	font-family: 'OpenSansCondensed', Arial, Helvetica, sans-serif; 
	font-size: 1.1em; 
	line-height: 1.2em;
	font-weight: bold;
	color: #00adee;
}
.panel-body {font-size: .9em; line-height: 1.4em; padding: 10px 10px 0px 10px;}
.panel-body h4, .panel-body .h4 {font-size: 1.2em;}
.panel-body h4:first-child, .panel-body .h4:first-child {margin-top: 5px;}

	@media (min-width: 768px) { /* Tablet: 750-30=720 */
		.panel-body {font-size: .9em; padding: 10px 15px 0px 15px;}
	}


/* ------------------------------------------------------------ 
                         FORMS 
---------------------------------------------------------------*/


form {
	margin-left: 10px;
	margin-right: 10px;
    font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif;
	font-size: 1em;
}

.form-horizontal .control-label {margin-bottom: 5px; text-align:left;}
.input-sm {border-radius: 0;}
.form-horizontal .form-group {margin: 0 0 10px 0;}
.form-horizontal .has-feedback .form-control-feedback {right: 0px;}

@media (min-width: 768px) { /* Tablet */
	/* --- put padding back on the .col's when inside a form. 
	this is used on the side-by-side form layout --- */
	.row.no-gutter .form-group [class*='col-'] {padding-top: 15px;}
}



/* below overrides the default of 27px min-height because checkboxes and radios don't need as much vertical space between them. */
.form-horizontal .control-label {padding-top: 5px;}
.form-horizontal .checkbox,
.form-horizontal .radio {padding-top: 0px; min-height: 10px;}

/* ------------------------------------------------------------ 
             SOCIAL PAGE ICONS AND REGISTER BUTTONS 
---------------------------------------------------------------*/

.fb-page {margin-left: 20px;}

@media (max-width: 480px) {
	.fb-page {margin-left: 5px; display: block}
}

#badge {
	float: left;
	margin: 5px 10px 8px 20px;
}
#badge img {
	float: left;
	margin: 5px 10px 10px 20px;
}
@media (max-width: 480px) {
	#badge {margin-left: 5px;}
	#badge img {margin-left: 5px; margin-bottom: 20px;}
}



/* ------------------------------------------------------------ 
                         Carousel 
---------------------------------------------------------------*/

#promoCarousel {max-width: 330px; margin: 0 15px;}

.carousel {margin: 0;}

.carousel .item IMG {max-width: 100%; margin: 0px;}

.carousel-caption {
max-width: 330px;
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	padding: 5px 0 10px;
	margin: 0;
	color: #000;
	text-align: left;
	text-shadow: none;
	border-left: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	border-bottom: 1px solid #c0c0c0;
}

/* ------------ below is for the carousel fonts -------------- */

.carousel-caption {
    font-family: 'OpenSansCondensed', Arial, Helvetica, sans-serif;
	font-size: .9em;
	line-height: 1.1em;
	margin: 2px 0 2px 0;
}

.carousel-caption A {text-decoration: underline;}

.carousel-control {
	z-index: 100; 
	height: 25px; 
	outline: none !important; 
	text-shadow: none; 
	opacity: 1; 
	width: 10px;
	/*background-color: blue; */
	text-align: left;
}
.carousel-control:hover,
.carousel-control:focus {background-color: #c0c0c0;}

/* below is to remove the filter background - used only for IE8 */
.carousel-control.left {background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.carousel-control.right {background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}
/* end */

.carousel-control .chevronText {
	font-family: "OpenSansSemiBold", Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 30px;
	color: #FFF;
}
.left.carousel-control .chevronText {padding: 0 25px;}
.right.carousel-control {text-align: right;}
.right.carousel-control .chevronText {padding: 0 25px}
.carousel-control .chevronText {display: none; /* don't display text on small viewport */}

.carousel-control .glyphicon-chevron-left {
	font-size: 10px !important;
	line-height: 30px;
	color: #FFFFFF;
	left: 10px;
	top: 0;
	text-align: left;
	margin-left: 0 !important;
	margin-top: 0 !important;
}
.carousel-control .glyphicon-chevron-right {
	font-size: 10px !important;
	line-height: 30px;
	color: #FFFFFF;
	right: 10px;
	top: 0;
	text-align: right;
	margin-left: 0 !important;
	margin-top: 0 !important;
}

.carousel-control:hover .glyphicon-chevron-left,
.carousel-control:hover .glyphicon-chevron-right,
.carousel-control:focus .glyphicon-chevron-left,
.carousel-control:focus .glyphicon-chevron-right {}

@media (min-width: 360px) {	
	.carousel-control {width: 85px; height: 30px;}
	.carousel-control .chevronText {display: inherit;}
}
@media (max-width: 360px) {	
	.carousel-control {width: 30px; height: 30px;}
}

/* change the style of the radios nav */
.carousel-indicators {
	position: absolute;
	margin: 0;
	padding: 0;
	padding-top: 40px;
	padding-left: 20px;
	bottom: 25px;
	left: 0px;
	width: 330px;
	height: 30px;
	text-align: left;
}
@media (max-width: 530px) {	
	.carousel-indicators {width: 125px; text-align: left; margin-left: 5px;}
}
.carousel-indicators LI {
	background-color: #c0c0c0; 
	border: 1px solid #49535a;
	width: 10px;
	height: 10px;
	margin: 0px;
}
.carousel-indicators .active {
	background-color: #009BDF;
	border: 1px solid #000000;
	width: 10px;
	height: 10px;
}
/* end */



/* -----------------------------------------
                       FOOTER
 ------------------------------------------- */
 #footer {
 	max-width: 100%;
	float: left;
	background-color: #009BDF;
	margin-top: 60px;
	margin-bottom: 25px;
	padding-right: 10px;
 }
 
#footer p {
    font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	margin-left: 33px;
	margin-right: 10px;
	padding-top: 10px;
	padding-bottom: 0px;
}

#footer  A {color: #FFFFFF; text-decoration: none;}
#footer  A:visited {color: #FFFFFF;}
#footer  A:hover {color: #FFFFFF; text-decoration: underline;}
#footer  A:focus {color: #FFFFFF; text-decoration: underline;}

 .footerLeft {}
 .footerRight {text-align: right;}

@media (max-width: 768px) {
	#footer p {margin-left: 20px;}
}
@media (max-width: 480px) {
	#footer p {margin-left: 10px;}
	.footerRight {text-align: left;}
}