/****************************
  css for edwardupward.info
  D. Allinson 2010-16
****************************/

/* Webfont: LatoLatin-Regular */
@font-face {
    font-family: 'LatoLatinWeb';
    src: url('../fonts/LatoLatin-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/LatoLatin-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

/* Webfont: LatoLatin-Italic */
@font-face {
    font-family: 'LatoLatinWeb';
    src: url('../fonts/LatoLatin-Italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/LatoLatin-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/LatoLatin-Italic.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/LatoLatin-Italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/LatoLatin-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
}

/* Webfont: LatoLatin-Bold */
@font-face {
    font-family: 'LatoLatinWeb';
    src: url('../fonts/LatoLatin-Bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/LatoLatin-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/LatoLatin-Bold.woff') format('woff'), /* Modern Browsers */
         url('../fonts/LatoLatin-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
}

html {
  overflow-y: scroll;
  margin: 0em;
  padding: 0em;
  background-color: #f8f8e4; /* cream */
}

body {
  height: 100%;
  margin: 0em;
  padding: 0em;
  background-color: #a61010; /* red */
  color: black;
  font-family: Arial,FreeSans,sans-serif;
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
}

/* header, nav, article and footer classes */
/* Replace with HTML5 semantic tags of same name in future. */

.header {
  margin: 0% auto;
  padding: 0% 10%;
  width: auto;
  max-width: 800px;
  font-family: "Times New Roman",FreeSerif,serif;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  color: #ffff75; /* yellow */
}

.header h1 {
  margin: 0em;
  padding: 20px 0px 15px 0px;
  font-size: 2.9em;
}

.nav {
  margin: 0% auto;
  padding: 0% 10%;
  width: auto;
  max-width: 800px;
}

.nav ul {
  float: left;
  width: auto;
  margin: 0em;
  padding: 0em;
  list-style: none;
}

.nav ul li { display: inline; }

.nav ul li a {
  float: left;
  padding: 0.3em;
  margin: 0.8em 0.4em 0em 0.4em;  
  font-size: 0.95em;
  text-align: center;
  color: #ffff75; /* yellow */
  text-decoration: none;
  border: 0em;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px; 
  outline: none;
}
.nav ul li a:focus, .nav ul li a:active, .nav ul li a:hover {
  color: black;
  background-color: #ffcc66; /* orange */
}
.nav ul li a.current {
  color: black;
  background-color: #f8f8e4; /* cream */
}
.nav ul li a.current:focus, .nav ul li a.current:active {
  color: black;
  background-color: #ffcc66; /* orange */
}
.nav ul li a.current:hover { }
.nav ul li a:visited { }

.article {
  height: 100%;
  width: auto;
  margin: 0em;
  padding: 0em;
  background-color: #f8f8e4; /* cream */
  font-size: 1em;
  text-align: left;
  line-height: 140%;
  clear: both; /* putting clear first causes problem in old IE */
}

.article h2 {
  clear: both;
  padding-top: 1.4em;
  font-size: 1.2em;
  font-weight: bold;
}
.article h2:first-of-type { padding-top: 0.6em; }

.article h3 {
  clear: none;
  padding-top: 1em;
  font-size: 1em;
  font-weight: bold;
}

.footer {
  margin: 0em;
  padding: 3% 0% 1% 0%;
  font-size: 0.8em;
}

/* Inner container to set padding and max width for article */
div.inner {
  margin: 0% auto;
  padding: 1% 10%;
  width: auto;
  max-width: 800px;
}

div.inner>ul { margin-left: -2em; }

p.indent { text-indent: 3em; }
p.pad_top { padding-top: 2em; }

cite { font-style: italic;}
i.foreignphrase { font-style: italic;}

table {
  width: 100%;
  margin: 0em;
  padding: 0em;
  border: 0em;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

table tbody tr:nth-of-type(odd) { background-color: #e8e8d4; }

th, td {
  text-align: left;
  vertical-align: top;
  padding: 5px;
  border: 1px solid black;
  font-size: 0.9em;
}
th { font-weight: bold; }
td { font-weight: normal; }

a.book_link  { background: url(../img/book_icon.png); }
a.audio_link { background: url(../img/audio_icon.png); }
a.book_link, a.audio_link {
  display: block;
  float: left;
  padding: 0px 0px 1px 30px;
  font-size: 1em;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}
a.audio_link + p, a.audio_link + h3, a.book_link + h2 {
  padding-top: 3em;
  clear: both;
}

a:focus, a:active, a:hover { background-color: #ffcc66; }

img {
  float: right;
  margin: 1em;
  padding: 0em;
  border: 0em;
}

.story_list {
  list-style: none;
  margin: 0em 0em 0em 1em;
  padding: 0em;
  border: 0em;
}

@media screen and (min-device-width: 1200px) {
body { font-family: LatoLatinWeb,Arial,FreeSans,sans-serif; }
}

@media print {
html { background-color: white; }
body { background-color: white; font-size: 1em; }
a { color: black; text-decoration: underline; }
a[href^="http://"]:after { content: " (" attr(href) ")"; font-size: 0.9em; }
img { float: none; }
h1, h2, h3 { page-break-after: avoid; }
.header { color: black; background-color: white; }
.header h1 { font-size: 2.4em; }
.nav { display: none; }
.article { background-color: white; }
div.inner { padding: 0.5em; }
table tbody tr:nth-of-type(odd) { background-color: white; }
}