/*
File: Layout CSS
*/


body{font-family:Arial, Helvetica, sans-serif; font-size:1em; color: white; background-color: #4a85bc;}
a{color:white; outline:none; }

h1{font-size:2em; padding-bottom:20px}
h2 {font-size:2.5em;}

hr {width:50%; height:8px;border-width:0;background-color:white;}

.fl_left{float:left;}
.fl_right{float:right;}
.fl_center {display: block; margin-left: auto; margin-right: auto;}

.centered{text-align: center;}


.content {max-width:960px; margin:0 auto;}
.intro{color: black; background-color:#d6eaf8; padding:10px 0px; border-radius: 25px;}
.intro a{color:black; outline:none; }

.endOfStory{text-align: center; font-size:2em;}


.chapter {}
.chapter-marker {float:left; padding-right:15px;}
.chapter-notes{color: black; background-color:#d6eaf8; padding:20px; border-radius: 25px;}
.chapter-notes h2 {font-size:1.8em;}
.chapter-notes a{color:black; outline:none; }


.video-placeholder {display: block; margin-left: auto; margin-right: auto;  width:600px; height:337px;}



.socialShareButtons:hover {
  fill: #ace63c; 
}


.clear{display:block; clear:both;}

figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}

figcaption {
  font-style: italic;
  padding: 2px;
  text-align: center;
}

footer {background-color: black; padding:5px}
footer p, h3{padding:0px 20px;}

.video{display:block; position:relative; width:100%; height:0; margin:0; padding:0 0 56.25% 0; /* using a 16:9 aspect ratio, the height is 56.25% of the width (9/16=0.5625) */}
.video iframe{display:block; position:absolute; width:100%; height:100%; margin:0; padding:0;}


/* Media Query <960px */
@media screen and (min-width:180px) and (max-width:960px) {
	.content{max-width:95%; margin:0 auto;}
}


/* Media Query <600px */
@media screen and (min-width:180px) and (max-width:600px) {
	.video-placeholder {width:370px; height:208px;}
}


/* Media Query <374px */
@media screen and (min-width:180px) and (max-width:374px) {
	.video-placeholder {width:315px; height:177px;}
}






ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a  {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 0px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #ace63c;
}