/*-----  清除常用标签的默认样式  -----*/
html, body, div, p, span, img, a, h1, h2, h3, h4, h5, h6, ul, li, dl, dt,
dd, form, input, select, textarea, fieldset, legend, table, tr, th, td {
    padding: 0;
    margin: 0;
    border: 0;
}
body {
    font-family: "Microsoft Yahei", sans-serif;
    color: #555;
    background: #fff;
    font-size: 16px;
}
.glyphicon-chevron-left {
    display: block;
    margin-top: 15px;
    width: 30px;
    height: 30px;
    background: url(/gui/images/mini-last.png) no-repeat 9px 0;
}
.glyphicon-chevron-right {
     display: block;
     margin-top: 15px;
    width: 30px;
    height: 30px;
    background: url(/gui/images/mini-next.png) no-repeat 9px 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
    outline: none;
    cursor: pointer;
}
:focus {
    outline: none;
}
input, button, textarea,
select, optgroup, option {
    font-weight: normal;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
}
textarea {
    resize:none;
    overflow-y: auto; 
}
.clearfix {zoom:1;}
.clearfix:after {
    display:block;
    content:' ';
    clear:both;
    line-height:0;
    visibility:hidden;
}
/*-----  配色  -----*/
.primary-bluegrey {
    background-color: #46587c;
}
.secondary-green {
    background-color: #24bd7d;
}
.bg-common {
    background-color: #f7fbff;
}
.bg-nav {
    background-color: #edf0f5;
}
.bg-active {
    background-color: #eef7ff;
}
.bg-profile {
    background-color: #fbfbfb;
}
.bg-text-field {
    background-color: #fafafa;
}
/*-----  分割线和边框  -----*/
.border-color {
    border-color: #c9ced2;
}
.divider-color {
    border-color: #e2e2e2;
}
.text-border-color {
    border-color: #c9ced2;
}
/*----- 常规图标 -----*/
.u3-icon {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
}
.icon-huger {
    height: 84px;
    width: 84px;
}
.icon-huge {
    height: 60px;
    width: 60px;
}
.icon-larger {
    width: 35px;
    height: 35px;
}
.icon-large {
    width: 24px;
    height: 24px;
}
.icon-mid {
    width: 20px;
    height: 20px;
    background-image: url("../images/u3icon-mid.png");
    cursor: pointer;
}
.icon-relieve {
    width: 20px;
    height: 20px;
    background-image: url("../images/jib.png");
    cursor: pointer;
}
.icon-unbind{
    display: inherit;
    width: 14px;
    height: 14px;
    margin-top: -3px;
    background: url("../images/unbind.png") no-repeat;
}
.icon-small {
    width: 16px;
    height: 16px;
    background-image: url("../images/u3icon-small.png");
}
/* 84*84 */
.huger-shopping {background-image: url("../images/huger-shopping.png");}
.huger-homework {background-image: url("../images/huger-homework.png");}
.huger-active {background-image: url("../images/huger-active.png");}
/* 60*60 */
.pay {background-image: url("../images/pay.png");}
.payfail {background-image: url("../images/pay-f.png");}
.paysuccess {background-image: url("../images/pay-s.png");}
/* 35*35 */
.balance {background-image: url("../images/balance.png")}
.ticket {background-image: url("../images/ticket.png")}
.goods {background-image: url("../images/goods.png")}
.checkorder {background-image: url("../images/checkorder.png")}
.checkorder-green {background-image: url("../images/checkorder-green.png")}
.submitorder {background-image: url("../images/submitorder.png")}
.submitorder-green {background-image: url("../images/submitorder-green.png")}
.payorder {background-image: url("../images/payorder.png")}
.payorder-green {background-image: url("../images/payorder-green.png")}
.overorder {background-image: url("../images/overorder.png")}
.overorder-green {background-image: url("../images/overorder-green.png")}
/* 24*24 */
.mycourse {background-image: url("../images/mycourse.png"); background-repeat: no-repeat}
.icon-small.mycourse {background-image: url("../images/mycourse-small.png"); background-repeat: no-repeat}
.hotcourse {background-image: url("../images/hotcourse.png");}
.coursediy {background-image: url("../images/coursediy.png");}
.shopping-bluegray {background-image: url("../images/shopping-bluegray.png");}
.shopping-green {background-image: url("../images/shopping-green.png");}
.shopping-white {background-image: url("../images/shopping-white.png");}
.line-green {background-image: url("../images/line-green.png");}
.members {background-image: url("../images/members.png");}
.money {background-image: url("../images/money.png");}
.pup{background-image: url("../images/money-amount.png");}
.li {background-image: url("../images/li.png");}
.base {background-image: url("../images/base.png");}
.person-green {background-image: url("../images/user.png");}
.username {background-image: url("../images/username.png");}
.usernamegray {background-image: url("../images/usernameGray.png");}
.userSecurity_ok {background-image: url("../images/userSecurity_ok.png");}
.userSecurity_error {background-image: url("../images/userSecurity_error.png");}
.money-amount {background-image: url("../images/money-amount.png");}
.course-send {display:block;margin:0 auto;width: 20px;height: 20px;background-image : url("/gui/images/sendcourse.png");}
/* 20*20 */
.addfolder {background-position: 0 0;}
.addfolder:hover {background-position: 0 -20px;}
.addfolder:active {background-position: 0 -40px;}
.addfolder.disabled {background-position: 0 -60px;cursor: not-allowed;}
.addfile {background-position: -20px 0;}
.addfile:hover {background-position: -20px -20px;}
.addfile:active {background-position: -20px -40px;}
.addfile.disabled {background-position: -20px -60px;cursor: not-allowed;}
.trash {background-position: -40px 0;}
.trash:hover {background-position: -40px -20px;}
.trash:active {background-position: -40px -40px;}
.trash.disabled {background-position: -40px -60px;cursor: not-allowed;}
.upload {background-position: -60px 0;}
.upload:hover {background-position: -60px -20px;}
.upload:active {background-position: -60px -40px;}
.upload.disabled {background-position: -60px -60px;cursor: not-allowed;}
.download {background-position: -80px 0;}
.download:hover {background-position: -80px -20px;}
.download:active {background-position: -80px -40px;}
.download.disabled {background-position: -80px -60px;cursor: not-allowed;}
.edit {background-position: -100px 0;}
.edit:hover {background-position: -100px -20px;}
.edit:active {background-position: -100px -40px;}
.edit.disabled {background-position: -100px -60px;cursor: not-allowed;}
.delete {background-position: -120px 0;}
.delete:hover {background-position: -120px -20px;}
.delete:active {background-position: -120px -40px;}
.delete.disabled {background-position: -120px -60px;cursor: not-allowed;}
.copy {background-position: -139px 0;}
.copy:hover {background-position: -139px -20px;}
.copy:active {background-position: -139px -40px;}
.copy.disabled {background-position: -139px -60px;cursor: not-allowed;}
.books {background-position: -160px 0;}
.books:hover {background-position: -160px -20px;}
.books:active {background-position: -160px -40px;}
.books.disabled {background-position: -160px -60px;cursor: not-allowed;}
.shelf {background-position: -380px -20px;}
.shelf:hover {background-position: -380px 0;}
.shelf:active {background-position: -380px -40px;}
.shelf.disabled {background-position: -380px -60px;cursor: not-allowed;}
.member {background-position: -180px 0;}
.member:hover {background-position: -180px -20px;}
.member:active {background-position: -180px -40px;}
.member.disabled {background-position: -180px -60px;cursor: not-allowed;}
.endcourse {background-position: -199px 0;}
.endcourse:hover {background-position: -199px -20px;}
.endcourse:active {background-position: -199px -40px;}
.endcourse.disabled {background-position: -199px -60px;cursor: not-allowed;}
.sendcourse {background-position: -1px -5px;}
.sendcourse:hover{background-position: -1px -40px!}
.sendcourse:active{background-position: -1px -5px;}
.sendcourse:disabled{background-position: -1px -5px;}
.setting {background-position: -220px 0;}
.setting:hover {background-position: -220px -20px;}
.setting:active {background-position: -220px -40px;}
.setting.disabled {background-position: -220px -60px;cursor: not-allowed;}
.eye {background-position: -240px 0;}
.eye:hover {background-position: -240px -20px;}
.eye:active {background-position: -240px -40px;}
.eye.disabled {background-position: -240px -60px;cursor: not-allowed;}
.joinmember {background-position: -260px 0;}
.joinmember:hover {background-position: -260px -20px;}
.joinmember:active {background-position: -260px -40px;}
.joinmember.disabled {background-position: -260px -60px;cursor: not-allowed;}
.contbuild {background-position: -279px 0;}
.contbuild:hover {background-position: -279px -20px;}
.contbuild:active {background-position: -279px -40px;}
.contbuild.disabled {background-position: -279px -60px;cursor: not-allowed;}
.backoff {background-position: -299px 0;}
.backoff:hover {background-position: -299px -20px;}
.backoff:active {background-position: -299px -40px;}
.backoff.disabled {background-position: -299px -60px;cursor: not-allowed;}
.homework {background-position: -320px 0;}
.homework:hover {background-position: -320px -20px;}
.homework:active {background-position: -320px -40px;}
.homework.disabled {background-position: -320px -60px;cursor: not-allowed;}
.share {background-position: -340px 0;}
.share:hover {background-position: -340px -20px;}
.share:active {background-position: -340px -40px;}
.share.disabled {background-position: -340px -60px;cursor: not-allowed;}
.marking {background-position: -360px 0;}
.marking:hover {background-position: -360px -20px;}
.marking:active {background-position: -360px -40px;}
.marking.disabled {background-position: -360px -60px;cursor: not-allowed;}
.startclass{background-position: -380px 0;}
.startclass:hover {background-position: -380px -20px;}
.startclass:active {background-position: -380px -40px; }
.startclass.disabled {background-position: -380px -60px;cursor: not-allowed;}
.endclass {background-position:-420px 0; }
.endclass:hover {background-position: -420px -21px;}
.endclass:active {background-position: -420px -40px;}
.endclass.disabled {background-position: -420px -60px;cursor: not-allowed;}
.kejian {background-position:-400px 0; }
.kejian:hover {background-position:-400px -20px; }
.kejian:active {background-position:-400px -41px; }
.kejian.disabled{background-position:-400px -61px;cursor:not-allowed; }
/* 20*20单独图标 */
.warn {background-image: url("../images/warn.png");}
.large-no-answer {
    width: 48px;
    height: 48px;
    background-image: url(../images/large-no-answer.png);
}
.small-no-answer {
    width: 32px;
    height: 32px;
    background-image: url(../images/small-no-answer.png);
}
.mid-shopblue {background-image: url("../images/mid-shopblue.png");}
.mid-shopgreen {background-image: url("../images/mid-shopgreen.png");}
.lockopen {background-image: url("../images/mid-lockopen.png");}
.lock {background-image: url("../images/mid-lock.png");}
.trumpet {background-image: url("../images/trumpet.png");}
.deadline {background-image: url("../images/deadline.png");}
.likes-before {background-image: url("../images/likes-before.png");}
.likes-after {background-image: url("../images/likes-after.png");}
.time {background-image: url("../images/time.png");}
.answer {background-image: url("../images/answer.png");}
.read {background-image: url("../images/read.png");}
.position {background-image: url("../images/position.png");}
.close {background-image: url("../images/close.png");}
.wantread {background-image: url("../images/wantread.png");}
.readover {background-image: url("../images/readover.png");}
.spread {background-position: 0 0;cursor: pointer}
.spread:hover {background-position: 0 -16px;}
.spread:active {background-position: 0 -32px;}
.shrink {background-position: -16px 0;cursor: pointer}
.shrink:hover {background-position: -16px -16px;}
.shrink:active {background-position: -16px -32px;}
.back {background-position: -32px 0;cursor: pointer}
.back:hover {background-position: -32px -16px;}
.back:active {background-position: -32px -32px;}
/* 组合图标 */
.addusers {
    width: 20px;
    height: 20px;
    background: url("/gui/images/adduser.png") no-repeat center;
}
.addusers:hover {
    background: url("/gui/images/adduser1.png") no-repeat center;
}
.icon-component {
    position: relative;
    height: 84px;
    width: 84px;
    border: 2px solid #eeeeee;
    border-radius: 4px;
    background: #eee;
    cursor: pointer;
    margin-right: 10px;
}
.icon-component:hover {
    background: #fff;
    border-color: #bfcce5;
}
.icon-component:active {
    background: #fff;
    border-color: #8e9ebd;
}
.icon-component > span {
    display: block;
    text-align: center;
    color: #46587c;
    font-size: 16px;
    line-height: 30px;
}
.icon-component > span:first-child {
    padding-top: 16px;
    line-height: 0;
}
.icon-component > span > i {
    display: inline-block;
    height: 28px;
    width: 32px;
}
.icon-component > b {
    position: absolute;
    top: -9px;
    right: -9px;
    padding: 0 5px;
    background-color:#ff4d00 ;
    color: #fff;
    min-width: 8px;
    height: 18px;
    border-radius: 9px;
    font-size: 10px;
    text-align: center;
    line-height: 18px;
    font-weight: normal;
}
.icon-component-homework {background-image: url("../images/homework.png")}
.icon-component-activity {background-image: url("../images/activity.png")}
.icon-component-qanda {background-image: url("../images/dashboardTip.png")}
.icon-component-qand {background-image: url("../images/qanda.png")}
/* 字体图标 */
.icons-video-camera.icon-avi {color: #0164ca;margin-right: 4px;}
.icons-images3.icon-bmp {color: #5f9a24;margin-right: 4px;}
.icons-file-css.icon-css {color: #de4612;margin-right: 4px;}
.icons-menu6.icon-csv {color: #42b132;margin-right: 4px;}
.icons-file-word.icon-doc {color: #183674;margin-right: 4px;}
.icons-libreoffice.icon-ppt {color: #eb3d00;margin-right: 4px;}
.icons-mail-read.icon-eml {color: #fdcb0e;margin-right: 4px;}
.icons-image-compare.icon-eps {color: #e5007e;margin-right: 4px;}
.icons-IE.icon-html {color: #0076c1;margin-right: 4px;}
.icons-images3.icon-image {color: #5f9a24;margin-right: 4px;}
.icons-video-camera.icon-mov {color: #0164ca;margin-right: 4px;}
.icons-file-music.icon-mp3 {color: #004899;margin-right: 4px;}
.icons-file-xml.icon-other {color: #6c81a9;margin-right: 4px;}
.icons-file-pdf.icon-pdf {color: #a70506;margin-right: 4px;}
.icons-file-zip.icon-rar {color: #c70026;margin-right: 4px;}
.icons-images3.icon-raw {color: #5f9a24;margin-right: 4px;}
.icons-list.icon-list {  color: #fff;  font-size: 14px; }
.icons-font.icon-ttf {color: #004899;margin-right: 4px;}
.icons-file-text2.icon-txt {color: #00a1e9;margin-right: 4px;}
.icons-file-music.icon-wav {color: #004899;margin-right: 4px;}
.icons-file-zip.icon-zip {color: #c70026;margin-right: 4px;}
.icons-file-excel.icon-xls {color: #217245;margin-right: 4px;}
.icons-libreoffice.icon-none {color: #f95c00;margin-right: 4px;}
.icons-sort-amount-asc.icon-sort-amount-asc {color: #6c80a7;font-size: 16px;margin-left: 4px;}
.icons-sort-amount-desc.icon-sort-amount-desc {color: #6c80a7;font-size: 16px;margin-left: 4px;}
/*----- 图标end -----*/
.icon-c {
    display: block;
    margin: 0 auto 10px;
    width: 35px;
    height: 35px;
}
.update-report {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 21px;
    margin-right: 3px;
}
.solved {
    background-image: url("/gui/images/solved.png");
}
.cart-see {
    background-image: url(/gui/images/process_03.gif);
}
.cart-commit {
    background-image: url(/gui/images/cart_06.gif);
}
.commit-finish {
  background-image: url(/gui/images/process_05.gif);
}
.cart-pay {
   background-image: url(/gui/images/cart_08.gif);
}
.pay-finish {
  background-image: url(/gui/images/process_07.gif);
}
.cart-finish {
    background-image: url(/gui/images/cart_10.gif)
}
.finish {
  background-image: url(/gui/images/process_03.gif);
}
.new-answer {
    width: 40px;
    height: 19px;
    background-image:url(../images/new-answers.png)
}
.self-center {
    display: inline-block;
    vertical-align: middle;
    width: 35px;
    height: 35px;
    background-image: url("../images/center-self_03.png");
}
.center-order {background-position: 128px -58px;}
.center-order-active{background-position: 68px 35px;}
.center-quit {background-position: 24px -56px;}
.center-cart {background-position: 118px -56px;}
.center-coupon {background-position: 224px  -56px;}
.center-coupon-active {background-position: 165px 35px;}
.center-money {background-position: 280px -56px;}
.center-money-active{background-position: 219px 35px;}
.center-safe {background-position: 342px -56px;}
.center-safe-active{background-position: 280px 35px;}
.center-set {background-position: 0px -56px;}
.center-set-active {background-position: 338px 35px;}
.center-manage{background-position: 440px -56px;}

/*----- 按钮 -----*/
/*首先确定按钮的类型和默认样式
 *然后分析按钮之间的不同
 *1、背景颜色不同
 *2、边框不同
 *3、宽度和高度不同（考虑字体大小，考虑是用固定长宽还是用padding撑起来）
 *4、圆角大小不同
 *5、有无图标以及图标的显示
 */
.u3-btn {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    color: #fff;
    line-height: 1em;
    outline: none;
    border: 0;
}
.radius-circle {
    border-radius: 12px;
}
.btn-short,
.btn-long,
.btn-login {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
}
.btn-short {
    width: 64px;
}
.btn-long {
    width: 120px;
}
.btn-login {
    width: 266px;
}
.btn-mini {
    font-size: 16px;
    padding: 6px 14px 6px 14px;
}
.btn-longtiny {
    font-size: 14px;
    padding: 4px 16px 4px 16px;
}
.btn-tiny {
    font-size: 14px;
    padding: 3px 8px 3px 8px;
}
.only-border {
    border: 1px solid #24bd7d;
    background: transparent;
    color: #24bd7d;
}
.only-border:hover {
    border: 1px solid #2fd48f;
    background: #2fd48f;
    color: #fff;
}
.only-border:active {
    border: 1px solid #20a970;
    background: #20a970;
    color: #fff;
}
.btn-ok {
    background: #24bd7d;
}
.btn-ok:hover {
    background: #2fd48f;
    color: #fff;
}
.btn-ok:active {
    background: #20a970;
    color: #fff;
}
.btn-cancel {
    background: #bfcce5;
}
.btn-cancel:hover {
    background: #9aadd0;
    color: #fff;
}
.btn-cancel:active {
    background: #6c80a7;
    color: #fff;
}
.btn-view {
    background: #6c80a7;
}
.btn-view:hover {
    background: #bfcce5;
    color: #fff;
}
.btn-view:active {
    background: #9aadd0;
    color: #fff;
}
.u3-btn[disabled] {
    background: #c2c2c2;
    cursor: not-allowed;
    border: none;
    color: #fff;
}
.u3-btn.btn-tiny[disabled] {
    border: 1px solid #c2c2c2;
}
/*----- 按钮组 -----*/
.u3-btn-group {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    padding: 0 15px;
}
.u3-btn-group .icon-behind,
.u3-btn-group .icon-front {
    display: inline-block;
    vertical-align: middle;
}
.u3-btn-group .icon-front {
    margin-right: 8px;
}
.u3-btn-group .icon-behind {
    margin-left: 8px;
}
.u3-btn-group.removecourse,
.u3-btn-group.addcourse {
    background: #24bd7d;
    height: 30px;
    line-height: 30px;
    border-radius: 16px;
    font-size: 16px;
}
.u3-btn-group.removecourse{
    margin-right:10px;
}
.u3-btn-group.addcourse > i,.add{
    display: inherit;
    width: 14px;
    height: 14px;
    margin-top: -3px;
    background-image: url("../images/plus.png");
}
.u3-btn-group.removecourse .remove{
    display: inherit;
    width: 14px;
    height: 14px;
    margin-top: -3px;
    background: url("/images/common/remove.png") no-repeat;
}
.u3-btn-group.shopping {
    background: #fff;
    height: 30px;
    line-height: 30px;
    border-radius: 16px;
    background: #24bd7d;
    color: #fff;
}
.u3-btn-group.shopping > i {
    background-image: url("../images/btn-shopping.png");
    background-position: 0 -20px;
    width: 20px;
    height: 20px;
    margin-top: -4px;
}
.u3-btn-group.join {
    box-sizing: border-box;
    background: #fff;
    height: 30px;
    line-height: 30px;
    border: 1px solid #24bd7d;
    border-radius: 16px;
    background: transparent;
    color: #24bd7d;
}
.u3-btn-group.join > i {
    background-image: url("../images/plus-green.png");
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    margin-top: -4px;
}
.u3-btn-group.addvote {
    background: #24bd7d;
    height: 30px;
    line-height: 30px;
    border-radius: 16px;
    font-size: 16px;
}
.u3-btn-group.addvote > i {
    width: 14px;
    height: 14px;
    margin-top: -3px;
    background-image: url("../images/plus.png");
}
.u3-btn-group.addhomework {
    background: #24bd7d;
    height: 30px;
    line-height: 30px;
    border-radius: 16px;
    color: #fff;
}
.u3-btn-group.addhomework > i {
    width: 11px;
    height: 11px;
    margin-top: -4px;
    background-image: url("../images/btn-dropdown.png");
}
.u3-btn-group.addcourse:hover,
.u3-btn-group.shopping:hover,
.u3-btn-group.join:hover,
.u3-btn-group.addvote:hover,
.u3-btn-group.dropdownBtn:hover,
.u3-btn-group.addhomework:hover {
    background: #2fd48f;
    color: #fff;
}
.u3-btn-group.join:hover {
    border-color: #2fd48f;
    color: #fff;
}
.u3-btn-group.join:hover > i {
    background-image: url("../images/plus.png");
}
.u3-btn-group.addcourse:active,
.u3-btn-group.shopping:active,
.u3-btn-group.join:active,
.u3-btn-group.addvote:active,
.u3-btn-group.dropdownBtn:active,
.u3-btn-group.addhomework:active {
    background: #20a970;
    color: #fff;
}
.u3-btn-group.join:active {
    border-color: #20a970;
    color: #fff;
}
.u3-btn-group.operation {
    background: #6c80a7;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
}
.u3-btn-group.operation > i {
    width: 11px;
    height: 11px;
    margin-top: -3px;
    background-image: url("../images/btn-dropdown.png");
}
.u3-btn-group.operation:hover {
    background: #bfcce5;
    color: #fff;
}
.u3-btn-group.operation:active {
    background: #9aadd0;
    color: #fff;
}
.u3-btn-group.list {
    background: #6c80a7;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    padding: 0 12px;
}
.u3-btn-group.dropdownBtn {
    background: #24bd7d;
    height: 30px;
    line-height: 30px;
    border-radius: 16px;
    color: #fff;
}
.u3-btn-group.dropdownBtn > i {
    width: 11px;
    height: 11px;
    margin-top: -3px;
    background-image: url("../images/btn-dropdown.png");
}
.u3-btn-group[disabled] {
    background: #c2c2c2 !important;
    cursor: not-allowed;
}
.u3-btn-group.join[disabled] {
    border-color: #c2c2c2;
    color: #fff;
}
.u3-btn-group.join[disabled] > i {
    background-image: url("../images/plus.png");
}
/* 关闭按钮 */
.btn-close {
    background: url("../images/btn-close-white.png");
}
.btn-close:hover {
    background: url("../images/btn-close-green.png");
}

/*----- 组件 -----*/
/*input
 *如果固定input的宽度，则至少提供三种可选宽度（系统内部表单，登录页，验证码前边比较短的宽度）
 *当然，如果系统内部输入表单与登录也一至，则只需提供两种可选宽度即可
 *还有一种情况是，表单长度根据布局来定，比如bootstrap的栅格系统，则只需提供一种自适应宽度的表单即可
 */
.u3-input {
    box-sizing: border-box;
    width: 432px;
    height: 40px;
    border: 1px solid #c9ced2;
    border-radius: 4px;
    background: #fafafa;
    padding: 0 15px;
    font:14px Arial, Microsoft YaHei;
    line-height: 25px;
    color: #555;
}
.u3-input:focus {
    border: 1px solid #6c80a7;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, .17) inset;
}
.u3-input.login {
    width: 266px;
}
.u3-input.check {
    width: 115px;
}
/*input组*/
.u3-input-wrap {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: 0;
}

.u3-input-wrap > .input-suffix{
    position: absolute;
    top: 0;
    right: -36px;
    width: 40px;
    height: 40px;
    background: #6c80a7;
    border-radius: 0 4px 4px 0;
    text-align: center;
    line-height: 40px;
}
/*搜索框*/
.input-search-wrap {
    display: inline;
    position: relative;
}
.input-search {
    box-sizing: border-box;
    width: 200px;
    height: 30px;
    border: 1px solid #c9ced2;
    border-radius: 15px;
    line-height: 30px;
    padding: 0 30px 0 15px;
    font-size: 14px;
    outline: none;
}
.input-search:focus {
    border: 1px solid #6c80a7;
}
.input-search-icon {
    position: absolute;
    right:13px;
    top: 4px;
    width: 16px;
    height: 16px;
    background: url("../images/input-search.png") no-repeat;
    cursor: pointer;
}
.input-search-icon:hover {
    background: url("../images/input-search-hover.png") no-repeat;
}
/*下拉菜单*/
.select-wrap {
    display: inline-block;
    position: relative;
}
.select-input-wrap {
    position: relative;
}
.select-input-wrap > .u3-input {
    padding-right: 50px;
    font-size: 14px;
}
.select-input-wrap > .u3-input:focus {
    box-shadow: none;
}
.select-icon {
    display: block;
    width: 30px;
    height: 38px;
    background: url("../images/select-icon.png") no-repeat;
    position: absolute;
    top: 1px;
    right: 10px;
    cursor: pointer;
}
.select-ul {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #9eb0d2;
    background: #f7fbff;
    border-radius: 3px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, .14);
    height: 82px;
    overflow: auto;
    z-index: 999;
}
.select-ul > li {
    box-sizing: border-box;
    width: 100%;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    color: #555;
    font-size: 14px;
    cursor: pointer;
}
.select-ul > li:hover {
    background: #6c80a7;
    color: #fff;
}
/*u3-dropdown*/
.u3-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;

}
.u3-dropdown > a {
    margin-bottom: 2px;
}
.u3-dropdown > ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    border: 1px solid #cbd0d4;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .18);
    background: #fff;
    border-radius: 4px;
    min-width: 96px;
    z-index: 999;
}
.u3-dropdown:hover > ul {
    display: block;
}
.u3-dropdown > ul > li {
    height: 32px;
}
.u3-dropdown > ul > li > a {
    display: block;
    text-align: left;
    text-indent: 20px;
    color: #555;
    line-height: 32px;
    padding-right: 20px;
    white-space: nowrap;
}
.u3-dropdown > ul > li > a:hover {
    background: #6c80a7;
    color: #fff;
}
.u3-dropdown.green > ul > li > a:hover {
    background: #24bd7d;
    color: #fff;
}
.u3-dropdown.left > ul {
    left: 0;
    right: auto;
}
.u3-dropdown.right > ul {
    right: 0;
}
.u3-dropdown > .u3-btn-group.dropdownTran {
    color: #555555;
   /* padding: 1px 0;*/
    font-size: 16px;
   /* line-height: 1em;*/
}
.u3-dropdown > .u3-btn-group.dropdownTran > i {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url("../images/dt-icon.png") no-repeat;
}
/*单选钮*/
input[type='radio']{
    display: none;
}
input[type='radio'] + label:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-top: -2px;
    background-image: url("../images/radio.png");
    cursor: pointer;
}
input[type='radio']:checked + label:before {
    background-image: url("../images/radio-checked.png");
}
/*复选框*/
input[type='checkbox']{
    display: none;
}
input[type='checkbox'] + label:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-top: -2px;
    background-image: url("../images/checkbox.png");
    cursor: pointer;
}
input[type='checkbox']:checked + label:before {
    background-image: url("../images/checkbox-checked.png");
}
input[type='checkbox'][disabled] + label:before {
    background-image: url("../images/checkbox-disabled.png");
}
/*switch*/
.switchtab {
    display: inline-block;
    vertical-align: middle;
    width: 46px;
    height: 20px;
    overflow: hidden;
}
.switchtab > span {
    float: left;
    width: 46px;
    height: 20px;
    cursor: pointer;
    background: url("../images/switch.png") no-repeat;
}
.switchtab > .switchtab-on {
    background-position: 0 0;
    margin-left: 0px;
}
.switchtab > .switchtab-off {
    background-position: -46px 0;
}
.switchtab.off > .switchtab-on{
    margin-left: -46px;
}
/*进度条*/
.u3-progressbar {
    width: 100%;
    min-width: 180px;
    height: 12px;
    border-radius: 6px;
    background: #e1e6ef;
    position: relative;
    overflow: hidden;
}
.u3-progressbar > span {
    position: absolute;
    top: 0;
    left: 0;
    height: 12px;
    border-radius: 6px;
    width: 45%;
}
.u3-progressbar.bar-green > span {
    background: #38c2c4 ;
}
.u3-progressbar.bar-purple > span {
    background: #b79fed;
}
.u3-progressbar.bar-blue > span {
    background: #5bb0f0;
}
.u3-progressbar.bar-orange > span {
    background: #ee9a5a;
}
/*tab*/
.text-tab li {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
}
.text-tab li a:hover{
    color: #46587c;
}
.text-tab li span {
    color: #a8a8a8;
}
.text-tab .active {
    color: #46587c;
    font-size: 16px;
}
.text-tab .no-active {
    color: #a8a8a8;
    font-size: 16px;
}
.active  {
    color: #46587c;
    font-size: 16px;
}
.no-active {
    color: #a8a8a8;
    font-size: 16px;
}
/*翻页组件*/
.u3-pagination li {
    display: inline-block;
    margin-left:10px;
    background-color: #fafafa;
    border: 1px solid #ebedee;
    border-radius: 4px;
    color:#555555;
    font-family: 微软雅黑;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.u3-pagination a {
    display: block;
    width: 100%;
    height: 100%;
    color: #555555;
}
.u3-pagination span {
    text-align: center;
    font-weight: 700;
}
.u3-pagination  li:first-child {
    margin-left: 0;
}
.large-size li
{
    width:30px;
    height:30px;
    line-height:29px;
}
.small-size li
{
    width: 25px;
    height: 25px;
    line-height:24px;
}
.large-size .selected,
.large-size li:hover {
    background-color: #6c80a7;
}
.large-size .selected a,
.large-size li:hover a,
.small-size .selected a,
.small-size li:hover
{
    color:#fff;
}
.small-size .selected,
.small-size li:hover {
    background-color: #24bd7d;
}
.u3-pagination .next {
    font-size:18px;
    font-weight: bold;
}
/*.large-size .last{
    background-image: url("../images/max-last.png");
}
.large-size .next {
    background-image: url("../images/max-next.png");
}
.small-size .last {
    background-image: url("../images/mini-last.png");
}
.small-size .next {
    background-image: url("../images/mini-next.png");
}*/
/*其他UI组件*/
.span-deadline {
    display: inline-block;
    background: #f7fbff;
    height: 38px;
    line-height: 38px;
    padding: 0 10px 0 16px;
    border-radius: 19px 0 0 19px;
}
.span-deadline > i {
    margin-right: 7px;
    margin-top: -1px;
}
.span-publish {
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    background: #24bd7d;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    position: relative;
    margin-left: 10px;
}
.span-publish:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-right-color: #24bd7d;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: -8px;
}
.span-publish.disabled {
    background: #c9ced2;
}
.span-publish.disabled:after {
    border-right-color: #c9ced2;
}
.add-bg-squre {
    display: inline-block;
    width: 90px;
    height: 90px;
    border: 1px dashed #c9ced2;
    background-color: #fafafa;
    cursor: pointer;
}
.add-bg-circle {
    width:45px;
    height: 45px;
    margin:22px auto;
    border:1px solid #c9ced2;
    border-radius: 50%;
    background-color: #c9ced2 ;
    text-align: center;
}
.add-bg-circle  a {
    font-size: 36px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
}
.add-bg-squre:hover {
    background-color: #eef7ff;
}
.images-delete {
    width: 90px;
    height: 90px;
    overflow: hidden;
    position: relative;
}
.images-delete > img {
    width: 100%;
    height: 100%;
}
.images-delete:hover > .images-delete-mask {
    display: block;
}
.images-delete > .images-delete-mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.72);
    line-height: 90px;
    text-align: center;
}
.images-delete > .images-delete-mask > a {
    color: #fff;
}
.images-delete > .images-delete-mask > a:hover {
    text-decoration: underline;
}
.add-author {
    width: 104px;
    height: 112px;
    background: url("../images/add-author-bg.png") no-repeat;
    position: relative;
}
.btn-add-author {
    display: block;
    width: 90px;
    height: 40px;
    background: url("../images/add-author-btn.png") no-repeat;
    cursor: pointer;
}
.btn-add-author.blue {
    background-color: #eef7ff;
}
/*-----  表格  -----*/
.u3-table-wrap {
    border: 1px solid #c9ced2;
    border-radius: 4px;
    overflow: auto;
}
.u3-table {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    overflow: hidden;
}
.u3-table tbody tr:nth-child(even) {
    background: #f7fbff;
}
.u3-table tbody tr:hover {
    background: #eef7ff;
}
.u3-table tr:last-child td {
    border-bottom: none;
}
.u3-table th {
    background: #edf0f5;
    height: 40px;
    font-weight: 400;
    padding: 0 15px;
    font-size: 16px;
}
.u3-table td {
    color: #555;
    height: 40px;
    line-height: 24px;
    min-width: 40px;
    border-bottom: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
    padding: 0 15px;
    font-size: 14px;
}
.u3-table th.left,
.u3-table td.left {
    text-align: left;
}
.u3-table th.right,
.u3-table td.right {
    text-align: right;
}
.u3-table th.short-width,
.u3-table td.short-width {
    width: 40px;
}
.u3-table td i {
    margin: 1px 2px;
}
.link {
    color: #215599;
    text-decoration: underline;
}
strong {
    padding: 0 5px;
}
/*-----  时间轴  -----*/
.timeline {
    border-left: 4px solid #6c80a7;
    padding: 20px 15px;
}
.timeline > li {
    margin-top: 30px;
}
.timeline > li:first-child {
    margin: 0;
}
.timeline > li > .timeline-title {
    position: relative;
    left: -22px;
    font-size: 18px;
    height: 24px;
    line-height: 24px;
}
.timeline-title > .timeline-title-icon {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 16px;
    background: #fff;
    font-size: 0;
}
.timeline-title-icon > i {
    display: inline-block;
    margin-top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #6c80a7;
}
.timeline > li > .timeline-cont {
    background: #f7fbff;
    margin-top: 10px;
    padding: 20px;
    font-size: 14px;
    color: #a8a8a8;
}
/*弹框*/
.mask {
    position: fixed;
    background: rgba(0,0,0,0.7);
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    display:none;
}
.mask-cont {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    background: #fff;
    width: 615px;
    height: 519px;
}
.mask-cont .title {
    background: #46587c;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #e6eeff;
    font-size: 16px;
}
.mask-cont .close {
    background: url("../images/close.png") no-repeat center;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 22px;
    right: 15px;
    cursor: pointer;
}
/*-----  验证提示文字样式  -----*/
.u3-form-validator-message {
    margin-left: 87px;
}
.u3-form-validator-message .help-block {
    color: #ff4d00;
    font-size: 14px !important;
}
.u3-form-validator-instructor {
    margin-left: 0;
    position: absolute;
    bottom: -22px;
    font-size: 14px;
    color: #a8a8a8;
    line-height: 1em;
    margin: 0;
}
.u3-form-validator.has-error .u3-input,
.u3-form-validator.has-error .u3-textarea {
    border: 1px solid #ff4d00;
}
.u3-form-validator.has-error .u3-form-validator-instructor {
    display: none;
}
/*-----  配合客户端  -----*/
.pageWrap {
    width: 940px;
    margin: 0 auto;
}
.font-size16 {
    font-size: 16px !important;
}
.font-fa {
    font-size: 14px;
    color: #a8a8a8;
}

/*排序图标的样式*/
.table-sort-icon-word,.table-sort-icon{
    position: relative;
    cursor:pointer;
    padding:0 !important;
}

.pointerForSortPar{
    cursor:pointer;
}
/*------reportgotop------*/
.reportgotop {
    display: none;
    position: fixed;
    top: 400px;
    right: 124.5px;
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 5px;
    color: #50bcff;
    padding: 21px 0 0 0;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    border: 1px solid #50bcff;
}
.reportgotop:hover{
    color: #fff;
    background-color: #50bcff;
}
.reportgotop:before {
    content: "";
    position: absolute;
    left: 16px;
    top: 2px;
    border-bottom: 8px solid #50bcff;
    border-top: 8px solid transparent;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}
.reportgotop:hover:before{
    content: "";
    position: absolute;
    left: 16px;
    top: 2px;
    border-bottom: 8px solid #ffffff;
    border-top: 8px solid transparent;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}

.selfstudy-tip{
    position: fixed;
    top:0;
    left: 0;
    background-color: rgba(0,0,0,.7);
    width:100%;
    height: 100%;
}
.selfstudy-content{
    position: absolute;
    width:470px;
    height: 490px;
    background-color: #fff;
    top: calc(50% - 245px);
    left: calc(50% - 235px);
    border-radius: 10px;
    overflow: hidden;
}
.selfstudy-header{
    width:100%;
    height: 100px;
    background: url('/images/selfstudy/catalog_difficult_header.png') no-repeat 0 0;
}
.selfstudy-input{
    width:370px;
    height: 40px;
    margin: 20px auto 0;
    border: 1px solid #BBBBBB;
    border-radius: 7px;
    position: relative;
    cursor: pointer;
}
.selfstudy-input:hover{
    border: 1px solid #6BBAFF;
}
.selfstudy-input:hover  input[type="radio"]+label::before {
    background-color: #50BCFF;
    background-clip: content-box;
    padding: 3px;
    box-sizing: border-box;
    border: 2px solid #50BCFF;
}
.selfstudy-body .iron-body{
    position: absolute;
    top:0;
    left: 200px;
    height: 40px;
}
.selfstudy-body .blue-star{
    float: left;
    margin:7px 5px 0 0 ;
    width: 26px;
    height: 26px;
    background: url('/images/selfstudy/catalog_star_real.png') no-repeat 0 0;
}
.selfstudy-body .gray-star{
    float: left;
    margin:7px 5px 0 0 ;
    width: 26px;
    height: 26px;
    background: url('/images/selfstudy/catalog_star.png') no-repeat 0 0;
}
.selfstudy-body input[type="radio"] + label::before {
    box-sizing: border-box;
    content: "\a0"; /*不换行空格*/
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #BBBBBB;
    line-height: 1;
    margin: -4px 20px 0 0;
    background-image: none !important
}
.selfstudy-body input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.selfstudy-radio{
    position: absolute;
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    color:#50BCFF;
    top:12px;
    left: 15px;
    -webkit-user-select:all;/*谷歌 /Chrome*/
    -moz-user-select:all; /*火狐/Firefox*/
    -ms-user-select:all;    /*IE 10+*/
    user-select:all;
}
.button-begin{
    width:130px;
    height:38px;
    line-height: 38px;
    text-align: center;
    font-size:18px;
    color: #fff;
    background:linear-gradient(150deg,#2E96FF,rgba(22,230,251,1));
    box-shadow:0px 2px 7px 0px rgba(36,116,195,0.34);
    border-radius:18px;
    position: absolute;
    left: 75px;
    bottom: 20px;
    font-weight:500;
    cursor: pointer;
}
.button-begin:hover{
    background: linear-gradient(to right,#6cb5ff,#5cedfc) #2e96ff;
}
.button-cancel{
    width:130px;
    height:38px;
    line-height: 38px;
    text-align: center;
    font-size:18px;
    color: #11A4FF;
    background:linear-gradient(150deg,#B0DBFF,rgba(219,237,252,1));
    box-shadow:0px 2px 7px 0px rgba(168,180,190,0.57);
    border-radius:18px;
    position: absolute;
    right: 75px;
    bottom: 20px;
    font-weight:500;
    cursor: pointer;
}
.button-cancel:hover{
    background: linear-gradient(to right,#8bc9ff,#aad6fd) #b0dbff;
}
.activeInput{
    background: linear-gradient(0,#6BBBFF,#4FCFF8);
    color: #fff;
    border: 1px solid #00C5F7 !important
}
.activeInput .selfstudy-radio{
    color: #fff;
}
.activeInput  .blue-star{
    background: url('/images/selfstudy/catalog_star_real_active.png') no-repeat 0 0;
}
.activeInput  .gray-star{
    background: url('/images/selfstudy/catalog_star_active.png') no-repeat 0 0;
}
.activeInput  input[type="radio"]+label::before,
.activeInput:hover  input[type="radio"]+label::before{
    background-color: #fff;
    background-clip: content-box;
    padding: 3px;
    box-sizing: border-box;
    border: 2px solid #fff;
}
/* ------弹出提示------------- */
.comment-box-swiper{
    position: fixed;
    top:0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    width:100%;
    height: 100%;
}
.comment-box{
    width:612px;
    height:456px;
    background:#fff;
    box-shadow:-3px 1px 5px 0px rgba(6,0,1,0.4);
    border-radius:2px;
    position: absolute;
    top: calc(50% - 228px);
    left: calc(50% - 306px);
}
.comment-box-header{
    width:612px;
    height:60px;
    background:rgba(70,88,124,1);
    font-size:16px;
    color:rgba(230,238,255,1);
    line-height:60px;
    text-align: center
}
.comment-box-footer{
    width:612px;
    height:60px;
    background:rgba(250,250,250,1);
    box-shadow:0px -1px 0px 0px rgba(201,206,210,1);
    position: absolute;
    bottom: 0
}
.comment-box-footer-button{
    margin: 10px auto;
    width:99px;
    height:40px;
    line-height: 40px;
    background:#24bd7d;
    border-radius:4px;
    text-align: center;
    color:#fff;
    cursor: pointer;
}
.comment-box-footer-button:hover{
    background:#2fd48f
}
.comment-box-body{
    box-sizing: border-box;
    width:100%;
    padding:40px 40px 40px 30px;
    height: 336px;
    overflow: auto;
}
.comment-box-body-title{
    width:100%;
    /* height:15px; */
    font-size:14px;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:15px;
    margin-bottom: 13px;
}
.comment-box-body-content{
    width:538px;
    height:99px;
    font-size:14px;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:28px;
    vertical-align:0;
}
.comment-box-iron{
    width:16px;
    height:16px;
    position: absolute;
    top:22px;
    right:17px;
    background:url('/images/close.png') no-repeat 0 0;
    cursor: pointer;
}
.comment-box-iron:hover{
    background:url('/images/close-hover.png') no-repeat 0 0;
    cursor: pointer;
}
/* -------------------------------------------- */
.confirm-tip{
    z-index:200;
    position: fixed;
    top:0;
    left: 0;
    background-color: rgba(0,0,0,.7);
    width:100%;
    display: none;
    height: 100%;
}
.confirm-container{
    z-index:300;
    position: absolute;
    width:612px;
    height: 470px;
    background-color: #fff;
    top: calc(50% - 245px);
    left: calc(50% - 235px);
    overflow: hidden;
}
.confirm-header{
    width:100%;
    height:60px;
    line-height: 60px;
    background:#46587C;
    text-align: center;
    font-size: 16px;
    color:#E6EEFF;
    position: relative;
}
.confirm-footer-one{
    position: absolute;
    width:100%;
    height:60px;
    line-height: 60px;
    bottom:0;
    background:#FAFAFA;
    text-align: center;
    font-size: 16px;
    display: none
}
.confirm-footer-button{
    width:100px;
    height:40px;
    line-height: 40px;
    background:#24BD7D;
    border-radius:5px;
    color:#fff;
    margin:10px auto;
    cursor:pointer
}
.confirm-footer-button:hover,
.confirm-footer-button-two:hover{
    background:#2fd48f
}
.confirm-footer-two{
    position: absolute;
    width:100%;
    height:60px;
    line-height: 60px;
    bottom:0;
    background:#FAFAFA;
    text-align: center;
    font-size: 16px;
    display: none
}
.confirm-footer-cancel{
    position: absolute;
    left: 196px;
    top:10px;
    width:100px;
    height:40px;
    line-height: 40px;
    border:1px solid #24BD7D;
    border-radius:5px;
    color:#24BD7D;
    cursor:pointer;
    box-sizing: border-box
}
.confirm-footer-cancel:hover{
    background:#24BD7D;
    color: #fff;
}
.confirm-footer-button-two{
    position: absolute;
    top:10px;
    right: 196px;
    width:100px;
    height:40px;
    line-height: 40px;
    background:#24BD7D;
    border-radius:5px;
    color:#fff;
    cursor:pointer
}
.confirm-content{
    text-align: center;
    width:270px;
    margin:135px auto 0;
}
.confirm-header-iron{
    position: absolute;
    display: block;
    cursor: pointer;
    top: 22px;
    right: 17px;
    width: 15px;
    height: 15px;
    background:url('/images/close.png')  no-repeat  scroll 0px center transparent
}
.confirm-header-iron:hover{
    background:url('/images/close-hover.png')
}