/* OVERALL STYLES */
body {
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, serif;
	font-weight: normal;
	color: #2B2B2B;
}
h2.header { 
	font: bold 14px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	border-top: 3px solid #666;
	color: #555;
	margin-top: 30px;
	margin-bottom: 15px;
}
h2.header strong {
	background-color: #666;
	color: #fff;
	display: inline-block;
	padding: 5px 10px 7px 10px;
}
h2.header span {
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: normal;
	color: #555;
	padding-left: 10px;
	text-transform: none;
}
h3 { line-height: 1.3em; }
h3 a:link, h3 a:visited { color: #2B2B2B; }
h5 { font: bold 13px Arial, Helvetica, sans-serif; text-transform: uppercase; }
h5 a:link, h5 a:visited { color: #C00; }

a:link, a:visited { color: #2B2B2B; text-decoration: none; }
a:hover, a:active { text-decoration: underline; }


/* NAVBAR */
.navbar-inner { 
	border-bottom: 2px solid #ccc;
}
.navbar .brand { 
	color: #fff; text-shadow: none;
	background: url('../images/ico-jccf.gif') no-repeat left center;
	padding-left: 35px;
	margin-left: 0;
	text-transform: uppercase;
	font-size: 14px;
}
.navbar .nav > li > a { color: #fff; text-shadow: none; }


/* MAIN */
#main { margin-top: 90px; }


/* TITLE AND INTRO */
.title { margin-bottom: 20px; }
.title h1 { 
	font-size: 64px; 
	line-height: 1.35em;
	background: url('../images/hed-when-a-child-dies.png') no-repeat;
	text-indent: -9999px;
	height: 53px;
	overflow: hidden;
}
.intro { padding-top: 22px; }
.intro p { font: 14px/1.8em Georgia, serif; color: #555; }
.intro p.first { font-size: 20px; font-style: italic; color: #111; }
.intro a { font-weight: bold; }


/* CAROUSEL */
.carousel .credit { font-style: italic; font-size: 90%; color: #999; }
.carousel h4 { font-size: 20px; margin-bottom: 10px; }
.carousel p { color: #999; }
.carousel a { color: #fff; }


/* MULTIMEDIA ROW */
#multimedia .thumbnail { padding: 0; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#multimedia .thumbnail .caption { padding: 0; color: #666; }
#multimedia .thumbnail h3 { margin-bottom: 0; }
#multimedia .thumbnail h5 { margin-top: 0; color: #666; font-style: italic; }


/* RESOURCES */
#resources h3 { font-size: 20px; }
#resources p { font-size: 13px; margin-bottom: 25px; color: #333; }


/* STORY */
.story #main { margin-top: 60px; }
#storytext { }
#storytext h2, #storytext h3, #storytext p, #storytext ul, #storytext hr { margin-left: 15%; }
.story.wide #storytext h2, .story.wide #storytext h3, .story.wide #storytext p, .story.wide #storytext ul, .story.wide #storytext hr { margin-left: 0; }
#storytext h1 { margin-bottom: 30px; }
#storytext h2 { font-size: 24px; }
#storytext h3 { 
	margin-top: 0; margin-bottom: 15px; 
	color: #666; font-style: italic; font-size: 16px;
}
body.resources #storytext h3 { padding-top: 50px; }
#storytext h4 { color: #666; font-style: italic; margin-bottom: 30px; }
#storytext p { line-height: 1.6em; color: #121212; }
#storytext p.feedback { font-size: 12px; color: #666; margin-top: 20px; margin-bottom: 40px; }
#storytext ul { margin-bottom: 30px; color: #121212; line-height: 1.6em; padding: 0; }
#storytext ul ul { margin: 10px 0 10px 5%; }
#storytext li { margin: 0 0 10px 15px; }
#storytext li span { font-size: 90%; color: #999; }
#storytext a { font-weight: bold; color: #C00; }
#storytext img.photo-left { float: left; margin-right: 20px; margin-bottom: 20px; }
#storytext hr { clear: both; }

#storytext .page-nav {
	font-size: .85em;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #ccc;
}
#storytext .page-nav h2.header {
	margin: 0 0 15px 0;
	font-size: 12px;
}
#storytext .page-nav ul {
	width: 30%; 
	float: left;
	margin: 0 3% 0 0;
}
#storytext .page-nav li {
	margin-bottom: 3px; color: #ccc;
	line-height: 1.5;
}
#storytext .page-nav a { color: #555; font-weight: normal; }
#storytext .page-nav a:hover { color: #2b2b2b; }
#storytext .page-nav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.pullquote { 
	float: left; margin: 10px 20px 20px 0;
	font: italic normal 22px/1.6em Georgia, serif;
	color: #999;
	border-top: 1px solid #ccc;
	padding-top: 15px;
}

/* via http://amobil.se/2011/11/responsive-embeds/ */
.video-container {
	position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    margin: 30px 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#storytext .sidebar {
	float: left; margin: 10px 20px 20px 0;
	border-top: 1px solid #ccc;
	padding-top: 15px;
}
#storytext .sidebar h4 { margin-top: 0; margin-bottom: 10px; }
#storytext .sidebar p { margin-left: 0; font-size: 13px; line-height: 1.5; }
#storytext .sidebar .credit { color: #999; }
#storytext .sidebar .video-container { margin: 5px 0; }


.story #resources h2.header { 
	border-color: #bbb;
	font-size: 12px; 
}
.story #resources h2.header strong {
	display: block;
	background-color: #bbb;
}
.story #resources h3 { font-size: 16px; }
.story #resources p { color: #888; font-size: 12px; }
.story #resources a:link, .story #resources a:visited { color: #555; }
.story #resources a:hover, .story #resources a:active { color: #2B2B2B; }


/* PROJECT CREDITS */
#project-credits { margin-top: 40px; }
#project-credits p {
	font: 12px/1.5 Arial, Helvetica, sans-serif;
	color: #888;
}
#project-credits a {
	font-weight: bold;
}


/* SLIDESHOW */
body.wide #storytext h1 { margin-bottom: 5px; }
#slideshow { margin-bottom: 20px; }
#slideshow li { background-color: #121212; margin: 0; vertical-align: middle; }
#slideshow .photo img { display: block; margin: 0 auto; vertical-align: middle; max-height: 640px; }
#slideshow .caption { padding: 10px 0; }
#slideshow .caption p { text-align: center; color: #ccc; font-size: 13px; line-height: 1.5em; margin-bottom: 0; }
#slideshow .caption .credit { color: #787878; padding-left: 10px; }
.slideshow-buttons { background-color: #333; border-top: 1px solid #666; }
.slideshow-buttons .button-wrapper { width: 244px; margin: 0 auto; }
.slideshow-buttons .button-wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.slideshow-buttons .btn-slideshow { 
	width: 80px; border-right: 1px solid #666; float: left; padding: 5px 0; 
	font-size: 12px; text-transform: uppercase; color: #fff; text-align: center;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
.slideshow-buttons .btn-slideshow:hover { cursor: pointer; background-color: #444; }
.slideshow-buttons #back-btn { border-left: 1px solid #666; }
.slideshow-buttons #slideshow-status { color: #999; }
.slideshow-buttons #slideshow-status:hover { cursor: default; background-color: inherit; }


/* DATAVIS */
#datavis {
	padding-top: 20px;
	padding-bottom: 40px;
}
#datavis:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.datavis-types,
#storytext ul.datavis-types {
	list-style-type: none;
	margin-bottom: 36px;
}
#storytext .datavis-types li {
	display: inline-block;
	margin: 0 2px 2px 0;
	text-indent: 0;
	background-color: #fff;
	font-size: 12px;
	-webkit-user-select: none; 
	-moz-user-select: none; 
	user-select: none;
}
#storytext .datavis-types li.header,
#storytext .datavis-types li.header:hover {
	background-color: #bbb;
	cursor: default;
	margin-right: -2px;
	display: block;
}
#storytext .datavis-types li.header strong {
	display: block;
	font-weight: bold;
	font-size: 12px;
	padding: 5px 10px 7px 10px;
	color: #fff;
	text-transform: uppercase;
	text-shadow: none;
}
.datavis-types input {
	margin-right: 3px;
	margin-top: -3px;
	display: none;
}
.datavis-types label {
	display: block;
	cursor: pointer;
	font-size: 12px;
	padding: 5px 15px 7px 15px;
	margin: 0;
	color: #666;
}
#storytext .datavis-types li.active label {
	-webkit-font-smoothing: antialiased;
	cursor: default;
}

.datavis-nav {
	display: table;
	width: 100%;
	border-bottom: 3px solid #666;
	margin: 0 0 30px 0;
}
.datavis-nav li {
	display: table-cell;
	width: 33%;
	text-align: center;
	line-height: 44px;
	background-color: #bbb;
	border-left: 2px solid #fff;
	border-bottom: 1px solid #fff;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
}
.datavis-nav li:first-child {
	border-left: none;
}
.datavis-nav li:hover {
	cursor: pointer;
	background-color: #ddd;
}
.datavis-nav li.active {
	background-color: #666;
	border-bottom: none;
	color: #fff;
}

.chart { 
	width: 20%; 
	float: left;
	margin-bottom: 25px;
}
#storytext .chart h3 {
	font: normal bold 13px Arial, Helvetica, sans-serif;
	color: #555;
	height: 2.5em;
	overflow: hidden;
}
#storytext .chart h3,
#storytext .chart ul {
	padding-left: 10px; padding-right: 10px;
}
#storytext .chart ul {
	margin: 0;
	list-style: none;
}
#storytext .chart li.bar {
	margin: 0;
	padding: 8px;
	border: 1px solid #fff;
	position: relative;
	z-index: -20;
	-webkit-font-smoothing: antialiased;
}
#storytext .chart li.bar .name,
#storytext .chart li.bar .value { 
	z-index: 10;
	color: #555;
	font-size: 13px;
	line-height: 1.3;
}
#storytext .chart li.bar .name { 
	float: left; width: 70%;
}
#storytext .chart li.bar .value { 
	float: right;
}
#storytext .chart li.bar .bg { 
	display: block;
	position: absolute; top: 0; left: 0;
	width: 0; height: 100%;
	z-index: -10;
}
#storytext .chart li.bar:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#storytext .chart li.bar.active .name,
#storytext .chart li.bar.active .value {
}

/* lighter bg color */
#storytext .datavis-types li:hover,
#storytext .chart li.bar,
#storytext .datavis-types li {
	background-color: #fdecd5;
}
/* highlight text styles */
#storytext .datavis-types li.active label,
#storytext .chart li.bar.active .name,
#storytext .chart li.bar.active .value {
	font-weight: bold;
	color: #333;
	-webkit-font-smoothing: antialiased;
	text-shadow: 1px 0px 2px #fdecd5;
	cursor: default;
}
/* default color */
#storytext .chart li.bar .bg { 
	background-color: #fcd9ac;
}
/* highlight color */
#storytext .datavis-types li.active,
#storytext .chart li.bar.active .bg {
	background-color: #f9b863;
}



/* FOOTER */
#footer ul { 
	border-top: 5px solid #C00;
	padding-top: 20px;
	margin-top: 10px;
	text-align: right;
}
#footer ul li {
	display: inline-block;
	margin-left: 10px;
	padding-left: 10px;
	font-size: 12px;
	color: #999;
	border-left: 1px solid #ccc;
}
#footer ul li.umd,
#footer ul li.about {
	margin-left: 0;
	padding-left: 0;
	border: none;
}
#footer ul li.umd { float: left; }



/* MEDIA QUERIES */
@media (min-width: 1200px) {
	#storytext .datavis-types li.header, #storytext .datavis-types li.header:hover { display: inline-block; }
}
@media (max-width: 979px) {
	#main { margin-top: 0; }
	#storytext .page-nav ul { width: 100%; margin-right: 0; }
	#storytext .chart h3 { height: 3.5em; }
	.intro { padding-top: 0; }
	.intro, #index-content, #index-content .span9 { width: 724px; }
	.intro:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	.story #main { margin-top: 0; }
	#footer ul { text-align: left; }
	#footer ul li.umd { display: block; float: none; }
}
@media (max-width: 767px) {
	.intro, #index-content, #index-content .span9 { width: 100%; }
	#storytext { margin-right: 0; margin-bottom: 30px; }
	#storytext h2, #storytext h3, #storytext p, #storytext ul, #storytext hr { margin-left: 0; }
	#storytext .chart h3 { height: auto; }
	.pullquote { margin-right: 0; }
	#footer ul { margin-left: 0; text-align: left; }
	#footer ul li.umd { float: none; display: block; }
	#footer ul li.about { clear: both; }
	.datavis-types label { line-height: 44px; }
}
@media (max-width: 767px) and (min-width: 481px) {
	.chart { width: 50%; }
	.chart:nth-child(odd) { clear: left; }
}
@media (max-width: 480px) {
	.story #main, #main { margin-top: 0; }
	.title h1 {
		background: none;
		height: auto;
		text-indent: 0;
		color: #555;
		font-size: 36px;
	}
	.intro { padding-top: 0; }
	.intro p:first-child { font-size: 18px; font-style: normal; }
	#storytext h1 { font-size: 32px; }
	.pullquote { display: none; }
	.chart { width: 100%; float: none; }
	#storytext .chart h3, #storytext .chart ul { padding-left: 0; padding-right: 0; }
}