/*RESET   
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
*/

* {
  box-sizing: border-box;
}

/*-----------------------*/
/* Structure */

/* "Reset" */
html, body {

  width:100%; 
  height:100%; 
  overflow-y:hidden;
   
  margin:0; 
  padding:0; 
  border:0; 
  outline:0; 
 
  vertical-align:baseline; 
  background:transparent;
  
  font-size: 1em;
  font-family: 'Jura', sans-serif;
  line-height: 1;
  
}


/*----------------------*/

/*
html, body { 
   width:100%; 
   height:100%; 
   font-size: 1em;
   font-family: 'Jura', sans-serif; 
}*/


/* Style the header */
.header {
  background-color: #000;
  text-align: center;
  min-height: 50px;
  height: 10vh;
  background:url(../pics/logo.png) center center no-repeat;
  background-color:#000;
  background-size: 250px auto;
}

.header img {
   display:none;
   padding-top: 5px;
   padding-right: 5px;
   float:right;
   width: 40px;
   height:auto;
   filter: brightness(2.0);

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  /*padding: 10px;*/
}

/* Left and right column */
.column.left {
  width: 25%;
  height: 87vh;
  overflow-y: scroll;
}

/* Middle column */
.column.right {
  width: 75%;
  height: 87vh;
  overflow-y: scroll;
}

.footer {
  position:fixed;
  bottom:0vh;
  height: 3vh;
  width:100%;
  text-align: center;
  
  background-color: #666;
}




/* ------ Text styling ---*/

toc ol {
  /*counter-reset: item;*/
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f1f1f1;
}

toc ol ol a {
    padding: 8px 36px;
}

 
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
} 

ol {
  background-color: #f1f1f1;
  margin-left:40px;
  margin-right:40px;
   }

ol li {
  padding:5px;
 }
 
ul {
  list-style-type:circle;
  background-color: #f1f1f1;
  margin-left:40px;
  margin-right:40px;
}
 
ul li {
  padding:5px;
 }

h1 {
   padding:20px 10px;
}

h2 {
   /*top, right, bottom, left*/
   padding:30px 10px 0px 10px;
   }

p {
   padding:10px;
}

.footer p {
   padding:5px 0px;
   margin: 0px;
 }
 
.footer a {
   color: #fff;
 }



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

.header {
  background-size: 180px auto;
  height: 12vh;
}

.header img {
   display:block;
   padding-top: 5px;
   padding-right: 5px;
   float:right;
   width: 40px;
   height:auto;
   filter: brightness(2.0);

}

.column.left {
  display: none;
  width: 100%;
  max-height: 50vh;
  overflow-y: scroll;
}

.column.right {
  height:83vh;
  width:100%;
}


.footer {
  font-size:.8em;
  height: 5vh;
 }

toc ol ol {
    display:none;
}

ul {
  list-style-type:circle;
  background-color: #f1f1f1;
  margin-left:20px;
  margin-right:5px;
}

}