/* TE TUHI
   Land of the blogs Styles
   Author: Jonathan Nicol (jonathan@f6design.com)
*****************************************************************/

#content.lotb {
  position: relative;
  margin-top: 20px;
  width: 740px;
  height: 667px;
  background: url(../img/lotb-bg.png) left bottom no-repeat;
}
.lotb-title {
  position: absolute;
  left: 56px;
  top: 39px;
}
.lotb-sprite {
  display: block;
  position: absolute;
  border: none;
  background-image: url('../img/lotb-sprites.png');
  background-repeat: no-repeat;
}
.lotb-hit-area {
  z-index: 1000;
  display: block;
  position: absolute;
  border: none;
  background: #fff;
  opacity: 0;
  filter: alpha(opacity=1);
}
/* Octopus sprite */
.lotb-octopus {
  left: 269px;
  top: 6px;
  width: 188px;
  height: 166px;
}
.lotb-sprite.lotb-octopus {
  background-position: 0 0;
}
.lotb-sprite.lotb-octopus.is-active {
  -webkit-animation: lotb-octopus-hover 2s steps(4,end) infinite;
  -moz-animation: lotb-octopus-hover 2s steps(4,end) infinite;
  animation: lotb-octopus-hover 2s steps(4,end) infinite;
}
@-webkit-keyframes lotb-octopus-hover {
  0% {background-position: 0 0;}
  100% {background-position: 0 -1200px;}
}
@-moz-keyframes lotb-octopus-hover {
  0% {background-position: 0 0;}
  100% {background-position: 0 -1200px;}
}
@keyframes lotb-octopus-hover {
  0% {background-position: 0 0;}
  100% {background-position: 0 -1200px;}
}
/* Poodle sprite */
.lotb-poodle {
  left: 140px;
  top: 149px;
  width: 76px;
  height: 101px;
  background-position: -188px 0;
}
.lotb-sprite.lotb-poodle {
  background-position: -188px 0;
}
.lotb-sprite.lotb-poodle.is-active {
  -webkit-animation: lotb-poodle-hover 0.5s steps(4,end) infinite;
  -moz-animation: lotb-poodle-hover 0.5s steps(4,end) infinite;
  animation: lotb-poodle-hover 0.5s steps(4,end) infinite;
}
@-webkit-keyframes lotb-poodle-hover {
  0% {background-position: -188px 0;}
  100% {background-position: -188px -1200px;}
}
@-moz-keyframes lotb-poodle-hover {
  0% {background-position: -188px 0;}
  100% {background-position: -188px -1200px;}
}
@keyframes lotb-poodle-hover {
  0% {background-position: -188px 0;}
  100% {background-position: -188px -1200px;}
}
/* Mushroom sprite */
.lotb-mushroom {
  left: 498px;
  top: 150px;
  width: 77px;
  height: 93px;
  background-position: -264px 0;
}
.lotb-sprite.lotb-mushroom.is-active {
  -webkit-animation: lotb-mushroom-hover 1.5s steps(4,end) infinite;
  -moz-animation: lotb-mushroom-hover 1.5s steps(4,end) infinite;
  animation: lotb-mushroom-hover 1.5s steps(4,end) infinite;
}
@-webkit-keyframes lotb-mushroom-hover {
  0% {background-position: -264px 0;}
  100% {background-position: -264px -1200px;}
}
@-moz-keyframes lotb-mushroom-hover {
  0% {background-position: -264px 0;}
  100% {background-position: -264px -1200px;}
}
@keyframes lotb-mushroom-hover {
  0% {background-position: -264px 0;}
  100% {background-position: -264px -1200px;}
}
/* Tarantula sprite */
.lotb-tarantula {
  left: 91px;
  top: 365px;
  width: 119px;
  height: 153px;
  background-position: -341px 0;
}
.lotb-sprite.lotb-tarantula.is-active {
  -webkit-animation: lotb-tarantula-hover 0.8s steps(4,end) infinite;
  -moz-animation: lotb-tarantula-hover 0.8s steps(4,end) infinite;
  animation: lotb-tarantula-hover 0.8s steps(4,end) infinite;
}
@-webkit-keyframes lotb-tarantula-hover {
  0% {background-position: -341px 0;}
  100% {background-position: -341px -1200px;}
}
@-moz-keyframes lotb-tarantula-hover {
  0% {background-position: -341px 0;}
  100% {background-position: -341px -1200px;}
}
@keyframes lotb-tarantula-hover {
  0% {background-position: -341px 0;}
  100% {background-position: -341px -1200px;}
}
/* fishbot sprite */
.lotb-fishbot {
  left: 490px;
  top: 482px;
  width: 65px;
  height: 113px;
  background-position: -460px 0;
}
.lotb-sprite.lotb-fishbot.is-active {
  -webkit-animation: lotb-fishbot-hover 1s steps(4,end) infinite;
  -moz-animation: lotb-fishbot-hover 1s steps(4,end) infinite;
  animation: lotb-fishbot-hover 1s steps(4,end) infinite;
}
@-webkit-keyframes lotb-fishbot-hover {
  0% {background-position: -460px 0;}
  100% {background-position: -460px -1200px;}
}
@-moz-keyframes lotb-fishbot-hover {
  0% {background-position: -460px 0;}
  100% {background-position: -460px -1200px;}
}
@keyframes lotb-fishbot-hover {
  0% {background-position: -460px 0;}
  100% {background-position: -460px -1200px;}
}
/* lightning sprite */
.lotb-lightning {
  left: 247px;
  top: 335px;
  width: 107px;
  height: 210px;
  background-position: -525px 0;
}
.lotb-sprite.lotb-lightning.is-active {
  -webkit-animation: lotb-lightning-hover 1s steps(4,end) infinite;
  -moz-animation: lotb-lightning-hover 1s steps(4,end) infinite;
  animation: lotb-lightning-hover 1s steps(4,end) infinite;
}
@-webkit-keyframes lotb-lightning-hover {
  0% {background-position: -525px 0;}
  100% {background-position: -525px -1200px;}
}
@-moz-keyframes lotb-lightning-hover {
  0% {background-position: -525px 0;}
  100% {background-position: -525px -1200px;}
}
@keyframes lotb-lightning-hover {
  0% {background-position: -525px 0;}
  100% {background-position: -525px -1200px;}
}
/* oliver sprite */
.lotb-oliver {
  left: 369px;
  top: 328px;
  width: 150px;
  height: 198px;
  background-position: -632px 0;
}
.lotb-sprite.lotb-oliver.is-active {
  -webkit-animation: lotb-oliver-hover 0.5s steps(4,end) infinite;
  -moz-animation: lotb-oliver-hover 0.5s steps(4,end) infinite;
  animation: lotb-oliver-hover 0.5s steps(4,end) infinite;
}
@-webkit-keyframes lotb-oliver-hover {
  0% {background-position: -632px 0;}
  100% {background-position: -632px -1200px;}
}
@-moz-keyframes lotb-oliver-hover {
  0% {background-position: -632px 0;}
  100% {background-position: -632px -1200px;}
}
@keyframes lotb-oliver-hover {
  0% {background-position: -632px 0;}
  100% {background-position: -632px -1200px;}
}
/* peggy sprite */
.lotb-peggy {
  left: 527px;
  top: 368px;
  width: 95px;
  height: 151px;
  background-position: -782px 0;
}
.lotb-sprite.lotb-peggy.is-active {
  -webkit-animation: lotb-peggy-hover 2s steps(4,end) infinite;
  -moz-animation: lotb-peggy-hover 2s steps(4,end) infinite;
  animation: lotb-peggy-hover 2s steps(4,end) infinite;
}
@-webkit-keyframes lotb-peggy-hover {
  0% {background-position: -782px 0;}
  100% {background-position: -782px -1200px;}
}
@-moz-keyframes lotb-peggy-hover {
  0% {background-position: -782px 0;}
  100% {background-position: -782px -1200px;}
}
@keyframes lotb-peggy-hover {
  0% {background-position: -782px 0;}
  100% {background-position: -782px -1200px;}
}
/* cyclops sprite */
.lotb-cyclops {
  left: 527px;
  top: 222px;
  width: 174px;
  height: 133px;
  background-position: -877px 0;
}
.lotb-sprite.lotb-cyclops.is-active {
  -webkit-animation: lotb-cyclops-hover 2s steps(4,end) infinite;
  -moz-animation: lotb-cyclops-hover 2s steps(4,end) infinite;
  animation: lotb-cyclops-hover 2s steps(4,end) infinite;
}
@-webkit-keyframes lotb-cyclops-hover {
  0% {background-position: -877px 0;}
  100% {background-position: -877px -1200px;}
}
@-moz-keyframes lotb-cyclops-hover {
  0% {background-position: -877px 0;}
  100% {background-position: -877px -1200px;}
}
@keyframes lotb-cyclops-hover {
  0% {background-position: -877px 0;}
  100% {background-position: -877px -1200px;}
}
/* daisy sprite */
.lotb-daisy {
  left: 162px;
  top: 498px;
  width: 114px;
  height: 158px;
  background-position: -1051px 0;
}
.lotb-sprite.lotb-daisy.is-active {
  -webkit-animation: lotb-daisy-hover 3s steps(4,end) infinite;
  -moz-animation: lotb-daisy-hover 3s steps(4,end) infinite;
  animation: lotb-daisy-hover 3s steps(4,end) infinite;
}
@-webkit-keyframes lotb-daisy-hover {
  0% {background-position: -1051px 0;}
  100% {background-position: -1051px -1200px;}
}
@-moz-keyframes lotb-daisy-hover {
  0% {background-position: -1051px 0;}
  100% {background-position: -1051px -1200px;}
}
@keyframes lotb-daisy-hover {
  0% {background-position: -1051px 0;}
  100% {background-position: -1051px -1200px;}
}
/* shrimpbot sprite */
.lotb-shrimpbot {
  left: 286px;
  top: 494px;
  width: 169px;
  height: 171px;
  background-position: -1165px 0;
}
.lotb-sprite.lotb-shrimpbot.is-active {
  -webkit-animation: lotb-shrimpbot-hover 2s steps(4,end) infinite;
  -moz-animation: lotb-shrimpbot-hover 2s steps(4,end) infinite;
  animation: lotb-shrimpbot-hover 2s steps(4,end) infinite;
}
@-webkit-keyframes lotb-shrimpbot-hover {
  0% {background-position: -1165px 0;}
  100% {background-position: -1165px -1200px;}
}
@-moz-keyframes lotb-shrimpbot-hover {
  0% {background-position: -1165px 0;}
  100% {background-position: -1165px -1200px;}
}
@keyframes lotb-shrimpbot-hover {
  0% {background-position: -1165px 0;}
  100% {background-position: -1165px -1200px;}
}
/* jelly sprite */
.lotb-jelly {
  left: 11px;
  top: 210px;
  width: 162px;
  height: 153px;
  background-position: -1334px 0;
}
.lotb-sprite.lotb-jelly.is-active {
  -webkit-animation: lotb-jelly-hover 1.5s steps(4,end) infinite;
  -moz-animation: lotb-jelly-hover 1.5s steps(4,end) infinite;
  animation: lotb-jelly-hover 1.5s steps(4,end) infinite;
}
@-webkit-keyframes lotb-jelly-hover {
  0% {background-position: -1334px 0;}
  100% {background-position: -1334px -1200px;}
}
@-moz-keyframes lotb-jelly-hover {
  0% {background-position: -1334px 0;}
  100% {background-position: -1334px -1200px;}
}
@keyframes lotb-jelly-hover {
  0% {background-position: -1334px 0;}
  100% {background-position: -1334px -1200px;}
}
/* Tooltip */
.lotb-tooltip {
  z-index: 999;
  position: absolute;
  left: -9999px;
  background: #000;
  border-width: 2px;
  border-color: #00ff00;
  border-style: solid;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  padding: 10px;
  min-height: 20px;
  min-width: 60px;
  max-width: 100px;
  text-align: center;
  -webkit-transform: scale(0,0);
  -moz-transform: scale(0,0);
  -ms-transform: scale(0,0);
  transform: scale(0,0);
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ie-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.175, 0.885, 0.320, 1.15);
  -moz-transition: -moz-transform 0.25s cubic-bezier(0.175, 0.885, 0.320, 1.15);
  -ms-transition: -ms-transform 0.25s cubic-bezier(0.175, 0.885, 0.320, 1.15);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.lotb-tooltip span {
  
}
.lotb-tooltip.show {
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  -ms-transform: scale(1,1);
  transform: scale(1,1);
}
.lotb-tooltip:after, .lotb-tooltip:before {
  left: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.lotb-tooltip:after {
  border-color: transparent; /* for IE8 */
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #88b7d5;
  border-width: 8px;
  top: 50%;
  margin-top: -8px;
}
.lotb-tooltip:before {
  border-color: transparent; /* for IE8 */
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #c2e1f5;
  border-width: 11px;
  top: 50%;
  margin-top: -11px;
}
/* reversed tooltip */
.lotb-tooltip.right:after, .lotb-tooltip.right:before {
  left: auto;
  right: 100%;
}
.lotb-tooltip.right {
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ie-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}
.lotb-tooltip.right:after {
  border-left-color: transparent; /* for IE8 */
  border-left-color: rgba(255, 255, 255, 0);
  border-right-color: #88b7d5;
}
.lotb-tooltip.right:before {
  border-left-color: transparent; /* for IE8 */
  border-left-color: rgba(255, 255, 255, 0);
  border-right-color: #c2e1f5;
}
/* all colors */
.lotb-tooltip.right.color-1:after,
.lotb-tooltip.right.color-1:before,
.lotb-tooltip.right.color-2:after,
.lotb-tooltip.right.color-2:before,
.lotb-tooltip.right.color-3:after,
.lotb-tooltip.right.color-3:before,
.lotb-tooltip.right.color-4:after,
.lotb-tooltip.right.color-4:before,
.lotb-tooltip.right.color-5:after,
.lotb-tooltip.right.color-5:before,
.lotb-tooltip.right.color-6:after,
.lotb-tooltip.right.color-6:before,
.lotb-tooltip.right.color-7:after,
.lotb-tooltip.right.color-7:before,
.lotb-tooltip.right.color-8:after,
.lotb-tooltip.right.color-8:before,
.lotb-tooltip.right.color-9:after,
.lotb-tooltip.right.color-9:before {
  border-left-color: transparent; /* for IE8 */
  border-left-color: rgba(255, 255, 255, 0);
}

/* color 1 */
.lotb-tooltip.color-1 {
  border-color: #f6a03c;
  color: #f6a03c;
  background-color: #eaeebf;
}
.lotb-tooltip.color-1:after {
  border-left-color: #eaeebf;
}
.lotb-tooltip.color-1:before {
  border-left-color: #f6a03c;
}
.lotb-tooltip.right.color-1:after {
  border-right-color: #eaeebf;
}
.lotb-tooltip.right.color-1:before {
  border-right-color: #f6a03c;
}
/* color 2 */
.lotb-tooltip.color-2 {
  border-color: #f07b2c;
  color: #f07b2c;
  background-color: #eee350;
}
.lotb-tooltip.color-2:after {
  border-left-color: #eee350;
}
.lotb-tooltip.color-2:before {
  border-left-color: #f07b2c;
}
.lotb-tooltip.right.color-2:after {
  border-right-color: #eee350;
}
.lotb-tooltip.right.color-2:before {
  border-right-color: #f07b2c;
}
/* color 3 */
.lotb-tooltip.color-3 {
  border-color: #968934;
  color: #968934;
  background-color: #c3e5e8;
}
.lotb-tooltip.color-3:after {
  border-left-color: #c3e5e8;
}
.lotb-tooltip.color-3:before {
  border-left-color: #968934;
}
.lotb-tooltip.right.color-3:after {
  border-right-color: #c3e5e8;
}
.lotb-tooltip.right.color-3:before {
  border-right-color: #968934;
}
/* color 4 blue/green */
.lotb-tooltip.color-4 {
  border-color: #7eba46;
  color: #7eba46;
  background-color: #c3e5e8;
}
.lotb-tooltip.color-4:after {
  border-left-color: #c3e5e8;
}
.lotb-tooltip.color-4:before {
  border-left-color: #7eba46;
}
.lotb-tooltip.right.color-4:after {
  border-right-color: #c3e5e8;
}
.lotb-tooltip.right.color-4:before {
  border-right-color: #7eba46;
}
/* color 5 orange/red */
.lotb-tooltip.color-5 {
  border-color: #d81729;
  color: #d81729;
  background-color: #f6a03c;
}
.lotb-tooltip.color-5:after {
  border-left-color: #f6a03c;
}
.lotb-tooltip.color-5:before {
  border-left-color: #d81729;
}
.lotb-tooltip.right.color-5:after {
  border-right-color: #f6a03c;
}
.lotb-tooltip.right.color-5:before {
  border-right-color: #d81729;
}
/* color 6 yellow/green */
.lotb-tooltip.color-6 {
  border-color: #267d3d;
  color: #267d3d;
  background-color: #eee350;
}
.lotb-tooltip.color-6:after {
  border-left-color: #eee350;
}
.lotb-tooltip.color-6:before {
  border-left-color: #267d3d;
}
.lotb-tooltip.right.color-6:after {
  border-right-color: #eee350;
}
.lotb-tooltip.right.color-6:before {
  border-right-color: #267d3d;
}
/* color 7 yellow/red */
.lotb-tooltip.color-7 {
  border-color: #d81729;
  color: #d81729;
  background-color: #eee350;
}
.lotb-tooltip.color-7:after {
  border-left-color: #eee350;
}
.lotb-tooltip.color-7:before {
  border-left-color: #d81729;
}
.lotb-tooltip.right.color-7:after {
  border-right-color: #eee350;
}
.lotb-tooltip.right.color-7:before {
  border-right-color: #d81729;
}
/* color 8 lemon/green */
.lotb-tooltip.color-8 {
  border-color: #acca54;
  color: #acca54;
  background-color: #f7ef91;
}
.lotb-tooltip.color-8:after {
  border-left-color: #f7ef91;
}
.lotb-tooltip.color-8:before {
  border-left-color: #acca54;
}
.lotb-tooltip.right.color-8:after {
  border-right-color: #f7ef91;
}
.lotb-tooltip.right.color-8:before {
  border-right-color: #acca54;
}
/* color 9 yellow/black */
.lotb-tooltip.color-9 {
  border-color: #000;
  color: #000;
  background-color: #eee350;
}
.lotb-tooltip.color-9:after {
  border-left-color: #eee350;
}
.lotb-tooltip.color-9:before {
  border-left-color: #000;
}
.lotb-tooltip.right.color-9:after {
  border-right-color: #eee350;
}
.lotb-tooltip.right.color-9:before {
  border-right-color: #000;
}