//style.less
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400|Oswald');

.big {
  margin-top: 20%;
}

.search {
  margin: 0 auto;
  width: 50%;
  display: block;
  font-family: Open Sans;
}

input.search {
  text-align: center;
  margin-bottom: 10px;
}

.bar {
  height: 10px;
  width: 100%;
  background-color: #96aa48;
  margin-bottom: 50px;
}

h1#title {
  font-size: 8rem;
  font-family: Oswald;
  letter-spacing: 0px;
  text-align: center;
  text-transform: uppercase;

  span {
    font-size: 3rem;
    letter-spacing: -2px;
    position: relative;
    left: -12px;
    top: -1px;
    -webkit-transform: rotate(-7deg);
    display: inline-block;

     > span {
       color: #96AA48;
       position: relative;
       left: -3px;
       top: 1px;
       display: inline-block;
       -webkit-transform: rotate(11deg);
    }
  }
}


div.schedule {
  display: table;
  margin: 10px auto;
  border: solid 1px #e1e1e1;
  font-family: Open Sans;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
    background-color: #e1e1e1;

    li {
      width: 25px;
      height: 25px;
      color: #FFF;
      font-family: Oswald;
      text-align: center;
      display: inline-block;
      overflow: hidden;
      -webkit-transition: 1s ease;

      &:hover {
        -webkit-transition: 1s ease;
        width: 200px;
      }

      &:first-child span {
        background-color: #0C5489;
      }

      &:last-child span {
        background-color: #C41824;
      }

      span {
        width: 25px;
        height: 25px;
        display: inline-block;
        background-color: #96aa48;
      }

      a {
        text-decoration: none;
        color: #000;
      }
    }
  }

  div.day {
    float: left;

    div.hour {
      width: 150px;
      height: 20px;
      border-bottom: solid 1px #DDD;
      padding: 12px 15px;
      border-bottom: 1px solid #e1e1e1;
      border-left: 1px solid #FFF;
      position: relative;

      a {
         text-decoration: none;
         color: inherit;
      }

      span {
        display: inline-block;
        width: 33%;

        &.sub_2 {
           position: relative;
           top: -15px;
        }
      }

      .teacher {
        text-align: left;
      }

      .chamber {
        text-align: center;
      }

      .course {
        text-align: right;
      }

      &.changed {
        color: red !important;
      }

      &.title {
        text-align: center;
        background-color: #E1E1E1;
        border-color: #E1E1E1;

        span {
          text-align: center;
          width: 100%;
        }
      }

      .time {
          font-size: 10px;
          color: #665;
          width: 100%;
          position: absolute;
          top: 2px;
          left: 5px;
      }

      .free {
        .changed;
        text-align: center;
        width: 100%;
      }
    }
  }
}

.links {
    width: 100%;
    position: fixed;
    bottom: -90px;
    transition: ease .5s;

    &:hover {
        bottom: 0px;
        transition: ease .5s;
    }

    div {
        height: 100px;
        width: calc(100% / 3);
        float: left;


        a {
            text-decoration: none;
            height: 100%;
            width: 100%;
            display: inline-block;
            color: #FFF;
            text-align: center;
            font-size: 60px;
        }
    }
}

@import "mobile";