@font-face { font-family: OpenDyslexic; src: url(fonts/'OPENDYSLEXIC-REGULAR.TTF'); } 
@font-face { font-family: OpenDyslexic; font-weight: bold; src: url('fonts/OPENDYSLEXIC-BOLD.TTF');}

html, body {
  margin: 0; 
  padding: 0; 
  height: 100%;
  background-color:#ffffe9; 
  color:#00007D;
}

body {
  font-family: "Lato", sans-serif
}

button[title]:hover::after {
         content: attr(title);
         font-size: 24px;
         color: white;
         background-color: red;
         padding: 5px;
         //border-radius: 5px;
    text-wrap: nowrap;     
     //position: absolute;
     position: absolute;
     top : -190%;
     left : 60%;
     z-index: 1000;
     opacity : 1.0;
      }

td tr table { padding: 0; margin:0; }
td { text-align: center;}
.x { font-family: Times; font-style:italic; font-weight: bold;}
table {border-collapse: collapse;}
#svg {position:absolute; height:60%; width: 100%; top:20%; left:0%; z-index:100;} 
//#svg {border:solid black 2px;}
img { border-radius : 15px;}
img { position: relative;}

/************---------HEADER------**********/



#home {
  position:absolute; 
  font-size:4vh; 
  left: 60vw; 
  top : 2vh;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #00a4b4;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  cursor:pointer;
}

.dropdown:hover .dropdown-content {display: block;}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#navstyle {
  display: flex; 
  flex-direction: row; 
  align-items: center;
  margin:0; 
  padding:0; 
  z-index:999; 
  color:#fffcea; 
  background-color: #00A4B4;
  /*line-height:50px;*/
}

.hamburger {
  flex: 1;
  justify-content: left;
  align-items: center;
  /*border: 5px solid red;*/
}

.creme_logo{
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 0; 
  margin: 0;
  width:180px;
  /*border: 5px solid blueviolet;*/
}

.rightbox{
  /*border: 4px solid hotpink;*/
  display: flex;
  justify-content: right;
  align-items: center;
}

.searchboxy{
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  /*border: 5px solid orange;*/
}

#searchform {
  font-size:4vh; 
  padding:0; 
  vertical-align: middle; 
  margin:0; 
  top : 2vh; 
}

#searchformx {
  /*border: 1px solid black;*/ 
  padding:0px; 
  margin-right: 5px;
}

#searchbutton {
  cursor: pointer;
  font-size:30px;
}

#logo{display: block; 
  /*border: 3px solid yellow;*/ 
  width: 180px;
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 5px; 
  margin-bottom: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.clink{
  width:50px;
  height:50px;
  /*justify-content: center;
  align-items: center;*/
  /*border: 1px solid greenyellow;*/
}

.clink:hover {
  cursor: -webkit-grab; cursor: pointer;
}

#colortheme {
  position:absolute; 
  left:77%;
  top:105%; 
  font-size:1vw;
}

#color1 {
  position: absolute;
  left: 84%;
}

#color2 {
  position: absolute;
  left: 88%;
}

#color3 {
  position: absolute;
  left: 92%;
}

#color4 {
  position: absolute;
  left: 96%;
}

#heading {
  margin-bottom:0;
  padding-bottom: 0; 
  font-size: 40px;
  font-weight:bold;
  font-family: OpenDyslexic; 
  color: #00A4B4;
}

/************---------MAIN BODY------**********/

/*#backing {
    position:absolute;
    z-index:-1;
    width:100vw;
    height:100vh;
    background-color:pink;
}*/

#mainthree {
    display:flex;
    flex-direction: row;
    min-height: 100%; /* Fills full screen height */
    width: 100%;       /* Fills full screen width */
}

#bempty {
  flex: 1;
  align-items: stretch;
}

#mid-main {
  /*border: 1px solid blue;*/
  flex:2;
  min-height:100vh;
  /*background-color:#fffcea;*/

}

#colthem {
    /*border: 2px solid green;*/
    flex:1;
}

#even{
    padding-top:110px;
    display:flex;
    align-items:center;
    text-align:center;
    /*border:2px solid blue;*/
}

#eventext{
    display:flex;
    margin:5px;
}

.eveninside{
    display:flex;
    flex:1;
    justify-content:space-between;
    padding:5px;
    /*border:2px solid black;*/
}

#main {
    max-width : 2000px;
    /*border:2px solid red;*/
}

#mainbody {
  /*border: 2px solid pink;*/
  }

#keywords {
  text-align:left; 
  font-size: 2.4vw; 
  font-weight:bold;
  font-family: OpenDyslexic;
  color : #00A4B4;
}

#info {
  font-family: OpenDyslexic; 
  font-size: 20px;
  text-align: left;
  color: #00A4B4; 
}

#keywords2  {
  text-align:left; 
  font-size: 2.4vw; 
  font-weight:bold;
  font-family: OpenDyslexic;
  color : #00A4B4;
}

#question {
  font-family: OpenDyslexic; 
  font-size: 2vw;
  text-align: left;
  color : #E97451;
}

.bmain {
  display: flex;
  flex-direction: row;
}

.submain {
  flex: 2;
}

/*
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 1px 0;
  font-size: 30px;
}*/

/************---------SIDEBAR------**********/

.menu { font-size: 2.7vh ;}

.chapters{
  background-color: #00a4b4; 
  color: #fffcea;
}

/************---------CONTROLS------**********/

.control-button {
  background-color:transparent;
  border-width: 0px;
}

.ctrl-image {
  position: relative; 
  left:0%;
}

#smallfooter {
  flex: 2;
  display: flex;
  align-items: center;
  /*text-align: center;*/
  vertical-align: middle;
  justify-content: center;
  /*border: 2px solid blue;*/
}

#pagenum {
  float:right; 
  color: #00a4b4;
  padding-right:20px;
}

#vertalign {
    display:flex;
    align-items:center;
    text-align:center;
}

#footer { 
  /*height:8vh;*/ 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin:0; 
  padding:0;
  position:fixed; 
  bottom : 0%;  
  width:100%; 
  background-color: #fdf5d0;
  color:#00a4b4;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #00a3b3;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

.slidey {
  display: flex;
  justify-content: center;
  flex: 1;
  /*border: 3px solid black;*/
}

.slidecontainer {
  /*border: 2px solid blueviolet;*/
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  /*position:absolute;
  bottom: 1.5%;*/
  /*width: 20%;
  margin-left:5%;
  margin-top:0.2%;
  padding:1vh;*/
}

.footy {
  grid-area: 21 / 1 / span 1/ span 4;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.alt-footer{
  position:fixed; 
  bottom : 0%;  
  width:100%; 
  background-color: #fdf5d0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bcontrols {
  display: flex;
  align-items: center;
 /* text-align: centre;*/
  vertical-align: middle;
  justify-content: center;
  /*border: 3px solid violet;*/
  flex: 2;
}

.bnav {
  display: flex;
  /*border: 3px solid hotpink;*/
  align-items: centre;
  text-align: centre;
  vertical-align: middle;
  justify-content: center;
  flex: 1;
}

#controls {
/*position: absolute; 
  bottom: 0.7vh;*/ 
  color: #000000;
  display:inline-flex;
  justify-content: center;
  align-items: center;
  /*display: block;*/
  /*border:1px solid black; */
  margin-top:auto; 
  margin-bottom:auto;
  /*width: 40vw;
  left: 43vw; */
}

/*#flagbutton {  width: 22; height:22;}
#flag {  width: 21px; height:20px;}
#playbutton {  width: 22; height:22;}
#play {  width: 21px; height:21px;}
#speakbutton {  width: 22; height:22;}
#speak {  width: 21px; height:21px;}
#review {  height:22;}
#Q { height:22;}
#A {  height:22;}
#K{  height:22;}*/

/*-------------UNCLEAR--------------*/

.b0 { color : #ffffe9;}
.b1 { color : darkblue;}
a {
  text-decoration: none;
}
td {
  text-align: center;
  
}

.arithmetic td{
    padding:20px;
  font-size: 45px;
}


.fraction td{
    padding:20px;
  font-size: 45px;
}


.arithmetic {
  position: absolute;
  top : 90%;
  left: 20%;
}


.mySlides {display: none}


/*-----------------GENERAL------------------*/

/*
@media only screen and (max-width: 699px) {
        #maincontent { display: none; }
            .smallscreen { display: block;  font-size: 10vw; margin-left: 5vw;
       margin-right: 5vw; font-family:OpenDyslexic;}
        }

.ipad { display: none; }
@media only screen and (min-width: 1024px)and (max-width: 1025px) {
            .ipad { display: block; }
        }*/

/*------------OLD CSS ENDS---------------*/