/* CSS Document */
/* override global declarations here - we do not want highway bg-img in the RC header */
#resources #programtitle {background: #063472 url(/images/fhwa2/bg/bg_headersm.png) left top repeat-x;}
#resources #programtitle .fhwacontainer {background:transparent;}

/* ********** COLORS: ************
* originally given didn't work well - 
*  Dark Blue: #183257
*  Mid Blue: #026AA1
*  Light Blue: #5DBCD2
* 5/31/2017 --- changed colors ( light blue BG didn't pass WCAG Contrast Requirements, dark is way too dark - font appeared as black)
* 8/01/2017 --- made sure header/titles styles are applied not to just <p> tags, so to  be able to implement semantic markup (e.g. h5)
******************************* */
.DarkBlue {color: #1e4d88;} 
.MidBlue {color: #015582;}
.LightBlue {color: #4474aa;}
.DarkBlueBG {background-color: #183257;color:#fff; }
.MidBlueBG {background-color: #015582;color:#fff; }
.LightBlueBG {background-color: #4474aa;color:#fff; }

h5.DarkBlueBG, h5.MidBlueBG , h5.LightBlueBG { padding:1px 5px; font-size:1.2em;}
h5, .h5 {font-size:1em; color:black; font-weight:bold;} /* class .h5 is for semantic html, when we want larger headers to look smaller */

a[href^="mailto:"] {
	text-transform: lowercase;
}
.resource-ctr-container {
  background-color:#ddd !important;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}
.resource-ctr-container h1 {
  color: #000;
  font-size: 24px; 
  margin: 0 0 10px 0;
  padding:0;	
}
.resource-content-block {
  background-color: #f7f7f7;
  padding: 2px 10px 10px;
  margin-bottom: 18px;
  min-height: 90px;
}
.resource-content-block-half {
  background-color: #f7f7f7;
  padding: 2px 10px 10px;
  min-height: 100px; 
}

.full-container-boxes {
  margin: 0 0 15px 0;
  display: block;
}
.half-container-boxes {
  width: 463px;
  float: left;
  margin: 0 0 10px 0;
}
.half-container-boxes:nth-of-type(odd) {
  margin: 0 0 10px 10px;
}
.half-container-boxes:nth-of-type(even) {
  clear:left;
}
.head-title-bar {
  padding: 10px;
  display: block;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background-color:#4474aa; /* change to LightBlue from MidBlue #015582; /*#537362*/
  margin:0 auto;
  }
.half-container-boxes .head-title-bar {
  font-size: 16px;
  padding: 5px 10px;
  background-color:#015582;
}
/*** nth-child notation - if want to rotate colors for child .head-title-bar inside .half-container-boxes
 *** EXAMPLE: for 4 colors add 3 more declarations (4n+X) with numberation (X) in JS style (0 is 1st instance) 
	.half-container-boxes:nth-child(4n+0) .head-title-bar {background-color:#015582;}
*/

.hero-img-box {
  background-color: #f7f7f7;
  padding: 10px;
  margin-bottom: 15px;
}
.hero-img-box img {
  width: 920px;
}
.clear-left {
  clear: left;
}
.clear-both {
  clear: both !important;	
}
.clearfix {
  overflow: auto;
  zoom: 1;
}
/* button added to accordion for 508 */
button {
	font-size:1em;
	font-weight:600;
	color:#333;
	background-color: transparent;
	border: none;
}

/* accordion foldouts styles: used for courses originally, now - wherever we need fold-outs */
.grouptitle {
  font-weight: 600;
  color: #fff;
  background-color: #015582;
  padding: 5px 10px;
}
.coursetitle, .titlestyle {
  font-weight: 600;
  color: #333;
}
.coursetitle:hover, .titlestyle:hover, button:hover {
  cursor: pointer;
  color: #4474aa;
}
.groupdetail {
  margin-left: 10px;
}
.coursedetail {
  margin-left: 15px;
}

/* homepage */
.home-sidebar {
  width: 30%;
  display: inline-block;
}
.home-main-content-box {
  width: 68%;
  display: inline-block;
  float: right;	
}
.back-white {
  background-color: #fff; 
  padding-left:24px;	
}
.small-box-across {
  width: 144px;
  height: 205px;
  margin: 5px;
  padding: 0;
  float: left;
  background-color: #015582;
  color: #fff; 
}
.small-box-across img {
  width: 144px; 
  height: 140px; /* changed from 160px to accommodate the longer titles on the home page */
  margin: 0; 
}
.small-box-across p {
  display: table-cell;
  width: 144px;
  height: 45px;
  text-align: center;
  vertical-align: middle;
  margin: 0;
  padding: 0 5px;
  overflow: hidden;
}
.small-box-across a {
  color: #fff; 
  font-size: 12px;
  line-height: 1.2em;
}

.small-img-container {
  background-color: #f7f7f7;
  width: 100%; 
  overflow: hidden; 
  margin-top: 10px;
}

/* list with two column layout (no older IE) */
ul.rc-two-cols{
  list-style: disc outside none;
  -moz-column-count: 2;
	 -moz-column-gap: 30px;
  -webkit-column-count: 2;
	 -webkit-column-gap: 30px;
  column-count: 2;
	 column-gap: 30px;
}

table.staffnospan tr {
	vertical-align:top;
}
table.staffnospan th, 
table.groupdetail th, .groupdetail table th, 
table.coursedetail th, .coursedetail table th {
	text-align:left;
}
table.staffnospan tr td:nth-of-type(even) { /* awkwardly formatted tables - give some padding to the right col td (before the next row, for readability) */
  padding-top: 2.5px;
  padding-bottom: 10px;
}

/* disclaimer is usually on Links or Courses pages */
.disclaimer {
  font-style:italic;
  border-bottom: 2px solid #ccc;
  margin-bottom:20px;
  padding-bottom:10px;
}
.disclaimer span{
	font-style: italic; /*font-weight:bold; */
}

/* 9/4/20 remove padding from button tags */
button { padding: 0px; }