@charset "utf-8";
/* CUSTOM STYLES OF THE DFPS PUBLIC WEBSITE */
/*@import url("/incl/specialty/assets/css/font-awesome.min.css");*//*Updated with footer script in /incl/footer.html */
@import url("/css/fonts/aleo/aleo.css");

/*	main blue	#4376b3 (links and other elements)
	lighter		#5486c1 (hover state for above)
	darker		#396daa
	very light	#edf2f8 (table headers)
	super light	#f7fafc (hover state for above)
*/	
/*	Effective font sizes (adjusted using ems from Bootstrap's standard 13px)
	Main text: 15px
	Navigation (top menu, side menu, breadcrumbs, footer) and asides: 13.5px
*/
/*	DFPS logo colors:
	Red: hex #ab2328, rgb 171, 35, 40
	Blue: hex #003087, rgb 0, 48, 135
	Gold: hex #b47300, rgb 180, 126, 0
*/

/* ********** LEGACY STYLES ********** */
/* Don't use these, we're trying to get rid of them! */
/* Element box used only in 2004 and 2005 databooks to style the dropdown navigation box */
.elementbox {
	float: right;
	background-color: #EFF5F8;
	border: 1px solid #9FBFD0;
	font-size: 95%;
	margin: 0 0 10px 10px;
}
.elementbox td {
	white-space: nowrap;
}
.elementbox form {
	margin-bottom: 0;
}
.elementbox form select {
	margin-bottom: 4px;
	margin-top: 4px;
	padding-right: 2px;
	padding-left: 2px;
}
/* Data table extensively throughout the annual reports and databooks, including post-redesign ones that were cloned from pre-redesign ones...
   Also used in a handful of training modules designed in the style of the old website...
   Otherwise, all other instances have been converted to Bootstrap tables...
   The specialty sites also use a class called "datatable" but that's in their own style sheet... */
.datatable {
	margin-bottom: 15px;
}
.datatable, .datatable td, .datatable th {
	border: 1px solid #ddd;
	border-collapse: collapse;
}
.datatable td, .datatable th {
	padding: 5px;
	margin: 0px;
}
.datatable th {
	background-color: #edf2f8;
	font-weight: bold;
}
/* Page Menu for Databooks 2009-2015 */
#pagemenu {
	float: right;
	margin-bottom: 0;
}
#pagemenu select {
	background-color: #ffffff;
	margin-bottom: 3px;
}
#pagemenu input {
	margin-bottom: 3px;
}

/* ********** GLOBAL STYLES ********** */
.container-fluid { 
	margin: 0 auto;
}
#main_content {
	padding-top: 20px;
	padding-bottom: 10px;
	background-color: #FFF;
}
div:focus, footer:focus, header:focus {
	outline: none; /* turn off outline from tabindex in chrome and safari */
}
body {
	background-color: #CCC;
}
body, input, button, select, textarea { /* HHS uses Proxima Nova, a proprietary font; Montserrat is a Google substitute */
	font-family: proxima-nova, "Open Sans", Arial, sans-serif;
	color: #242424;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}
p {
	margin-bottom: 15px;
}
audio {
	max-width: 350px;
	max-height: 40px;
}
hr {
	border-top-color: #ddd;
	margin: 20px 10%;
}

/* ********** IFRAMES ********** */
.fitvidsignore {
/* FitVids is a javascipt we use to make videos responsive.
   While there's no styling attached to this class, it is here so that it shows up in applications like Dreamweaver.
   The 'fitvidsignore' class, when applied to an iFrame or object tag, tells the FitVids script ignore the video or  */
}
.google-maps {
/* wrap Google Maps in a DIV with this class to make the map responsive */
	position: relative;
	padding-bottom: 90%;
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ********** IMAGES ********** */
/* Bootstrap images have no border by default, so there's no need to specify border:none */
.image-left, .image-left-noborder {
	float: left;
	margin: 0 10px 10px 0 !important;
}
.image-right, .image-right-noborder {
	float: right;
	margin: 0 0 10px 10px !important;
}
.image-middle, .image-middle-noborder { /* behaves similar to deprecated align=absmiddle */
	vertical-align: middle;
	margin: 0 5px .25em 5px;
}
.image, .image-right, .image-left, img.featured, div.featured img, .image-middle, .i-am img, .small-img, .large-img, .top_nav .nav_panel img, .well.well-box img {
	border: 1px solid #ccc;
}
.image-left-noborder, .image-right-noborder {
	border: none !important;
}
div.featured img {
	margin-bottom: 5px;
}
.featured, .featured-noborder { /* apply this class to large images, or to a div around a video embed, to keep them from dominating the page */
	width: 90%;
	margin: 0 auto 15px;
    text-align: center;
	font-style: italic;
    clear: both;
}
.featured .fluid-width-video-wrapper {
	margin-bottom: 5px;
}
img.featured, img.featured-noborder {
	display: block;
}
#content-text img {
	height: auto;
}
/* I stole these from Bootstrap 2.3.2 - if/when we upgrade, we don't need these anymore... */
.img-circle {
	-webkit-border-radius: 500px;
	-moz-border-radius: 500px;
	border-radius: 500px;
}
.img-rounded {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
.img-polaroid {	
	padding: 4px;
	background-color: #fff;
}
.img-circle, .img-rounded, .img-polaroid {
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* ********** LINKS & BUTTONS ********** */
/* links */
a {
	color: #4376b3;
	text-decoration: none;
}
a:hover, a:focus, a:active {
	color: #5486c1;
	text-decoration: underline;
    -webkit-transition: all 0.35s; /* makes links fade in */
    -o-transition: all 0.35s;
    transition: all 0.35s;
    -moz-transition: all 0.35s;
    -ms-transition: all 0.35s;
    outline: none !important;
}
#content-text a {
	text-decoration: underline;
}
#content-text a:hover, #content-text a:active, #content-text a:focus, #home-third-section a:hover {
	color: #ab2328;
}
#content-text a:focus {
	text-decoration: none;
	outline: 1px solid #ab2328 !important;
	 -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
#content-text a.linkoff {
	text-decoration: none;
}
/* buttons */
/* bear in mind, what we're doing here (mostly) is tweaking standard Bootstrap button styles */
.btn, a.btn {
	color: #242424;
	text-decoration: none;
}
.btn-primary, .btn-danger, .btn-inverse, a.btn-primary, a.btn-danger, a.btn-inverse {
    color: #FFFFFF;
}
#content-text .btn, #content-text a[href].btn {
	padding-top: 4px !important;
}
#content-text .btn:hover, #content-text a[href].btn:hover, #content-text .btn:focus, #content-text a[href].btn:focus {
	color: #242424;
	text-decoration: none;
}
.btn, .btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-inverse, #content-text a.btn, a.btn-primary, a.btn-info, a.btn-success, a.btn-warning, a.btn-danger, a.btn-inverse {
    background-image: none; /* flattens the buttons similar to HHSC */
	text-decoration: none;
}
.btn-primary:hover, .btn-danger:hover, .btn-inverse:hover, a.btn-primary:hover, a.btn-danger:hover, a.btn-inverse:hover, .btn-primary:focus, .btn-danger:focus, .btn-inverse:focus, a.btn-primary:focus, a.btn-danger:focus, a.btn-inverse:focus {
	color: #fff !important; /* fixes Bootstrap color contrast issue */
}
.btn-primary, a.btn-primary {
	background-color: #4376b3;
    border-color: #4376b3 #4376b3 #396daa;
}
#content-text .btn-primary:hover, #content-text .btn-primary:focus {
    background-color: #5486c1;
}
.btn-info, a.btn-info {
	background-color: #00b3e3;
    border-color: #00b3e3 #00b3e3 #02a6d2;;
}
#content-text .btn-info:hover {
    background-color: #02bdef;
}
.btn-success, a.btn-success {
	background-color: #6cc04a;
    border-color: #6cc04a #6cc04a #5eb13c;
}
#content-text .btn-success:hover {
	background-color: #75c853;
}
.btn-warning, a.btn-warning {
	background-color: #fdba22;
    border-color: #fdba22 #fdba22 #e9a60f;
}
#content-text .btn-warning:hover {
	background-color: #fcc549;
}
.btn-danger, a.btn-danger {
	background-color: #ab2328;
	border-color: #ab2328 #ab2328 #9f1b20;
}
#content-text .btn-danger:hover {
	background-color: #b82e33;
}
.btn-inverse, a.btn-inverse {
	background-color: #242424;
	border-color: #242424 #242424 #0a0a0a;
}
#content-text .btn-inverse:hover {
	background-color: #414141;
}
#content-text .btn-super, #content-text a[href].btn-super {
/* extra button size not included in Bootstrap */
	margin-top: 10px;
	padding: 15px;
	padding-top: 15px !important;
	font-size: 18px;
	vertical-align: middle;
}
#content-text a[href].btn-mini {
	padding-top: 2px !important;
}
span[class^=btn] {
	padding: 0 2px;
}

/* ********** CALL-TO-ACTION BUTTONS & BOXES ********** */
.ctaButton, .ctaButtonL {
	font-size: 1em;
	letter-spacing:.25px;
}
h2 .ctaButton, h2 .ctaButtonL {
	font-size: .65em;
	margin: 0 0 .5em;
}
aside .ctaButton, aside .ctaButtonL {
	font-size: .8999592em; /* 27px */
}
#content-text .ctaButton, #content-text .ctaButton:hover, #content-text .ctaButton:focus, #content-text .ctaButtonL, #content-text .ctaButtonL:hover, #content-text .ctaButtonL:focus {
	background: transparent;
	border: 0 none;
	color: #242424;
	font-weight: bold;
	font-family: "Roboto Slab", Rockwell, "Courier New", Courier, serif;
	text-transform: uppercase;
	transition: all 0.2s ease-in-out 0s;
	text-decoration: none;
}
.ctaButtonL::before {
	border-bottom: 1.5em solid transparent;
	border-right: 1.5em solid #ffc800;
	border-top: 1.5em solid transparent;
	content: "";
	display: table-cell
}
.ctaButton::after {
	border-bottom: 1.5em solid transparent;
	border-left: 1.5em solid #ffc800;
	border-top: 1.5em solid transparent;
	content: "";
	display: table-cell;
}
.ctaButton span {
	background-color: #ffc800;
	display: table-cell;
	padding: 0 .25em 0 .75em;
	text-align: center;
	vertical-align: middle;
}
.ctaButtonL span {
	background-color: #ffc800;
	display: table-cell;
	padding: 0 .75em 0 .25em;
	text-align: center;
	vertical-align: middle;
}
.ctaButton:hover, .ctaButton:focus, .ctaButtonL:hover, .ctaButtonL:focus {
	opacity: .9;
}
.calloutRed, .calloutBlue {
    padding: 1em;
    margin: 20px 0;
	color: #fff;
	text-align:center;
}
aside + .calloutRed, aside + .calloutBlue, .calloutRed:first-child, .calloutBlue:first-child {
	margin-top: 0;
}
.calloutRed p a, .calloutRed ul a, .calloutRed ol a, .calloutBlue p a, .calloutBlue ul a, .calloutBlue ol a {
	color: #fff;
	text-decoration: underline;
}
#content-text .calloutRed p a:hover, #content-text .calloutRed ul a:hover, #content-text .calloutRed ol a:hover, #content-text .calloutBlue p a:hover, #content-text .calloutBlue ul a:hover, #content-text .calloutBlue ol a:hover {
	background-color: #fff;
	text-decoration: none;
}
.calloutRed p a:hover, .calloutRed ul a:hover, .calloutRed ol a:hover, .calloutRed-nobg {
	color: #ab2328;
}
#content-text .calloutBlue p a:hover, #content-text .calloutBlue ul a:hover, #content-text .calloutBlue ol a:hover {
	color: #4376b3;
}
.calloutRed {
    background: #ab2328 url("/images/site/sidebar-red-background.jpg") repeat scroll 0 0;
}
.calloutBlue {
    background: #4376b3 url("/images/site/sidebar-blue-background.jpg") repeat scroll 0 0;
}

/* ********** HEADLINES ********** */
/* see below for page title styles */
h1, h2, h3, h4, h5, h6, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
	font-weight: 400; /* the strong declarations are kind of a hack to correct for Word pasting... */
}
h1, h1 small, h2, h3 {
	font-family: "Roboto Slab", Rockwell, Aleo, "Courier New", Courier, serif;
}
h4, h5, h6, #side-nav-container h2 {
	font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#content-text h4.small-head, #content-text h5.small-head, #content-text h6.small-head {
	margin-bottom: 0;
	font-family: proxima-nova, "Open Sans", Arial, sans-serif;
	font-size: 1.2em;
	font-weight: 600;
}
h2 {
    font-size: 2.0em;
}
h3 {
    font-size: 1.6em;
}
h4, h5, h6 {
    font-size: 1.3em;
}
h2, h3, h4, h5, h6 {
    line-height: 1.3;
}
#content-text h1 a, #content-text h2 a, #content-text h3 a, #content-text h4 a, #content-text h5 a, #content-text h6 a {
	text-decoration: none;
}
#content-text h1 a:hover, #content-text h2 a:hover, #content-text h3 a:hover, #content-text h4 a:hover, #content-text h5 a:hover, #content-text h6 a:hover {
	text-decoration: underline;
}
h6 { /* overwrites an odd Bootstrap style... */
	color: #242424;
	text-transform: none;
}
small, p small, h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
	font-size: .80em;
}
p small, h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
	color: #777;
}
#content-container h2, #content-container h3, #content-container h4, #content-container h5, #content-container h6 {
	margin-bottom: 15px;
	padding-top: 10px;
}
/* removes the top padding on headlines when they are the first element in the content area */
#content-text h2:first-child, #content-text h3:first-child, #content-text h4:first-child, #content-text h5:first-child, #content-text h6:first-child, #content-text div h2:first-child, #content-text div h3:first-child, #content-text div h4:first-child, #content-text div h5:first-child, #content-text div h6:first-child,
/* or when they are the first element after a section header inside the content area */
#content-text div.section-header + h2, #content-text div.section-header + h3, #content-text div.section-header + h4, #content-text div.section-header + h5, #content-text div.section-header + h6,
/* or when they are the first element in a container (div, aside, td) inside the content area */
#content-text aside h2:first-child, #content-text aside h3:first-child, #content-text aside h4:first-child, #content-text aside h5:first-child, #content-text aside h6:first-child, #content-text td h2:first-child, #content-text td h3:first-child, #content-text td h4:first-child, #content-text td h5:first-child, #content-text td h6:first-child,
/* or when they are the next element on the page following an aside */
#content-text aside + h2, #content-text aside + h3, #content-text aside + h4, #content-text aside + h5, #content-text aside + h6,
/* or when one headline immediately follows another */
#content-text h2 + h3, #content-text h2 + h4, #content-text h2 + h5, #content-text h2 + h6, #content-text h3 + h4, #content-text h3 + h5, #content-text h3 + h6, #content-text h4 + h5, #content-text h4 + h6, #content-text h5 + h6 {
	padding-top: 0;
}
/* removes bottom margin when headlines are used in the Spry panel tabs */
#content-text .CollapsiblePanelTab h1, #content-text .CollapsiblePanelTab h2, #content-text .CollapsiblePanelTab h3, #content-text .CollapsiblePanelTab h4, #content-text .CollapsiblePanelTab h5, #content-text .CollapsiblePanelTab h6 {
	margin-bottom: 0;
}

/* ********** HACKS AND PATCHES ********** */
u { /* this is a hack for old underline tags... */
	text-decoration: none;
}
.alpha { /* removes standard left margin from Bootstrap span class */
	margin-left: 0 !important;
}
/* this is a hack that makes anchor links not get covered up by nav bar */
#content-container a:target, #content-container h1:target, #content-container h2:target, #content-container h3:target, #content-container h4:target, #content-container h5:target, #content-container h6:target {
	margin-top: -40px;
	padding-top: 40px;
}
#content-container h1:target {
	margin-top: -65px;
	padding-top: 65px;
}
#content-container a:target {
	display: block;
	border: none;
}
/* this is a reverse hack that fixes a problem when an anchor link follows a right-floated box, but it spoils the hack for that anchor, too... */
#content-text aside + a:target, #content-text aside + h2 > a:target, #content-text aside + h3 > a:target, #content-text aside + h4 > a:target, #content-text aside + h5 > a:target, #content-text aside + h6 > a:target, #content-text aside + h2:target, #content-text aside + h3:target, #content-text aside + h4:target, #content-text aside + h5:target, #content-text aside + h6:target {
	margin-top: 0;
	padding-top: 0;
}
/* styles the version information in the Records Retention Schedule application...  */
#ctl00_lblFooter {
    display: block;
    background-color: #fff;
    padding: 0 0 5px 20px;
    max-width: 1260px;
    margin: 0 auto;
}
/* makes the content clear the login information in the CCL ASP.NET application */
#ucProviderPortalContent {
	clear:right;
}
/* same as above, but for when there's no table to clear the login credentials */
#ucBgCheckContent { 
	clear:both;
}
/* makes the login information in the CCL ASP.NET application pick up our <small> font size */
#ctl00_contentBase_DeptHead1_LoginName2, #ctl00_contentBase_DeptHead1_LoginStatus1 {
	font-size: .8em;
}
/* overrides Bootstrap field height in GovDelivery overlay */
#scopedByScopedPolyfill_1 #prefix-overlay-outer input[type="email"] {
	height: 36px;
}

/* ********** LISTS ********** */
#content-text ol, #content-text ul {
	margin: 0 0 15px 40px;
}
#content-text li > ol, #content-text li > ul, #content-text aside ol, #content-text aside ul {
	margin-left: 25px;
}
#content-text li > ul, #content-text li > ol { /* adjusts nested lists */
	margin-bottom: 0;
	margin-top: 5px;
}
#content-text li {
	margin-bottom: 8px;
}
#content-text li:last-child {
	margin-bottom: 0;
}
ul ul {
	list-style: circle;
}
ul ul ul {
	list-style: square;
}
ul ul ul ul {
	list-style: disc;
}
ol ol ol {
	list-style-type: lower-roman;
}
#content-text ul.unstyled {
    margin-left: 20px;
}
#content-text ul.unstyled ul {
    margin-left: 40px;
}
dl {
	margin-top: 0;
	margin-bottom: 15px;
}
#main_content dt {
	margin-bottom: 8px;
	font-weight: bold;
}
dd {
	margin-left: 25px;
	margin-bottom: 15px;
}
#content-text .flex-container ol, #content-text .flex-container ul {
	margin-left: 25px;
}

/* ********** HEADER ********** */
header {
	padding: 10px 0;
	width: 100%;
	background-color: #FFF;
}
#skip_to_content a, #skip_to_content a:hover, #skip_to_content a:visited {
	position: absolute;
	left: 0px;
	top: -500px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#skip_to_content a:active, #skip_to_content a:focus {
	position: static;
	width: auto;
	height: auto;
}
#DFPS-logo-print, #HHS-logo-mobile, #HHS-logo-print {
	display: none;
}
.language-link {
	position: absolute;
	right: 20px;
	top: 45px;
	font-size: 0.90em;
}
.language-link a {
	color: #555;
	text-decoration: none;
}
.language-link a:hover {
	color: #333;
	text-decoration: underline;
}
.site_search {
	/* no styles yet */
}
.site_search_form {
	min-height: 14px;
	padding: 0;
	margin-bottom: 0;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #666666;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:#666666;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: #666666;
}
.site_search_form label {
	display: none;
}
input.site_search_query, .btn-search {
    border-radius: 0px;
	margin: 30px 0 0 0;
    background-color: #e9e9e9;
    border-color: #c9c9c9;
    box-shadow: 0 0;
}
input.site_search_query {
	color: #242424;
	width: 75%;
	font-size: 1.0em;
    padding: 5px 10px;
    transition: width 0.3s ease;
}
.btn-search {
	color: #CCC ;
    font-size: 20px;
    padding: 3px 10px;
	margin-left: -45px;
	border-width: 0;
	border-style: none;
    border-color: #e9e9e9;
    border-image: none;
}
.btn-search:hover, .btn-search:focus, .site_search_query:focus {
	color: #242424;
	outline: none;
}
input[type="search"]:focus {
	border-color: rgba(233,233,234,1.0);
	box-shadow: none;
}
.site_search_placeholder { /* workaround for applications */
	min-height: 14px;
	width: 75%;
	margin: 30px 0 0 0;
	background-color: #e9e9e9;
	border: solid 1px #e9e9e9;
    padding: 5px 10px;
	display: inline-block;
	text-align: left;
	color: #999;
}
.site_search:hover > .site_search_placeholder, .site_search:hover > .site_search_placeholder + .btn-search {
	color: #242424;
}
.site_search_placeholder + .btn-search {
	display: inline-block;
 	font-size: 22px;
    vertical-align: sub;
}
.header_btn {
	margin-top: 20px;
	padding: 0;
	width: 80%;
	margin-left: 21%;
	text-align: center;
}
.report_abuse, .social_btn {
	display: inline-block;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}
.report_abuse {
	margin-right: 2.0%;
}
.social_btn {
	margin-left: 2.0%;
}
.social_btn .fa {
	font-size: 25px;
	vertical-align: middle;
}
.social_btn a {
	color: #4376b3;
	margin-right: 3px;
}
.social_btn a:last-child {
	margin-right: 0;
}
.social_btn a:hover {
	color: #5486c1;
}

/* ********** PAGE TITLE, BREADCRUMBS, and ADDTHIS ********** */
#page-title, h2.flex-caption {
	background-color: #4376b3;
	background-image: url(/images/site/page-title-bg.jpg);
}
#page-title {
	border-top: 5px solid #4376b3;
	border-bottom: 5px solid #CCC;
	padding: 0;
	width: 100%;
}
h1#mainheading a {
	color: #fff;
}
h1#mainheading a:hover {
	text-decoration: none;
	color: #ffcfd8;
}
#page-title .container {
    margin-right: 0;
    margin-left: 0;
    width: auto;
    padding: 0;
}
#page-title .row {
	background-color: rgba(0, 0, 0, 0.5);
}
#page-title .span12 {
	width: 100%;
    margin-left: 0;
}
.page-title-text h1, h2.flex-caption {
    font-family: "Roboto Slab", Rockwell, Aleo, "Courier New", Courier, serif;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
    color: #FFF;
    font-weight: normal;
    margin: 25px 25px 25px 35px;
    font-size: 3.1em;
    line-height: 1.0;
    position: relative;
}
h2.flex-caption {
    display: inline-block;
}
.page-title-text h1 small, h2.flex-caption small {
    font-family: proxima-nova, "Open Sans", Arial, sans-serif;
	font-size: 21px;
    color: #E8E8E8;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.75);
	line-height: 1.4;
	font-weight: 300;
	margin-top: 25px;
}
.page-title-text h1 small {
	display: block;
}
h2.flex-caption small {
	display: inline;
}
#breadcrumbs {
	padding: 10px 35px 0 55px;
	margin: 0;
}
.breadcrumb {
	margin: 0 0 5px 0;
	padding: 0;
	background: none;
	filter: none;
	border: none;
	box-shadow: none;
	min-height: 25px;
}
.breadcrumb, .breadcrumb a {
	color: #FFFFFF;
}
.breadcrumb li {
	display: inline-block;
	text-shadow: none;
}
.breadcrumb .divider, #ctl00_PageTitle_BreadCrumb1_SiteMapPath1 span:nth-child(odd) {
	padding: 0 5px;
	color: #AAA;
}
#add_this {
	float: right;
	margin: 0 0 0 10px;
}

/* ********** FOOTER ********** */
#footer-call-to-action {
	padding-bottom: 30px;
    padding-top: 30px;
    background-color: #4376b3;
	color: #fff;
	font-size: 18px;
	text-align: center;
}
#footer-call-to-action .fa {
	font-size: 36px;
	vertical-align: middle;
	padding-right: 9px
}
#footer-call-to-action a {
	color: #fff;
}
footer {
	width: 100%;
	clear: both;
    background: #242424;
    border-top: 4px solid #fdba22;
    font-size: 1.03846em; /* 13.5px */
    padding: 20px 0 0;
    position: relative;
}
footer .span3 {
	margin-left: 2.127659574%;
	width: 23.404255317%;
}
footer .alpha {
	margin-left: 0;
}
footer ul {
	margin-bottom: 15px;
	margin-left: 5px;
}
footer li {
	margin-bottom: 2px;
}
footer h3 { /* the sections headers */
    position: relative;
	color: #FFF;
    background: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 15px 0px 10px;
    border-bottom: 4px solid rgba(255, 255, 255, 0.09804);
    display: inline-block;
    font-size: 1.11111em; /* 15px */
    font-weight: 300;
    position: relative;
    letter-spacing: 0.5px;
    font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    z-index: 9;
    padding: 12px 0px;
}

footer a, footer a:visited {
	color: #DEDEDE;
	text-decoration: none;
	outline: 0;
}
footer a:hover, footer a:focus {
	color: #FFF;
}

/* ********** FORMS ********** */
input[type="submit"], input[type="reset"], #content-container .well input:last-child {
	margin-bottom: 9px;
}
.label-transparent {
	background-color: transparent;
}
.label-transparent:hover {
	background-color: transparent;
}
.input-ninety {
	width: 90%;
}
.input-fifty {
	width: 50%;
}
form#aspnetForm { /*removed space under header in Search_Texas_Child_Care/CCLNET pages */
	margin-bottom: 0;
}
legend {
    margin-bottom: 18px;
}
.form-actions {
	background-color: inherit;
	padding-top: 36px;
}

/* ********** ALIGN, FLOAT & POSITIONING ********** */
.align-right {
	text-align: right;
}
.align-left {
	text-align: left;
}
.align-center {
	text-align: center;
}
.float-right {
	float: right !important;
}
.float-left {
	float: left !important;
}
.clear-all {
	clear: both;
}
.offscreen { /* move text offscreen for accessibility */
	position: absolute;
	left: -10000px;
}
i span { /* move text offscreen for icon descriptions */
	position: absolute;
	left: -10000px;
}

/* ********** DOCUMENT LINKS SPRITE ********** */
.doclink, .docimg, .pdflink, .pdfimg, .xlslink, .xlsimg, .ppslink, .ppsimg, .externallink, .externalimg, .mdblink, .ziplink, .resizelink {
	background: url(/images/doclinks/sprite.png) no-repeat;
	display: inline-block;
	vertical-align: text-bottom;
	width: 16px;
	height: 16px;
	text-align: left;
	text-indent: -9999px;
	margin: 0 1px;
}
.doclink, .docimg {
	background-position: 0 0;
}
.pdflink, .pdfimg {
	background-position: -50px 0;
}
.xlslink, .xlsimg {
	background-position: -100px 0;
}
.ppslink, .ppsimg {
	background-position: -150px 0;
}
.externallink, .externalimg {
	background-position: -250px 0;
}
.mdblink {
	background-position: -200px 0;
}
.ziplink {
	background-position: -300px 0;
}
.resizelink {
	background-position: -350px 0;
}
.no_doc_img { /* referenced in javascript */
}

/* ********** ICONS ********** */
.fa-inline { /* add to Font Awesome icon classes */
	font-size: 250%;
	display: inline-block;
	position: relative;
	bottom: -5px;
}

/* ********** BLOCKQUOTES ********** */
blockquote {
	padding: 0 0 0 40px;
	margin-bottom: 15px;
}
blockquote p {
	margin-bottom: 15px;
}
blockquote, blockquote p, blockquote ul {
	background-image: none;
	border-right: none;
	border-left: none;
	font-style: normal;
	font-size: 1.00em;
	line-height: 18px;
}
blockquote.quote {
	background-image: url(/images/site/blockquote.png);
	background-position: 5px top;
	background-repeat: no-repeat;
	padding-right: 10px;
	border-left: none;
	font-style: italic;
}

/* ********** TABLES ********** */
/* make all header cells row headers light gray */
.table th, .table-striped th, .table-bordered th, .table-condensed th, .table tbody tr:first-child th, .table-striped tbody tr:first-child th, .table-bordered tbody tr:first-child th, .table-condensed tbody tr:first-child th { 
	background-color: #f5f5f5;
	font-weight: bold;
}
/* ...except make the main (top) column headers light blue */
.table tr:first-child th, .table-striped tr:first-child th, .table-bordered tr:first-child th, .table-condensed tr:first-child th {
	background-color: #EDF2F8; /* very light blue derived from #4376b3 */
}
#main_content th p { /* hack to override default when prople stick paragraphs in header cells */
	font-weight: inherit;
}
.table-striped tbody tr:nth-child(2n+1) th {
	background-color: #edf2f8;
	font-weight: bold;
}
.table tbody tr:hover th {
	background-color: #f7fafc;
}
.table-nohover tbody tr:hover td {
	background-color: #ffffff;
}
.table p:last-child, .table ul:last-child, .table ol:last-child, .table li:last-child {
	margin-bottom: 0; /* removes padding from last nested element in table cell */
}
caption {
	font-weight: bold;
	margin: 0 0 10px;
	position: absolute; /* default behavior offscreen */
	left: -9999px;
	top: 0;
}
caption.visible {
	position: relative; /* make caption visible onscreen */
	left: 0;
}
.table-bordered {
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    -webkit-border-radius: 0; /* removes rounded corners to match HHS styles */
    -moz-border-radius: 0;
    border-radius: 0;
}

/* ********** HOME PAGE ********** */
/* also see separate Flexsider file in /js/FlexSlider/ directory */
.row-fluid [class*="span"]:first-child.home-banner { /* aligns an alert box or image over the picture slider */
	 float:none;
	 margin-left:auto;
	 margin-right:auto;
	 margin-bottom: 10px;
}
.row-fluid [class*="span"].double-banner { /* aligns two objects over the picture slider */
	margin-bottom: 10px;
	max-width: 41%;
	border: 1px solid #ddd;
}
.row-fluid [class*="span"]:first-child.double-banner { 
	margin-left: 8.5%;
	margin-right: .5%;
}
.row-fluid [class*="span"]:last-child.double-banner { 
	margin-left: .5%;
	margin-right: 8.5%;
}
#home-second-section img, .featurebanner img {
	border: 1px solid #ddd;
}
#home-second-section .span4 {
	text-align: center;
	margin-bottom: 15px;
}
#home-third-section ul.unstyled li {
	margin-bottom: 5px;
}
#home-third-section ul.unstyled, .featurebanner {
	margin-left: 26px;
}
#home-third-section {
	padding-bottom: 15px;
}
#home-third-section #twitter {
	border: 1px #ebedf0 solid;
}
.featurebanner {
	max-width: 80%;
}

/* ********** I AM PAGE ********** */
.i-am {
	display: block;
	overflow: hidden;
}
#content-text .i-am ul {
	width: 31%;
	float: left;
	background-color: transparent; /* Needed when images are turned off */
	list-style-type: none;
	position: relative;
	margin-left: 0;
	margin-bottom: 0px;
}
.i-am li {
	float: none;
	clear: both;
	padding: 0 5px 10px 18px;
}
#content-text .i-am a {
	display: block;
	/* height: 50px; I took this out 6/13/18 - not sure why it was here, making bottom cut off in mobile... */
	text-decoration: none;
}
#content-text .i-am a:hover {
	text-decoration: underline;
}
.i-am .nav_p_heading {
	color: #333333;
	font-weight: bold;
	vertical-align: middle;
}
.i-am img {
	float: left;
	margin: 0 10px 10px 0;
}
#content-container .well .i-am img:last-child {
	margin-bottom: 10px;
}

/* ********** INTERNAL PAGES ********** */
#side-nav-container:before, #side-nav-container:after, #content-container:before #content-container:after {
 display: table;
 content: "";
}
#main_content  {
	font-size: 1.15385em; /* 15px */
}
.breadcrumb  {
	font-size: 1.03846em; /* 13.5px */
}
label {	
	font-size: inherit; /* have to do this to override Bootstrap */
	font-weight: inherit;
}
#main_content p, li, dt, dd, blockquote, address, label {
	line-height: 1.46666; /* 22px */
	font-weight: 400;
}

/* ********** SECTION HEADERS ********** */
/* these styles are for top section of the template public_section_page.dwt.asp 
   that template is usually used for the home pages of the major sections of the website */
.section-header {
	margin-top: 5px;
	margin-bottom: 15px;
	border-bottom: 1px solid #eeeeee;
}
.section-header h2 {
	font-size: 1.5em;
}
.small-img, .large-img {
	margin: 0 0 15px 0;
}
.small-img {
	display: none;
}
.large-img {
	display: block;
}

/* ********** ASIDES, WELLS & ALERTS ********** */
.alert { /* default yellow alert box */
	padding: 19px 35px 19px 19px;
	margin-bottom: 20px;
	border-radius: 0;
	color: #242424;
}
.alert h2, #content-container .alert h2, #content-container .alert h3, #content-container .alert h4, #content-container .alert-danger h5, #content-container .alert h6 {
	font-size: 1.35em;
	margin-bottom: 15px;
}
#content-container .alert button + h2, #content-container .alert h2:first-child {
	padding-top: 0; 
}
.alert button.close {
	font-size: 200%;
}
#content-container .alert :last-child {
	margin-bottom: 0; 
}
/* default yellow alert box, #b47e00 */
.alert {
	border-color: rgba(180, 126, 0, 0.3);
	background-color: rgba(180, 126, 0, 0.05); 
}
.alert .close, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6 {
	color: #b47e00;
}
.alert-danger, .alert-error { /* red box, #ab2328 */
	border-color: rgba(171, 35, 40, 0.3);
	background-color: rgba(171, 35, 40, 0.05); 
}
.alert-danger .close, .alert-danger h2, .alert-danger h3, .alert-danger h4, .alert-danger h5, .alert-danger h6, .alert-error .close, .alert-error h2, .alert-error h3, .alert-error h4, .alert-error h5, .alert-error h6 {
	color: #ab2328;
}
.alert-info { /* blue box, #4376b3 */
	border-color: rgba(67, 118, 179, 0.3);
	background-color: rgba(67, 118, 179, 0.04); 
}
.alert-info .close, .alert-info h2, .alert-info h3, .alert-info h4, .alert-info h5, .alert-info h6 {
	color: #4376b3;
} 
.alert-success { /* green box, #00a19b */
	border-color: rgba(0, 161, 155, 0.3);
	background-color: rgba(0, 161, 155, 0.05); 
}
.alert-success .close, .alert-success h2, .alert-success h3, .alert-success h4, .alert-success h5, .alert-success h6 {
	color: #00a19b;
}
.alert-transparent {
    border-color: transparent;
    background-color: transparent;
    padding: 11px 35px 11px 19px;
    margin-bottom: 0;
}
.alert-transparent .close, .alert-transparent h2, .alert-transparent h3, .alert-transparent h4, .alert-transparent h5, .alert-transparent h6 {
	color: #000000;
}
/* Bootstrap well classes transformed to look like HHSC's feature box */
.well, .flex-container div {
    background-color: #F5F5F5;
    background: -webkit-linear-gradient(top,white 1%,#f7f7f7 98%) repeat scroll 0 0 transparent;
	background: -moz-linear-gradient(top,white 1%,#f7f7f75 98%) repeat scroll 0 0 transparent;
    background: linear-gradient(to bottom,white 1%,#f7f7f7 98%) repeat scroll 0 0 transparent;
	border-radius: 0;
    border-bottom: 1px solid #cfcfcf;
    border-left: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
	border-top: 4px solid #4376b3;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.04);
	color: #242424;
}
.well.alert {
	padding-right: 19px;
	border-top-color: #ffc800;
}
.well.alert-danger, .well.alert-error {
	border-top-color: #ab2328;
}
.well.alert-danger h2, .well.alert-danger h3, .well.alert-danger h5, .well.alert-danger h5, .well.alert-danger h6, .well.alert-error h2, .well.alert-error h3, .well.alert-error h5, .well.alert-error h5, .well.alert-error h6  {
	color: #ab2328;
}
.well.alert-info h2, .well.alert-info h3, .well.alert-info h5, .well.alert-info h5, .well.alert-info h6 {
	color: #4376b3;
}
.well.alert-success {
	border-top-color: #00a19b;
}
.well.alert-success h2, .well.alert-success h3, .well.alert-success h5, .well.alert-success h5, .well.alert-success h6 {
	color: #00a19b;
}
.well-white { /* not a Bootstrap style */
	border-top-color: #dfdfdf;
}
.well.well-box { /* not a Bootstrap style / good for images or videos / removes colors and padding / leaves float and margin */
	border-top: none;
	border-bottom: none;
	border-right: none;
	border-left: none;
	background: none;
	padding: 0;
	box-shadow: none;
}
#content-container .well h2, #content-container .well h3, #content-container .well h4, #content-container .well h5, #content-container well h6 {
	font-size: 1.35em;
}
#content-text aside :last-child {
	margin-bottom: 0;
}
aside > h2:first-child, aside > h3:first-child, aside > h4:first-child, aside > h5:first-child {
	margin-top: 0 !important;
}
aside.well p, aside.well-white p, aside.well li, aside.well-white li {
	font-size: 0.9em !important; /* 13.5px */
}
#content-container .well :last-child, #content-container .well-white :last-child {
	margin-bottom: 0;
}
h2.headerTab { /* adds prominent header above an aside */
	position: relative;
	font-size: 15px;
	line-height: 15px;
	font-weight: bold;
	text-transform:uppercase;
	font-family: "Roboto Slab", Rockwell, "Courier New", Courier, serif;
	letter-spacing: 1px;
	background-color: #ffc800;
	margin-bottom: 0px !important;
	margin-left: 20px !important;
	padding: 10px !important;
	text-align: center;
	z-index: 10;
}

/* ********** FLEX BOX ********** */
/* I included a full compliment of browser fallbacks when we implemented this in 2016...
   Supposedly, all current browsers support flex, but that starts to degrade as recently as IE10. */
#content-text .flex-container {
	clear: left;
	padding: 0;
	margin: 0 0 10px 0;
	list-style: none;
	/* display - the basic property */
	display: -webkit-box; /* Chrome and Safari */
	display: -webkit-flex; /* Chrome and Safari */
	display: -ms-flexbox; /* IE */
	display: -moz-box; /* Firefox */
	display: flex;
	/* flex-flow - shorthand that incorporates flex-direction (row or column) and flex-wrap (wrap/nowrap) */
	flex-flow: row wrap; /* makes the boxes line up in a row and wrap like words in a sentence */
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	/* justify-content - works a lot like text justification */
	justify-content: flex-start; /* justifies to the left, like a normal sentence. */
	-webkit-justify-content: flex-start;
	-ms-justify-content: flex-start;
	-moz-justify-content: flex-start;
	/* align-items - how do the items align on the horizontal axis (assuming flex-direction:row)  */
	align-items: stretch; /* aligns to top and bottom, filling the space - making a row of equally sized boxes */
	-webkit-align-items: stretch;
	-ms-align-items: stretch;
	-moz-align-items: stretch;
}
#content-text .flex-container div {
	/* border styles piggyback on Bootstrap well (see above) plus same border-top color as .well-white */
	border-top-color: #DFDFDF;
	padding: 10px;
	width: 21%; /* four columns - default */
	margin-right: 1%;
	margin-top: 10px;
}
#content-text .flex-container.whitebox div {	
    /* a very simple, plain version of flexbox */
	background: none;
	box-shadow: none;
	border-top-width: 1px;
}
#content-text .flex-container.whitebox div a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color:inherit;
}
#content-text .flex-container.whitebox.colorbox div {
	/* adds a colored top border to whitebox */
	position: relative;
	z-index: 1;
	border:none; /* remove border from whitebox */
}
#content-text .flex-container.whitebox div:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #cfcfcf; /* add border back to whitebox */
    border-top: none;
}
#content-text .flex-container.whitebox div:hover, #content-text .flex-container.whitebox.colorbox div:hover::before {
    border: 1px solid #777; /* add border back to whitebox */
}
#content-text .flex-container.whitebox.colorbox div:hover {
    border: none;
}
#content-text .flex-container.whitebox.colorbox div:hover::before {
    border-top: none;
}
#content-text .flex-container.whitebox.colorbox div:nth-child(10n+1) {	
    /* adds 10 alternating colored top borders to whitebox without standard beveling */
    /* colors taken from DFPS Style Guide */
    border-top: 10px solid #003087;
}
#content-text .flex-container.whitebox.colorbox div:nth-child(10n+2) {	
	border-top: 10px solid #6dabe4;
}
#content-text .flex-container.whitebox.colorbox div:nth-child(10n+3) {	
	border-top: 10px solid #6cc04a;
}
#content-text .flex-container.whitebox.colorbox div:nth-child(10n+4) {	
	border-top: 10px solid #ffc800;
}
#content-text .flex-container.whitebox.colorbox div:nth-child(10n+5) {	
	border-top: 10px solid #ab2328;
}
#content-text .flex-container.whitebox.colorbox div:nth-child(10n+6) {	
	border-top: 10px solid #435363;
}
#content-text .flex-container.whitebox.colorbox div:nth-child(10n+7) {	
	border-top: 10px solid #00a19b;
}
#content-text .flex-container.whitebox.colorbox div:nth-child(10n+8) {	
	border-top: 10px solid #b47e00;
}
#content-text .flex-container.whitebox.colorbox div:nth-child(10n+9) {	
	border-top: 10px solid #6a1b32;
}
#content-text .flex-container.whitebox.colorbox div:nth-child(10n+10) {	
	border-top: 10px solid #ff3a1e;
}
#content-text  .flex-container.whiteboxnb div {	
	/* flexbox with no visible styling */
    background: none;
    border: none;
	box-shadow: none;
}
#content-text .flex-container div :last-child  {
	margin-bottom: auto;
}
@media (max-width: 480px) {
	#content-text .flex-container {
		justify-content: center;
	}
	#content-text .flex-container div {
		width: 90%; /* one column */
		margin-right: 0;
	}
	#content-text ol, #content-text ul {
    	margin-left: 25px;
	}
}
@media (min-width: 481px) and (max-width: 575px) {
	#content-text .flex-container div {
		width: 42%; /* two columns */
		margin-right: 2%;
	}
}
@media (min-width: 576px) and (max-width: 1031px) { 
	#content-text .flex-container div {
			width: 27%; /*three columns */
			margin-right: 2%;
	}
}
/* media queries for max-two and -three classes, which force two or three columns, respectively, until you get down to phone size... */
@media (max-width: 600px) {
	#content-text .flex-container.max-two, #content-text .flex-container.max-three {
		justify-content: center;
	}
	#content-text .flex-container.max-two div, #content-text .flex-container.max-three div {
		width: 90%; /* one column */
		margin-right: 0;
	}
}
@media (min-width: 601px) { 
	#content-text .flex-container.max-two div, #content-text .flex-container.max-three div {
		width: 43%;
		margin-right: 2%;
	}
}
@media (min-width: 900px) { 
	#content-text .flex-container.max-two div {
		width: 44%;
		margin-right: 2%;
}
	#content-text .flex-container.max-three div {
		width: 27%;
		margin-right: 2%;
}
}
@media (min-width: 1100px) { 
	#content-text .flex-container.max-two div {
		width: 45%;
		margin-right: 2%;
}
	#content-text .flex-container.max-three div {
		width: 28%;
		margin-right: 2%;
}
}
@media (min-width: 1300px) { 
	#content-text .flex-container.max-two div {
		width: 46%;
		margin-right: 1%;
}
	#content-text .flex-container.max-three div {
		width: 29%;
		margin-right: 1%;
}
}

/******* MEDIA QUERIES *******/
@media (max-width: 480px) {
/* Global */
[class*="span"], .row-fluid [class*="span"] {
 width: 100%;
}
#logo {
	margin-top: 10px;
}
#HHS-logo {
	display: none;
}
#HHS-logo-mobile {
	display: block;
}
ul.square {
	margin-left: 0;
}
table {
	font-size: 0.800em;
}
h1 {
	font-size: 1.7em;
}
h2 {
	font-size: 1.5em;
}
h3 {
	font-size: 1.3em;
	/*margin-top: 1.2em;*/
}
h4, h5, h6 {
	font-size: 1.1em;
}
h2 .ctaButton, h2 .ctaButtonL {
	font-size: 1.0em;
}
footer {
	font-size: 1.25em;
	text-align: center;
}
footer .span3 {
	width: 100%;
	margin-left: 0;
}
.small_screen_hide {
	display: none;
}
/* Home Page */
.featurebanner {
	float: none;
	width: auto;
}
h2.flex-caption {
	font-size: 16px;
	min-height: 45px;
}
/* Internal Page */
.section-header, .section-header > [class*="span"] {
	float: none;
	display: block;
	width: auto;
	margin-left: 0;
}
.small-img {
	display: block;
}
.large-img {
	display: none;
}
.input-ninety, .input-fifty {
	width: 100%;
}
#content-text ul.flowbox {
	margin-left: 0;
}
#content-text ul.flowbox li {
	width: 90%;
	margin-right: 2%;
	margin-left: 2%;
}
.modal {
    position: fixed;
	/* overrides Bootstrap style that can make modal window appear at top of page out of sight */
}
/* RESPONSIVE TABLES */
/* works in conjunction with JavaScript at bottom of footer */
.table-responsive { /* this is here so that Dreamweaver will list the class... */
}
.table.table-responsive tr, .table.table-responsive th, .table.table-responsive td, .TableThin.table-responsive tr, .TableThin.table-responsive th, .TableThin.table-responsive td, .TableWide.table-responsive tr, .TableWide.table-responsive th, .TableWide.table-responsive td  {
	display: block;
}
.table.table-responsive thead tr:first-of-type, .TableThin.table-responsive thead tr:first-of-type, .TableWide.table-responsive thead tr:first-of-type {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.table.table-bordered.table-responsive, .TableThin.table-bordered.table-responsive, .TableWide.table-bordered.table-responsive {
	border-top: none;
}
.table.table-responsive th:before, .table.table-responsive td:before {
	content: attr(data-th) ": ";
	font-weight: bold;
	/* the handbooks people didn't want this feature, so I left them out... */
}
.TableThin.table-responsive th:before, .TableThin.table-responsive td:before {
	content: attr(data-th);
	font-weight: bold;
}
.TableWide.table-responsive th:before, .TableWide.table-responsive td:before {
	content: attr(data-th);
	font-weight: bold;
}
.table.table-responsive tr, .TableThin.table-responsive tr, .TableWide.table-responsive tr {
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #242424;
}
.TableThin.table-responsive {
    margin-left: 0;
    width: 100%;
}
}

@media (max-width: 350px) {
table {
	font-size: 0.900em;
}
/* Home Page */
.featurebanner {
	float: none !important;
	width: 100% !important;
}
h2.flex-caption {
	min-height: 66px
}
}

@media (max-width: 767px) {
/* Global */
body {
	padding-left: 0px;
	padding-right: 0px;
}
.container, .container-fluid {
	padding: 0 20px;
}
header .container-fluid {
	padding: 0 10px;
}
.site_search_form .site_search_query {
	display: inline;
	width: 75%;
}
.language-link a {
	top: 50px;
}
#page-title .row {
    padding-bottom: 0;
}
.site_search_form {
	margin-bottom: 0;
}
.align-right.site_search {
	text-align:center;
}
input.site_search_query, .btn-search {
	margin-top: 15px;
}
.site_search_placeholder, .site_search_placeholder + .btn-search {
	display: none
}
.header_btn {
    margin-left: 0;
	margin-top: 0;
	width: 100%;
}
.report_abuse {
	text-align: left;
	padding: 15px 20px 5px 0;
	width: auto;
	max-width: 50%;
	margin: 0 auto;
	float: none;
}
.report_abuse a {
	width: 100%;
	font-size: 1.154em;
}
.report_abuse i {
	margin-top: 2px;
}
.site_search {
	position: relative;
}
.social_btn {
	display: none;
	visibility: hidden;
}
.row-fluid [class*="span"]:first-child.double-banner, .row-fluid [class*="span"]:last-child.double-banner {
/* resets the double banner to act like two standard home banners */
	 max-width: 90%;
	 margin-left: auto;
	 margin-right: auto;
	 margin-bottom: 10px;
}
.mobile-hide {
	display: none;
}
#main_content {
	padding-top:10px;
}
.float-right, .float-left {
	float: none !important;
	width: auto;
	margin: 0 0 10px 0 !important;
}
.bottomNav .float-right { /* OLD 'back' and 'next' buttons */
	float:right !important;
}
.bottomNav .float-left{ 
	float:left !important;
}
.float-right.bottom-nav { /* NEW 'back' and 'next' buttons */
	float:right !important;
}
.float-left.bottom-nav { 
	float:left !important;
}
.row-fluid [class*="float-right"]:first-child {
	margin-left: 0px;
}
/* Home page */
.row-fluid [class*="span"]:first-child.home-banner { /* aligns an alert box over the picture slider */
	 width: 90%;
	 margin-left:auto;
	 margin-right:auto;
}
#home-third-section ul.unstyled {
	margin-left: 0;
}
.featurebanner {
	margin-left: 0;
	margin-bottom: 15px;
	max-width: 100%;
}
/* Internal Page */
.page-title-text h1 {
    margin: 8px 25px 15px;
	font-size: 2.5em;
	line-height: 1.184616; /* increased line height offset by decreased top margin */	
}
.featured, .featured-noborder {
	width: 100%;
}
/* Page Menu for Databooks 2009-2015 */
#pagemenu {
	padding-top: 5px;
}
.page-title-text h1 small, h2.flex-caption small {
	font-size: 16px;
}
#breadcrumbs {
    padding: 0;
}
#breadcrumbs {
	display: none;
}
#add_this {
	margin: 10px 25px 5px 0;
}
#pagemenu {
	float: none;
}
.i-am ul {
	width: 100%;
	float: none;
}
.section-home [class^="icon-"] {
	vertical-align: baseline;
}
/* Footer */
#footer-call-to-action a {
	margin-left: 33%;
	padding-bottom: 15px;
	display: block;
}
#footer-call-to-action div.span3:last-child a {
	padding-bottom: 0;
}
#footer-call-to-action, footer {
	text-align: left;
}
h2.headerTab { /* adds prominent header above an aside */
	margin-left: 0 !important;
}
}

@media (min-width: 481px) and (max-width: 767px) {
h2.flex-caption {
	font-size: 24px;
    min-height: 58px;
}
h2.flex-caption small {
	font-size: 21px;
}
.site_search_form .site_search_query {
    max-width: 50%;
}
/* Internal Page */
.section-header {
	width: 100%;
}
.section-header > [class*="span"] {
 float: left;
 margin-left: 20px;
 width: 45%;
}
.footer-50 {
	float: left;
	width: 45%;
	padding-left: 5%;
}
footer .span3 {
	width: 100%;
}
/* Fixes a problem with the FitVids javascript when applied on a page that also contains a floating element.
   Normally, the span classes switch to width:auto, and this lack of a width declaration, combined with the float,
   causes the FitVids padding-top calculation to mess up, but only in the 481/767 tablet range... 
   Even then, it doesn't work perfectly, usually leaving some space above or below the video... (Randy Anthony 6/11/2015) */
.row-fluid .span12.fitvids {
	width: 99.999999993%;
 *width:99.9468085036383%
}
.row-fluid .span11.fitvids {
	width: 91.436464082%;
 *width:91.38327259263829%
}
.row-fluid .span10.fitvids {
	width: 82.87292817100001%;
 *width:82.8197366816383%
}
.row-fluid .span9.fitvids {
	width: 74.30939226%;
 *width:74.25620077063829%
}
.row-fluid .span8.fitvids {
	width: 65.74585634900001%;
 *width:65.6926648596383%;
}
.row-fluid .span7.fitvids {
	width: 57.182320438000005%;
 *width:57.129128948638304%
}
.row-fluid .span6.fitvids {
	width: 48.618784527%;
 *width:48.5655930376383%
}
.row-fluid .span5.fitvids {
	width: 40.055248616%;
 *width:40.0020571266383%
}
.row-fluid .span4.fitvids {
	width: 31.491712705%;
 *width:31.4385212156383%
}
.row-fluid .span3.fitvids {
	width: 22.928176794%;
 *width:22.874985304638297%
}
.row-fluid .span2.fitvids {
	width: 14.364640883%;
 *width:14.311449393638298%
}
.row-fluid .span1.fitvids {
	width: 5.801104972%;
 *width:5.747913482638298%
}
}

@media (min-width: 768px) {
.row-fluid aside[class*="span"]:first-child {
	margin-left: 2.564102564%
}
.dl-horizontal dt {
    width: 25%;
}
.dl-horizontal dd {
    margin-left: 27%;
	margin-bottom: 10px;
}
.page-header {
    margin-top: 0;
}
.modal {
    width: 600px;
}
#home-second-section, #home-third-section {
	margin-top: 25px;
}
#home-third-section {
	padding-bottom: 15px;
}
}

@media (min-width: 768px) and (max-width: 1071px) {
/* originally max-width: 979px */
.navbar .row {
    margin-left: 20px; /* overrides Bootstrap */
}
/* Global */
#page-title .container-fluid {
	max-width: 640px;
}
h2.flex-caption {
	font-size: 24px;
    min-height: 58px;
}
.language-link a {
	top: 55px;
}
input.site_search_query, .btn-search {
	margin-top: 25px;
}
.header_btn {
    margin-top: 10px;
}
.social_btn {
	width: auto;
}
.report_abuse {
	font-size: 0.800em;
}
footer {
	font-size: 0.96em;
}
/* Internal Pages */
.row-fluid .footer-50:last-of-type [class*="span"]:first-child {
    margin-left: 2.762430939%;
}
}

@media (max-width: 1071px) {
/* originally max-width: 979px */	 
.language-link a {
	right: 20px;
}
legend {
	font-size: 1.25em;
	line-height: 1.35em;
	padding-bottom: 10px;
	font-weight: bold;
}
.i-am li {
	min-height: 140px;
	line-height: 1.1;
	padding-bottom: 0;
}
.i-am li:last-child {
	min-height: inherit;
}
.i-am a {
	display: inline;
}
.i-am img {
	margin-bottom: 0;
	float: none;
	display: block;
}
.navbar .row {
    margin-left: 20px; /* overrides Bootstrap */
}
}

@media (min-width: 1072px) {
#content-text a[href] {
	padding-top: 0px !important;
}
#search .container-fluid {
	max-width: 820px;
}
.social_btn_top {
	margin-left: 2.127659574%;
	width: 22.104255317%;
	padding-top: 45px;
}
#footer .row-fluid [class*="span"], .row-fluid .footer-50:last-of-type [class*="span"]:first-child {
    margin-left: 2.1%;
}
body {
	padding-top: 40px;
	position: relative;
}
}

@media (min-width: 1072px) and (max-width: 1199px) {
input.site_search_query, .btn-search {
	margin-top: 25px;
}
.header_btn {
    margin-top: 15px;
}
}

@media (min-width: 1200px) and (max-width: 1299px) {
#breadcrumbs {
	padding: 10px 25px 0 65px;
	margin: 0;
}
}

@media (min-width: 1300px) {
header {
	padding: 15px 20px;
}
.navbar-inner, header, #page-title, #main_content, footer, #footer-call-to-action { 
	box-shadow: 4px 0 4px -4px rgba(0,0,0,0.15), -4px 0 4px -4px rgba(0,0,0,0.15);
	margin: 0 auto;
}
header, #page-title, #main_content, footer, #footer-call-to-action { 
	max-width: 1240px; /* with padding, 1300 pixels total width; HHS is only 1200 pixels... */
}
.navbar-inner {
	max-width: 1280px; /* with padding, 1300 pixels total width; HHS is only 1200 pixels... */
	margin: 0 auto;
}
#main_content {
	padding-right: 20px;
	padding-left: 20px;
}
.language-link {
	position: relative;
	right: 0;
	float: right;
	margin-top: -50px;
	text-align: right;
}
#page-title {
	padding: 0 20px;
}
#page-title .row {
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: -10px;
}
#page-title .container-fluid {
	max-width: 1030px;
}
footer {
	padding: 10px 20px;
}
}