html, body { height:100%; }
body {
 margin:0;
 padding:0;
 background-color:#DEDEDE;
 text-align:center;
 font-family:Ubuntu, Helvetica, sans-serif;
 font-size:18px;
}

a, a:visited {
 color:#C81400;
}
a:hover {
 color:#C81400;
 text-decoration:none;
}

h2 {
 margin:6px 10px 4px 10px;
 padding:0px;
 font-weight:bold;
 font-size:20px;
 line-height:32px;
}

p {
 margin:10px;
}

.noselect {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

#content {
 position:relative;
 margin:auto;
 padding:44px 0px 75px 0px;
 width:100%;
 max-width:1150px;
 min-height:100%;
 background-color:#FFFFFF;
 text-align:left;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

div#header {
 padding:4px;
 position:fixed;
 left: 0px;
 top: 0px;
 width:100%;
 background-color:#0088dd;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 z-index:10;
}
div#header h1 {
 margin:0px auto 0px auto;
 padding:2px 10px 3px 10px;
 font-weight:bold;
 font-size:22px;
 color:#ffffff;
 text-align:center;
 width:100%;
 max-width:1150px;
 line-height:31px;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
div#header h1 a, div#header h1 a:visited, div#header h1 a:hover {
 display:block;
 float:right;
 height:100%;
 text-decoration:none;
 font-weight:normal;
 color:rgba(255,255,255,0.5);
}

div#header span.spinner {
 display:inline-block;
 width:30px;
 height:30px;
 border-radius:15px;
 background-color:#ffffff;
 vertical-align:bottom;
 -webkit-animation: 0.5s linear 0s infinite alternate spin;
 animation: 0.5s linear 0s infinite alternate spin;
}
@-webkit-keyframes spin { from { opacity:1; } to { opacity:0; }  }
@keyframes spin { from { opacity:1; } to { opacity:0; }  }

div#footer {
 padding:4px 4px 2px 4px;
 position:fixed;
 left:0px;
 bottom:0px;
 width:100%;
 background-color:#0088dd;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
div#footer a, div#footer a:visited {
 display:inline-block;
 margin: 0px 8px 0px 8px;
 padding: 0px 8px 0px 8px;
 text-decoration:none;
 font-weight:normal;
 font-size:12px;
 color:#ffffff;
 opacity:0.6;
}
div#footer a:hover {
 text-decoration:underline;
}
div#footer a.selected, div#footer a.selected:visited, div#footer a.selected:hover {
 opacity:1;
}

div#footer a img {
 width:34px;
 vertical-align:middle;
}

div#panels {
 display:none;
 position:fixed;
 top: 0px;
 left: 0px;
 width:100%;
 height:100%;
 background-color:rgba(0, 0, 0, 0.4);
 z-index:100;
}

div#panels > div {
 display:none;
 position:absolute;
 margin: auto;
 padding:14px;
 top: 60px;
 left: 15px;
 width:90%;
 width:calc(100% - 30px);
 max-height:80%;
 max-height:calc(100% - 120px);
 background-color:#FFFFFF;
 border-radius:10px;
 drop-shadow:5px 5px rgba(0,0,0,0.4);
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 z-index:101;
}

table.list {
 margin:10px 0px 14px 0px;
 padding:0px;
 width:100%;
 background: -moz-linear-gradient(top, rgba(242,242,242,0) 0%, rgba(238,238,238,1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,0)), color-stop(100%,rgba(238,238,238,1)));
 background: -webkit-linear-gradient(top, rgba(242,242,242,0) 0%,rgba(238,238,238,1) 100%);
 background: -o-linear-gradient(top, rgba(242,242,242,0) 0%,rgba(238,238,238,1) 100%);
 background: -ms-linear-gradient(top, rgba(242,242,242,0) 0%,rgba(238,238,238,1) 100%);
 background: linear-gradient(to bottom, rgba(242,242,242,0) 0%,rgba(238,238,238,1) 100%);
 border-bottom:1px solid #0088dd;
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2f2f2', endColorstr='#eeeeee',GradientType=0 );
}
table.list tr[data-click] { cursor: pointer; }
table.list td {
 padding:6px 4px 7px 4px;
 line-height:24px;
}
table.list td:first-child { padding-left: 20px; }
table.list td:last-child { padding-right: 20px; }
table.list tr:first-child td {
 border-bottom:1px solid #0088dd;
 font-weight:bold;
 color:#555555;
}
table.list tr.subhead { 
 background-color:#0088dd;
 color:#ffffff;
}
table.list tr:not(:first-child) td {
 border-bottom:1px solid #CCCCCC;
}
table.list tr:last-child td { border-bottom: none; }

input:not([type="checkbox"]):not([type="radio"]), button, select {
 height:34px;
 box-sizing:border-box;
 font-size:18px;
}
input[type="text"], input[type="number"] { padding-left:5px; max-width:100%; max-width:calc(100% - 11px); }
::-webkit-input-placeholder { vertical-align:top; }
select { padding:0px 5px 0px 5px; }
select optgroup {
 font-style:normal;
}
input[type="checkbox"], input[type="radio"] { vertical-align:text-bottom; }
::-webkit-input-placeholder { color: rgba(0, 136, 221, 0.85); }
::placeholder { color: rgba(0, 136, 221, 0.85); }
textarea {
 margin:0px 6px 0px 5px;
 padding:0px 2px 0px 2px;
 width:100%;
 width:calc(100% - 11px);
 height:34px;
 font-family:Ubuntu,Helvetica,sans-serif;
 font-size:18px;
 line-height:34px;
 vertical-align:top;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
}
button {
 vertical-align:bottom;
}
button.tiny {
 width:25px;
 opacity:0.3;
 -moz-transition:opacity 0.2s;
 -webkit-transition:opacity 0.2s;
 transition:opacity 0.2s;
}
button.tiny:hover { opacity:1; }
button.large {
 font-weight:bold;
 padding-left:20px;
 padding-right:20px;
}

div.fieldtitle {
 display: inline-block;
 vertical-align: top;
 margin-bottom: 4px;
 padding: 2px 4px 0px 4px;
 width: 200px;
 min-height: 34px;
 line-height: 34px;
 text-align: right;
 font-weight: bold;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
div.fieldvalue, div.fieldwide {
 display: inline-block;
 vertical-align: top;
 margin-bottom: 4px;
 padding: 2px 4px 0px 4px;
 width: 80%;
 width: calc(100% - 200px);
 min-height: 34px;
 line-height: 34px;
 text-align: left;
 font-weight: normal;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 color: #999999;
}
div.fieldwide {
 display:block;
 margin:2px 4px 0px 4px;
 width:100%;
 width: calc(100% - 8px);
 text-align:left;
}
div.fieldwide > button {
 width:100%;
}
span.bold { color:#000000; }


#listtoright {
 position:absolute;
 left:0;
 width:0%;
 background:rgb(55,217,61);
 background:linear-gradient(90deg, rgba(55,217,61,1) 0%, rgba(55,217,61,1) 60%, rgba(55,217,61,0) 100%);
 text-align:left;
 color:#ffffff;
 font-weight:bold;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 overflow:hidden;
 pointer-events: none;
 -moz-transition: width 0.3s;
 -webkit-transition: width 0.3s;
 transition: width 0.3s;
}
#listtoright > div { margin:0px 4px 0px 32px; white-space: nowrap; }

#listtoleft {
 position:absolute;
 right:0;
 width:0%;
 background:rgb(236,5,66);
 background:linear-gradient(90deg, rgba(236,5,66,0) 0%, rgba(236,5,66,1) 40%, rgba(236,5,66,1) 100%);
 text-align:right;
 color:#ffffff;
 font-weight:bold;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 overflow:hidden;
 pointer-events: none;
 -moz-transition: width 0.3s;
 -webkit-transition: width 0.3s;
 transition: width 0.3s;
}
#listtoleft > div { margin:0px 32px 0px 4px; white-space: nowrap; }

div#players_overview {
 margin:10px 14px 5px 10px;
 text-align:center;
}
div#players_overview > div {
 display:inline-block;
 margin-right: 5px;
 width:10px;
 height:10px;
 border-radius:3px;
 background-color:#0088dd;
}
div#players_overview > div.due {
 background-color:rgba(236,5,66);
}

table[name="players"] tr[data-nbdue]:not([data-nbdue='0']) {
 background: #ffdddd;
 background: repeating-linear-gradient( -55deg, rgba(255,255,255,0), rgba(255,255,255,0) 10px, rgba(236,5,66,0.1) 10px, rgba(236,5,66,0.1) 20px );
 color:rgb(236,5,66);
}

table[name="players"] tr[data-dead]:not([data-dead='']) {
 color:rgb(236,5,66);
}

div.progressbar {
 position:relative;
 margin:5px 0px 5px 0px;
 width:100%;
 height:3px;
 background-color:#ff0036;
 border-radius:3px;
 overflow:hidden;
}
div.progressdone {
 width:0%;
 height:6px;
 background-color:#2572df;
}

@media (max-width: 480px) {
 div#header h1 {
  padding:4px 5px 4px 5px;
 }
 div.fieldtitle {
  margin-bottom:0px;
  padding:2px 10px 0px 10px;
  width:100%;
  text-align:left;
 }
 div.fieldvalue {
  padding:0px 10px 2px 10px;
  width:100%;
 }
}