html,body,div {
  margin:0;
	padding:0;}

html {
  height:100%;}
  
body {
  font-size:100%;
  width:100%;
  height:100%;
  min-height:100%;}

h1,h2,h3 {
  font-family:Spectral,serif;
  color:black;}
  
h1 {
  font-size:1.5em;
  margin:1em 0 1em 0;
  text-align:center;}
  
sup {
  /*vertical-align:top;*/
  font-size:0.6em;}

p,ul {
  font-family:'Source Sans Pro',sans-serif;
  color:black;}
  
p.commentary {
  font-family:'Inconsolata', monospace;}
  
a {
  font-size:inherit;
  font-family:inherit;
  text-decoration:none;}
  a:link {
    color:#781414;}
  a:hover {
    color:#19a03a;}
  a:visited {
    color:#b55e5e;}
  a:visited:hover {
    color:#057f23;}
 
ul {
  list-style:none;
  margin: 0;
  padding: 0;}

#wrapper {
  padding:0 0 9em 0;
  position:relative;
  min-height:calc(100% - 9em);
  /*min-width:100%;*/}

header#header-index {
  margin:0;
  padding:1em 0.5em 0.5em 0.5em;
  height:8em;
  background-image:url(images/prairie-dawn.jpg);
  background-size:100% 100%;
  text-align:center;}
  

header#header-article {
  margin:0;
  padding:1em 0.5em 0.5em 0.5em;
  background-color:#f6815a;
  text-align:center;}

#circle {
  height:4.25em;
  /*min-height:75px;*/}

#circle-small {
  height:3.5em;}

#content-index {
  margin: 4em 0 4em 0;
  padding:0.5em;
  /*max-width: 30em;*/
  text-align:center;}
  
  #content-index li {
    margin:0.5em 0;}
  /*#content-index li a {
    text-decoration:underline;}*/

#content {
  margin: 2em auto;
  padding:0.5em 2em;
  max-width:35em;
  /*text-align:center;*/}

  #content p{
    text-align:justify;}

#content-verse {
  margin: 5em auto;
  padding:0.5em 2em;}
  
#div-backgroundimg {
  padding:0.25em 1em;
  margin:2em 0;}

.verse {
  /*display:inline-block;*/
  margin: 1em auto;
  font-family:Inconsolata, sans-serif;
  font-size:0.9em;
  line-height:1.5;
  text-align: left;}
  
footer {
  width:100%;
  position:absolute;
  bottom:0;}

#footer-door {
  margin:0;
  padding:0.5em 1em;
  text-align:center;}

#door {
  height:4.5em;
  /*min-height:75px;*/}
  
#door-small {
  height:3.5em;}

#footer-note {
  margin:0.5em 0 0 0;
  padding:0.5em;
  background-color:#f6815a;
  text-align:center;}
    
  #footer-note p {
    line-height:normal;
    font-size:0.9em;
    color:#4d334d;
    margin:0;}

#footer-empty {
  margin:0;
  height:1.5em;
  background-color:#f6815a;}
  
h3#h3-ref {
margin-top:2em;}

a.a-ref {
  /*color:#5d8aa8;*/
  font-weight:bold;}

@media screen and (min-width:501px) and (max-width: 600px) {
  body {
    font-size:85%;}
  #circle, #door {
    min-height:68px;}
}
@media screen and (min-width:411px) and (max-width: 500px) {
  body {
    font-size:70%;}
  #circle, #door {
    min-height:68px;}
  #circle-small {
    min-height:42px;}
}
@media screen and (min-width:371px) and (max-width: 410px) {
  body {
    font-size:63%;}
  #circle, #door {
    min-height:60px;}
  #circle-small {
    min-height:42px;}
}
@media screen and (max-width:370px) {
  body {
    font-size:60%;}
  #circle, #door {
    min-height:50px;}
  #circle-small {
    min-height:42px;}
}