/* esrl.css contains the overall template structure with header and footer elements, navigation and body defaults */

/* Global Styles */
html {
  position: relative;
  min-height: 100%;
}

body {
	height: 100%;
	font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
	background: #fff;
	line-height: 1.7;
}

section {
	padding: 2em 0 1em 0;
}

.anchor {
    margin-top: -60px; /* height of nav */
    display: block;
    height: 60px; /* height of nav */
    visibility: hidden;
    position: relative;
}

a {
	color: #336699;
}
a:hover {
	text-decoration: none;
	color: #336699;
}

b,strong {
	font-weight: 600;
}

h1 {
	font-weight: 300;
	margin-bottom: .5em;
}
h2,h3 {
	font-weight: 400;
	line-height: 1.3;
}
h4,h5 {
	font-weight: 500;
	line-height: 1.2;
	color: #555;
}
h1.header {
	font-size: 4rem; 
	color: white; 
	text-align: center;
	padding: .5em 0;
}
h2.header {
	font-weight: 300;
	font-size: 2.6rem; 
	color: #666; 
	text-align: center;
	padding: .2em 0;
}
h3.header {
	font-weight: 300;
	font-size: 2.4rem; 
	color: #606; 
	text-align: center;
	padding: .2em 0;
}
.header a {
	color: #666; 
}
.header a:hover {
	color: #606;
}
.heading {
	padding: 0 0 .2em 0;
	color: #666;
}
.heading a {
	color: #666;
}
.researchheading {
	padding: 0 0 .4em 0;
	color: #c63;
}
.researchheading a {
	color: #c63;
}
.bar-header {
    background: #eee; 
    border-radius: .1em;
    padding: .1em 0 .1em 0;
    margin: 0 0 .5em 0;
    text-align: center;
	color: #c63;
	font-weight: 400;
}
 
 /* Buttons */
.more-button {
	color: black; 
	background: transparent; 
	border: 1px solid black; 
	display: inline;
}
.more-button:hover {
	background: rgba(0,0,0,0.7);
	color: white;
}
.intro-button {
/*	color: white; 
	background: transparent; */
	color: #666;
	background: #f4f4f4; /*rgba(255,255,255,0.7)*/
	border: 1px solid white; 
}
.intro-button:hover {
/* 	color: #666;
	background: #f4f4f4; */
	color: white;
	background: #ccc; /*rgba(255,255,255,0.7)*/
}
[aria-expanded="false"] > .expanded,
[aria-expanded="true"] > .collapsed {
  display: none;
}
span.incircle {
	border: 1px solid #666;
	border-radius: 50%;
	display: inline-block;
	padding: 6px 3px 3px 3px;
	width: 30px;
	height: 30px;
	color: #666;
}
span.incircle:hover {
	color: #000;
	text-decoration: none;
}

/* Button Icons */
.btn-icon:link,
.btn-icon:visited,
.btn-icon:focus {
    color: #666;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.btn-icon:hover {
	color: #606;
	background: none;
}
.btn-icon {
	margin: 0 0 0 1em;
	padding: 0;
}

/* Carousel fade transition */
.carousel {
	margin-bottom: 2em;
}

.carousel-caption {
	padding: 0 1em;
}

.carousel-caption a {
	color: #fff;
}

.carousel-caption h4 a {
	font-weight: 400;
	text-shadow: 2px 2px #333;
}

/* Cards */
.card {
	border: none;
	background: transparent;
}
.card img {
	width: 100%;
}
.card-img-top a {
	display: block;
}
.card-body {
  background-color: transparent;
  padding: 0;
  /*box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);*/
}
.card-title {
  color: #c63;
  text-align: center;
}
.card-title a {
  color: #c63;
}
.card h3,h4,h5 {	
	margin-top: .3em;
	margin-bottom: .1em;
}

/* Image Overlays */
.img-overlay {
	margin-bottom: 1em;
	position: relative;
	text-align: center;
}
.img-overlay h5 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-shadow: 1px 1px #000;
	padding: .5em;
}

/* Search Box */
#custom-search-input {
	margin-left: 1em;
	width: 16em;
}
#custom-search-input .search-query {
/* IE7-8 doesn't have border-radius, so don't indent the padding */
	border: none;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
}
#custom-search-input button {
	border: none;
	background: none;
	padding: 0 .1em;
	position: relative;
	left: -2em;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
	margin-bottom: 0;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	color: #444;
	z-index: 100;
}

/* top navbar */
.navbar {
	background: #444;
	border-bottom: 1px solid #666;
    z-index: 200;
}
.navbar-brand {
	float: left;
	padding: 0;
}
.navbar-brand img {
	margin-right: .2em;
}
.navbar a {
	color: #fff;
	/*color: #ccc;*/
	padding: .2em 0 0 0;
}
.navbar a:hover {
	color: #fff;
}
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover {
	background: transparent;
}
.navbar-toggler {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	border: none;
	color: white;
}
.navbar-toggler:hover, .navbar-toggler:focus {
    background-color: transparent;
}
.dropdown-menu:hover {
	background: #444;
}
.dropdown-menu {
	background: #444;
	opacity: .95;
	/*background: rgba(0,0,0,0.8);/*rgba(61,86,110,0.9);*/
	border: none;
	white-space: nowrap;
}
.dropdown-menu>li {
	margin-top: .2em;
}
.dropdown-menu>li>a {
	padding-left: .4em;
	padding-right: .4em;
    text-transform: none;
    color: #fff;
    display: block;
}
.dropdown-menu>li>a:hover {
	background: #888;
}

/*** tabs ***/
.tab-content{
  	background: #fdfdfd;
    line-height: 25px;
    border: 1px solid #ddd;
    border-top: 3px solid #c63;
    border-bottom: 3px solid #c63;
    padding: 1em;
}
.nav-tabs > li > a {
	color: #666;
	background: #eee;
}
.nav-tabs > li > a:hover {
	color: #999;
	background: #fff;
}

/*** pills ***/
.nav-pills > li > a {
	color: #c63;
	background: #eee;
	border: 1px dotted #c63;
}
.nav-pills > li > a:hover {
	color: #fff;
	background: #c63;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #c63;
}

/* Breadcrumbs */
.breadcrumb {
	clear: both;
	position: relative;
 	background: transparent;
	padding: 0 0 0 0;
	margin: 0 1em 1em 0;
 	font-size: .75em;
}
.breadcrumb a {
	color: #c63;
	text-decoration: none;
}
.breadcrumb>.active {
	color: #444;
}
.breadcrumb>li+li:before {
	color: #000; content: "\00BB";
}

/* Side Bar Navigation */
.affix {
	position: fixed;
	z-index: 300;
}
#minor_nav, .sidebar {
	margin: 0;
	padding: 0 .4em .4em .4em;
	font-size: .9em;
	background: #f4f4f4;
	border: 1px solid transparent;
	border-radius: 5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}
#minor_nav dt a:link, #minor_nav dt a:visited, #minor_nav dt a:focus {
    color: #666;
    text-decoration: none;
}
#minor_nav dt a:hover {
	color: white;
    background: #666;
	display: block;
}
#minor_nav dt {
    border-bottom: 1px solid #c63; 
}
#minor_nav dd a:link, #minor_nav dd a:visited, #minor_nav dd a:focus {
    color: #666;
    text-decoration: none;
}
#minor_nav dd a:hover {
	color: white;
    background: #666;
	display: block;
}
#minor_nav dd {
    margin: 0;
    padding: 0;
    font-weight: 400;
}
.sidebar p, li {
	margin: .3em;
}
.sidebar .researchheading {
	margin: .6em 0 0 0;
}

/* Toggled Side Navigation */
.sidenav {
	height: 100%;
	width: auto;
	display:none;
	position: fixed;
	z-index: 300;
	top: 0;
	right: 0;
	background-color: #666;
	overflow-x: visible;
	overflow-y: scroll;
	padding-top: 3.3em;
	box-shadow: -6px 0px 12px 1px rgba(0, 0, 0, 0.175);
	opacity: .95;
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: .5em;
	font-size: 2.5em;
	color: #c63;
}

/* Footer */
.footer {
	margin: 1em 0 0 0;
	padding: .9em 0 0 0;
	font-size: .9em;
	color: #fff;
	letter-spacing: 1px;
	font-weight: 400;
	border-top: 4px solid #c63;
}
.footer h4 {
	border-left: 2px solid #c63;
	margin: .8em 0 .6em 0;
	padding-left: 1em;
	letter-spacing: 1px;
	font-weight: 400;
	font-size: 1.2em;
	color: #ccc;
}
.footer a {color: #ccc; text-decoration: none;}
.footer a:hover {color: #fff;}
.footer p {
	margin: 0 0 0 1em;
}
.connect {
	margin: .6em 0 0 1em;
}
.subFooter {
	border-top: 1px solid #666;
	margin-top: 1em;
	padding: 1em 0;
	text-align: center;
    font-size: .8em;
	color: #ccc;
}