/* Override default browser styles */
* { margin: 0; padding: 0; }
body { font: 13px/18px 'Lucida Sans Unicode', 'Lucida Grande', Sans-serif; color: #fff; background: #000; }
a { text-decoration: none; outline: 0; }
ul, li { list-style: none; }

/* Self-clear */
.clearfix:after { height: 0; content: ''; visibility: hidden; clear: both; display: block; }

#loading-screen { position:absolute; width:100%; height: 695px; background:url(../img/loading-screen.png) repeat-x; z-index:1000; }
.loading-line { width: 615px; height: 50px; margin: 300px auto 0; background: url(../img/loading-line.png) no-repeat; }
.loading-moster { position: absolute;margin:-85px 0 0 257px; }
.loading-text { position: absolute;margin: 70px 0 0 264px; }

/* Main wrap */
#tempest { min-width: 800px; width: auto; position: relative; }
#header, #body, #footer { position: relative; }
#header, #footer { width: 100%; background: url(../img/tempest_frame.png) repeat-x; z-index: 120; }
#header { height: 109px; }
#header > div { width: auto; min-width: 600px; max-width: 1200px; background: none; margin: 0 auto; }
.links { text-indent: -9999px; float: left; display: block; }
#logo {float: left; width: 246px; height: 98px; background: transparent url(../img/logo.png) 0 -1px no-repeat; }
#gallery-btn { width: 176px; height: 97px; background: #292929 url(../img/gallery-btn.png) left top no-repeat; }
#gallery-btn:hover { background-position: left bottom; }
#continue-btn { width: 228px; height: 97px; margin-left: 8px; padding: 0 11px; font-size: 17px; font-weight: bold; color: #747474; letter-spacing: 0.2px; text-indent: 0; line-height: 103px; }
#continue-btn, #gallery-btn { float: right; }

#body { height: 695px; margin-top: -4px; overflow: hidden; }
#footer { padding-top: 1px; margin-top: -4px; background-position: 0 -109px; height: auto; min-height: 130px; }
/* #controls, #nav updated for Root Abyss - 1.8.13 */
#controls { width: 472px; height: 45px; margin: 0 auto 40px; position: relative; }
#nav { width: 428px; height: 45px; padding-left: 43px; background: transparent url(../img/nav-bg.png) left top no-repeat; float: left; }
/*---------------------------------------*/
#nav li { width: 22px; height: 45px; margin-right: 23px; background: transparent url(../img/nav-btn.png) left center no-repeat; float: left; position: relative; cursor: pointer; }
#nav li:hover { background-position: center center; }
#nav li.active { background-position: right center; }
#nav li p {display: none;}
#nav li.locked:hover { background-position: left center; }
#nav li.locked p { width: 159px; margin-left: -79.5px; text-align: center; position: absolute; bottom: -24px; left: 50%;  }
#nav li.locked:hover p { display: block; }
#nav li.locked.dec-third p { width: 142px; margin-left: -71px; }
#sound-btn { width: 26px; height: 24px; background: transparent url(../img/sound-btn.png) left top no-repeat; position: absolute; top: 12px; left: 50%; margin: -40px 0 0 230px; }
#sound-btn.off { background-position: left bottom; }
#copyrights { width: 450px; height: 16px; margin: 0 auto; text-indent: -9999px; background: transparent url(../img/copyrights.png) 0 0 no-repeat; }

/* Scroller */
#scroller { width: 30000px; /*This should be set by JS*/ height: 695px; position: absolute; left: 0; }
.scroll-ico { width: 300px; height: 143px; margin-top: -106px; background-color: transparent; background-image: url(../img/scroll-arrow.png); background-repeat: no-repeat; position: absolute; top: 50%; z-index: 1; display: none; }
#left-scroll { background-position: right top; left: 0; }
#right-scroll { background-position: left bottom; right: 0; }

/* Common styles for slides */
.slide { width: 2000px; height: 695px; float: left; }
.content { padding-top: 1px; }
.content h3 { font-size: 22px; font-weight: normal; }
.countdown { width: 321px; /*311px*/ height: 49px; margin: 66px auto 0; position: relative; }
.countdown.dark { color: #000; }
.countdown .day { width: 72px; margin-top: 0 !important; font-family: Antenna, 'Russo One'; font-size: 50px !important; text-align: right; line-height: 43px !important; float: left; cursor: default; }
.countdown span { width: 242px; height: 49px; text-indent: -99999px; background: transparent url(../img/days-left.png) left top no-repeat; float: right; }
.countdown.dark span { background-position: left bottom; }
.content p { margin-top: 15px; font-size: 16px; letter-spacing: 0.2px; line-height: 21.5px; }

.social-links { /*width: 256px;*/ height: 21px; margin-top: 46px; }
.social-links div { float:left; margin-right: -18px; }
.fb-like span, iframe.fb_ltr { min-width: 105px; min-height: 21px; }

.npc-content { width: 545px; padding: 37px 20px 20px; background-color: black; opacity: .7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); zoom: 1;  }
.npc-content h3 { height: 31px; margin: 0 0 21px 6px; text-indent: -99999px; background-color: transparent; background-position: left top; background-repeat: no-repeat; }
.features { height: 169px; padding-top: 21px; font-size: 16px; border-top: 1px solid #7a7e83; }
.features ul { height: 292px; overflow: auto; }
.features li { margin-bottom: 22px; padding-left: 9px; background: transparent url(../img/bullet.png) left 6px no-repeat; }
.features h4 { margin-bottom: 8px; font-weight: normal; }
.features p { line-height: 20px; }
.npc { background-color: transparent; background-position: left top; background-repeat: no-repeat; position: absolute; }
.npc:hover { background-position: left bottom; }
.npc:hover .bubble { /*display: block;*/ }
.bubble { background-color: transparent; background-position: left top; background-repeat: no-repeat; display: none; z-index: 110; }

/* Prologue */
#slide-1 .content { width: 579px; height: 522px; margin-left: 548px; }
#slide-1 .content p { margin-top: 210px; }
#slide-2 .npc-content { height: 370px; margin-left: 524px; }
#slide-2 .npc-content h3 { background-image: url(../img/luminous/npc-header-its.png); }
#npc-blackmage { width: 363px; height: 356px; background-image: url(../img/blackmage/npc-blackmage.png); margin-left: 1434px; bottom: 0; }
#npc-blackmage .bubble { height: 261px; height: 142px; margin: -1px 0 0 -169px; background-image: url(../img/blackmage/npc-blackmage-bubble.png); }

/* Luminous */
#slide-3 .content { width: 573px; height: 550px; margin-left: 820px; color: black; }
#slide-3 .content h3 { margin-top: 205px; }
#slide-4 .npc-content { height: 237px; margin-left: 410px; }
#slide-4 .npc-content h3 { background-image: url(../img/luminous/npc-header-wol.png); }
#npc-freud-mercedes { width: 263px; height: 183px; background-image: url(../img/luminous/npc-freud-mercedes.png); bottom: -5px; margin-left: 628px; }
#npc-freud-mercedes .bubble { width: 261px; height: 164px; margin: -118px 0 0 104px; background-image: url(../img/luminous/npc-freud-mercedes-bubble.png); }
#npc-aran { width: 167px; height: 231px; background-image: url(../img/luminous/npc-aran.png); /*bottom: 39px; left: 963px;*/ bottom: 33px; margin-left: 1076px; }
#npc-aran .bubble { width: 261px; height: 98px; margin: -24px 0 0 115px; background-image: url(../img/luminous/npc-aran-bubble.png); }
#npc-demonslayer { width: 169px; height: 146px; background-image: url(../img/luminous/npc-demonslayer.png); /*top: 333px; right: 531px;*/ margin-top: 339px; margin-left: 1581px; }
#npc-demonslayer .bubble { width: 261px; height: 164px; margin: -111px 0 0 -200px; background-image: url(../img/luminous/npc-demonslayer-bubble.png); }

/* Gallery */
#screen { width: 100%; height: 100%; background: transparent; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: none; }
#gallery { width: 2000px; height: 696px; background: transparent url(../img/gallery-screen-bg.png) top left repeat-x; position: absolute; top: 105px; left: 0; z-index: 150; width: 100%; display: none; }
#close-btn { width: 37px; height: 37px; background: transparent url(../img/close-btn.gif) 0 0 no-repeat; display: block; position:absolute; right: 20px;  }
#mediabox { width: 961px; margin: 35px auto 0; }
#media-display { width: 639px; height: 495px; margin: 0 auto; }
#media-display iframe, #media-display img { width: 639px; height: 392px; background: #000; border: 1px solid #2c2c2c; }
#media-display p { margin-top: 22px; }
#media-display a { color: #fff; }
#media-list { /*height: 136px;*/ margin: 0 auto; padding-top: 23px; }
#prev-btn, #next-btn { width: 24px; height: 42px; margin-top:35px; text-indent: -9999px; background: transparent url(../img/arrow-btn.png) left top no-repeat; display: block; }
#prev-btn { float: left; }
#next-btn { background-position: right top; float: right; }
#viewport { width: 873px; height: 106px; margin: 0 auto; padding: 3px; position: relative; overflow: hidden; }
#thumbnails { width: 873px; height: 106px; position: absolute; left: 3px; }
.update { float: left; }
.thumb { width: 163px; height: 104px; margin-right: 12px; float: left; background: #ccc; border: 1px solid #4e4e4e; position: relative; cursor: pointer; }
.thumb img { float: left; }
.thumb:hover, .thumb.active { border-color: #da0905; outline: 3px solid #da0905; }
.thumb span { width: 35px; height: 35px; color: transparent; background: transparent url(../img/play-icon.png) left top no-repeat; position: absolute; right: 5px; bottom: 4px; }
.nmr { margin-right: 0 !important; }
#thumb-count { margin-top: 3px; color: white; text-align: center; }

/* Character */
#character { position:absolute; bottom: 0; left: 50%; z-index: 150; }
#character.popup { bottom: 350px; left: 18%; z-index: 200; }

#teleport { background: url(../img/Teleport.png) no-repeat; width:62px; height: 172px; margin: 0 auto; display:none;}

/* Play button */
.play-btn { width: 325px; height: 72px; text-indent: -99999px; background: transparent url(../img/play-btn.png) left top no-repeat; position: absolute; top: -20px; left: 40px; display: block; }
.play-btn:hover { background-position: left bottom; }

/*---------- Added 1.8.13 ----------*/
/* NOTE: bottom-frame-bg.png/nav-bg.png updated */
/* Root abyss link */
#root-abyss { width: 481px; height: 372px; text-indent: -9999px; background: transparent url(../img/angelic/root-abyss-link.gif) 0 0 no-repeat; position: absolute; right: 9px; bottom: 10px; display: block; }