@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i');

HTML, BODY {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100%;
}

BODY { color: #525252; }
BODY * { font-family: Lora; }

SELECT { height: 2.65rem; }
FOOTER { position: relative; background-image: url('/images/skyline.svg'); background-position: bottom; background-repeat: no-repeat; background-size: 100%; height: 26vw; }

HTML.is-reveal-open { overflow: inherit; }
BODY.is-reveal-open { overflow: hidden; }

H1 { text-align: center; line-height: 1em; font-size: 1.25rem; }
H2 { text-align: center; line-height: 1em; }
H3 { text-align: center; line-height: 1.5em; font-size: 1.25rem; font-style: italic; }
I.fa { margin-right: 0.25em; }
TR.event { cursor: pointer; }
TR.user { cursor: pointer; }
TR.perfect { background-color: red !important; }
TR.match { background-color: orange !important; }
TD.location { display: none; text-align: center; }
TD.time { text-align: center; white-space: nowrap; }
TD.status { text-align: center; white-space: nowrap; }
TD.name DIV.location { font-style: italic; font-size: 0.85em; margin-top: 0.25em; }
TD.availability { text-align: right; }
DIV.myavailability { margin: 1em 0; }
DIV.myavailability > DIV { text-align: center; padding: 1em 0; }
DIV.myavailability > DIV:hover { background-color: orange; color: white; }
DIV.myavailability > DIV > I { margin: 0.25em 0; }

DIV.login { margin-top: 1.75em; }
DIV.selector { margin: 1em 0; }
DIV.users { border-bottom: solid 3px #8a8a8a; margin-bottom: 1em }

SPAN.long { display: none; }
SPAN.short { display: inline; }

DIV.name { padding: 0 0.75em; }
DIV.top-bar { margin-bottom: 1em; }

TABLE.users TR.user { background-color: #f1f1f1; border-bottom: solid 2px #fff !important; }
TABLE.users TD.name { width: 100%; }

TD.availability { vertical-align: middle; padding: 0; }
TD.availability DIV.button-group { margin-bottom: 0; }
TD.availability DIV.button-group BUTTON { margin-bottom: 0; }
TD.availability BUTTON { display: none; }
TD.availability BUTTON:hover { background-color: orange; }
TD.availability BUTTON I { margin-right: 0; }
TD.timestamp, DIV.timestamp { white-space: nowrap; font-size: 0.75em; line-height: 1em; color: #8a8a8a; }

DIV.past DIV.myavailability { display: none; }

DIV.past DIV.attended TD.availability BUTTON.notattended { display: inline-block; }
DIV.past DIV.required TD.availability BUTTON.attended { display: inline-block; }
DIV.past DIV.notrequired TD.availability BUTTON.attended { display: inline-block; }
DIV.past DIV.available TD.availability BUTTON.attended { display: inline-block; }
DIV.past DIV.maybe TD.availability BUTTON.attended { display: inline-block; }
DIV.past DIV.unavailable TD.availability BUTTON.attended { display: inline-block; }
DIV.past DIV.invited TD.availability BUTTON.attended { display: inline-block; }

DIV.upcoming DIV.required TD.availability BUTTON.previous { display: inline-block; }
DIV.upcoming DIV.notrequired TD.availability BUTTON.previous { display: inline-block; }
DIV.upcoming DIV.available TD.availability BUTTON.required { display: inline-block; }
DIV.upcoming DIV.available TD.availability BUTTON.notrequired { display: inline-block; }
DIV.upcoming DIV.available TD.availability BUTTON.previous { display: inline-block; }
DIV.upcoming DIV.maybe TD.availability BUTTON.required { display: inline-block; }
DIV.upcoming DIV.maybe TD.availability BUTTON.notrequired { display: inline-block; }
DIV.upcoming DIV.maybe TD.availability BUTTON.previous { display: inline-block; }
DIV.upcoming DIV.unavailable TD.availability BUTTON.available { display: inline-block; }
DIV.upcoming DIV.unavailable TD.availability BUTTON.maybe { display: inline-block; }
DIV.upcoming DIV.unavailable TD.availability BUTTON.previous { display: inline-block; }
DIV.upcoming DIV.invited TD.availability BUTTON.available { display: inline-block; }
DIV.upcoming DIV.invited TD.availability BUTTON.maybe { display: inline-block; }
DIV.upcoming DIV.invited TD.availability BUTTON.unavailable { display: inline-block; }

DIV.past DIV.users TD.availability BUTTON.attended { display: inline-block; }
DIV.upcoming DIV.users TD.availability BUTTON.available { display: inline-block; }
DIV.upcoming DIV.users TD.availability BUTTON.unavailable { display: inline-block; }
DIV.upcoming DIV.users TD.availability BUTTON.invited { display: inline-block; }

DIV.padlock { display: none; text-align: center; }
DIV.locked DIV.padlock { display: block; background-color: #ffae00; color: #ffffff; margin: 1em 0; }
DIV.padlock SPAN.timestamp { font-size: 0.75em; line-height: 1em; color: #8a8a8a; }

DIV.search { position: relative; }
DIV.search INPUT { text-indent: 36px;}
DIV.search I.fa-search { position: absolute; top: 7px; left: 7px; font-size: 1.5em; }

@-webkit-keyframes orange-fade {
   0% { background: orange; }
   100% { background: #f1f1f1; }
}

@keyframes orange-fade {
   0% { background: orange; }
   100% { background: #f1f1f1; }
}

TR.new {
   -webkit-animation: orange-fade 0.75s ease-in 1;
   animation: orange-fade 0.75s ease-in 1;
}

DIV.user { line-height: 42px; }
DIV.status DIV.title { margin: 2px 0; background-color: #8a8a8a; color: white; padding: 0.5em 10px; text-align: center; }
DIV.status DIV.title SPAN.badge { background-color: white; color: #8a8a8a; }
DIV.type { text-align: center; margin-bottom: 1em; }
SPAN.label { border-radius: 2px; }
SPAN.label.paid { background-color: purple; }
SPAN.label.practice { background-color: orange; }
SPAN.label.wedding { background-color: blue; }
SPAN.label.quarter { background-color: green; }
SPAN.label.peal { background-color: pink; }
SPAN.badge { vertical-align: middle; font-weight: bold; }
DIV.datetime { width: 48%; text-align: center; background-color: #f1f1f1; padding: 0.5em; }
DIV.datetime.date { float: left; }
DIV.datetime.time { float: right; }
DIV.user { clear: both; margin: 2px 0; background-color: #f1f1f1; }
A.user { white-space: nowrap; cursor: pointer; }
A.user:hover { background-color: orange; color: white; }
DIV.date { text-align: center; }
DIV.date SPAN.weekday { display: block; font-size: 0.65em; line-height: 1.2em; text-transform: uppercase; }
DIV.date SPAN.day { display: block; font-size: 1.5em; line-height: 1em; font-weight: 700; }
DIV.date SPAN.month { display: block; font-size: 0.65em; line-height: 1.2em; text-transform: uppercase; }
LABEL.middle { vertical-align: middle; }
TD.timestamp { display: none; }

DIV.top-bar { position: relative; }
DIV.top-bar H1 { margin: 0 auto; line-height: 1.9em; }
DIV.top-bar UL.menu LI DIV { padding: .7rem 1rem; line-height: 1rem; }
DIV.top-bar DIV.me { position: absolute; top: 0; right: 0.5em; background-color: #1779ba; padding: 0.15em 0em 0.1em 0.35em; font-size: 0.85em; }
DIV.top-bar DIV.me A { color: white; }

BODY.list { font-size: 11.85px; width: 210mm; margin: 1em 0 0 0; position: relative; }
BODY.list H1 { font-size: 2em; line-height: 1.15em; margin-bottom: 0.1em; }
BODY.list H2 { font-size: 1.5em; }
BODY.list TABLE { border: none !important; margin: 0; border-spacing: 0; border-collapse: separate; }
BODY.list TABLE TR TD { background-color: transparent; border-spacing: 0; }
BODY.list TABLE TBODY TR:nth-child(even) { background-color: transparent; border: none; }
BODY.list TD { padding: 0.1em; margin: 0; line-height: 1.125em; }
BODY.list TD.date { width: 15mm; text-align: center; }
BODY.list TD.time { width: 25mm; text-align: center; }
BODY.list TD.location { width: 50mm; display: table-cell; text-align: center; }
BODY.list SPAN.unpaid { font-size: 0.85em; font-style: italic; }
BODY.list FOOTER { display: none; }
BODY.list DIV.footer { line-height: 1.15em; margin-top: 0.75em; font-size: 1.25em; }
BODY.list DIV.footer DIV.general { font-size: 0.75em; }
BODY.list DIV.timestamp { font-size: 0.65em; position: absolute; top: -1em; right: 0.25em; }

BODY.list TABLE.ticksheet { border: solid 1px !important; border-collapse: collapse; }
BODY.list TABLE.ticksheet TR TD { border: solid 1px !important; }
BODY.list TABLE.ticksheet TR TD.person { font-size: 14px; width: 200px; padding: 12px 6px; }
BODY.list TABLE.ticksheet TR TD.tick { width: 50px; }

@media screen and (min-width: 520px) {
    H1 { font-size: 1.85rem; }
    TD.timestamp { display: table-cell; }
    SPAN.long { display: inline; }
    SPAN.short { display: none; }
    TD.location { display: table-cell; }
    TD.name DIV.location { display: none; }
    TD.status { width: 150px; }
    DIV.top-bar DIV.me { padding: 0.15em 0em 0.1em 0.4em; }
}

DIV.site {
  margin: auto;
  background-color: #FFF;
}

.edit-button, .edit-button.medium {
    right: 5rem;
    top: .5rem;
    font-size: 1.35em;
    line-height: 1.5em;
    padding: 0 0.15rem;
}

.edit-button {
    position: absolute;
    color: #8a8a8a;
    cursor: pointer;
}

.edit-button:focus, .edit-button:hover {
    color: #0a0a0a;
}

.delete-button, .delete-button.medium {
  right: 2.5rem;
  top: .5rem;
  font-size: 1.35em;
  line-height: 1.5em;
  padding: 0 0.15rem;
}

.delete-button {
  position: absolute;
  color: #8a8a8a;
  cursor: pointer;
}

.delete-button:focus, .delete-button:hover {
  color: #0a0a0a;
}

.close-button {
  padding-left: 0.5rem;
}

DIV.invited > DIV.title > I:before, BUTTON.invited > I:before, I.invited:before { content: '\F128'; } /* fa-question */
DIV.available > DIV.title > I:before, BUTTON.available > I:before, I.available:before { content: '\F256'; } /* fa-hand-paper-o */
DIV.unavailable > DIV.title > I:before, BUTTON.unavailable > I:before, I.unavailable:before { content: '\F088'; } /* fa-thumbs-o-down */
DIV.maybe > DIV.title > I:before, BUTTON.maybe > I:before, I.maybe:before { content: '\F11A'; } /* fa-meh-o */
DIV.required > DIV.title > I:before, BUTTON.required > I:before, I.required:before { content: '\F00C'; } /* fa-check */
DIV.notrequired > DIV.title > I:before, BUTTON.notrequired > I:before, I.notrequired:before { content: '\F00D'; } /* fa-times */
DIV.attended > DIV.title > I:before, BUTTON.attended > I:before, I.attended:before { content: '\F058'; } /* fa-check-circle */
DIV.notattended > DIV.title > I:before, BUTTON.notattended > I:before, I.notattended:before { content: '\F057'; } /* fa-times-circle */
DIV.locked > DIV.title > I:before, BUTTON.locked > I:before, I.locked:before { content: '\F023'; } /* fa-lock */

I.grey { color: rgba( 255, 255, 255, 0.5 ); }
I.email, I.alpha, I.timestamp, I.list { cursor: pointer; }
I.email:hover, I.alpha:hover, I.timestamp:hover, I.list:hover { color: white; }

DIV.lastattended { text-align: center; font-size: 0.75em; }
DIV.recurrence-switch { text-align: center; padding: 0.425em 0; }
DIV.recurrence { height: 0; overflow-y: hidden; }
I.recurrence { cursor: pointer; }

DIV.timestamp { text-align: center; line-height: 1.35em; }