html { height: 100%; }
body {
   font-family: Verdana, Helvetica, Arial;
   font-size: 12px;
   color: #555;
   margin: 0;
   width: 100%;
   height: 100%;
   overflow-y: scroll;
   background: #ddd url(/pics/bg-hockey.jpg) no-repeat top center fixed;
   background-size: cover;
}

img { border: none; }

h1, h2, h3 { font-weight: bold; }

h1 { font-size: 1.5em; color: #c90e0f; margin: 12px 0 10px; }
h2 { font-size: 1.3em; color: #666666; margin: 10px 0; }
h3 { color: #c90e0f; }

td, th { font-size: 0.9em; padding: 4px 2px; }


fieldset {
   margin: 15px 5px 5px;
   border: 1px solid #bbb;
   padding: 10px 10px 5px 5px;
}

pre {
   font-family: 'Lucida Console', 'Courier New', fixed;
}

/* Main divs */

#canvas {
   position: relative;
   max-width: 1000px;
   height: 100%;
   margin: 0 auto;
   position: relative;
   padding: 29px 0 0 0;
}

#content {
   max-width: 940px;
   margin: 0 auto 20px auto;
   padding: 20px;
   border: 1px solid #888;
   border-radius: 6px;
   background-color: #fff;
   box-shadow: 3px 3px 6px #aaa;
}

#footer {
   position: relative;
   clear: both;
   height: 30px;
   margin: 0;
   text-align: left;
}

/*
<ul>
   <li><a href="/rules" class=" mnu"><div class="inner inner-mnu">Rules</div></a></li>
   <li><a href="/index" class=" mnu"><div class="inner inner-mnu">Scoreboard</div></a></li>
   <li><a href="/draft" class=" mnu"><div class="inner inner-mnu">Draft</div></a></li>
</ul>
*/
/* top menu                             */
.mob-title        { display: none;  }
.top-title        { display: inline; }

#top_menu         { position: absolute; left: 20px; top: 0px; height: 30px; margin: 0 0 0 0px; }
#top_menu ul      { display: block; margin: 0; padding: 0; }
#top_menu li      { display: block; float: left; padding: 5px 15px; margin: 2px 2px -1px 2px; height: 16px; background: #ddd; border: 1px solid #888; border-radius: 4px 4px 0 0; }
#top_menu li.sel  { background: #fff; border-bottom: #fff solid 1px; }
#top_menu a       { color: #555; text-decoration: none; display: block; text-transform: uppercase; }
#top_menu a.sel   { color: #000; }
#top_menu a:hover { color: #f00; text-decoration: none; }
#top_menu .toggle { display: none; }

/* Content areas */
.conttxt { margin: 30px 15% 0 15%; }

.contmax { margin: 0; }
.contXXL { width: 1000px; margin: 5px auto; }
.contbig { width: 850px; margin: 5px auto; }
.contmid { width: 700px; margin: 5px auto; text-align: left; }
.contsma { width: 95%; margin: 0 auto; max-width: 360px; padding: 10% 0 20% 0; }

.err_cont  { background: #fee; border: 1px solid #d00; border-radius: 4px; padding: 10px; margin: 10px 0; }
.msg_cont  { background: #efe; border: 1px solid #070; border-radius: 4px; padding: 10px; margin: 10px 0; }

.pager { font-size: 0.9em; font-weight: bold; text-align: center; margin: 10px; }

.lnk      { color: #22f; text-decoration: none; }
a         { color: #22f; text-decoration: none; }
a:hover   { color: #000; text-decoration: none; }
a:visited { color: #22a; text-decoration: none; }

.title    {   font-family: Arial; color: #804; font-weight: normal; }

.tb tbody tr:hover { background: #cdf; color: #000; }
.tb thead tr td    { font-weight: bold; color: #000; }
table.tb td { padding: 1px 4px; }

/* Table rows */
.tbt {
   background: #fff;
   margin: 0;
   padding: 0;
   width: 100%;
   table-layout: fixed;
   box-shadow: 2px 2px 4px #aaa;
   border-collapse: collapse;
   border: 1px solid #abd;
}

.tbh     { background: #9bd; font-weight: bold; color: #000; }

.tdhover { background: #cdf; color: #000; }

.tbd     { background: #fff; color: #000; }
.tbd1    { background: #fff; color: #000; }
.tbd2    { background: #eee; color: #000; }
.tbd3    { background: #eef; color: #000; }

/*table.tbt tr:nth-child(even) { background: #fff; }   */
/*table.tbt tr:nth-child(odd)  { background: #f5f5f5; }*/

table.tbt tr.tbhp { background: #e1e1e1;}

.tbt tr  { height: 28px; }
.tbt td  { border: 1px solid #abd; }
table.tbt tr.tbh { border: none; background-color: #b8cce6; }

table.tbt tr.tobs    { background: #fdd; color: #000; }
table.tbt tr.tdiss	{ background: #fff; color: #aaa; }
table.tbt tr.tdel, table.tbt tr.tdel a, table.tbt tr.tdel input {color: #aaa; }
table.tbt tr.tdel a:hover, table.tbt tr.tdel input:hover {color: #000; }
table.tbt tr.twait   { background: #fdeec3; color: #000; }

.tedit   { 
   font-size: 0.8em;
   font-family: Verdana, Helvetica;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0 1px;
   border: none;
   background: transparent;
}

.tpen    { background: url(/pics/pen16y.png) no-repeat left 50%; padding-left: 16px; }

.warn    { background-color: #fcc; }
.diss    { color: #888; }
.hilite  { color: #00f; background-color: #eef; }
.deli    { color: #090; background-color: #cec; }
.fat     { font-weight: bold; }
.ita     { font-style: italic; }

.tclip { overflow: hidden; text-align: left; white-space: nowrap; }

table.tbt tr:hover {  background: #cdf; }

table.tbt tr.tbh:hover {
   background-color: #b8cce6;
}

/* Form elements */
.txt   { font-size: 1.0em; font-family: Verdana, Helvetica; color: #000; border: 1px solid #9bd; padding: 4px 1px; margin: 1px 0; box-sizing: border-box; }
.btn   { font-size: 1.0em; font-family: Verdana, Helvetica; color: #000; font-weight: bold; padding: 4px 8px; }
.tchk  { margin: 1px; padding: 0; width: 13px; height: 13px; }

.txt:disabled  { color: #666; background-color: #eee; }
input[type=button]:disabled { color: #888; }
input[type=submit]:disabled { color: #888; }

/* In this brave new world, checkboxes and radiobuttons are americanized super-gulp xxl*/
input[type=radio],
input[type=checkbox] {
   width: 18px;
   height: 18px;
   vertical-align: sub;
}

.wS    { width: 47px; }
.wM    { width: 90px; }
.wM2   { width: 41px; } /* half wM */
.wL    { width: 145px; }
.wLd   { width: 149px; } /* for drops */
.wXL   { width: 180px; }
.wXLd  { width: 204px; } /* for drops */
.wXXL  { width: 255px; }
.wXXLd { width: 259px; }
.wXXXL { width: 395px; }
.wMax  { width: 100%; box-sizing: border-box; }

::-webkit-input-placeholder  { color: #aaa; }
input:-moz-placeholder { color: #aaa; }

/* subclasses       */
.nw   { white-space: nowrap; }

.b5   { margin: 5px; }
.b10  { margin: 10px; }
.b15  { margin: 15px; }
.v5   { margin: 5px 0; }
.v10  { margin: 10px 0; }
.v15  { margin: 15px 0; }

.out  { color: #f00; margin: 10px 0 10px; padding: 10px; border: 1px solid #f00; background: #fdd; }
.nfo  { color: #050; margin: 10px 0 10px; padding: 10px; border: 1px solid #080; background: #efe; }

.err  { color: #c33; }
.obl  { color: #f00; }
.req  { color: #f00; } /* same as obl */
.msg  { color: #080; }
a.err { color: #c33; }
a.msg { color: #080; }

.note { color: #666; font-size: 0.8em; }
.ro   { color: #555; border: 1px solid #888; }
.hl   { font-weight: bold; }

.tiny { font-size: 0.8em; }

.al   { text-align: left; }
.ac   { text-align: center; }
.ar   { text-align: right; }

.fl   { float: left; }
.fr   { float: right; }
.cb   { clear: both; }
.clr  { clear: both; } /* Depricated, to be removed */
.cl   { clear: left; }
.cr   { clear: right; }
.clk  { cursor: pointer; }

.on { display: block; }
.off { display: none; }

.tdicon { margin: 2px 3px; width: 16px; height: 16px; border: none; vertical-align: bottom; }
.ico16 { width: 16px; height: 16px; border: none; margin: 0 2px; vertical-align: middle; }
.ico32 { border: 0px; width: 32px; height: 32px; margin: 0 1px; }
.ico { border: 0px; width: 36px; height: 18px; margin-right: 2px; }
.ico13 { border: 0px; width: 13px; height: 13px; margin: 0 1px; }

.printbreak { page-break-before: always; }
.strike { text-decoration: line-through; }

/* Debugging, to see boundaries */
.fcc { background: #fcc; }
.cfc { background: #cfc; }
.ccf { background: #ccf; }

.req { color: #f00; }

div.hr {
	height: 1px;
	background: #000;
}

div.hr hr {
	display: none;
}

/* Filter panel */
.flt_panel {
   margin: 10px 0;
   padding: 10px 5px;
   border: 1px solid #abd;
   border-radius: 4px;
   background-color: #b8cce6;
   box-shadow: 3px 3px 6px #aaa;
}

/* Info-boxes and warnings */
div.legend {
   padding: 6px 16px;
   margin: 20px 0;
   border-radius: 4px;
   background: #fafafa;
   border: 1px solid #ccc;
   box-shadow: 0 0 5px #ccc;
}

td.link { color: #449; text-decoration: none; }
td.link:hover { color: #000; text-decoration: none; }

.ui-mob      { display: none; } /* alternative content whem ui-rich is hidden */
.ui-pad-alt  { display: none; } /* alternative content when ui-pad is hidden  */

/* surf pad view   */
@media only screen and (max-width: 767px) {

   .ui-rich    { display: none; }
   .ui-mob     { display: inline; }
   .conttxt    { margin: 20px 0 0 0; }
   .flt-block  { display: block; width: 100%; text-align: right; }
   .flt-input  { width: 250px; }
   .two-col    { width: 100%; float: left; margin-left: 0px; }
}

/* hamburger menu on smaller screens */
@media only screen and (max-width: 767px) {

   /* top menu                             */
   #canvas              { padding-top: 35px; }
   .mob-title           { display: inline-block; color: #fff; margin: 11px 0 0 12px; font-size: 1.1em; }
   .top-title           { display: none; }
   #top_menu            { position: fixed; left: 0px; top: 0; width: 100%; height: 40px; margin: 0; background: #000; transition: top 0.3s ease-out; }
   #top_menu .toggle    { display: block; height: 32px; width: 32px; float: right; background: url(/pics/mob-nav-wht.png) right top no-repeat; background-size: contain; margin: 3px 5px; }
   #top_menu .menu-cont { display: none; position: absolute; top: 41px; right: 0; background-color: #000; background-color: rgba(0,0,0,0.5); padding: 5px; width: 160px; z-index: 1000; }

   #top_menu ul         { display: block; margin: 0; padding: 0; }
   #top_menu li         { float: none; padding: 10px 4px; height: auto; background: transparent; border: none; }
   #top_menu li.sel     { background: transparent; border-bottom: none; }
   #top_menu a          { color: #fff; text-decoration: none; display: block; text-transform: uppercase; }
   #top_menu a.sel      { color: #0f0; }
   #top_menu a:hover    { color: #0f0; text-decoration: none; }
}

/* hamburger menu on smaller screens */
@media only screen and (max-width: 567px) {

   .ui-pad              { display: none; }
   .ui-pad-alt          { display: inline; }

   #content { padding: 10px 5px 5px 5px; }
   
   .note { color: #666; font-size: 0.8em; }

   pre   { font-size: 10px; }
}

/* sunk-mobiler view   */
@media only screen and (max-width: 359px) {

   .ui-tiny     { display: none; }
   .flt-input   { width: 200px; }

   pre   { font-size: 9px; }
}

/* browser view  */
@media only screen and (min-width: 768px) {

   .flt-block   { display: inline; float: left; }
   .flt-input   { width: 150px; }
   .two-col     { width: 347px; float: left; margin-left: 10px; }
   .two-col:first-child { margin-left: 0px; }
}

/*
 MAX width
 iPhone 6 Plus    736    414
 iPhone 6         667    375
 iPhone 5         568    320
 iPhone 4         480    320
 Samsung Ace      480    320
 Samsung S6       640    360

.ui-rich   only visible when > Pad
.ui-pad    visible when > portrait mob
.ui-mob    visible when < landscape mob
*/