#LoggedInUserName { position: absolute; top: 5px; right: 5px; padding: 0.5ex 1ex; border: 1px #000 solid; border-radius: 5px; }

nav { padding-left: 5px; background-color: #ffffff; border-bottom: 1px #000000 solid; z-index: 9 }
nav ul { padding: 0; margin: 0 }
nav ul li { display: inline-block; border: 1px #000 solid; background-color: #fc0; margin: 2px; margin-bottom: -1px; position: relative }
nav ul li a { background: url(../images/curve-tl.png) top left no-repeat; margin: -1px }
nav ul li a::after { content: " "; position: absolute; top: -1px; right: -1px; width: 20px; height: 20px; background: url(../images/curve-tr.png) top right no-repeat }
nav ul li.active { border: 1px #000 solid; background-color: #fff; border-bottom: 0px #fff none; position: relative; top: 1px }
nav ul li:hover { background-color: #fea }
nav ul li a { padding: 0.5ex 1ex; color: #000; display: block; text-align: center }
a { text-decoration: none }
a:hover { text-decoration: underline }
nav span.count { border-radius: 50%; background-color: #ff3333aa; padding: 1ex; margin-left: 1ex; }
nav span.count:empty { display: none; }

section { position: relative; border-radius: 5px; }
section#sentmailouts { margin-left: 5ex; padding: 0 1ex; }

#content { border: 1px #000 solid; margin-top: 0px; padding: 0.5ex 1ex 1ex 1ex }

iframe { min-width: 425px; min-height: 200px; margin: 0px; padding: 0px; border: 0px #000 none }
iframe.unbounded { width: 100%; min-height: 0 }
fieldset.liquidblock { display: inline-block }
fieldset.fixedblock { display: block; max-width: 470px }
.insetBox { float: right; }

a.para { color: #000 }
textarea { font-family: inherit }

#assignment_details { border-top: 1px #000 solid; margin-top: 3ex }

#searchDiv { float: right; width: 270px; overflow-y: auto; padding: 0px 5px }
#results { border-collapse: collapse; margin-top: 10px }
#templatehelp {
  max-width: 400px;
  padding: 1ex;
  margin: 2ex;
  border: 1px #000 solid;
  color: #000;
  background-color: #ebebeb;
}
.pageLabel { position: absolute; top: 5px; right: 5px; padding: 1ex; background-color: #aaaaff }

#availability th, #availability td { width: 100px; }
#availability label { display: inline-block; width: 45px; padding: 0px; margin: 0px; text-align: center; padding-top: 3px; padding-bottom: 3px; }
#availability .assignment { background-color: #ff0; }
#availability .assignment input { visibility: hidden; }
#availability label.unchecked { background-color: #f33; }
#availability label.checked { background-color: #3f3; }

.printsize { width: 19cm }

table.bordered td, table.bordered th { border: 1px #333 solid }
table:not(#maintable) thead tr { background-color: #fff !important } /* To counter the specificity of :nth-child. */
table:not(#maintable) tr:nth-child(odd) { background-color: #e0e0e0 }

table.report { width: 100%; margin-top: 1ex }
#BookingsOverview { padding-bottom: 1ex }

table.hidecol2 tr td:nth-child(2) { display: none }

.reports table {
  padding-bottom: 5ex;
}

caption[onclick="toggleTable(this)"] {
  cursor: pointer;
}
caption[onclick="toggleTable(this)"]:hover {
  background-color: #c0c0c0;
}
caption.expandtbody {
  background-color: #c0c0c0;
}
caption[onclick="toggleTable(this)"]::after {
  content:'◄';
  float:right;
  -moz-transition:0.5s all;
  -webkit-transition:0.5s all;
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
}
caption[onclick="toggleTable(this)"]:hover::after {
  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
}
caption.expandtbody[onclick="toggleTable(this)"]::after {
  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
}
caption.expandtbody[onclick="toggleTable(this)"]:hover::after {
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
}

#rightfloatingmenu {
  background-color: #fff;
  display: block;
  float: left; margin-left: 2ex;
  position: absolute;
  left: 95%; right: 0px;
  overflow: hidden;
  white-space: nowrap;
}
#rightfloatingmenu:hover {
  left: auto; width: auto; right: 0px;
}

.helphint { padding-left: 1ex; cursor: help }

output.range { 
  position: absolute;
  background-color: #444444;
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image: linear-gradient(top, #444444, #999999);
  width: 40px; 
  height: 30px; 
  text-align: center; 
  color: white; 
  border-radius: 10px; 
  display: inline-block; 
  font: bold 15px/30px Georgia;
  bottom: 175%;
  left: 0;
  margin-left: -1%;
}
output.range:after { 
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #999999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}

#responseForm textarea { width: 90%; min-height: 7ex }

input:read-only { border: none; text-decoration: underline }
/* At some point, Chrome has decided that type=button and type=submit match as read-only (they didn't previously, but they implicitly are) */
input[type=button]:read-only, input[type=submit]:read-only { border: revert; text-decoration: revert }
input[type=checkbox].disabled { visibility: hidden }
input[type=checkbox].disabled:after { content: "✗"; font-weight: bold; color: #ff0000; visibility: visible; position: relative; bottom: 0.5ex }
input[type=checkbox].disabled:checked:after { content: "✓"; color: #0000ff; visibility: visible; position: relative; bottom: 0.5ex }
textarea:read-only { resize: none }

pre.printpre {
  white-space: pre-wrap;
  width: 90%;
  padding-left: 2ex;
  border-left: 1px #000000 solid;
}

@page {
  size: auto;
  margin: 24mm 24mm 24mm 17mm;
}
@page :first {
  margin-top: 35mm;
}