/*
*************************************************

United States Holocaust Memorial Museum

Common element styles, for elements that appear
on many pages across templates that aren't part
of the global site wrapper. Styles must be 
namespaced (id and class selectors only, 
no elements) to be safely included globally, and 
care should be taken to make sure this file only 
contains styles that are used often enough to 
justify their inclusion everywhere.

Author: Russ Sitka

*************************************************
*/


/* Breadcrumb share bar, located just below global header */

#breadcrumb-share {
	background-color:#F1EDE8;
	width:100%;
	box-shadow: 0 1px 10px #808080;
	position:relative;
	z-index:1;
	
	-webkit-box-shadow: 0 1px 10px #808080;
}

.breadcrumb-share-wrap { 
	padding: 0 20px;
	height:45px;
	max-width:1300px;
	display:flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	
	display:-webkit-flex;
	-webkit-justify-content: flex-end;
	-webkit-align-items: center;
}

.breadcrumb-share-wrap ul.breadcrumbs {
	margin: auto 0;
	padding:0;
    display:none;
}

.breadcrumb-share-wrap ul.breadcrumbs li {
	display:block;
	float:left;
    font: bold 11px Arial,sans-serif;
    list-style: outside none none;
    margin: 0 5px 0 0;
    white-space: nowrap;
    text-transform: uppercase;
}

.breadcrumb-share-wrap ul.breadcrumbs li::after {
    color: #666;
    content: ">";
    font: 11px Arial,sans-serif;
    padding-left: 5px;
}

.breadcrumb-share-wrap ul.breadcrumbs li:last-child::after {
	content: "";
}

.breadcrumb-share-wrap #social-share {
	display:flex;
	align-items: center;
	justify-alignment: space-between;
	max-width: 300px;
	
	display:-webkit-flex;
	-webkit-align-items: center;
	-webkit-justify-content: space-between;
}

.breadcrumb-share-wrap #social-share h4 {
	font: bold 11px Arial, sans-serif;
	text-transform:uppercase;
	margin:0 8px 0 0;
	vertical-align: text-top;
}

.breadcrumb-share-wrap #social-share a {
	background-color:#FFF;
	color:#AAA;
    border-radius: 25px;
    height: 38px;
    width: 38px;
    text-align: center;
    transition: all 300ms;
    opacity:.8;
    margin: 0px 2px;
    
    -webkit-border-radius: 25px;
    -webkit-transition: all 300ms;
}

.breadcrumb-share-wrap #social-share a:hover {
	opacity:1;
}

/* Color rollovers for Facebook/Twitter/G+/LinkedIn/Email */
.breadcrumb-share-wrap #social-share a:nth-child(2):hover {
	color:#425E9C;
}

.breadcrumb-share-wrap #social-share a:nth-child(3):hover {
	color:#55ACEE;
}

.breadcrumb-share-wrap #social-share a:nth-child(4):hover {
	color:#DD4B39;
}

.breadcrumb-share-wrap #social-share a:nth-child(5):hover {
	color:#0077B5;
}

.breadcrumb-share-wrap #social-share a:nth-child(6):hover {
	color:#FCA128;
}

.breadcrumb-share-wrap #social-share a i {
    font-size: 20px;
    padding: 8px 0;
    margin:1px 0 0 0;
    height: 20px;
    width: 20px;
}

/* Bootstrap button style overrides */

.btn {
	font-family: "Knockout 50 A", "Knockout 50 B", "Arial Narrow", "Trebuchet MS", Helvetica, sans-serif;
	font-size: 1.15em;
	letter-spacing: 0.5px;
}

.body-wrapper .btn {
	width: 90%;
	max-width: 310px;
}

/*
.btn-default {
  background-color: #4f6d91;
  color:#FFF;
}
.btn-default:hover,
.btn-default:focus {
  background-color: #699ad6;
}
.btn-default:active,
.btn-default.active {
  background-color: #699ad6;
}*/

/* ------------------------------------
Page title header (below global header that contains title/optional banner/share tools)
--------------------------------------*/

#page-title-header {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

#page-title-header .shadow-fix {
	-moz-box-shadow: inset 0 -130px 160px #000;
	-webkit-box-shadow: inset 0 -130px 160px #000;
	box-shadow: inset 0 -130px 160px #000;
	width: 140%;
	height: 100%;
	position: absolute;
	left: -20%;
	z-index: 10;
	opacity: 0.7;
}	

#page-title-header .title-box {
	position: absolute;
	bottom: 0px;
	z-index: 11;
	width: 100%;
}

#page-title-header h3 {
	font-family: "Mercury SSm A","Mercury SSm B",Georgia,serif;
	font-size: 1.25em;
	line-height:1.2em;
	text-transform:none;
	color: #FFF;
	margin: 10px 0 6px;
}

#page-title-header .title-box h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    letter-spacing: 1.5px;
    margin: 1.75em 0 5px 0;
    color: #fff;
    padding-bottom: 2px;
}

#page-title-header .title-box h4, #page-title-header .title-box h4 a {
	color: #fff;
}

#page-title-header .title-box h4 a:hover {
	text-decoration:none;
}

#page-title-header .title-content {
	max-width: 1400px;
	padding: 0 1.2em;
	margin: 0 auto;
}

#page-title-header .no-top-img {
	position:static;
	color:#000;
}

#page-title-header .no-top-img h4, #page-title-header .no-top-img h4 a {
    font-weight:bold;
}

#page-title-header .no-top-img h1,
#page-title-header .no-top-img h3,
#page-title-header .no-top-img h4,
#page-title-header .no-top-img h4 a {
	color:#333;
}


/* ------------------------------------
Share tools
--------------------------------------*/

#share-bar {
    margin: 0;
    padding: 0.35em 0 1.25em;
}

.optical-shadow {
    height: 1.25px;
    margin-bottom: 12px;
    background: -webkit-linear-gradient(right, rgba(230,119,0,0), rgba(230,119,0,1));
    background: -o-linear-gradient(left, rgba(230,119,0,0), rgba(230,119,0,1));
    background: -moz-linear-gradient(left, rgba(230,119,0,0), rgba(230,119,0,1));
    background: linear-gradient(to left, rgba(230,119,0,0), rgba(230,119,0,1));
}

.opt-content-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1em;
}

#share-bar span {
    font-size: 0.75em;
    color: #fff;
    padding-right: 5px;
    position: relative;
    top: -1px;
    text-transform: uppercase;
    font-weight: bold;
}

#share-bar .opt-content-inner a:nth-child(2), #share-bar .opt-content-inner a:nth-child(3), #share-bar .opt-content-inner a:nth-child(4) {
    font-size: 1.3em;
    top: 2px;
}

#share-bar a {
    display: inline-block;
    margin: 0 4px;
    font-size: 1.15em;
    background: #e0e0e0;
    height: 30px;
    width: 30px;
    text-align: center;
    position: relative;
    border-radius: 50%;
    color: #666;
}

.no-top-img #share-bar {
	background:transparent;
	margin: 0 0 2em 0;
}
 
.no-top-img #share-bar span {
	color:#000;
}

/* ------------------------------------
Breaking News
--------------------------------------*/
#breaking-news {
	background:#FFC url('/a/i/homepage/concrete.png') repeat;
	z-index:4;
	position:relative;
	min-height:95px;
	border-bottom:1px solid #999;
	text-align:left;
}
#breaking-news .section-inner {
	padding:1.1em 0;
}
#breaking-news h2 {
	margin:0;
	color:#333;
	padding:0 0 4px;
}
#breaking-news p {
	color:#454545;
}
#breaking-news i {
	float:right;
	font-size:35px;
	color:#444;
	position:relative;
	right:-5px;
	opacity:0.5;
	transition: all 300ms;
	-webkit-transition: all 300ms;
}
#breaking-news i:hover {
	opacity:1.0;
	cursor:pointer;
}
#breaking-news img {
	float:left;
	height:80px;
	margin-right:10px;
}
#breaking-news a {
	color:#aa0000;
	font-weight:bold;
}
#breaking-news span {
	font-size:0.75em;
	text-transform:uppercase;
	font-weight:bold;
}

/*----------------------------------
Footer context nav
----------------------------------*/

#related-bar {
    background: #e3e3e3 url("/a/i/homepage/concrete.png") repeat scroll 0 0;
    border-bottom: 1px solid #fff;
    box-shadow: 0 2px 2px #bbb;
    padding: 2em 0 0;
    position: relative;
    z-index: 4;
    overflow:hidden;
}

#related-bar .opt-content-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1em;
}

.in-out-shadow {
    height: 1.25px;
    width: 100%;
    background: -webkit-linear-gradient(right, rgba(230,119,0,0), rgba(230,119,0,1), rgba(230,119,0,0));
    background: -o-linear-gradient(left, rgba(230,119,0,0), rgba(230,119,0,1), rgba(230,119,0,0));
    background: -moz-linear-gradient(left, rgba(230,119,0,0), rgba(230,119,0,1), rgba(230,119,0,0));
    background: linear-gradient(to left, rgba(230,119,0,0), rgba(230,119,0,1), rgba(230,119,0,0));
    margin: 5px 0;
}

#related-bar .shadow-box {
    height: 75px;
    width: 105%;
    position: absolute;
    top: -3px;
    left: -2%;
    background: -webkit-linear-gradient(bottom, rgba(238,238,238,0), rgba(238,238,238,1));
    background: -o-linear-gradient(top, rgba(238,238,238,0), rgba(238,238,238,1));
    background: -moz-linear-gradient(top, rgba(238,238,238,0), rgba(238,238,238,1));
    background: linear-gradient(to top, rgba(238,238,238,0), rgba(238,238,238,1));
}

#footer-context-nav li.level-1 ul {
	padding:0;
	display:none;
}

#footer-context-nav {
    background: #fff none repeat scroll 0 0;
    border-top: 1px solid #c8c8c8;
    margin-top: 3.25em;
    padding: 1.85em 1em 1em;
    position: relative;
    z-index: 4;
}

#footer-context-nav h2 {
    font-family: "Mercury SSm A","Mercury SSm B",Georgia,serif;
    font-size: 1.75em;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: none;
    z-index: 2;
}

#footer-context-nav h2 span {
    background: #fff none repeat scroll 0 0;
    padding: 0 10px;
}

#footer-context-nav .top-lvl-nav {
    padding-left: 0;
    margin-top:15px;
    width: 100%;
    display:block;
}

#footer-context-nav .top-lvl-nav > li.level-1 {
    background: rgba(232, 131, 30, 0.85) none repeat scroll 0 0;
    border-bottom: 1px solid #fff;
    margin: 0;
    padding: 12px 10px 8px;
    transition: all 0.5s ease 0s;
    list-style:none;
}

#footer-context-nav .top-lvl-nav > li.enabled {
    background: #eee none repeat scroll 0 0;
}

#footer-context-nav .top-lvl-nav li.level-2 {
    display: none;
    margin-right: 0;
}

#footer-context-nav .top-lvl-nav li:last-child {
    margin-right: 0;
}

#footer-context-nav .top-lvl-nav li.enabled ul li {
    border-bottom: 1px dotted #4f6d90;
    display: block;
    font-size: 0.9em;
    padding: 1px 0;
}

#footer-context-nav .top-lvl-nav ul li a:last-child {
    border-bottom: medium none;
}

#footer-context-nav .top-lvl-nav li a:hover {
    text-decoration: none;
}

#footer-context-nav .top-lvl-nav li h3 {
    color: #fff;
    cursor: pointer;
    margin: 3px 0 7px;
    max-width: 100%;
    position: relative;
    text-shadow: none;
    transition: all 0.5s ease 0s;
}

#footer-context-nav .top-lvl-nav li.enabled h3 {
    color: #333;
}

#footer-context-nav .top-lvl-nav li h3 i {
    position: absolute;
    right: 10px;
    top: -2px;
}

#footer-context-nav figure {
    display: none;
    overflow: hidden;
    width: 28%;
}

#footer-context-nav figure img {
    width: 100%;
}

/* Media queries */

@media (max-width:365px) {
	#related-bar li p {
		display:none;
	}
}

@media (min-width:500px) {
	/** related items **/
	#related-bar li h4 {
		display:block;
	}
	
}

@media (max-width:600px) {

	#page-title-header .title-box {
		position: static;
	}
	
	#page-title-header .title-content h4 a {
		font-weight:bold;
	}

	#page-title-header .title-content h1,
	#page-title-header .title-content h3,
	#page-title-header .title-content h4 a {
		color:#333;
	}
	
	#page-title-header .shadow-fix {
		display:none;
	}
	
	#share-bar span {
		color:#333;
	}
	
}

@media (min-width:768px) {
	
	.breadcrumb-share-wrap ul.breadcrumbs {
		display:block;
    }
    
    .breadcrumb-share-wrap { 
    	justify-content: space-between;
    	
    	-webkit-justify-content: space-between;
	}
	
	.opt-content-inner {
		padding: 0 1.2em;
	}
	
	
	#page-title-header .title-box h1 { 
		font-size: 4em;
	}

	#page-title-header .title-box h3 {
		font-size: 2.15em;
		margin: 12px 0 6px;
	}

	#page-title-header .title-box h4 {
		letter-spacing: 2px;
	}
	
	#share-bar .opt-content-inner {
		padding: 0 2em;
	}
	
	#related-bar h3 {
		text-shadow:1px 1px 0 #fff;
		margin:0 0 15px 12px;
		letter-spacing:0.5px;
		font-size:1.3em;
		position:relative;
		z-index:3;
		max-width:100%;
	}
	
	#related-bar > ul {
		list-style:none;
		padding:0 0.75em;
		margin:0 0 -1px 0;
		display:flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		flex-wrap:nowrap;
		position:relative;
		z-index:2;
	}
	
	#related-bar li.level-1 {
		flex-grow:1;
		padding:0;
		margin:0 0 0 -1px;
		border:1px solid #fff;
		color:#fff;
	}
	
	#footer-context-nav-grid {
		display:flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		flex-wrap:nowrap;
	}
	
	#footer-context-nav .top-lvl-nav {
		padding-left:0;
		width:70%;
		margin: 15px auto 10px;
	}
	#footer-context-nav figure {
		width:28%;
		overflow:hidden;
		display:block;
		margin:16px 2% 0 0;
		position:relative;
	}
	#footer-context-nav figure h4 {
		position:absolute;
		top:3px;
		left:10px;
		font-size:0.9em;
		letter-spacing:1px;
		display:inline-block;
		background:#333;
		padding:3px;
	}
	#footer-context-nav figure h4, #footer-context-nav figure h4 a {
		color:#e67700;
	}
	/*
	#footer-context-nav figure h4:hover {
		background:#555;
	}*/
	#footer-context-nav figure h4 a:hover {
		text-decoration:none;
	}
	#footer-context-nav figure figcaption h3 {
		margin:5px 0;
		line-height:1em;
	}
	#footer-context-nav figure figcaption p {
		font-size:0.8em;
		color:#555;
	}
	
}

@media (min-width:768px) and (max-width:1095px) {
	
	#footer-related-links li figcaption h4,
	#footer-related-links li figcaption p {
		display:none;
	}
}

@media (min-width:1095px) {

	#page-title-header .title-content { 
		padding: 0 2em; 
	}
	
}	

@media (min-width:1200px) {

	#footer-context-nav h2 {
		font-size:1.75em;
		padding-left:19px;
	}
	#footer-context-nav .top-lvl-nav li.level-1 {
		flex-grow:1;
		flex-basis:25%;
		padding:1em 1.1em;
		margin:0;
	}
	#footer-context-nav .top-lvl-nav li.level-2 {
		padding:0;
	}
	
}	

@media (min-width:1300px) {

	.breadcrumb-share-wrap { 	
		padding: 0;
	}
	
}