/* - - - - - - - - - - - - - - - - - - - - - */
/* CSS specifications for responsive columns */
/* - - - - - - - - - - - - - - - - - - - - - */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	}
body { width: 98.5%; }
/* body { font-family: verdana, arial, sans-serif; font-size: 18px; } */
body {
	font-family: 'Stag Sans Web', arial, sans-serif;
	font-weight:  400;
	font-style:   normal;
	font-stretch: normal;
	}

#bannerContainerOuter {
    float:left;
    width:100%;
    background:#fff;
    /* overflow:hidden; */
    position:relative;
	margin: 0 .5em;
	clear:both;
	}

	#pageOptions {
		float:left;
		width:100%;
		/* overflow:hidden; */
		position:relative;
		margin: 0;
		clear:both;
	}

	#bannerSearchContainer {
		clear:both;
		float:left;
		width:100%;
		/* background:#ccc; */
		overflow:hidden;
		position:relative;
		margin: 0 0 0 0;
		}

		#searchField {
			float: right;
			width: 100%;
			height: 46px;
			z-index: 10;
			overflow-y: hidden;
			}
		#searchFieldCR {
			float: right;
			margin: 0px;
			margin-top: -12px;
			padding: 0px;
			width: 400px;
			}

	#bannerHeadingContainer{
	clear:left;
		float:left;
		width:100%;
	/* background:#f00; */
	position:relative;
		margin: 0 0 0 0;
	/* border:1px solid black; */
	height: auto;
	}

		#bHCLogoContainer {
			display:inline; float:left; margin-left:.5em; }
		#bHCsiteNameContainer {
			display:inline; color: #000; background-color: #fff; }

#topNav {
	clear:both;
	float:left;
	width:100%;
	overflow:hidden;
	margin: 0 0 0 .5em;
	}

.columnsContainer { position:static; width:100%; margin: 0 .5em 0 .5em; padding-top:0em; }

	.leftColumn {
		border: 1px solid #ccc;
		padding: 1.25em;
		margin-bottom: .5em;
		width: 20%; max-width:500px; min-width:200px;
		float:left;
		margin-right:.5%;
	}
	.contentColumn {
		border: 1px solid #ccc;
		padding: 1.25em;
		float:left;
		width: 79.5%;
		min-width:30%;
	}
 	.rightColumn {
		border: 1px solid #ccc;
		padding: 0em;
		float:left;
		width: 15.8em;
		margin-left:.5em;
	}
#footerContainer3 {
    float:left;
    width:100%;
    background:#fff;
    overflow:hidden;
    position:relative;
	margin: 0 .5em;
	}
#footerContainer2 {
    float:left;
    width:100%;
    background:#fff;
    position:relative;
    right:30%;
    overflow:hidden;
	}
#footerContainer1 {
    float:left;
    width:100%;
    background:#fff;
    position:relative;
    right:40%;
	}
#footerCol1 {
    float:left;
    width:26%;
	position:relative;
    left:72%;
    overflow:hidden;
	}
#footerCol2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
	}
#footerCol3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
	}
/* - - - - - - - - - - - - - - - - - - - - - */
/* CSS specifications for scalable images */
/* - - - - - - - - - - - - - - - - - - - - - */
.scalable {
	height:auto;
	width:100%;
	max-width:100%;
	min-width:10em;
	}
.xscalable {
	height:auto;
	max-width:100%;
	min-width: 1em;
	}
/* - - - - - - - - - - - - - - - - - - - - - - */
/* Media specifications for responsive text size */
/* - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 1100px) {
 	body  { background-color:#fff !important; }
	.leftColumn { left:25.5%; width:100%; }
	.contentColumn { width:100%;  background-color:#fff; }
	#footerCol1 { clear:both; left:72%; width:100%; text-align:left;  }
	#footerCol2 { clear:both; left:36%;  width:100%; float:left; margin-left:0;  }
	#footerCol3 { clear:both; left:-1%; width:100%; float:left; margin-left:0; }
}
@media screen and (max-width: 900px) {
	.contentColumn { background-color:#fff !important; }
 	body  { background-color:#fff !important; }
	#footerCol1 { clear:both; left:72%; width:100%; text-align:left;  }
	#footerCol2 { clear:both; left:38%;  width:100%; float:left; margin-left:0;  }
	#footerCol3 { clear:both; left:1%;  width:100%; float:left; margin-left:0; }
}
@media screen and (max-width: 800px) {
	.contentColumn { background-color:#fff !important; }
 	body  { background-color:#fff !important; }
	#footerCol1 { clear:both; left:72%; width:100%; text-align:left;  }
	#footerCol2 { clear:both; left:43%;  width:100%; float:left; margin-left:0;  }
	#footerCol3 { clear:both; left:4%;  width:100%; float:left; margin-left:0; }
}
@media screen and (max-width: 700px) {
	.contentColumn { background-color:#fff !important; }
 	body  { background-color:#fff !important; }
	#footerCol1 { clear:both; left:72%; width:100%; text-align:left;  }
	#footerCol2 { clear:both; left:43%;  width:100%; float:left; margin-left:0;  }
	#footerCol3 { clear:both; left:7%;  width:100%; float:left; margin-left:0; }
	#bannerSearchContainer { margin: 0 0 0 0; }
	#searchField { height: 63px; }
}
@media screen and (max-width: 650px) {
	.contentColumn { background-color:#fff !important; }
	body  { background-color:#fff !important; }
	#footerCol1 { clear:both; left:72%; width:100%; text-align:left;  }
	#footerCol2 { clear:both; left:45%;  width:100%; float:left; margin-left:0;  }
	#footerCol3 { clear:both; left:10%;  width:100%; float:left; margin-left:0; }

}
@media screen and (max-width: 600px) {
  body { font-size:20px; }/*  */
	body  { background-color:#fff !important; }
  h1 { font-size:1.25em;}
  p.siteName { font-size:1em; }
	.leftColumn { width:100%; }
	.contentColumn { width:100%;  background-color:#fff; }
	#footerCol1 { clear:both; left:72%; width:100%; text-align:left;  }
	#footerCol2 { clear:both; left:48%;  width:100%; float:left; margin-left:0;  }
	#footerCol3 { clear:both; left:28%;  width:100%; float:left; margin-left:0; }
	#connect-links { float:left; width:90%; padding-left:10%;  }
}
@media screen and (max-width: 550px) {
	.contentColumn { background-color:#fff !important; }
	body  { background-color:#fff !important; }
	#footerCol1 { clear:both; left:72%; width:100%; text-align:left;  }
	#footerCol2 { clear:both; left:50%;  width:100%; float:left; margin-left:0;  }
	#footerCol3 { clear:both; left:27%;  width:100%; float:left; margin-left:0; }
}
@media screen and (max-width: 500px) {
	.contentColumn { background-color:#fff !important; }
 	body  { background-color:#fff !important; }
	#footerCol1 { clear:both; left:72%; width:100%; text-align:left;  }
	#footerCol2 { clear:both; left:54%;  width:100%; float:left; margin-left:0;  }
	#footerCol3 { clear:both; left:36%;  width:100%; float:left; margin-left:0; }
	#footerCol3 img { width:50px; height:50px; }
}

/* 0190226 When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (min-width: 1001px) {
  #topNav a.icon i { display:none; }
 }
@media screen and (max-width: 1000px) {
  #topNav li:not(:first-child) {display: none;}
  #topNav a.icon {
    float: right;
    display: block;
  }
  #topNav li:not(:first-child) { line-height:0em !important; margin:  0 0 -.75em 0; }
  #topNav li { line-height:0em !important; margin: 0 0 -.75em 0; }
}
/* 20190226 The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1000px) {
  #topNav.responsive {position: relative;}
  #topNav.responsive a.icon {
    position: absolute;
    right: 1em;
    top: 1em;
  }
  #topNav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
  #topNav li:not(:first-child) { line-height:0em !important; margin:  0 0 -.75em 0; }
  #topNav li { line-height:0em !important; margin:  0 0 -.75em 0; }
}
/* - - - - - - - - - - - - - - - - - - - - - */
/* CSS to fix IE html 5 bug/issue */
/* - - - - - - - - - - - - - - - - - - - - - */
main {
    display: block
	}
details {
    display: block
	}
summary  {
    display: block
	}
/* - - - - - - - - - - - - - - - - - - - - - */
/* CSS to make tables responsive */
/* - - - - - - - - - - - - - - - - - - - - - */
table {
    border-collapse: collapse;
	}
table, th, td, tr {
    border: 1px solid black;
	}
th, td {
	padding: .25em .5em; text-align: left;
	}
@media screen and (max-width: 500px)
{
	th, td { display:block; border: none; }
	th:first-of-type:after, td:first-of-type:after { content: ": "; }
	#searchFieldCR th:first-of-type:after,
		#searchFieldCR td:first-of-type:after { content: ""; }
	#searchFieldCR { width:300px; }
	#searchField {  }
	#bannerSearchContainer { margin-bottom: 20px; }
}