/*
  were using Bootstrap and Font Awesome
  https://bootstrapcdn.com
*/

html {
    height: 100%;
}

.bg { 
  padding-top:0px; 
  height: 100%;
  width:100%;
  z-index: -1;
  position: fixed;
background: #000000; 
background: -moz-linear-gradient(top, #000000 0%, #333333 100%); 
background: -webkit-linear-gradient(top, #000000 0%,#333333 100%); 
background: linear-gradient(to bottom, #000000 0%,#333333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#333333',GradientType=0 ); 

  }

.container {
  margin-top:20px;
}
.red {
  color: red; 
}

.green {
  color: green;
}

.table {
  margin: 20px 0;
}

thead td,
thead td a {
text-decoration: none!important;
font-weight: bold;
}

table td {
width: 10%;
text-align: center;
vertical-align: middle!important;
}

table td.nameVal {
width: 30%;
text-align: left;
}

.modal-header .close {
  margin-top: -25px;
}

.top-buffer { margin-top:20px; }

.panel-primary {
    border-color: #000000;
}

.text-on-pannel {
  background: #333 none repeat scroll 0 0;
  height: auto;
  margin-left: 20px;
  padding: 6px 12px;
  position: absolute;
  margin-top: -47px;
  border: 1px solid #000;
  border-radius: 8px;
  color: white;
  font-size: 18px;
}
.leg2,
.leg1 {
 width: 10%;
}
.leg3 {
  width: 60%;
 }

 a {
   cursor: pointer;
 }

.panel {
  /* for text on pannel */
  margin-top: 27px !important;
}

.panel-body {
  padding-top: 30px !important;
}
.scoreTable {
  background-color: transparent;
  width:100%;
}
.scoreTable td {
  width:50%;
}
.score {
  font-size: 56px;
  font-weight: bold;
  color: white;
  font-family: 'Orbitron', sans-serif;
}

.rank {
  width:16px;
  height:16px;
  position: relative;
  display: inline-block;
}

.rank::before {
  content:'';
  position: absolute;
  width:16px;
  height:16px;
  left:0;
  top:0;
}

.rank0::before {background: url('../img/ranks/top-0.png') no-repeat;}
.rank1::before {background: url('../img/ranks/top-1.png') no-repeat;}
.rank2::before {background: url('../img/ranks/top-2.png') no-repeat;}
.rank3::before {background: url('../img/ranks/top-3.png') no-repeat;}
.rank4::before {background: url('../img/ranks/top-4.png') no-repeat;}
.rank5::before {background: url('../img/ranks/top-5.png') no-repeat;}
.rank6::before {background: url('../img/ranks/top-6.png') no-repeat;}
.rank7::before {background: url('../img/ranks/top-7.png') no-repeat;}
.rank8::before {background: url('../img/ranks/top-8.png') no-repeat;}
.rank9::before {background: url('../img/ranks/top-9.png') no-repeat;}
.rank10::before {background: url('../img/ranks/top-10.png') no-repeat;}
.rank11::before {background: url('../img/ranks/top-11.png') no-repeat;}
.rank12::before {background: url('../img/ranks/top-12.png') no-repeat;}
.rank13::before {background: url('../img/ranks/top-13.png') no-repeat;}
.rank14::before {background: url('../img/ranks/top-14.png') no-repeat;}
.rank15::before {background: url('../img/ranks/top-15.png') no-repeat;}
.rank16::before {background: url('../img/ranks/top-16.png') no-repeat;}
.rank17::before {background: url('../img/ranks/top-17.png') no-repeat;}
.rank18::before {background: url('../img/ranks/top-18.png') no-repeat;}

.prize {
  width:36px;
  height:36px;
  position: relative;
  display: inline-block;
}

.prize::before {
  content:'';
  position: absolute;
  width:36px;
  height:36px;
  left:0;
  top:0;
}

.prize1::before {background: url('../img/prizes/prize1.png') no-repeat;}
.prize2::before {background: url('../img/prizes/prize2.png') no-repeat;}
.prize3::before {background: url('../img/prizes/prize3.png') no-repeat;}