/*hach wkwebview no user selection*/
* {
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Sans GB', 'Hiragino Kaku Gothic Pro';
    -webkit-font-smoothing: antialiased;
}

.wrapper {
    position:absolute;
    width: 100%;
    height: 100%;
    /*background-color: #ECECEC;*/
    background: -webkit-linear-gradient(left, #FFFFFF 0%, #FFFFFF 0%);
    background:linear-gradient(left, #FFFFFF 0%, #FFFFFF 0%);
}

.title {
    font-size: 240%;
    font-weight: 400;
    color: #333333;
    width: auto;
    margin-top: 50px;
    padding-left: 40px;
    padding-right: 50px;
    cursor: default;
}

.description {
    font-size: 150%;
    font-weight: 300;
    color: #666666;
    width: 840px;
    height: 70px;
    margin-top: 10px;
    margin-bottom: 4px;
    padding-left: 40px;
    padding-right: 50px;
    cursor: default;
}

.tool {
    width: 420px;
    height: 178px;
    background-color: #F6F6F6;
    border-style:solid; 
    border-radius: 6px;
    border-width: 1px;
    border-color: #EDEAEA;
    position: absolute;
}

.tool-1 {
    left:40px;
    top:188px;
}

.tool-2 {
    left:480px;
    top:188px;
}

.tool-3 {
    left:40px;
    top:385px;
}

.tool-4 {
    left:480px;
    top:385px;
}

.tool-icon {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 32px;
    left: 37px;
    background-size: 100% 100%;
}

.btn-open {
    width: 68px;
    height: 19px;
    position: absolute;
    top:88px;
    left: 28px;
    background-size: 100% 100%;
    background-image: url(images/btn_bg_small_white.png);
}

.btn-open-title {
    font-size: 80%;
    font-weight: 400;
    color: #262626;
    display: inline-block;
    line-height: 19px;
    width: 66px;
    text-align: center;
    padding-left: 1px;
    cursor: default;
    position: relative;
    top: -2px;
}

.tool-name {
    font-size: 120%;
    font-weight: 400;
    color: #333333;
    width: auto;
    height: 24px;
    margin-left: 116px;
    margin-top: 35px;
    float: left;
}

.tool-description {
    font-size: 90%;
    font-weight: 400;
    color: #333333;
    width: 292px;
    height: 110px;
    margin-left: 116px;
    margin-top: 6px;
    margin-right: 30px;
    overflow: hidden;
    float: left;
}

.tool-icon-safety {
    background-size: 100% 100%;
    background-image: url(images/icon_drsafety.png);
}

.tool-icon-iTIS {
    background-size: 100% 100%;
    background-image: url(images/icon_iTIS.png);
}

.tool-icon-icleanerone {
    background-size: 100% 100%;
    background-image: url(images/icon_icleanerone.png);
}

.tool-icon-feedback {
    background-size: 100% 100%;
    background-image: url(images/icon_unknown.png);
}

.tool-icon-vpnone {
    background-size: 100% 100%;
    background-image: url(images/icon_vpnone.png);
}

.tool-icon-adblockone {
    background-size: 100% 100%;
    background-image: url(images/icon_adblockone.png);
}

.tool-icon-unarchiver {
    background-size: 100% 100%;
    background-image: url(images/icon_unarchiver.png);
}

#iCleanerOne-dq-icon {
    width: 66px;
    height: 66px;
    position: absolute;
    top: 65px;
    right: 8px;
    background-size: 100% 100%;
    background-image: url(images/iCleanerOneQR.png);
}

.tool-description-icleanerone {
    width: 230px;
}

.tool-free-icon {
    width: 53px;
    height: 18px;
    margin-left: 10px;
    margin-top: 38px;
    margin-right: 30px;
    float: left;
    background-image: url(images/icon_free.png);
}

.hidden {
    display: none;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {  
    .btn-open {
        background-image: url(images/btn_bg_small_white@2x.png);
        background-size: 100% 100%;
    }

    .btn-open {
        background-image: url(images/btn_bg_small_white@2x.png);
        background-size: 100% 100%;
    }

    .tool-free-icon {
        background-image: url(images/icon_free@2x.png);
        background-size: 100% 100%;
    }
}
