* {
    box-sizing: border-box;
    font-family: "微软雅黑";
}

.audio_box {
    width: 100%;
    height: 50px;
    position: relative;
}

.play_box {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 15px;
    cursor: pointer;
}

.loading_btn {
    /* background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMmM0YWQxYS1lN2M0LTQ2NTAtYjZiYS1lM2U4NWY5ZTQ4MWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkY2QkI5QUZGMTk2MTFFNkEwOEJENzQ0QzVCNTcxMjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkY2QkI5QUVGMTk2MTFFNkEwOEJENzQ0QzVCNTcxMjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg4OTNmYWM1LWMxN2QtNDNhMy1hMTZlLWIyZDA5YTJkYTI0MSIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmJjNDNkNTRjLTFmM2UtMTE3YS04MzVkLWQ2ZGVhNDQ2ZDM0ZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjo98tQAAAIySURBVHjazJhLL0NBFMevesaGxCMaIth4fAFUJfVcWBKCtRArC2sbiYQvIBoR38BWrFDqFYsmKlgJaxLxtsH/yDQpzmlnrnt7neSXNHPn8e/MmTNzJssytxrQB9pAA6gGReADPIArcAZ2wQa4tFywHDAM9sC7GlwHqhsFIyDbKTE94NRAhATNWvdfhBSAsOGM6BBWfRtZOThwWEgyR6BMV0yZxhLFwAzoBH6QC/LU7y6wAC7S9HGuI6owzcxsgXaDmW5XbaT+DtSYoi0KDV/BNMiy4YvUZgK8CH0vp9pNnAM/gqADu7UV3Aqifu0+ihFxpiL9q5CD8awZPAkh4VucGhKUT7oQZMeEsUaSK+0yFXZs+oyOT3GOHk1UqBV8J2S5Z0HhmKmz1A74+TFuuW8xzkV8QlxZy4Agbow2EtTIfNjJgKAIU9ZkeWh+ZsluvRSUxwh681n/zLwUVMKUPXopqJ4puyZBq8xazmZAEBduTknQPvOhPwOCBpiyr+OjUjg6er06Osi2hducW4frZqrDlWxQuBJMuSBoXOf6Qb50wgUqEPDigkbWIfjSHWhxSMyNMDs9ppf8Z7V8Pps+MyHMDLGSqnF+mjQooh4ZdC0gOLB2GpRIFM80EsU5lS341fpTslihln5eow+tRDFhpeDQxVT6WKXrxo8NS//lsSHZuh16jjlPtZtMLVsFrqgNIfTINar7YGXnaEg86QXVfbwKFKvB7+kKoWaDcr110ye9TwEGAHpEoIOU2h8eAAAAAElFTkSuQmCC") no-repeat left top; */
    animation: mymove 0.5s infinite;
    -webkit-animation: mymove 0.5s infinite;
    /*Safari and Chrome*/
}

@keyframes mymove {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes mymove {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.play_btn {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAoCAYAAAB99ePgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMmM0YWQxYS1lN2M0LTQ2NTAtYjZiYS1lM2U4NWY5ZTQ4MWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDRBRDY2NjVGMTk2MTFFNkEyRDhGRjYzQjUzMEY3ODIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDRBRDY2NjRGMTk2MTFFNkEyRDhGRjYzQjUzMEY3ODIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg4OTNmYWM1LWMxN2QtNDNhMy1hMTZlLWIyZDA5YTJkYTI0MSIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmJjNDNkNTRjLTFmM2UtMTE3YS04MzVkLWQ2ZGVhNDQ2ZDM0ZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuLGAUEAAAE5SURBVHjazNi9LoRBFMbxsaGwUVBS03MFlBrhAmwkWu6ASlTcgEj0XIHoRfSobSWhWxoF7/Gf5J1Eweb9mplnkl+z1cnuPufMHOecu8aKEz2Gb1xgXrG44APHmFEsLnjBLiYViwuesK5aXJAtNFZRltBYTUlDYw0lCY21FDU01pEoobEOdR4ai6Cz0FhErUNjCTQOjSVUOzSWWK3QWCaVQmOZjQ2NifgzNCbGh2bZFzZRfqB2ChwpfnP+593BlFJx99hCT+k/d4M1pVbiG/FVlWmRsqhPnGNJaXy94xQLSoP/DYeYU7oyDbGPvtJl8xGD0KNUrul32CwnjsQDpyjn4KrSu/ULl2E4q7z4fY86w6LSrmSEk1xbz/+KesUBZpX2c8/Yw7TS2vUB2wqr1t/nFhsxelTb8yPAAGjm5ZffBIQjAAAAAElFTkSuQmCC") no-repeat left top;
}

.pause_btn {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAoCAYAAAB99ePgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMmM0YWQxYS1lN2M0LTQ2NTAtYjZiYS1lM2U4NWY5ZTQ4MWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTVGN0U1M0FGMTk2MTFFNjk5NzQ5OThENkI4MjM2QUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTVGN0U1MzlGMTk2MTFFNjk5NzQ5OThENkI4MjM2QUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg4OTNmYWM1LWMxN2QtNDNhMy1hMTZlLWIyZDA5YTJkYTI0MSIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmJjNDNkNTRjLTFmM2UtMTE3YS04MzVkLWQ2ZGVhNDQ2ZDM0ZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/+RjoAAABDSURBVHja7M4xDQAwDANBK/RKt/xaCBmyZLiXvFqXJG+wrjP4vpXFwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcF1fQEGAMrdHjF9tlnyAAAAAElFTkSuQmCC") no-repeat left top;
}

.play_pro_box {
    height: 35px;
    position: absolute;
    top: 15px;
    left: 70px;
    right: 100px
}

.play_control {
    width: 100%;
    height: 10px;
    background: #f0f0f0;
    position: relative;
}

.play_load {
    width: 0;
    height: 10px;
    background: #e6e6e6;
    position: absolute;
    top: 0;
    left: 0;
}

.play_seekbar {
    width: 0;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

.play_drag {
    width: 4px;
    height: 14px;
    position: absolute;
    top: -2px;
    right: 0px;
    border: solid 1px #f0f0f0;
    cursor: pointer;
}

.play_time {
    font-size: 12px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.volume_box {
    width: 70px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 10px;
    padding-top: 12px;
}

.volume_pic {
    width: 20px;
    height: 15px;
    margin-right: 8px;
    float: left;
    cursor: pointer;
}

.volume_big {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMmM0YWQxYS1lN2M0LTQ2NTAtYjZiYS1lM2U4NWY5ZTQ4MWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc1MjFGQkVGMjk1MTFFNkE3RTJDQkExQjNFRUJDNzUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjc1MjFGQkRGMjk1MTFFNkE3RTJDQkExQjNFRUJDNzUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpiZGI2YTgyMC02YWU3LTRiY2QtYjgyYi01MzM3OGZlYTYwYWEiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiYzQzZDU0Yy0xZjNlLTExN2EtODM1ZC1kNmRlYTQ0NmQzNGUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6h27f+AAABLklEQVR42pxTvY5EUBS+2VIyfioktCq1hgiJFxBCJEovYB5BM++jRecBJJrJzFQ8wEwlGnZP9u7KsILsV5yc8+V8jnvPd9HnHqIoKopiQaLV1nEcz+fzT8c3dF1/PB5bsr7vfd+HVlwmScJxHJQkSZZluS57Pp+maeIJ76TnecBQFHW73Zaytm1lWUa/WPx2EARAapo2k9V1LYoiegPmXde93++QvF4vlmWBz/McbWC6EoZhrtcrPieUYRgekgFs24a8qirIJUk6KjudTpB3XQc5QRAf6F84KrMsCyLcPkRBEA7JaJq+XC6QpGkKUVGU2QLgM3/P5jjOtABslyzLZjttmmZ33aqqrpvLMIyFDOZsmWuyMm6arMzz/I6VMYZhiON48XDwnC3Z7jP9EmAADhADqkFG+18AAAAASUVORK5CYII=") no-repeat left center;
    background-size: contain;
}

.volume_little {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMmM0YWQxYS1lN2M0LTQ2NTAtYjZiYS1lM2U4NWY5ZTQ4MWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTI2RTJDN0ZGMjk1MTFFNkJBRDlBMzI4OENEMEM3NTkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTI2RTJDN0VGMjk1MTFFNkJBRDlBMzI4OENEMEM3NTkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpiZGI2YTgyMC02YWU3LTRiY2QtYjgyYi01MzM3OGZlYTYwYWEiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiYzQzZDU0Yy0xZjNlLTExN2EtODM1ZC1kNmRlYTQ0NmQzNGUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5KzM5+AAAAt0lEQVR42mL8//8/A+mACaso0Kzi4mJ8+v5jgB8/foSHh2OVggN0uffv3zs6OuIyEbu2x48f6+jo4HEIFm2XL1+WlZXFdH9ISMjt27fRtRH0NpAhKCh448YNkrUBQWBgIDnaeHl5kbUxMZAFiNXm4uJCrJFwRwoICKAHCXIEyMjIYGoLDg7GEgHInEePHpEc3fDE5eDgQLI2SFIOCwvDr40FMyTY2dmXL18uLS2NJ7QYycumAAEGAMIDtJ+KxoXQAAAAAElFTkSuQmCC") no-repeat left center;
    background-size: contain;
}

.silence_big {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMmM0YWQxYS1lN2M0LTQ2NTAtYjZiYS1lM2U4NWY5ZTQ4MWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjgzNDUyRUFGMjk1MTFFNkIwNDVENjA3ODU4RDE5MTAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjgzNDUyRTlGMjk1MTFFNkIwNDVENjA3ODU4RDE5MTAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpiZGI2YTgyMC02YWU3LTRiY2QtYjgyYi01MzM3OGZlYTYwYWEiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiYzQzZDU0Yy0xZjNlLTExN2EtODM1ZC1kNmRlYTQ0NmQzNGUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4fyPMPAAABUklEQVR42oRTO6qDUBC9UbFIoYWdIJLKPViajdi4gxTprUStU6UJauECLAJJE7KD2AdJK0ggWIj65mUeV2N8ekA5M84Z73wuads2TVPf99t/oGma53kDJ3m9XrIsE0Js26beqqqWy+VfxBuiKJ7P504GTxAELMtS5ePxQBMjDMNgGAbMxWKx2+06WV9pWRZ8xj/Q3Pf7XVEUVB6Px06GSsxK0S+mrmtVVcEpCAKYXdztdmuahnyB4zjXdSHj5XKB9/P5hA6RCfRbgmVDncBXq9WUDEORQ+XA4zgGzvM8mQYo+z/P85zMAns7KmMmZIfDgSqRnE6n+UNC+jAMka/X64+W0Mlst9vRTjJvgLnZbJA4jvMx0/1+PzruKIroaXHcZLDa1+v1e7myLJMkCZ2maY7IplcZye9URu9YWZbfFweWGE+r6zpp5zC4pkmSFEXxI8AAyjekOOT3MboAAAAASUVORK5CYII=") no-repeat left center;
    background-size: contain;
}

.silence_little {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmMmM0YWQxYS1lN2M0LTQ2NTAtYjZiYS1lM2U4NWY5ZTQ4MWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDY2M0U2QkZGMjk2MTFFNjg2MzlFOEFFMDAyM0NGMzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDY2M0U2QkVGMjk2MTFFNjg2MzlFOEFFMDAyM0NGMzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpiZGI2YTgyMC02YWU3LTRiY2QtYjgyYi01MzM3OGZlYTYwYWEiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiYzQzZDU0Yy0xZjNlLTExN2EtODM1ZC1kNmRlYTQ0NmQzNGUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6SP+W0AAAA9klEQVR42pTSTwpGQBgG8DfWiq0cQdlZWFEuYIFjiK2ltUsIR3ARKQsrF2CjbJhP33xN883In6fUzORX0zsPIIS6rsvzHL0JLMuiqioAZFlGTvd9T5Lkih1fWZaiKBK5rmsYhsf2htEyTVPHceCbe0ZLkgsmkJ8Mw5BlGbj4vj8MAzzP7z4AiqL0ff93yYvgCeG153lPGZZ4IUnSU0ZPiGHCBSuKgkjXdV+MpKoqvI6i6Pzd2rbVNI2fpGmadIdYdmQcR13X+eeu65qRbBWmabJtm28JI08adFQ5CAK+XLQ8L962bXEc8+dYWpYF6GWappnn+SPAABp8G3595a5lAAAAAElFTkSuQmCC") no-repeat left center;
    background-size: contain;
}

.volume_control {
    width: 40px;
    height: 3px;
    background: #cccccc;
    float: left;
    margin-top: 7px;
    position: relative;
}

.volume_drag {
    width: 6px;
    height: 16px;
    background: #000000;
    float: left;
    margin-top: 7px;
    position: absolute;
    bottom: -6px;
    left: 16px;
    cursor: pointer;
}