@charset "utf-8";
/**
 * Filename:              global.css
 * Website:               http://dnf.17173.com
 * Version:               
 * Updated:               2013-05-13T14:20Z
 * Author:                shanny.Hu
 * Explain：              DNF技能加点模拟器
 */
/*
  重置
*/
:root{overflow-y:scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0 none;}
*{ font-family:arial;}
:focus{outline:0;}
address,caption,cite,code,dfn,em,i,th,var,optgroup{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6,code,kbd,samp,tt{font-size:100%;}
abbr,acronym{border:0;font-variant:normal;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
textarea{*overflow:auto;}
input,button,textarea,select{*font-size:100%;}
button{cursor:pointer;overflow:visible;}
input[type="reset"],input[type="button"],input[type="submit"]{cursor:pointer;overflow:visible;}
ol,ul{list-style:none outside none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
sup,sub{font-size:100%;vertical-align:baseline;}
:link,:visited,ins{text-decoration:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
*+html img{-ms-interpolation-mode:bicubic;}
body{-webkit-text-size-adjust:none;}
/*
  公共
*/
.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.fr{display:inline;float:right!important;}
.fl{display:inline;float:left!important;}
.show{display:block;}
.hide{display:none;}
.visible{overflow:visible!important;}
.highlight{color:#F30!important;}
.important{font-weight:bold!important;}
.center{text-align:center!important;}
.left{text-align:left!important;}
.right{text-align:right!important;}
.J_box{overflow:hidden;}
p.indent{text-indent:2em;}
.ml10{margin-left:10px;}
.mr10{margin-right:10px;}
.mb10{margin-bottom:10px;}
.blank5,
.blank8,
.blank10{clear:both;overflow:hidden;}
.blank5{height:5px;}
.blank8{height:8px;}
.blank10{height:10px;}
button,input.button{cursor:pointer;overflow:visible;*vertical-align:middle;*line-height:normal;*padding:2px;_padding:2px 3px 0;*font-family:\5b8b\4f53;}
@media screen and (-webkit-min-device-pixel-ratio:0){button,input[type="reset"],input[type="button"],input[type="submit"]{padding:2px 4px 3px;}}

/*
  基本
*/
html{background:#fff;}
body{min-width:1000px;font:12px/1.5 tahoma,sans-serif;color:#333;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:underline; color:#f00;}

.main-c{ margin:0 auto; width:900px;}
.profession{ margin:0; width:100px;}
.profession a{opacity:.7;filter:alpha(opacity=70);}
.profession a:hover{opacity:1;filter:alpha(opacity=100);}
.skill-c{ margin:0 auto; width:800px;}
.skill-tit{ margin:0; width:798px; background:url(../img/skill_c.png); padding:5px 0; border:1px solid #545454; overflow:hidden;}
.jobbuttons{ height:57px; overflow:hidden;}
.jobbuttons li { float:left; width:85px; height:57px; margin-right:5px; display:inline; display:block; margin-bottom:2px;}
.jobbuttons img{ vertical-align:middle; display:block;}
.jobbuttons a{opacity:.7;filter:alpha(opacity=70); border:1px solid #858585; display:block; float:left; margin-left:2px; display:inline;}
.jobbuttons a:hover{opacity:1;filter:alpha(opacity=100); border:1px solid #fff;}
.jobbuttons .selected{opacity:1;filter:alpha(opacity=100); border:1px solid #fff;}
.jobbuttonschecked { background-position:0px 0px;}

.or{ margin:0;}
.or .next img{ margin:18px 5px 0 5px; float:left; display:inline; display:block;}
.miscbtnpane{ margin:0 0 0 8px; color:#fff; padding:2px;}
.miscbtnpane input{ width:50px; border:none; background:#1a1a1a; padding:0 3px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; color:#11CCFF;font-family:arial; font-weight:bolder; font-style:italic; font-size:14px;}
.miscbtnpane .btn { background: url(../img/btn2.png) no-repeat; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin-top:10px;}
.miscbtnpane .btn1{ background: url(../img/btn.png) no-repeat; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin-top:10px;}
.logan{ width:77px;}
.logan .btn { background: url(../img/btn.png) no-repeat; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin:3px 0 2px 0;}
.logan .btn2 { background: url(../img/btn3.png) no-repeat; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin:3px 0 2px 0;}
.skill-ui{ margin:0; width:800px; background:url(../img/layout_bd.png) repeat-y; position:relative;}

.skill{ margin:0; width:600px;}
/* 通用技能 */
#skillpane{ margin:0 0 10px 10px; padding-left:53px; background:url(../img/common_bg.png) no-repeat; height:56px;}
#skillpane div{ }
.current{ margin:3px 0 0 5px; width:36px; height:48px; color:#fff; position:relative; float:left; display:inline;}
.current .expand { z-index:11;}
.current .sd{ position:absolute; top:-4px; left:-4px;}
.current .ic{ position:absolute; top:3px; left:4px; width: 28px;height: 28px;}
.current .ls{ position:absolute; top:32px; left:4px; text-align:center; color:#fff; cursor:default;}
.current .fm{ position:absolute; top:-1px; left:-1px;}
.current .wn{ position:absolute; top:3px; left:4px;}
.current .sn{ position:absolute; top:5px; left:35px; width:100px; color:#fff; font-size:12px; text-align:center; text-shadow:1px 1px 0 #000;}
.current .pt{ position:absolute; top:27px; left:107px; color: #00BFFF; font-family:arial; font-weight:bolder; font-style:italic; font-size:14px; cursor:default; }
.current .ba { position:absolute; top:5px; left:35px; width:18px; height:18px; cursor:default;}
.current .bs { position:absolute; top:25px; left:36px; width:18px; height:18px;}
.current .bm { position:absolute; top:5px; left:55px; width:18px; height:18px;}
.current .bc { position:absolute; top:25px; left:55px; width:18px; height:18px;}


.mod-tabs-s1{zoom:1;}
.mod-tabs-s1 .mod-tabs-hd{position:relative;height:30px;line-height:30px;  padding:8px 0 10px 10px;}
.mod-tabs-s1 .mod-tabs-trigger{display:inline;float:left;}
.mod-tabs-s1 .mod-tabs-trigger li{position:relative;cursor:pointer;float:left;width:90px; padding-left:28px; background:url(../img/cb_normal.png) no-repeat 0 4px;color:#666;}
.mod-tabs-s1 .mod-tabs-trigger li img{ margin-top:7px; _margin-top:;}
.mod-tabs-s1 .mod-tabs-trigger li.hover{padding-bottom:1px;font-weight:bold;color:#333;}
.mod-tabs-s1 .mod-tabs-trigger li.selected{padding-bottom:1px!important;font-weight:700;background:url(../img/cb_checked.png) no-repeat 0 2px;}
.mod-tabs-s1 .mod-tabs-bd{}



.ptpane { background: url(../img/pt_pane.png) no-repeat; right:210px; top:12px; width:211px;	position:absolute; overflow:hidden; line-height:18px;}
.totalSP { text-align:left; width:70px; color:#11CCFF; font-family:arial; font-weight:bolder; font-style:italic; font-size:14px; cursor:default; padding-left:22px;}
.totalTP {text-align:left; width:68px; color:#e16516; font-family:arial; font-weight:bolder; 	font-style:italic; font-size:14px; cursor:default; padding-left:22px;}
.totalQP { text-align:left; width:48px; color:#bbb595; font-family:arial; font-weight:bolder; font-style:italic; font-size:14px; cursor:default; padding-left:22px;}

/* 偷学技能 */
#stealskillpane { position:absolute; top:40px; left:530px; background:#424242; z-index:200;}
#ssptop{ background: url(../img/steal_bg.png) no-repeat; width:49px; height:58px; cursor:pointer;}
#stealskillview{ background: url(../img/steal_bg2.png) 0px 58px repeat-y; width:47px; display:none;	position:relative;	z-index:20; padding-left:2px;}
#sspbottom { background: url(../img/steal_bg.png) 0px -60px no-repeat;	width:49px;	height:16px; position:relative;	z-index:20;	cursor:pointer;}
#sspbottom div { background: url(../img/stealskill_arrow.png) 15px 0px no-repeat; width:49px; height:10px;}


.hint-l{ background:#000; padding:0 2px; border:1px solid #d6b67d;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; color:#f7d65a;display:inline-block; white-space:nowrap; float:left;}
.hint-l span{ color:#68d5ed; margin-left:5px;}
.hint-l em{ color:#8cff71; margin-left:5px;}
.hint-h{ background:#000; padding:0 2px; border:1px solid #d6b67d;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; color:#8cff71;display:inline-block; white-space:nowrap; float:left;}
.hint-h span{ color:#68d5ed; margin-left:5px;}
.hint-red{ background:#000; padding:0 2px; border:1px solid #f00;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; color:#f00;display:inline-block; white-space:nowrap; float:left;}


/* 主内容 */
.skillview{ position:relative; height:939px; padding-left:60px; background:url(../img/layout_ui.png) repeat-y;}
.skillview2{ position:relative; height:540px; padding-left:60px; background:url(../img/layout_ui.png) repeat-y;}
.skillunit{ margin:0; width:36px; height:48px; color:#fff; position:absolute;}
.skillunit .expand { z-index:11;}
.skillunit .sd{ position:absolute; top:-4px; left:-4px;}
.skillunit .ic{ position:absolute; top:3px; left:4px; width: 28px;height: 28px;}
.skillunit .ls{ position:absolute; top:32px; left:4px; text-align:center; color:#fff; cursor:default;}
.skillunit .fm{ position:absolute; top:-1px; left:-1px;}
.skillunit .wn{ position:absolute; top:3px; left:4px;}
.skillunit .sn{ position:absolute; top:5px; left:35px; width:100px; height:20px; overflow:hidden;color:#fff; font-size:12px; text-align:center; text-shadow:1px 1px 0 #000;}
.skillunit .pt{ position:absolute; top:27px; left:107px; color: #00BFFF; font-family:arial; font-weight:bolder; font-style:italic; font-size:14px; cursor:default; }
.skillunit .ba { position:absolute; top:5px; left:36px; width:18px; height:18px; cursor:default;}
.skillunit .bs { position:absolute; top:25px; left:36px; width:18px; height:18px;}
.skillunit .bm { position:absolute; top:5px; left:55px; width:18px; height:18px;}
.skillunit .bc { position:absolute; top:25px; left:55px; width:18px; height:18px;}

.treeline{ background:#565656; position:absolute;}
.lvstep { position:absolute; color:#e0b552;	-webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000;	text-align:left; font-family:arial;	font-weight:700; font-style:italic; font-size:14px;cursor:default;}



#utilitybtns { text-align:center; margin-right:200px; padding:10px 0;}
#utilitybtns .btn { background: no-repeat; border:0px; width:95px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin-top:10px;}

/* 右侧 */
.skillinfo{
	padding: 5px 5px 0px 5px;
	height: 699px;
	width: 190px;
	zoom: 1;
	position: absolute;
	left: 600px;
	top: 0px;
	background: #1b1a1a;
	overflow: hidden;
}
#info{ color:#fdfdfd; cursor:default; -moz-user-select:none; font-family:arial; padding:5px 5px 5px 0; width:180px; line-height:22px;}
#info h2{ text-align:center; line-height:26px; padding-bottom:5px; color:#e8d092;}
#info img{ border:2px solid #000; margin-left:5px;}
#info em{ font-weight:normal; font-style:normal;}
#info a.s,
#info a.s:link,
#info a.s:visited,
#info a.s:active { color:#e8d092; text-decoration:none; cursor:pointer; text-align:center;}
#info a.s:hover { color:#F06; text-decoration:none; cursor:pointer;}
#info span{ color:#78d87e;}
#info p{ text-indent:1em; color:#afafaf;}



#uibottom{	height:29px; padding:0 0px 0px 10px; background:url(../img/layout_bottom.png) no-repeat left bottom;}
#bottominfo { color: #e6c89b; line-height:28px;}

.unit{z-index: 5}

.miscbtnpane .btn-off{ background: url(../img/btn.png) no-repeat; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin-top:10px;}
.miscbtnpane .btn-on { background: url(../img/btn2.png) no-repeat; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin-top:10px;}
.miscbtnpane .btn-disable { background: url(../img/btn2.png) no-repeat top;background-position: 0px -69px; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin-top:10px;}


.logan .btn-up{background: url(../img/btn.png) no-repeat;background-position: 0px 0px; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin:3px 0 2px 0;}
.logan .btn-down{background: url(../img/btn.png) no-repeat; background-position: 0px -46px;border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin:3px 0 2px 0;}
.logan .btn-disable{background: url(../img/btn.png) no-repeat; background-position: 0px -69px;border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin:3px 0 2px 0;}

.logan .btn1-up{background: url(../img/btn3.png) no-repeat;background-position: 0px 0px; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin:3px 0 2px 0;}
.logan .btn1-down{background: url(../img/btn3.png) no-repeat;background-position: 0px -46px; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin:3px 0 2px 0;}


/* 弹窗*/
.pop-box{zoom:1;}
:root .pop-box{filter:none;}
.pop-hd{background:url(../img/pop_hd.png) no-repeat; height:12px;}
.pop-box .title{color:#E8D092; font-size:14px; text-align:center;-webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; border-bottom:1px solid #707070; padding-bottom:6px;}
.pop-box .box-bd{ background:url(../img/pop_bd.png) repeat-y; color:#fff; line-height:20px;}
.pop-box .box-ft{ background:url(../img/pop_foot.png) no-repeat bottom; padding:10px 20px;}
.pop-ft{background:url(../img/pop_ft.png) no-repeat; height:11px;}
.pop-box h4{ color:#f90;}
.pop-btn{ text-align:center; margin-left:120px; }
.pop-btn .btn-copy{ background: url(../img/btn.png) no-repeat; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin-top:10px; text-align:center; float:left; line-height:23px; margin-right:5px;}
.pop-btn .btn-close{ background: url(../img/btn.png) no-repeat; border:0px; width:77px; height:23px; color:#ffffb8; -webkit-text-shadow: 1px 1px 0 #000; -moz-text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000; padding-top:2px\9; margin-top:10px; text-align:center; float:left; line-height:23px;}
.pop-box em{ font-weight:normal; font-style:normal;}
.pop-box a,
.pop-box a:link,
.pop-box a:visited,
.pop-box a:active { color:#ff6; font-weight:700; text-decoration:none; cursor:pointer; text-align:center;}
.pop-box a:hover { color:#F06; text-decoration:underline; cursor:pointer;}
.pop-box span{ color:#78d87e;}
.pop-box p{ text-indent:1em; color:#afafaf;}
.pop-box ul{ margin-top:10px; width:460px; overflow:hidden;}
.pop-box b{ color:#ff6;}
#popup-win1{width:500px;display:none;}
.mod-form{padding-top:10px;padding-bottom:5px;}
.mod-form form label{width:98px;}
.mod-form form input{width:200px;}
#popup-win1 .extra{margin:10px 25px;padding-top:10px;border-top:1px solid #CCC;text-align:center;}
#popup-win1 .extra a{margin:0 5px;color:#069;}

.pop-box #project{ margin-top:10px; max-height:400px; overflow:auto;overflow-x:hidden;}
.pop-box #copytext{width: 455px;height: 390px;}


/* 滚动条 */
.scroll-pane-box{margin:0 0 5px 5px;height:536px; overflow:hidden;}
.scroll-pane{width:594px;height:536px;background:;}
.scroll-pane3{
	 width: 190px;
}
#scroll-pane3 .jspCap{display:block;background:#eeeef4;}
#scroll-pane3 .jspVerticalBar .jspCap{height:20px;}
.jspContainer{overflow: hidden;position: relative;}
.jspPane{position: absolute;}
.jspVerticalBar{position:absolute; top:0; right:0; width:9px; height:100%; background:red;}
.jspHorizontalBar{	position: absolute;	bottom: 0;	left: 0;	width: 100%;	height: 16px;	background: red;}
.jspVerticalBar *,
.jspHorizontalBar *{	margin: 0;	padding: 0;}
.jspCap{	display: none;}
.jspHorizontalBar .jspCap{	float: left;}
.jspTrack{ background:#0a0d12; padding:0 1px; position:relative;}
.jspDrag{ background:#050a0e; border:1px solid #908c73; position:relative; top:0; left:0; cursor: pointer;}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag{	float: left; height: 100%;}
.jspArrow{	text-indent: -20000px; background: #303e22; display: block;	cursor: pointer;}
.jspArrowUp{background: #303e22 url(../img/scroll_up.jpg) no-repeat;}
.jspArrowDown{background:#2d181d url(../img/scroll_down.jpg) no-repeat;}

.jspVerticalBar .jspArrow{	height: 14px;}
.jspHorizontalBar .jspArrow{	width: 16px;	float: left;	height: 100%;}
.jspVerticalBar .jspArrow:focus{	outline: none;}
.jspCorner{	background: #eeeef4;	float: left;	height: 100%;}
* html .jspCorner{	margin: 0 -3px 0 0;}

.scroll-pane-box-r{margin:0 0 5px 5px;height:650px; overflow:hidden;}
.scroll-pane-r{width:185px;height:676px;background:;}