@font-face {
    font-family: KozukaHeavy;
    src: url('../font/PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/PTS75F-webfont.woff') format('woff'),
    url('../font/PTS75F-webfont.ttf') format('truetype'),
    url('../font/PTS75F-webfont.svg#svgFontName') format('svg');
}
@font-face {
    font-family: KozukaRegular;
    src: url('../font/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/PTS55F-webfont.woff') format('woff'),
    url('../font/PTS55F-webfont.ttf') format('truetype'),
    url('../font/PTS55F-webfont.svg#svgFontName') format('svg');
}

@font-face {
    font-family: KozukaExtraLight;
    src: url('../font/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/PTS55F-webfont.woff') format('woff'),
    url('../font/PTS55F-webfont.ttf') format('truetype'),
    url('../font/PTS55F-webfont.svg#svgFontName') format('svg');
}

@font-face {
    font-family: KozukaBold;
    src: url('../font/PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/PTS75F-webfont.woff') format('woff'),
    url('../font/PTS75F-webfont.ttf') format('truetype'),
    url('../font/PTS75F-webfont.svg#svgFontName') format('svg');
}

@font-face {
    font-family: KozukaCaptionBold;
    src: url('../font/PTC75F-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/PTC75F-webfont.woff') format('woff'),
    url('../font/PTC75F-webfont.ttf') format('truetype'),
    url('../font/PTC75F-webfont.svg#svgFontName') format('svg');
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: url("../texture/misc/stars01.jpg") #000 top left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

/* --- VISUAL DEBUGGER --- */

#visualDebugger {
    position: absolute;
    margin-top: 175px;
    padding: 30px;
    font-family: arial, sans-serif;
    font-size: 10px;
    z-index: 1;
    color: #fff;
    display: none;
}

#visualDebugger ul li {
    margin-bottom: 3px;
}

/* --- LOADING --- */
#loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#loading .loadingText {
    position: absolute;
    top: 300px;
    left: 0;
    height: 250px;
    width: 100%;
}

#loading .loadingText p {
    text-align: center;
    font-family: KozukaBold, arial, sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 20px;
}

#loading .loadingBottom {
    position: absolute;
    top: 250px;
    left: 0;
    width: 100%;
    height: 200px;
}

#loading .loadingBottom p {
    text-align: center;
    font-family: KozukaBold, arial, sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 20px;
}

#loading .loadingBar {
    margin: 25px auto;
    width: 300px;
    height: 10px;
    border: 1px solid #ff9168;
    padding: 1px;
}

#loading .loadingFill {
    width: 0%;
    height: 100%;
    background: #ff9800;
}

/* --- INTRO --- */

#intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    min-height: 768px;
    opacity: 0;
}

#intro .introLogo {
    position: relative;
    margin: 100px auto 50px auto;
    width: 772px;
    height: 190px;
    opacity: 0;
}

#intro .introLogo .text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

#intro .btnIntro {
    display: block;
    width: 98px;
    height: 25px;
    background: url("../texture/ui/intro/btn_intro.jpg") top left no-repeat;
    margin-bottom: 2px;
}

#intro .introLogo .text .char {
    position: absolute;
    top: 0;
    left: 0;
}

#intro .introLogo .text .char01 {
    top: 0;
    left: 0;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/i.png") top left no-repeat;
}

#intro .introLogo .text .char02 {
    top: 0;
    left: 97px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/n.png") top left no-repeat;
}

#intro .introLogo .text .char03 {
    top: 0;
    left: 194px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/f.png") top left no-repeat;
}

#intro .introLogo .text .char04 {
    top: 0;
    left: 291px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/i.png") top left no-repeat;
}

#intro .introLogo .text .char05 {
    top: 0;
    left: 388px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/n.png") top left no-repeat;
}

#intro .introLogo .text .char06 {
    top: 0;
    left: 485px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/i.png") top left no-repeat;
}

#intro .introLogo .text .char07 {
    top: 0;
    left: 582px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/t.png") top left no-repeat;
}

#intro .introLogo .text .char08 {
    top: 0;
    left: 679px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/e.png") top left no-repeat;
}

#intro .introLogo .text .char09 {
    top: 97px;
    left: 291px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/g.png") top left no-repeat;
}

#intro .introLogo .text .char10 {
    top: 97px;
    left: 388px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/e.png") top left no-repeat;
}

#intro .introLogo .text .char11 {
    top: 97px;
    left: 485px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/a.png") top left no-repeat;
}

#intro .introLogo .text .char12 {
    top: 97px;
    left: 582px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/r.png") top left no-repeat;
}

#intro .introLogo .text .char13 {
    top: 97px;
    left: 679px;
    width: 93px;
    height: 93px;
    background: url("../texture/ui/intro/logo/text/s.png") top left no-repeat;
}

#intro .introLogo .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

#intro .introLogo .bg .subbg {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0;
}

#intro .introLogo .bg .subbg01 {
    left: 0;
    top: 0;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg02 {
    top: 0;
    left: 97px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg03 {
    top: 0;
    left: 194px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg04 {
    top: 0;
    left: 291px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg05 {
    top: 0;
    left: 388px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg06 {
    top: 0;
    left: 485px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg07 {
    top: 0;
    left: 582px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg08 {
    top: 0;
    left: 679px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg09 {
    top: 97px;
    left: 291px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg10 {
    top: 97px;
    left: 388px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg11 {
    top: 97px;
    left: 485px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg12 {
    top: 97px;
    left: 582px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .subbg13 {
    top: 97px;
    left: 679px;
    width: 93px;
    height: 93px;
    background: #f00;
}

#intro .introLogo .bg .gear01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 243px;
    height: 243px;
    background: url("../texture/ui/intro/logo/bg/gear01.png") top left no-repeat;
}

#intro .introLogo .bg .gear02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 389px;
    height: 389px;
    background: url("../texture/ui/intro/logo/bg/gear02.png") top left no-repeat;
}

#intro .introLogo .bg .gear03 {
    position: absolute;
    top: 0;
    left: 0;
    width: 840px;
    height: 840px;
    background: url("../texture/ui/intro/logo/bg/gear03.png") top left no-repeat;
}

#intro .introLogo .bg .subbg02-gear01 {
    left: 25px;
    top: 11px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg03-gear01 {
    left: -71px;
    top: 11px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg04-gear01 {
    left: -167px;
    top: 11px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg09-gear01 {
    left: -167px;
    top: -86px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg01-gear02 {
    left: 49px;
    top: -62px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg02-gear02 {
    left: -47px;
    top: -62px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg03-gear02 {
    left: -143px;
    top: -62px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg04-gear02 {
    left: -239px;
    top: -62px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg05-gear02 {
    left: -335px;
    top: -62px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg09-gear02 {
    left: -239px;
    top: -158px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg10-gear02 {
    left: -335px;
    top: -158px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg01-gear03 {
    left: -177px;
    top: -287px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg02-gear03 {
    left: -273px;
    top: -287px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg03-gear03 {
    left: -369px;
    top: -287px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg04-gear03 {
    left: -465px;
    top: -287px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg05-gear03 {
    left: -561px;
    top: -287px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg06-gear03 {
    left: -657px;
    top: -287px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg07-gear03 {
    left: -753px;
    top: -287px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg09-gear03 {
    left: -465px;
    top: -384px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg10-gear03 {
    left: -561px;
    top: -384px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg11-gear03 {
    left: -657px;
    top: -384px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .introLogo .bg .subbg12-gear03 {
    left: -753px;
    top: -384px;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

#intro .menuList {
    margin: 0 auto;
    width: 772px;
    font-family: KozukaBold, arial, sans-serif;
    font-size: 18px;
    color: #fff;
    opacity: 0;
}

#intro .menuList li {
    display: inline-block;
    margin-bottom: 15px;
    cursor: pointer;
}

#intro .menuList li:hover {
    color: #ff9;
}

#intro .copyright {
    position: absolute;
    bottom: 12px;
    right: 0;
    font-family: arial, sans-serif;
    font-size: 12px;
    color: #fff;
}

#intro .planetContainer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#intro .planetGlow01 {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 584px;
    width: 100%;
    background: url("../texture/ui/intro/logo/bg/planet_glow01.png") top center no-repeat;
}

#intro .planetGlow02 {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 584px;
    width: 100%;
    background: url("../texture/ui/intro/logo/bg/planet_glow02.png") top center no-repeat;
}

#intro .planet {
    position: absolute;
    bottom: 0;
    left: -6px;
    height: 350px;
    width: 100%;
    background: url("../texture/ui/intro/logo/bg/planet.png") top center no-repeat;
    transform-origin: 50% 50%;
}

#intro .planetShadow {
    position: absolute;
    bottom: 0;
    left: -6px;
    height: 554px;
    width: 100%;
    background: url("../texture/ui/intro/logo/bg/planet_shadow.png") top center no-repeat;
}

/* --- CHARACTER SELECTION --- */
#characterSelection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    min-height: 768px;
    display: none;
    z-index: 5;
}

#characterSelection .outerContainer {
    position: relative;
    margin: 0 auto;
    width: 936px;
    height: 100%;
}

#characterSelection .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 436px;
    height: 100%;
    background-image: url("../texture/ui/statistic/bottom_rectangle.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 1px 0;
}

#characterSelection .container .shipSelector {
    position: absolute;
    bottom: 150px;
    left: 60px;
    width: 316px;
    height: 336px;
}

#characterSelection .shipSelector .panel {
    background: url("../texture/ui/char_selection/panel.png") top left no-repeat;
    width: 108px;
    height: 116px;
    cursor: pointer;
    z-index: 0;
}

#characterSelection .shipSelector .panel:hover {
    background: url("../texture/ui/char_selection/panel_hover.png") top left no-repeat;
}

#characterSelection .shipSelector .ship {
    position: absolute;
    z-index: 10;
    cursor: pointer;

}

#characterSelection .shipSelector .shipAlpha {
    bottom: 0;
    left:  0;
    width: 100%;
    height: 100%;
    background: url("../texture/spaceship/alpha.png") center center no-repeat;
}

#characterSelection .shipSelector .shipDelta {
    bottom: 0;
    left:  0;
    width: 100%;
    height: 100%;
    background: url("../texture/spaceship/delta.png") center center no-repeat;
}

#characterSelection .shipSelector .shipGamma {
    bottom: 0;
    left:  0;
    width: 100%;
    height: 100%;
    background: url("../texture/spaceship/gamma.png") center center no-repeat;
}

#characterSelection .shipSelector .top {
    position: absolute;
    bottom: 204px;
    left: 104px;
}

#characterSelection .shipSelector .left {
    position: absolute;
    bottom: 0;
    left: 0;
}

#characterSelection .shipSelector .right {
    position: absolute;
    bottom: 0;
    left: 207px;
}

#characterSelection .shipSelector .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 1px #000;
}

#characterSelection .shipSelector .text h1 {
    font-family: KozukaCaptionBold, arial, sans-serif;
    font-size: 18px;
}

#characterSelection .shipSelector .text p {
    font-family: KozukaRegular, arial, sans-serif;
    font-size: 14px;
}

#characterSelection .shipSelector .textAlpha {
    bottom: 160px;
    left: 81px;
}

#characterSelection .shipSelector .textDelta {
    bottom: -45px;
    left: -25px;
}

#characterSelection .shipSelector .textGamma {
    bottom: -45px;
    left: 188px;
}

#characterSelection .title {
    position: relative;
    padding: 6px;
    margin: 55px auto;
    width: 381px;
    height: 35px;
    background: url("../texture/ui/statistic/bg_title.png") top left no-repeat;
    font-family: KozukaCaptionBold, arial, sans-serif;
    font-size: 36px;
    color: #000;
    text-align: center;
}

#characterSelection .outerBorder {
    background: url("../texture/ui/statistic/outer_border.png") top left repeat-y;
}

#characterSelection .innerBorder {
    background: url("../texture/ui/statistic/inner_border.png") top left repeat-y;
}

#characterSelection .outerBorderLeft {
    position: absolute;
    width: 17px;
    height: 100%;
    top: 0;
    left: 0;
}

#characterSelection .innerBorderLeft {
    position: absolute;
    width: 17px;
    height: 100%;
    top: 0;
    left: 20px;
}

#characterSelection .outerBorderRight {
    position: absolute;
    width: 17px;
    height: 100%;
    top: 0;
    right: 0;
}

#characterSelection .innerBorderRight {
    position: absolute;
    width: 17px;
    height: 100%;
    top: 0;
    right: 13px;
}

#characterSelection .char {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}

#characterSelection .char_alpha {
    position: absolute;
    bottom: 0;
    left: 270px;
    width: 1109px;
    height: 832px;
    z-index: 10;
    background: url("../texture/ui/char_selection/char_alpha.png") top left no-repeat;
}

#characterSelection .char_delta {
    position: absolute;
    bottom: 0;
    left: 100px;
    width: 1041px;
    height: 901px;
    z-index: 10;
    background: url("../texture/ui/char_selection/char_delta.png") top left no-repeat;
}

#characterSelection .char_gamma {
    position: absolute;
    bottom: 0;
    left: 200px;
    width: 890px;
    height: 754px;
    z-index: 10;
    background: url("../texture/ui/char_selection/char_gamma.png") top left no-repeat;
}

/* --- OPTIONS --- */

#options {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    min-height: 768px;
    display: none;
}

#options .optionsContainer {
    margin: 0 auto;
    width: 350px;
}

#options .list {
    font-size: 20px;
    color: #fff;
}

#options .list li {
    clear: both;
    cursor: pointer;
}

#options .list .attribute {
    float: left;
    font-family: KozukaExtraLight, arial, sans-serif;
}

#options .list .val {
    float: right;
    font-family: KozukaCaptionBold, arial, sans-serif;
}

#options .attributeList {
    float: left;
    font-family: KozukaExtraLight, arial, sans-serif;
    font-size: 18px;
    color: #fff;
    text-align: center;
}

#options .attributeList li,
#options .valList li {
    padding: 5px;
}

#options .valList {
    float: right;
    font-family: KozukaRegular, arial, sans-serif;
    font-size: 18px;
    color: #fff;
    text-align: center;
}

#options .menuButtonList {
    padding-top: 50px;
    clear: both;
}

#options .btnBack {
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
    cursor: pointer;
}

#options .btnBack:hover {
    color: #ff9;
}

/* --- HUD --- */

#hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1024px;
    min-height: 768px;
    height: 100%;
    display: none;
    z-index: 2;
}

#hud #spaceShipStatus {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
}

#hud #spaceShipStatus .profile {
    position: absolute;
    top: 0;
    left: 0;
    width: 176px;
    height: 176px;
    background: url("../texture/ui/hud/status/gear_frame.png") top left no-repeat;
    z-index: 0;
}

#hud #spaceShipStatus .profilePicture {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 124px;
    height: 124px;
    background: url("../texture/ui/hud/status/placement.png") top left no-repeat;
}

#hud #spaceShipStatus .alphaNormal {
    background: url("../texture/ui/hud/status/profile_picture/alpha/normal.png") top left no-repeat;
}

#hud #spaceShipStatus .alphaShot {
    background: url("../texture/ui/hud/status/profile_picture/alpha/shot.png") top left no-repeat;
}

#hud #spaceShipStatus .deltaNormal {
    background: url("../texture/ui/hud/status/profile_picture/delta/normal.png") top left no-repeat;
}

#hud #spaceShipStatus .deltaShot {
    background: url("../texture/ui/hud/status/profile_picture/delta/shot.png") top left no-repeat;
}

#hud #spaceShipStatus .gammaNormal {
    background: url("../texture/ui/hud/status/profile_picture/gamma/normal.png") top left no-repeat;
}

#hud #spaceShipStatus .gammaShot {
    background: url("../texture/ui/hud/status/profile_picture/gamma/shot.png") top left no-repeat;
}

#hud #spaceShipStatus .nameBar {
    position: absolute;
    top: 30px;
    left: -10px;
    width: 362px;
    height: 26px;
    padding: 5px 0 0 156px;
    font-family: KozukaBold, arial, sans-serif;
    font-size: 24px;
    color: #fff;
}

#hud #spaceShipStatus .hpShieldOd {
    position: absolute;
    top: 69px;
    left: 152px;
    width: 42px;
    height: 56px;
    background: url("../texture/ui/hud/status/hp_shield_od.png") top left no-repeat;
    z-index: 10;
}

#hud #spaceShipStatus #healthBar {
    position: absolute;
    background: url("../texture/ui/hud/status/bar_health.png") top left no-repeat;
    top: 73px;
    left: 147px;
    width: 0;
    height: 25px;
    display: none;
}

#hud #spaceShipStatus #shieldBar {
    position: absolute;
    background: url("../texture/ui/hud/status/bar_shield.png") top left no-repeat;
    top: 104px;
    left: 147px;
    width: 0;
    height: 10px;
    display: none;
}

#hud #spaceShipStatus #overdriveBar {
    position: absolute;
    background: url("../texture/ui/hud/status/bar_od.png") top left no-repeat;
    top: 120px;
    left: 147px;
    width: 0;
    height: 5px;
    display: none;
}

#hud #spaceShipStatus .miscContainer {
    position: absolute;
    top: 119px;
    left: 267px;
    white-space: nowrap;
}

#hud #spaceShipStatus .miscContainer li {
    display: inline-block;
    margin-right: 10px;
}

#hud #spaceShipStatus .miscContainer span {
    display: inline-block;
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 24px;
    color: #fff;
}

#hud #spaceShipStatus .miscContainer .life {
    display: inline-block;
    background: url("../texture/ui/hud/status/icon_life.png") top left no-repeat;
    width: 18px;
    height: 19px;
}

#hud #spaceShipStatus .miscContainer .bomb {
    display: inline-block;
    background: url("../texture/ui/hud/status/icon_bomb.png") top left no-repeat;
    width: 10px;
    height: 22px;
}

/* SPACESHIP GEAR STATUS */

#hud #gearStatus {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 300px;
    display: none;
}

#hud #gearStatus ul {
    float: right;
    margin-bottom: 5px;
}

#hud #gearStatus ul li {
    display: inline-block;
    vertical-align: top;
}

.iconGear {
    background: url("../texture/ui/icon_gear.png") top left no-repeat;
    width: 61px;
    height: 22px;
}

#hud #gearStatus .textGearValue {
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 18px;
    color: #ff0;
}

#hud #gearStatus .textGearValue.boxSize {
    position: relative;
    display: block;
    min-width: 150px;
    text-align: right;
}

#hud #gearStatus .borderFacingLeft01 {
    float: right;
    background: url("../texture/ui/hud_money_status_border.png") top left no-repeat;
    width: 304px;
    height: 2px;
    margin-bottom: 5px;
    clear: right;
}

#hud #gearStatus .textScrapContainer {
    float: right;
    clear: right;
}

#hud #gearStatus span {
    vertical-align: middle;
}

#hud #gearStatus .textScrapLabel {
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 14px;
    color: #aaa;
}

#hud #gearStatus .textScrapValue {
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 18px;
    color: #fff;
}

/* HUD SHOP MENU POPUP */

#hud #shopMenuPopup {
    position: absolute;
    top: 350px;
    left: -500px;
    display: none;
}

#hud #shopMenuPopup ul {

}

#hud #shopMenuPopup li {
    margin-bottom: 15px;
    width: 225px;
}

#hud #shopMenuPopup span {
    display: inline-block;
    margin-bottom: 7.5px;
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
}

#hud #shopMenuPopup .borderFacingRight01 {
    background: url("../texture/ui/hud_weapon_status_border.png") top left no-repeat;
    width: 433px;
    height: 2px;
}

/* HUD WEAPON STATUS */

#hud #weaponStatus {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 300px;
}

#hud #weaponStatus ul {
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
}

#hud #weaponStatus ul li {
    display: inline-block;
    min-width: 100px;
    padding-right: 15px;
}

#hud #weaponStatus span {
    display: block;
}

#hud #weaponStatus .weaponTypeLabel {
    font-family: KozukaRegular, arial, sans-serif;
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

#hud #weaponStatus .weaponName {
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 18px;
}

#hud #weaponStatus .weaponLevelLabel {
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 14px;
}

#hud #weaponStatus .weaponLevel {
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 30px;
}

#hud #weaponStatus .borderFacingRight01 {
    position: absolute;
    top: 20px;
    left: 0;
    background: url("../texture/ui/hud_weapon_status_border.png") top left no-repeat;
    width: 433px;
    height: 2px;
    margin-bottom: 5px;
}

/* --- POPUP --- */

#popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
}

#popup .content {
    position: relative;
    margin: 0 auto;
    width: 400px;
    z-index: 2;
}

#popup .content .contentHeader {
    background: url("../texture/ui/shop_weaponry_equipped_weapon_bg_header.png") top left repeat-x;
    height: 28px;
    overflow: hidden;
    margin-bottom: 4px;
}

#popup .content .contentHeader span {
    float: right;
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 36px;
    color: #fff;
    margin: 5px 4px 0 0;
    line-height: 1px;
}

#popup .content .contentHeader .indicator {
    float: right;
    width: 10px;
    height: 100%;
    background-color: #f00;
}

#popup .content .contentDescription {
    background: url("../texture/ui/shop_weaponry_equipped_weapon_bg_description.png") top left repeat-x;
    padding: 10px 10px 10px 10px;
    margin-bottom: 4px;
}

#popup .content .contentDescription .description {
    font-family: KozukaExtraLight, arial, sans-serif;
    color: #fff;
    text-align: center;
}

#popup .content .contentDescription .description h2 {
    font-size: 18px;
    margin-bottom: 7px;
}

#popup .content .contentDescription .description p {
    font-size: 14px;
    line-height: 17px;
    padding-bottom: 5px;
}

#popup .content .btnYes,
#popup .content .btnNo {
    float: right;
    margin-left: 4px;
    padding: 7px 20px 0 20px;
    display: inline-block;
    height: 25px;
    text-align: center;
    background: url("../texture/ui/shop_weaponry_equipped_weapon_bg_btn.png") top left repeat-x;
    font-family: KozukaRegular, arial, sans-serif;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
}

#popup .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    z-index: 1;
}

/* --- SHOP --- */

#shopWeaponry {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 640px;
    min-height: 480px;
    height: 100%;
    display: none;
    z-index: 2;
}

#shopWeaponry .header {
    margin-bottom: 20px;
    height: 40px;
    background: #202025;
    color: #fff;
}

#shopWeaponry .header .btnBack {
    float: left;
    margin: 13px 0 0 13px;
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 14px;
    color: #ff9;
}

#shopWeaponry .header .btnBack:hover {
    color: #ff9;
    cursor: pointer;
}

#shopWeaponry .header .description {
    float: left;
    margin: 13px 0 0 13px;
    font-family: KozukaExtraLight, arial, sans-serif;
    font-size: 14px;
}

#shopWeaponry .header .rightPanel {
    float: right;
    margin: 5px 10px 0 0;
}

#shopWeaponry .header .rightPanel .playTime,
#shopWeaponry .header .rightPanel .iconGear,
#shopWeaponry .header .rightPanel .totalGear {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}

#shopWeaponry .header .rightPanel .totalGear {
    margin-top: 3px;
    font-family: KozukaBold, arial, sans-serif;
    font-size: 24px;
    color: #ff0;
}

#shopWeaponry .header .rightPanel .iconGear {
    margin-top: 4px;
}

#shopWeaponry .header .rightPanel .playTime {
    margin-top: 6px;
    letter-spacing: 1px;
    font-family: KozukaRegular, arial, sans-serif;
    font-size: 18px;
}

#shopWeaponry .equippedWeaponList {
    margin: 0 auto;
    width: 1024px;
    text-align: center;
}

#shopWeaponry .equippedWeaponList li {
    margin: 0 2px 0 2px;
    width: 320px;
    display: inline-block;
    vertical-align: top;
}

#shopWeaponry .equippedWeaponHeader {
    background: url("../texture/ui/shop_weaponry_equipped_weapon_bg_header.png") top left repeat-x;
    height: 28px;
    overflow: hidden;
}

#shopWeaponry .equippedWeaponHeader span {
    float: right;
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 36px;
    color: #fff;
    margin: 5px 4px 0 0;
    line-height: 1px;
}

#shopWeaponry .equippedWeaponHeader .indicator {
    float: right;
    width: 10px;
    height: 100%;
    background-color: #00bff3;
}

#shopWeaponry .equippedWeaponUpgradeBar {
    margin: 2px 0 2px 0;
    width: 200px;
    height: 6px;
    background: url("../texture/ui/shop_weaponry_equipped_weapon_bg_upgrade_bar.png") top left repeat-x;
}

#shopWeaponry .equippedWeaponUpgradeBar div {
    float: left;
    margin-right: 2px;
    width: 16px;
    height: 100%;
    background: #000;
}

#shopWeaponry .equippedWeaponUpgradeBar div.filled {
    background: url("../texture/ui/shop_weaponry_equipped_weapon_bg_upgrade_bg_block.png") top left repeat-x;
}

#shopWeaponry .equippedWeaponDescription {
    background: url("../texture/ui/shop_weaponry_equipped_weapon_bg_description.png") top left repeat-x;
    height: 80px;
    padding-top: 1px;
    margin-bottom: 2px;
}

#shopWeaponry .equippedWeaponDescription .icon {
    float: left;
    background: url("../texture/ui/icon/weapon/one_76.png") top left no-repeat;
    width: 40px;
    height: 40px;
    margin: 20px 0 0 20px;
}

#shopWeaponry .equippedWeaponDescription .description {
    float: right;
    padding-top: 5px;
    margin: 0 0 0 10px;
    font-family: KozukaExtraLight, arial, sans-serif;
    color: #fff;
    text-align: right;
}

#shopWeaponry .equippedWeaponDescription .description h2 {
    font-size: 18px;
    margin-bottom: 7px;
}

#shopWeaponry .equippedWeaponDescription .description p {
    font-size: 12px;
}

#shopWeaponry .equippedWeaponDescription .levelDescription {
    float: right;
    padding-top: 5px;
    margin: 0 10px 0 10px;
    font-family: KozukaHeavy, arial, sans-serif;
    color: #fff;
}

#shopWeaponry .equippedWeaponDescription .levelDescription h2 {
    font-size: 18px;
    margin-bottom: -3px;
}

#shopWeaponry .equippedWeaponDescription .levelDescription span {
    font-size: 48px;
}

#shopWeaponry .btn {
    float: right;
    padding: 8px 20px 0 20px;
    display: inline-block;
    height: 24px;
    text-align: center;
    background: url("../texture/ui/shop_weaponry_equipped_weapon_bg_btn.png") top left repeat-x;
    font-family: KozukaRegular, arial, sans-serif;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
}

#shopWeaponry .leftPanel {
    position: absolute;
    top: 250px;
    left: 20px;
    width: 100px;
    height: 100px;
}

#shopWeaponry .leftPanel .item {
    width: 68px;
    height: 68px;
    cursor: pointer;
}

#shopWeaponry .leftPanel .itemLife {
    background: url("../texture/ui/shop/icon/life.png") top left no-repeat;
    padding: 1px 0;
}

#shopWeaponry .leftPanel .itemLife span {
    display: block;
    margin: 12px 0 0 75px;
    font-family: KozukaCaptionBold, arial, sans-serif;
    color: #fff;
    font-size: 36px;
    white-space: nowrap;
}

#shopWeaponry .leftPanel .itemShield {
    background: url("../texture/ui/shop/icon/shield.png") top left no-repeat;
}

#shopWeaponry .scrapPopup {
    position: absolute;
    top: 250px;
    right: -220px;
    cursor: pointer;
}

#shopWeaponry .scrapPopup .totalScrap {
    font-size: 36px;
}

#shopWeaponry .weaponShopList {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160px;
    overflow: hidden;
    white-space: nowrap;
}

#shopWeaponry .weaponShopList ul {
    position: absolute;
    top: 0;
    left: 180px;
    z-index: 0;
}

#shopWeaponry .weaponShopList li {
    display: inline-block;
    width: 250px;
    margin-right: 3px;
}

#shopWeaponry .weaponShopList .wtsHeader {
    background: url("../texture/ui/shop_weaponry_wts_bg_header.png") top left no-repeat;
    width: 100%;
    height: 28px;
    margin-bottom: 2px;
    vertical-align: top;
}

#shopWeaponry .weaponShopList .wtsHeader em {
    position: relative;
    float: right;
    font-family: KozukaHeavy, arial, sans-serif;
    font-size: 24px;
    color: #fff;
    margin: 11px 4px 0 0;
    line-height: 1px;
}

#shopWeaponry .weaponShopList .wtsHeader .indicator {
    float: right;
    width: 10px;
    height: 100%;
    background-color: #fff;
}

#shopWeaponry .weaponShopList .wtsDescription {
    background: url("../texture/ui/shop_weaponry_equipped_weapon_bg_description.png") top left repeat-x;
    height: 80px;
    padding-top: 1px;
    margin-bottom: 2px;
    line-height: 15px;
}

#shopWeaponry .weaponShopList .wtsDescription .icon {
    float: left;
    background: url("../texture/ui/icon/weapon/one_76.png") top left no-repeat;
    width: 40px;
    height: 40px;
    margin: 20px 0 0 20px;
}

#shopWeaponry .weaponShopList .wtsDescription .description {
    float: right;
    padding-top: 5px;
    margin-right: 10px;
    font-family: KozukaExtraLight, arial, sans-serif;
    color: #fff;
    text-align: right;
}

#shopWeaponry .weaponShopList .wtsDescription .description h2 {
    font-size: 18px;
    margin-bottom: 7px;
    color: #ff0;
}

#shopWeaponry .weaponShopList .wtsDescription .description p {
    font-size: 12px;
}

#shopWeaponry .weaponShopList {
    white-space: nowrap;
}

#shopWeaponry .weaponShopList .btnList .btnLeft {
    float: left;
    width: 83px;
    display: none;
}

#shopWeaponry .weaponShopList .btnList .btnRight {
    float: right;
    width: 83px;
    color: #00ff12;
    font-weight: bold;
}

#shopWeaponry .weaponShopList .btnArrowLeft {
    position: absolute;
    top: 0;
    left: 0;
    width: 163px;
    height: 100%;
    background: url("../texture/ui/shop_weaponry_wts_shader_left.png") top left repeat-y;
    cursor: pointer;
    z-index: 1;
}

#shopWeaponry .weaponShopList .btnArrowLeft div {
    position: absolute;
    top: 47px;
    right: 0;
    width: 42px;
    height: 49px;
    background: url("../texture/ui/shop_weaponry_wts_arrow_left.png") top left no-repeat;
}

#shopWeaponry .weaponShopList .btnArrowRight {
    position: absolute;
    top: 0;
    right: 0;
    width: 163px;
    height: 100%;
    background: url("../texture/ui/shop_weaponry_wts_shader_right.png") top right repeat-y;
    cursor: pointer;
    z-index: 1;
}

#shopWeaponry .weaponShopList .btnArrowRight div {
    position: absolute;
    top: 47px;
    left: 0;
    width: 42px;
    height: 49px;
    background: url("../texture/ui/shop_weaponry_wts_arrow_right.png") top left no-repeat;
}

#statistic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 640px;
    min-height: 480px;
    height: 100%;
    z-index: 100;
    display: none;
}

#statistic .container {
    position: relative;
    margin: 0 auto;
    width: 436px;
    height: 100%;
    background-image: url("../texture/ui/statistic/bottom_rectangle.png"), url("../texture/ui/statistic/bg_black.png");
    background-position: center bottom, top left;
    background-repeat: no-repeat, repeat;
    padding: 1px 0;
}

#statistic .bgBlack {
}

#statistic .statList {
    position: absolute;
    top: 0;
    left: 0;
    margin: 200px 0 0 0;
    width: 100%;
}

#statistic .statList {
    text-align: center;
}

#statistic td {
    padding: 0 10px 10px 10px;
    width: 150px;
}

#statistic .statList .key {
    font-family: KozukaExtraLight, arial, sans-serif;
    color: #fff;
    font-size: 18px;
    text-align: right;
}

#statistic .statList .value {
    font-family: KozukaBold, arial, sans-serif;
    color: #fff;
    font-size: 18px;
    text-align: left;
}

#statistic .title {
    position: relative;
    padding: 6px;
    margin: 55px auto;
    width: 381px;
    height: 35px;
    background: url("../texture/ui/statistic/bg_title.png") top left no-repeat;
    font-family: KozukaCaptionBold, arial, sans-serif;
    font-size: 36px;
    color: #000;
    text-align: center;
}

#statistic .outerBorder {
    background: url("../texture/ui/statistic/outer_border.png") top left repeat-y;
}

#statistic .innerBorder {
    background: url("../texture/ui/statistic/inner_border.png") top left repeat-y;
}

#statistic .outerBorderLeft {
    position: absolute;
    width: 17px;
    height: 100%;
    top: 0;
    left: 0;
}

#statistic .innerBorderLeft {
    position: absolute;
    width: 17px;
    height: 100%;
    top: 0;
    left: 20px;
}

#statistic .outerBorderRight {
    position: absolute;
    width: 17px;
    height: 100%;
    top: 0;
    right: 0;
}

#statistic .innerBorderRight {
    position: absolute;
    width: 17px;
    height: 100%;
    top: 0;
    right: 13px;
}

/* STARTUP SEQUENCE */
#startupSequence {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../texture/ui/startup_sequence/bg.png") center center no-repeat;
    vertical-align: middle;
    display: none;
}

#startupSequence .startupSequenceContainer {
    margin: 0 0 0 0;
    width: 100%;
    height: 810px;
}

#startupSequence .startupSequenceContainer .textContainer {
    position: absolute;
    top: 175px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#startupSequence .textContainer .rightText {
    position: absolute;
    top: 30px;
    left: 550px;
    line-height: 28px;
}

#startupSequence .textContainer .rightText span {
    font-family: KozukaBold, arial, sans-serif;
    font-size: 24px;
    color: #707070;
    opacity: 0;
}

#startupSequence .textContainer .rightText span.type {
    font-size: 18px;
    color: #ff9800;
}

#startupSequence .textContainer .leftText {
    position: absolute;
    top: 128px;
    left: 277px;
    width: 250px;
    line-height: 30px;
    text-align: right;
}

#startupSequence .textContainer .leftText span {
    font-family: KozukaBold, arial, sans-serif;
    font-size: 30px;
    color: #fff;
    opacity: 0;
}

#startupSequence .textContainer .leftText span.name {
    font-size: 48px;
}

#startupSequence .midBorder {
    position: absolute;
    top: 305px;
    left: 538px;
    width: 6px;
    height: 0;
    background-color: #a9a9a9;
}

#startupSequence .loaderContainer {
    position: absolute;
    top: 405px;
    left: 538px;
    width: 50px;
    height: 50px;
}

#startupSequence .loaderContainer01 {
    top: 405px;
}

#startupSequence .loaderContainer02 {
    top: 445px;
}

#startupSequence .loaderContainer03 {
    top: 485px;
}

#startupSequence .loaderContainer .loaderText {
    position: absolute;
    top: 0;
    right: 60px;
    height: 50px;
    text-align: right;
    font-family: KozukaBold, arial, sans-serif;
    font-size: 14px;
    color: #ff9800;
    opacity: 0;
    white-space: nowrap;
}

#startupSequence .loaderContainer .loader {
    position: absolute;
    top: 3px;
    left: 15px;
    width: 112px;
    height: 21px;
    background: url("../texture/ui/startup_sequence/loading_border.png") top left no-repeat;
    opacity: 0;
}

#startupSequence .loaderContainer .loaderFill {
    position: absolute;
    top: 6px;
    left: 5px;
    width: 0;
    height: 9px;
    background: #fff;
}