/* AwesomeDude styles template for responsive serial index */



/* Last modified May 25 2016 by John Silby (Alien Son) */



@import url(https://fonts.googleapis.com/css?family=Merriweather:700italic);



/* Reset */



* {

  margin: 0;

  padding: 0;

  border: 0;

  text-decoration: none

}





/* Basics */



body {

  font-family: Tahoma, Geneva, sans-serif;

  font-size: 18pt;

  line-height: 1.4;

  color: #F5DB89;

  background-color:  #000A37;

}



.container {

  position: relative;

  max-width: 90%;

  height: 750px;

  margin: 1.0em auto;

  

  background-position: center top;

  background-repeat: no-repeat;

}




h1, h2, h3 {

  text-align: center
}



h1 {

  font-family: Merriweather;

  font-size: 2.2em;

  font-weight: 700;

  font-style: italic;

  color: #F5DB89;

  text-shadow: 1px 1px #fff, 2px 2px 3px #000;

  padding-top: .1em;

}



h2 {

  font-family: Merriweather;

  font-size: 1.5em;

  font-weight: 700;

  font-style: italic;

  color: #F5DB89;

  text-shadow: 1px 1px #FFF, 2px 2px 3px #000;

  padding-top: .0em;

}



h3 {

  font-size: .7em;

  font-weight: normal;
  
  color: #675208;

  padding-top: .3em;
	
  text-shadow: 1px 1px #fff, 2px 2px 3px #000;



}

header {
	
  color: #18566F;
	
  /* padding-left: 170px; */

  /* width: 750px; */

  width: 100%;
	
  height: 550px;

}

.centered {
  
  text-align: center;
	
}


.chapters {

  position: relative;

  top: 0px;

  left: 375px;

  width: 600px;

  height: 250px;

}



.chapters li {

  list-style: none;

  float: left;

  width: 19%;

  margin: 0 4px;

}



.chapters ul li a {

  font-size: 12pt;

  font-weight: bold;

  text-align: center;

  color: #fff;

  background-color: rgba(0,0,0,.30);

  display: block;

  width: 110px;

  margin: 0px auto 8px auto;

  padding: 10px;

  border: 1px solid rgba(0,0,0,.30);

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

}



.chapters ul li a:hover {

  background-color: rgba(0,0,0,.60);

}



/* Links */



a:link {

  text-decoration: none;

 color white;

}



a:hover, a:visited:hover {

  text-decoration: none;

  color: #F5DB89;

}



a:visited {

  text-decoration: none;

  color: #F5DB89;

}







@media screen and (max-width: 800px) {



body {

  font-size: 16pt;

  }



.container {

  position: relative;

  max-width: 90%;

  height: 870px;

  margin: 1.0em auto;

  background-image: url(ra-450.jpg);

  background-position: center top;

  background-repeat: no-repeat;



}

header {

  width: 50%;

  height: auto;

}



.chapters {

  position: relative;

  top: 15px;

  left: 0px;

  width: 450px;

  height: 1000px;

}



.chapters ul li {

  float: left;

  width: 48%;

  margin: 3px 4px;

}



.chapters ul li a {

  font-size: 12pt;

  font-weight: bold;

  text-align: center;

  color: #fff;

  background-color: rgba(0,0,0,.30);

  display: block;

  width: 160px;

  margin: 0px 0px;

  padding: 4px;

  border: 1px solid rgba(0,0,0,.30);

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

}

}





@media screen and (max-width: 500px) {