body {
    width: 100%;
    background: url('../image/dayufu/dayufu_bg.jpg') no-repeat scroll center top #FFF;
    margin: 0;
    min-width: 1018px;
}

/* Slider area */
#tarsyliaHeaderDiv {
    margin: 10px 0 15px 0;
    height: 430px;
    /*background-image: url(/image/tarsylia_bg.png);
    background-image: url(/image/game_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
}

#gameBackgroundDiv {
    background-color: white;
    padding-top: 40px;
}

#gameBasicInfoDiv {
    margin-top: 15px;
    margin-bottom: 5px;
    color: #626f70;
}

#gameIconDiv {
    float: left;
}

#gameInfoDiv {
    float: left;
    margin-left: 20px;
    width: 54%;
}

.clsPGameInfo {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 16px;
    font-size: 16px;
}

#wallPaperStageDiv td{
    width: 50%;
    padding: 5px;
}

.clsSpanSizeLink {
    margin-right: 30px;
}

.clsDivWallPaperWrapper {
    width: 240px;
    height: 180px;
    padding: 5px;
    box-shadow: 0 1px 5px 0 #4a4a4a;
    -webkit-box-shadow: 0 1px 5px 0 #4a4a4a;
    -moz-box-shadow: 0 1px 5px 0 #4a4a4a;
    margin-top: 10px;
    margin-bottom: 15px;
}
.clsImgWallPaper {
    width: 100%;
    height: 100%;
}

.clsGreyText {
    color: grey;
}

.clsANoLink {
    text-decoration: none;
}

.clsDivHero {
    background: url('../image/Tarsylia/heroIntroBg.jpg') no-repeat;
    height: 440px;
    width: 330px;
    text-align: left;
    position: relative;
}

.clsDivHero .heroCnName {
    position: absolute;
    left: 9px;
    top: 11px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.clsDivHero .heroEnName {
    position: absolute;
    right: 11px;
    top: 11px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.clsDivHero .heroImage, .heroQualityImage {
    position: absolute;
    left: 6px;
    top: 64px;
}

.clsDivHero .heroBaseWeapon {
    position: absolute;
    left: 266px;
    top: 64px;
}

.clsDivHero .heroUpgradeWeapon {
    position: absolute;
    left: 289px;
    top: 64px;
}

.clsHeroProperty {
    color: grey;
    font-size: 11px;
    font-weight: bold;
}

.clsDivHero .heroRaceTitle {
    position: absolute;
    left: 170px;
    top: 43px;
}

.clsDivHero .heroJobTitle {
    position: absolute;
    left: 170px;
    top: 66px;
}

.clsDivHero .heroSkillTitle {
    position: absolute;
    left: 170px;
    top: 89px;
}

.clsDivHero .heroAoeTitle {
    position: absolute;
    left: 170px;
    top: 112px;
}

.clsDivHero .heroDesc {
    position: absolute;
    left: 155px;
    top: 140px;
    right: 15px;
    line-height: 132%;
}

.clsDivHero .heroHpTitle {
    position: absolute;
    left: 17px;
    top: 330px;
}

.clsDivHero .heroMsTitle, .heroCoopTitle {
    position: absolute;
    left: 77px;
    top: 330px;
}

.clsDivHero .heroAtkTitle {
    position: absolute;
    left: 137px;
    top: 330px;
}

.clsDivHero .heroProfTitle, .heroResTitle {
    position: absolute;
    left: 197px;
    top: 330px;
}

.clsDivHero .heroSpdTitle, .heroAttTitle {
    position: absolute;
    left: 257px;
    top: 330px;
}

.clsDivHero .heroLckTitle {
    position: absolute;
    left: 17px;
    top: 352px;
}

.clsDivHero .heroDefTitle {
    position: absolute;
    left: 77px;
    top: 352px;
}

.clsDivHero .heroTolTitle {
    position: absolute;
    left: 137px;
    top: 352px;
}

.clsDivHero .heroMoveTitle {
    position: absolute;
    left: 197px;
    top: 352px;
}

.clsDivHero .heroSelfIntro {
    position: absolute;
    left: 11px;
    top: 376px;
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.clsPContentTitle {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 16px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.clsDivVideoWrapper {
    width: 100%;
}

.clsDivVideoWrapper p{
    text-align: left;
}

.clsDivSupportBGMarriage {
    background: url('../image/Tarsylia/support_relation/marriage.jpg') no-repeat;
}

.clsDivSupportBGPet {
    background: url('../image/Tarsylia/support_relation/adoption.jpg') no-repeat;
}

.clsDivSupport {
    height: 338px;
    width: 602px;
    text-align: left;
    position: relative;
}

.clsDivSupport .fatherName {
    position: absolute;
    left: 23px;
    top: 18px;
}

.clsDivSupport .fatherImage, .fatherQualityImage {
    position: absolute;
    left: 16px;
    top: 46px;
}

.clsDivSupport .fatherFlag {
    position: absolute;
    left: 18px;
    top: 48px;
    z-index: 1000;
}

.clsDivSupport .fatherRace {
    position: absolute;
    left: 27px;
    top: 278px;
}

.clsDivSupport .fatherJob {
    position: absolute;
    left: 27px;
    top: 302px;
}

.clsDivSupport .motherName {
    position: absolute;
    left: 255px;
    top: 18px;
}

.clsDivSupport .motherImage, .motherQualityImage {
    position: absolute;
    left: 249px;
    top: 45px;
}

.clsDivSupport .motherFlag {
    position: absolute;
    left: 251px;
    top: 48px;
    z-index: 1000;
}

.clsDivSupport .motherRace {
    position: absolute;
    left: 262px;
    top: 278px;
}

.clsDivSupport .motherJob {
    position: absolute;
    left: 262px;
    top: 302px;
}

.clsDivSupport .childName {
    position: absolute;
    left: 453px;
    top: 18px;
}

.clsDivSupport .childImage, .childQualityImage {
    position: absolute;
    left: 447px;
    top: 44px;
}

.clsDivSupport .childRace,.childKind {
    position: absolute;
    left: 460px;
    top: 278px;
}

.clsDivSupport .childJob,.childProperty {
    position: absolute;
    left: 460px;
    top: 302px;
}

.clsDivSupport .loveTokenTitle {
    position: absolute;
    left: 154px;
    top: 110px;
    width: 93px;
    text-align: center;
}

.clsDivSupport .loveTokenName {
    position: absolute;
    left: 154px;
    top: 208px;
    width: 93px;
    text-align: center;
}

.clsDivSupport .loveTokenImage {
    position: absolute;
    left: 168px;
    top: 133px;
}

.clsDivSupport .relationName {
    position: absolute;
    left: 392px;
    top: 159px;
    width: 47px;
    text-align: center;
}

.clsSupportTitle {
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.clsSupportHeroProperty {
    color: grey;
    font-size: 11px;
    font-weight: bold;
}

.clsDivStartChartInfo {
    background: url('../image/Tarsylia/starChart/starChartBg.jpg') no-repeat;
    width: 330px;
    height: 470px;
    text-align: left;
    position: relative;
}

.clsDivStartChartInfo .starChartName {
    position: absolute;
    left: 30px;
    top: 13px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.clsDivStartChartInfo .starChartImage {
    position: absolute;
    left: 6px;
    top: 35px;
}

.clsDivStartChartInfo .starChartDesc {
    position: absolute;
    left: 17px;
    right: 17px;
    top: 380px;
    color: grey;
    font-size: 12px;
}


.clsDivHeroStartChart {
    background: url('../image/Tarsylia/starChart/heroStarChartBg.jpg') no-repeat;
    width: 360px;
    height: 261px;
    text-align: left;
    position: relative;
}

.clsDivHeroStartChart .starChartName {
    position: absolute;
    left: 12px;
    top: 10px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.clsDivHeroStartChart .starCellCount {
    position: absolute;
    right: 15px;
    top: 10px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.clsDivHeroStartChart .starChartHeroImage {
    position: absolute;
    left: 6px;
    top: 35px;
}

.clsDivHeroStartChart .starChartHeroQuality {
    position: absolute;
    left: 6px;
    top: 35px;
}

.clsDivHeroStartChart .starChartImage {
    position: absolute;
    left: 150px;
    top: 34px;
}

.clsDivHeroStartChart .heroNameImage {
    position: absolute;
    left: 6px;
    top: 229px;
}

.clsDivHeroStartChart .heroName {
    position: absolute;
    left: 5px;
    top: 229px;
    width: 138px;
    height: 24px;
    line-height: 24px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}