/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */
@media only screen and (max-width: 1000px) {
  body {

    text-align:center;
    
    overflow-y: scroll; 
     overflow-x: hidden;
    padding: auto auto;
    font-family: 'Open Sans';
    margin: auto auto;
    margin-top: -10px;
    font-size: 16px;
    color: black;
    text-align: center;
    font-weight: normal;
    background-position: center;
    background-color: rgb(23,61,109);
    text-decoration: none;
    }
     
    
    .footermenu{
        list-style-type:none;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        position: fixed;
        text-align: center;
        margin-bottom: 0;
        margin-left: -30px;
        background-color: rgb(23,61,109);
        height: 80px;
        border-top: white 1px solid;
        min-height: 80px;
    }
    
    .footermenu li {
        float: left;
        width: 19%;
        display: inline-block;
        color: blue;
        text-align: center;
       margin-top: 10px;
        text-decoration: none; 
        left: 0;
      }
    
      .footermenu li a{
          color: white;
          text-decoration: none;
      }

      #uitleg p{
        padding: 5%;
        text-align: left;
        margin-left: 5%;
      }
    


      p{
        padding: 0% 10%;
        text-align: left;
        
      }

    h1 {
    font-size: 26px;
    font-weight: 1000;
    color:rgb(11, 121, 165);
    text-decoration: none;
    font-family: "Architects Daughter";
    }
    
    h2 {
    font-size: 18px;
    margin: 0px 0px 0px 0px;
    color: rgb(23,61,109);
    font-weight: heavy;
    }
    
    h3 {
        font-size: 26px;
        font-weight: 1000;
        line-height: 1.0;
        color:rgb(69, 179, 193);
        text-decoration: none;  
    }
    
    h4 {
        font-size: 20px;
        color: rgb(23,61,109);
        text-decoration: none;  
        padding: 0 3%;
    }
    
    table{
    text-align:left;
    margin: auto;
    }

    th{
      padding: 10px;
    }

    td{
      padding: 0px 10px;
    }
    
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
      }
      
      .switch input { 
        opacity: 0;
        width: 0;
        height: 0;
      }
      
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
      }
      
      .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
      }
      
      input:checked + .slider {
        background-color: rgb(0,0,214);
      }
      
      input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
      }
      
      input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
      }
      
      /* Rounded sliders */
      .slider.round {
        border-radius: 34px;
      }
      
      .slider.round:before {
        border-radius: 50%;
      }

      #spelrondescore{
        color:rgb(0,0,214);
        border: solid 2px rgb(0,0,214);
        background-color: white;
        font-size: 14px;
        margin-right: -2px;
        width: 150px;
      }

      #overallscore{
        color:white;
        border: solid 2px rgb(0,0,214);
        background-color: rgb(0,0,214);
        font-size: 14px;
        width: 150px;
        margin-left: -2px;
      }

    
    .buttonenter {
    border: solid 1px rgb(23,61,109);
    text-align:center;
     
    font-size: 18px; 
    font-weight: bold; 
    padding: 2px 0px 2px 0px;
    height: 42px;
    width: 150px;
    background-color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgb(23,61,109);
    color: white;
   
    }
    
    
    .buttonantwoord{
      background-color: rgb(197, 107, 94);
      color: white;
      text-align:center;
      height: 42px;
      font-size: 18px;
  
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      font-weight: normal;
      border: none;
      margin: -2px -2px -7px -3px;
      padding: 0px 0px -2px 0px;
      width: 200px;
          
      
      }
    
    .buttonoverzicht{
    background-color: rgb(197, 107, 94);
    color: white;
    text-align:center;
    height: 42px;
    font-size: 18px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: normal;
    border: none;
    margin: -2px -2px -7px -3px;
    padding: 0px 0px -2px 0px;
    width: 200px;
    }

    a.buttonoverzicht{
      background-color: rgb(197, 107, 94);
    color: white;
    text-align:center;
   
    font-size: 18px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: normal;
    border: none;
    padding: 10px 40px;
    text-decoration: none;
    }

    .buttonoverzicht2{
      background-color: rgb(227,169,72);
      color: rgb(23,61,109);
      text-align:center;
      height: 42px;
      font-size: 18px;
  
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-weight: normal;
      border: none;
      margin: -2px -2px -7px -3px;
      padding: 0px 0px -2px 0px;
      width: 200px;
      }

    .startspel{
      background-color: rgb(197, 107, 94);
      color: white;
      text-align:center;
      height: 42px;
      font-size: 18px;
  
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      font-weight: normal;
      border: none;
      margin: -2px -2px -7px -3px;
      padding: 0px 0px -2px 0px;
      width: 150px;
          margin-bottom: 50px;
      
      }

      
      .gameoverknop a{
      
        background-color: rgb(227,169,72);
        color: white;
        text-align:center;
       
        font-size: 18px;
    margin-left: -20px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        font-weight: normal;
        border: none;
  
        padding: 10px 40px;
        text-decoration: none;
       }

       .actietekst{
        color: white;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 20px;
        width: 80%;
        margin-left: 10%;
       }

       .gameoverknop {
        margin-bottom: 20px;
        
       }
    
    .vakje {
    border: solid 2px rgb(23,61,109);;
    text-align:center;
     
    font-size: 16px;  
    padding: 2px 0px 2px 0px;
    height: 40px;
    background-color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  
    color: rgb(23,61,109);;
    align: middle;
    
    }

    .timer{
      background-color: rgb(197, 107, 94);
      width: 20%;
      color: white;
      margin-left: 40%;
      color: white;
      height: 30px;
      font-size: 20px;
      font-weight: bold;
      text-decoration: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    
    
    .spel1 img{
      width: 80%;
    }
    
    
    .logo {
    margin: 10px 0px;
    padding-top: 10px;
    padding-bottom: 2px;
    text-align: middle;
    background-color: rgb(23,61,109);
    }
    
    
    .tabel {
    
    background-color: white;
    
    box-shadow:rgba(64,64,64,0.2) 0 8px 24px;
    font-weight: 1px;
    width: 90%;
    margin-left: 5%;
      text-align: center;
    text-decoration: none;
    float: center;
    background-image:url(/foto/achtergrondmobiel.png);
      background-position: top left;
      background-repeat: no-repeat;
    }

    
}

@media only screen and (min-width: 1000px) {
body {

    text-align:center;
    
    overflow-y: scroll; 
     overflow-x: hidden;
    padding: auto auto;
    
    margin: auto auto;
    margin-top: -10px;
    font-family: 'Open Sans';
    font-size: 16px;
    color: black;
    text-align: center;
    font-weight: normal;
    background-position: center;
    background-color: rgb(23,61,109);
    text-decoration: none;
    }
     
    
    .footermenu{
        list-style-type:none;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        position: fixed;
        text-align: center;
        margin-bottom: 0;
        margin-left: -30px;
        background-color: rgb(23,61,109);;
        height: 80px;
        border-top: white 1px solid;
        min-height: 80px;
    }
    
    .footermenu li {
        float: left;
        width: 20%;
        display: inline-block;
        color: blue;
        text-align: center;
       margin-top: 10px;
        text-decoration: none; 
        left: 0;
      }
    
      .footermenu li a{
          color: white;
          text-decoration: none;
      }

      #uitleg p{
        padding: 5%;
        text-align: left;
        margin-left: 25%;
      }
    


      p{
        padding: 0% 10%;
        text-align: left;
        
      }

    h1 {
    font-size: 30px;
    font-weight: 1000;
    line-height: 40px;
    color:rgb(11, 121, 165);
    text-decoration: none;
    font-family: "Architects Daughter";
    }
    
    h2 {
    font-size: 24px;
    margin: 10px 0px 0px 0px;
    color: rgb(23,61,109);
    font-weight: heavy;
    }
    
    h3 {
        font-size: 26px;
        font-weight: 1000;
        line-height: 1.0;
        color:rgb(69, 179, 193);
        text-decoration: none;  
    }
    
    h4 {
        font-size: 20px;
        font-weight: 1000;
        color: rgb(23,61,109);
        text-decoration: none;  
    }

    .spel1 img{
      width: 50%;
    }
    
    table{
 text-align: left;
      margin: auto;
     }

    th{
      padding: 10px;
    }

    td{
      padding: 0px 10px;
    }
    
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
      }
      
      .switch input { 
        opacity: 0;
        width: 0;
        height: 0;
      }
      
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
      }
      
      .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
      }
      
      input:checked + .slider {
        background-color: rgb(0,0,214);
      }
      
      input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
      }
      
      input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
      }
      
      /* Rounded sliders */
      .slider.round {
        border-radius: 34px;
      }
      
      .slider.round:before {
        border-radius: 50%;
      }

      #spelrondescore{
        color:rgb(0,0,214);
        border: solid 2px rgb(0,0,214);
        background-color: white;
        font-size: 14px;
        margin-right: -2px;
        width: 150px;
      }

      #overallscore{
        color:white;
        border: solid 2px rgb(0,0,214);
        background-color: rgb(0,0,214);
        font-size: 14px;
        width: 150px;
        margin-left: -2px;
      }

    
    .buttonenter {
    border: solid 1px rgb(23,61,109);;
    text-align:center;
     
    font-size: 20px;  
    font-weight: bold;
    padding: 2px 0px 2px 0px;
    height: 50px;
    width: 150px;
    background-color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgb(23,61,109);;
    color: white;
   
    }
    
    
    .buttonantwoord{
      background-color: rgb(197, 107, 94);
      color: white;
      text-align:center;
      height: 42px;
      font-size: 18px;
  
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-weight: normal;
      border: none;
      margin: -2px -2px -7px -3px;
      padding: 0px 0px -2px 0px;
      width: 200px;
          
      
      }
    
    .buttonoverzicht{
    background-color: rgb(197, 107, 94);
    color: white;
    text-align:center;
    height: 42px;
    font-size: 18px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: normal;
    border: none;
    margin: -2px -2px -7px -3px;
    padding: 0px 0px -2px 0px;
    width: 200px;
        
    
    }

    a.buttonoverzicht{
      background-color: rgb(197, 107, 94);
    color: white;
    text-align:center;
   
    font-size: 18px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: normal;
    border: none;
   
    padding: 10px 40px;
    text-decoration: none;
        
    
    }

    .buttonoverzicht2{
      background-color: rgb(227,169,72);
      color: rgb(23,61,109);
      text-align:center;
      height: 42px;
      font-size: 18px;
  
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-weight: normal;
      border: none;
      margin: -2px -2px -7px -3px;
      padding: 0px 0px -2px 0px;
      width: 200px;
          
      
      }
    
    .startspel{
      background-color: rgb(197, 107, 94);
      color: white;
      text-align:center;
      height: 42px;
      font-size: 18px;
  
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      
      font-weight: normal;
      border: none;
      margin: -2px -2px -7px -3px;
      padding: 0px 0px -2px 0px;
      width: 150px;
      margin-bottom: 50px;
      
      }

      

      .gameoverknop a{
        background-color: rgb(197, 107, 94);
        color: white;
        text-align:center;
       
        font-size: 18px;
    
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
      
        font-weight: normal;
        border: none;
        
        padding: 10px 40px;
        text-decoration: none;
        margin: 20px;
        margin-left: 0px;
       }

       .actietekst{
        color: white;
        font-weight: bold;
        font-size: 24px;
        margin-bottom: 20px;
       }

       .gameoverknop {
        margin-bottom: 20px;
       }

    .vakje {
    border: solid 2px rgb(23,61,109);;
    text-align:center;
     
    font-size: 16px;  
    padding: 2px 0px 2px 0px;
    height: 40px;
   
    background-color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    color: rgb(23,61,109);;
    align: middle;
    
    }
    
    .timer{
      background-color: rgb(197, 107, 94);
      width: 20%;
      color: white;
      margin-left: 40%;
      height: 30px;
      font-weight: bold;
      font-size: 20px;
    
      text-decoration: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    
    
    
    .logo {
    margin: 10px 0px;
    padding-top: 10px;
    padding-bottom: 2px;
    text-align: middle;
    background-color: rgb(23,61,109);
    }
    
    
    .tabel {
    
      background-image:url(/foto/achtergronddesktop.png);
      background-position: top left;
      background-repeat: no-repeat;
    background-color: white;
    box-shadow:rgba(64,64,64,0.2) 0 8px 24px;
    font-weight: 1px;
    width: 60%;
    margin: 0 20%;
    text-align: center;
    text-decoration: none;
    float: center;
   
    }

  
    
  }