/* CSS Document */

body {
    font-size: 16px;
}

/* PRELOAD IMAGES CSS */

/* body::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(../assets/images/body1.png) url(../assets/images/body1_active.png) url(../assets/images/body2.png) url(../assets/images/body2_active.png) url(../assets/images/body3.png) url(../assets/images/body3_active.png) url(../assets/images/body4.png) url(../assets/images/body4_active.png);
} */

img[usemap],
map area {
    outline: none;
}

.clear {
    clear: both;
}

/** LO MODIFICATIONS */

.PageMover .character-frame {
    position: absolute;
    top: 20px;
    left: 26px;
}

.PageMover .character-area {
    width: 351px;
    height: 304px;
}

.PageMover .character-tabs {
    position: absolute;
    top: 304px;
    left: 15px;
    width: 320px;
}

.PageMover .parts-tabs {
    position: absolute;
    top: 12px;
    left: 401px;
    width: 399px;
}

.PageMover .tab {
    background-color: #333300;
    color: #CCCC00;
    font-weight: bold;
    width: 60px;
    float: left;
    margin-left: 5px;
    text-align: center;
}

.PageMover .tab.bottom {
    border-radius: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    font-size: 9px;
    padding: 6px;
    padding-top: 2px;
}

.PageMover .tab.top {
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    font-size: 15px;
    padding: 5px;
    height: 45px;
}

.PageMover .tab.active-tab {
    background-color: #CCCC00;
    color: #333300;
}

.PageMover .tab.disabled {
    background-color: #363a0c;
    color: #CCCC00;
    cursor: default;
}

.PageMover .parts-area {
    position: absolute;
    top: 41px;
    left: 389px;
    width: 550px;
    height: 133px;
    background-color: #CCCC00;
    border-radius: 15px;
}

.PageMover .parts-area .parts-bodies {
    width: 130px;
    height: 115px;
    background-color: white;
    border-radius: 10px;
    float: left;
    margin: 8px 0 0 6px;
    cursor: pointer;
}

.PageMover .parts-area .body4 img,
.PageMover .parts-area .body3 img,
.PageMover .parts-area .body2 img,
.PageMover .parts-area .body1 img {
    height: 103px;
}

.PageMover .parts-area .body1 img {
    margin: 5px 0 0 9px;
}

.PageMover .parts-area .body2 img {
    margin: 4px 0 0 20px;
}

.PageMover .parts-area .body3 img {
    margin: 5px 0 0 19px;
}

.PageMover .parts-area .body4 img {
    margin: 4px 0 0 20px;
}

.PageMover .parts-area .face4 img,
.PageMover .parts-area .face3 img,
.PageMover .parts-area .face2 img,
.PageMover .parts-area .face1 img {
    height: 83px;
}

.PageMover .parts-area .face1 img {
    margin: 18px 0 0 29px;
}

.PageMover .parts-area .face2 img {
    margin: 26px 0 0 17px;
    height: 65px;
}

.PageMover .parts-area .face3 img {
    margin: 15px 0 0 36px;
}

.PageMover .parts-area .face4 img {
    margin: 19px 0 0 33px;
}

.PageMover .parts-area .arms4 img,
.PageMover .parts-area .arms3 img,
.PageMover .parts-area .arms2 img,
.PageMover .parts-area .arms1 img {
    height: 83px;
}

.PageMover .parts-area .arms1 img {
    margin: 13px 0 0 9px;
}

.PageMover .parts-area .arms2 img {
    margin: 15px 0 0 22px;
}

.PageMover .parts-area .arms3 img {
    margin: 13px 0 0 4px;
}

.PageMover .parts-area .arms4 img {
    margin: 15px 0 0 17px;
}

.PageMover .parts-area .legs4 img,
.PageMover .parts-area .legs3 img,
.PageMover .parts-area .legs2 img,
.PageMover .parts-area .legs1 img {
    height: 83px;
}

.PageMover .parts-area .legs1 img {
    margin: 26px 0 0 8px;
    width: 111px;
    height: auto;
}

.PageMover .parts-area .legs2 img {
    margin: 17px 0 0 10px;
    width: 111px;
    height: auto;
}

.PageMover .parts-area .legs3 img {
    margin: 14px 0 0 17px;
}

.PageMover .parts-area .legs4 img {
    margin: 15px 0 0 20px;
}

.PageMover .parts-area .other4 img,
.PageMover .parts-area .other3 img,
.PageMover .parts-area .other2 img,
.PageMover .parts-area .other1 img {
    height: 83px;
}

.PageMover .parts-area .other1 img {
    margin: 16px 0 0 43px;
}

.PageMover .parts-area .other2 img {
    margin: 20px 0 0 20px;
    width: 94px;
    height: auto;
}

.PageMover .parts-area .other3 img {
    margin: 11px 0 0 30px;
}

.PageMover .parts-area .other4 img {
    margin: 16px 0 0 14px;
}

/* .PageMover .parts-area .parts-1 {
    background-image: url(../assets/images/body1.png);
    background-repeat: no-repeat;
    background-position: center;
}

.IsDesktop .PageMover .parts-area .parts-1:hover {
    background-image: url(../assets/images/body1_active.png);
}

.PageMover .parts-area .parts-2 {
    background-image: url(../assets/images/body2.png);
    background-repeat: no-repeat;
    background-position: center;
}

.IsDesktop .PageMover .parts-area .parts-2:hover {
    background-image: url(../assets/images/body2_active.png);
}

.PageMover .parts-area .parts-3 {
    background-image: url(../assets/images/body3.png);
    background-repeat: no-repeat;
    background-position: center;
}

.IsDesktop .PageMover .parts-area .parts-3:hover {
    background-image: url(../assets/images/body3_active.png);
}

.PageMover .parts-area .parts-4 {
    background-image: url(../assets/images/body4.png);
    background-repeat: no-repeat;
    background-position: center;
}

.IsDesktop .PageMover .parts-area .parts-4:hover {
    background-image: url(../assets/images/body4_active.png);
} */

img.body1 {
    margin: 22px 0 0 65px;
    width: 225px;
}

img.body2 {
    margin: 39px 0 0 72px;
}

img.body3 {
    margin: 8px 0 0 101px;
}

img.body4 {
    margin: 32px 0 0 71px;
}

/* FACE 1*/

img.face1_body1 {
    margin: 102px 0 0 76px;
}

img.face1_body2 {
    margin: 51px 0 0 166px;
}

img.face1_body3 {
    margin: 128px 0 0 112px;
}

img.face1_body4 {
    margin: 82px 0 0 118px;
}

/* FACE 2*/

img.face2_body1 {
    margin: 106px 0 0 66px;
}

img.face2_body2 {
    margin: 64px 0 0 166px;
}

img.face2_body3 {
    margin: 138px 0 0 97px;
}

img.face2_body4 {
    margin: 94px 0 0 85px;
}

/* FACE 3*/

img.face3_body1 {
    margin: 22px 0 0 48px;
}

img.face3_body2 {
    margin: 8px 0 0 147px;
}

img.face3_body3 {
    margin: 54px 0 0 87px;
}

img.face3_body4 {
    margin: 18px 0 0 78px;
}

/* FACE 4*/

img.face4_body1 {
    margin: 92px 0 0 72px;
}

img.face4_body2 {
    margin: 47px 0 0 157px;
}

img.face4_body3 {
    margin: 110px 0 0 102px;
}

img.face4_body4 {
    margin: 65px 0 0 97px;
}

/* ARMS 1 */

img.arms1_1_body1 {
    margin: 144px 0 0 33px;
}

img.arms1_2_body1 {
    margin: 98px 0 0 183px;
}

img.arms1_1_body2 {
    margin: 45px 0 0 60px;
}

img.arms1_2_body2 {
    margin: 117px 0 0 215px;
}

img.arms1_1_body3 {
    margin: 168px 0 0 41px;
}

img.arms1_2_body3 {
    margin: 108px 0 0 177px;
}

img.arms1_1_body4 {
    margin: 135px 0 0 41px;
}

img.arms1_2_body4 {
    margin: 92px 0 0 167px;
}

/* ARMS 2 */

img.arms2_1_body1 {
    margin: 164px 0 0 83px;
}

img.arms2_2_body1 {
    margin: 156px 0 0 165px;
}

img.arms2_1_body2 {
    margin: 106px 0 0 120px;
}

img.arms2_2_body2 {
    margin: 115px 0 0 201px;
}

img.arms2_1_body3 {
    margin: 174px 0 0 94px;
    transform: rotate(11deg);
}

img.arms2_2_body3 {
    margin: 166px 0 0 174px;
    transform: rotate(25deg);
}

img.arms2_1_body4 {
    margin: 167px 0 0 94px;
    transform: rotate(-13deg);
}

img.arms2_2_body4 {
    margin: 179px 0 0 174px;
    transform: rotate(30deg);
    width: 71px;
}

/* ARMS 3 */

img.arms3_1_body1 {
    margin: 118px 0 0 54px;
}

img.arms3_2_body1 {
    margin: 82px 0 0 158px;
}

img.arms3_1_body2 {
    margin: 31px 0 0 60px;
}

img.arms3_2_body2 {
    margin: 86px 0 0 187px;
}

img.arms3_1_body3 {
    margin: 159px 0 0 74px;
}

img.arms3_2_body3 {
    margin: 85px 0 0 201px;
}

img.arms3_1_body4 {
    margin: 147px 0 0 59px;
}

img.arms3_2_body4 {
    margin: 90px 0 0 178px;
}

/* ARMS 4 */

img.arms4_1_body1 {
    margin: 144px 0 0 69px;
}

img.arms4_2_body1 {
    margin: 132px 0 0 158px;
}

img.arms4_1_body2 {
    margin: 69px 0 0 27px;
}

img.arms4_2_body2 {
    margin: 108px 0 0 193px;
}

img.arms4_1_body3 {
    margin: 165px 0 0 74px;
}

img.arms4_2_body3 {
    margin: 156px 0 0 201px;
}

img.arms4_1_body4 {
    margin: 164px 0 0 42px;
}

img.arms4_2_body4 {
    margin: 162px 0 0 197px;
}

/* LEGS 1 */

img.legs1_1_body1 {
    margin: 203px 0 0 132px;
}

img.legs1_2_body1 {
    margin: 198px 0 0 198px;
}

img.legs1_1_body2 {
    margin: 208px 0 0 73px;
}

img.legs1_2_body2 {
    margin: 211px 0 0 183px;
}

img.legs1_1_body3 {
    margin: 209px 0 0 127px;
}

img.legs1_2_body3 {
    margin: 204px 0 0 224px;
}

img.legs1_1_body4 {
    margin: 198px 0 0 104px;
}

img.legs1_2_body4 {
    margin: 191px 0 0 184px;
}

/* LEGS 2 */

img.legs2_1_body1 {
    margin: 199px 0 0 127px;
}

img.legs2_2_body1 {
    margin: 204px 0 0 181px;
}

img.legs2_1_body2 {
    margin: 211px 0 0 91px;
}

img.legs2_2_body2 {
    margin: 211px 0 0 167px;
}

img.legs2_1_body3 {
    margin: 199px 0 0 118px;
}

img.legs2_2_body3 {
    margin: 211px 0 0 196px;
}

img.legs2_1_body4 {
    margin: 195px 0 0 112px;
}

img.legs2_2_body4 {
    margin: 203px 0 0 148px;
}

/* LEGS 3 */

img.legs3_1_body1 {
    margin: 199px 0 0 155px;
}

img.legs3_1_body2 {
    margin: 209px 0px 0px 107px;
}

img.legs3_1_body3 {
    margin: 187px 0px 0px 156px;
}

img.legs3_1_body4 {
    margin: 190px 0px 0px 127px;
}

/* LEGS 4 */

img.legs4_1_body1 {
    margin: 208px 0 0 145px;
}

img.legs4_2_body1 {
    margin: 201px 0 0 188px;
}

img.legs4_1_body2 {
    margin: 206px 0 0 102px;
}

img.legs4_2_body2 {
    margin: 211px 0 0 167px;
}

img.legs4_1_body3 {
    margin: 208px 0 0 143px;
}

img.legs4_2_body3 {
    margin: 211px 0 0 208px;
}

img.legs4_1_body4 {
    margin: 195px 0 0 112px;
}

img.legs4_2_body4 {
    margin: 194px 0 0 176px;
}

/* OTHER - HORN 1 */

img.other1_body1 {
    margin: 46px 0 0 93px;
}

img.other1_body2 {
    margin: 16px 0 0 166px;
}

img.other1_body3 {
    margin: 70px 0 0 126px;
}

img.other1_body4 {
    margin: 0px 0 0 126px;
}

/* OTHER - TAIL 2 */

img.other2_body1 {
    margin: 171px 0 0 181px;
}

img.other2_body2 {
    margin: 168px 0 0 33px;
}

img.other2_body3 {
    margin: 189px 0 0 203px;
}

img.other2_body4 {
    margin: 176px 0 0 144px;
}

/* OTHER - WINGS 3 */

img.other3_1_body1 {
    margin: 8px 0 0 35px;
}

img.other3_2_body1 {
    margin: 0px 0 0 170px;
}

img.other3_1_body2 {
    margin: 1px 0 0 42px;
}

img.other3_2_body2 {
    margin: 14px 0 0 190px;
}

img.other3_1_body3 {
    margin: 8px 0 0 43px;
}

img.other3_2_body3 {
    margin: 10px 0 0 193px;
}

img.other3_1_body4 {
    margin: 106px 0 0 3px;
}

img.other3_2_body4 {
    margin: 104px 0 0 216px;
}

/* OTHER - MARKS 4 */

img.other4_body1 {
    margin: 31px 0 0 97px;
    transform: rotate(8deg);
    width: 195px;
}

img.other4_body2 {
    margin: 82px 0 0 69px;
}

img.other4_body3 {
    margin: 6px 0 0 128px;
}

img.other4_body4 {
    margin: 38px 0 0 112px;
}

.Header.pm-row {
    background-image: url(../assets/images/bann.png);
    background-repeat: no-repeat;
}

.PageMover .Header {
    height: 35px;
}

.Title,
.Subject {
    display: none !important;
}

.PageMover .TopText {
    padding-top: 0px !important;
    min-height: 0px !important;
    padding-left: 30px !important;
}

.PageMover ol {
    font-weight: bold;
}

.PageMover ol span {
    font-weight: normal;
}

.PageMover .questions {
    display: none;
    position: absolute;
    top: 201px;
    left: 426px;
    width: 258px;
}

.PageMover .questions input {
    width: 100%;
}

#input_name {
    margin-bottom: 25px;
}

.active-face,
.active-arms,
.active-body,
.active-legs,
.active-other {
    display: inline !important;
}

#printArea{
    position: absolute;
    top:10500px;
}

/** LO MODIFICATIONS END */

/* MODIFICATIONS TO THE TEMPLATE */

.PageMover .BackgroundColor {
    background-color: #ffffff !important;
    color: #333366 !important;
}

.PageMover #ContentBody {
    background-color: #ECFDA4;
    height: 371px;
}

.IsMac .PageMover #ContentBody ,
.IsIPad .PageMover #ContentBody ,
.IsAndroid .PageMover #ContentBody {
    background-color: #ECFDA4;
    height: 375px;
}

.ui-draggable-handle,
.tab,
a,
.button {
    cursor: pointer;
}

.TabBox .content-area {
    text-align: left;
}

.ThePopupAudioText {
    height: 177px;
}

/** ANIMATIONS */

@keyframes bounceInDown {
    0% {
        transform: translate3d(0, 0px, 0);
    }
    60% {
        transform: translate3d(0, -11px, 0);
    }
    65% {
        transform: translate3d(0, 0px, 0);
    }
    70% {
        transform: translate3d(0, -5px, 0);
    }
    75% {
        transform: translate3d(0, 0px, 0);
    }
    80% {
        transform: translate3d(0, -3px, 0);
    }
    85% {
        transform: translate3d(0, 0px, 0);
    }
    to {
        transform: translate3d(0, 0px, 0);
    }
}

.bounceInDown {
    animation-name: bounceInDown;
}

.animated {
    animation-duration: 3s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
    /* animation-iteration-count: infinite; */
}

.not-animated {
    animation: none;
}

/* .character-area {
    width: 366px;
    height: 307px;
} */

/** PRINTING CSS */

.character-area img {
    position: absolute;
    display: none;
}

@media print {
    .html {
        display: table;
        width: 580px;
        height: 970px;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    #wrapper {
        display: none;
    }
    #printArea {
        position: absolute;
        top: 0px;
        left: 0px;
        text-align: left;
        vertical-align: middle;
        display: table-cell;
        height: 970px;
        width: 580px;
        max-width: 580px;
        max-height: 100%;
    }
    #printArea>* {
        position: absolute;
    }

    .print-name {
        top: 100px;
        left: 150px;
        width: 600px;
    }

    .IsAndroid .print-name {
        top: 70px;
        left: 150px;
        width: 600px;
    }

    .print-from {
        top: 151px;
        left: 150px;
        width: 600px;
    }

    .IsAndroid .print-from {
        top: 110px;
        left: 150px;
        width: 600px;
    }

    .character-area {
        top: 250px;
        left: 180px;
    }

    .IsAndroid .character-area {
        top: 140px;
        left: 180px;
    }

    .print-des {
        top: 600px;
        left: 150px;
    }

    .IsAndroid .print-des {
        top: 460px;
        left: 150px;
    }

    .print-text {
        top: 650px;
        left: 150px;
    }

    .IsAndroid .print-text {
        top: 510px;
        left: 150px;
    }

    body.IsAndroid {
        transform: scale(0.8);
        overflow: hidden;
    }

    /* body.IsAndroid {
        padding-left: 240px;
    } */
     /* #wrapper {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        display: inline-block;
        margin-left: -200px;
    }
    body.IsAndroid #wrapper {
        -webkit-transform: rotate(90deg) scale(0.8);
        transform: rotate(90deg) scale(0.8);
    } */
}