@charset "utf-8";
/* Primary CSS Document for STATS America, 2021, using Bootstrap. Only styles needed sitewide should go in this file.*/

/**** Base styles ****/

body {
	font-family: forma-djr-text, sans-serif;/*color: #00050b;*/
	letter-spacing: .5px;
	color: #00050b;
}
p {
	margin-bottom: 1.3em;
	font-family: forma-djr-text, sans-serif;
	font-weight: 400;
	font-style: normal;

}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
h1 {
	font-family: forma-djr-display, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 46px;
	line-height: 1em;
	margin-top: 10px!important;
	margin-bottom: 8px;
	color: #013A81!important;
	letter-spacing: 2px;
}
h1.big {
    font-size: 70px;
    margin-top: 100px !important;
    margin-bottom: 20px;
}
.lead.big {
    font-size: 30px;
    font-weight: 300;
    color: #585152;
    line-height: 1.0;
    margin-bottom: 100px;
}
h2 {
	font-size: 28px;
	line-height: 1.1em;
	font-family: forma-djr-display, sans-serif;
	font-weight: 500;
	font-style: normal;
	margin-top: 24px;
}
h3 {
font-family: forma-djr-display, sans-serif;
color: #013A81 !important;
font-style: normal;
font-weight:500;
font-size: 18px;
text-decoration: none !important;
margin: 3px 0;
}

h4 {
	font-family: forma-djr-display, sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 18px;
	color: #0066CC;
}
a, a code {
	text-decoration: underline;
	color: #013A81;
}
a:hover, a:hover code {
	text-decoration: underline;
	color: #013A81;
}
a:active, a:active code {
	color: #013A81;
}
.noBottomMargin {
	margin-bottom: 2px;
}
.table {
	font-family: Arial, Helvetica, sans-serif;
}
.table > tbody > tr > th {
	vertical-align: bottom;
	background-color: #c7e5f3;
}
.source {font-size: 0.9em}
figcaption, caption {
	font-weight: bold;
	font-size: 18px;
	color: #007dba;
	letter-spacing: .5px;
}
/*LAYOUT*/
#site-nav {
	margin-left: -15px;
    background-color: #FFFFFF;
   padding-top: 20px;
    padding-bottom:10px;
}
/*NEW 2021 NAV STYLES*/
.gsc-control-searchbox-only {width: 300px}

#site-nav.navbar-default .navbar-nav > li > a {
	color: #C02026;
	text-decoration: none;
    padding-top: 20px;
    padding-bottom:10px;
    background-color: #FFFFFF;
}
.navbar.navbar-default, .navbar button.navbar-toggle {
    border: none; 
}

#site-nav.navbar-default .navbar-nav > li > a:hover {
	color: #013A81;
	text-decoration: underline;
    background-color: #FFFFFF;
}
  .navbar-nav > li > .dropdown-menu {
      border-top-right-radius: 15px;
      /*border-top-left-radius: 15px;*/
      border-bottom-right-radius: 15px;
      border-bottom-left-radius: 15px;        
      }

.navbar-right .dropdown-menu{ /*Overrides Bootstrap setting so dropdown aligns to left side*/
	right:auto;
}

.dropdown-menu>li>a{
  color: #013A81;
 text-decoration:none!important;
}
.dropdown-menu>li>a:hover{
  color: #C02026;
}
/*DROPDOWN SUB MENU HACK
from : https://danielepais.com/journal/how-to-fix-dropdown-submenu-missing-from-bootstrap-3/
start dropdown-submenu 
======================
*/

.dropdown-submenu {
    position:relative;
    padding: 5px 5px 0 0;
	
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 15px 15px 15px;
    -moz-border-radius:0 15px 15px 15px;
    border-radius:0 15px 15px 15px;
	min-width: 200px; /*Change this value if things aren't fitting in the box*/
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    margin-right:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

/* 
====================
end dropdown-submenu 
====================

Additional hack modified from https://stackoverflow.com/questions/37516338/bootstrap-navbar-show-only-submenu-on-mobile to optimize mobile display and open up the sub-menus by default.
*/

@media (max-width: 767px) {
  .navbar-nav .dropdown-submenu .dropdown-menu {
    display: block;
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }  
 
  /*.navbar-inverse .navbar-nav .dropdown-menu > li > a {
    color: #9d9d9d;
  }*/
	.dropdown-submenu>.dropdown-menu li {
		padding-left: 10px;
		font-style: italic;
	}
	/*These styles fix the float issue on the search box on mobile 	*/
	#nav-search {width: 100%}
	.gsc-control-searchbox-only {width: 100%}
       /*These styles fix the big margins top and bottom on mobile */
h1.big {
    margin-top: 10px!important;
    margin-bottom: 20px;
}
.lead.big {
    margin-bottom: 50px!important;
} 

	
}


	
  
/*END NEW 2021 NAV STYLES*/
#skip-nav a {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
 
#skip-nav a:focus {
position:static;
width:auto;
height:auto;
padding: .5em;
font-size: 1.2em;
color: #FFFFFF;	
background-color: #980000;
} 


.navbar-brand {
	padding: 3px 10px 0px 10px;
}
#tagline {
	color: #013A81;
	font-family: forma-djr-display, sans-serif;
	font-size: 18px;
	font-weight: 500;
}
#beta {
	font-size: 11px;
	background-color: #C02026;
	color: #FFF;
	padding: 4px;
	margin-left: 8px;
	border-radius: 5px;
}
#beta a {
	color: #FFF;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}
#supportLine {
	display: block;
	font-family: forma-djr-display, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-top: 10px;
}
#supportLine a {
	text-decoration: none;
}
#supportLine a:hover {
	text-decoration: underline;
}

/*Sets the spacing before the full-width footer band*/
#footer-feedback {margin-top: 4em;}

#footer-feedback h2 {margin-top: 2em; margin-bottom:1.5em;}

/*full width blue bands, used in footer (and elsewhere)*/
.band {
    width: auto !important;
    background-color: #013A81;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
}
.band h2 {
    color: #FFF;
    text-align: center;
}
.band h2 a {
    color: #fff;
}
.band h2 a:hover {
    color: #C02026;
}
#footer-contact-btn {
	font-weight: bold; padding-left: 3em; padding-right: 3em; border-radius: 25px; background-color: #C02026; color:#FFF; margin-bottom:3em;
}
footer {
	font-size: 13px;
	color: #585152;
	margin-top: 4em;
	margin-bottom:20px;
	padding: 10px 0;
	border-top: 1px solid #C02026;
	font-family: Arial, Helvetica, sans-serif;
}
footer a, footer a:visited {
	text-decoration: underline;
	color: #585152;
}
#footerNav ul {
	padding: 0;
	margin: 10px 0 30px 0;
	text-align: left;
}
#footerNav li {
	display: inline;
	color: #C02026;
}
#footerNav li + li:before {
	padding: 0 15px;
	content: "|";
}
#footerNav a, #footerNav a:visited {
	text-decoration: none;
	color: #C02026;
}
#footerNav a:hover {
	text-decoration: underline;
	color: #C02026;
}
#footerLogo {
	float: left;
	margin-right: 30px;
	margin-bottom: 40px;
}
.headingIcon { /*Used for the icons before the H1 on landing pages*/
	float: left;
	margin-right: 1em;
}
.nav-tabs > li.active > a {
	color: #8f5d52;
}
.nav-tabs > li.active > a:hover {
	color: #8f5d52;
}
.nav-tabs + h1 { /*Used to properly space the page title in cases of tabbed subnavigation*/
	margin-top: 24px;
}
a.btn {
	text-decoration: none;
}
.text-danger { /*Overwrites the Bootstrap default*/
	color: #C02026;
}
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger {
	padding: 10px;
}
blockquote footer, blockquote small, blockquote .small {/*Used to override the footer style in blockquote footer*/
	display: block;
	font-size: 80%;
	line-height: 1.42857143;
	color: #999;
	border-top: 1px solid #999;
}
/*Styles for collapsible panels or accordians (e.g., the about page for Innovation Index*/
.panel-default > .panel-heading {
	background: #08519C;
	border-color: #ddd;
	color: #FFF;
}
.panel-body {
	border: thin solid #08519C;
	background: #EDF5F5;
}
.panel-heading h4 {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}
.panel-heading a, .panel-heading a:visited {
	color: #FFF;
	text-decoration: none;
}
.panel-heading.panel-heading a:hover {
	text-decoration: underline;
}
#research img {/*Style for logo resercher image on RED tool pages*/
	border: 1px solid #f0f0f1;
	box-shadow: 0px 1px 10px #d2dbe3;
	float: left;
	margin: -5px 10px 15px 0;
	padding: 5px;
}
/*Mailchimp email sign-up*/
#mc_embed_signup {
    clear: left;
    font: 16px;
    width: 100%;
    margin-bottom: 1.2em;
    padding: 0 1em
}
#mc_embed_signup input.button {
    background-color: #C02026;
}
#mc_embed_signup input.button:hover {
    background-color: #94191d;
}  

#guides p, #guides li {font-size: 16px;} /*Increases default font size for the guides pages*/
#guides p.source {font-size: 0.9em;}

/*MOBILE STYLES*/
@media screen and (min-width: 768px) {
     /* start of large device screen */
     /* mobile logo only displays at screen sizes less than 768px */
  
	 .mobileLogo {
    display: none;
	visibility:hidden;

     }
  
}
@media (max-width: 768px) {
/* start of medium tablet styles */
     /* Adding a fixed/percentage min-width could ensure that the image doesn't get too small */
.img-responsive {
	min-width: 30%;
}
/* Adding an image of the sponsored by the EDA logo to make it continue to appear at a small size */
.mobileLogo {
	display: block;
	width: auto;
	height: auto;
}
#tagline {
	font-size: 15px;
}
 
#footerNav li {
	display: block;
	width: 100%;
}
#footerNav li + li:before {
	padding: 0;
	content: "";
}
h1 {
	font-size: 30px;
}
.navbar-brand img {
	max-width: 180px;
	padding-top: 10px;
}
#supportLine {
	display: none;
}
}
@media screen and (max-width: 479px) {
/* start of phone styles */
/* It's possible to hide the image if the screen becomes too small */
     .img-responsive {
       min-width: 10%;
     }
.mobileLogo {
   display: block;
	width:auto;
	height:auto;
     }
}

/*END MOBILE STYLES*/
/*PRINT STYLES*/
@media print {
a:link, a:visited {
	text-decoration: underline;
}
a:link:after, a:visited:after {
	content: "";
} /*This removes the URL after links that is normally printed due to Bootstrap*/
#supportLine, #footerNav {
	display: none;
}
}
/*END PRINT STYLES*/