body {
    color: #222;
    line-height: 1.6;
    overflow: auto;
    margin: 0 auto;
    word-break: break-word;
  	font-family: Verdana, Arial, Helvetica, sans-serif;
	  font-size: 11pt; 
    margin: 0;
}

td {
  font-size: 11pt; 
}

em {
  text-decoration: underline;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.figtable {
  width:80%;
  margin:auto; 
  font-size: 11pt; 
}
.figlabel {
  font-size:9pt; 
  vertical-align: top;
  width: 64px; 
  font-weight: bold; 
}
.figtext {
  font-size:9pt; 
  color: #333; 
  font-style: italic;
}

.linkimage {
  height:100px;
  border:2px solid #aaa;
}
.linkimage:hover {
  border: 2px solid rgb(247, 127, 75); 
}

.menu-img {
  width: 24px; 
  transform: translate(0px,3px);
  padding-right:5px; 
}

.sidebar {
    margin: 0;
    padding: 0;
    width: 230px;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
    font-size: 100%; 
  }
  
  .sidebar a {
    display: block;
    color: black;
    padding: 12px;
    text-decoration: none;
  }
   
  .sidebar a.active {
    background-color: #04AA6D;
    color: white;
    /*
    background-color: #82ebc5;
    color: #222; 
    */
  }
  
  .sidebar a:hover:not(.active) {
    background-color: #555; 
    color: white; 
  }
  
  div.content {
    margin-left: 200px;
    padding: 1px 16px;
    height: 1000px;
  }
  
  @media screen and (max-width: 700px) {
    .sidebar {
      width: 100%;
      height: auto;
      position: relative;
    }
    .sidebar a {float: left;}
    div.content {margin-left: 0;}
  }
  
  @media screen and (max-width: 400px) {
    .sidebar a {
      text-align: center;
      float: none;
    }
  }

.maincontainer {
    max-width: 550px; 
    margin: auto; 
    padding: 10px; 
    padding-left:25px; 
}

/*
ol { counter-reset: item }
li{ 
    display: block;
    margin-left: -28px;  
}
li:before { content: counters(item, ".") " "; counter-increment: item }
*/

img {
    max-width: 100%; 
}

a {
    color: #58D;
    cursor: pointer;
    text-decoration: none;
}
a:hover {
    color: #C52;
}

h1 {
    color: #557; 
    font-size: 30px;
    line-height: 48px;
    font-weight: normal;
    margin-left: -2px;
    margin-top: 16px;
    margin-bottom: -8px;
}

h2 {
    color: #900;
    font-size: 20px;
    line-height: 36px;
    font-weight: normal;
    /* transform: translateX(-20px); */
    margin-top: 28px;
    /*margin-bottom: -8px; */
}

h3 {
    color: #009; 
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
    margin-top: 16px;
    margin-bottom: 2px;
}

.media-li {
  line-height: 1.2;
  font-size:10pt; 
}
.media-source {
  font-style: italic;
  color: #888; 
}

.example { 
  /* Use exampleQuestion and exampleAnswer instead  */
    margin-left: auto;
    margin-right: auto;
    margin-top: 14px;
    margin-bottom: 14px;
    width:100%;
    border: 2px solid #ddd;
    background-color:#eeeeef;
    padding:8px;
}
.exampleQuestion {
  margin-left: auto;
  margin-right: auto;
  width:90%;
  background-color:#F5F5FF;
  padding:4px;
  padding:20px 15px 5px 15px;
  border: 1px solid #DDF;
}
.exampleAnswer {
  margin-left: auto;
  margin-right: auto;
  width:90%;
  background-color:#FAFAFF;
  padding:4px;
  padding:20px 15px 20px 15px;
  border: 1px solid #DDF;
  display: none;   /* Hide the answer by default */ 
}

.theorem {
    margin-left: auto;
    margin-right: auto;
    margin-top: 14px;
    margin-bottom: 14px;
    width:450px;
    border: 2px solid #333;
    background-color:#f1f7ef;
    padding:4px;
}

.exercise-number {
  color: #C52;
  font-size:90%; 
  padding-right:8px; 
}
.exercise {
  padding-left:15px; 
}

.references {
  font-size: 9pt; 
  font-family:'Times New Roman', Times, serif; 
}



.unit-card {
  border: 2px solid #555; 
  border-radius: 11px; 
  display: inline-block; 
  padding: 15px; 
  margin: 10px; 
  width:38%; 
  height: 200px; 
}
.unit-card-h2 {
  margin-top:0px; 
}