@font-face {
  font-family: 'DejaVu Serif';
  src: url('../fonts/DejaVuSerif.woff') format('woff');
  url('../fonts/ttf/DejaVuSerif.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'DejaVu Serif';
  src: url('../fonts/DejaVuSerif-Italic.woff') format('woff');
  url('../fonts/ttf/DejaVuSerif-Italic.ttf') format('ttf');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'DejaVu Serif';
  src: url('../fonts/DejaVuSerif-Bold.woff') format('woff');
  url('../fonts/ttf/DejaVuSerif-Bold.ttf') format('ttf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'DejaVu Serif';
  src: url('../fonts/DejaVuSerif-BoldItalic.woff') format('woff');
  url('../fonts/ttf/DejaVuSerif-BoldItalic.ttf') format('ttf');
  font-weight: bold;
  font-style: italic;
}


body {
font-family: 'DejaVu Serif', 'Book Antiqua', 'Georgia', serif; 
font-size:18px;
width:95%;
max-width:720px;
margin-top:1em;
margin-left:auto;
margin-bottom:2em;
margin-right:auto;
background-color: #F8ECD2;
}

p {text-align:justify; color: #531B28; padding:0 1em ;}
li {color: #531B28; margin-left:20px;}
.toc li {margin-bottom:0px; margin-left:0px;}
.center {width:100%; margin-left:auto; margin-right:auto; text-align:center; }
div.center p {text-align:center; margin-left:auto; margin-right:auto;}
.indent3 {margin:0 2em; }

.summary {background-color:#F8ECD2; padding:10px; }

#audio-player, .audio-player {
width:140px; 
margin-left:auto;
margin-right:auto;
}

.caption {
position:relative;
text-align:center;
background:#BFCACD;
padding:6px;
width:90%; 
margin-bottom:30px; 
margin-top:-50px; 
}

.cover {width:480px; max-width:100%; text-align:center; }

.Heading1 {text-align:center; font-variant:small-caps; font-size:175%; font-weight:bold; }
.Heading2 {text-align:center; font-variant:small-caps; font-size:150%; font-weight:bold; }
.Heading3 {text-align:center; font-variant:small-caps; font-size:135%; font-weight:bold; }
.Heading3x {text-align:center; font-variant:small-caps; font-size:135%; font-weight:bold; }
.Heading4 {margin-left:3em; font-variant:small-caps; font-size:100%; font-weight:bold; letter-spacing:0.1em; }
.Heading4x {margin-left:3em; font-variant:small-caps; font-size:100%; font-weight:bold; letter-spacing:0.1em; }
.Heading5 {width:12em; margin:auto; margin-top:20px; font-variant:small-caps; font-weight:bold; text-align:center; }

.smallcaps {font-variant:small-caps;}

/* links */

nav a {
font-size:90%;
}

a:link {
color:#9E1818;
text-decoration:none;
font-variant:small-caps;
}

a:visited {
color:purple;
text-decoration:none;
}

a:hover {
color:#25080D;
text-decoration:none;
}

a:active {
color:red;
text-decoration:none;
}

.NavBar1 {
width: 12em;
margin:auto;
line-height:2em;
font-weight:bold;
font-size:120%;
text-align:center;
list-style:none;
margin-bottom:-0.5em;
font-variant:small-caps;
background-color:#eee; 
border:2px #ccc solid; 
}

.NavBar1 a:link {
margin-left:1em;
margin-right:1em;
text-decoration:none;
}

.NavBar1 a:visited {
width:200px;
text-decoration:none;
}

.NavBar1 a:hover {
text-decoration:none;
}

.NavBar1 a:active {
text-decoration:none;
}

/*2nd bar*/

.NavBar2 {
/*max-width:32em;*/
margin:auto;
line-height:2em;
font-weight:bold;
text-align:center;
list-style:none;
margin-top:20px;
font-variant:small-caps;
}

.NavBar2 a:link {
margin-right:1em;
text-decoration:none;
}

.NavBar2 a:visited {
text-decoration:none;
}

.NavBar2 a:hover {
text-decoration:none;
}

.NavBar2 a:active {
text-decoration:none;
}


/* Style for the Tooltips */

span.TT {
position:relative; /*this is the key*/
}

span.TT span {
z-index:25; 
display:none;
position: absolute; 
left:-224;
top:25px;

padding:6px;
width:22.5em;
background-color:#FFF;
text-align:left;
border:2px solid black;

/* taking out unwanted formatting: */

font-variant:normal;
font-weight:normal;
font-style:normal;
font-size:normal;
margin-left:0em;
text-indent:0em;
text-shadow: none;
letter-spacing:0em;
line-height:100%;
}

span.TT sup {
color:blue;
background-color:#FFF;
}

span.TT span sup {
color:black;
background-color:#FFF8F0;
}

span.TT sup:hover {
cursor:pointer;
}

span.TT cite {
font-size:1em;
}

@media screen and (min-width: 0px) and (max-width: 720px) {
span.TT span.TT {
float: right; 
right: -7em;
top:20px;
margin-bottom: 20px; 
   }
span.TT span {width:14em;}
}


/* class tables*/

.table {display: table; border:2px lightgray solid;}
.row {display: table-row; border:2px lightgray solid; }
.cell {display: table-cell; border:2px lightgray solid; padding:0px 10px;}
.cell1 {display: table-cell; border:2px lightgray solid; padding:0px 10px;  }
.cell2 {display: table-cell; border:2px lightgray solid; padding:0px 10px; }
.cell3 {display: table-cell; border:2px lightgray solid; padding:0px 10px;  }
.cell4 {display: table-cell; border:2px lightgray solid; padding:0px 10px;}
.cell5 {display: table-cell; border:2px lightgray solid; padding:0px 10px; }
.cell6 {display: table-cell; border:2px lightgray solid; padding:0px 10px;  }
.cell7 {display: table-cell; border:2px lightgray solid; padding:0px 10px; }
.cell8 {display: table-cell; border:2px lightgray solid; padding:0px 10px;}
.cell9 {display: table-cell; border:2px lightgray solid; padding:0px 10px; }
.cell10 {display: table-cell; border:2px lightgray solid; padding:0px 10px; }
.cell11 {display: table-cell; border:2px lightgray solid; padding:0px 10px; }
.cell12 {display: table-cell; border:2px lightgray solid; padding:0px 10px; }

.table2.cell {width:50%;} 
.table3.cell {width:33%;} 
.table4.cell {width:25%;} 
.table5.cell {width:20%;} 

.table2.cell1 {width:50%;} 
.table2.cell2 {width:50%;} 

.table3.cell1 {width:33%;} 
.table3.cell2 {width:33%;} 
.table3.cell3 {width:33%;} 

.table4.cell1 {width:25%;} 
.table4.cell2 {width:25%;} 
.table4.cell3 {width:25%;} 
.table4.cell4 {width:25%;} 

.table5.cell1 {width:20%%;} 
.table5.cell2 {width:20%%;} 
.table5.cell3 {width:20%%;} 
.table5.cell4 {width:20%%;} 
.table5.cell5 {width:20%%;}

/* layout grids */

.pure-u {
    display: inline-block;
    zoom: 1; *display: inline;
    vertical-align: top;
    text-rendering: auto;
}

.pure-u-1,.pure-u-1-2,.pure-u-1-3,.pure-u-2-3,.pure-u-1-4,.pure-u-3-4 {
    display: inline-block;
    zoom: 1; *display: inline; 
    vertical-align: top;
    text-rendering: auto;
}

.pure-u-1 {
    display:block;
}

.pure-u-1-2 {width: 50%;}

.pure-offset-1-2 {margin-left: 50%;}
    
.pure-u-1-3 {width: 31%; margin:1%;}

.pure-offset-1-3 {margin-left: 31%; margin:1%;}
    
.pure-u-2-3 {width: 64%; margin:2%;}

.pure-offset-2-3 {margin-left: 64%; margin:2%;}
    
.pure-u-1-4 {width: 25%; margin:0;}

.pure-offset-1-4 {margin-left: 25%;}
    
.pure-u-3-4 {width: 75%;}

.pure-offset-3-4 {margin-left: 74%;}

.pure-u-2-4 {width: 50%;}

.pure-offset-2-4 {margin-left: 24%;}
    

.pure-g-r {letter-spacing: -0.99em; 
*letter-spacing: -0.99em; 
word-spacing: -0.99em;
}

.pure-u-1-2,
.pure-u-1-3,
.pure-u-2-3,
.pure-u-1-4,
.pure-u-3-4,
.pure-u-1-5,
.pure-u-2-5,
.pure-u-3-5,
.pure-u-4-5,
.pure-u-1-6,
.pure-u-5-6,
.pure-u-1-8,
.pure-u-3-8,
.pure-u-5-8,
.pure-u-7-8,
.pure-u-1-12,
.pure-u-5-12,
.pure-u-7-12,
.pure-u-11-12,
.pure-u-1-24,
.pure-u-5-24,
.pure-u-7-24,
.pure-u-11-24,
.pure-u-13-24,
.pure-u-17-24,
.pure-u-19-24,
.pure-u-23-24 {
    display: inline-block;
    *display: inline; /* IE < 8: fake inline-block */
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.opera-only :-o-prefocus,
.pure-g-r {word-spacing: -0.99em;}

.pure-g-r img {max-width: 100%;}

@media (max-width:480px) {
            .pure-g-r > [class ^= "pure-u"] {
                width:100%;
            }
        }
    
@media (max-width:720px) {

            .pure-g-r > [class ^= "pure-u"] {
                width:100%;
            } 
        }
    
@media (min-width:720px) and (max-width:960px) {
            .pure-g-r > [class ^= "pure-u"] {
                width:100%; /* hack */
        }
}

/*
@media {
.pure-u-1-4 {page-break-before:always}
}


@media (min-width:960px) {
            .pure-visible-phone     { display: none; }
            .pure-visible-tablet    { display: none; }
            .pure-visible-desktop   { }
            .pure-hidden-phone      { }
            .pure-hidden-tablet     { }
            .pure-hidden-desktop    { display: none; }
        }

@media (max-width:480px) {
            .pure-g-r > [class ^= "pure-u"] {
                width:100%;
            }
#lbClose, #lbCloseTop, #lbPrint, #lbPrintTop, #lbPlay, #lbPlayTop, #lbPause, #lbPauseTop, #lbPlay, #lbPlayTop, #lbPause, #lbPauseTop {width: 52px; height: 56px;}
        }
    
@media (max-width:720px) {

            .pure-g-r > [class ^= "pure-u"] {
                width:100%;
            } 
            .pure-visible-phone     { } 
            .pure-hidden-phone      { display: none; }
            .pure-hidden-desktop    { }
            .pure-visible-desktop   { display: none; }
        }
    
@media (min-width:720px) and (max-width:960px) {
            .pure-g-r > [class ^= "pure-u"] {
                width:50%; /* hack 
        }
}

@media (min-width:720px) and (max-width:960px) {
            .pure-visible-tablet    {}
            .pure-hidden-tablet     { display: none; }
            .pure-hidden-desktop    {}
            .pure-visible-desktop   { display: none; }
        }
*/

/* Table of Contents */

.toc {
width: 100%;
margin:auto;
text-align:center;
font-size:normal;
padding: 0px 10px;
text-indent: -50px ;
color: #999;
}
.toc-p a {
padding:1px;
color: black;
display: inline-block;
text-align: center;
}
.toc b {
font-weight: normal;
color: black;
}
.toc ul {
list-style-type: none;
}
#toc-wrapper {
width: 100%
float:left;
}

/* menu */

#nav, #nav ul, #nav li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  box-sizing: border-box;
}

#nav {
  position: relative;
  max-width: 100%;
  background-color: #25080D;
  color: black;
  border: 1px solid black;
}

 @media screen and (min-width: 720px) {
#nav { display: inline-block; }
}
 @media screen and (max-width: 720px) {
#nav { display: block; }
}

#nav li { position: relative; color: black; }

#nav a {
  text-decoration: none;
  display: block;
  padding: 0 10px;
}
 @media screen and (min-width: 720px) {
#nav a:focus { outline: none; }
}

.plusMark {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
}

 @media screen and (min-width: 720px) {
#nav li {
  text-align: center;
  width: 300px;
  color: black;
}
}
 @media screen and (max-width: 720px) {
#nav li {
  text-align: center;
  width: 100%;
  color: black;
}
}

/* Any sub menu */

@media screen and (min-width: 720px) {

a + ul { position: absolute; }

a + ul:not(.js-showElement) { display: none; }
}
 @media screen and (max-width: 720px) {

a + ul { position: relative; }

a + ul:not(.js-hideElement) { display: block; }
}

/* The Main Navigation Bar - Navigation Level One */

#nav > ul, .fa {
  height: 100%;
  line-height: 40px;
}

#nav > ul > li {
  position: relative;
  text-align: center;
}
 @media screen and (min-width: 720px) {

#nav > ul > li {
  float: left;
  width:25%;
}

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

#nav > ul > li {
  float: none;
  display: block;
  width: 100%;
}

}

#nav > ul > li > a { background-color: #591320; color: #F8ECD2; border-left: 1px solid black;}

#nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu { background-color: #F8ECD2; color: #591320; }

#nav > ul > li > .js-showElement a:hover { background-color: #591320; color: #F8ECD2; }

 @media screen and (min-width: 720px) {

#nav > ul > li: not(: last-child) {
  border-right: 1px solid black;
  border-bottom: none;
}
}
 @media screen and (max-width: 720px) {

#nav > ul > li: not(: last-child) { border-right: none; }

#nav > ul > li:not(:last-child):not(:first-child) { border-bottom: 1px solid black; }
}

#nav > ul > li:not(#toggleMenu):not(.js-showElement) { /* first level nav li except toggleMenu icon */ }
 @media screen and (min-width: 720px) {

#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: inline-block; }
}
 @media screen and (max-width: 720px) {

#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: none; }
}
 @media screen and (min-width: 720px) {

#nav #toggleMenu { display: none; width:150px;}

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

#nav #toggleMenu {
  display: block;
  width: 100%;
  color: black;
}

#nav #toggleMenu.js-open { border-bottom: 1px solid black; }

#nav #toggleMenu.js-open .fa-times { display: block; }

#nav #toggleMenu.js-open .fa-bars { display: none; }

#nav #toggleMenu.js-open a { background-color: #591320; }

#nav #toggleMenu:not(.js-open) .fa-times { display: none; }

#nav #toggleMenu:not(.js-open) .fa-bars { display: block; }
}

span#toggleMenu-text {
  position: absolute;
  opacity: 0;
}

/* Second Level Dropdown */

#nav > ul > li > ul { background-color: #591320; color: #F8ECD2;  }
 @media screen and (min-width: 720px) {

#nav > ul > li > ul {
  top: 41px;
  left: 0;
    margin-left:-80px;
}
}
 @media screen and (max-width: 720px) {

#nav > ul > li > ul {
  width: 100%;
  position: relative;
  margin-left:0px;
  margin-top:-41px;
  margin-bottom:20px;
}

#nav > ul > li > ul:not(.js-showElement) { display: none; }
}

#nav > ul > li > ul > li > a { background-color: #F8ECD2; border: 1px solid black; }

#nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:focus { background-color: #F8ECD2; color: #591320; border: 1px solid black;}

#nav > ul > li > ul > li a { border: 1px solid black;}

/* Javascript classes */

#nav .js-hideElement { display: none; }

#nav .js-showElement { display: block; }