*{ margin:0; padding:0}
html, body {width: 100%;height: 100%;}
dl,dt,dd,h1,h2,h3,h4,h5,h6{ margin:0; padding:0}
ul,li,p{ margin:0; padding:0; list-style:none}
.fl{ float:left}
.fr{ float:right}

.wsa li p,.wsa li i,.tool_set h4,.setting_option .close,.setting_option em,.wsa_icon em{ background-image:url(/uploads/image/.tdimg/wsa_skin.png)}

/*.wsa{ position:relative; width:100%; height:100px;background:#535353;}*/
.wsa{ position:relative; width:100%; height:100px;}
/*.wsa .wsa_logo{ position:absolute; left:-120px; top:0;color:#fff;opacity: 0.8;filter: alpha(opacity=80);}*/
.wsa .wsa_logo{display:inline-block;color:#fff;opacity: 0.8;filter: alpha(opacity=80);margin-right: 50px;vertical-align: top;}
.wsa .wsa_logo h2{padding-left:45px; height:48px; margin-top:30px;background:url(/uploads/image/.tdimg/logo_wsa.png) no-repeat left center; line-height:48px;font-size:18px}
.mode-mini .wsa_logo{left:-100px}
.mode-mini .wsa_logo h2{ margin-top:0; font-size:16px; background:none}
/*.wsa .container{ position:relative; margin:0 auto; width:1200px; text-align:center}*/
.wsa .container{ position:relative; margin:0 auto; width:100%; text-align:center;background: #535353;}
/*.mode-mini .container{width:1300px}*/
.mode-mini .container{width:100%}
.wsa dl{ display:inline-block; margin-left:-16px; }
.wsa dt,.wsa dd{ float:left; margin-left:16px; padding-top:8px;}
.wsa li.wsa_icon{ float:left; width:62px; text-align:center; font-size:14px; color:#fff;}
.wsa li.wsa_icon i{ cursor:pointer}
.wsa li.wsa_drop{width:90px;}
.wsa li span{ margin-bottom:6px; line-height:24px;}
.wsa li.wsa_icon p{ padding:2px; height:52px; }
.wsa li.wsa_icon i{ display:block; width:100%; height:50px; border-radius:5px; font-style:normal; color:#666; font-size:0px; line-height:28px;}
.wsa li em{ display:block; float:right;width:24px; height:50px; background-position:left -1272px; cursor:pointer}
.wsa li em.on{background-position:-24px -1272px}
.wsa li.wsa_drop i{width:58px; float:left}

.wsa li p{ background-position: left -1210px; }
.wsa li.wsa_drop p{background-position: left -1150px;}

.wsa li.wsa-reader-repeat p{ position:relative}
.wsa li.wsa-reader-repeat b{ display:none; position:absolute;left:0; top:0; width:100%; height:50px; line-height:10; overflow:hidden; cursor:pointer; z-index:100}
.wsa-reader-repeat .icon_player{ background:url(/uploads/image/.tdimg/icon_player.png)}
.wsa-reader-repeat .pause{ background-position:left top;}
.wsa-reader-repeat .pause:hover{ background-position:left -60px;}
.wsa-reader-repeat .play{ background-position:-60px top;}
.wsa-reader-repeat .play:hover{ background-position:-60px -60px;}
.mode-mini .wsa-reader-repeat b{ background:none !important; height:28px !important}

.wsa li.wsa-reset i{ background-position:left -50px}
.wsa li.wsa-sound-on i{ background-position:left -100px}
.wsa li.wsa-sound-off i{ background-position:-60px -100px}
.wsa li.wsa-sound-fast i{ background-position:left -150px}
.wsa li.wsa-sound-speed i{ background-position:-60px -150px}
.wsa li.wsa-sound-slow i{ background-position:-120px -150px}
.wsa li.wsa-reader-repeat i{ background-position:left -200px}
.wsa li.wsa-reader-pointing i{ background-position:-60px -200px}
.wsa li.wsa-palette i{ background-position:left -250px}
.wsa li.wsa-zoom-in i{ background-position:left -300px}
.wsa li.wsa-zoom-out i{ background-position:left -350px}
.wsa li.wsa-view-text i{ background-position:left -400px}
.wsa li.wsa-view-normal i{ background-position:-60px -400px}
.wsa li.wsa-mouse i{ background-position:left -450px}
.wsa li.wsa-tips i{ background-position:left -500px}
.wsa li.wsa-state i{ background-position:left -550px}
.wsa li.wsa-help i{ background-position:left -600px}
.wsa li.wsa-fold i{ background-position:left -650px}
.wsa li.wsa-exit i{ background-position:left -700px}
.wsa li.wsa-refresh i{ background-position:left -750px}
.wsa li.wsa-undo i{ background-position:left -800px}
.wsa li.wsa-redo i{ background-position:left -850px}
.wsa li.wsa-undo i{ background-position:left -800px}
.wsa li.wsa-redo i{ background-position:left -850px}
.wsa li.wsa-undo-disable i{ background-position:-60px -800px}
.wsa li.wsa-redo-disable i{ background-position:-60px -850px}

.wsa li.wsa-reset:hover i,.wsa li.wsa-reset i.active{ background-position:-300px -50px}
.wsa li.wsa-sound-on:hover i,.wsa li.wsa-sound-on i.active{ background-position:-300px -100px}
.wsa li.wsa-sound-off:hover i,.wsa li.wsa-sound-off i.active{ background-position:-360px -100px}
.wsa li.wsa-sound-fast:hover i,.wsa li.wsa-sound-fast i.active{ background-position:-300px -150px}
.wsa li.wsa-sound-speed:hover i,.wsa li.wsa-sound-speed i.active{ background-position:-360px -150px}
.wsa li.wsa-sound-slow:hover i,.wsa li.wsa-sound-slow i.active{ background-position:-420px -150px}
.wsa li.wsa-reader-repeat:hover i,.wsa li.wsa-reader-repeat i.active{ background-position:-300px -200px}
.wsa li.wsa-reader-pointing:hover i,.wsa li.wsa-reader-pointing i.active{ background-position:-360px -200px}
.wsa li.wsa-palette:hover i,.wsa li.wsa-palette i.active{ background-position:-300px -250px}
.wsa li.wsa-palette i.active1{ background-position:-360px -250px}
.wsa li.wsa-palette i.active2{ background-position:-420px -250px}
.wsa li.wsa-palette i.active3{ background-position:-480px -250px}
.wsa li.wsa-palette i.active4{ background-position:-540px -250px}
.wsa li.wsa-zoom-in:hover i,.wsa li.wsa-zoom-in i.active{ background-position:-300px -300px}
.wsa li.wsa-zoom-out:hover i,.wsa li.wsa-zoom-out i.active{ background-position:-300px -350px}
.wsa li.wsa-view-text:hover i,.wsa li.wsa-view-text i.active{ background-position:-300px -400px}
.wsa li.wsa-view-normal:hover i,.wsa li.wsa-view-normal i.active{ background-position:-360px -400px}

.wsa li.wsa-mouse:hover i,.wsa li.wsa-mouse i.active{ background-position:-300px -450px}
.wsa li.wsa-tips:hover i,.wsa li.wsa-tips i.active{ background-position:-300px -500px}
.wsa li.wsa-state:hover i,.wsa li.wsa-state i.active{ background-position:-300px -550px}
.wsa li.wsa-help:hover i,.wsa li.wsa-help i.active{ background-position:-300px -600px}
.wsa li.wsa-fold:hover i,.wsa li.wsa-fold i.active{ background-position:-300px -650px}
.wsa li.wsa-exit:hover i,.wsa li.wsa-exit i.active{ background-position:-300px -700px}
.wsa li.wsa-refresh:hover i,.wsa li.wsa-refresh i.active{ background-position:-300px -750px}
.wsa li.wsa-undo:hover i,.wsa li.wsa-undo i.active{ background-position:-300px -800px}
.wsa li.wsa-redo:hover i,.wsa li.wsa-redo i.active{ background-position:-300px -850px}
.wsa li.wsa-undo-disable:hover i,.wsa li.wsa-undo-disable i.active{ background-position:-360px -800px}
.wsa li.wsa-redo-disable:hover i,.wsa li.wsa-redo-disable i.active{ background-position:-360px -850px}


.mode-mini{ padding-top:6px; height:54px}
.mode-mini li span{ display:none}
.mode-mini li.wsa_icon{ width:70px;}
.mode-mini li.wsa_drop{width:90px;}
.mode-mini li em{ height:30px; background-position:left -1285px}
.mode-mini li em.on{ height:30px; background-position:-24px -1285px}

.mode-mini li.wsa_icon p{ padding:2px; height:30px; background-position: -120px -1210px;}
.mode-mini li.wsa_drop p{background-position: -120px -1150px;}
.mode-mini li.wsa_icon i{  height:28px; border-radius:5px;  color:#666; font-size:18px; line-height:30px;}
.mode-mini li.wsa_icon i{ background-position:bottom right !important}
.mode-mini li.wsa_icon i.active{ background-position:-300px -1050px !important; color:#fff}
.mode-mini li:hover i{ background-position:-306px -1050px  !important; color:#fff}
/*.mode-mini li.wsa-palette i{background-position:-306px -1000px !important}-->*/
.mode-mini li.wsa-palette i.active1{ background-position:-376px -1000px !important}
.mode-mini li.wsa-palette i.active2{ background-position:-446px -1000px !important}
.mode-mini li.wsa-palette i.active3{ background-position:-516px -1000px !important}
.mode-mini li.wsa-palette i.active4{ background-position:-586px -1000px!important}

.wsa_icon { position:relative;}
.drop_down{ display:none; position:absolute;left:0; top:76px; width:88px; background:#efefef; border:1px solid #7c7c7c; border-top:none; border-radius:0 0 6px 6px; box-shadow:0 2px 2px #3d3d3d; color:#666; z-index:2001}
.mode-mini .drop_down{top:30px}

.slide_sound{ width:162px; padding:10px 25px; text-align:center}
.slide_sb{width:70px;}
.slide_sb ul{ margin:10px auto 0;  width:51px; padding-top:6px; height:114px; background:url(/uploads/image/.tdimg/bg_sound.png) no-repeat top right;}
.slide_sb li{float:left;width:100%;margin-bottom:12px;height:12px; line-height:10; overflow:hidden; cursor:pointer}
.slide_sb li.select{ background:url(/uploads/image/.tdimg/bg_sound.png) no-repeat left top;}

.slide_speed{width:80px; }
.slide_speed ul{ margin-top:10px;height:120px; background:url(/uploads/image/.tdimg/bg_sound_speed.png) no-repeat right top}
.slide_speed li{ height:40px; line-height:10; overflow:hidden; cursor:pointer}
.slide_speed li.select{ background:url(/uploads/image/.tdimg/bg_sound_speed.png) no-repeat left center}


.slide_pagecolor ul{ margin-left:7px; height:280px; width:78px; background:url(/uploads/image/.tdimg/bg_color.png);}
.slide_pagecolor ul li{ height:54px; margin-bottom:2px; line-height:20; overflow:hidden; cursor:pointer}
.slide_pagecolor ul li.select{background:url(/uploads/image/.tdimg/bg_color.png) no-repeat right -2px}

/*settings*/
.mark{position: fixed;*position: static;top: 100px;left: 0;right: 0;bottom: 0;*height: 100%;overflow: hidden;}
.tool_set{ position:absolute;right:30px; top:40px; }
.mode-mini .tool_set{top:20px}
.tool_set h4{ padding-left:26px; height:26px; line-height:26px; background-position:left -1038px;color:#fff; font-size:14px; font-weight:normal;opacity:0.8;filter:alpha(opacity=80); cursor:pointer}

.settings{position:fixed; top:31px; right:-170px; width:160px; z-index:100 }
.mode-mini .settings{ top:11px;}
.setting_option{ margin-left:-10px; clear:both; background:#fff; border-radius:8px 0 0 8px; padding:10px 0 10px 10px; overflow:hidden;zoom:1}
.setting_option em{ display:block;float:left; width:20px; height:20px; margin-left:10px; border-radius:6px; cursor:pointer}
.setting_option em.skin_dark{ background-color:#535353;}
.setting_option em.skin_blue{ background-color:#182a57}
.setting_option em.skin_red{ background-color:#c44d4d}
.setting_option em.skin_green{ background-color:#257945}
.setting_option em.select{ background-position:left -1093px}
.setting_option .close{ display:block; float:right; margin-right:5px; width:20px; height:20px; background-position:left -1062px; cursor:
pointer}

/**
 @ panel */
.panel {
display:none;
position:absolute;
top:69px;
z-index:1005;
padding:2px;
overflow:hidden;
border:1px solid #7eb196;
/*background-color:#f3f7f5;*/
background-color:#eef4f1;
-moz-box-shadow:2px 2px 5px #909090;
-webkit-box-shadow:2px 2px 5px #909090;
box-shadow:2px 2px 5px #909090;
}
.bg-iframe {
display:none;
position:absolute;
top:100px;
z-index:1001;
filter:progid:dximagetransform.microsoft.shadow(color="#909090",direction=135,strength=4);
}
.panel-block {
position:absolute;
left:3px;
bottom:0;
width:20px;
height:10px;
overflow:hidden;
background-color:#eef4f1;
}

#bg-wrapper {
position:fixed;
*position:static;
top:100px;
left:0;
right:0;
bottom:0;
*height:100%;
overflow:hidden;
}

.hidden {
display:none;
position:absolute;
top:-9999em;
left:-9999em;
visibility:hidden;
}

#tooltips {
display:none;
position:absolute;
left:0;
bottom:0;
z-index:1001;
width:100%;
}
.x-tooltips {
min-height:200px;
max-height:700px;
border:6px solid #505050;
border-right-width:220px;
font-family:'\5b8b\4f53';
font-weight:bold;
text-align:center;
background-color:#ffffff;
overflow-y:scroll;
}
#tooltips-show {
min-height:200px;
max-height:700px;
}
#tooltips-show ul {
max-height:200px;
padding:0 10px;
overflow-y: auto;
}

#tooltips-show li {
display:inline-block;
*display:inline;
zoom:1;
margin:0px 0px;
vertical-align:middle;
}
.tip-letter, .tip-zh {
display:block;
}
.tooltips-close {
position:absolute;
top:8px;
right:15px;
width:23px;
height:23px;
text-indent:-10000px;
background:url(/uploads/image/.tdimg/wsa_skin.png) no-repeat -300px -1100px;
cursor:pointer;
}
.tooltips-tools {
position:absolute;
top:40px;
right:55px;
}
.tooltips-row a {
display:inline-block;
width:72px;
height:70px;
vertical-align:top;
background-position:left top;
cursor:pointer;
color:#fff;
font-size:48px;
text-align:center;
text-decoration:none;
}

.simplified { margin-right:6px; background:#ca232b}
.traditional { background:#eb4516}
.tooltips-row .pinyin { margin-top:6px; width:150px;height:48px;background:#317ec5; font-size:30px; line-height:48px}

.simplified:hover{ background:#ff000c}
.traditional:hover{ background:#ff8441}
.pinyin:hover{ background:#0255e0}

.simplified.cur,.traditional.cur{ width:68px; height:66px; border:2px solid #fff}
.pinyin.cur{ width:146px; height:44px; border:2px solid #fff}

.mask, .page-x {
*padding-top:78px;
}

.page-x, .page-y {
display:none;
position:absolute;
z-index:1000;
overflow:hidden;
background-color:#ff0000;
}
.page-x {
width:5px;
height:100%;
}
.page-y {
width:100%;
height:5px;
}

.wsa .btn-disabled{
   opacity: 0.50;
}

.wsa_logo h2{cursor:pointer}

html.show-state #bg-wrapper {
    bottom: 150px;
}


@media screen  and (max-width: 1285px) {
    .wsa,.wsa .container{width: 1400px;text-align: left;}
    .tool_set{right:3px;}
    .mode-mini .wsa_logo{margin-right: 20px;}
    .mode-mini .wsa dt, .wsa dd{margin-left: 10px;}
    .mode-mini .tool_set{right: 3px;}
}

@media screen and (min-width: 1286px) and (max-width: 1335px){
    .wsa .container{text-align:left;}
    .wsa .wsa_logo{margin-right: 10px;}
    .tool_set{right:3px;}
    .mode-mini,.wsa .container{width: 1400px;text-align: left;}
    .mode-mini dt, .wsa dd{margin-left: 10px;}
}

@media screen and (min-width: 1336px) and (max-width: 1440px){
    .wsa .container{text-align:left;}
    .wsa .wsa_logo{margin-right: 30px;}
    .tool_set{right:3px;}
    .mode-mini  .wsa_logo {margin-right: 10px;}
    .mode-mini  .wsa_logo h2 {
        padding-left: 0px;
    }
    .mode-mini dt, .wsa dd{margin-left: 10px;}
}

@media screen and (min-width: 1441px) and (max-width: 1580px){
    .mode-mini .wsa_logo{margin-right: 30px;}
    .wsa .container{text-align:left;}
}