/* Common styles */
body { background: #ccc; margin: 0px; font-family: "Lucida Grande"; font-size: 14px; }

#samples-container { position: absolute; width: 1024px; background: #fff; margin: 0px 0px 0px 50px; }

/**************************/
/* Animated Header styles */
/**************************/
#header-nav #top-container { width: 1024px; height: 138px; background: #000; font: normal normal normal 36px/36px "Courier New"; color: #cf7f00; }
#header-nav #top-container #dungeon-container { position: absolute; width: 512px; height: 137px; overflow: hidden; }

#header-nav #room-blocker { position: absolute; width: 104px; height: 32px; top: 53px; left: 380px; background-color: #000000; }
#header-nav #room-blocker.hidden { display: none; }

#header-nav #rogue { position: absolute; top: -38px; left: 53px; background-color: #000000; color: #d6de00; font-weight: bold; }

#header-nav .monster { position: absolute; background-color: #000000; color: #cf7f00; font-weight: bold; }
#header-nav .first-wave { top: 137px; left: 184px; }
#header-nav .second-wave { top: 137px; left: 313px; }

#header-nav #dungeon-container.animate #room-blocker { -webkit-animation: "show-treasure" 10s linear both; }
#header-nav #dungeon-container.animate #rogue { -webkit-animation: "move-rogue" 10s linear both; }
#header-nav #dungeon-container.animate #monster-h { -webkit-animation: "move-h" 10s linear both; }
#header-nav #dungeon-container.animate #monster-c { -webkit-animation: "move-c" 10s linear both; }
#header-nav #dungeon-container.animate #monster-j { -webkit-animation: "move-j" 10s linear both; }
#header-nav #dungeon-container.animate #monster-p { -webkit-animation: "move-p" 10s linear both; }
#header-nav #dungeon-container.animate #monster-m { -webkit-animation: "move-m" 10s linear both; }

/* Logo container */
#header-nav #logo-container { position: absolute; top: 30px; left: 670px; width: 310px; }
#header-nav #logo-container .logo { font-size: 36px; font-weight: bold; color: #33cc33; text-align: center; margin: 0px 0px 10px 0px; }
#header-nav #logo-container .caption { font-size: 18px; font-weight: bold; line-height: 20px; text-align: center; color: #ff9999; }

/* Tabs */
#header-nav #tab-container { display: block; width: 1024px; height: 50px; }
#header-nav #tab-container ul { float: left; padding: 0px; margin-left: 30px; }
#header-nav #tab-container ul li { display: inline-block; margin: 0px 40px 0px 30px; }
#header-nav #tab-container a { color: #404040; font: 18px "Lucida Grande"; text-decoration: none; }

/***************************/
/*   Animations            */
/***************************/
@-webkit-keyframes show-treasure { 0%, 70% { opacity: 1; }
  70.2%, 100% { opacity: 0; } }

@-webkit-keyframes move-rogue { 0%, 3% { -webkit-transform: translate3d(0px, 0px, 0px); }
  4%, 7% { -webkit-transform: translate3d(0px, 43px, 0px); }
  8%, 11% { -webkit-transform: translate3d(0px, 86px, 0px); }
  12%, 19% { -webkit-transform: translate3d(21px, 86px, 0px); }
  20%, 35% { -webkit-transform: translate3d(42px, 86px, 0px); }
  36%, 39% { -webkit-transform: translate3d(63px, 86px, 0px); }
  40%, 55% { -webkit-transform: translate3d(84px, 86px, 0px); }
  56%, 69% { -webkit-transform: translate3d(280px, 86px, 0px); }
  70%, 73% { -webkit-transform: translate3d(301px, 86px, 0px); }
  100% { -webkit-transform: translate3d(301px, 86px, 0px); } }

@-webkit-keyframes move-h { 0%, 3% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; color: #cf7f00; }
  4%, 7% { -webkit-transform: translate3d(0px, -43px, 0px); opacity: 1; color: #cf7f00; }
  8%, 11% { -webkit-transform: translate3d(0px, -86px, 0px); opacity: 1; color: #cf7f00; }
  12%, 15% { -webkit-transform: translate3d(-21px, -86px, 0px); opacity: 1; color: #cf7f00; }
  16%, 19% { -webkit-transform: translate3d(-42px, -86px, 0px); opacity: 1; color: #cf7f00; }
  20%, 23% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 1; color: #cf7f00; }
  24%, 25% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 1; color: #ff0000; }
  26%, 29% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 0; color: #cf7f00; }
  100% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 0; color: #cf7f00; } }

@-webkit-keyframes move-c { 0%, 7% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; color: #cf7f00; }
  8%, 11% { -webkit-transform: translate3d(0px, -43px, 0px); opacity: 1; color: #cf7f00; }
  12%, 15% { -webkit-transform: translate3d(0px, -86px, 0px); opacity: 1; color: #cf7f00; }
  16%, 19% { -webkit-transform: translate3d(-21px, -86px, 0px); opacity: 1; color: #cf7f00; }
  20%, 25% { -webkit-transform: translate3d(-42px, -86px, 0px); opacity: 1; color: #cf7f00; }
  26%, 29% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 1; color: #cf7f00; }
  30%, 31% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 1; color: #ff0000; }
  32%, 35% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 0; color: #cf7f00; }
  100% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 0; color: #cf7f00; } }

@-webkit-keyframes move-j { 0%, 11% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; color: #cf7f00; }
  12%, 15% { -webkit-transform: translate3d(0px, -43px, 0px); opacity: 1; color: #cf7f00; }
  16%, 19% { -webkit-transform: translate3d(0px, -86px, 0px); opacity: 1; color: #cf7f00; }
  20%, 25% { -webkit-transform: translate3d(-21px, -86px, 0px); opacity: 1; color: #cf7f00; }
  26%, 31% { -webkit-transform: translate3d(-42px, -86px, 0px); opacity: 1; color: #cf7f00; }
  32%, 33% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 1; color: #ff0000; }
  34%, 37% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 0; color: #cf7f00; }
  100% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 0; color: #cf7f00; } }

@-webkit-keyframes move-p { 0%, 3% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; color: #cf7f00; }
  4%, 7% { -webkit-transform: translate3d(0px, -43px, 0px); opacity: 1; color: #cf7f00; }
  8%, 11% { -webkit-transform: translate3d(0px, -86px, 0px); opacity: 1; color: #cf7f00; }
  12%, 15% { -webkit-transform: translate3d(-21px, -86px, 0px); opacity: 1; color: #cf7f00; }
  16%, 19% { -webkit-transform: translate3d(-43px, -86px, 0px); opacity: 1; color: #cf7f00; }
  20%, 25% { -webkit-transform: translate3d(-65px, -86px, 0px); opacity: 1; color: #cf7f00; }
  26%, 31% { -webkit-transform: translate3d(-87px, -86px, 0px); opacity: 1; color: #cf7f00; }
  32%, 35% { -webkit-transform: translate3d(-109px, -86px, 0px); opacity: 1; color: #cf7f00; }
  36%, 39% { -webkit-transform: translate3d(-131px, -86px, 0px); opacity: 1; color: #cf7f00; }
  40%, 43% { -webkit-transform: translate3d(-153px, -86px, 0px); opacity: 1; color: #cf7f00; }
  44%, 45% { -webkit-transform: translate3d(-153px, -86px, 0px); opacity: 1; color: #ff0000; }
  46%, 49% { -webkit-transform: translate3d(-153px, -86px, 0px); opacity: 0; color: #cf7f00; }
  100% { -webkit-transform: translate3d(-153px, -86px, 0px); opacity: 0; color: #cf7f00; } }

@-webkit-keyframes move-m { 0%, 7% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; color: #cf7f00; }
  8%, 11% { -webkit-transform: translate3d(0px, -43px, 0px); opacity: 1; color: #cf7f00; }
  12%, 15% { -webkit-transform: translate3d(0px, -86px, 0px); opacity: 1; color: #cf7f00; }
  16%, 19% { -webkit-transform: translate3d(-21px, -86px, 0px); opacity: 1; color: #cf7f00; }
  20%, 25% { -webkit-transform: translate3d(-42px, -86px, 0px); opacity: 1; color: #cf7f00; }
  26%, 31% { -webkit-transform: translate3d(-63px, -86px, 0px); opacity: 1; color: #cf7f00; }
  32%, 35% { -webkit-transform: translate3d(-84px, -86px, 0px); opacity: 1; color: #cf7f00; }
  36%, 39% { -webkit-transform: translate3d(-105px, -86px, 0px); opacity: 1; color: #cf7f00; }
  40%, 45% { -webkit-transform: translate3d(-126px, -86px, 0px); opacity: 1; color: #cf7f00; }
  46%, 49% { -webkit-transform: translate3d(-148px, -86px, 0px); opacity: 1; color: #cf7f00; }
  50%, 51% { -webkit-transform: translate3d(-148px, -86px, 0px); opacity: 1; color: #ff0000; }
  52%, 55% { -webkit-transform: translate3d(-148px, -86px, 0px); opacity: 0; color: #cf7f00; }
  100% { -webkit-transform: translate3d(-148px, -86px, 0px); opacity: 0; color: #cf7f00; } }

/**************************/
/* Home page Styles       */
/**************************/
#samples-container .title-text { margin: 0 0 0 40px; }
#samples-container .sample-title { margin: 10px 0 10px 60px; font-weight: bold; }
#samples-container .sample-text { margin: 0 80px 20px 80px; font-size: 12px; }
#samples-container .sample-link { text-decoration: none; background: #FFFEA1; font-weight: bold; }
#samples-container .sample-link:hover { background: #C3FFFF; }

#footer-container p { display: block; margin: 20px 0 10px 30px; font-size: 10px; color: #666666; }