html {
  height: 100%;
}
body {
  background: #eee;
  font-family: Segoe UI;
  font-size: 1em;
  color: #000;
  height: 100%;
  margin: 0;
  padding: 0;
  transition:all 1s ease 0s;
  -moz-transition:all 1s ease 0s;
  -webkit-transition:all 1s ease 0s;
}
a {
outline:none;
}

.box {
  background: #fff;
  box-shadow: 0 0 30px #ddd;
}

#calendar-wrap {
  padding-right: 35px;
  float: left;
  z-index: 1;
  overflow: hidden;
  transition:all 1s ease 0s;
  -moz-transition:all 1s ease 0s;
  -webkit-transition:all 1s ease 0s;
}
  #calendar {
    position: relative;
    margin: 15px;
  }
  #stats {
    color: #aaa;
    line-height: 40px;
    font-size:14pt;
  }
  #calendar-title {

    margin-bottom: 10px;
    float: left;
    width: 40%;
    font-family:Segoe UI Light;
    color: rgb(0, 114, 198);
    transition:all 1s ease 0s;
    -moz-transition:all 1s ease 0s;
    -webkit-transition:all 1s ease 0s;
  }
  #time {
    color: #999;
  }

table {
  width: 100%;
  height: 80%;
  margin-top: -20px;
  border-spacing: 0;
}
thead td {
  font-size: 11px;
  text-transform:uppercase;
  color: rgb(102, 102, 102);

  height: 40px;
}
tbody td {
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #ddd;
  padding: 10px;
  overflow: hidden;
}
thead td {
  border-bottom: 1px solid #ddd;
}
tbody tr td:nth-child(1) {
  border-left: 1px solid #ddd;
}

.day {
  background: #fff url('w.png') repeat-x bottom left;
  overflow: hidden;
  cursor: pointer;
}
.day div {
  position: relative;
}
.day:hover {
  background: #fff;
}
.day .d {
  position: absolute;
  top: 0;
  right: 0;
}
.selected .d {
  text-decoration: underline;
}
.today  {
  background: #DFEDFA;
  border-top:3px solid #0072C6;
}
  .marked .d {
    font-weight: bold;
  }
#btn-previous {
  width:32px;
  height:32px;
  padding:0px !important;
  background-image:url(l-light.png) !important;
  background-color:transparent !important;
  vertical-align:middle;
  opacity:0.8;

}
#btn-next {
  width:32px;
  height:32px;
  padding:0px !important;
  background-image:url(r-light.png) !important;
  background-color:transparent !important;
  vertical-align:middle;
  opacity:0.8;
}
#btn-previous:hover , #btn-next:hover {
  opacity:1;
}
#btn-today {
  padding:0px !important;
  background-color:transparent !important;
  font-size:14pt !important;
  vertical-align:middle;
  margin-left:50px;
  margin-right:50px;
  color:#000;
  transition:all 2s ease 0s;
  -moz-transition:all 2s ease 0s;
  -webkit-transition:all 2s ease 0s;

}
.day .add {
  position: absolute;
  top: 0px;
  left: 0px;
  line-height: 16px;
  width: 16px;
  height: 16px;
  opacity: 0;
  background-image:url(plus-light.png);
  background-size:16px 16px;
}
  .day ul {
    position: absolute;
    font-size: 11px;
    top: 25px;
    width: 100%;
  }
    .day li {
      padding: 2px;
      width: 100%;
      margin-bottom: 1px;
      overflow: hidden;
      height: 14px;
    }
  .day ul .time {
    margin-right: 5px;
  }


#diary-wrap {
  border-left: 1px solid #ddd;
  float: left;
  width: 30%;
  display: none;
  transition:all 1s ease 0s;
  -moz-transition:all 1s ease 0s;
  -webkit-transition:all 1s ease 0s;
}
  #diary-title {
    float: left;
    color: rgb(0, 114, 198);
    font-family:Segoe UI Light;
  }
  #diary-close {
    float: left;
    margin: 1px 15px 10px 0;
    background-image:url(close-light.png);
    width:32px;
    height:32px;
  }

  #diary-wrap .content {
    margin: 15px;
  }
  .compact #diary-wrap {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    margin-left: 40px;
  }
  .compact #calendar-title {
    float: none;
  }
  .compact #controls {
    float: none;
  }
#diary {
  font-size: 12px;
  margin: 15px;
  transition:all 1s ease 0s;
  -moz-transition:all 1s ease 0s;
  -webkit-transition:all 1s ease 0s;
}
  #diary li {
    margin-bottom: 3px;
  }
  #diary .time {
    background: #bbb;
    color: #fff;
    padding: 2px;
    display: block;
    width: 100px;
    float: left;
    margin-right: 15px;
  }
    #diary .time:hover {
      background: #000;
    }
  #diary .desc {
    display: inline-block;
    padding: 0 0 3px 0;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
  }

#dialog {
  background: #fff url('w.png') repeat-x bottom left;
  display: none;
  padding: 15px 25px;
  position: absolute;
  z-index: 10;

  box-shadow: 0 0 30px #aaa;
}
  #dialog-close {
    float: right;
    margin: -5px -15px 10px 10px;
    background-image:url(close-light.png);
    width:32px;
    height:32px;
  }
  #dialog .target {
    display: none;
  }


  #add #event-description {
    width: 90%;
  }
  #add label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  #add p.time {
    margin-bottom: 10px;
  }
  #add .label {
    font-size: 11px;
    font-weight: normal;
    display: inline-block;
    margin-right: 10px;
  }
  #add #event-label input {
    padding: 0;
  }
  #add .buttons {
    margin-top: 30px;
  }
  #event-tweet,
  #event-delete {
    float: right;
    display: none;
    margin-left: 5px;
  }
  #event-tweet {
    background-image: url('t.png');
    background-repeat: no-repeat;
    background-position: 3px 9px;
    padding-left: 22px;
  }

  #ical-data {
    margin-top: 15px;
    width: 100%;
    font-size: 11px;
    height: 250px;
    border:1px solid #EBEBEB;
    transition:all 1s ease 0s;
    -moz-transition:all 1s ease 0s;
    -webkit-transition:all 1s ease 0s;
  }

#controls {
  float: right;
  margin-top: 8px;
}
  #controls li {
    display: inline-block;
    margin-left: 5px;
  }
  #controls a {
    display: inline-block;
    padding: 5px 12px;
  }
  #controls .sep {
    margin-right: 35px;
  }
  .button {
    border: 0;
    margin: 0;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
  }


#credit {
  background: #eee;
  border-radius: 3px;
  padding: 3px 5px;
  margin-top: 15px;
  display: inline-block;
}

/* ____________ */
.label {
  padding: 3px;
  color: #fff !important;
}
.important {
  background: #ff0000 !important;
}
.todo {
  background: #3366cc !important;
}
.personal {
  background: #35A200 !important;
}
.work {
  background: #D89700 !important;
}
.misc {
  background: #48BFF2 !important;
}

.clear {
  clear: both;
}

.info {
  font-size: 12px;
  color: #666;
}

.round {
  display: block;
  width: 20px;
  height: 20px;

  border: 3px solid #000;
  border-radius: 20px;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
}
  .round:hover {
    border-color: #3366cc;
    color: #3366cc;
  }

h1, h2, h3, h4 {
  margin: 0 0 25px 0;
  font-weight: normal;
}
a {
  color: #000;
  text-decoration: none;
}
input, select {
  padding: 10px;
  font-family:Segoe UI Light;
  font-size:14pt;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}



/* ___________ colour schemes */
.dark {
  background: #414141;
  color: #FFF;
  transition:all 2s ease 0s;
}
.dark #time {
  color: #FFF;
}
.dark #stats {
  color: #666;
}
.dark .box {
  background: #212121;
  box-shadow: 0 0 30px #111;
}
.dark #calendar-title , .dark #diary-title {
  color: #FFF;
}
.dark #dialog {
  background: #212121;
  border: 1px solid #444;
  box-shadow: 0 0 30px #000;
}
.dark #diary-wrap {
  border: 0;
  border-right: 1px solid #1e1e1e;
}


.dark .round {
  border-color: #ff4800;
  color: #ff4800;
}
  .dark .round:hover {
    border-color: #aaa;
    color: #aaa;
  }
.dark .day {
  background: #191919;
}
.dark .day .add {
  background-image:url(plus.png);
  background-size:16px 16px;
}
.dark tbody td,
.dark thead td,
.dark tbody tr td:nth-child(1) {
  border-color: #2e2e2e;
}
.dark  #diary .time {
  background: #444;
  color: #ccc;
}
.dark #diary .desc {
  border-color: #444;
}

.dark #credit {
  background: #111;
}
.dark #credit a {
  color: #ddd;
}
.dark .today  {
  background: #333;
}
.dark .info {
  color: #999;
}
.dark #ical-data {
  background: #222;
  color: #aaa;
  border: 1px solid #333;
}
.dark .button {
  background: #666;
}
.dark #dialog-close , .dark #diary-close {
  background-image:url(close.png);
}
.dark #btn-today {
  color:#FFF;
}
.dark #btn-previous {
  background-image:url(l.png) !important;
}
.dark #btn-next {
  background-image:url(r.png) !important;
}