/* reset         */
input, select { -webkit-appearance: none; }

html { height: 100%; width: 100%; }
/* reset         */

body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
   font-size: 16px;
   color: #fff;
   background: #363;
}

#canvas { position: relative; width: 96%; max-width: 1000px; margin: 1% auto; }

#title_div { position: relative; width: 80%; margin: 1em auto; font-size: 1.5em; font-weight: bold; text-transform: uppercase; text-align: center; }
#toolbar   { position: relative; width: 90%; margin: 5px auto; padding: 5px; text-align: center; }

#_intro     { position: relative; width: 70%; margin: auto; }
#the_game  { position: relative; width: 100%; }
#board_div { position: relative; width: 100%; text-align: center; }
#the_board { width: 80%; height: auto; margin: 0 auto; }
#boardUL   { position: absolute; left:  0px; top: 10px; width: 150px; height: 130px; }
#boardUR   { position: absolute; right: 0px; top: 10px; width: 150px; height: 130px; }
#boardLL   { position: absolute; left:  0px; bottom: 10px; width: 150px; height: 160px; overflow: hidden; }
#boardLR   { position: absolute; right: 0px; bottom: -10px; width: 150px; height: 130px; }
#curplay   { width: 90%; height: 30px; margin: auto; font-size: 1.6em; }
#curplay span { margin-right: 15px; }

.to-zero   { font-size: 1.4em; }

#intro h1  { color: #ff0; margin: 1em auto; }
.contW     { position: relative; width: 90%; margin: 5px auto; }
.contC     { position: relative; width: 60%; margin: 5px auto; }

.border    { padding: 8px; border: 1px solid #fff; border-radius: 4px; }

p    { font-size: inherit; margin: 1em 0 0 0; }
h1   { font-size: 1.6em; margin: 1em 0; font-weight: bold; }
h2   { font-size: 1.4em; margin: 1em 0; font-weight: bold; }
h3   { font-size: inherit; margin: 0 0; font-weight: bold; }

.btn     { font-size: 0.9em; margin: 3px; padding: 0.6em 1.4em; font-weight: bold; background: #fff; color: #261; border: none; cursor: pointer; }
.btnL    { min-width: 150px; margin: 3px; }
.btnS    { min-width: 90px; margin: 3px; }

.frm-grp { width: 100%; padding: 0.5em;   display: flow-root; border: 1px solid #fff; border-radius: 4px; box-sizing: border-box; margin-bottom: 8px; }
.frm-row { width: 100%; padding: 0.5em 0; display: flow-root; }
.frm-lbl { width:  35%; padding: 0.6em 0; font-weight: bold; float: left; }
.frm-fld { width:  60%; padding: 0     0; float: left; }
.frm-inp { width: 100%; padding: 0.7em;   box-sizing: border-box; background: #fff; color; #000; border: 1px solid #000; }
.frm-cmd { width: 100%; padding: 0.5em 0; overflow: hidden; text-align: center; }

/* fake checkboxes */
.frm-chk       { position: relative; display: block; padding: 0; width: 32px; height: 32px; margin: 0; }
.frm-chk input { opacity: 0; position: absolute; cursor: pointer; }
.frm-chk .chk  {
   position: absolute; top: 0; left: 0;
   width: 32px; height: 32px;
   background: transparent url(icons.png) 0 43% no-repeat;
   background-size: 100%;
   padding: 0;
}

.frm-chk input:checked ~ .chk {background-position: 0 57%; }

/* specials */
.tbl-players    { width: 100%; border: 0; }
.tbl-players tr { min-height: 26px; }
.tbl-players td { padding: 0 0.2em; font-size: 1.2em; line-height: 20px; }

span.col3 { display: inline-block; width: 40px; }

.hl { color: #ff0; }
.fl { float: left; }
.fr { float: right; }
.fc { margin: auto; }
.ac { text-align: center; }
.al { text-align: left; }
.ar { text-align: right; }
.vt { vertical-align: top; }

.wMax { width: 100%; box-sizing: border-box; }
.wL   { min-width: 160px; }
.wM   { min-width: 100px; }
.wS   { min-width:  80px; }


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

.b5  { margin:  5px; }
.b10 { margin: 10px; }
.b15 { margin: 15px; }

@media screen and (max-width: 639px) {

   body   { font-size: 12px; }
   .contC { width: 100%; }
   .btnS  { padding: 0.5em 3px; margin: 4px 0; min-width: 60px; }

  #_intro   { width: 100%; }
  #boardUR { top: -5px; height: 60px; width: 80px; }
  #boardUL { top: -5px; height: 60px; width: 80px; }
  #boardLR { bottom: 5px; height: 30px; width: 80px; }
  #boardLL { bottom: 5px; height: 55px; width: 90px; overflow: hidden; }

  span.col3 { width: 30px; }

  .border  { border: none; padding: 3px 6px; }
}

@media screen and (max-width: 414px) {

  .btnL      { min-width: 85px; }
  #board_div { margin-top: 30px; }
  #the_board { width: 100%; }
  #boardUR   { top: -25px; height: 30px; width: 140px; }
  #boardUL   { top: -25px; height: 30px; width: 140px; }
  #boardLR   { bottom: 0px; height: 30px; width: 80px; }
  #boardLL   { bottom: 5px; height: 62px; width: 90px; overflow: hidden; }
  #thegame   { margin-top: 15px; }
  span.col3  { width: 30px; }

  .border    { border: none; padding: 3px 6px; }
}

/* eof */