* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body, html {
      height: 100%;
      font-family: verdana;
      background-color: #FDD995;
    }
    h1{font-size: 1.5em;margin: 10px;}
   .bg-index {
      background-image: url('../images/maincourt.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
   .bg-all {
      background-image: url('../images/maincourt_fade.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    #main{
      color:white;
      text-align: center;
    }
    .box{margin-top:5px;background-color: #043DC2;color: white;}
    
    table.listing{background-color: #487dfb; margin-top: 5px;}
    table.listing th{
      background-color: #032a86;
      padding: 2px;
    }
    table.listing td{
      background-color: #043DC2;
      padding: 4px;
    }
    table.standard{width: 100%;}
    
    td.small{font-size: 12px;}
    td.bgt{
      background-image: url('../images/court_sm.png');
      background-size:     cover;                      /* <------ */
      background-repeat:   no-repeat;
      background-position: center center;  
    }
    #fotos{
      display: flex;
      flex-wrap: wrap;
    }
    
  .foto{max-width: 270px;margin: 5px;}
    
  #day{
    font-weight: bold;font-size: 1.3em;
  }
  
  #reslist{
    width: 90vw;
    max-width: 500px;
    min-height: 580px;
    padding: 5px;
    display: flex;
    flex-direction: column;   
    align-items: center; 
    margin:auto;
  }
  .bookwidth{width: 130px;}
    #footer{
      height: 30px;
      line-height: 1.7;
      background-color: lightgray;
      opacity: 0.3;
      width: 100%;
      position: absolute;
      margin-bottom: 0;
      padding-left: 10px;
      display: flex;
      justify-content:space-evenly;
      z-index: 100;
    }
    #date{
      font-size: 1.5em;
      margin-bottom: 5px;
      width: 220px;
    }
    a.white:link{
      color: white;
      text-decoration: none;
    }
    a.white:hover{
      color: #EBE9E9;
    }
    a.none:link{
      color: black;
      text-decoration: none;
    }
  .whole{display: table-row;}
  .half{display: none;}
  
  .float-right{padding: 5px;position: relative;height: 1px;overflow: visible;width: 100%;top: -10px;}
  .fr{float: right;}
  #page{padding: 5px;}
  #bookmessage{
    width: 80%;
    max-width: 300px;
  }
  
  #bookbuttons{
    display: flex;
    justify-content:space-around;
    width: 100%;
    max-width: 300px;
    margin: auto;
  }
  
  #bookpage,#mappage, #registeredpage, #contactpage, #registeredpage,#checkregister{
    height: 85vh;
    display: flex;
        flex-direction: column;   
    background-color: lavender;
    width: 90%;
    max-width: 500px;
    margin:auto;
  }
  #login, #register{
    display: flex;
    justify-content:space-between;
    width: 270px;
    background-color: lavender;
    margin:auto;
    margin-top: 10px;
    padding: 10px;
  }
  .warning{
    width: 100%;
    background-color: #FA8A8A;
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 20px;
  }
  .message{
    width: 100%;
    background-color: lightgreen;
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 20px;
  }
  #but-1{
    margin-top:10px;
    margin-right: 20px;
    background-color: #FA8A8A;
    font-size: 1.2em;
    border-radius: 8px;
    padding: 5px;
  }
  #but-2{
    margin-top:10px;
    margin-left: 20px;
    border-radius: 5px;
  }
  #maindata{
    background-color: lightblue;
  }
  .line{
    color: white;
    font-size: 1.5em;
    padding: 5px;
  }
  .white{
    color: white;
  }
  #booking-box{
    position: relative;
    top: 50px;
    width: 200px;
    height: 150px;
    background-color: #FDBE7F;
    border-radius: 4px;
    left: 20vw;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 1.3em;
    cursor: pointer;
  }
  #message-box{
    position: relative;
    top: 80px;
    width: 200px;
    height: 200px;
    background-color: #CFFEB8;
    border-radius: 4px;
    left: 50vw;
    color: black;
    padding: 10px;
    text-align: center;
    font-size: 1.3em;
  }
  .home-messages{
    position: relative;
    top: 80px;
    min-width: 200px;
    background-color: white;
    border-radius: 4px;
    left: 20vw;
    color: black;
    padding: 10px;
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 50px;
    
  }
  #story{
    width: 80%;
    min-width: 270px;
    background-color: gray;
    color: white;
    min-height: 200px;
    margin:auto;
    margin-top: 10px;
  }
  #scrolldiv{
    max-height: 500px;
    overflow-y: scroll;
  }
  .center{
    text-align: center;
  }
  .right{text-align: right;}
  #result{
    font-size: 1.5em;
    background-color: blue;
    color: white;
    width: 220px;
    padding:5px;
  }
  button{
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
  }
  .movebutton{
    border: 1px solid black;
    background-color: lightblue;
    border-radius: 5px;
    width: 100px;
    margin-left: 10px;
    margin-right: 10px;
    color: white;
  }
  #book{
    display: none;
    justify-content: center;
    margin: 10px 0px;
  }
  .rounded{
    border-radius: 10px;
  }
  .bookbutton{
    border: 1px solid black;
    padding: 10px;
    background-color: #FA8A8A;
    width: 100px;
    color: white;
  }
  #left, #right, #left-s, #right-s {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  #prev, #next{
    display: block;
  }
  #prev-s, #next-s{
    display: none;
  }
  button.w40{
    width: 50px;
    height: 30px;
    display: block;
    line-height: 0.8;
    margin: auto;
  }
  .red{
    background-color: #FDB3B3;
  }
  button.green{
    background-color: #A8FD9B;
    color: black;
  }
  button.blue{
    background-color: blue;
    color: white;
  }
  button.none{border: none;background-color: transparent;}
  
  .textcenter{
    text-align: center;
  }
  #court{
    overflow: hidden;
    max-height: 0;
    transition: max-height 1.5s ease;    
  }
  #court.open{
    max-height: 600px;
  }
  #court.highopen{
    max-height: 1100px;
  }
  #qanda{
    padding: 5px;
    margin: auto;
    display: flex;
    max-width: 700px;
    flex-direction:column;
    
  }
/*  ------------------------- q & a  -----------------------------*/
  .opendiv{display: none;margin-bottom: 10px;}
  .qa{margin-bottom: 10px;width: 100%;background-color: lightgray;padding: 5px;}
  
  
  #vb{ margin-top: 20px;font-size: 12px;}
  
  @media (max-width:420px) {
   #reslist{ width: 100%;}
   #message-box{
    left: 40vw;
  }
   .bg-index {
      background-image: url('../images/maincourtmobile.png');
    }
   .bg-all {
      background-image: url('../images/maincourt_fademobile.png');
    }
 
}