/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

   body {
    background-color: #FFFFFF;
    color: black;
    font-family: Verdana;
    
  }

  p{
    font-family: "Open Sans",sans-serif;
  }
  
  h1,h2,h4 {
    text-decoration: underline;
  }

  h1,h3{
    font-family:"Google Sans",sans-serif;
  }

  a{
    font-family: "Roboto","Arial",sans-serif;
  }
  
  .sup {
    position: relative;
    bottom: 1ex; 
    font-size: 80%;
  }
  
  /*Email Us form*/
  
  aside {
      background: #1f8dd6; /* same color as selected state on site menu */
      padding: 0.3em 1em;
      border-radius: 3px;
      color: #fff;
      margin-bottom: 2em;
  }
  textarea {
    width: 100%;
  }
  .content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
  }
  .is-center {
    text-align: center;
  }
  .button-success {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: rgb(28, 184, 65); /* this is a green */
  }
  .button-xlarge {
    font-size: 125%;
  }
  
  #name, #email {
    width: 50%;
  }
  
  /*Email Us Form End*/
  
  /*Align Left not Downwards*/
  
  .block {
    margin: 5px;
    vertical-align: middle;
    display: inline-block; /* display inline with ability to provide width/height */
  }
  
  /*Matrices*/
  .matrix {
          position: relative;
      }
      .matrix:before, .matrix:after {
          content: "";
          position: absolute;
          top: 0;
          border: 1px solid #000;
          width: 6px;
          height: 100%;
      }
      .matrix:before {
          left: -6px;
          border-right: 0;
      }
      .matrix:after {
          right: -6px;
          border-left: 0;
      }
      
      td { 
      padding: 5px;
      text-align:center;
  }
      /*Matrices End*/
  
  /* unvisited link */
  /*a:link {*/
  /*  color: red;*/
  /*}*/
  /*a:visited {*/
  /*  color: green;*/
  /*}*/
  
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  
  /* Front Page */
  
  .backgroundgrey{
    background-color: #cfcfcf; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #cfcfcf, #b0b0b0);
  }
  
  .background{
    background-color: #97d2ff; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #97d2ff, #0092ff);
  }
  
  .minibox{
    text-decoration: none;
    min-height:20%;
    width:80%;
    display:inline-block;
    background-color: #97d2ff; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #97d2ff, #0092ff);
    padding:3%;
    border-radius: 15px;
    border: 5px solid #2e2e2e;
  }
  
  .miniboxgrey{
    text-decoration: none;
    min-height:20%;
    width:80%;
    display:inline-block;
    background-color: #cfcfcf; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #cfcfcf, #b0b0b0);
    padding:3%;
    border-radius: 15px;
    border: 5px solid #2e2e2e;
  }
  
  /*Nav Bar*/
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 0px;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    left :0;
    width: 100%;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }
  
  .active {
    background-color: #97d2ff; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #97d2ff, #0092ff);
  }

  .green {
    background-color: #6adb00; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #6adb00, #58b500);
  }

  .sidenav {
    height: 100%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #97d2ff; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #97d2ff, #0092ff);
    overflow-x: hidden;
    overflow-y:auto;
    padding-top: 0px;
    border-right: 3px solid #81a1bc;
  }
  
  
  .sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #111;
    display: block;
  }
  
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  .main {
    margin-top:20px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }
  /*Progress Bar End*/
  
  p{
    font-size:16px;
  }

  .pupilTable, .topicTable {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.pupilTable thead tr {
  background-color: #0ccc0d;
  color: #ffffff;
  text-align: left;
}

.pupilTable th,
.pupilTable td, .topicTable th, .topicTable td {
    padding: 12px 15px;
}

.pupilTable tbody tr, .topicTable tbody tr {
  border-bottom: 1px solid #dddddd;
}

.pupilTable tbody tr:nth-of-type(even), .topicTable tbody tr:nth-of-type(even){
  background-color: #f3f3f3;
}

.pupilTable tbody tr:last-of-type {
  border-bottom: 2px solid #04AA6D;
}
.pupilTable tbody tr.active-row {
  font-weight: bold;
  color: #04AA6D;
}

.pupilbuttons {
  background: #04ac3D;
  color: #fff;
  border: 1px solid #04ac3D;
  border-radius: 5px;
  padding: 15px;
  display: inline-block;
  width: 25%;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  margin-left: auto;
  margin-right: auto;
}

.pupilbuttons:hover{
  background: #018a58;
  border: 1px solid #018a58;
}

.pupilbuttons:active {
  background-color: #018a58;
  transform: translateY(4px);
}

/* Arrows for drop down list css */
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.percent50 {
  /* width: 48%;
  margin: 0.99999%;  old method with 2 per row*/
  margin: 0.99999%;
  width:80%;
    margin-left:9.49999999%;
  margin-right:9.49999999%;
  float: left;
  float: left;
}

@media screen and (max-width: 1001px){
  .percent50{
    width:97%;
    margin:1.49999999%;
   }  
  }

  .eights {
    width: 12%;
    margin: 0.2499999%;
    float: left;
  }
  
  @media screen and (max-width: 1400px){
    .eights{
      width:24.25%;
      margin:0.3749999999%;
      margin-bottom: 2%;
     }  
    }

    @media screen and (max-width: 440px){
      .eights {
        width: 48.5%;
        margin: 0.7499999%;
        margin-bottom: 6%;
      }
      }