@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:400);

h1, h2, h3, h4, h5, h6, a.logo, legend {
 font-family: 'Josefin Slab', sans-serif;
}

/* Flat style check box by Andrew Penry */

:root .flat-check input[type=checkbox] {
 visibility: hidden;
}

:root .flat-check {
 width: 28px;
 height: 28px;
 margin: 0 auto;
 position: relative;
 background: gray;
 border-radius: 8px;
}

:root .flat-check label {
 cursor: pointer;
 position: absolute;
 width: 26px;
 height: 26px;
 left: 1px;
 top: 1px;
 background: white;
 border-radius: 8px;
}

:root .flat-check label:after {
 opacity: 0;
 content: '';
 position: absolute;
 width: 24px;
 height: 24px;
 background: #5cb85c;
 border-radius: 8px;
 top: 1px;
 left: 1px;
}

:root .flat-check label:hover::after {
 opacity: 0.3;
}

:root .flat-check input[type=checkbox]:checked + label:after {
 opacity: 1;
}


/* Sticky footer */
html,
body {
 height: 100%;
}
#wrap {
 min-height: 100%;
 margin: 0 auto -60px;
 padding: 0 0 60px;
}
footer {
 height: 60px;
 background-color: #f5f5f5;
}
@media (max-width: 767px) {
 footer {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
 }
}


.header {
 padding-top: 1em;
}
.copy-notice {
 margin: 20px 0;
}
h1 small {
 white-space: nowrap;
}
a.logo {
 font-size:62px;
}
legend {
 font-size:2em;
}

.nav>li.nav-label {
 position: relative;
 display: block;
 padding: 10px 15px;
}

/* Front Page */
.summary-p {
 margin-top:1em;
}

/* Journal Question Edit Form */

#journal_edit th:nth-child(2) {
 padding-left:1.2em;
}
#journal_edit th+th+th {
 text-align: center;
}
#journal_edit td:first-child {
 width:47px;
 padding-top: 12px;
 white-space: pre;
}
#journal_edit td:first-child i.icon-move {
 display:none;
}
#journal_edit td+td+td {
 width:28px;
}
#journal_edit input[type="text"] {
 width: 100%;
 padding: 3px .5em;
 border: 1px solid gray;
 height:28px;
 border-radius: 6px;
}
#journal_edit tbody tr:first-child td:first-child i.icon-arrow-up {
 visibility: hidden;
}
#journal_edit tbody tr:last-child td:first-child i.icon-arrow-up {
 visibility: hidden;
}
@media (min-width: 768px) {
 #journal_edit td:first-child {
   width:30px;
 }
 #journal_edit td:first-child i.icon-arrow-up {
   display:none;
 }
 #journal_edit td:first-child i.icon-arrow-down {
  display:none;
 }
 #journal_edit td:first-child i.icon-move {
  display:inline;
 }
}



/* Calendar */

ul.calendar, ul.calendar *	{margin:0; padding:0; display:inline;}
ul.calendar {
 width:100%;
 display:block;
}
ul.calendar li	{
 list-style:none;
}
/* Day */
ul.calendar li li	a{
 width:14%;
 height:5em;
 float:left;
 margin:.142%;
 padding:.5em;
 border-radius:6px;
 background-color: #5bb85d;
 overflow:hidden;
 color: #333;
}
ul.calendar li li	a:hover{
 text-decoration: none;
 background-color: #63da77;
}
ul.calendar li li.today	a{
 background-color:orange;
}
ul.calendar li li.today	a:hover{
 background-color: #ffd300;
}


ul.calendar span.percent {
 display: block;
 width:100%;
 text-align: center;
 font-size: 1.5em;
 color:white;
 font-family: 'Josefin Slab', sans-serif;
}
ul.calendar li.day-labels li {
 width:14%;
 height:2em;
 float:left;
 margin:.142%;
 padding:0;
 text-align: center;
 border-radius:0;
 background-color: white;
 overflow:hidden;
}
ul.calendar li.day-labels li span {
 display: none;
}
ul.calendar li.last-month li a,
ul.calendar li.next-month li a {
 background-color: #cdcdcd;
 color: #999;
}
ul.calendar li.last-month li a:hover,
ul.calendar li.next-month li a:hover {
 background-color: #e4e4e4;
}
.calendar-navigation a {
 font-size: 5em;
}
.calendar-navigation a:hover {
 text-decoration: none;
}
.calendar-navigation div+div {
 text-align: right;
}

/* Day Entry */

.switch-label {
 margin-left:1em;
 font-weight:normal;
}


.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

#help {
 padding-bottom: 1em;
}
#help h1{
 margin-top: 0;
}

/* Extra small devices (phones, up to 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
 ul.calendar li.day-labels li	span {
  display: inline;
 }
 ul.calendar li li	a{
  height:6.5em;
 }
 ul.calendar span.percent {
  font-size: 2.4em;
 }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
 ul.calendar li li	a {
  height:8em;
 }
 ul.calendar span.percent {
  font-size: 3.6em;
 }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
 ul.calendar li li a	{
  height:9em;
 }
 ul.calendar span.percent {
  font-size: 4em;
 }
}