@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/SourceCodePro-300.woff) format('woff');
}

body {
  background: #8ea6b7; /* Change background */ 
  font-family: "Source Code Pro", monospace;
  font-weight: 300;
  font-size: 14pt;
  min-width: 60em;
}

img { border:0; }
a { outline:0; }
main, figure, figcaption { display:block; }
pre, code { font-family: "Source Code Pro", monospace; }
header, main {
  -webkit-text-size-adjust: none;
}

h1, h2 {
  font-size: 1em;
  font-weight: normal;
}

pre.wrap {
  max-width: 100%;
  white-space: pre-wrap;
}

.quiet {
  opacity: .5;
}
p.wrap {
  width: 45em;
}

.hidden-until-hover {
  border: 1px dotted rgb(0, 0, 0);
  overflow: hidden;
  position: relative;
  padding: 0 .5em;
  transition: border-color 0s linear 5s;
}
.hidden-until-hover:before {
  content: "(hover to reveal)";
  position: absolute;
  opacity: .5;
  text-align: center;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  transition: width 0s linear 5s;
}
.hidden-until-hover > * {
  visibility: hidden;
  transition: visibility 0s linear 5s;
}
.hidden-until-hover:hover {
  transition: border-color 0s linear 1s;
  border-color: transparent;
}
.hidden-until-hover:hover:before {
  content: "( keep hovering )";
  transition: width 0s linear 1s;
  width: 0;
}
.hidden-until-hover:hover > * {
  transition: visibility 0s linear 1s;
  visibility: visible;
}

.warning:not(.warning-active) {
  transition: color 1s, opacity 1s;
}
.warning-active {
  color: #ff0000;
  opacity: 1;
}

header {
  white-space: nowrap;
  cursor: default;
  z-index: 100;
  margin-bottom: 2em;
}
header h1 {
  display: inline-block;
  margin: 0;
  padding-right: 10em;
  /* padding-left: 0px; */
}
header h1 a, header h1 span {
  display: inline-block;
  text-decoration: none;
  color: #FFC10D;
  text-shadow: 0 0 2px #FF8600, 0 0 5px #FF8600;
}
header h1 a:hover, header h1 a:focus {
  color: #FFC10D;
  text-shadow: 0 0 2px #FF8600, 0 0 5px #FF8600;
}
header h1.title-event .title-event-wrap {
  opacity: .33;
  white-space: pre;
}
header .user {
  display: inline-block;
  padding-left: 1em;
}
header nav {
  display: inline-block;
}
header nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}
header nav li {
  display: inline-block;
  padding: 0 .6em;
}
header nav a {
  display: inline-block;
  text-decoration: none;
  outline: none;
}

textarea {
  vertical-align: top;
}

label img {
  vertical-align: bottom;
  position: relative;
  top: -3px;
  margin-right: .3em;
}
input[type="radio"] { display: none; }
input[type="radio"] ~ span {
  cursor: pointer;
  display: inline-block;
}
input[type="radio"] ~ span:before {
  content: "( ) ";
}
input[type="radio"] ~ span:hover, input[type="radio"] ~ span:focus {
  background-color: #19193b;
}
input[type="radio"]:checked ~ span {
  color: #ffffff;
}
input[type="radio"]:checked ~ span:before {
  content: "(O) ";
}
input[type="checkbox"] { display: none; }
input[type="checkbox"] ~ span {
  cursor: pointer;
  display: inline-block;
}
input[type="checkbox"] ~ span:before {
  content: "[ ] ";
}
input[type="checkbox"] ~ span:hover, input[type="checkbox"] ~ span:focus {
  background-color: #19193b;
}
input[type="checkbox"]:checked ~ span {
  color: #ffffff;
}
input[type="checkbox"]:checked ~ span:before {
  content: "[X] ";
}
input[type="checkbox"]:disabled ~ span {
  opacity: .3;
  cursor: default;
}
input[type="checkbox"]:disabled ~ span:before {
  content: "[-] ";
}
input[type="checkbox"]:disabled ~ span:hover {
  background-color: transparent;
}

input[type="submit"] {
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  padding: 0;
  color: #009900;
  cursor: pointer;
}
input[type="submit"]:hover, input[type="submit"]:focus {
  color: #99ff99;
}
*::-moz-focus-inner {
  padding: 0;
  border: 0
}

.day-success {
  color: #ffff66;
  text-shadow: 0 0 5px #ffff66;
}

form#settings input[type="radio"] ~ span {
  min-width: 30em;
}
form#settings input[type="checkbox"] ~ span {
  min-width: 30em;
}

.calendar {
  cursor: default;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}
.calendar > span {
  color: #333333;
}
.calendar > a {
  text-decoration: none;
  color: #666666;
  outline: none;
  cursor: default;
}
.calendar a:hover, .calendar a:focus {
  background-color: #1e1e46;
  background-color: rgba(119,119,165,.2);
  cursor: pointer;
}
#calendar-countdown {
  padding-left: .5em;
  color: #000000;
}

.calendar .calendar-day { color: #666666; }
.calendar a .calendar-day { color: #000000; }
.calendar a .calendar-mark-complete,
.calendar a .calendar-mark-verycomplete { visibility: hidden; }
.calendar a.calendar-complete     .calendar-mark-complete,
.calendar a.calendar-verycomplete .calendar-mark-complete { visibility: visible; color: #ffff66; }
.calendar a.calendar-verycomplete .calendar-mark-verycomplete { visibility: visible; color: #ffff66; }

.calendar .calendar-day-new               { animation: anim-day-new 5s; }
.calendar .calendar-day-new .calendar-day { animation: anim-day-new-day 5s; }
@keyframes anim-day-new {
  0%   { color: #333333; text-shadow: 0 0 5px transparent; }
  25%  { color: #ffffff; text-shadow: 0 0 5px #ffffff; }
  100% { color: #666666; text-shadow: 0 0 5px transparent; }
}
@keyframes anim-day-new-day {
  0%   { color: #666666; text-shadow: 0 0 5px transparent; }
  25%  { color: #ffffff; text-shadow: 0 0 5px #ffffff; }
  100% { color: #cccccc; text-shadow: 0 0 5px transparent; }
}

.calendar-day {
  display: inline-block;
  width: 33.59px;
  text-align: right;
}