@import url(http://fonts.googleapis.com/css?family=Cinzel+Decorative:900|Cherry+Cream+Soda|Merienda:700);
* {
  font-family: Arial, Helvetica, sans-serif;
}
#main, #topLogo {
  margin-left: 30px;
}
#main {
  position: relative;
  padding: 8px;
  border: 1px solid #000;
  box-shadow: 3px 0px 3px 3px #888;
  height: 352px;
  width:  550px;
}
#leftSide {
  float: left;
  width: 70px;
  height: 255px;
  background-color: #000;
  box-shadow: 3px 0px 3px 3px #888;
  margin-bottom: 3px;
  margin-right: 8px;
  z-index: 1;
}

.flyButton, .flyNow {
    cursor: pointer;
    margin: 10px auto 10px auto;
    padding: 0px;
    color: rgb(37,37,37);
    text-shadow: 0px 1px 1px rgba(250,250,250,0.3);
    font-size: 14px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    background-color: rgb(83,87,93);
    box-shadow: 0px 3px 0px 0px rgb(34,34,34), /* 1st Shadow */
                0px 7px 10px 0px rgb(17,17,17), /* 2nd Shadow */
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */
                inset 0px -12px 35px 0px rgba(0, 0, 0, .5); /* 4th Shadow */
    border: 0;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    text-align: center;
}
.flyButton:active, .flyNow {
  color: rgb(158, 2, 2);
  background-color: rgb(166, 166, 166);
  text-shadow: rgba(224, 224, 224,0.5) 1px 1px 0px;
}

.flyButton:hover {
  background-color: rgb(166, 166, 166);
  text-shadow: rgba(224, 224, 224,0.5) 1px 1px 0px;
}

#showBox {
  position: relative;
  display: inline-block;
  float: left;
  height: 253px;
  width: 470px
}
#rankBox,#ruleBox,#dataBox{
  display: none;
}
.centerDisplay {
  position: absolute;
  top: 0;
  left: 1;
  background-color: #EFEFEF;
  border: 1px solid #000;
  width: 463px;
  height: 254px;
  z-index: 20;
}
.centerBody {
  font-size: 12px;
  padding: 2px 4px;
  overflow-y: scroll;
  height: 230px;
}
.centerDisplay h1, .finTop{
  color: #FFF;
  font-size: 14px;
  margin: 0px;
  padding: 3px 10px;
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 2%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 2%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 2%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 2%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 2%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
copy

}
.rPick {
  border-collapse: collapse;
  float: left;
  font-size: 13px;
  border: 1px solid #000;
  padding: 0px 4px;
  margin-left: 30px;
}
.rPick tr {
  cursor: pointer;
  border-top: 1px solid #000;  
}
.rPick th {
  text-align: left;
  padding: 0px 6px;
}
.rPick td {
  padding: 0px 6px;
  height: 20px;
}

.player {
  position: relative;
  margin: 0px 2px;
  float: left;
  width: 214px;
  height: 240px;
  border: 8px outset #888;
}
.modShow {
  font-size: 18px;
  letter-spacing: 3px;
  margin-left: 5px;
  position: absolute;
  bottom: 0;  
}
.clr {
  clear: both;
}
.modShow span{
  margin-left: 2px;
  font-size: 17px;
  color: #A0A0A0;
}
.roundBy {
  border-collapse: collapse;
  font-size: 10px;
}
.roundBy th {
  text-align: center;
}
.roundBy td {
  border-top: 1px solid #666;
  width: 20px;
  padding: 0px 5px;
}
.lBord {
  border-left: 1px solid #666;
}

.p_data,.p_detail {
  color: #CCC;
  opacity: .8;
  font-family: Cherry Cream Soda;
  text-shadow: #FFF 0px 1px 0px, #555 0px -1px 0px;
  text-align: center;
  width: 210px;
}
.p_data {
  display: table-cell;
  padding-top: 50px;
  height: 180px;
  vertical-align: middle;
  font-size: 32px;
}
.p_detail {
  font-size: 18px;
  font-style: italic;
}
.nameBox {
  position: absolute;
  top: 0;
  color: #CCC;
  opacity: 0;
  text-shadow: #FFF 0px 1px 0px, #555 0px -1px 0px;
  font-size: 13px;
  z-index: 2;
}
#p1_namebox {
  left: 5;
}
#p2_namebox {
  right: 5;
}

.scoreBox {
  position: absolute;
  top: 0;
  border: 1px solid #000;
  margin: 2px 5px;
  opacity: 0;
  z-index: 2;
}
.scoreTable {
  border-collapse: collapse;
}
.scoreTable th{
  color: #A0A0A0;
  background-color: #000;
  font-size: 10px;
}
.scoreTable td{
  font-size: 22px;
  text-align: center;
  color: #000;
  background-color: #A0A0A0;
}
#p1_scorebox {
  right: 0;
}
#moves {
  width: 540px;
  height: 86px;
  margin-top: 0px;
  background-color: #000;
  border: 1px solid #000;
  box-shadow: 3px 3px 3px 3px #888;
  font-weight: bold;
}

.oMove, .dMove, .oMoveHMod, .dMoveHMod, .oMoveH, .dMoveH, .MoveFire {
  float: left;
  margin:4px 3px;
    cursor: pointer;
    padding-left:5px;
    height:18px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    overflow:hidden;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 2px rgba(68,68,68,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 2px rgba(68,68,68,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 2px rgba(68,68,68,0.5);
}
.oMove {
    background:#80a9da;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
    background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
}
.oMoveH {
    background:#80DABD;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#80DABD,0),color-stop(#6FC4C5,1));
    background:-webkit-linear-gradient(top, #80DABD 0%, #6FC4C5 100%);
    background:-moz-linear-gradient(top, #80DABD 0%, #6FC4C5 100%);
    background:-o-linear-gradient(top, #80DABD 0%, #6FC4C5 100%);
    background:linear-gradient(top, #80DABD 0%, #6FC4C5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80DABD', endColorstr='#6FC4C5',GradientType=0 );
}
.oMoveHMod {
    background:#BF2525;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#BF2525,0),color-stop(#F93F3F,1));
    background:-webkit-linear-gradient(top, #BF2525 0%, #F93F3F 100%);
    background:-moz-linear-gradient(top, #BF2525 0%, #F93F3F 100%);
    background:-o-linear-gradient(top, #BF2525 0%, #F93F3F 100%);
    background:linear-gradient(top, #BF2525 0%, #F93F3F 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#BF2525', endColorstr='#F93F3F',GradientType=0 );
}


.dMove {
    background:#817914;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#817914,0),color-stop(#CAC250,1));
    background:-webkit-linear-gradient(top, #817914 0%, #CAC250 100%);
    background:-moz-linear-gradient(top, #817914 0%, #CAC250 100%);
    background:-o-linear-gradient(top, #817914 0%, #CAC250 100%);
    background:linear-gradient(top, #817914 0%, #CAC250 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#817914', endColorstr='#CAC250',GradientType=0 );
}
.dMoveH {
    background:#C1C456;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#C1C456,0),color-stop(#F3F86B,1));
    background:-webkit-linear-gradient(top, #C1C456 0%, #F3F86B 100%);
    background:-moz-linear-gradient(top, #C1C456 0%, #F3F86B 100%);
    background:-o-linear-gradient(top, #C1C456 0%, #F3F86B 100%);
    background:linear-gradient(top, #C1C456 0%, #F3F86B 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#C1C456', endColorstr='#F3F86B',GradientType=0 );
}
.MoveFire {
    background:#FFF;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#FFF,0),color-stop(#F0DEDF,1));
    background:-webkit-linear-gradient(top, #FFF 0%, #F0DEDF 100%);
    background:-moz-linear-gradient(top, #FFF 0%, #F0DEDF 100%);
    background:-o-linear-gradient(top, #FFF 0%, #F0DEDF 100%);
    background:linear-gradient(top, #FFF 0%, #F0DEDF 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#F0DEDF',GradientType=0 );
}

.oMod, .oName, .dMod, .dName {
    display:inline-block;
    height: 100%;
    font-size:13px;
    padding-top: 0px;
    padding-right: 2px;
    white-space:nowrap;
    text-shadow:0px 1px 1px rgba(255,255,255,0.3);
    color:#333;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.oMod, .dMod{
    width: 12px; 
    height: 100%;
}

.oName, .dName {
    text-shadow:0px 1px 1px rgba(255,255,255,0.3);
    text-indent: 6px;
}
.oSpace, .dSpace {
    display: inline-block;
    width: 80px;
    height: 100%;
    border-left:1px solid #5d81ab;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
#finish {
  color: #A0A0A0;
  position: absolute;
  display: none;
  top: 0;
  width: 550px;
  height: 355px;
  background-color: #000;
  border: 2px outset #333;
  z-index: 150;
}
.closeMe {
  cursor: pointer;
  color: #CCC;
  background-color: #F00;
  border: 1px solid #000;
  font-weight: bold;
  float: right;
  margin-right: -10px;
  width: 15px;
  text-align: center;
}
.finTop {
  height: 20px;
}
#last_round, #end_score {
  font-size: 11px;
  color: #A0A0A0;
  position: absolute;
  bottom: 0;
  width: 200px;
}
#last_round {
  left: 5;
}
#end_score {
  right: -20;
}
#finText {
  margin-top: 10px;
  color: #A0A0A0;
  font-size: 50px;
  text-align: center;
  text-shadow: #FFF 0px 1px 0px, #555 0px -1px 0px;
}
.finSub {
  font-size: 20px;
}
#finButtons {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 25;
  padding: 0px auto;
}

#finButtons button {
    cursor: pointer;
    padding-left:5px;
    width: 100px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    overflow:hidden;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 2px rgba(68,68,68,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 2px rgba(68,68,68,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 2px rgba(68,68,68,0.5);
}
#finButtons button:hover {
    color: #FFF;
    background:#BF2525;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#BF2525,0),color-stop(#F93F3F,1));
    background:-webkit-linear-gradient(top, #BF2525 0%, #F93F3F 100%);
    background:-moz-linear-gradient(top, #BF2525 0%, #F93F3F 100%);
    background:-o-linear-gradient(top, #BF2525 0%, #F93F3F 100%);
    background:linear-gradient(top, #BF2525 0%, #F93F3F 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#BF2525', endColorstr='#F93F3F',GradientType=0 );
}
#topLogo {
  height: 80px;
  margin-top: 20px;
}
#topLogo img {
  float: left;
  height: 70px;
  width: 79px;
  margin-right: 20px;
}
#topLogo h1, #topLogo h3 {
  font-family: Cherry Cream Soda;
  color: #222;
  text-shadow: 0px 2px 3px #666;
}
#topLogo h3 {
  vertical-align: super;
  font-size: 16px; 
  margin: 0px;
}
#topLogo h1 {
  text-indent: 25px;
  font-size: 50px;
  font-weight: bold;
  margin: -5px 0px 0px 0px;
}