@import url(http://www.mcclatchydc.com/static/webfonts/chunkfive.css);
@import url(http://www.mcclatchydc.com/static/webfonts/junction.css);

body{
	font-size: 14px;
}

/* FOLIO STYLES */

#folio-title{
	white-space: wrap;
	font-family:'Chunkfive';
	font-weight:200;
	letter-spacing:.1em;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ie-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: geometricPrecision;
}
#floating-folio{
	background:rgba(255,255,255,.95);
	box-shadow:none;
	border-bottom:2px solid #a7a9ab;
}
#folio-title>div:first-of-type{
	font-size:.75em;
	color:#999;
}
#folio-title>div:last-of-type{
	font-size:1em;
	color:#000;
}
.share-icon{
	font-size:16px;
	z-index: 10;
}

/* HEADER STYLES */

#splash{
	margin:2.2em auto;
	padding:0;
	width:100%;
	position:relative;
}
#splash>*{
	max-width:800px;
	margin:auto;
	position:absolute;
	z-index:5;
}
#splash>.videoBG{
	position:relative;
	max-width:100%;
	width:100%;
	margin:0;
	overflow:hidden;
	z-index:0;
}
#splash>.entry-title{
	bottom:7.5%;
	margin:0;
	left:3%;
	text-align:left;
	max-width:100%;
	line-height:1em;
	font-size:3em;
	text-shadow:0px 1px 1px rgba(51,54,59,.75),
	0px -1px 1px rgba(51,54,59,.75),
	1px 0px 1px rgba(51,54,59,.75),
	-1px 0px 1px rgba(51,54,59,.75),
	0px 2px 1px rgba(51,54,59,.75),
	0px -2px 1px rgba(51,54,59,.75),
	2px 0px 1px rgba(51,54,59,.75),
	-2px 0px 1px rgba(51,54,59,.75);
	color:#fff;
}
#splash>.byline{
	bottom:7%;
	left:3%;
	text-align:left;
	max-width:65%;
	font-size:1em;
	text-shadow:0px 1px 1px rgba(66,105,75,.95),
	0px -1px 1px rgba(66,105,75,.95),
	1px 0px 1px rgba(66,105,75,.95),
	-1px 0px 1px rgba(66,105,75,.95);
	color:#fff;
}
#splash>.credit_posted_modified{
	bottom:9%;
	left:3%;
	text-align:left;
	max-width:65%;
	font-size:.75em;
	text-shadow:0px 1px 1px rgba(66,105,75,.95),
	0px -1px 1px rgba(66,105,75,.95),
	1px 0px 1px rgba(66,105,75,.95),
	-1px 0px 1px rgba(66,105,75,.95);
	color:#fff;
}
#splash>.credit_posted_modified>*{
	color:#fff;
}
.splash .code-item{
	max-width:auto;
}
header .entry-title{
	font-family: "ChunkFive";
	text-shadow: none;
	padding:.5em 0;
	font-size:3.5em;
	line-height:1.1em;
	font-weight:bold;
}
header p{
	font-family: "Junction", Helvetica, Arial, sans-serif;
}
header p>span{
	display:inline-block;
	font-size:.75em;
	font-weight:lighter;
	color:#777;
	margin-right:.25em;
}
header p>span:after{
	content:" //";
	font-weight:lighter;
	display:inline-block;
	margin-left:.25em;
}
header p>span.moddate{
	font-size:.85em;
	color:#8c1c1c;
}
header p>span.creditline{
	font-weight:normal;
}
header p>span:last-of-type:after{
	display:none;
}
header .byline{
	font-size:1.1em;
	font-weight:bold;
	line-height:1.1em;
	margin-top:.5em;
	color:#000;
}

/* STORY BODY COPY STYLES */

.dateline{
	color:#555;
	text-transform: uppercase;
}
/*.dateline:after{
	content:"\2013";
}*/
#article-wrapper>p{
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size:1.2em;
	line-height:1.6em;
	font-weight:normal;
	max-width:600px;
	margin:0 auto 1.25em auto;
}
#article-wrapper>p.shirttail{
	font-family: "Junction", Helvetica, Arial, sans-serif;
	color:#666;
	margin-top:1em;
	padding-top:1em;
	border-top:#d0d0d0 solid 2px;
	font-size:.85em;
}
span.ng_subhead{
	font-family: 'ChunkFive';
	display:block;
	font-weight:700;
	font-size:1.75em;
	max-width:700px;
	margin:1em auto;
	padding-top:.5em;
	line-height:1.15em;
}
b{
	font-weight:bold;
}
#article-wrapper ul>li{
	margin:.25em 2em;
}
ul>li:before{
	content:"• ";
	margin-left:-1em;
	margin-right:.2em;
}

/* CUSTOM ASSET STYLES */

.code-item{
	position:relative;
}

blockquote.quote-item{
	font-family:"ChunkFive";
	position:relative;
	background:#fff;
	color:#000;
	margin:10px;
	padding:30px 60px 15px 60px;
	box-sizing: border-box;
	font-smooth:always;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ie-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: geometricPrecision;
}
blockquote.quote-item.wide{
	margin:10px auto;
}
blockquote.quote-item p{
	position:relative;
}
blockquote.quote-item p:before{
	content:'\FF02';
	font-size:3.5em;
	color:#8c1c1c;
	position:absolute;
	top:.4em;
	left:-70px;
}
blockquote.quote-item p:after{
	content:'"';
}
blockquote.quote-item small{
	color:#8c1c1c;
	margin-top:2em;
	position:relative;
}
blockquote.quote-item small:before{
	content:' ';
	position:absolute;
	left:-60px;
	top:-1em;
	width:100%;
	padding:0 60px;
	border-top:1px solid #ccc;
}
blockquote.quote-item .social-tools{
	position:relative;
	top:-.5em;
	left:30px;
}

.photo-credit{
	font-family: "Junction", Georgia, Times, "Times New Roman", serif;
	margin-top:-.25em;
	margin-bottom:.5em;
}
figcaption{
	font-family: Georgia, Times, "Times New Roman", serif;
	font-weight:700;
	font-size:.85em;
	line-height:1.2em;
	color:#777;
}

.videoBG{
	position:relative;
	max-width:100%;
	width:100%;
	margin:.5em auto;
	overflow:hidden;
	z-index:0;
}
.videoBG .quote-item{
	background:rgba(255,255,255,.65);
	z-index:10;
	position:absolute;
}
.videoBG .quote-item.right{
	right:0;
}

.vid-spr{
	font-family: 'Junction', Helvetica, Arial, sans-serif;
	color:#000;
	font-size:1.25em;
	line-height:1.1em;
	display:block;
}
.video-item figcaption{
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size:.85em;
	line-height:1.15em;
}
.video-item.right, .video-item.left{
	max-width:420px;
}
.comment-item{
	font-family: "Junction", Georgia, Times, "Times New Roman", serif;
	color:#000;
	background:#fff;
	padding:1em;
	line-height:1.1em;
}
.comment-item h3{
	color:#000;
	font-family: "Junction", Georgia, Times, "Times New Roman", serif;
	font-weight:800;
	font-size:1.25em;
	line-height:1.15em;
	padding-bottom:.25em;
	position:relative;
}
.comment-item h3>img{
	width:100%;
}
.comment-item h3:after{
	content:" ";
	border-bottom:1px solid #fff;
	position:absolute;
	width:100%;
	bottom:.25em;
	left:-1em;
	padding:1em;
}
.comment-item a{
	display:block;
	margin-top:.5em;
	color:#8c1c1c;
	font-weight:bold;
}

.gallery-item{
	height:auto !important;
}
.gallery-header-wrapper{
	padding:0 .5em;
}
.gallery-title{
	font-family:'Chunkfive';
	font-size:2.5em;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ie-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: geometricPrecision;
}
.gallery-folio,.gallery-intro{
	font-family: "Junction", Helvetica, Arial, sans-serif;
}
.gallery-folio h2{
	width:100%;
}
.gallery-intro{
	top:auto;
}
.gallery-intro .grayActionButton{
	margin-top:2em;
}
.gallery-photo>img{
	display:block;
}
.left-controller {
	background: #fff url('left-controller.png') no-repeat scroll center center;
	left:0;
	padding:.5em;
	display: none;
}
.right-controller {
	background: #fff url('right-controller.png') no-repeat scroll center center;
	right:0;
	padding:.5em;
}

@media only screen and (min-width : 760px) {

}
@media only screen and (max-width : 700px) {
	.video-item.right, .video-item.left{
		max-width:100%;
	}
}
@media only screen and (max-width : 500px) {
	.party{
		width:97%;
		margin:.5em auto;
	}
}


@media only screen and (max-width : 500px) {
	#folio-title{
		font-size:.45em;
		letter-spacing:0;
	}
	#floating-folio > .logoB, #floating-folio > .logoW {
		margin-right:2px;
	}
	#article-wrapper>p{
		font-size:1.1em;
		line-height:1.25em;
		letter-spacing:.0125em;
	}
	.related{
		font-size:.85em;
	}
	.related:after{
		width:51%;
	}
	.related>.thisPart{
		width:50%;
	}
	.related>.thisPart a{
		font-size:.75em;
		margin:1em 0;
	}
	.related>.nextPart{
		width:45%;
	}
	.comment-item{
		border-width:2px 0;
		border-style:solid;
		border-color:#e8e8e8;
	}
	.comment-item h3{
		margin-top:.25em;
	}
	.video-item figcaption{
		margin-top:.35em;
	}
	.gallery-header-wrapper{
		top:2.5em;
		padding:0 .5em;
	}
	.gallery-title{
		font-size:2em;
		margin-bottom:.25em;
	}
	.gallery-folio,.gallery-intro{
		font-size:.75em;
		line-height:1.25em;
	}
	.gallery-summary{
		display:none;
	}
	.gallery-controller{
		opacity:.25;
	}
	#article-wrapper .videoBG .quote-item{
		top:0;
		left:0;
		width:100%;
		height:100%;
		margin:0 !important;
		padding:30px 15px 0 40px;
		font-size:.8em;
	}
	#article-wrapper .videoBG .quote-item p:before{
		left:-55px;
		right:auto;
		top:.3em;
	}
	#article-wrapper .videoBG .quote-item small{
		line-height:1.15em;
	}
	.videoBG video{
		display:none;
	}
}
@media only screen and (max-width : 450px) {
}
@media only screen and (max-width : 350px) {
	#floating-folio h2{
		display:none;
	}
}