/*
    Document   : ui
    Created on : 2012-3-24, 18:17:03
    Author     : zgww
    Description:
        Purpose of the stylesheet follows.
*/
/*css初始化*/
body, div, address, blockquote, iframe,
ul, ol, dl, dt, dd, li, dl,
h1, h2, h3, h4, h5, h6,
p, pre, table, caption,
th, td, form, legend, fieldset,
input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: Arial, sans-serif;}
ol, ul ,li{list-style: none;}
img {border: 0;}
body {color:#000;background:#f3f3f3; text-align: left; font: 14px/1.4 Arial, Helvetica, sans-serif;}
table {border-collapse: collapse;border-spacing: 0;}
label {display: inline-block;}
a, a:visited{color:#3a7ac6;}
a:hover, a:active{color:#1456a5;}

.clearfix:after {clear:both; content:"."; display:block; height: 0; visibility:hidden; overflow:hidden;}
.clear{clear:both;height: 0; width:100%;}
.clearLeft{clear:left;height: 0; width:100%;}
.display{display:block;}
.undisplay{display:none;}
input[type='button'],input[type='submit'] {padding-left:10px;padding-right: 10px;}
fieldset {
    background-color: #f9f9f9;border:1px solid #aaaaaa;
    padding:5px 10px 10px 10px;
}
fieldset legend {padding:5px 10px;}
pre{
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -o-pre-wrap;    /* Opera 4-7, originally "-pre-wrap" */
    white-space: -o-pre-wrap;    /* Opera 7 */
}
pre{
    word-break: break-all;      /* Internet Explorer 7.0+ */
    word-wrap: break-word;      /* Internet Explorer 7.0+ */
    _word-break: break-all;      /* Internet Explorer 6.0- */
    _word-wrap: break-word;      /* Internet Explorer 6.0- */
}
/*-----------------------table-------------------------------*/
.tableBox {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border:none;
    border-bottom:1px solid #b9bec4;
    text-align: left;
}
.tableBox table {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    empty-cells: show;
}
.tableBox table tr, .tableBox table tr td,  .tableBox table tr th {
    border:none;
    margin: 0;
    padding: 0;
}
.tableBox table tr {
    background: url(img/tableFrag.png) repeat-x 0 -139px;
    color: #605f5f;
    height: 36px;
}
.tableBox table tr.header, .tableBox table tr.header:hover, .tableBox table tr.header:active, .tableBox table tr.header.active {
    background: url(img/tableFrag.png) repeat-x 0 -0px;
    color:#daf7ff;
    height: 36px;
}
.tableBox table tr.even {
    background: url(img/tableFrag.png) repeat-x 0 -185px;
}
.tableBox table tr:hover {
    background: #d0dbe9 none;
}
.tableBox table tr:active, .tableBox table tr.active {
    background: #a5bbd7 none;
    color: #edf5ff;
}
.tableBox .bar {
    height: 25px;
    background: url(img/tableFrag.png) repeat-x 0 -231px;
    text-align: center;
}
.tableBox .bar .gotoPage {
    width:2em;
}

.tableBox .bar .action  {
    height: 25px;
    width:20px;
    display: inline-block;
    vertical-align:middle;
    background: url(img/tableFrag.png) no-repeat 0 -265px;
}
.tableBox .bar .pre {
    background-position: -25px -265px;
}
.tableBox .bar .goto {
    background-position: -50px -265px;
}
.tableBox .bar .next {
    background-position: -72px -265px;
}
.tableBox .bar .last {
    background-position: -92px -264px;
}
/*-----------------------panel-------------------------------*/
.panel {
    width:100%;
    margin: 0 auto;
    padding: 0;
    border:none;
    text-align: left;
    border-top:1px solid #cfcfcf;
    border-bottom:1px solid #cfcfcf;
}
.panel .header {
    margin: 0;
    height: 36px;
    padding: 0 10px;
    vertical-align: middle;
    line-height: 36px;
    color:#515152;
    background: url(img/tableFrag.png) repeat-x 0 -296px;
}
.panel .content {
    padding:10px 20px;
}

/*------------------------mark-------------------------------------*/
.mark {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #b0b0b1;
    opacity : 0.4;
    filter : alpha(opacity=20);
    width:100%;
    height: 100%;
}
/*------------------------loading--------------------------*/
.loading {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    background: url(img/loading_progressbar.gif) no-repeat center center;
    width: 100%;
    height: 100%;
}
/*---------------------------tab---------------------------------*/
.tab {
    width:100%;
    margin: 0 auto;
}
.tab .tabMenuBar {
    padding:5px 0 0 0;
    padding-left:20px;padding-right:20px;
    text-align: left;
    border-bottom: 4px solid #4782da;
    height: 27px;
    width:auto;
}
.tab .tabMenuBar .start {
    float: left;width: 15px;height: 27px;
    background: url(img/tabFrag.png) no-repeat 0 -87px;
}
.tab .tabMenuBar .repeat {
    float: left;height: 27px;
    background: url(img/tabFrag.png) repeat-x 0 -128px;
}
.tab .tabMenuBar .end {
    float: left;width: 15px;height: 27px;
    background: url(img/tabFrag.png) no-repeat 0 -47px;
}
.tab .tabMenuBar .tabMenu {
    display: inline-block;
    height: 30px;
    cursor:pointer;
    font-size : 16px;
    border: none;
    width:121px;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
    color:#535353;
}
.tab .tabMenuBar .tabMenu:active, .tab .tabMenuBar .tabMenu.active {
    background: url(img/tabFrag.png) no-repeat 0 0;color:#eff5fe;
}
.tab  .tabContent {
    padding:10px 20px;position: relative;display: none;text-align: left;
}
.tab  .tabContent.active {display: block;}

/*----------------------------------------表单--------------------------------*/
form .redText{color:red}
form, form .line {
    line-height: 30px;
}
form .label {
    display: inline-block;width:8em;
    text-align: right;
    padding-right:10px;font-size:16px;font-family: Arial; color:#222;font-weight:600;
}
form input[type='text'], form input[type='password'], form select {
    display: inline-block;width:300px;
    text-align: left;
}
form select {
    width:304px;
}
form input[type='submit'], form input[type='button'],  button {
    padding:3px 20px;height: 30px;font-size:14px;
}
form textarea {
    width:100%;resize:none;
}

/*-------------------progress bar*/
.progressBar {
    border-radius:4px;border: 1px solid #666;
    background-color: #111;
    margin:2px auto;padding-top:1px;padding-left:1px;padding-right:1px;
    height: 8px;width:100%;display: none;
}
.progressBar .progressStatus {border-radius:4px;background-color: #497aff;width:0; height: 7px;}

/*----------------------path-------------------------*/
.pathBox .start {
    display: inline-block;width:6px;height: 41px;line-height: 41px;
    background: url(img/pathFrag.png) no-repeat 0 0;vertical-align: middle;
}
.pathBox .repeat {
    display: inline-block;height: 41px;line-height: 41px;
    background: url(img/pathFrag.png) repeat-x 0 -106px;vertical-align: middle;
}
.pathBox .end {
    display: inline-block;width:20px;height: 41px;line-height: 41px;
    background: url(img/pathFrag.png) no-repeat 0 -53px;vertical-align: middle;
}
.pathBox .repeat .nextLevel {
    display: inline-block;width:20px;height: 40px;line-height: 40px;margin: 0;
    background: url(img/pathFrag.png) no-repeat 0 -188px;vertical-align: top;
}
.pathBox .repeat .pathItem {
    display: inline-block;height: 40px;line-height: 40px;margin: 0 10px 0 15px;
    font-size: 16px;color:#646464;text-decoration: none;
}
.pathBox .repeat .pathItem.active, .pathBox .repeat .pathItem:hover{
    color: #349bdc;
}
.pathBox .repeat .pathItem.home {
    display: inline-block;width:23px;height: 40px;line-height: 40px;margin: 0 10px 0 15px;
    font-size: 16px;color:#646464;text-decoration: none;
    background: url(img/pathFrag.png) no-repeat 0 -148px;vertical-align: top;
}
.pathBox .repeat .pathItem.home.active {
    background-position: 0 -234px;
}
/*------------------------------dialog----------------------------*/
.dialog {
    padding-top:36px;
    position:absolute; left:100px; top : 100px;min-width:100px;min-height: 100px;
    background-color:#f3f3f3;
    border-radius:8px;border:1px solid #d4d4d4;
    box-shadow : 0 0 36px #cfcfcf;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#bfbfbf', Direction=135, Strength=5);/*for ie6,7,8*/
    z-index:1000;
    display: none;
}
.dialog .header {
    margin: 0;
    line-height: 36px; height: 36px;width:100%;
    position: absolute;left: 0; top: 0;
    padding: 0 0;
    text-indent: 1em;
    vertical-align: middle;
    color:#777777;font-size:16px;
    border-radius:8px 8px 0 0;
    background: url(img/tableFrag.png) repeat-x 0 -296px;
    text-align: left;
}
.dialog .header .close{
    position: relative;left:-5px;top:2px;
    float:right;
    margin: 0;
    height: 24px;
    width:20px;
    padding: 0 0;
    vertical-align: middle;
    line-height: 36px;
    color:#999999;
    background: url(img/tableFrag.png) no-repeat 0 -340px;
    display: block;
    cursor:pointer;
}
.dialog .header .min {
    position: relative;left:-5px;top:2px;
    float:right;
    display: block;
    width:11px;
    height:24px;
    line-height: 36px;
    vertical-align: middle;
    background: url(img/ccIcon.png) no-repeat -61px 7px;
    color:#999999;
    margin-right:5px;
    display: block;
    cursor:pointer;
}
.dialog .header .min:hover {
    background-position:  -75px 7px;cursor: pointer;
}
.dialog .resize {
    position: absolute;right:1px;bottom:2px;
    margin: 0;padding: 0;
    height: 16px; width:16px; line-height: 36px;
    vertical-align: middle;
    color:#999999;
    background: url(img/tableFrag.png) no-repeat -25px -345px;
    display: block;
    cursor: nw-resize;
}
.dialog .icon.warn {
    display: block;float:left;width:50px;height: 50px;
    background: url(img/tableFrag.png) no-repeat 10px -365px;
}
.dialog .content {
    margin-left:50px;
    padding:10px 30px;
}
/*------------------dnd --------------------*/
.eventPreventMark {
    z-index:9999;position: fixed;left: 0;top: 0;width:100%;height: 100%;display: none;
    opacity:0;filter:alpha(opacity=0);background-color: #999;cursor:move;
}
/*------------------------------------------------------*/
.datePicker {
    position: absolute;left:300px;top:100px;
    display: none;
    box-shadow : 0 0 32px #afafaf;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#afafaf', Direction=135, Strength=5);/*for ie6,7,8*/
    z-index: 4000;
    background-color:#f3f3f3;
    width:248px;
}
.datePicker .header {
    background-color:#575757;
    text-align: center;
    font-size:24px;color:#f5f5f5;
    border-top:1px solid #e4e3e3
}
.datePicker .header .pre{
    float: left;
    position: relative;left:10px;top:10px;
    width:14px;height: 18px;
    background: url(/img/dateTimeFrag/dateTimeFrag.png) no-repeat 0 -269px;
    cursor: pointer;
}
.datePicker .header .next{
    float: right;
    position: relative;right:10px;top:10px;
    width:14px;height: 18px;
    background: url(/img/dateTimeFrag/dateTimeFrag.png) no-repeat 0 -246px;
    cursor: pointer;
}
.datePicker table {
    width:100%;
    border-collapse: separate;
}
.datePicker table td {
    width:35px;height: 35px;
    border-top:1px solid #fdfdfd ; border-bottom:1px solid #eaeaea;
    border-left:1px solid #fdfdfd ; border-right: 1px solid #eaeaea;
    color:#666565;cursor:pointer;text-align: center;
}
.datePicker table td.preMonth, .datePicker table td.nextMonth {
    color:#acabab;
}
.datePicker table td.active {
    background: url(/img/dateTimeFrag/dateTimeFrag.png) no-repeat 0 -298px;
}

.timePicker {
    position: absolute;left:300px;top:100px;
    display: none;
    box-shadow : 0 0 32px #afafaf;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#afafaf', Direction=135, Strength=5);/*for ie6,7,8*/
    z-index: 4000;
    background-color:#f3f3f3;
    width:248px;
    height: 248px; padding-top:34px;
}
.timePicker .header {
    background-color:#575757;
    text-align: center;
    font-size:24px;color:#f5f5f5;
    border-top:1px solid #e4e3e3;
    margin-top:-34px;
}
.timePicker .content {
    width: 100%;height:100%;
    background: url(/img/dateTimeFrag/dateTimeFrag.png) no-repeat -78px -10px;
}
.dateTimePicker {
    position: absolute;left:300px;top:100px;
    display: none;
    box-shadow : 0 0 32px #afafaf;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#afafaf', Direction=135, Strength=5);/*for ie6,7,8*/
    z-index: 4000;
    background-color:#f3f3f3;
    width:496px;
}
.dateTimePicker .datePicker{
    display: block;position: static;left: 0;top: 0;float:left;
    box-shadow : 0 0 0 #afafaf;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#afafaf', Direction=135, Strength=0);/*for ie6,7,8*/
}
.dateTimePicker .timePicker {
    display: block;position: static;left: 0;top: 0;float:left;
    box-shadow : 0 0 0 #afafaf;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#afafaf', Direction=135, Strength=0);/*for ie6,7,8*/
}
/*------------------------taskBar------------------------*/
.taskBar .taskItem {
    vertical-align: middle;padding:2px 5px;margin:auto 2px;
    border:1px solid transparent;
    cursor:pointer;
}
.taskBar .taskItem img{
    vertical-align: middle;border-width: 0;background-color: transparent;
    margin:-3px  5px 0 5px;
}
.taskBar .taskItem.active {
    border-radius:5px;
    border:1px solid #aeafaf;background-color: #efefef;
}
/*-----------------------------消息提示框------------------*/
ul#msgBox {display: block;position: fixed; top:10px;right: 100px;list-style: none;padding: 3px 10px;min-width: 250px;}
ul#msgBox li {
    position: relative;display: block;margin: 10px auto;padding: 10px 15px;border:1px solid #6ba5b8;background-color: #d4ecf4;
    opacity : 0.8;filter:alpha(opacity=80)}
ul#msgBox li.error {border:1px solid #cd7777;background-color: #ecacac;}
ul#msgBox li:hover {opacity : 1;}
h3.msgTitle{color:#49929f}
h3.msgTitle.error{color: #a13e3e;}
div.msgContent {width:100%;color:#488f9c;}
div.msgContent.error {width:100%;color: #a13e3e;}
img.msgType {margin: auto 10px;float: left;}
span.msgClose {display: none;position: absolute;right:10px;top : 5px;color:#a4a4a4;cursor: pointer;}
span.msgClose:hover {color: #3d3d3d}
ul#msgBox li:hover .msgClose {display: block;}
#msgBox .error .msgClose {color:#654040;}
#msgBox .info .msgClose {color:#405465;}
.close {display: none;position: absolute;right:10px;top : 5px;color:#a4a4a4;cursor: pointer;}
.close:hover {color: #3d3d3d}
#msgBox li:hover .close {display: block;}
#msgBox .error .close {color:#654040;}
#msgBox .info .close {color:#405465;}
/*--------------valid--------------------*/

.valid.no {border-color:red;border-width: 2px;}
.valid.msgBox {
    padding: 0 0 0 25px;
    display: inline;
}
.valid.msgBox.info {color: #0053ff; background: url(img/validInfo.gif) no-repeat 0 center;}
.valid.msgBox.ok {color: green; background: url(img/validOk.gif) no-repeat 0 center;}
.valid.msgBox.no {color: red;background: url(img/validNo.gif) no-repeat 0 center;}
/*------------------icon---------*/
.icon {
    display: inline-block;width:18px;height: 18px;padding: 0;margin: 0;border:none;
    background:url(img/icon.png) no-repeat 1000px 1000px;cursor: pointer;vertical-align:middle;
}
.icon.date {background-position: 0 0;}
.icon.c {background-position: -1px -22px;}
.icon.u {background-position: 0 -44px;}
.icon.d {background-position: -1px -69px;}
.icon.user{background-position:-1px -92px;}
.icon.userRole{background-position:-1px -112px;}
.icon.roleFunction{background-position:-1px -132px;}
.icon.phone{background-position:-1px -150px;}
.icon.userSetting{background-position:-1px -170px;}
.icon.info{background-position:-1px -188px;}
th.icon1{width:30px;}
th.icon2{width:60px;}
th.icon3{width:90px;}
/*------------次要信息- minor------------*/
.minor.text{color:#999;}
/*---------------tree----------------------------*/
ul.tree{list-style: none;font-size: 14px;}
ul.tree ul {list-style: none;padding-left: 20px;}
ul.tree li {/*    background-color: #daeeed;*/list-style: none;overflow: hidden;}
ul.tree li img {margin-right: 5px;width:7px;height: 10px;margin-left: 10px;}
ul.tree li a{text-decoration: none;}
ul.tree li a:hover {background-color: #c8f0f7;}
ul.tree li a ins {margin: 0;padding: 0;border: 0;width: 19px;height: 19px;display: inline-block;}
ul.tree li a ins.parentButton {vertical-align:middle;background: url(img/tree.gif) 0 0 no-repeat;}
ul.tree li a ins.expend.parentButton {vertical-align:middle;background: url(img/tree.gif) -19px 0 no-repeat;}
ul.tree li a ins.leaf {vertical-align:middle;background: url(img/tree.gif) -56px -38px no-repeat;}
ul.tree li a ins.icon {vertical-align:middle;background: url(img/tree.gif) -56px -19px no-repeat}
ul.tree li a {display: inline-block;width:100%;margin: 0;}
/*---------------奇偶行换色--------------*/
.even {
    background-color: #ededed;
}
/*-----------------------按钮条-------------*/
.actionBar {
    padding:5px 10px;background:url(img/actionBarBg.png) repeat-x 0 -300px;background-color:#f2f8fb;
}
.actionBar.top {border-top:1px solid #b3d0e6}
.actionBar.bottom {border-bottom:1px solid #b3d0e6}
.actionBar.left {text-align:left;}
.actionBar.right {text-align:right;}
/*------------TimeBar------------------------*/
.timeBar {padding-top:25px;position: relative;}
.timeBar .green, .timeBar .red {width:540px;height: 8px;background: url(img/imgs.png) no-repeat  0 -360px;padding:2px 0 0 0;}
.timeBar .green .start{float:left;display: block;width:4px;height:5px;background: url(img/imgs.png) no-repeat 0 -400px;margin-left:4px;}
.timeBar .green .var {float:left;display: block;width:524px;height:5px;background:url(img/tile.png) repeat-x -0px -80px;}
.timeBar .green .end {float:left;display: block;width:4px;height:5px;background:url(img/imgs.png) no-repeat -42px -400px;margin-right:4px;}
.timeBar .red .start{float:left;display: block;width:4px;height:5px;background: url(img/imgs.png) no-repeat -80px -400px;margin-left:4px;}
.timeBar .red .var {float:left;display: block;width:524px;height:5px;background:url(img/tile.png) repeat-x -0px -121px;}
.timeBar .red .end {float:left;display: block;width:4px;height:5px;background:url(img/imgs.png) no-repeat -122px -400px;margin-right:4px;}
.timeBar .timestamp {/*起始位置，从5到530*/position: absolute;top: 0;left:530px;height: 25px;color:#777777;font-size:12px;line-height: 20px;}
.timeBar .timestamp .flag{background: url(img/imgs.png) no-repeat -360px -400px;display: inline-block;width:20px;height: 20px;position: relative;top:4px;}
.timeBar .timestamp .timeIcon{vertical-align: baseline;margin:auto 3px;position: relative;top:1px;}
/*---------------end TimeBar--------------------*/
/*-------------------button-------------*/
.btn{
    position:relative;height:30px;line-height: 30px;text-align: center;vertical-align: middle;width:110px;cursor:pointer;
    display: inline-block;
}
.btn.black{
    border:1px solid #111;background-color:#444;color:white;
}
.btn.black:hover {
    border:1px solid #222;background-color:#4a4a4a;
}
.btn.white {
    border:1px solid #999;background-color:#ffffff;
}
.btn.white:hover{
    border:1px solid #888;background-color:#eee;
}
/*------arrow button*/
.arrowBtn{display:block;cursor:pointer;background:url(img/arrowDown.png) no-repeat center center;height:16px;}
.arrowBtn:hover{background-color:#e3f6fe;}
.arrowBtn:active{background-color:#b6e3fd;}
.arrowBtn.up{background-image:url(img/arrowUp.png);}
/*------back------*/
.back{
    display: inline-block;
    width:35px;
    height:25px;
    vertical-align:middle;
    background: url(img/back.png) no-repeat 0 0;
    position:fixed;
    top:80px;
    right:10px;
}
.back:hover{
    background: url(img/backHover.png) no-repeat -2px -1px;
}