@charset 'utf-8';

/*---------------------------------------------------重置样式----------------------------------------------------------*/
/*---删除间距---*/
body,
div,
dl,
dd,
ul,
ol,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre,
blockquote,
form,
fieldset,
legend,
input,
button,
select,
textarea,
a {
  margin: 0;
  padding: 0;
}

/*---设置html5新元素样式---
  HTML5对于前端人员来说是一个新东西，至今有一些老的浏览器（特别是IE9以下版本）是
  不支持这些新元素，为了能让他们配合js识别，我们把这一段代码加上
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

/*---去除列表样式---*/
li { list-style: none; }

/*---删除表单元格间距,提高垂直和水平对齐在所有的浏览器---*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 0;
  text-align: left;
  vertical-align: middle;
}

/*---重置引用元素的双引号---*/
blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}


/*---------------------------------------------------基础样式---------------------------------------------------------*/

html {
  font-size: 100.01%;/*To Prevent bugs in IE and Opera*/
  height: 100%;/*Using height 100% on html and body allows to style containers with a 100% height*/
  overflow-y: scroll;/*The overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content*/
  cursor: default; /* Add normal cursor  Improves visual focus of page during mouse use in all browsers */
  overflow-y: scroll; /* Add vertical scrollbar  Keeps page centered in all browsers regardless of content height */
  -webkit-tap-highlight-color: transparent; /* Add vertical scrollbar  Keeps page centered in all browsers regardless of content height */
  -ms-text-size-adjust: 100%; /* Define maximum text display as 100% to document Corrects text displayed oddly after orientation change in handheld browsers */
  -webkit-text-size-adjust: 100%; /* Define maximum text display as 100% to document Corrects text displayed oddly after orientation change in handheld browsers */
}

body {
  background-color: #fff;/*Not all browsers set white as the default background color*/
  color: #333;/*#333 looks better than black*/
  height: 100%;
}

body,
button,
input,
select,
textarea {
  font: 12px/1.5 '\5B8B\4F53', Arial, sans-serif;
}

/*---下标和上标---*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;}

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/*---定义标题字体---*/
h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.17em; }

h4 { font-size: 1em; }

h5 { font-size: 0.83em; }

h6 { font-size: 0.67em; } 

/*p { margin-bottom: 4px; }*/

/*---链接元素---
  我们大家都碰到过，链接点击后会留下一个虚线边框，其实我们可以设置outline来解决
*/
a,
a:active,
a:hover {
  outline: none;
}

/*a:focus {
  outline: thin dotted;
}*/

a,
a:link,
a:visited {
  color: #333;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #0079c5;
}

/*---去除边框---*/

img,
fieldset,
hr {
  border: 0 none; /*Remove border   Improves readability when inside <a> element in all browsers*/
}

/*另外大家都知道img加上边框时，在一些浏览器下，底部分有3px的空间，我们在这里加上一条，
  就可以去除这个bug。*/
img {
  vertical-align: top;
  -ms-interpolation-mode: bicubic;
}

/*---清除浮动---*/
.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  visibility: hidden;
}

.clearfix { zoom: 1;/*IE<8*/ }

.clearfix:after { clear: both; }
* html .clearfix {
  zoom: 1; /* IE6 */
}
*:first-child+html .clearfix {
  zoom: 1; /* IE7 */
}

/*---隐藏元素---
  隐藏元素对大家来说并不陌生，应用的地方也很多，比如说用图片代替文字，
  不想让元素存在文档流中，大家第一个想的方法就是display:none;和text-indent:-9999em以及绝对定位到浏览器可视范围外。
  这个方法好是好，但对于一些使用阅读器的用户来说就存在一个问题，阅读器无法阅读。
  其实我们有一个新方法，就是clip剪切，这个方法可以鱼和熊掌兼得
*/
.hidden {
  border: 0 !important;
  clip: rect(1px 1px 1px 1px);/*IE<8*/
  clip: rect(1px,1px,1px,1px);
  height: 1px !important;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  width: 1px;
}

.hide {
  display: none;
}

.show {
  display: block;
}

/*---Form元素---*/
form { overflow: visible; }

fieldset {
  line-height: 1;/*line height helps to set the vertical alignment of radio buttons and check boxes*/
}

/*
 * Add negative left margin
 * Corrects alignment displayed oddly in IE6/7
 */

legend {
  *margin-left: -7px;
}

/*
 * Define consistent vertical alignment display in all browsers
 */

button,
input,
select,
textarea {
  vertical-align: baseline; 
  *vertical-align: middle; 
}

/*
 * 1. Define line-height as normal
 *    Corrects FF3/4 setting it using !important in the UA stylesheet
 * 2. Make visible overflow
 *    Fixes spacing displayed oddly in IE6/7
 */

button,
input {
  line-height: normal; /* 1 */
  *overflow: visible;  /* 2 */
}

/*
 * 1. Display hand cursor for clickable form elements
 *    Improves usability and consistency of cursor style between image-type <input /> and others
 * 2. Define appearance for clickable form elements
 *    Corrects inability to style clickable <input /> types in iOS
 */

button,
input[type="button"], 
input[type="reset"], 
input[type="submit"],
.form-btn,
.btn {
  cursor: pointer; /* 1 */
  -webkit-appearance: button; /* 2 */
}

/*
 * Define box sizing
 * Addresses box sizing set to content-box in IE8/9
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
}

/*---表单元素与文本的对其方式---
  大家一定在平实的制作中对表单元素与文本对齐方式很头痛，那么大家不外呼用用下面这种方法
*/
input[type="checkbox"] {
  vertical-align: bottom;/*Vertical alignment of checkboxes*/
  *vertical-align: baseline;/*IE7*/
}

input[type="radio"] {
  vertical-align: text-bottom;/*Vertical alignment of radio buttons*/
}

input {
  _vertical-align: text-bottom;/*Vertical alignment of input fields for IE6*/
}

/*
 * Define box sizing and appearance
 * Addresses box sizing set to border-box in S5 Chrome (include -moz to future-proof)
 * Addresses appearance set to searchfield in S5 Chrome
 */

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/*
 * Remove inner padding and border
 * Fixes appearance displayed oddly in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * 1. Disable default vertical scrollbar
 *    Corrects scrollbar displayed oddly in IE6/7/8/9
 * 2. Add top vertical alignment
 *    Improves readability and aligment in all browsers
 */

textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

input[type="email"],
input[type="text"],
input[type="password"],
input[type="select"],
input[type="search"],
input[type="file"],
textarea,
select {
  /*-moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;*/
  border: none;
}

input:focus,
textarea:focus,
select:focus {
  outline-width: 0;/*No outline border for Safary*/
}


select {
  background-color: transparent;/*In Webkit/Mac, select fails to inherit color,font-*,etc if there is no other styling like background for example(border will do to)*/
}

label {
  font-weight: normal;
}

label.required:after { 
  content:"*";
  color:red;
  font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
}

/*
  我们在上面表单元素设置中运用了属性选择器，但对于一些老的浏览器就无法识别到，
  为了能让其兼容，我们需要在这些元素中加上一个class
*/
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.form-btn {
  width: auto;
  *width: 1;
  overflow: visible;
}

/*左浮动*/
.left {
  float: left;
}

/*右浮动*/
.right {
  float: right;
}

.block {
  display: block;
}

/* 头部固定 */
.fixedTop {
  position:fixed;
  top: 0;
  z-index: 9999;
}

/*文本拆行*/
.wrap {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

/*inline-block*/
.ib {
  display: inline-block;
  *zoom:1;
  vertical-align:top;
  /*font-size:0;/* 所有浏览器 */
  /**word-spacing:-1px;/* IE6、7 */
  /*letter-spacing:-5px; Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
  /*letter-spacing: -4px;根据不同字体字号或许需要做一定的调整*/
  /*word-spacing: -4px;*/
}

/*文本隐藏*/
.text-hide {
  display:block;
  font-size:0;
  text-indent:-99999em;
  color:transparent;
}

/*文本超出显示省略号*/
.txtellipsis {
  white-space: nowrap;
  overflow: hidden;
  -webkit-text-overflow:ellipsis;
    -khtml-text-overflow: ellipsis; 
      -icab-text-overflow: ellipsis; 
        -moz-text-overflow: ellipsis; 
          -o-text-overflow: ellipsis; 
            text-overflow: ellipsis; 
}