body { font-family: Arial,Helvetica,sans-serif; font-size: 13px; }

a:link, a:visited { color: #084B8A; text-decoration: none; }
a:hover { color: #0B173B; }

ul.navi { 
    list-style-type: none; margin: 0; padding: 0; overflow: hidden;     
    border: solid 2px #424242;
}
ul.navi li { float: left; }
ul.navi li a:link, ul.navi li a:visited {
    display: block;
    font-size: 1.17em;
    font-weight: bold;
    color: #FFFFFF;
    background: #424242;
    text-align: center;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}
a.active { background: #D6F5FF; }
ul.navi li a:hover { background: #0B173B; }
ul.navi li a.active { background: #2482BA; }
ul.navi li a.b-right { border-right: 1px #FFFFFF dotted; }
ul.navi li a.grey { color: #D8D8D8; }

.button, button {
    margin-top: 2px;
    padding: 1px 5px;
    font-size: 100%;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    cursor: pointer; 
    background: #D8D8D8;
    text-decoration: none;
}

input.active, .button-active {
    background: #D6F5FF;
}

.link { font-weight: bold; color: #084B8A; }
.button:hover, button:hover, .link:hover { color: #0B173B; background: #F2F2F2; }
{ background: #D6F5FF; }

pre a { text-decoration: none; }
pre a:hover { text-decoration: underline; }

table td.b-left { border-left: 1px #BDBDBD solid; }
table td.b-right { border-right: 1px #BDBDBD solid; }
table td.b-top { border-top: 1px #BDBDBD solid; }
table td.b-bottom { border-bottom: 1px #BDBDBD solid; }

table td.td-left, table th.td-left { text-align: left; }
table td.td-right, table th.td-right { text-align: right; }
table td.td-center, table th.td-center { text-align: center; white-space: normal; }
table td.td-maxwidth20ch { max-width: 20ch; }

table.center { margin:auto; }
table.width100 { width: 100%; }
table.td-height15 td { height:1.5em; }
table.td-height2 td { height:2em; }
table.td-height25 td { height:2.5em; }

table.body { margin-top:10px; margin-bottom:10px; margin-left:auto; margin-right:auto; }
table.body td.navi { padding: 0px; background: #424242; }
table.body td.content { padding: 5px; background: #F2F2F2; border-top: 2px #D8D8D8 solid;border-left: 2px #D8D8D8 solid;border-right: 2px #D8D8D8 solid;border-bottom: 5px #D8D8D8 solid; }

table.pelaaja { padding: 8px; width: 100%; border: 2px #585858 solid; }
table.pelaaja td { padding-left: 8px; padding-right: 8px; white-space: nowrap;  }
table.pelaaja td.pelaaja { padding-bottom: 0.8em; font-size: 1.875em; font-weight: bold; }

hr { color: #959595; background: #585858; height: 1px; }
table.listawrap { padding-top: 8px; padding-bottom: 8px; }
table.listawrap td.listawraptd { padding: 6px 0px; }
table.listawrap td.listawraptd-right { text-align: right; }
table.listawrap td.listawraptd-center { text-align: center; }

table.lista { border: 2px #959595 solid; padding:0px; }

table.lista td { background: #FFFFFF; }
table.lista td { white-space: nowrap; }
table.lista td.bg-grey { background: #D8D8D8; }
table.lista td.bg-blue { background: #D6F5FF; }
    
table.lista td.td-left { padding-left: 6px; padding-right: 6px; }
table.lista th.td-left { padding-left: 6px; padding-right: 6px; }
table.lista td.td-center { padding-left: 6px; padding-right: 6px; }
table.lista th.td-center { padding-left: 6px; padding-right: 6px; }
table.lista td.td-right { padding-left: 6px; padding-right: 6px; }
table.lista th.td-right { padding-left: 6px; padding-right: 6px; }

table.lista th.td-left { background: #D8D8D8; white-space: nowrap;  }
table.lista th.td-center { background: #D8D8D8; white-space: nowrap;  }
table.lista th.td-right { background: #D8D8D8; white-space: nowrap; text-align: center; }

table.lista th.titteli { background: #D8D8D8; white-space: nowrap;  }
table.lista td.titteli, table.lista th.titteli { text-align: right; padding-left: 0px; padding-right: 2px; }

table.lista th { background: #D8D8D8; color: black; padding-top: 4px; padding-bottom: 4px; border-bottom: 1px #959595 solid; border-top: 1px #000000 solid; }
table.lista td { 
    border-bottom: 1px #BDBDBD solid;
    padding-bottom: 1px; 
    overflow: hidden;
}
table.lista td a, table.lista th a { 
    text-decoration: none; 
    display: inline-block;
    width: 100%;
    margin: -2em; 
    padding: 2em;
}
table.lista td a:hover { 
    background: #D8D8D8;
}

table#pelaajahist td.td-right { padding-left: 10px; padding-right: 10px; }

table.form td { padding-bottom: 3px; padding-right: 3px; white-space:nowrap; }

table.lista th.dt-orderable-asc,
table.lista th.dt-orderable-desc { 
  position: relative;
  cursor: pointer;
}
table.lista th.dt-ordering-asc,
table.lista th.dt-ordering-desc { 
  background: transparent;
}
table.lista th.dt-ordering-asc::after { 
  content: '';
  position: absolute;
  bottom: 0;
  right: 1px;
  border-left:    0.4em solid transparent;
  border-right:   0.4em solid transparent; 
  border-bottom:  0.4em solid black;
}
table.lista th.dt-ordering-desc::after { 
  content: '';
  position: absolute;
  top: 0;
  right: 1px;
  border-left:    0.4em solid transparent;
  border-right:   0.4em solid transparent; 
  border-top:     0.4em solid black;
}

table.lista span.vast {
    font-size: 0.8em;
}
table.lista span.vvast {
    font-size: 0.8em; border: 1px #585858 dotted; padding-left: 2px; padding-right: 2px;
}
table.lista span.mvast {
    font-size: 0.8em; border: 1px #585858 dotted; padding-left: 2px; padding-right: 2px; background-color: #585858; color: white; font-weight: bold;
}
table.bar {
  width: 100%;
}
table.bar tr.stats td {
  padding-top: 5px;
  padding-right: 10px;
  text-align: right;
}
div.bar {
  height: 10px; 
  width: 100%; 
  border: 1px solid black; 
  background-color: red;
}
div.bar1 {
  height: 10px; 
  width: 100%; 
  border: 1px solid black; 
  background-color:  #f1948a;
  1background-color:  #f5b7b1;
}
div.bar2 {
  height: 100%; 
  background-color:  #58d68d;
  1background-color:  #82e0aa;
  display: inline-block; 
  vertical-align: top;
}
div.bar3 {
  height: 100%; 
  background-color: white;
  display: inline-block; 
  vertical-align: top;
}

.caption, caption { background: #959595; color: #FFFFFF; text-align: left; vertical-align: middle; padding: 0.4em 0.8em; font-size: 1.17em; font-weight: bold; }

.bg-white { background: #FFFFFF; }
.bg-grey { background: #D8D8D8; }
.bg-blue { background: #D6F5FF; }
.darkgrey { color: #6E6E6E; }
.green { color: #0B610B; }
.red { color: #B40431; }
.blue { color: #0489B1; }
.brown { color: #61210B; }
.bold { font-weight: bold; }