h1 {
  color: white;
  background: black; }

p {
  margin: 0; }

body {
  background: black; }

.table {
  background-image: url("../images/table-graphic.jpg");
  background-size: contain;
  position: absolute;
  left: 50%;
  margin-left: -480px;
  top: 50%;
  margin-top: -270px;
  width: 960px;
  height: 540px;
  border: 2px solid white;
  perspective: 1300px; }

.dealer {
  position: absolute;
  top: 0px;
  left: 413px;
  -webkit-perspective: 400px;
  perspective: 400px; }

.player {
  position: absolute;
  top: 216px;
  left: 413px;
  -webkit-perspective: 400px;
  perspective: 400px; }

.split1 {
  position: absolute;
  top: 178px;
  left: 284px; }

.split2 {
  position: absolute;
  top: 178px;
  left: 560px; }

.split1a {
  position: absolute;
  top: 178px;
  left: 73px; }

.split1b {
  position: absolute;
  top: 178px;
  left: 298px; }

.split2a {
  position: absolute;
  top: 178px;
  left: 523px; }

.split2b {
  position: absolute;
  top: 178px;
  left: 748px; }

.cardImage {
  width: 113px;
  height: 157px; }

.hand img {
  margin: 3px -95px -1px 4px;
  -webkit-transform: rotateX(16deg);
  transform: rotateX(16deg); }
  .hand img:last-child {
    margin-right: 5px; }

.dealer img {
  transform: scale(0.85) rotateX(16deg); }

.total {
  position: absolute;
  color: white;
  font-size: 1.5em;
  text-shadow: 1px 1px 0 black; }
  .total.dealerTotal {
    top: 68px;
    left: -32px; }
  .total.playerTotal {
    top: 68px;
    left: -32px; }

.split1Total, .split2Total, .split1aTotal, .split1bTotal, .split2aTotal, .split2bTotal {
  position: absolute;
  top: -28px;
  left: 58px; }

.bankTotal {
  position: absolute;
  top: 418px;
  left: 277px; }

.wager {
  position: absolute;
  width: 47px;
  text-align: center;
  bottom: -49px;
  left: 45px; }

.insuranceWager {
  bottom: 424px;
  left: 553px; }

.chip {
  position: absolute; }

.chip:hover {
  cursor: pointer;
  -webkit-filter: drop-shadow(1px 1px 5px white); }

.chip1 {
  left: 6px;
  top: 366px;
  width: 47px;
  height: 21px; }

.chip5 {
  left: 48px;
  top: 380px;
  width: 45px;
  height: 22px; }

.chip10 {
  left: 88px;
  top: 394px;
  width: 47px;
  height: 22px; }

.chip25 {
  left: 130px;
  top: 408px;
  width: 46px;
  height: 21px; }

.chip50 {
  left: 171px;
  top: 422px;
  width: 47px;
  height: 22px; }

.chip100 {
  left: 213px;
  top: 435px;
  width: 47px;
  height: 22px; }

#selectedBet {
  -webkit-filter: drop-shadow(1px 1px 5px white); }

.chips {
  position: absolute;
  top: 393px;
  left: 287px;
  z-index: 200; }
  .chips img {
    position: absolute;
    width: 47px; }

.hand, .chips {
  transition: 0.2s; }

.bankChips {
  width: 47px;
  position: absolute;
  top: 393px;
  left: 287px; }
  .bankChips img {
    width: 47px;
    position: absolute; }

.chipHiding {
  background: black;
  width: 59px;
  height: 27px;
  top: -29px;
  position: absolute;
  left: 452px;
  z-index: 300; }

button:focus {
  outline: none; }

button:disabled {
  background: rgba(154, 154, 154, 0.63);
  border: 4px groove rgba(154, 154, 154, 0.63);
  color: rgba(59, 59, 59, 0.63); }

.btn:active, .testHand button:active {
  color: white;
  transform: translate(2px, 2px); }

.btn {
  background: rgba(154, 185, 133, 0.63);
  font-size: 2em;
  padding: 8px 24px;
  border: 4px groove rgba(154, 185, 133, 0.63);
  border-radius: 16px 16px;
  color: #3b0600;
  font-family: Tahoma; }

.insuranceButton {
  position: absolute;
  top: 153px;
  left: 431px;
  font-size: 1em;
  padding: 4px 12px;
  border-radius: 8px; }

.noDealerBlackjack {
  position: absolute;
  top: 160px;
  left: 386px;
  color: white;
  text-shadow: 1px 1px 0 black; }

.buttons {
  position: absolute;
  display: flex;
  justify-content: space-around;
  top: 448px;
  left: 308px;
  width: 361px; }

.stay {
  padding: 8px 16px; }

.splitButton, .split1Button, .split2Button {
  position: absolute;
  top: 88px;
  left: 12px;
  background: rgba(154, 185, 133, 0.9);
  border: 4px groove rgba(154, 185, 133, 0.9); }

.announcePlayer {
  position: absolute;
  background: black;
  display: table-cell;
  top: -62px;
  vertical-align: middle; }
  .announcePlayer.lose {
    border: 6px double red;
    width: 336px;
    left: -103px; }
    .announcePlayer.lose p {
      color: red;
      font-size: 3em;
      text-align: center; }
  .announcePlayer.win {
    border: 6px double lime;
    width: 313px;
    left: -83px; }
    .announcePlayer.win p {
      color: lime;
      font-size: 3em;
      text-align: center; }
  .announcePlayer.push {
    border: 6px double white;
    width: 208px;
    left: -37px; }
    .announcePlayer.push p {
      color: #adc78a;
      font-size: 3em;
      text-align: center; }

.announceSplit1, .announceSplit2, .announceSplit1a, .announceSplit1b, .announceSplit2a, .announceSplit2b {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 55px;
  left: 5px; }
  .announceSplit1 p, .announceSplit2 p, .announceSplit1a p, .announceSplit1b p, .announceSplit2a p, .announceSplit2b p {
    background: black;
    font-size: 1.4em;
    padding: 5px; }
  .announceSplit1.win p, .announceSplit2.win p, .announceSplit1a.win p, .announceSplit1b.win p, .announceSplit2a.win p, .announceSplit2b.win p {
    border: 6px double lime;
    color: lime; }
  .announceSplit1.lose p, .announceSplit2.lose p, .announceSplit1a.lose p, .announceSplit1b.lose p, .announceSplit2a.lose p, .announceSplit2b.lose p {
    border: 6px double red;
    color: red; }
  .announceSplit1.push p, .announceSplit2.push p, .announceSplit1a.push p, .announceSplit1b.push p, .announceSplit2a.push p, .announceSplit2b.push p {
    border: 6px double white;
    color: #adc78a; }

.red {
  height: 104px;
  width: 104px;
  background: #e93e3c;
  display: inline-block;
  border-radius: 100% 0 0 0; }

.green {
  height: 104px;
  width: 104px;
  background: #9ead3a;
  display: inline-block;
  border-radius: 0 100% 0 0; }

.advantage-gauge {
  top: 15px;
  left: 20px;
  display: inline-block;
  height: 110px;
  position: relative;
  width: 208px; }
  .advantage-gauge .levels {
    border-bottom: 2px solid #464646;
    height: 104px; }

.gauge-needle {
  background: url("http://f.cl.ly/items/2d3Q26031W0O0R2o1j3V/gauge-needle.svg") 0 0 no-repeat;
  width: 17px;
  height: 94px;
  display: block;
  margin-left: -8px;
  margin-bottom: -3px;
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: rotate(-9deg);
  -webkit-transform-origin: 8px 84px;
  -moz-transform-origin: 8px 84px;
  -ms-transform-origin: 8px 84px;
  transform-origin: 8px 84px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out; }

.toggleCountInfo {
  width: 209px;
  height: 107px;
  position: absolute;
  top: 14px;
  left: 19px;
  border-radius: 104px 104px 0 0;
  border: none;
  background: none; }

.houseText {
  position: absolute;
  top: 83px;
  left: 25px; }

.playerText {
  position: absolute;
  top: 83px;
  right: 25px; }

.advantageText {
  position: absolute;
  left: 50px;
  top: 109px;
  color: white;
  text-shadow: 1px 1px 0 black; }

.percentMarkers > * {
  position: absolute;
  font-size: .8em; }

.percentMarkers .pos2 {
  top: 20px;
  left: 145px; }

.percentMarkers .pos4 {
  top: 64px;
  left: 178px; }

.percentMarkers .neg2 {
  top: 20px;
  left: 39px; }

.percentMarkers .neg4 {
  top: 64px;
  left: 7px; }

.count {
  color: white;
  position: absolute;
  top: 14px;
  left: 200px;
  padding: 2px;
  text-shadow: 1px 1px 0 black; }

.trueCount {
  color: white;
  position: absolute;
  top: 35px;
  left: 218px;
  padding: 2px;
  text-shadow: 1px 1px 0 black; }

.cardsLeft {
  color: white;
  position: absolute;
  top: 58px;
  left: 231px;
  padding: 2px;
  text-shadow: 1px 1px 0 black; }

.decksLeft {
  color: white;
  position: absolute;
  top: 81px;
  left: 237px;
  padding: 2px;
  text-shadow: 1px 1px 0 black; }

.strategyImg {
  width: 35px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1; }

.strategyBig {
  position: absolute;
  top: 45px;
  left: 309px;
  width: initial;
  border: 3px solid black;
  z-index: 300; }

.toggleTestPanel {
  position: absolute;
  top: 26px;
  right: 8px;
  width: 98px;
  height: 72px;
  transform: rotate(18deg);
  background: transparent;
  border: none; }

.testPanel {
  padding: 5px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid black;
  position: absolute;
  top: 93px;
  right: 6px;
  width: 152px;
  z-index: 350; }
  .testPanel p {
    color: white;
    margin-top: 10px;
    text-shadow: 1px 1px 0 black; }

.testPanel label {
  left: 120px;
  position: absolute;
  color: white;
  top: 148px; }

.testPanel > button {
  margin: 8px 0 0; }

.testPanel button {
  background-image: -webkit-linear-gradient(top, #ffea00 0%, darkorange 100%);
  background-image: -moz-linear-gradient(top, #ffea00 0%, darkorange 100%);
  background-image: -ms-linear-gradient(top, #ffea00 0%, darkorange 100%);
  background-image: -o-linear-gradient(top, #ffea00 0%, darkorange 100%);
  background-image: linear-gradient(top, #ffea00 0%, darkorange 100%);
  border: solid 1px #ffbf00;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2px 13px;
  display: inline-block;
  line-height: 20px;
  color: black;
  margin: 8px 0 6px; }
  .testPanel button:hover {
    background-image: -webkit-linear-gradient(top, #ffea00 100%, darkorange 0%);
    background-image: -moz-linear-gradient(top, #ffea00 100%, darkorange 0%);
    background-image: -ms-linear-gradient(top, #ffea00 100%, darkorange 0%);
    background-image: -o-linear-gradient(top, #ffea00 100%, darkorange 0%);
    background-image: linear-gradient(top, #ffea00 100%, darkorange 0%); }
  .testPanel button:active {
    -webkit-transform: translate(2px 2px);
    -moz-transform: translate(2px 2px);
    transform: translate(2px 2px); }

.splitCity {
  position: absolute;
  background: #4F7158;
  width: 93px;
  height: 22px;
  top: 15px;
  left: 733px;
  border: 2px solid gold;
  color: white;
  padding-top: 2px; }

.highlighted {
  background: rgba(255, 255, 0, 0.75);
  border-radius: 6px;
  transform: rotateX(16deg); }

.hidden {
  display: none; }