/* -- All Formatting for Math Pages -- */

/*Grid layout, Mar 2022*/
.center {padding-top: 45%;}

/*==== Index Page Text Inside Grids ====*/
.indextext{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.1em;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.flextext{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.1em;
    height: 100%;
    margin-right: 85px;
    margin-left: 85px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 30px;
}
.flextexti{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  font-size: 1.1em;
  font-style: italic;
  padding-left: 15px;
  padding-right: 15px;
}
.flextextmain{
  font-size: 1.1em;
  padding: 1.2em;
}
.flextextfoot{
  display: flex;
  text-align: center;
  width: 90%;
  height: 100%;
  font-size: 0.9em;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
}
.blocktext{
  padding-left: 25px;
  padding-right: 25px;
  justify-content: left;
  align-items: center;
  text-align: left;
  font-size: 1.1em;
  height: 100%;
  margin: 10px;
}
.button {
  display: flex;
  background: rgb(46, 46, 151);
  border: gray;
  border-style: solid;
  border-width: 5px;
  border-radius: 25px;
  color: white;
  width: 140px;
  height: 48px; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 19px;
  padding-top: 2px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  cursor: pointer;
}
h3 {text-align: center;}

/*==== Index Page Grid Area Layout ====*/
#indexHead {
  grid-area: gridhead;
  background: lightblue;
}
#indexAbout {
  grid-area: gridabout;
  background: rgb(46, 46, 151);
  color: #ffffff;
}
#indexFoot {
  grid-area: gridfoot;
  background: #404041;
  color: #ffffff;
}
#topic1 { 
  grid-area: block11; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic2 { 
  grid-area: block12; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic3 { 
  grid-area: block13; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic4 { 
  grid-area: block21; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic5 { 
  grid-area: block22; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic6 { 
  grid-area: block23; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic7 { 
  grid-area: block31; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic8 { 
  grid-area: block32; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic9 { 
  grid-area: block33; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic10 { 
  grid-area: block41; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic11 { 
  grid-area: block42; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#topic12 { 
  grid-area: block43; 
  background: lightblue;  
  color: #ffffff; 
  border-radius: 50px;
}
#bgrow {
  grid-area: blogquiz;
  background: lightblue;  
}
#bgrow div {
  height: 100%;
  width: 67%;
  background: rgb(46, 46, 151);
  margin-left: auto;
  margin-right: auto;
  color: #ffffff; 
}
#bgrow table {
  height: 100%;
  width: 67%;
  background: rgb(46, 46, 151);
  margin-left: auto;
  margin-right: auto;
  color: #ffffff; 
}

/*==== Lesson Screen Area Formatting ====*/
#studyHead {
  grid-area: shead;
  background: rgb(160, 160, 160);
}
#studyFoot {
  grid-area: sfoot;
  color: #404041;
}
#studyMain { 
  grid-area: smain; 
  background: lightblue;  
}
#studyLife { 
  grid-area: slife; 
  background: lightblue;  
}
#bgrow div {
  height: 100%;
  width: 67%;
  background: rgb(46, 46, 151);
  margin-left: auto;
  margin-right: auto;
  color: #ffffff; 
}
#bgrow table {
  height: 100%;
  width: 67%;
  background: rgb(46, 46, 151);
  margin-left: auto;
  margin-right: auto;
  color: #ffffff; 
}

/*==== Left Sidebar Menu ====*/
.minimenu {
    margin-left: 0;
    margin-right: 1em;
    width: 70px;
    height: 60px;
    background-color: rgb(160, 160, 160);
    border: black;
    border-style: solid;
    border-width: 4px;
    border-radius: 15px;
    position: fixed;
    float: left;
    font-size: 16px;
  }
  .minimenu input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
  }
  .minimenu input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
  }
  #sidebarMenu {
    height: 100%;
    position: fixed;
    left: 0;
    width: 250px;
    margin-top: 60px;
    transform: translateX(-250px);
    transition: transform 250ms ease-in-out;
    background: rgb(160, 160, 160);
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
  }
  .tagline{
    text-align: center;
    font-size: 24px;
    color: rgb(0, 0, 0);
  }
  .sidebarMenuInner{
    margin:0;
    padding:0;
    border-top: 1px solid rgb(0, 0, 0);
    }
  .sidebarMenuInner li{
    list-style: none;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    border-bottom: 1px dotted rgb(0, 0, 0);
}
  .sidebarMenuInner li a{
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none; /** For some reason the new code doesn't recognize this text decoration, so added a new class below **/
  }
  .sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 10px;
    text-align: center;
    font-weight: bold;
    color: rgb(0, 0, 0);
  }
  .sidebarlink {text-decoration: none;}

  /********** Form Formatting *********/
  fieldset{max-width: 800px;}

  .txtlabel {
      float: left;
      width: 8em;
      text-align: right;
  }
  .cklabel {
      float: left;
      padding-left: 4em;
      text-align: left;
  }

  .txtinput {
      margin-left: 4em;
      margin-bottom: .5em;
  }

  .questionformat {
      font-family: Georgia, 'Times New Roman', Times, serif;
      background-color: #fff;
      margin-left: 5em;
      margin-right: 5em;
  }
  .selectone {font-family: Georgia, 'Times New Roman', Times, serif;
      text-align: right;}

  /*==== Index Page Responsiveness ====*/
  @media (max-width: 639px) 
	{
    .sidefixMenu{display:none;}
    .indexgrid{
      display: grid;
      grid-template-areas: 
        "gridhead gridhead"
        "gridabout gridabout"
        "block11 block12"
        "block13 block21"
        "block22 block23"
        "block31 block32"
        "block33 block41"
        "block42 block43"
        "blogquiz blogquiz"
        "gridfoot gridfoot";
      grid-template-rows: minmax(200px, auto) minmax(200px, auto) minmax(90px, auto) minmax(90px, auto) minmax(90px, auto) minmax(90px, auto) minmax(90px, auto) minmax(90px, auto) minmax(100px, auto) minmax(50px, auto); 
      grid-template-columns: 200 200;
      grid-row-gap: 10px;
      grid-column-gap: 10px;
      width: 410px;
      margin-right: auto;
      margin-left: auto;
    }
}
@media (min-width: 640px) and (max-width: 919px) 
	{
    .sidefixMenu{display:none;}
    .indexgrid{
      display: grid;
      grid-template-areas: 
        "gridhead gridhead gridhead"
        "gridabout gridabout gridabout"
        "block11 block12 block13 "
        "block21 block22 block23"
        "block31 block32 block33"
        "block41 block42 block43"
        "blogquiz blogquiz blogquiz"
        "gridfoot gridfoot gridfoot";
      grid-template-rows: minmax(200px, auto) minmax(200px, auto) minmax(90px, auto) minmax(90px, auto) minmax(90px, auto) minmax(90px, auto) minmax(100px, auto) minmax(50px, auto);  
      grid-template-columns: 200 200 200;
      grid-row-gap: 10px;
      grid-column-gap: 10px;
      width: 620px;
      margin-left: auto;
      margin-right: auto; 
    }
}
@media (min-width: 920px) 
	{
    .minimenu {display:none;}
    #sidebarMenu {display:none;}
    .sidefixMenu{
      height: 100%;
      position: fixed;
      left: 0;
      width: 250px;
      background: rgb(160, 160, 160);
      color: #ffffff;
      text-transform: uppercase;
      font-weight: bold;
      text-align: center;
    }
    .indexgrid{
      display: grid;
      grid-template-areas: 
        "gridhead gridhead gridhead"
        "gridabout gridabout gridabout"
        "block11 block12 block13"
        "block21 block22 block23"
        "block31 block32 block33"
        "block41 block42 block43"
        "blogquiz blogquiz blogquiz"
        "gridfoot gridfoot gridfoot";
      grid-template-rows: minmax(200px, auto) minmax(200px, auto) minmax(90px, auto) minmax(90px, auto) minmax(90px, auto) minmax(90px, auto) minmax(100px, auto) minmax(50px, auto);  
      grid-template-columns: 200 200 200;
      grid-row-gap: 20px;
      grid-column-gap: 20px;
      width: 640px;
      margin-left: calc(100vw * 0.5 - 200px);
    }
}

/*==== Lesson Page Responsiveness ====*/

@media (max-width: 639px) 
	{
    .sidefixMenu{display:none;}
    .studygrid{
      display: grid;
      grid-template-areas: 
        "shead"
        "smain"
        "slife"
        "sfoot";
      grid-template-rows: minmax(80px, auto) minmax(200px, auto) minmax(100px, auto) minmax(80px, auto);  
      grid-template-columns: 1fr;
      grid-row-gap: 10px;
      grid-column-gap: 10px;
      margin-right: auto;
      margin-left: auto;
    }
}

@media (min-width: 640px) and (max-width: 919px) 
	{
    .sidefixMenu{display:none;}
    .studygrid{
      display: grid;
      grid-template-areas: 
        "shead shead"
        "smain slife"
        "sfoot sfoot";
      grid-template-rows: 80px 1fr 70px;  
      grid-template-columns: 1fr 25%;
      grid-row-gap: 10px;
      grid-column-gap: 10px;
      height: 100vh;
      margin-left: auto;
      margin-right: auto; 
    }
}

@media (min-width: 920px) 
	{
    .minimenu {display:none;}
    #sidebarMenu {display:none;}
    .sidefixMenu{
      height: 100%;
      position: fixed;
      left: 0;
      width: 250px;
      background: rgb(160, 160, 160);
      color: #ffffff;
      text-transform: uppercase;
      font-weight: bold;
      text-align: center;
    }
    .studygrid{
      display: grid;
      grid-template-areas: 
        "shead shead"
        "smain slife"
        "sfoot sfoot";
      grid-template-rows: 80px 1fr 70px;  
      grid-template-columns: 1fr 25%;
      grid-row-gap: 10px;
      grid-column-gap: 10px;
      height: 100vh;
      /*==== width: 640px; ====*/
      margin-left: 260px;
    }
}