@import url(http://fonts.googleapis.com/css?family=Nunito);

@font-face {
  font-family: 'LCD';
  src: url('lcd/lcd.eot');
  src: url('lcd/lcd.eot?#iefix') format('embedded-opentype'),
       url('lcd/lcd.woff') format('woff'),
       url('lcd/lcd.ttf') format('truetype'),
       url('lcd/lcd.svg#LCDMonoNormal') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  background-color: #EEE;
}

#rts {
  position: relative;
}

#board {
  position: relative;
  left: 72px;
  background: url('img/board.jpg');
  width: 400px;
  height: 268px;
  margin-bottom: 20px;
}

.box {
  position: absolute;
  left: 48px;
  top: 58px;
  font-family: 'LCD', serif;
  text-transform: uppercase;
  font-size: 35px;
  line-height: 41px;
  color: yellow;
  width: 300px;
  height: 5em;
  cursor: default;
}

.box input[type=text] {
  background: none;
  color: yellow;
  font-size: 35px;
  font-family: 'LCD', serif;
  border: 1px solid yellow;
  text-align: right;
  margin-left: 50px;
  padding: 0;
}

.box button {
  background: none;
  color: yellow;
  border: none;
  font-size: 35px;
  font-family: 'LCD', serif;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.box button:hover {
  color: red;
}

.box #run {
  margin-left: 50px;
}

.box #button1, .box #button2 {
  margin-left: 60px;
}

.box #race {
  text-align: center;
}

.box .title {
  margin-left: 90px;
}

.box .swimmerNames {
  float: left;
}

.box .swimmerResults {
  float: right;
  text-align: right;
}

#pool {
  position: relative;
  background: url('img/pool.jpg') no-repeat 0 0px;
  height: 244px;
  width: 540px;
  overflow: hidden;
}

#pool_outline {
  position: absolute;
  top: 0px;
  left: 0;
  background: url('img/pool_outline.png') no-repeat;
  height: 244px;
  width: 540px;
  z-index: 1;
}

#bubble {
  z-index: 1000;
  position: absolute;
  bottom: 50px;
  left: 60px;
  width: 380px;
  height: 258px;
  background-image: url('img/bubblegb7.png');
  text-shadow: 1px 1px 1px #fff;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s;
  -moz-transition-property: opacity;
  -moz-transition-duration: 1s;
  -o-transition-property: opacity;
  -o-transition-duration: 1s;
}

#bubble.visible {
  visibility: visible;
  opacity: 1;
}

#bubble.invisible {
  visibility: hidden;
  opacity: 0;
}

#closeBubbleButton {
  width: 14px;
  height: 14px;
  float: right;
  cursor: pointer;
  z-index: 1000;
  background-image: url('img/cross3.png');
  margin: 0 0 5px 5px;
}

#bubbleContent {
  font-family: 'Nunito', arial, sans-serif;
  font-size: 14px;
  position: absolute;
  left: 40px;
  top: 0px;
  width: 310px;
  height: 300px;
  padding: 15px;
}

#bubbleContent p {
  margin: 10px;
}

#bubbleContent em {
  font-weight: bold;
}

#bubbleContent strong {
  font-weight: bold;
}

#bubbleContent h1 {
  margin: 0.2em 0 0.5em 0;
  font-size: 16px;
  color: red;
}

#bubbleContent a:link, #bubbleContent a:visited {
  color: #0000FF;
}

#tw {
  cursor: pointer;
  text-decoration: underline;
}

#tw {
  color: #0094C2;
}

#swimmer0, #swimmer1, #swimmer2, #swimmer3 {
  width: 128px;
  height: 50px;
  position: absolute;
  background-image: url('img/swimmers.png');
}

#swimmer0 { top: 37px; }
#swimmer1 { top: 84px; }
#swimmer2 { top: 131px; }
#swimmer3 { top: 178px; }

.adlington0f { background-position: 0px 0px;}
.adlington1f { background-position: -150px 0px;}
.adlington2f { background-position: -300px 0px;}
.adlington3f { background-position: -450px 0px;}
.adlington3b { background-position: -600px 0px;}
.adlington2b { background-position: -750px 0px;}
.adlington1b { background-position: -900px 0px;}
.adlington0b { background-position: -1050px 0px;}
.davies0f { background-position: 0px -59px;}
.davies1f { background-position: -150px -59px;}
.davies2f { background-position: -300px -59px;}
.davies3f { background-position: -450px -59px;}
.davies3b { background-position: -600px -59px;}
.davies2b { background-position: -750px -59px;}
.davies1b { background-position: -900px -59px;}
.davies0b { background-position: -1050px -59px;}
.craig0f { background-position: 0px -117px;}
.craig1f { background-position: -150px -117px;}
.craig2f { background-position: -300px -117px;}
.craig3f { background-position: -450px -117px;}
.craig3b { background-position: -600px -117px;}
.craig2b { background-position: -750px -117px;}
.craig1b { background-position: -900px -117px;}
.craig0b { background-position: -1050px -117px;}
.simmonds0f { background-position: 0px -176px;}
.simmonds1f { background-position: -150px -176px;}
.simmonds2f { background-position: -300px -176px;}
.simmonds3f { background-position: -450px -176px;}
.simmonds3b { background-position: -600px -176px;}
.simmonds2b { background-position: -750px -176px;}
.simmonds1b { background-position: -900px -176px;}
.simmonds0b { background-position: -1050px -176px;}
.halsall0f { background-position: 0px -234px;}
.halsall1f { background-position: -150px -234px;}
.halsall2f { background-position: -300px -234px;}
.halsall3f { background-position: -450px -234px;}
.halsall3b { background-position: -600px -234px;}
.halsall2b { background-position: -750px -234px;}
.halsall1b { background-position: -900px -234px;}
.halsall0b { background-position: -1050px -234px;}
.tancock0f { background-position: 0px -293px;}
.tancock1f { background-position: -150px -293px;}
.tancock2f { background-position: -300px -293px;}
.tancock3f { background-position: -450px -293px;}
.tancock3b { background-position: -600px -293px;}
.tancock2b { background-position: -750px -293px;}
.tancock1b { background-position: -900px -293px;}
.tancock0b { background-position: -1050px -293px;}
.you0f { background-position: 0px -351px;}
.you1f { background-position: -150px -351px;}
.you2f { background-position: -300px -351px;}
.you3f { background-position: -450px -351px;}
.you3b { background-position: -600px -351px;}
.you2b { background-position: -750px -351px;}
.you1b { background-position: -900px -351px;}
.you0b { background-position: -1050px -351px;}

#replay {
  position: absolute;
  width: 26px;
  height: 26px;
  left: 274px;
  top: 7px;
  cursor: pointer;
  z-index: 1000;
  background-image: url('img/replay2.png');
}

#replay:hover {
  background-position: -26px 0px;
}