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

#main-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       */
/**************************/
#content-container .text { display: block; width: auto; margin: 20px 32px 30px 32px; color: #333333; }

#hero-container { border-radius: 5px; clear: both; height: 530px; overflow: hidden; position: relative; width: 960px; margin: 20px 0px 10px 32px; }
#hero-container .page { position: absolute; border-top-left-radius: 5px; border-top-right-radius: 5px; height: 530px; -webkit-transition: opacity 1s ease-in-out; width: 960px; }
#hero-container .page img { position: absolute; }

#hero-container.dl-ride #sub-layer.slide { -webkit-transform: tranlate3d(0px, 0px, 0px); }
#hero-container.dl-ride #sub-layer.fade #page1 { opacity: 1; z-index: 10; }

#hero-container.mk-entrance #sub-layer.slide { -webkit-transform: tranlate3d(-1590px, 0px, 0px); }
#hero-container.mk-entrance #sub-layer.fade #page2 { opacity: 1; z-index: 10; }

#hero-container.mk-splash #sub-layer.slide { -webkit-transform: tranlate3d(-3180px, 0px, 0px); }
#hero-container.mk-splash #sub-layer.fade #page3 { opacity: 1; z-index: 10; }

#hero-container.condo #sub-layer.slide { -webkit-transform: tranlate3d(-4770px, 0px, 0px); }
#hero-container.condo #sub-layer.fade #page4 { opacity: 1; z-index: 10; }

#hero-container.cabin #sub-layer.slide { -webkit-transform: tranlate3d(-6360px, 0px, 0px); }
#hero-container.cabin #sub-layer.fade #page5 { opacity: 1; z-index: 10; }

#page1.move-left { -webkit-animation: "move_left" 8s ease-in-out both; }

#page2.move-right { -webkit-animation: "move_right" 8s ease-in-out both; }

#page3.move-left { -webkit-animation: "move_left" 8s ease-in-out both; }

#page4.move-right { -webkit-animation: "move_right" 8s ease-in-out both; }

#page5.move-left { -webkit-animation: "move_left" 8s ease-in-out both; }

#sub-layer { position: absolute; height: 530px; }
#sub-layer.slide { width: 7950px; -webkit-transition: -webkit-transform 1s ease-in-out; }
#sub-layer.slide #page1 { left: 0px; }
#sub-layer.slide #page2 { left: 1590px; }
#sub-layer.slide #page3 { left: 3180px; }
#sub-layer.slide #page4 { left: 4770px; }
#sub-layer.slide #page5 { left: 6360px; }
#sub-layer.fade { width: 960px; }
#sub-layer.fade .page { opacity: 0; }
#sub-layer.fade #page1, #sub-layer.fade #page3, #sub-layer.fade #page5 { left: -630px; }

/***************************/
/* Hero Navigation Dots    */
/***************************/
#hero-nav { display: block; width: 1024px; height: 50px; }
#hero-nav ul { float: left; padding: 0px; margin: 0 0 0 460px; }

#hero-nav li { display: inline-block; }
#hero-nav li .dot { border: 1px solid #000000; border-radius: 50%; width: 10px; height: 10px; }

/***************************/
/*   Animations            */
/***************************/
@-webkit-keyframes move_left { from { -webkit-transform: translate3d(630px, 0px, 0px); }
  to { -webkit-transform: translate3d(0px, 0px, 0px); } }

@-webkit-keyframes move_right { from { -webkit-transform: translate3d(-630px, 0px, 0px); }
  to { -webkit-transform: translate3d(0px, 0px, 0px); } }

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