@import 'mixins';

#calendar {
   margin: 0 1em;
}

.month{
  width: 25%;
  float: left;
  .month-inner {
    margin: 1em;
    border: solid 1px #cccccc;
    background-color: $darkshade;
  }
  &.active-month .month-inner{
    -moz-box-shadow: 0 0 7px 7px #88D5F2;
    -webkit-box-shadow: 0 0 7px #88D5F2;
    box-shadow: 0 0 7px 7px #88D5F2;
    h4{
      text-shadow: none;
    }
    .cal-header li{
      color: white;
    }
    .cal-body li.active-day a{
      background-color: lightblue;
      color: white;
    }
  }

  h4{
    font-size: 1em;
    font-weight: bold;
    margin: 0.125em 0.125em 0.25em 0.25em;
    text-shadow: rgba(255, 255, 255, 0.8) 1px -1px 0;
  }

  ul.days{
    margin-bottom: 0.125em;
  }

  ul{
    overflow: hidden;
	z-index:1000;
	position:relative;
  }

  .cal-header {
    .cal-header-inner{
      padding: 2px 4px;
    }

    li{
      color: #989298;
      text-align: center;
      font-size: 0.625em;
      font-weight: bold;
      width: 14.285714285714286%;
      float: left;
    }
  }
  .cal-body li{
    &.hit-day a{
      background-color: orange !important;
      color: white;
    }

    &.active-day.hit-day a{
      color: black;
    }

    a{
      font-size: inherit;
      font-decoration: none;
      display: block;
    }
    cursor: arrow;
    font-size: 0.6875em;
    font-weight: bold;
    width: 14.285714285714286%;
    height: 2.5em;
    line-height: 2.5em;
    background-color: white;
    /* border: solid 1px #cccccc; */
    border-bottom: 0;
    border-left: 0;
    float: left;
    text-align: center;
    &.disabled{
      background-color: $lightshade;
      color: #bbbbc0;
    }
  }
}

/* screens */

/* large resolution */

@media only screen and (min-width: 1500px){
  body {
    font-size: 120%;
  }

  .month {
    width: 25%;
  }
}

/* normal resolution */
@media only screen and (min-width: 1060px) and (max-width: 1499px) {
  body {
    font-size: 120%;
  }

  .month {
    width: 33.3%;
  }
}

/* tablet portrait */
@media only screen and (max-width: 1059px) {
  body {
    font-size: 120%;
  }

  .month {
    width: 50%;
  }
}
/* mobile portrait */
@media only screen and (max-width: 617px) {
  body {
    font-size: 150%;
  }

  #calendar, .month .month-inner {
    margin: 0;
  }

  .month {
    width: 100%;
  }
}
@media only screen and (max-width: 320px) {
  h3#logo {
    float: none;
    text-align: center;
  }

  header {
    height: 2.5em;
  }
  header nav {
    float: none;
    text-align: center;
  }
}
