/*******************************Calendar Top Navigation*********************************/

div#calendar{
    margin:0px auto;
    padding:0px;
    max-width: 602px;
    width: auto;
    font-family:Helvetica, "Times New Roman", Times, serif;
    
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
   
  div#calendar div.box{
      position:relative;
      top:0px;
      left:0px;
      max-width: 602px;
      width: auto;
      height:40px;
      background-color:   #00a3c8;      
  }
   
  div#calendar div.header{
      line-height:40px;  
      vertical-align:middle;
      position:relative;
      left:11px;
      top:0px;
      max-width: 602px;
      width: auto;
      height:40px;   
      text-align:center;
  }
   
  div#calendar div.header a.prev,div#calendar div.header a.next{ 
      position:absolute;
      top:0px;   
      height: 17px;
      display:block;
      cursor:pointer;
      text-decoration:none;
      color:#FFF;
  }
   
  div#calendar div.header span.title{
      color:#FFF;
      font-size:18px;
  }
   
   
  div#calendar div.header a.prev{
      left:0px;
  }
   
  div#calendar div.header a.next{
      right:20px;
  }
   
   
   
   
  /*******************************Calendar Content Cells*********************************/
  div#calendar div.box-content{
      border:1px solid #787878 ;
      border-top:none;
  }
   
   
   
  div#calendar ul.label{
      float:left;
      margin: 0px;
      padding: 0px;
      margin-top:5px;
      margin-right: 5px;
      display: grid;
      grid-auto-flow: column;
      width: 100%;
  }
   
  div#calendar ul.label li{
      margin:0px;
      padding:0px;
      margin-right:5px;  
      float:left;
      list-style-type:none;
      height:40px;
      line-height:40px;
      vertical-align:middle;
      text-align:center;
      color:#000;
      font-size: 15px;
      background-color: transparent;
  }
   
   
  div#calendar ul.dates{
      float:left;
      margin: 0px;
      padding: 0px;
      margin-left: 5px;
      margin-bottom: 5px;
  }
   
  /** overall width = width+padding-right**/
  div#calendar ul.dates li{
      margin:0px;
      padding:0px;
      margin-right:5px;
      margin-top: 5px;
      line-height:80px;
      vertical-align:middle;
      float:left;
      list-style-type:none;
      width:80px;
      height:80px;
      font-size:25px;
      background-color: #DDD;
      color:#000;
      text-align:center; 
  }
   
  :focus{
      outline:none;
  }
   
  div.clear{
      clear:both;
  }
  
  @media all and (max-width:821px){
      div#calendar ul.dates li{
          margin:0px;
          padding:0px;
          margin-right:5px;
          margin-top: 5px;
          line-height:49px;
          vertical-align:middle;
          float:left;
          list-style-type:none;
          width:49px;
          height:49px;
          font-size:20px;
          background-color: #DDD;
          color:#000;
          text-align:center; 
      }
  }
  @media all and (max-width:640px){
      div#calendar ul.dates li{
          margin:0px;
          padding:0px;
          margin-right:5px;
          margin-top: 5px;
          line-height:35px;
          vertical-align:middle;
          float:left;
          list-style-type:none;
          width:35px;
          height:35px;
          font-size:18px;
          background-color: #DDD;
          color:#000;
          text-align:center; 
      }
  }
  @media all and (max-width:480px){
      div#calendar ul.dates li{
          margin:0px;
          padding:0px;
          margin-right:5px;
          margin-top: 5px;
          line-height:51px;
          vertical-align:middle;
          float:left;
          list-style-type:none;
          width:51px;
          height:51px;
          font-size:18px;
          background-color: #DDD;
          color:#000;
          text-align:center; 
      }
  }
  @media all and (max-width:426px){
      div#calendar ul.dates li{
          margin:0px;
          padding:0px;
          margin-right:5px;
          margin-top: 5px;
          line-height:57px;
          vertical-align:middle;
          float:left;
          list-style-type:none;
          width:57px;
          height:57px;
          font-size:18px;
          background-color: #DDD;
          color:#000;
          text-align:center; 
      }
  }
  @media all and (max-width:392px) {
      div#calendar ul.dates li{
          margin:0px;
          padding:0px;
          margin-right:5px;
          margin-top: 5px;
          line-height:45px;
          vertical-align:middle;
          float:left;
          list-style-type:none;
          width:45px;
          height:45px;
          font-size:17px;
          background-color: #DDD;
          color:#000;
          text-align:center; 
      }
  }
  @media all and (max-width:362px) {
      div#calendar ul.dates li{
          margin:0px;
          padding:0px;
          margin-right:5px;
          margin-top: 5px;
          line-height:41px;
          vertical-align:middle;
          float:left;
          list-style-type:none;
          width:41px;
          height:41px;
          font-size:17px;
          background-color: #DDD;
          color:#000;
          text-align:center; 
      }
  }
  @media all and (max-width:415px) {
      div#calendar ul.dates li{
          margin:0px;
          padding:0px;
          margin-right:5px;
          margin-top: 5px;
          line-height:45px;
          vertical-align:middle;
          float:left;
          list-style-type:none;
          width:48px;
          height:48px;
          font-size:17px;
          background-color: #DDD;
          color:#000;
          text-align:center; 
      }
  }
  @media all and (max-width:376px) {
      div#calendar ul.dates li{
          margin:0px;
          padding:0px;
          margin-right:5px;
          margin-top: 5px;
          line-height:43px;
          vertical-align:middle;
          float:left;
          list-style-type:none;
          width:43px;
          height:43px;
          font-size:17px;
          background-color: #DDD;
          color:#000;
          text-align:center; 
      }
  }
  @media all and (max-width:370px) {
      div#calendar ul.dates li{
          margin:0px;
          padding:0px;
          margin-right:5px;
          margin-top: 5px;
          line-height:41px;
          vertical-align:middle;
          float:left;
          list-style-type:none;
          width:41px;
          height:41px;
          font-size:17px;
          background-color: #DDD;
          color:#000;
          text-align:center; 
      }
  }
  @media all and (max-width:281px) {
      div#calendar ul.dates li{
          margin:0px;
          padding:0px;
          margin-right:5px;
          margin-top: 5px;
          line-height:29px;
          vertical-align:middle;
          float:left;
          list-style-type:none;
          width:29px;
          height:29px;
          font-size:14px;
          background-color: #DDD;
          color:#000;
          text-align:center; 
      }
  }