/*
    Created on : 20-Jul-2015, 11:46:39
    Author     : Chris Backhouse
*/
@CHARSET "UTF-8";

/*
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: content-box;
}
*/

div#calendarMonths {
  display: flex;
  flex-wrap: wrap;
}

.calendarFlex {
  /* display: flex; */
  flex: 1 0 30%;
  margin: 5px 10px 5px 0;
  height: auto;
  border: 1px solid #CCC;
  border-radius: 4px;
  padding: 0 4px;
}

.calendar {
    display: table;
    height:100px;
    width: 100%;
    min-width: 250px;
    background: white;
}
.calendar tr {
  width: 100%;
}
.calendar .header {
  background: transparent;
  text-align: center;
  color: #1D911D;
}
.calendar td {
  width: 14%;
  text-align: center;
  color: white;
  font-family: sans-serif;
  border: 4px solid white;
  border-radius: 8px;
}

.calendar th.weekday {
  background-color: transparent;
  color: #1b9127;
  font-size: 80%; }

.calendar td:hover {
  filter: brightness(115%);
}

.calendar td.available {
  background: #1D911D;
}
.calendar td.available.rule {
  filter: brightness(1.3); /* 10% brighter */
}

.calendar td.booked {
  background-color: #FF2828;
}
.calendar td.booked-external {
  background-color: #f6a9a9;
}
.calendar td.past {
background-color: #aaa;
}
.calendar td.part {
  background: #FFA500;
}
.calendar td.blue {
  background: #00b9ff;
}

.calendar td[data-date] {
}

.calendar td a {
  color: white;
  display: block;
  padding: 8px 0;
}
.calendar td span {
  color: white;
  display: block;
  padding: 8px 0;
}

/**td.booked:first-child, :not(td.booked) + td.booked, **/
.calendar td.booked.first {
  background: #1d911d;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #1d911d 0%, #1b9127 49%, #ff2828 50%, #ff2828 50%, #ff3a3a 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1d911d), color-stop(49%, #1b9127), color-stop(50%, #ff2828), color-stop(50%, #ff2828), color-stop(100%, #ff3a3a));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #1d911d 0%, #1b9127 49%, #ff2828 50%, #ff2828 50%, #ff3a3a 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #1d911d 0%, #1b9127 49%, #ff2828 50%, #ff2828 50%, #ff3a3a 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #1d911d 0%, #1b9127 49%, #ff2828 50%, #ff2828 50%, #ff3a3a 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #1d911d 0%, #1b9127 49%, #ff2828 50%, #ff2828 50%, #ff3a3a 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d911d', endColorstr='#ff3a3a',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

.calendar td.last[data-booked] {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff2828+0,ff2828+50,1d911d+52,1d911d+100 */
  background: #ff2828;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ff2828 0%, #ff2828 50%, #1d911d 50%, #1d911d 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff2828), color-stop(50%, #ff2828), color-stop(50%, #1d911d), color-stop(100%, #1d911d));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #ff2828 0%, #ff2828 50%, #1d911d 50%, #1d911d 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #ff2828 0%, #ff2828 50%, #1d911d 50%, #1d911d 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #ff2828 0%, #ff2828 50%, #1d911d 50%, #1d911d 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #ff2828 0%, #ff2828 50%, #1d911d 50%, #1d911d 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2828', endColorstr='#1d911d',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

/** This bit needs to be generated **/
.calendar td.part.first {
  background: #1d911d;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #1d911d 0%, #1b9127 49%, orange 50%, orange 50%, orange 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1d911d), color-stop(49%, #1b9127), color-stop(50%, orange), color-stop(50%, orange), color-stop(100%, #ff3a3a));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #1d911d 0%, #1b9127 49%, orange 50%, orange 50%, #ff3a3a 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #1d911d 0%, #1b9127 49%, orange 50%, orange 50%, orange 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #1d911d 0%, #1b9127 49%, orange 50%, orange 50%, orange 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #1d911d 0%, #1b9127 49%, orange 50%, orange 50%, orange 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d911d', endColorstr='orange',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

.calendar td.last[data-part] {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333300+0,333300+50,1d911d+52,1d911d+100 */
  background: #333300;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, orange 0%, orange 50%, #1d911d 50%, #1d911d 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, orange), color-stop(50%, orange), color-stop(50%, #1d911d), color-stop(100%, #1d911d));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, orange 0%, orange 50%, #1d911d 50%, #1d911d 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, orange 0%, orange 50%, #1d911d 50%, #1d911d 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, orange 0%, orange 50%, #1d911d 50%, #1d911d 100%);
  /* IE10+ */
  background: linear-gradient(135deg, orange 0%, orange 50%, #1d911d 50%, #1d911d 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='orange', endColorstr='#1d911d',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

/** end of bit to generate **/
.calendar[data-weeks="4"] li {
  height: 15% !important; }

.calendar[data-weeks="6"] li {
  height: 13% !important; }

.calendar td.clicked a {
  color: orange; }

#mail-nav {
  font-size: 150%;
}

@media (min-width: 1300px){
      .calendarFlex {
          max-width: 33%;
      }
  }

@media (max-width: 1300px){
    .calendar {
        min-width: 200px;
        font-size: 14px;
    }
}
@media (max-width: 1024px){
    .calendarFlex {
        flex-basis: 48%;
    }
}
@media (max-width: 480px){
    .calendarFlex {
        flex-basis: 100%;
    }
}