@charset "utf-8";

/* General styles */
@font-face {
    font-family: 'komika_textregular';
    src: url('../font/KOMTXT__-webfont.eot');
    src: url('../font/KOMTXT__-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/KOMTXT__-webfont.woff') format('woff'),
         url('../font/KOMTXT__-webfont.ttf') format('truetype'),
         url('../font/KOMTXT__-webfont.svg#komika_textregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
  background-color: #000;
  margin-top: 50px;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  -moz-user-drag: none;
  -khtml-user-drag: none;
  -webkit-user-drag: none;
  -o-user-drag: none;
  font-family: 'komika_textregular';
  font-size: 22px;
}

a {
   outline: 0;
   font-size: 18px;
   color: #E9E9E9;
   text-decoration: none;
}

li {
  list-style-type: none;
}

#container {
	position:relative;
	width:800px;
	height:450px;
	z-index:1;
	top: 0px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

.battle {
  background-image: url("../images/bg.jpg");
}

.door {
  background-image: url("../images/wood-bg1.jpg");
}

.error {
  color: #FFF;
}
.error-text {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

#return {
	position:absolute;
	width:800px;
	height:20px;
	z-index:2;
	top: 460px;
	text-align: center;
  font-size: 18px;
}

/* Animation styles */

  @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

  @-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
  @-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
  @keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

  @keyframes explosion {
    0% {
      opacity: 0;
    }
    2% {
      opacity: 1;
    }
    30% {
      opacity: .10;
    }
    32% {
      opacity: .25;
    }
    100% {
      opacity: 0;
    }
  }

  @-moz-keyframes explosion {
    0% {
      opacity: 0;
    }
    2% {
      opacity: 1;
    }
    30% {
      opacity: .10;
    }
    32% {
      opacity: .25;
    }
    100% {
      opacity: 0;
    }
  }

  @-webkit-keyframes explosion {
    0% {
      opacity: 0;
    }
    2% {
      opacity: 1;
    }
    30% {
      opacity: .10;
    }
    32% {
      opacity: .25;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes flash {
  	0% {
  		opacity: 1;
  	}
  	100% {
  		opacity: 0;
  	}
  }

  @-moz-keyframes flash {
  	0% {
  		opacity: 1;
  	}
  	100% {
  		opacity: 0;
  	}
  }

  @-webkit-keyframes flash {
  	0% {
  		opacity: 1;
  	}
  	100% {
  		opacity: 0;
  	}
  }

  @-webkit-keyframes fadeWhite {
  		from {
  				opacity:0;
  			}
  			75% {
  				opacity: 0.50;
  			}
  			to {
  				opacity:1;
  			}
  		}
  @-moz-keyframes fadeWhite {
  		from {
  			opacity:0;
  		}
  		75% {
  			opacity: 0.50;
  		}
  		to {
  			opacity:1;
  		}
  	}
  @keyframes fadeWhite {
  		from {
  			opacity:0;
  		}
  		75% {
  			opacity: 0.50;
  		}
  		to {
  			opacity:1;
  		}
  	}

    @keyframes flicker {
        0% {
        opacity: .20;
    }
    2% {
        opacity: .30;
    }
    4% {
        opacity: .50;
    }
    6% {
        opacity: .50;
    }
    8% {
        opacity: .20;
    }
    10% {
        opacity: .40;
    }
    12% {
        opacity: .30;
    }
    14% {
        opacity: .50;
    }
    16% {
        opacity: .20;
    }
    18% {
        opacity: .50;
    }
    20% {
        opacity: .50;
    }
    22% {
        opacity: .40;
    }
    24% {
        opacity: .20;
    }
    26% {
        opacity: .50;
    }
    28% {
        opacity: .50;
    }
    30% {
        opacity: .50;
    }
    32% {
        opacity: .40;
    }
    34% {
        opacity: .50;
    }
    36% {
        opacity: .40;
    }
    38% {
        opacity: .30;
    }
    40% {
        opacity: .20;
    }
    42% {
        opacity: .50;
    }
    44% {
        opacity: .30;
    }
    46% {
        opacity: .20;
    }
    48% {
        opacity: .50;
    }
    50% {
        opacity: .20;
    }
    52% {
        opacity: .20;
    }
    54% {
        opacity: .20;
    }
    56% {
        opacity: .30;
    }
    58% {
        opacity: .40;
    }
    60% {
        opacity: .50;
    }
    62% {
        opacity: .50;
    }
    64% {
        opacity: .30;
    }
    66% {
        opacity: .20;
    }
    68% {
        opacity: .30;
    }
    70% {
        opacity: .40;
    }
    72% {
        opacity: .40;
    }
    74% {
        opacity: .50;
    }
    76% {
        opacity: .20;
    }
    78% {
        opacity: .40;
    }
    80% {
        opacity: .40;
    }
    82% {
        opacity: .30;
    }
    84% {
        opacity: .30;
    }
    86% {
        opacity: .20;
    }
    88% {
        opacity: .20;
    }
    90% {
        opacity: .50;
    }
    92% {
        opacity: .20;
    }
    94% {
        opacity: .20;
    }
    96% {
        opacity: .50;
    }
    98% {
        opacity: .20;
    }
    }
    @-moz-keyframes flicker {
        0% {
        opacity: .20;
    }
    2% {
        opacity: .30;
    }
    4% {
        opacity: .50;
    }
    6% {
        opacity: .50;
    }
    8% {
        opacity: .20;
    }
    10% {
        opacity: .40;
    }
    12% {
        opacity: .30;
    }
    14% {
        opacity: .50;
    }
    16% {
        opacity: .20;
    }
    18% {
        opacity: .50;
    }
    20% {
        opacity: .50;
    }
    22% {
        opacity: .40;
    }
    24% {
        opacity: .20;
    }
    26% {
        opacity: .50;
    }
    28% {
        opacity: .50;
    }
    30% {
        opacity: .50;
    }
    32% {
        opacity: .40;
    }
    34% {
        opacity: .50;
    }
    36% {
        opacity: .40;
    }
    38% {
        opacity: .30;
    }
    40% {
        opacity: .20;
    }
    42% {
        opacity: .50;
    }
    44% {
        opacity: .30;
    }
    46% {
        opacity: .20;
    }
    48% {
        opacity: .50;
    }
    50% {
        opacity: .20;
    }
    52% {
        opacity: .20;
    }
    54% {
        opacity: .20;
    }
    56% {
        opacity: .30;
    }
    58% {
        opacity: .40;
    }
    60% {
        opacity: .50;
    }
    62% {
        opacity: .50;
    }
    64% {
        opacity: .30;
    }
    66% {
        opacity: .20;
    }
    68% {
        opacity: .30;
    }
    70% {
        opacity: .40;
    }
    72% {
        opacity: .40;
    }
    74% {
        opacity: .50;
    }
    76% {
        opacity: .20;
    }
    78% {
        opacity: .40;
    }
    80% {
        opacity: .40;
    }
    82% {
        opacity: .30;
    }
    84% {
        opacity: .30;
    }
    86% {
        opacity: .20;
    }
    88% {
        opacity: .20;
    }
    90% {
        opacity: .50;
    }
    92% {
        opacity: .20;
    }
    94% {
        opacity: .20;
    }
    96% {
        opacity: .50;
    }
    98% {
        opacity: .20;
    }
    }
    @-webkit-keyframes flicker {
        0% {
        opacity: .20;
    }
    2% {
        opacity: .30;
    }
    4% {
        opacity: .50;
    }
    6% {
        opacity: .50;
    }
    8% {
        opacity: .20;
    }
    10% {
        opacity: .40;
    }
    12% {
        opacity: .30;
    }
    14% {
        opacity: .50;
    }
    16% {
        opacity: .20;
    }
    18% {
        opacity: .50;
    }
    20% {
        opacity: .50;
    }
    22% {
        opacity: .40;
    }
    24% {
        opacity: .20;
    }
    26% {
        opacity: .50;
    }
    28% {
        opacity: .50;
    }
    30% {
        opacity: .50;
    }
    32% {
        opacity: .40;
    }
    34% {
        opacity: .50;
    }
    36% {
        opacity: .40;
    }
    38% {
        opacity: .30;
    }
    40% {
        opacity: .20;
    }
    42% {
        opacity: .50;
    }
    44% {
        opacity: .30;
    }
    46% {
        opacity: .20;
    }
    48% {
        opacity: .50;
    }
    50% {
        opacity: .20;
    }
    52% {
        opacity: .20;
    }
    54% {
        opacity: .20;
    }
    56% {
        opacity: .30;
    }
    58% {
        opacity: .40;
    }
    60% {
        opacity: .50;
    }
    62% {
        opacity: .50;
    }
    64% {
        opacity: .30;
    }
    66% {
        opacity: .20;
    }
    68% {
        opacity: .30;
    }
    70% {
        opacity: .40;
    }
    72% {
        opacity: .40;
    }
    74% {
        opacity: .50;
    }
    76% {
        opacity: .20;
    }
    78% {
        opacity: .40;
    }
    80% {
        opacity: .40;
    }
    82% {
        opacity: .30;
    }
    84% {
        opacity: .30;
    }
    86% {
        opacity: .20;
    }
    88% {
        opacity: .20;
    }
    90% {
        opacity: .50;
    }
    92% {
        opacity: .20;
    }
    94% {
        opacity: .20;
    }
    96% {
        opacity: .50;
    }
    98% {
        opacity: .20;
    }
    }



.fade-in-1, .fade-in-2, .fade-in-3, .fade-in-4, .dialog-fade-in {
    opacity:0;  /* make things invisible upon start */
}
.fade-in-1 {
  -webkit-animation:fadeIn 1s ease-in 1 forwards;
  -moz-animation:fadeIn 1s ease-in 1 forwards;
  animation:fadeIn 1s ease-in 1 forwards;
}

.fade-in-2 {
  -webkit-animation:fadeIn 2s ease-in 1 forwards;
  -moz-animation:fadeIn 2s ease-in 1 forwards;
  animation:fadeIn 2s ease-in 1 forwards;
}

.fade-in-3 {
  -webkit-animation:fadeIn 3s ease-in 1 forwards;
  -moz-animation:fadeIn 3s ease-in 1 forwards;
  animation:fadeIn 3s ease-in 1 forwards;
}

.fade-in-4 {
  -webkit-animation:fadeIn 4s ease-in 1 forwards;
  -moz-animation:fadeIn 4s ease-in 1 forwards;
  animation:fadeIn 4s ease-in 1 forwards;
}

.dialog-fade-in {
  -webkit-animation:fadeIn .9s ease-in 1 forwards;
  -moz-animation:fadeIn .9s ease-in 1 forwards;
  animation:fadeIn .9s ease-in 1 forwards;
}

.final-fade {
  -webkit-animation: fadeOut 2s ease-in 1 forwards 5s;
  -moz-animation: fadeOut 2s ease-in 1 forwards 5s;
  animation: fadeOut 2s ease-in 1 forwards 5s;
}

/* Soldiers */
#soldier_a, #soldier_b, #soldier_c, #soldier_d,
#soldier_e, #soldier_f, #soldier_g {
  opacity: 0;
}

#soldier_a:hover, #soldier_b:hover, #soldier_c:hover, #soldier_d:hover,
#soldier_e:hover, #soldier_f:hover, #soldier_g:hover {
  -webkit-animation:explosion .9s 1 forwards;
  -moz-animation:explosion .9s 1 forwards;
  animation:explosion .9s 1 forwards;
}

#soldier_a {
	position:absolute;
	width:62px;
	height:88px;
	z-index:3;
	left: 94px;
	top: 252px;
  background-image: url("../images/a_on.jpg")
}
#soldier_b {
	position:absolute;
	width:82px;
	height:75px;
	z-index:4;
	left: 210px;
	top: 251px;
  background-image: url("../images/b_on.jpg")
}
#soldier_c {
	position:absolute;
	width:61px;
	height:56px;
	z-index:5;
	left: 684px;
	top: 175px;
  	background-image: url("../images/c_on.jpg")
}
#soldier_d {
	position:absolute;
	width:87px;
	height:45px;
	z-index:6;
	left: 645px;
	top: 236px;
  background-image: url("../images/d_on.jpg")
}
#soldier_e {
	position:absolute;
	width:54px;
	height:46px;
	z-index:7;
	left: 606px;
	top: 281px;
  background-image: url("../images/e_on.jpg")
}
#soldier_f {
	position:absolute;
	width:103px;
	height:49px;
	z-index:8;
	left: 662px;
	top: 283px;
  background-image: url("../images/f_on.jpg")
}
#soldier_g {
	position:absolute;
	width:211px;
	height:121px;
	z-index:9;
	left: 589px;
	top: 329px;
  background-image: url("../images/g_on.jpg")
}

/* Speech Ballons */
blockquote {
	position: absolute;
	padding: 8px 14px 10px 14px;
	margin: 1em 0px 3em;
	border: 2px solid #000;
	display: block;
	color: #000;
	background: none repeat scroll 0% 0% #FFF;
	border-radius: 35px;
	max-width: 300px;
	font-size: 22px;
	z-index: 100;
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:.9s;
	-moz-animation-duration:.9s;
	animation-duration:.9s;

	text-align: center;
	line-height: 24px;
}

blockquote p {
	margin: 0px;
}

/* General Tail Styles */
#balloon-a::before, #balloon-b::before, #balloon-c::before,
#balloon-d::before, #balloon-e::before, #balloon-f::before,
#balloon-g::before {
		content: "";
    position: absolute;
    z-index: 10;
    bottom: -50px;
    width: 78px;
    height: 50px;
    display: block;
}

/* Left Tail */
#balloon-a::before, #balloon-b::before {
		left: 25px;
		background: url(../images/balloon-tail-left.png);
}

#balloon-f::before {
	right: 40px;
	background: url(../images/balloon-tail-left.png);
}

/* Right Tail */
#balloon-c::before, #balloon-d::before, #balloon-e::before,
#balloon-g::before {
		right: 25px;
		background: url(../images/balloon-tail-right.png);
}

/* Ballon Specific Classes */
#balloon-a {
	bottom: 175px;
	left: 115px;
}

#balloon-b {
	bottom: 160px;
	left: 260px;
}

#balloon-c {
	bottom: 240px;
	right: 85px;
}

#balloon-d {
	bottom: 185px;
	right: 120px;
}

#balloon-e {
	bottom: 145px;
	right: 140px;
}

#balloon-f {
	bottom: 120px;
	right: 10px;
}

#balloon-g {
	bottom: 90px;
	right: 140px;
}

/* Thought balloons */
.thought {
  width: 146px;
  height: 125px;
  position:absolute;
  z-index: 1000;
}

#thought-content {
width: 100px;
margin-left: 24px;
margin-top: 40px;
}

.blue p .gold p {
  text-align: center;
}

.blue p {
  color: #1793d6;
}

.gold p {
  color: #d6b617;
}

#thought-a, #thought-b {
  background-image: url(../images/thought_left.png);
}

#thought-c, #thought-d, #thought-e, #thought-f, #thought-g {
  background-image: url(../images/thought_right.png);
}

#thought-a {
	bottom: 195px;
	left: 134px;
}

#thought-b {
	bottom: 185px;
	left: 279px;
}

#thought-c {
	bottom: 265px;
	right: 99px;
}

#thought-d {
	bottom: 213px;
	right: 147px;
}

#thought-e {
	bottom: 170px;
	right: 164px;
}

#thought-f {
	bottom: 155px;
	right: 134px;
}

#thought-g {
	bottom: 112px;
	right: 161px;
}

/* Locks */
.lock, .lock-flash, .lock-flicker {
  width: 78px;
  height: 78px;
}

.lock {
  position: relative;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  background-image: url("../images/lock.png");
  -webkit-transition: background 0.5s linear;
  -moz-transition: background 0.5s linear;
  -o-transition: background 0.5s linear;
  transition: background 0.5s linear;
}

.keyhole-fade-in {
opacity:0;  /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
animation-duration:.5s;
}

.lock-flash:hover {
  background-image: url("../images/lock-flash.png");
  animation-name: flash;
  -moz-animation-name: flash;
  -webkit-animation-name: flash;

  animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;

  animation-delay: 0;
  -moz-animation-delay: 0;
  -webkit-animation-delay: 0;

  animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

.lock-flicker {
  position: absolute;
  opacity: 0;
  background-image: url("../images/lock-flicker.png");
}

.lock-flicker:hover {
	animation-name: flicker;
  -moz-animation-name: flicker;
	-webkit-animation-name: flicker;

	animation-duration: 4s;
  -moz-animation-duration: 4s;
	-webkit-animation-duration: 4s ;

  animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;

	animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

#lock-1, #lock-2, #lock-3, #lock-4, #lock-5, #lock-6, #lock-7 {
  top: 300px;
}

.door .key {
  background-image: url("../images/key3.png");
  width: 74px;
  height: 56px;
  top: 310px;
  margin-left: 10px;
  margin-right: 10px;
}

.keyhole-out {
	background-image: url(../images/key_hole_light.jpg);
}


.mouse-on:hover {
	transition: none;
	-o-transition: none;
	-ms-transition: none;
	-moz-transition: none;
	-webkit-transition: none;
	zoom: 1;
	opacity: 1;
}

.fade-in {
opacity:0;  /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:.9s;
-moz-animation-duration:.9s;
animation-duration:.9s;
}

/* Verses */
.verse {
 display: none;
}

/* Small Chests */
#small-chest {
  width: 44px;
  height: 54px;
  position: relative;
  left: 50px;
  top: 23px;
  background-image: url(../images/chest_small_off.gif);
}

#small-chest:hover {
  background-image: url(../images/chest_small_on.gif);
}

/* Large Chests */
#chest-closed, #chest-open {
    position: absolute;
    display: block;
    width: 206px;
    height: 213px;
    left: 50%;
    margin-left: -103px;
    top: 50%;
    margin-top: -106px;
}

#chest-closed {
  background: url(../images/chest_off.png) left bottom no-repeat;
  opacity: 0;
  -webkit-animation:fadeIn 1s ease-in 1 forwards;
  -moz-animation:fadeIn 1s ease-in 1 forwards;
  animation:fadeIn 1s ease-in 1 forwards;
}

#chest-closed:hover {
  background: url(../images/chest_on.png) left bottom no-repeat;
}

#chest-open {
  background: url(../images/chest_open.gif) left bottom no-repeat;
}

/* Keys */
#key, #key-fake-out {
  position: relative;
  width: 50px;
  height: 38px;
  left: 50px;
  top: 35px;
  z-index: 1000;
}

#key {
  background-image: url(../images/key.gif);
}

#key-fake-out {
  background-image: url(../images/key_off.gif);
}

#key-fake-out:hover {
  -webkit-animation:fadeOut ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeOut ease-in 1;
  animation:fadeOut ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:.3s;
  -moz-animation-duration:.3s;
  animation-duration:.3s;
}

.key {
  	position:relative;
    width: 50px;
    height: 38px;
    top: 395px;
    margin-left: 10px;
    left:15px;
    background-image: url(../images/key.png);
    float: left;
}

/* Verse styles */
#verse {
  position:absolute;
  width:410px;
  height:auto;
  z-index:1;
  left: 197px;
  top: 160px;
  line-height: 26px;
  font-size: 18px;
  font-style: normal;
}
#rings {
  background-image: url("../images/rings_off.jpg");
  width: 88px;
  height: 88px;
  position:absolute;
  z-index:4;
  left: 348px;
  top: 325px;
}

#rings:hover {
  background-image: url("../images/rings_on.jpg");
}

#verse-text {
	position:absolute;
	width:410px;
	height:auto;
	z-index:1;
	left: 197px;
	top: 160px;
	line-height: 26px;
	font-size: 18px;
	font-style: normal;
}

#verse-text p {
  margin: 0px;
}

/* Fade to white "white screen" */
#white-screen {
	background-color: #FFF;
	position: absolute;
	z-index: 9999;
	width: 800px;
	height: 450px;
	top: 0px;
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeWhite 5s ease-in 1 forwards;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeWhite 5s ease-in 1 forwards;
	animation:fadeWhite 5s ease-in 1 forwards;
}

/* Tip */
.tip {
	z-index: 99999;
	opacity:0;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	top: 15px;
	right: 15px;
	display; block;
	color: #FFF;
	padding: 10px;

	border-radius: 5px;
	opacity:0;  /* make things invisible upon start */
	animation: fadeIn 0.5s linear 1s ;
	animation-fill-mode: forwards;
}

.tip:target {
	display:none;
}

.close {
	font-size: 12px;
	text-decoration: none;
	margin-left: 8px;
	margin-right: 4px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFF;
}
