/**
* :root是指文档的根元素，在其中定义的变量可作为全局变量，所有主流浏览器均支持。
* 声明css变量，一般声明在:root根元素上，这样文档全局都可以取到，所以一些通用的变量值，最好声明在:root{}内。
* 变量的声明对大小写敏感，如：colors和Colors表示两个不同的变量。
* 声明变量的时候，变量名前面要加两根连词线（--）如：
* --Colors: #dfdfdf;
* --FS16px: 16px;
* 
* 使用var函数用来读取变量：
* var(--Colors);
* var(--FS16px);
* 
* var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
* color: var(--Colors, #e5e5e5);
*/
:root {
    --blue: #007bff; /*蓝色*/
    --indigo: #6610f2; /*靛蓝*/
    --purple: #6f42c1; /*紫色*/
    --pink: #e83e8c; /*粉红色*/
    --red: #dc3545; /*红色*/
    --orange: #fd7e14; /*橙色*/
    --yellow: #ffc107; /*黄色*/
    --green: #28a745; /*绿色*/
    --teal: #20c997; /*蓝绿色*/
    --cyan: #17a2b8; /*青色*/
    --white: #ffffff; /*白色*/
    --gray: #6c757d; /*灰色*/
    --gray-dark: #343a40; /*深灰色*/
    --primary: #007bff; /*主要的*/
    --secondary: #6c757d; /*次要的*/
    --success: #28a745; /*成功*/
    --fail: #17a2b8; /*失败*/
    --warning: #ffc107; /*警告*/
    --danger: #dc3545; /*危险*/
    --light: #f8f9fa; /*高亮的*/
    --dark: #343a40; /*黑暗的*/
}

/* Styles for html helpers*/
html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Styles for body helpers
* font-family 是规定一个字体列表，从左至右顺序从系统中检索，如果检索到了则使用，否则继续检索下一个，直到全部检索不到才使用系统默认字体（Windows中文版下就是宋体）。
*/
body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #000000;
    font-size: 75%;
    font-family: 'Microsoft Yahei', Arial, Helvetica, Tahoma, Verdana, SimSun, Sans-Serif;
    background-color: #ffffff;
}

/** Styles for table helpers
*@border-collapse 设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
*@text-indent 规定文本块中首行文本的缩进。（允许使用负值：如果使用负值，那么首行会被缩进到左边。）
*@dotted：点状 | solid：实线 | double：双线 | dashed：虚线
*/
table{width:100%;border-collapse:collapse;border:1px solid #427ca4;}
table tr th{height:28px;}
table tr td{height:28px;}

/* Styles for titleTable helpers*/
table.titleTable{}
table.titleTable tr th{height:35px;background-color: #08497b;color: #ffffff;}
table.titleTable tr td{height:35px;background-color: #1b5d94;color: #ffffff;}

/* Styles for searchTable helpers*/
table.searchTable{}
table.searchTable tr th{padding:0px 10px 0px 10px;height:45px;background-color: #08497b;color: #ffffff;}
table.searchTable tr td{padding:0px 10px 0px 10px;height:45px;background-color: #1b518a;color: #ffffff;}

/* Styles for listTable helpers
*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
*n 可以是数字、关键词或公式。
*odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
*使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
*/
table.listTable{}
table.listTable tr th{padding:0px 5px 0px 5px;border: 1px solid #427ca4;background-color:#08497b;color:#ffffff;}
table.listTable tr td{padding:0px 5px 0px 5px;border: 1px solid #427ca4;}
table.listTable tr:nth-child(odd){background-color:#f2f2f2;}
table.listTable tr:nth-child(even){background-color:#ffffff;}
table.listTable tr:hover{background-color:#08497b;color:#ffffff;}
table.listTable tr td a:hover{background-color:#08497b;color:#ffffff;}

/* Styles for itemTable helpers*/
table.itemTable{}
table.itemTable thead tr th{text-align:center;border: 1px solid #427ca4;border: 0px;background-color:#08497b;color:#ffffff;}
table.itemTable tbody tr td{text-align:center;border: 1px solid #427ca4;border: 0px}
table.itemTable tbody tr:nth-child(odd){background-color: #f2f2f2;}
table.itemTable tbody tr:nth-child(even){background-color: #ffffff;}
table.itemTable tbody tr:hover{background-color:#08497b;color:#ffffff;}

/* Styles for formTable helpers*/
table.formTable{}
table.formTable tr th{padding:0px 5px 0px 5px;border: 1px solid #427ca4;text-align:right;}
table.formTable tr td{padding:0px 5px 0px 5px;border: 1px solid #427ca4;}
table.formTable tr td.textarea{padding:0px 5px 0px 5px;padding:5px 5px;}
table.formTable tr td.kindeditor{padding:0px 5px 0px 5px;padding:8px 8px;border: 1px solid #427ca4;}
table.formTable tr:nth-child(odd){background-color: #ffffff;}
table.formTable tr:nth-child(even){background-color: #ffffff;}

/* Styles for viewTable helpers*/
table.viewTable{}
table.viewTable tr th{padding:0px 5px 0px 5px;border: 1px solid #427ca4;text-align:right;}
table.viewTable tr td{padding:0px 5px 0px 5px;border: 1px solid #427ca4;}
table.viewTable tr td.itemtable{padding:0px 0px 0px 0px;}
table.viewTable tr td.textarea{padding:0px 5px 0px 5px;}
table.viewTable tr td.kindeditor{padding:0px 5px 0px 5px;}
table.viewTable tr:nth-child(odd){background-color: #ffffff;}
table.viewTable tr:nth-child(even){background-color: #ffffff;}

/* Styles for attachTable helpers*/
table.attachTable{}
table.attachTable tr th{padding:0px 5px 0px 5px;border: 1px solid #427ca4;background-color:#08497b;color:#ffffff;}
table.attachTable tr td{padding:0px 5px 0px 5px;border: 1px solid #427ca4;}
table.attachTable tr:nth-child(odd){background-color:#f2f2f2;}
table.attachTable tr:nth-child(even){background-color:#ffffff;}
table.attachTable tr:hover{background-color:#08497b;color:#ffffff;}
table.attachTable tr td a:hover{background-color:#08497b;color:#ffffff;}

/* Styles for channelTable helpers*/
table.channelTable{width:100%;border:0px;}
table.channelTable tr.trclass{height:38px;font-size:14px;font-weight:bold;background:url('/Content/Images/Home/bg.jpg');}

/* Styles for moduleTable helpers*/
table.moduleTable{width:100%;height:30px;border:0px;color:#ffffff;background:url('/Content/images/Frame/menuBg.png');}
table.moduleTable tr td.smaller{font-size:12px;font-weight:normal;}
table.moduleTable tr td.bigger{font-size:13px;font-weight:bold;border: 1px dashed #427ca4;background-color:#1b518a;}

/* Styles for turnTable helpers*/
table.turnTable{}
table.turnTable tr th{text-align:center;height:50px;background-color:#08497b;border:0px;color:#ffffff;}
table.turnTable tr td{text-align:center;height:50px;background-color:#08497b;border:0px;color:#ffffff;}

/* Styles for div helpers*/
div{vertical-align:middle;}
div.divCenter{width:100%;text-align:center;padding-top:30px;}
div.loading{width:160px;height:56px;top:50%;left:50%;position: absolute;padding-left:60px;line-height:56px;color:#fff;font-size:15px;background: #000 url('/Content/images/circle.gif') no-repeat 10px 50%;opacity: 0.7;z-index:99;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
div.itemHelp{width:100%;height:22px;padding-left: 30px;background:url('/Content/images/icon/dot/dot3.png') no-repeat 15px 1px;font-weight:bold;font-size:13px;color: #1b5d94;}
div.pdfviewer{width:100%;height:100%;}
div.titles{width:100%;height:35px;text-align:center;font-size:16px;font-weight:bolder;padding-top:10px;background-color: #08497b;border:1px solid #427ca4;}
div.footer{width:100%;height:35px;position:fixed;bottom:10px;text-align:center;font-size:13px;}
div.logout{width:100%;height:35px;position:fixed;bottom:40px;text-align:center;font-size:13px;}
div.library{width:90%;line-height:30px;padding-left:10px;color:#000000;font-family:"Gill Sans", "Gill Sans MT", Calibri, sans-serif;font-size:14px;}
div.popup{width:550px;text-align:left;font-size:12px;background-color: #08497b;border:1px solid #427ca4;display:none;position:absolute;z-index:999;}
div.divNav {width:8%;background-color:#0c477e;border: 1px solid #427ca4;padding-left:25px;text-align:left;position:absolute;z-index:999;}
div.toTop{width:40px; height:40px; position:fixed; right:0; margin-right:20px; bottom:20px; padding-bottom:20px; background:url('/Content/images/top.png') 0px bottom no-repeat; z-index:999; cursor:pointer; }
div.wrapper-signin{width:500px;height:430px;position:relative;margin:0 auto;padding-top:20px;background-color:#ffffff;border-radius:20px;text-align:center }
div.wrapper-register{width:500px;height:390px;position:relative;margin:0 auto;padding-top:20px;background-color:#ffffff;border-radius:20px;text-align:center }
div.wrapper-getpassword{width:500px;height:320px;position:relative;margin:0 auto;padding-top:20px;background-color:#ffffff;border-radius:20px;text-align:center }
div.box{width:258px;height:20px;padding:10px 0px;background-color:#427ca4;border-radius:5px;font-size:13px;color: #ffffff;}
div.paragraph{width:100%;}
div.paragraph:first-letter{font-size:20px;font-weight:bold;float:left;margin:0 0.12em 0 0;/* 首字大写 */}
div.show{display:block;}
div.hide{display:none;}
div.itembook:hover{background-color:#f2f2f2;color:#000000;}
/*图片div的css*/
div.usernameLabel {background:url("/Content/images/icon/loginuser.png") no-repeat 8px center;}
div.passwordLabel {background:url("/Content/images/icon/loginpasswd.png") no-repeat 8px center;}
div.mailLabel {background:url("/Content/images/icon/mail.png") no-repeat 8px center;}
div.icon-position {z-index:99;width:30px;height:20px;position:relative;}
/*输入框的css*/
input.input-position {margin-top:-40px;padding-left:28px;}
input.input-style {width:215px;height:25px;border:1px solid #a1b7d1;border-radius:3px;font-weight:bold;vertical-align:middle;line-height:40px;outline:0px;color: #1b5d94;}

/** Styles for a link helpers
*@a链接的四种状态
*@定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。
*@正确的顺序：a:link、a:visited、a:hover、a:active
*@link：设置a对象在未被访问前的样式表属性。（连接平常的状态）
*@visited：设置a对象在其链接地址已被访问过时的样式表属性。（连接被访问过之后）
*@hover：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。（鼠标放到连接上的时候）
*@active：设置对象在其鼠标悬停时的样式表属性。（连接被按下的时候）
*@最后经验补充：
*@1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
*@2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
*@所以说，a:hover定义一定要放在a:link、a:visited的后面！
*/
a:link{color: #000000;text-decoration: none;}
a:visited{color: #000000;text-decoration: none;}
a:hover{color: #0000ff;text-decoration: underline;}
a:active{color: #000000;text-decoration: none;}

/* Styles for alist link helpers*/
a.alist1{font-size:13px;padding:0px;}
a.alist1:link{color: #000000;text-decoration: none;}
a.alist1:visited{color: #000000;text-decoration: none;}
a.alist1:hover{color: #0000ff;text-decoration: underline;}
a.alist1:active{color: #000000;text-decoration: none;}

/* Styles for alist2 link helpers*/
a.alist2{font-size:12px;padding:0px;}
a.alist2:link{color: #ffffff;text-decoration: none;}
a.alist2:visited{color: #ffffff;text-decoration: none;}
a.alist2:hover{color: #0000ff;text-decoration: underline;}
a.alist2:active{color: #ffffff;text-decoration: none;}

/* Styles for nav1 link helpers*/
a.nav1:link{font-size:12px;font-weight:normal;color: #ffffff;text-decoration: none;}
a.nav1:visited{font-size:12px;font-weight:normal;color: #ffffff;text-decoration: none;}
a.nav1:hover{font-size:12px;font-weight:normal;color: #ff0000;text-decoration: none;}
a.nav1:active{font-size:12px;font-weight:normal;color: #ffffff;text-decoration: none;}

/* Styles for nav2 link helpers*/
a.nav2:link{font-size:13px;font-weight:bold;color: #ff0000;text-decoration: none;}
a.nav2:visited{font-size:13px;font-weight:bold;color: #ff0000;text-decoration: none;}
a.nav2:hover{font-size:13px;font-weight:bold;color: #ff0000;text-decoration: none;}
a.nav2:active{font-size:13px;font-weight:bold;color: #ff0000;text-decoration: none;}

/* Styles for btn readMore helpers*/
a.readMore:link{width: 120px;height: 30px;font: 14px;text-transform: capitalize;display: inline-block;margin: 10px 0;padding: 2px;text-align: center;background-color: #0c477e;border: 1px solid #427ca4;border-bottom: 1px solid #999;}
a.readMore:hover{background-color: #ff0000;color: #ffffff;}

/* Styles for input helpers*/
input{color: #000000;background-color:#ffffff;border:1px solid #a1b7d1;border-radius:3px;vertical-align:middle;position:relative;}
input.input1{width:200px;height:22px;}
input.input2{width:260px;height:22px;}
input.input3{width:90%;height:22px;}
input.input4{width:180px;height:22px;padding: 0px 0px 0px 25px;background:url('/Content/images/icon/date.png') no-repeat 5px center;}
/**/
input.username{width:200px;height:25px;font-weight:bold;padding: 0px 0px 0px 25px;background:url('/Content/images/icon/loginuser.png') no-repeat 5px center;}
input.password{width:200px;height:25px;font-weight:bold;padding: 0px 0px 0px 25px;background:url('/Content/images/icon/loginpasswd.png') no-repeat 5px center;}
input.validatecode{width:80px;height:25px;font-weight:bold;padding: 0px 0px 0px 25px;background:url('/Content/images/icon/validatecode.png') no-repeat 5px center;}

input.radio{margin-top:-2px;margin-bottom:1px;}
input.checkbox{margin-top:-2px;margin-bottom:1px;}
input.library{width:580px;height:35px;border:1px solid #a1b7d1;border-radius:8px;color:#ffffff;font-weight:bold;padding: 4px 0px 0px 40px;background:url('/Content/images/search.png') no-repeat 6px center;font-size:16px;}

/* Styles for textarea helpers*/
textarea{color: #ffffff;background-color:#1b5d94;border:1px solid #a1b7d1;border-radius:3px;vertical-align:middle;}
textarea.textarea1{width:99%;height:150px;}

/* Styles for select helpers*/
select{color: #000000;border:1px solid #a1b7d1;border-radius:3px;vertical-align:middle;position:relative;height:25px;}
select.select1{font-size:13px;}
select.select2{font-size:13px;font-weight:bold;height:35px;border-radius:5px;padding:8px;text-align:center;text-align-last:center;background-image:linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);color: #ffffff;}
select.select2:focus{color: #000000;}
select.select2:not(:focus){color: #ffffff;}

/* Styles for button helpers*/
input.btnCustom{height:30px;width:72px;background: transparent url('/Content/images/button/custom.gif');color: #ffffff;}
input.btnAdd{height:16px;width:16px;background:url('/Content/images/icon/trashadd.png');}
input.btnMinus{height:16px;width:16px;background:url('/Content/images/icon/trash.png');}
input.btnEdit{height:16px;width:16px;background:url('/Content/images/icon/trashedit.png');}
input.btnDelete{height:16px;width:16px;background:url('/Content/images/icon/trashdelete.png');}
input.btnTelescope{height:16px;width:16px;background:url('/Content/images/icon/telescope.png') no-repeat 0px center;}
input.btnAttachAdd{height:21px;width:22px;background:url('/Content/images/button/btnAdd.gif') no-repeat 5px center;}
input.btnAttachMinus{height:21px;width:22px;background:url('/Content/images/button/btnMinus.gif') no-repeat 5px center;}

input.btnBack{height:16px;width:20px;background: #0c477e url('/Content/images/back.png');}
input.btnForbid{height:16px;width:16px;background:url('/Content/images/forbid.png');}
input.btnRefresh{height:16px;width:16px;background:url('/Content/images/icon/refresh.png');}
input.btnSearch{height:16px;width:16px;background:url('/Content/images/icon/search.png');}

input.btnCustom:hover{box-shadow: 0px 10px 20px rgba(0,0,0,0.5);transform: translateY(-1px);}
input.btnBack:hover{animation: rotate 1s linear infinite;}
input.btnDelete:hover{box-shadow: 0px 10px 20px rgba(0,0,0,0.5);transform: translateY(-2px);}

input.buttonCustom{color:#ffffff;background-color:#429372;height:30px;width:120px;border-radius:3px;position:relative;font-size:13px;transition:all 0.8s;font-weight:bold;}
input.buttonSubmit{color:#ffffff;background-color:#429372;height:30px;width:120px;border-radius:3px;position:relative;font-size:13px;transition:all 0.8s;font-weight:bold;}
input.buttonBack{color:#ffffff;background-color:#429372;height:30px;width:120px;border-radius:3px;position:relative;font-size:13px;transition:all 0.8s;font-weight:bold;}

input.buttonCustom:hover{color:#ffffff;background-color: #0c477e;box-shadow: 0px 10px 20px rgba(0,0,0,0.5);transform: translateY(-1px);}
input.buttonSubmit:hover{color:#ffffff;background-color: #0c477e;box-shadow: 0px 10px 20px rgba(0,0,0,0.5);transform: translateY(-1px);}
input.buttonBack:hover{color:#ffffff;background-color: #0c477e;box-shadow: 0px 10px 20px rgba(0,0,0,0.5);transform: translateY(-1px);}

.btn-hover {
    width: 120px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    margin: 10px;
    height: 35px;
    text-align:center;
    border: none;
    border-radius: 5px;
    background-size: 300% 100%;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}

.btn-hover.color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-hover.color-2 {
    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-3 {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-hover.color-4 {
    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-hover.color-5 {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-hover.color-6 {
    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
    box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.btn-hover.color-7 {
    background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
    box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-hover.color-8 {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-hover.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-10 {
    background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-hover.color-11 {
    background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  
    box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}

/** Styles for font helpers
*1、用途：综合设置字体样式
*2、语法格式：选择器｛font-style font-weight font-size/line-height font-family;
*3、顺序必须严格按照语法，前2个可以省略，后两个必须写
*/
font{font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-style:normal;vertical-align:middle;padding: 2px 5px;}
font.font1{font-size:16px;color:#ff0000;background-color:#f1ee18;}
font.font2{font-size:15px;color:#ff0000;}
font.font3{font-size:14px;color:#ffffff;font-weight:bolder;}
font.font4{font-size:13px;color:#ff0000;background-color:#f1ee18;}

/* Styles for label helpers*/
label {font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-style:normal;vertical-align:middle;}
label:hover{background:rgba(106,191,255,0.3);box-shadow: 0px 10px 20px rgba(0,0,0,0.5);transform: translateY(-1px);border-radius:3px;}
label.label1 {display:inline-block;cursor:pointer;padding:5px;}
label.label2 {display:inline-block;cursor:pointer;padding:5px;}

/* Styles for span helpers*/
span {font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-style:normal;vertical-align:middle;}
span.speech{padding-left:10px;}
span.timeTarget{font-size:12px;color:#ff0000;}
span.countTarget{font-size:12px;color:#ff0000;}
span.debugTarget{font-size:12px;color:#ffffff;width: 60px;height: 35px;left: 50%;top: 10px;position: fixed;display: none;}
span.curPage{font-size:13px;color:#ff0000;border:1px solid #ff0000;border-radius:3px;padding:5px 5px;}
span.pageNo{font-size:12px;color:#ffffff;border:1px solid #ffffff;border-radius:3px;padding:5px 5px;}
span.curPage:hover{background-color: #0c477e;box-shadow: 0px 10px 20px rgba(0,0,0,0.5);transform: translateY(-1px);}
span.pageNo:hover{background-color: #0c477e;box-shadow: 0px 10px 20px rgba(0,0,0,0.5);transform: translateY(-1px);}

/* Styles for small helpers*/
small.readingTime {font: 14px "Gill Sans", "Gill Sans MT", Calibri, sans-serif;text-transform: capitalize;}

/* Styles for fieldset helpers*/
fieldset{width:auto;height:auto;border:1px solid #a1b7d1;color:#ffffff;font-size:12px;}

/* Styles for i helpers*/
i{cursor:pointer;vertical-align:bottom;}

/* Styles for li helpers*/
li.mouseOver{background-color: #1b5a9c;color:#f1ee18;font-size:13px;}
li.mouseOut{background-color: #08497b;color:#ffffff;font-size:12px;}
li.onmouse{background-color: #1b5a9c;color:#0000ff;font-size:16px;height:24px;}
li.outmouse{font-size:12px;height:20px;}

/* Styles for iframe helpers*/
iframe{width:100%;height:100%;}
iframe.iframe1{min-height:800px;background-color:transparent;visibility:hidden;}
iframe.iframe2{min-height:800px;}

/* Styles for img helpers*/
img{border:0px;cursor:auto;vertical-align: middle;}
/*img:hover {
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5));
}*/
img.icon{vertical-align: middle;}
img.lamp{vertical-align: middle;cursor:auto;padding-right:5px;}
img.link{vertical-align: middle;cursor:pointer;}
img.shadow{background:#ffffff;border:1px solid #777777;margin-top:5px;box-shadow:0 0 5px #666666;}
img.gray {  
    -webkit-filter: grayscale(100%); /* Webkit */  
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%); /* W3C */  
    filter: gray; /* IE6-9 */    
    
}
img.twinkling {
    /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
    animation-name: twinkling;  /* 动画名称 */
    animation-duration: 3000ms;  /* 动画时长3秒 */
    animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;    /* 播放次数：无限 */
 
    /* Safari and Chrome */
    -webkit-animation-name: twinkling;  /* 动画名称 */
    -webkit-animation-duration: 3000ms;  /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
}
img.rotate {
	/* 
		rotate为动画名（自定义的名称）
		6s 为周期（完成的时间）
		linear 表示全程速度相同,除了这个还有：
		ease 动画以低速开始，然后加快，在结束前变慢
		ease-in	动画以低速开始。
		ease-out	动画以低速结束。
		ease-in-out	动画以低速开始和结束。
		infinite设置播放次数，infinite无限次，如果有次数，选择数字。
	 */
	animation: rotate 1s linear infinite;
}

/*
 * 根据input的type来控制css样式
 * 优点：简单，明了，可以分区出各个input控件形态。
 * 缺点：type选择器，IE6之前的对web标准支持的不太好的浏览器不能支持。
 
input[type="text"]
{
    background-color:aquamarine;
}
input[type="password"]
{
    background-color:bisque;
}
input[type="reset"]
{
    background-color:chocolate;
}
input[type="radio"]
{
    background-color:darkcyan;
}
input[type="checkbox"]
{
    background-color:dodgerblue;
}
*/
input[type="submit"]
{
    background-color:#1b518a;
    border:0px;
    border-style:none;
    cursor:pointer;
}
input[type="button"]
{
    border:0px;
    border-style:none; /*把边框设置为无*/
    cursor:pointer; /*网页浏览时用户鼠标指针的样式或图形形状，光标为手型*/
}

/*只在Chrome下有效*/

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{width: 10px;height: 10px;background-color: #1b518a;}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 2px;background-color: #1b518a;}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{-webkit-box-shadow: inset 0 0 6px rgba(265, 255, 0, .3);border-radius: 2px;background-color: #1b518a;}

/************************************************************************************************************************
                                                    动画效果
*************************************************************************************************************************/
/** 
* 动画旋转效果rotate 
* rotate(*deg)表示旋转度数，另外还有rotateX(*deg),rotateY(*deg),rotateZ(*deg)表示向市民方向旋转
*/
@keyframes rotate {
	0%{
		transform: rotateZ(0deg);/*从0度开始*/
	}
	100%{
		transform: rotateZ(360deg);/*360度结束*/
	}
}

/**  
* 动画闪烁效果twinkling  
*/
@keyframes twinkling {
    from { opacity: 0.1; }  /* 动画开始时的不透明度 */
    50%  { opacity:   1; }  /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }  /* 动画结束时的不透明度 */    
}

@-webkit-keyframes twinkling {
    from { opacity: 0.1; }  /* 动画开始时的不透明度 */
    50%  { opacity:   1; }  /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }  /* 动画结束时的不透明度 */
}

/**
* 文字跳动bounce
*/
@keyframes bounce {  
    100% {  
      top: -20px;  
      text-shadow: 0 1px 0 #CCC,  
        0 2px 0 #CCC,  
        0 3px 0 #CCC,  
        0 4px 0 #CCC,  
        0 5px 0 #CCC,  
        0 6px 0 #CCC,  
        0 7px 0 #CCC,  
        0 8px 0 #CCC,  
        0 9px 0 #CCC,  
        0 50px 25px rgba(0, 0, 0, .2);  
    }  
}