/* briannetod.ttf */
@font-face {
        font-family: "briannetod";
        src: url("fonts/briannetod2.ttf");
}
/* dwarventodcraft.ttf */
@font-face {
        font-family: "dwarventodcraft";
        src: url("fonts/dwarventodcraft.ttf");
}
/* houseofterrormedium.ttf */
@font-face {
        font-family: "houseofterrormedium";
        src: url("fonts/houseofterrormedium.ttf");
}
/* pico12.ttf */
@font-face {
        font-family: "pico12";
        src: url("fonts/pico12.ttf");
}
/* continuumbold.ttf */
@font-face {
        font-family: "continuumbold";
        src: url("fonts/continuumbold.ttf");
}
body {
        user-select: none;
        -moz-user-select: none;
        overflow-x: hidden;
        /*      overflow-y: hidden;
        background: #000; */
        background: linear-gradient(-90deg, #0f0f1f, #091a09);
        font-family: Tahoma, Verdana, fixedsys;
        overflow-x: hidden;
        font-variant-ligatures: none;
}
body.game-paused * {
        animation-play-state: paused !important;
}
td {
        font-family: Verdana;
        font-size: 12px;
}

div {
        left: 0;
}
div[class^="tp-"],
.WindowFrame {
        left: initial;
}

#preloader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
}

#status {
        background-image: url(images/gamethumbnail3.png);
        background-repeat: no-repeat;
        background-position: center;
        z-index: 999;
}

span {
        cursor: url(images/interface/Cursor.cur), default;
}

span,
div,
h2,
h3 {
        padding: 0;
        margin: 0;
}

td.HandBookZombie {
        background: url(images/interface/Almanac_ZombieWindow2.png) no-repeat;
        width: 20%;
        height: 16%;
        text-align: center;
}

#DivTeach {
        filter: "alpha(opacity=90)";
        filter: alpha(opacity=90);
        opacity: 0.9;
        -moz-opacity: 0.9;
        position: absolute;
        width: 900px;
        height: 50px;
        top: 170px;
        left: 100;
        z-index: 100;
        text-align: center;
        font-size: 22px;
        color: #000;
        background-color: rgba(91, 67, 46, 0);
        font-family: Tahoma;
}
#DivTeachBar {
        position: absolute;
        width: 900px !important;
        top: 400px;
        left: 0 !important;
        z-index: 100;
        text-align: center;
        font-size: 31px !important;
        color: #fdf5ad;
        background-color: #000000;
        padding-top: 20px;
        padding-bottom: 20px;
        text-shadow:
                0px 2px 0px #000000,
                2px 2px 0px #000000,
                2px 0px 0px #000000,
                2px -2px 0px #000000,
                0px -2px 0px #000000,
                -2px -2px 0px #000000,
                -2px 0px 0px #000000,
                -2px 2px 0px #000000 !important;
        background: #00000090;
}

/* .WindowFrame {
    position: absolute;
    top: 0;
    width: 900px;
    left: 50%;
    margin-left: -450px;
    height: 600px;
    overflow: hidden
} */

#DivParty {
        filter: "alpha(opacity=90)";
        filter: alpha(opacity=90);
        opacity: 0.9;
        -moz-opacity: 0.9;
        position: absolute;
        width: 900px;
        height: 0;
        top: 500px;
        left: 0;
        z-index: 100;
        text-align: center;
        font-family: Tahoma;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        background-color: #5b432e;
}

.WindowFrame {
        transform: scale(0.9);
        top: -30px;
        width: 900px;
        height: 600px;
        overflow: hidden;
        left: calc(50% - 450px);
        position: absolute;
}

#dLvlLink {
        position: absolute;
        top: 587px;
        color: #fff;
        width: 500px;
        left: 50%;
        margin-left: -230px;
        font-size: 13px;
        line-height: 14px;
        height: 15px;
        font-family: arial, sans-serif;
        z-index: 1;
        text-align: left;
}

#dLvlLink span {
        font-weight: bold;
        text-decoration: underline;
}

#dLvlLink a {
        color: #fff;
}

#dAD2,
#dTitleSmallContainer,
#dMiniSmallContainer,
#dxiyouji {
        display: none;
}

#dAdFlash {
        display: block;
}

#dAdFlash div {
        width: 336px;
        font-family: Tahoma, arial, verdana;
        font-size: 11px;
        position: absolute;
        left: 60px;
        top: 380px;
        text-align: right;
        padding-right: 50px;
}

#dFlagMeter {
        visibility: hidden;
        position: absolute;
        z-index: 255;
        left: 50%;
        margin-left: -340px;
        top: 0;
        height: 45px;
}

#dFlagMeterTitle {
        position: absolute;
        text-align: right;
}

#sFlagMeterTitleF {
        position: absolute;
        color: #f93;
        font-size: 25px;
        /*      font-weight: bold; */
        width: 440px;
        top: 19px;
        left: -6px;
        font-family: Tahoma;
        pointer-events: none;
}

#dFlagMeterTitleB {
        display: none;
        position: absolute;
        color: #000;
        font-size: 25px;
        font-weight: bold;
        width: 440px;
        height: 21px;
        top: 20px;
        left: -5px;
        font-family: Tahoma;
}

#dFlagMeterContent {
        position: absolute;
        left: 444px;
        width: 157px;
        height: 40px;
}

#dFlagMeterContent .flag {
        top: 14px;
        visibility: hidden;
}

#imgFlagMeterFull {
        top: 17px;
        clip: rect(0, auto, auto, 157px);
}

#imgFlagMeterEmpty {
        top: 17px;
}

#imgFlag1 {
        left: 10px;
}

#imgFlag2 {
        left: 40px;
}

#imgFlag3 {
        left: 70px;
}

#imgFlag4 {
        left: 100px;
}

#imgGQJC {
        left: 35px;
        top: 29px;
        visibility: hidden;
}

#imgFlagHead {
        left: 139px;
        top: 13px;
}

#dFlagMeter1 {
        visibility: hidden;
        position: absolute;
        z-index: 255;
        left: 50%;
        margin-left: -340px;
        top: 0;
        height: 45px;
}

#dFlagMeterTitle1 {
        position: absolute;
        text-align: right;
}

#sFlagMeterTitleF1 {
        position: absolute;
        color: #f93;
        font-size: 18px;
        font-weight: bold;
        width: 440px;
        top: 19px;
        left: -6px;
        font-family: Tahoma;
}

#dFlagMeterTitleB1 {
        position: absolute;
        color: #000;
        font-size: 18px;
        font-weight: bold;
        width: 440px;
        height: 21px;
        top: 20px;
        left: -5px;
        font-family: Tahoma;
}

#dFlagMeterContent1 {
        position: absolute;
        left: 444px;
        width: 157px;
        height: 40px;
}

#dFlagMeterContent1 .flag {
        top: 14px;
        visibility: hidden;
}

#imgFlagMeterFull1 {
        top: 17px;
        clip: rect(0, auto, auto, 157px);
}

#imgFlagMeterEmpty1 {
        top: 17px;
}

#imgFlag11 {
        left: 10px;
}

#imgFlag21 {
        left: 40px;
}

#imgFlag31 {
        left: 70px;
}

#imgFlag41 {
        left: 100px;
}

#imgGQJC1 {
        left: 35px;
        top: 29px;
        visibility: hidden;
}

#imgFlagHead1 {
        left: 139px;
        top: 13px;
}

#dSurface {
        display: none;
        z-index: 255;
}

#dAdventure {
        position: absolute;
        left: 472px;
        top: 80px;
        width: 331px;
        height: 146px;
        cursor: url(images/interface/Pointer.cur), pointer;
}

#iSurfaceBackground .adventure0 {
        background: url() no-repeat;
        _background: url() no-repeat;
}

#iSurfaceBackground .adventure1 {
        background: url() no-repeat;
        _background: url() no-repeat;
}

#iSurfaceBackground .mini {
        position: absolute;
        background: url() no-repeat;
        _background: url() no-repeat;
        left: 474px;
        top: 203px;
        width: 313px;
        height: 133px;
        cursor: url(images/interface/Pointer.cur), pointer;
}

#iSurfaceBackground .riddle {
        position: absolute;
        left: 478px;
        top: 303px;
        width: 286px;
        height: 122px;
        cursor: url(images/interface/Pointer.cur), pointer;
}

#iSurfaceBackground .handbook {
        position: absolute;
        left: 374px;
        top: 428px;
        width: 99px;
        height: 99px;
        cursor: url(images/interface/Pointer.cur), pointer;
        background: url(images/interface/SelectorScreen_Almanac_32.png) no-repeat;
        _background: url(images/interface/SelectorScreen_Almanac_8.png) no-repeat;
}

#ZombieHand {
        position: absolute;
        width: 330px;
        height: 330px;
        left: 262px;
        top: 264px;
        display: none;
        overflow: hidden;
}

#dName {
        position: absolute;
        left: 35px;
        width: 230px;
        top: 93px;
        height: 25px;
        text-align: center;
        color: #fc6;
        font-weight: bold;
        font-size: 18px;
        font-family: Tahoma, Verdana, Tahoma;
}

#dNameDiv0 {
        position: absolute;
        left: 20px;
        top: -260px;
        width: 293px;
        height: 260px;
        background: url(images/interface/SelectorScreen_WoodSign1_32.png) no-repeat;
        _background: url(images/interface/SelectorScreen_WoodSign1_32.png) no-repeat;
}

#dNameDiv1 {
        cursor: url(images/interface/Pointer.cur), pointer;
        position: absolute;
        left: 3px;
        top: 96px;
        width: 291px;
        height: 71px;
        background: url(images/interface/SelectorScreen_WoodSign2_32.png) no-repeat;
        _background: url(images/interface/SelectorScreen_WoodSign2_8.png) no-repeat;
}

#dNameDiv2 {
        position: absolute;
        left: 14px;
        top: 136px;
        width: 293px;
        height: 150px;
        background: url(images/interface/SelectorScreen_WoodSign3_32.png) no-repeat;
        _background: url(images/interface/SelectorScreen_WoodSign3_8.png) no-repeat;
        overflow: hidden;
}

#dSurfaceBack {
        position: absolute;
        top: 0;
        width: 0;
        height: 0;
        z-index: 255;
}

#dHelp {
        width: 814px;
        height: 599px;
        background: url(images/interface/Help.png) no-repeat;
        position: absolute;
        display: none;
        left: 133px;
        top: 70px;
}

#dSelectLevel {
        position: absolute;
        width: 100%;
        height: 100%;
        font-weight: bold;
        display: none;
}

#dOptionsMenuBack {
        position: absolute;
        text-align: center;
        left: 244px;
        top: 60px;
        width: 423px;
        height: 498px;
        display: none;
        background: url(images/interface/OptionsMenuback32.png) no-repeat;
        _background: url(images/interface/OptionsMenuback32.png) no-repeat;
}

.TitleBigContainer {
        position: relative;
        width: 220px;
        margin: 120px auto 0 auto;
        height: 240px;
        overflow: hidden;
}

#dTitleSmallContainer span {
        cursor: url(images/interface/Pointer.cur), pointer;
}

#dMiniSmallContainer .SmallLevel {
        width: 100%;
}

#dMiniSmallContainer .BigLevel span {
        cursor: url(images/interface/Pointer.cur), pointer;
}

#dxiyouji .SmallLevel {
        width: 100%;
}

#dxiyouji .BigLevel span {
        cursor: url(images/interface/Pointer.cur), pointer;
}

#dMiniLvl2 {
        position: absolute;
        left: 0;
        top: 0;
        display: none;
}

#dBigLvl2,
#dBigLvl3 {
        position: absolute;
        left: 0;
        top: 0;
        display: none;
}

.SmallLevel {
        float: left;
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 50%;
        font-size: 12px;
}

.BigLevel {
        width: 45%;
        height: 37px;
}

.OptionsMenuButton,
.OptionsMenuButtonDown {
        background: url(images/interface/OptionsBackButton32.png) no-repeat;
        _background: url(images/interface/OptionsBackButton8.png) no-repeat;
        float: left;
        font-family: Tahoma;
        font-size: 38px;
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 360px;
        height: 100px;
        margin-left: 29px;
        display: inline;
        color: #0f0;
}

.OptionsMenuButton {
        background-position: 0 0;
}

.OptionsMenuButtonDown {
        background-position: 0 -100px;
}

.OptionsMenuButtonSpan {
        height: 90px;
        line-height: 100px;
        cursor: url(images/interface/Pointer.cur), pointer;
}

.SelectModal {
        color: #fc6;
        font-weight: bold;
        cursor: url(images/interface/Pointer.cur), pointer;
        background: url(images/interface/Button.png) no-repeat center;
        text-align: center;
        height: 43px;
        width: 115px;
}

.Menu {
        float: left;
        text-align: center;
        line-height: 41px;
        font-weight: bold;
        font-family: Tahoma;
        color: #00cb08;
        height: 46px;
        width: 113px;
        background: url(images/interface/Button.png) no-repeat;
}

#imgSF {
        position: absolute;
        cursor: url(images/interface/Pointer.cur), pointer;
        z-index: 256;
}

#PointerUD {
        position: absolute;
        z-index: 50;
}

#dTitle {
        visibility: hidden;
        position: absolute;
        background-color: #ffd;
        width: 180px;
        font-size: 12px;
        text-align: center;
        line-height: 1.5;
        border: 1px solid #000;
        padding: 3px;
        z-index: 254;
}

#dAll {
        contain: layout style;
        background: #000 !important;
        position: relative;
}

#dAll::before {
        content: "Windous95.com";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'PvZ', 'Impact', 'Arial Black', sans-serif;
        font-size: 48px;
        font-weight: bold;
        color: #4a8c3f;
        text-shadow: 
                -2px -2px 0 #2d5a27,
                2px -2px 0 #2d5a27,
                -2px 2px 0 #2d5a27,
                2px 2px 0 #2d5a27,
                0 4px 0 #1a3518,
                0 5px 8px rgba(0,0,0,0.8);
        letter-spacing: 2px;
        z-index: 1;
        pointer-events: none;
        opacity: 0.85;
}

#dAll img,
#dFlagMeter img,
#dHandBookPCard img {
        position: absolute;
        border-style: none;
}

#dPZ {
        position: absolute;
}

#dFog {
        position: absolute;
        left: 1290px;
        top: 10px;
        height: 600px;
        width: 800px;
        z-index: 24;
}

#dFog img {
        opacity: 0.7;
        filter: alpha(opacity=70);
}

#tGround {
        position: absolute;
        width: 1400px;
        height: 600px;
        visibility: hidden;
        z-index: 0;
}

#dCardList {
        visibility: hidden;
        position: absolute;
        left: 500px;
        top: 0;
        width: 100px;
        overflow: visible;
        z-index: 254;
}

#dCardList div {
        position: relative;
        cursor: url(images/interface/Pointer.cur), pointer;
        padding: 0;
        height: 60px;
        overflow: hidden;
}

#dCardList span {
        cursor: url(images/interface/Pointer.cur), pointer;
        text-align: right;
        position: absolute;
        left: 58px;
        width: 18px;
        top: 30px;
        font-family: Cafeteria Black;
        font-size: 30px;
}

#dCardList img {
        position: absolute;
}

#dZombie {
        position: absolute;
        width: 335px;
        height: 600px;
        left: 1065px;
        top: 0;
        z-index: 1;
}

#bShowHandBook {
        visibility: hidden;
        position: absolute;
        left: 1300px;
        top: 555px;
        text-align: center;
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 89px;
        height: 26px;
        z-index: 201;
        line-height: 26px;
        background: url(images/interface/Almanac_CloseButton.png);
        color: rgb(40, 50, 90);
        font-size: 14px;
}

#dSelectCard {
        visibility: hidden;
        position: absolute;
        left: 600px;
        top: 0;
        width: 465px;
        height: 600px;
        z-index: 20;
        background: url("images/interface/SeedChooser_Background.png") no-repeat;
}
@keyframes selectCardShow {
        from {
                transform: translateY(600px);
        }
        to {
                transform: translateY(0);
        }
}
@keyframes selectCardHide {
        from {
                transform: translateY(0);
                visibility: visible;
        }
        to {
                transform: translateY(600px);
                visibility: hidden;
        }
}
#dSelectCard.show {
        visibility: visible;
        animation: selectCardShow 0.2s cubic-bezier(0.61, 1, 0.88, 1) forwards;
}
#dSelectCard.hide {
        visibility: visible;
        animation: selectCardHide 0.2s cubic-bezier(0.12, 0, 0.39, 0) forwards;
}

#dSelectCard .title {
        text-align: center;
        line-height: 35px;
        font-size: 12px;
        color: #fc6;
        height: 35px;
        width: 100%;
        top: 0;
        font-family: Tahoma;
        font-weight: bold;
}

#dSelectCard .bTitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-top: 10px;
}

#dSelectCard .button {
        width: 65px;
        height: 35px;
        border-left: 3px solid #85411c;
        border-right: 3px solid #4e250c;
        border-top: 3px solid #85411c;
        border-bottom: 3px solid #4e250c;
        background-color: #602d11;
        font-size: large;
        font-family: dwarventodcraft !important;
        cursor: url(images/interface/Pointer.cur), pointer;
}

#dPCard {
        position: relative;
        width: 96%;
        height: 455px;
        padding-left: 13px;
        _padding-left: 10px;
}

#dPCard .span1,
#dHandBookPCard .span1 {
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 70px;
        height: 42px;
        overflow: hidden;
        float: left;
        margin: 8px 0 0 2px;
        position: relative;
}

#dPCard .span2,
#dHandBookPCard .span2 {
        cursor: url(images/interface/Pointer.cur), pointer;
        text-align: right;
        position: absolute;
        left: 42px;
        width: 18px;
        top: 20px;
        font-family: Cafeteria Black;
        font-size: 20px;
}

#dPCard img,
#dHandBookPCard img {
        left: 0;
        width: 70px;
        height: 84px;
}

#dTop {
        position: absolute;
        left: 605px;
        top: 561px;
        height: 35px;
        width: 123px;
        visibility: hidden;
        z-index: 1;
}

#dSunNum {
        background: url("images/interface/SunBack.png") no-repeat;
        position: absolute;
        width: 123px;
        height: 35px;
}

#sSunNum {
        text-align: center;
        position: absolute;
        top: 7px;
        left: 43px;
        width: 68px;
        font-family: Verdana;
        font-weight: bold;
        font-size: 18pt;
}

@keyframes sun-collect {
        0% {
                translate: var(--sun-start);
        }
        100% {
                translate: var(--sun-end);
        }
}
@keyframes sun-collect-scale {
        0%,
        70% {
                transform: scale(1);
                opacity: 1;
        }
        90% {
                transform: scale(0.5);
                opacity: 0.3;
        }
        100% {
                transform: scale(0.5);
                opacity: 0;
        }
}

.sun-collect {
        animation:
                sun-collect 1s cubic-bezier(0.25, 1, 0.5, 1) forwards,
                sun-collect-scale 0.75s cubic-bezier(0.12, 0, 0.39, 0) forwards;
}

#tdShovel {
        position: absolute;
        width: 71px;
        height: 35px;
        left: 130px;
        background: url("images/interface/ShovelBack.png") no-repeat;
        visibility: hidden;
}

#dPlants,
#dZombies {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
}

#dMenu {
        visibility: hidden;
        position: absolute;
        top: 3;
        left: 50%;
        margin-left: 185px;
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 226px;
        height: 41px;
        z-index: 254;
}

#dHandBook {
        visibility: hidden;
        position: absolute;
        z-index: 255;
        width: 900px;
        background: url(images/interface/Almanac_IndexBack.png) no-repeat;
}

#dHandBook .title {
        position: relative;
        text-align: center;
        line-height: 92px;
        height: 88px;
        width: 100%;
        font-size: 32px;
        font-weight: bold;
        font-family: Tahoma;
}

#dHandBook .content {
        position: relative;
        height: 423px;
        width: 100%;
}

#dHandBook .content div {
        position: absolute;
        width: 50%;
        text-align: center;
        padding-top: 135px;
}

#dHandBook .content div .button {
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 152.5px;
        height: 41px;
        font-size: 14pt;
        font-weight: bold;
        font-family: Tahoma;
}

#dHandBook .close,
#dHandBookPZ .dButton .button2,
#dRiddleClose,
#dMini1 .button,
#dMini0 .button,
#dAdvSmallContainer .button,
#dHandBookPZ .dButton .button2 {
        margin-top: 55px;
        margin-left: 770px;
        text-align: left !important;
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 89px;
        height: 26px;
        line-height: 26px;
        background: url(images/interface/Almanac_CloseButton.png);
        color: rgb(40, 50, 90);
        font-size: 16px;
        box-sizing: border-box;
        padding-left: 15px;
}

#btnViewPlant {
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 113;
        height: 41;
        border-left: 3px solid #85411c;
        border-right: 3px solid #4e250c;
        border-top: 3px solid #85411c;
        border-bottom: 3px solid #4e250c;
        background-color: #8f431b;
        color: #fc6;
        font-weight: bold;
        font-size: 14pt;
        font-family: Tahoma;
        margin-top: 43px;
}

#btnViewZombie {
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 113;
        height: 41;
        background: #5a5d78;
        color: #00f500;
        font-size: 14pt;
        font-family: Tahoma;
        margin-top: 25px;
        border-left: 3px solid #6c6c85;
        border-right: 3px solid #595674;
        border-top: 3px solid #6c6c85;
        border-bottom: 3px solid #54546b;
}

#dHandBookPZ {
        visibility: hidden;
        position: absolute;
        z-index: 255;
        width: 900px;
}

#dHandBookPZ .dButton {
        position: absolute;
        left: 0;
        top: 568px;
        width: 100%;
}

#dHandBookPZ .dButton div {
        position: absolute;
        text-align: center;
        cursor: url(images/interface/Pointer.cur), pointer;
        height: 26px;
        line-height: 26px;
        color: rgb(40, 50, 90);
        font-size: 16px;
}

#dHandBookPZ .dButton .button1 {
        left: 30px;
        width: 164px;
        background: url(images/interface/Almanac_IndexButton.png);
        text-align: right;
        box-sizing: border-box;
        padding-right: 21px;
        padding-top: 1px;
}

.button1 {
        width: 164px;
        background: url(images/interface/Almanac_IndexButton.png);
        text-align: right;
        box-sizing: border-box;
        padding-right: 21px;
        padding-top: 1px;
        height: 26px;
        line-height: 26px;
        color: rgb(40, 50, 90);
        font-size: 16px;
        cursor: url(images/interface/Pointer.cur), pointer;
}

#dHandBookPZ .dButton .button2 {
        margin-top: -1px !important;
}

#dHandBookP {
        position: absolute;
        top: 0;
        width: 100%;
        height: 567px;
}

#dHandBookP .title,
#dHandBookZ .title {
        position: absolute;
        top: 0;
        width: 100%;
        height: 70px;
        text-align: center;
        font-size: 20px;
        font-family: Tahoma;
}

#dHandBookP .title {
        line-height: 90px;
        color: #d59f2b;
}

#dHandBookP .list,
#dHandBookZ .list {
        position: absolute;
        text-align: center;
        left: 55%;
        height: 497px;
        top: 71px;
}

#dHandBookP .list {
        width: 45%;
        /*      background: url(images/interface/Almanac_PlantCard.png) no-repeat 20px 10px; */
}

#dHandBookP .list .cost_cool {
        color: #8f431b;
        width: 75%;
        font-size: 14px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
}

#dHandBookP .list .cost_cool .cost {
        float: left;
        width: 11%;
}

#dHandBookP .list .cost_cool .cool {
        float: left;
        width: 18.5%;
}

#dHandBookPCard {
        position: absolute;
        top: 71px;
        width: 50%;
        height: 80%;
        margin: 25px 0 0 15px;
        overflow-y: auto;
}

#dHandBookPCard::-webkit-scrollbar {
        width: 10px;
}
#dHandBookPCard::-webkit-scrollbar-thumb {
        background: #954f19;
        border-radius: 10px;
        box-shadow:
                inset -1px -1px 2px 0 rgba(0, 0, 0, 0.2),
                inset 1px 1px 2px 0 #b6703b;
        background: linear-gradient(133deg, #954f19, #904b17);
}
#dHandBookPCard::-webkit-scrollbar-thumb:hover {
        /*      background: #a4571b; */
        background: linear-gradient(133deg, #a4571b, #9a5018);
}
#dHandBookPCard::-webkit-scrollbar-track {
        /*      background: #e4a865; */
        border-radius: 10px;
        box-shadow:
                inset -0.5px -0.5px 2px 0 rgba(255, 255, 255, 0.5),
                inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.2);
        background: linear-gradient(133deg, #e4a865, #d29a59);
}

#dHandBookPCard::-webkit-scrollbar-track {
        /*      background: #e4a865; */
        border-radius: 10px;
        box-shadow:
                inset -0.5px -0.5px 2px 0 rgba(255, 255, 255, 0.5),
                inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.2);
        background: linear-gradient(133deg, #e4a865, #d29a59);
}

#pPlantBack,
#pZombieBack {
        position: absolute;
        width: 200px;
        height: 200px;
        background-size: 100% 100% !important;
        background: url("images/interface/Almanac_GroundDay.jpg");
}

#pPlantBack {
        left: 577px;
        top: 101px;
}

#pHandBookPlant {
        width: 90%;
        height: 180px;
        background-repeat: no-repeat;
        background-position: 50% 70%;
}

#dHandBookPlantName {
        width: 92.5%;
        height: 60px;
        position: relative;
        z-index: 257;
        text-align: center;
        line-height: 60px;
        font-size: 40px;
        color: #deb887;
        font-family: Tahoma;
}

#dProducePlant {
        margin-left: 50px;
        margin-right: auto;
        width: 62%;
        height: 210px;
        position: relative;
        z-index: 257;
        text-align: left;
        font-size: 15px;
        line-height: 16px;
        /*      font-family: Tahoma; */
        overflow-y: auto;
        color: #8f431b;
}

#pPlantCard {
        width: 45%;
        background: url(images/interface/Almanac_PlantCard.png) no-repeat 20px 10px;
        position: relative;
        z-index: 256;
        text-align: center;
        left: 55%;
        height: 497px;
        top: 71px;
}

#dProducePlant::-webkit-scrollbar {
        width: 9px;
}
#dProducePlant::-webkit-scrollbar-thumb {
        background: #954f19;
        border-radius: 10px;
        box-shadow:
                inset -1px -1px 2px 0 rgba(0, 0, 0, 0.2),
                inset 1px 1px 2px 0 #b6703b;
        background: linear-gradient(133deg, #954f19, #904b17);
}
#dProducePlant::-webkit-scrollbar-thumb:hover {
        /*      background: #a4571b; */
        background: linear-gradient(133deg, #a4571b, #9a5018);
}
#dProducePlant::-webkit-scrollbar-track {
        /*      background: #e4a865; */
        border-radius: 10px;
        box-shadow:
                inset -0.5px -0.5px 2px 0 rgba(255, 255, 255, 0.5),
                inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.2);
        background: linear-gradient(133deg, #e4a865, #d29a59);
}

#spSunNum,
#spCoolTime {
        color: #cc241d;
}
#spSunNum {
        float: left;
        width: 45%;
}
#spCoolTime {
        float: left;
        width: 10%;
}

#dHandBookZ {
        display: none;
        position: absolute;
        top: 0;
        width: 100%;
        height: 567px;
}

#dHandBookZ .title {
        line-height: 91px;
        color: #00c400;
}

#dHandBookZ .list {
        width: 42%;
        /*      background: url(images/interface/Almanac_ZombieCard.png) no-repeat 10px 8px; */
}

#pZombieCard {
        width: 42%;
        background: url(images/interface/Almanac_ZombieCard.png) no-repeat 10px 8px;
        position: relative;
        z-index: 256;
        text-align: center;
        left: 55%;
        height: 497px;
        top: 71px;
}

#dHandBookZCard {
        position: absolute;
        top: 71px;
        width: 55%;
        height: 497px;
        margin: 25px 0 0 20px;
}

#dHandBookZCard img {
        position: absolute;
}

#dHandBookZCard .span1 {
        cursor: url(images/interface/Pointer.cur), pointer;
        overflow: hidden;
        width: 60px;
        height: 70px;
        float: left;
        margin: 8px 0 0 2px;
        position: relative;
}

#dHandBookZCard .span2 {
        cursor: url(images/interface/Pointer.cur), pointer;
        text-align: right;
        width: 25px;
        position: absolute;
        left: 63px;
        width: 18px;
        top: 30px;
        font-family: Cafeteria Black;
        font-size: 25px;
        color: #fff;
}

#pZombieBack {
        left: 569px;
        top: 111px;
}

#pHandBookZombie {
        height: 200px;
        width: 75%;
        position: relative;
        top: -10px;
        left: 20px;
        margin-top: 50px;
        background-repeat: no-repeat;
        background-position: 50% 70%;
}

#dHandBookZombieName {
        width: 95%;
        height: 60px;
        position: relative;
        z-index: 257;
        text-align: center;
        line-height: 64px;
        font-size: 30px;
        color: #000;
        font-family: Tahoma;
}

#dProduceZombie {
        margin-left: 40px;
        margin-right: auto;
        width: 69%;
        height: 150px;
        position: relative;
        z-index: 257;
        text-align: left;
        font-size: 15px;
        line-height: 16px;
        font-family: Tahoma;
        overflow-y: auto;
        color: #8f431b;
}

#dProduceZombie::-webkit-scrollbar {
        width: 10px;
}
#dProduceZombie::-webkit-scrollbar-thumb {
        /*      background: #5f606f; */
        border-radius: 3px;
        box-shadow:
                inset -1px -1px 2px 0 rgba(0, 0, 0, 0.2),
                inset 1px 1px 2px 0 rgba(255, 255, 255, 0.5);
        background: linear-gradient(130deg, #5f606f, #525362);
}
#dProduceZombie::-webkit-scrollbar-thumb:hover {
        /*      background: #4e4f5b; */
        background: linear-gradient(130deg, #4e4f5b, #40414b);
}
#dProduceZombie::-webkit-scrollbar-track {
        /*      background: #ded5f7; */
        border-radius: 3px;
        box-shadow:
                inset -0.5px -0.5px 2px 0 rgba(255, 255, 255, 0.5),
                inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.2);
        background: linear-gradient(133deg, #ded5f7, #c9c1e2);
}

#dNewPlant {
        visibility: hidden;
        position: absolute;
        top: -30px;
        left: 50%;
        margin-left: -445px;
        width: 900px;
        height: 603px;
        background: url(images/interface/AwardScreen_Back.jpg) no-repeat center center;
        background-size: 100% 100%;
        transform: scale(0.9);
}

#dNewPlant .card {
        position: absolute;
        top: 100px;
        width: 900px;
        height: 191px;
        line-height: 191px;
        text-align: center;
}

#dNewPlantTitle {
        position: absolute;
        left: 50%;
        text-align: center;
        margin-left: -250px;
        color: #fc6;
        font-size: 20px;
        height: 90px;
        line-height: 90px;
        font-weight: bold;
        width: 500px;
}

#dNewPlantName {
        position: absolute;
        position: absolute;
        top: 320px;
        text-align: center;
        left: 50%;
        margin-left: -150px;
        width: 300px;
        height: 55px;
        font-family: Tahoma;
        font-size: 30px;
        color: #000;
        font-weight: bold;
        line-height: 55px;
}

#dNewPlantTooltip {
        position: absolute;
        left: 50%;
        top: 400px;
        text-align: center;
        margin-left: -140px;
        width: 280px;
        font-weight: bold;
        font-family: Tahoma;
        font-size: 15px;
        color: #232323;
}

#btnNextLevel {
        position: absolute;
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 113px;
        height: 41px;
        border-left: 3px solid #85411c;
        border-right: 3px solid #4e250c;
        border-top: 3px solid #85411c;
        border-bottom: 3px solid #4e250c;
        background-color: #8f431b;
        color: #fc6;
        font-weight: bold;
        font-size: 16px;
        font-family: Tahoma;
        left: 400px;
        top: 507px;
        border-radius: 5px;
}

#dProcess {
        text-align: center;
        border: 1px solid #fff;
        background: #000;
        color: #fff;
        position: absolute;
        left: 50%;
        margin-left: -442px;
        top: 10px;
        width: 865px;
        height: 550px;
        visibility: hidden;
        z-index: 250;
        padding: 6px;
        /* padding: 6px 5px 10px 2px */
}

#dProcess img {
        margin: 5px 0;
}

#dProcess .button {
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 113px;
        height: 30px;
        border-left: 3px solid #85411c;
        border-right: 3px solid #4e250c;
        border-top: 3px solid #85411c;
        border-bottom: 3px solid #4e250c;
        background-color: #8f431b;
        color: #fc6;
        font-weight: bold;
        font-size: 14px;
        font-family: Tahoma;
}

#sFailed {
        line-height: 30px;
        font-size: 16px;
        color: #ff0;
        font-weight: bold;
}

#dProcess2 {
        overflow: auto;
        line-height: 18px;
        font-size: 12px;
        text-align: left;
        width: 100%;
        height: 500px;
}

dt {
        line-height: 20px;
        font-size: 15px;
        margin: 8px 0 0 15px;
        color: #e80;
        font-family: Verdana, Tahoma;
        font-weight: bold;
}

dd {
        line-height: 22px;
        font-size: 14px;
        margin: 0;
}

dd.yellow {
        color: #ff0;
}

.Tom1 {
        left: 0;
        top: 0;
        width: 86px;
        height: 91px;
        background: url(images/interface/Tombstones.png) no-repeat;
}

.Tom2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 86px;
        height: 91px;
        background: url(images/interface/Tombstone_mounds.png) no-repeat;
}

.flipH {
        transform: matrix(-1, 0, 0, 1, 0, 0);
        -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
        -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
        -o-transform: matrix(-1, 0, 0, 1, 0, 0);
}

#dText1,
#dText2 {
        position: relative;
        width: 100%;
}

#dText1 {
        height: 90px;
        _margin-bottom: 10px;
}

#dLink {
        position: absolute;
        top: 602px;
        left: 0;
}

#dLinkTop,
#dChatView2 {
        position: relative;
        float: left;
        width: 393px;
        _width: 384px;
}

#dLink,
#dLinkTop {
        color: #fff;
        padding: 0;
        height: 59px;
}

#dLink div,
#dLinkTop div,
#dChatView2 div {
        float: left;
        margin-right: 2px;
        height: 59px;
        _margin-right: 1px;
}

#dAdFlash {
        position: absolute;
        top: 100px;
        left: 50%;
        width: 320px;
        height: 290px;
        padding: 45px 107px 45px 107px;
        margin-left: -275px;
        z-index: 254;
        display: none;
}

#dAdFlash div {
        position: absolute;
}

#dAD2 {
        position: absolute;
        left: 50%;
        margin-left: -234px;
        top: 500px;
        height: 15px;
        width: 468px;
        z-index: 250;
}

.a5gg {
        position: relative;
        width: 161px;
        text-align: center;
        background: #f0f0f0;
        font-size: 14px;
        border: 0 solid #ccd3df;
}

.a5gg dt {
        margin-top: 0;
        line-height: 17px;
}

.a5gg a {
        text-decoration: none;
        color: #336cd8;
        font-size: 14px;
}

.a5gg dd {
        margin-left: 2px;
        width: 30px;
        height: 14px;
        line-height: 14px;
        float: left;
        _margin-left: 1px;
}

#dChat {
        position: absolute;
        left: 50%;
        margin-left: -421px;
        top: 5px;
        z-index: 255;
}

#dChat div {
        position: absolute;
}

#dChatView {
        display: none;
        width: 842px;
        height: 585px;
        background: url();
}

#dChatView .bg {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 800px;
        height: 395px;
        background: #ffcf94;
        filter: alpha(opacity=90);
        opacity: 0.9;
}

#dChatView iframe {
        background-color: transparent;
}

#dChatView .IF2 {
        position: absolute;
        left: 60px;
        top: 530px;
        width: 710px;
        height: 35px;
}

.Almanac_IndexBack {
        background: url(images/interface/Almanac_ZombieBack.jpg) no-repeat;
        width: 900px;
        height: 600px;
}

.Almanac_PlantBack {
        background: url(images/interface/Almanac_PlantBack.jpg) no-repeat;
        width: 900px;
        height: 600px;
}

.Almanac_ZombieBack {
        background: url(images/interface/Almanac_ZombieBack.jpg) no-repeat;
        width: 900px;
        height: 600px;
}

.Almanac_ZombieBack1 {
        background: url(images/interface/Almanac_ZombieBack1.jpg) no-repeat;
        width: 900px;
        height: 600px;
}

.Almanac_ZombieBack2 {
        background: url(images/interface/Challenge_Background_Xiyouji.jpg) no-repeat;
        width: 900px;
        height: 600px;
}

.Challenge_Background {
        background: url(images/interface/Challenge_Background.jpg) no-repeat;
        width: 900px;
        height: 600px;
}

.Challenge_Background_Level {
        background: url(images/interface/Challenge_Background_Level.jpg) no-repeat;
        width: 900px;
        height: 600px;
}

.Xiyouji_Background {
        background: url(images/interface/xiyouji_guanqia.jpg) no-repeat;
        width: 900px;
        height: 600px;
}

.Sunflower_trophy {
        position: absolute;
        left: 15px;
        top: 310px;
        width: 157px;
        height: 269px;
        overflow: hidden;
        cursor: url(images/interface/Pointer.cur), pointer;
}

.Sunflower_trophy img {
        position: absolute;
        left: -157px;
        filter: glow(color=#ffffff, strength=8);
}

#dLogin {
        position: absolute;
        left: 0;
        top: 0;
        width: 900px;
        height: 600px;
        z-index: 255;
        display: none;
        font-weight: bold;
}

#dLogin table {
        position: absolute;
        left: 233px;
        top: 90px;
        height: 400px;
        width: 434px;
}

#dLogin .list {
        position: absolute;
        left: 0;
        top: 90px;
        margin-top: 0;
        z-index: 200;
        width: 100%;
        font-size: 13px;
        text-align: center;
        color: #fff;
}

#dLogin .list div,
#dPause .list div {
        position: relative;
        width: 100%;
}

#dLogin .button,
#dPause .button {
        position: absolute;
        cursor: url(images/interface/Pointer.cur), pointer;
        top: 410px;
        font-family: 宋体;
        color: #f93;
        font-size: 24px;
        font-weight: 700;
}

#dPause .button {
        left: 150px;
        top: 404px;
}

#dPauseAD {
        left: 0;
        height: 100%;
}

#dLoadUserName {
        visibility: hidden;
        top: 170px;
        height: 100%;
        text-align: center;
}

#dPause {
        position: absolute;
        left: 233px;
        top: 20px;
        width: 434px;
        display: none;
        font-weight: bold;
}

#dPause .list {
        position: absolute;
        left: 0;
        top: 90px;
        z-index: 200;
        width: 100%;
        text-align: center;
}

#dPause .list .hidden {
        cursor: url(images/interface/Pointer.cur), pointer;
        height: 20px;
        color: #f93;
        font-size: 16px;
        line-height: 20px;
}

#dPause .list .pause {
        color: #000;
        font-size: 18px;
        line-height: 30px;
}

#dOptionsMenu {
        line-height: 30px;
        position: absolute;
        width: 98.5%;
        height: 100%;
        display: none;
        /*      font-weight: bold; */
}

#dOptionsMenu .button {
        cursor: url(images/interface/Pointer.cur), pointer;
        color: #fff;
        text-decoration: none;
        font-family: Tahoma;
        font-size: 20;
}

#dOptionsMenu .OMd0 {
        margin-top: 120px;
        height: 65px;
        position: relative;
}

#dOptionsMenu .OMd0 .OMd1 {
        position: absolute;
        left: 150px;
        text-align: left;
}

#dOptionsMenu .OMd0 .OMd1 div {
        height: 30px;
}

#dOptionsMenu .OMd0 .OMd1 div label {
        color: #000;
}

#dMiniSmallContainer,
#dxiyouji,
#dRiddleSmallContainer,
#dRiddleSmallContainer1,
#dAdvSmallContainer {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
}

#dMiniSmallContainer table {
        position: absolute;
        left: 0;
}

#dxiyouji table {
        position: absolute;
        left: 0;
}

#dRiddleTitle,
#dRiddleTitle1,
#dMiniSmallTitle,
#dAdvSmallTitle,
#iz-menu-title {
        position: relative;
        text-align: center;
        line-height: 88px;
        height: 88px;
        width: 100%;
        font-size: 30px;
        font-weight: bold;
        font-family: Tahoma;
        color: #fff;
}

#dRiddleTitle {
        color: #fff;
}

#dRiddleTitle1 {
        color: #fff;
}

#dRiddleInx {
        position: relative;
        height: 473px;
        width: 100%;
}

#dRiddleInx div {
        position: absolute;
        width: 50%;
        height: 442px;
        text-align: center;
}

#dRiddleInx .button {
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 113px;
        height: 41px;
        border-left: 3px solid #85411c;
        border-right: 3px solid #4e250c;
        border-top: 3px solid #85411c;
        border-bottom: 3px solid #4e250c;
        background-color: #8f431b;
        color: #fc6;
        font-weight: bold;
        font-size: 14pt;
        font-family: Tahoma;
        margin-top: 26px;
}

#dRiddleInx .inx0 {
        cursor: url(images/interface/Pointer.cur), pointer;
        top: 0;
        left: 0;
        margin-left: 0;
        width: 450px;
        height: 600px;
        background: url(images/interface/Almanac_IndexBack.png) no-repeat left top;
}

#dRiddleInx .inx1 {
        cursor: url(images/interface/Pointer.cur), pointer;
        top: 0;
        left: 0;
        margin-left: 0;
        width: 450px;
        height: 600px;
        background: url(images/interface/Almanac_IndexBack.png) no-repeat right top;
}

#dRiddleInx1 {
        position: relative;
        height: 473px;
        width: 100%;
}

#dRiddleInx1 div {
        position: absolute;
        width: 50%;
        height: 442px;
        text-align: center;
}

#dRiddleInx1 .button {
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 113px;
        height: 41px;
        border-left: 3px solid #85411c;
        border-right: 3px solid #4e250c;
        border-top: 3px solid #85411c;
        border-bottom: 3px solid #4e250c;
        background-color: #8f431b;
        color: #fc6;
        font-weight: bold;
        font-size: 14pt;
        font-family: Tahoma;
        margin-top: 26px;
}

#dRiddleInx1 .inx01 {
        cursor: url(images/interface/Pointer.cur), pointer;
        top: 0;
        left: 50%;
        margin-left: -110px;
        width: 221px;
        height: 310px;
        background: url(images/interface/Almanac_IndexBack.png) no-repeat left top;
}

#dRiddleInx1 .inx11 {
        cursor: url(images/interface/Pointer.cur), pointer;
        top: 0;
        left: 50%;
        margin-left: -110px;
        width: 221px;
        height: 310px;
        background: url(images/interface/Almanac_IndexBack.png) no-repeat right top;
}

#dRiddle0 td,
#dMini0 td,
#dMini1 td {
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 20%;
        text-align: center;
        background: url(images/interface/Challenge.png) no-repeat 50%;
        padding-top: 18px;
}

#dRiddle0 {
        position: relative;
        height: 473px;
        width: 94%;
        display: none;
}

#dRiddle0 .list,
#dMini0 .list,
#dMini1 .list {
        margin-top: 15px;
        height: 45px;
}

#dRiddle0 .button,
#dRiddle1 .button {
        top: 475px;
        position: absolute;
        left: 30px;
        text-align: center;
        cursor: url(images/interface/Pointer.cur), pointer;
        width: 164px;
        height: 26px;
        line-height: 26px;
        background: url(images/interface/Almanac_IndexButton.png);
        color: rgb(40, 50, 90);
        font-size: 16px;
}

#dRiddle1 {
        text-align: left;
        position: relative;
        height: 473px;
        width: 100%;
        display: none;
        top: -10px;
}

#dRiddleClose,
#dMini1 .button,
#dMini0 .button,
#dAdvSmallContainer .button {
        position: absolute;
        top: 512px;
}

#dRiddle1 .list {
        width: 48%;
}

#dAdvSmallContainer {
        padding-left: 50px;
}

#dAdvSmallContainer img {
        position: absolute;
}

#dAdvSmallContainer .lvl {
        /*      font-size: 16px;
        font-weight: bold;
        font-family: Tahoma; */
        float: left;
        cursor: url(images/interface/Pointer.cur), pointer;
        margin-left: 40px;
}

#dAdvSmallContainer .lvl2 {
        position: relative;
        float: left;
        width: 500px;
        line-height: 35px;
        padding-top: 15px;
}

#dAdvSmallContainer .list {
        position: relative;
        width: 700px;
        height: 93px;
        float: left;
}

#dAdvSmallContainer .list .title {
        position: relative;
        color: #000;
        font-size: 25px;
        line-height: 25px;
        font-weight: bold;
        font-family: Tahoma;
        height: 90px;
        width: 60px;
        float: left;
        padding-top: 25px;
}

#dAdvSmallContainer .list .icon {
        position: relative;
        height: 100px;
        width: 100px;
        float: left;
        margin-left: 20px;
}

#dAdvSmallContainer .img1 {
        top: 17px;
}

#dAdvSmallContainer .img2 {
        left: 8px;
        top: 11px;
}

.Announcement {
        position: absolute;
        left: 50%;
        margin-top: -20px;
        margin-left: -450px;
        padding-top: 25px;
        height: 60px;
        overflow: hidden;
        top: 600px;
        width: 900px;
        background: url("new_skin/pvz/game_bg.png") no-repeat 0 0;
        z-index: 65535;
}

.Announcement .d1 {
        float: left;
        position: relative;
        height: 40px;
        width: 75%;
}

.Announcement .d1 .share {
        font-weight: bold;
        float: left;
        line-height: 40px;
        margin-left: 0;
        font-size: 14px;
}

.dLittleChat {
        float: left;
        width: 25%;
        margin-top: 5px;
}

.dLittleChat a {
        color: #060;
        font-size: 14px;
        font-family: Tahoma, Tahoma;
}

.game_ipt_01 {
        float: left;
        width: 79px;
        height: 26px;
        margin-right: 10px;
        background: url(new_skin/pvz/game_ipt.png) no-repeat;
        border: 0;
        font-weight: 600;
        color: #fff;
        font-size: 14px;
        vertical-align: top;
        cursor: url(images/interface/Pointer.cur), pointer;
}

#dSpeedContainerContainer {
        display: none;
        z-index: 255;
}

#dSpeedContainer {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1.05);
        width: 360px;
        padding: 0;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: #fff;
        color: #333;
        font-family:
                system-ui,
                -apple-system,
                sans-serif;
        font-size: 14px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        z-index: 255;
        display: block;
}

#dSpeedContainer .speed-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid #eee;
}

#dSpeedContainer .speed-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
}

#dSpeedContainer .speed-close {
        background: none;
        border: none;
        font-size: 20px;
        color: #999;
        cursor: pointer;
        padding: 0;
        line-height: 1;
}

#dSpeedContainer .speed-close:hover {
        color: #333;
}

#dSpeedContainer .speed-selector {
        padding: 16px;
}

#dSpeedContainer .speed-selector label {
        display: block;
        margin-bottom: 10px;
        font-size: 13px;
        color: #666;
}

#dSpeedContainer .speed-buttons {
        display: flex;
        gap: 8px;
}

#dSpeedContainer .speed-btn {
        flex: 1;
        padding: 10px 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #f5f5f5;
        color: #333;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition:
                background 0.15s,
                border-color 0.15s;
}

#dSpeedContainer .speed-btn:hover {
        background: #e8e8e8;
        border-color: #bbb;
}

#dSpeedContainer .speed-btn:active {
        background: #ddd;
}

#dSpeedContainer .speed-current {
        padding: 12px 16px;
        background: #f9f9f9;
        text-align: center;
        font-size: 15px;
        color: #333;
}

#dSpeedContainer .speed-current strong {
        color: #111;
}

#dSpeedContainer .speed-info {
        padding: 12px 16px;
        border-top: 1px solid #eee;
}

#dSpeedContainer .speed-info p {
        margin: 0 0 8px 0;
        font-size: 12px;
        color: #666;
        line-height: 1.5;
}

#dSpeedContainer .speed-info p:last-child {
        margin-bottom: 0;
}

#dSpeedContainer .speed-info strong {
        color: #333;
}

#dSpeedContainer .speed-info em {
        font-style: normal;
        color: #555;
}

#dSpeedContainer .speed-actions {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        border-top: 1px solid #eee;
}

#dSpeedContainer .speed-actions button {
        flex: 1;
        padding: 10px 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;
        color: #333;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.15s;
}

#dSpeedContainer .speed-actions button:hover {
        background: #f5f5f5;
}

#dSpeedContainer .speed-actions button:last-child {
        background: #f0f0f0;
        font-weight: 500;
}

#dSpeedContainer .speed-actions button:last-child:hover {
        background: #e5e5e5;
}

button.jhp {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
        background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
        user-select: none;
        -webkit-border-radius: 2px;
        -webkit-user-select: none;
        background-color: #f5f5f5;
        background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
        background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
        border: 1px solid #dcdcdc;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 2px;
        color: #666;
        cursor: url(images/interface/Pointer.cur), pointer;
        font-family: arial, sans-serif;
        font-size: 11px;
        font-weight: bold;
        text-align: center;
}

button.jhp:hover {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f1f1f1));
        background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        background-color: #f8f8f8;
        background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
        background-image: -o-linear-gradient(top, #f8f8f8, #f1f1f1);
        border: 1px solid #c6c6c6;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        color: #333;
}

button.jhp:focus {
        border: 1px solid #4d90fe;
        outline: 0;
}