/* General */
*{ user-select: none; -ms-user-select: none; -moz-user-select: moz-none; -webkit-user-select: none; }
body{ background: #FFF; color: #000; font-family: 'Lato', sans-serif; margin: 0px; padding: 0px; }
body, html{ height: 100%; width: 100%; }
.hidden{ display: none !important; }
.parent{ display: table; position: relative; }
.child{ display: table-cell; vertical-align: middle; }

.h-future, .h-current{ background: #9E0B0F; border: 1px solid #8D0A0E; padding: 3px; border-radius: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: #FFF; cursor: default; float: left; font-size: 10px; height: 13px; left: -22px; padding: 3px; padding-left: 5px; position: absolute; top: 41px; transform: rotate(-90deg); transform-origin: left top 0; width: 29px; }
.h-current{ background: #FFEBCC; border: 1px solid #FFD799; color: #8D0A0E; padding-left: 4px; }

/* Message */
#h-message{ background: #333; border-bottom: 2px solid #222; box-shadow: 0 2px 6px 4px rgba(51,51,51,0.4); height: 30px; padding: 5px; position: fixed; width: calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -moz-calc(100% - 10px); z-index: 1020; }
#h-options{ border-left: 2px groove #666; float: right; height: 30px; width: auto; }
.h-option{ background: #222; border: 1px solid #555; border-radius: 3px; cursor: pointer; height: 18px; margin: 3px; padding: 2px 4px; padding-top: 4px; text-align: center; width: 18px; }
.h-option:first-child{ margin-left: 10px; }
.h-option:hover{ background: #FFF; color: #000; text-shadow: -1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF; }
#h-counter{ background: #666; border: 1px solid #333; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; box-shadow: 0 1px 3px 2px rgba(51,51,51,0.4); color: #FFF; font-size: 12px; height: 18px; margin-left: 20%; padding-bottom: 2px; padding-top: 42px; position: fixed; text-align: center; text-shadow: -1px 0 #333, 0 1px #333, 1px 0 #333, 0 -1px #333; top: 0px; width: calc(60% - 2px); width: -webkit-calc(60% - 2px); width: -moz-calc(60% - 2px); z-index: 1010; }
#h-counter{ background: repeating-linear-gradient(0deg, #333, #333 1px, #444 1px, #444 2px); }

/* Search Box */
#h-search{ left: calc(50% - 95px); position: fixed; top: 5px; width: 200px; z-index: 1030; }
.h-search{ background: #FFF; border: 2px solid #222; border-radius: 3px; color: #000; font-size: 18px; height: 30px; padding-left: 5px; padding-right: 5px; width: 186px; }
.h-remove{ display: none; height: 16px; left: calc(50% - 130px); margin-top: 4px !important; position: fixed; padding: 1px 2px; width: 16px; }

/* Stage */
#stage{ height: 100%; width: 100%; z-index: 0; }

/* Container */
#h-container{ height: auto; padding: 10px; padding-top: 60px; width: calc(100% - 20px); z-index: 10; }
.inner-con{ background: #EEE; border: 1px solid #CCC; border-radius: 7px; box-shadow: 0 4px 4px #DDD; padding: 10px; }
.con{ background: #FFF; border: 2px solid #DDD; border-radius: 5px; height: auto; margin-top: 10px; width: calc(100% - 4px); z-index: 30; }

/* Lists */
ul{ list-style-type: none; -webkit-padding-start: 20px; -webkit-margin-before: 0; -webkit-margin-after: 0; margin: 0; padding: 0; }
li{ padding-left: 1em; text-indent: -.7em; }
li:before { color: #F90; font-size: 14px; font-weight: bold; content: '- '; }

/* Cards */
.card{ background: #EEE; border: 1px solid #DDD; border-bottom: 1px solid #CCC; border-radius: 3px; color: #000; cursor: pointer; height: auto; margin: 2px; margin-bottom: 6px; margin-left: 20px; position: relative; width: calc(100% - 44px); width: -webkit-calc(100% - 44px); width: -moz-calc(100% - 44px); z-index: 50; }
.card:hover{ border: 1px solid #F90; }
.card-container{ background: #CCC; border: 1px solid #AAA; border-radius: 3px; height: 0px; margin: 2px; margin-left: 32px; overflow: hidden; padding: 3px; width: calc(100% - 43px); width: -webkit-calc(100% - 43px); width: -moz-calc(100% - 43px); z-index: 50; }
.card.expanded{ border: 1px solid #999; border-bottom: 1px solid #888;  box-shadow: 0 2px 2px 2px rgba(0,0,0,0.1); }
.card-container.expanded{ background: #FFF; height: auto; }
.card-extra{ color: #000; height: 100%; line-height: 130%; float:left; padding-top: 33px; position: relative; padding: 5px; width: calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -moz-calc(100% - 10px); }
.card a{ color: #69F; position: relative; z-index: 110; }
.card-header{ height: 28px; width: 100%; }
.card .subject{ float: left; font-size: 16px; height: 20px; margin-left: 4px; overflow: hidden; padding-top: 3px; width: auto; }
.card .date{ background: #333; border: 1px solid #000; border-radius: 3px; color: #FFF; float: left; font-size: 12px; height: 19px; margin: 3px; padding-top: 3px; text-align: center; width: 120px; }
.card .tags{ float: right; }

/* Tags */
.tag, .person{ border-radius: 3px; box-shadow: inset 0 -11px rgba(255,255,255,0.1); color: #FFF; cursor: pointer; float: left; font-size: 14px; height: 16px; margin: 4px; padding: 3px 6px; text-align: center; width: auto; }
.person{ background: #64A; border: 1px solid #539; border-bottom: 1px solid #539; float: right; text-shadow: -1px 0 #539, 0 1px #539, 1px 0 #539, 0 -1px #539; }
.tag{ background: #197CAD; border: 1px solid #086B9C; border-bottom: 1px solid #075A8B; text-shadow: -1px 0 #075A8B, 0 1px #075A8B, 1px 0 #075A8B, 0 -1px #075A8B; }
.tag:hover, .person:hover{ background: #FFF; box-shadow: none; color: #000; text-shadow: none; }

/* Special Tags */
.h-special-outage{ background: #9E0B0F; border: 1px solid #8D0A0E; border-bottom: 1px solid #7C090D; text-shadow: -1px 0 #7C090D, 0 1px #7C090D, 1px 0 #7C090D, 0 -1px #7C090D; }

/* Buttons */
.hidden-label{ font-size: 0; height: 1px; overflow: hidden; display: block; }

/* Dividers */
.h-year{ color: #F90; font-size: 18px; font-weight: bold; height: 20px; padding: 0px 10px; width: calc(100% - 20px); }
.h-month{ color: #F90; height: 20px; margin-top: 5px; padding: 0px 20px; width: calc(100% - 40px); }

/* Icon */
.fa{ color: #FFC; font-size: 20px; text-shadow: -1px 0 #630, 0 1px #630, 1px 0 #630, 0 -1px #630; }
.fa-compress, .fa-expand, .fa-search{ color: #FFF; font-size: 16px; text-shadow: -1px 0 #333, 0 1px #333, 1px 0 #333, 0 -1px #333;  }
.fa-remove{ color: #F00; font-size: 16px; text-shadow: -1px 0 #900, 0 1px #900, 1px 0 #900, 0 -1px #900; }
.tag .fa-remove, .person .fa-remove{ border: 0px; font-size: 14px; margin: 0px; margin-right: 4px; }

/* More */
#h-more{ background: #EEE; border: 1px solid #DDD; border-radius: 3px; box-shadow: inset 0 -45px rgba(255,255,255,0.1); cursor: pointer; height: 55px; margin-bottom: 15px; margin-left: 25px; padding-top: 35px; width: calc(100% - 52px); width: -webkit-calc(100% - 52px); width: -moz-calc(100% - 52px); text-align: center; vertical-align: middle; }
#h-more:hover{ background: #FFF; border: 1px solid #CCC; }

@media screen and (max-width: 480px){
  .tags{ display: none; }
  .card.expanded .tags{ display: inline; float: left; position: relative; width: 100%; }
}
@media screen and (max-width: 768px){
  #h-search{ top: 44px; }
  #h-counter{ top: 34px; }
  .tags .person, .tags .tag{ font-size: 12px; }
}
@media screen and (min-width: 769px){
  #h-search{ top: 5px; }
  #h-counter{ top: 0px; }
}