﻿.a
{
    background-image: url(/images/web/intro/speech_balloon_intro.png);
    position: absolute;
    top: 25px;
    left: 915px;
    width: 354px;
    height: 259px;
    z-index: 999;
}
.message
{
    font-family: Arial;
    font-size: 12px;
    color: #959595;
    position: absolute;
    left: 38px;
    top: 25px;
    width: 500px;
    z-index:1;
    display:none;
}
.message1
{
     font-family: Arial;
    font-size: 12px;
    color: #959595;
    position: absolute;
    left: 62px;
    top: 95px;
    width: 500px;
    z-index:1;
    display:none;
}
#ShivaLinkButton
{
    background-image: url(/images/web/intro/navigate_button_animation.gif);
    position: absolute;
    top: 120px;
    left: 5px;
    width: 387px;
    height: 28px;
    cursor: pointer;
    background-repeat:no-repeat;
}
#ShivaLinkButton:hover
{
    background-image: url(/images/web/intro/navigate_button_roll.png);
}

.c
{
    background-image: url(/images/web/intro/divider.png);
    position: absolute;
    top: -9px;
    left: 0px;
    width: 1600px;
    height: 20px;
}

.d
{
    background-image: url(/images/web/item/mini_levelup_set.png);
    position: absolute;
    top: 100px;
    left: 500px;
    width: 140px;
    height: 70px;
    cursor: pointer;
}

.d:hover
{
    background-image: url(/images/web/item/mini_levelup_set_roll.png);
}

.es
{
    background-image: url(/images/web/item/mini_recovery_set.png);
    position: absolute;
    top: 200px;
    left: 500px;
    width: 140px;
    height: 70px;
    cursor: pointer;
}

.es:hover
{
    background-image: url(/images/web/item/mini_recovery_set_roll.png);
}

.f
{
    background-image: url(/images/web/item/mini_stealth_card.png);
    position: absolute;
    top: 300px;
    left: 500px;
    width: 140px;
    height: 70px;
    cursor: pointer;
}

.f:hover
{
    background-image: url(/images/web/item/mini_stealth_card_roll.png);
}

.g
{
    background-image: url(/images/web/item/valentine_bouquet_mark.png);
    position: absolute;
    top: 400px;
    left: 500px;
    width: 140px;
    height: 70px;
    cursor: pointer;
}

.g:hover
{
    background-image: url(/images/web/item/valentine_bouquet_mark_roll.png);
}

.h
{
    background-image: url(/images/web/item/valentine_heart_mark.png);
    position: absolute;
    top: 500px;
    left: 500px;
    width: 140px;
    height: 70px;
    cursor: pointer;
}

.h:hover
{
    background-image: url(/images/web/item/valentine_heart_mark_roll.png);
}

.i
{
    font-family: Arial Bold;
    font-size: 18px;
    color: #00b4ff;
    position: absolute;
    left: 660px;
    top: 100px;
    width: 285px;
}

.j
{
    font-family: Arial;
    font-size: 15px;
    color: #ffffff;
    position: absolute;
    left: 660px;
    top: 122px;
    width: 285px;
}

.k
{
    font-family: Arial Bold;
    font-size: 18px;
    color: #00b4ff;
    position: absolute;
    left: 660px;
    top: 200px;
    width: 285px;
}

.l
{
    font-family: Arial;
    font-size: 15px;
    color: #ffffff;
    position: absolute;
    left: 660px;
    top: 222px;
    width: 285px;
}

.m
{
    font-family: Arial Bold;
    font-size: 18px;
    color: #00b4ff;
    position: absolute;
    left: 660px;
    top: 300px;
    width: 285px;
}

.n
{
    font-family: Arial;
    font-size: 15px;
    color: #ffffff;
    position: absolute;
    left: 660px;
    top: 322px;
    width: 285px;
}

.o
{
    font-family: Arial Bold;
    font-size: 18px;
    color: #00b4ff;
    position: absolute;
    left: 660px;
    top: 400px;
    width: 285px;
}

.p
{
    font-family: Arial;
    font-size: 15px;
    color: #ffffff;
    position: absolute;
    left: 660px;
    top: 422px;
    width: 285px;
}

.q
{
    font-family: Arial Bold;
    font-size: 18px;
    color: #00b4ff;
    position: absolute;
    left: 660px;
    top: 500px;
    width: 285px;
}

.r
{
    font-family: Arial;
    font-size: 15px;
    color: #ffffff;
    position: absolute;
    left: 660px;
    top: 522px;
    width: 285px;
}

div.main3 > div > div.check
{
    background-image: url(/images/web/item/item_selection_check.png);
    position: absolute;
    top: 85px;
    left: 620px;
    width: 39px;
    height: 37px;
    z-index: 1;
    display: none;
}
div.main3 > div.d1 > div.check
{
    background-image: url(/images/web/item/item_selection_check.png);
    position: absolute;
    top: 85px;
    left: 620px;
    width: 39px;
    height: 37px;
    z-index: 1;
    display: block;
}

div.main3 > div.es1 > div.check
{
    background-image: url(/images/web/item/item_selection_check.png);
    position: absolute;
    top: 185px;
    left: 620px;
    width: 39px;
    height: 37px;
    z-index: 1;
    display: block;
}

div.main3 > div.f1 > div.check
{
    background-image: url(/images/web/item/item_selection_check.png);
    position: absolute;
    top: 285px;
    left: 620px;
    width: 39px;
    height: 37px;
    z-index: 1;
    display: block;
}

div.main3 > div.g1 > div.check
{
    background-image: url(/images/web/item/item_selection_check.png);
    position: absolute;
    top: 385px;
    left: 620px;
    width: 39px;
    height: 37px;
    z-index: 1;
    display: block;
}

div.main3 > div.h1 > div.check
{
    background-image: url(/images/web/item/item_selection_check.png);
    position: absolute;
    top: 485px;
    left: 620px;
    width: 39px;
    height: 37px;
    z-index: 1;
    display: block;
}

.login
{
    background-image: url(/images/web/registration/registeration_window_bg.png);
    position: absolute;
    top: 222px;
    left: 444px;
    width: 565px;
    height: 256px;
}

.confirm
{
    background-image: url(/images/web/registration/confirm_button.png);
    position: absolute;
    top: 200px;
    background-position: center;
    width: 216px;
    height: 33px;
    left: 180px;
    display: none;
    z-index: 1;
    cursor: pointer;
}

.confirm:hover
{
    background-image: url(/images/web/registration/confirm_button_roll.png);
}

.download
{
    background-image: url(/images/web/download/download_window_bg.png);
    position: absolute;
    top: 222px;
    left: 444px;
    width: 565px;
    height: 256px;
}

.button
{
    background-image: url(/images/web/download/download_button.png);
    position: absolute;
    top: 140px;
    left: 315px;
    width: 203px;
    height: 76px;
    z-index: 1;
}

.button:hover
{
    background-image: url(/images/web/download/download_button_roll.png);
}

.requirements
{
    position: absolute;
    top: 20px;
    left: 78px;
    width: 216px;
    height: 33px;
    z-index: 1;
    font-family: Arial;
    font-size: 11px;
    color: #b3b3b3;
}

.exclamation
{
    background-image: url(/images/web/download/exclamation.png);
    position: absolute;
    top: 86px;
    left: 323px;
    width: 42px;
    height: 43px;
    z-index: 1;
}

.description
{
    position: absolute;
    top: 68px;
    left: 370px;
    width: 130px;
    z-index: 1;
    font-family: Arial;
    font-size: 11px;
    color: #b3b3b3;
}
body > form > div.main > div.christine > div.sidebar, body > form > div.main > div.michell > div.sidebar, body > form > div.main > div.ceris > div.sidebar, body > form > div.main > div.hamed > div.sidebar, body > form > div.main > div.reina > div.sidebar, body > form > div.main > div.michael > div.sidebar, body > form > div.main > div.heilyss > div.sidebar, body > form > div.main > div.narrwiettue > div.sidebar, body > form > div.main > div.jennifer > div.sidebar, body > form > div.main > div.krueitoen > div.sidebar
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: block;
}
body > form > div.main > div > div.sidebar
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: none;
}

.pic
{
    background-image: url(/images/web/character/operator_sreen.jpg);
    position: absolute;
    width: 188px;
    height: 188px;
    top: 200px;
    z-index: 99;
}
/*::-webkit-scrollbar
{
    width: 11px;
    height: 10px;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment
{
    height: 30px;
    display: block;
    background-color: #000000;
}
::-webkit-scrollbar-track-piece
{
    background-color: #000000;
    -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical
{
    height: 50px;
    background-color: #ffffff;
    border: 1px solid white;
    -webkit-border-radius: 6px;
}*/
.writing
{
    background-image: url(/images/web/character/steps1.png);
    position: absolute;
    width: 232px;
    z-index: 99;
    top: 50px;
    left: 65px;
    height: 237px;
}

.next
{
    background-image: url(/images/web/character/next_step_arrow_animation.gif);
    position: absolute;
    width: 266px;
    height: 30px;
    top: 110px;
    left: 3px;
    z-index: 99;
    cursor: pointer;
    background-repeat:no-repeat;
}

.next:hover
{
    background-image: url(/images/web/character/next_step_arrow_roll.png);
}
body > form > div.main > div > div.sidebar0
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: block;
}
body > form > div.main > div.christine > div.sidebar0, body > form > div.main > div.michell > div.sidebar0, body > form > div.main > div.ceris > div.sidebar0, body > form > div.main > div.hamed > div.sidebar0, body > form > div.main > div.reina > div.sidebar0, body > form > div.main > div.michael > div.sidebar0, body > form > div.main > div.heilyss > div.sidebar0, body > form > div.main > div.narrwiettue > div.sidebar0, body > form > div.main > div.jennifer > div.sidebar0, body > form > div.main > div.krueitoen > div.sidebar0
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: none;
}
.pic0
{
    background-image: url(/images/web/character/operator_sreen.jpg);
    position: absolute;
    width: 188px;
    height: 188px;
    top: 200px;
    z-index: 99;
}

.writing0
{
    background-image: url(/images/web/character/steps1.png);
    position: absolute;
    width: 232px;
    z-index: 99;
    top: 50px;
    left: 65px;
    height: 237px;
}

.next0
{
    background-image: url(/images/web/character/next_step_arrow2.png);
    position: absolute;
    width: 266px;
    height: 30px;
    top: 110px;
    left: 3px;
    z-index: 99;
    background-repeat:no-repeat;
}
body > form > div.main2 > div.agear > div.sidebar1, body > form > div.main2 > div.bgear > div.sidebar1, body > form > div.main2 > div.igear > div.sidebar1, body > form > div.main2 > div.mgear > div.sidebar1
{
        position: absolute;
    z-index: 99;
    top: 100px;
    display: block;
}
body > form > div.main2 > div > div.sidebar1
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: none;
}

.pic1
{
    background-image: url(/images/web/gear/operator_sreen.jpg);
    position: absolute;
    width: 188px;
    height: 188px;
    top: 200px;
    z-index: 99;
}

.writing1
{
    background-image: url(/images/web/gear/steps2.png);
    position: absolute;
    width: 232px;
    z-index: 99;
    top: 50px;
    left: 65px;
    height: 237px;
}

.next1
{
    background-image: url(/images/web/gear/next_step_arrow_animation.gif);
    position: absolute;
    width: 266px;
    height: 30px;
    top: 110px;
    left: 3px;
    z-index: 99;
    cursor: pointer;
    background-repeat:no-repeat;
}

.next1:hover
{
    background-image: url(/images/web/gear/next_step_arrow_roll.png);
}
body > form > div.main2 > div.agear > div.sidebar00, body > form > div.main2 > div.bgear > div.sidebar00, body > form > div.main2 > div.igear > div.sidebar00, body > form > div.main2 > div.mgear > div.sidebar00
{
        position: absolute;
    z-index: 99;
    top: 100px;
    display: none;
}
body > form > div.main2 > div > div.sidebar00
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: block;
}

.pic00
{
    background-image: url(/images/web/gear/operator_sreen.jpg);
    position: absolute;
    width: 188px;
    height: 188px;
    top: 200px;
    z-index: 99;
}

.writing00
{
    background-image: url(/images/web/gear/steps2.png);
    position: absolute;
    width: 232px;
    z-index: 99;
    top: 50px;
    left: 65px;
    height: 237px;
}

.next00
{
    background-image: url(/images/web/gear/next_step_arrow2.png);
    position: absolute;
    width: 266px;
    height: 30px;
    top: 110px;
    left: 3px;
    z-index: 99;
    background-repeat:no-repeat;
}
body > form > div.main3 > div.d1 > div.sidebar2, body > form > div.main3 > div.es1 > div.sidebar2, body > form > div.main3 > div.f1 > div.sidebar2, body > form > div.main3 > div.g1 > div.sidebar2, body > form > div.main3 > div.h1 > div.sidebar2
{
       position: absolute;
    z-index: 99;
    top: 100px;
    display: block;
}
body > form > div.main3 > div > div.sidebar2
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: none;
}

.pic2
{
    background-image: url(/images/web/item/operator_sreen.jpg);
    position: absolute;
    width: 188px;
    height: 188px;
    top: 200px;
    z-index: 99;
}

.writing2
{
    background-image: url(/images/web/item/step3.png);
    position: absolute;
    width: 232px;
    z-index: 99;
    top: 50px;
    left: 65px;
    height: 237px;
}

.next2
{
    background-image: url(/images/web/item/next_step_arrow_animation.gif);
    position: absolute;
    width: 266px;
    height: 30px;
    top: 110px;
    left: 3px;
    z-index: 99;
    cursor: pointer;
    background-repeat:no-repeat;
}

.next2:hover
{
    background-image: url(/images/web/item/next_step_arrow_roll.png);
}
body > form > div.main3 > div.d1 > div.sidebar000, body > form > div.main3 > div.es1 > div.sidebar000, body > form > div.main3 > div.f1 > div.sidebar000, body > form > div.main3 > div.g1 > div.sidebar000, body > form > div.main3 > div.h1 > div.sidebar000
{
     position: absolute;
    z-index: 99;
    top: 100px;
    display: none;
}
body > form > div.main3 > div > div.sidebar000
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: block;
}

.pic000
{
    background-image: url(/images/web/item/operator_sreen.jpg);
    position: absolute;
    width: 188px;
    height: 188px;
    top: 200px;
    z-index: 99;
}

.writing000
{
    background-image: url(/images/web/item/step3.png);
    position: absolute;
    width: 232px;
    z-index: 99;
    top: 50px;
    left: 65px;
    height: 237px;
}

.next000
{
    background-image: url(/images/web/item/next_step_arrow2.png);
    position: absolute;
    width: 266px;
    height: 30px;
    top: 110px;
    left: 3px;
    z-index: 99;
    background-repeat:no-repeat;
}

body > form > div.main4 > div > div.sidebar3
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: none;
}
body > form > div.main4 > div.a1 > div.sidebar3
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: block;
}
.pic3
{
    background-image: url(/images/web/registration/operator_sreen.jpg);
    position: absolute;
    width: 188px;
    height: 188px;
    top: 200px;
    z-index: 99;
}

.writing3
{
    background-image: url(/images/web/registration/steps3.png);
    position: absolute;
    width: 232px;
    z-index: 99;
    top: 50px;
    left: 65px;
    height: 237px;
}

.next3
{
    background-image: url(/images/web/registration/next_step_arrow_animation.gif);
    position: absolute;
    width: 266px;
    height: 30px;
    top: 110px;
    left: 3px;
    z-index: 99;
    cursor: pointer;
    background-repeat:no-repeat;
}

.next3:hover
{
    background-image: url(/images/web/registration/next_step_arrow_roll.png);
}
body > form > div.main4 > div > div.sidebar0000
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: block;
}
body > form > div.main4 > div.a1 > div.sidebar0000
{
        position: absolute;
    z-index: 99;
    top: 100px;
    display: none;
}

.pic0000
{
    background-image: url(/images/web/registration/operator_sreen.jpg);
    position: absolute;
    width: 188px;
    height: 188px;
    top: 200px;
    z-index: 99;
}

.writing0000
{
    background-image: url(/images/web/registration/steps3.png);
    position: absolute;
    width: 232px;
    z-index: 99;
    top: 50px;
    left: 65px;
    height: 237px;
}

.next0000
{
    background-image: url(/images/web/registration/next_step_arrow2.png);
    position: absolute;
    width: 266px;
    height: 30px;
    top: 110px;
    left: 3px;
    z-index: 99;
    background-repeat:no-repeat;
}

.sidebar4
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: block;
}

.pic4
{
    background-image: url(/images/web/download/operator_sreen.jpg);
    position: absolute;
    width: 188px;
    height: 188px;
    top: 200px;
    z-index: 99;
}

.writing4
{
    background-image: url(/images/web/download/steps4.png);
    position: absolute;
    width: 232px;
    z-index: 99;
    top: 50px;
    left: 65px;
    height: 237px;
}

.next4
{
    background-image: url(/images/web/download/next_step_arrow_animation.gif);
    position: absolute;
    width: 266px;
    height: 30px;
    top: 110px;
    left: 3px;
    z-index: 99;
    cursor: pointer;
    background-repeat:no-repeat;
}

.next4:hover
{
    background-image: url(/images/web/download/next_step_arrow_roll.png);
}

.sidebar5
{
    position: absolute;
    z-index: 99;
    top: 100px;
    display: block;
}

.pic5
{
    background-image: url(/images/web/tutorial/operator_sreen.jpg);
    position: absolute;
    width: 188px;
    height: 188px;
    left: 188px;
    top: 200px;
    z-index: 99;
}

.writing5
{
    background-image: url(/images/web/tutorial/speech_balloon_tutoriald.png);
    position: absolute;
    width: 413px;
    z-index: 99;
    top: 22px;
    left: 65px;
    height: 245px;
}

.showbutton
{
    background-image: url(/images/web/tutorial/hide_button.png);
    position:absolute;
    width:80px;
    height:38px;
    z-index:100;
    top:17px;
    left:320px;
}
.showbutton:hover
{
    background-image: url(/images/web/tutorial/hide_button_roll.png);
}

.next5
{
    background-image: url(/images/web/tutorial/next_step_arrow_animation.gif);
    position: absolute;
    width: 266px;
    height: 30px;
    top: 110px;
    left: 3px;
    z-index: 99;
    cursor: pointer;
    background-repeat:no-repeat;
}

.next5:hover
{
    background-image: url(/images/web/tutorial/next_step_arrow_roll.png);
}

body > form > div.main4 > div.a1 > div#UP_Signup > div.login > div#cover4
{
    display:block;
}
body > form > div.main4 > div > div#UP_Signup > div.login > div#cover4
{
    position: absolute; width: 100%;
                            height: 100%; z-index: 9; display: none; background: transparent;
}