body { font: normal sans-serif;
/*        font-family: "Trebuchet MS",
             FreeSans,
             "Liberation Sans",
             Verdana,
             sans-serif; */
        font-family: Lato, FreeSans, "Liberation Sans", "Helvetica Neue", Tahoma, sans-serif;
        background: #EEEEEE url("bg2.jpg") repeat left top; 
        font-size: 100%; padding: 0; margin: 0;
          }


.container { margin: 25px 0 241px 0; background: #EEEEEE; border-top: 1px solid black; border-bottom: 1px solid black; }

.header { /*font-size: 115%; 1.25em;*/ margin: 2em 2em 1em 2em; text-align: center; }
.header h1 { text-shadow: 3px 3px 3px #FFFFFF; text-decoration: none; color: #000000; font-size: 6em; font-family: Lobster, serif; padding: 0; margin: 0;}
.header h1 a, .header h1 a:link, .header h1 a:link { color: #000000; text-decoration: none; }
.header h2 { padding: 0; margin: 0; }
/* text-dec none because it's a link */
.header a { text-decoration: none; text-shadow: 2px 2px 1px #FFFFFF; }
.header a:hover { text-decoration: underline; }



.content { font-size: 1.25em;  padding: 2em; background: #FFFFFF; border-radius: 2em; max-width: 40em; margin: 2em auto 1em auto; } /* -0.4em auto 0 auto */


.progress { text-align:center; margin: 0 auto; }

.fives {
    display: flex; 
    flex-flow: column wrap;
    justify-content: space-around;
    align-content: center;
    list-style:none;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.fives li {
    margin: 0;
    padding: 0;
    border: 0; /*1px solid blue;*/
    margin-bottom: -0.5em;
 /* KLUGEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE */
}

.fascicle { 
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0; /*1px solid black;*/ 

    display: flex; 
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    list-style:none;
}

.fascicle li { border: 0; /*1px solid red;*/ margin: 0; padding: 0;}


/*
.fascicle li { border: 1px solid black; }
.fascicle { border: 1px solid blue; }
.fives li { border: 1px solid red; }
*/



.fascname { width: 35%; }
.fascnum { width: 5%; font-size: 2em; font-family: Lobster, serif; text-transform: lowercase; }
.fascfasc { width: 15%; }
.fascname, .fascnum, .fascfasc { border-radius: 0.5em; }

.not { background: #EEEEEE; color: #CCCCCC; }
.not a { color: #CCCCCC; }

.rough, .ready { background: #EEEEEE; color: #CCCCCC;}
.rough a, .ready a { color: #CCCCCC;}
/* treat all of both as not */

.fascicle li a { text-decoration: none; display: inline-block; padding: 0 auto; margin: 0; width: 100%; }

.pag, .dat { font-size: 0.75em; color: black; }
.dat { display: none; }
/*
.pag { font-size: 0.75em; position: relative; }
.pug { display: none; position: absolute; bottom: -3em;
background: #FFFFFF; border: 1px solid black; border-radius: 0.5em; padding: 0.5em; }
.pag:hover .pug { display: block;}
*/

.triang { width: 0; height: 0; border-left: 1em solid red; border-top: 1em solid transparent; border-bottom: 1em solid transparent; border-right: 1em solid transparent; }




.leftrightcol {
    display: flex; 
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: center;

    list-style:none;
    margin: 0 auto;
    padding: 1em 0;
    text-align:center;

}
.leftcol, .rightcol { width: 45%; text-align: left; }

.roundbg2 { width: 250px; height: 241px; border-radius: 120px; margin: 1em auto 2em auto; display: block; border: 1px solid black; }
.roundbg2, .fascnum { -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
       -o-transition: all 2s ease;
      -ms-transition: all 2s ease;
          transition: all 2s ease;
 }

.roundbg2:hover, .fascnum:hover {  
  -webkit-transform: rotate(-180deg);
     -moz-transform: rotate(-180deg);
       -o-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg); }





.other {
    display: flex; 
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: center;
}



.onecoltext { max-width: 20em; margin: 0 auto; }


.lastupdate { background: #FFFFCC; border: #EEEEEE; }



@media only screen and (max-device-width: 480px) {
.content { max-width: none; }
/* .progress, .fives, .fascicle, .pag, .dat { font-size: 1em; } */
.progress { font-size: 2em; }
.leftrightcol { flex-flow: column; width: 90%; }
.leftcol, .rightcol { width: 100%; }
.onecoltext { width: 90%; max-width: none; }
.other { flex-flow: column; width: 90%; }
.fascicle { flex-flow: column; }
.fascname, .fascnum, .fascfasc { width: 90%; }
}








.content li { margin-top: .25em; }
.content a:hover { text-decoration: none; }
.smallimg { margin: 15px; float: right; border: 1px solid black; }

.footer { font-size: 0.75em; /*75%;*/ margin: 2em 2em 4em 2em; text-align: center; }

h1,h2,h3,h4,h5,h6 { font-style: bold; text-align: center; }
.content h1  { text-transform: lowercase; /*font-size: 0.9em;*/ font-family: Lobster; color: red; text-shadow: 3px 3px 3px #000000;}
.content h3 { text-transform: lowercase; font-size: 0.9em; }


h2, h3 { margin: 1em 0 2em 0; }


.content h3 { margin-top: 0; padding-top: 0; }
.content { margin-top: 0.5em; padding-top: 0.5em; }
.header { margin-bottom: 0; padding-bottom: 0; }
.header h3 { margin-bottom: 0; padding-bottom: 0; }

hr {     margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto; }

.smalltext { font-size: 50%; }
.break { text-align: center; margin: 1em 0; font-size: large; }
.break::before { content: "* * *"; }
.jax { float: right; padding: 5px; font-size: xx-small; }
.epigraph { margin: 0 10% 0 auto; width: 40%; }
.epiattrib { text-align: right;}
.oldquote { background: #F1E7CD; padding: 2em; }
.blocknote  { background: #EEEEEE; padding: 2em; }
.tippy { border-bottom: 1px dashed #5f401a; } /* formatting for text that has title tooltip in it*/