/**
 * 样式重置：浏览器有默认的样式，这些默认样式在不同的浏览器上有不同的效果
 * 例如：ie上 body的默认margin 16  在chrome下 8
 * 样式重置的目的： 在各种浏览器上默认样式统一 
 * body{
	margin: 0;
	}
 * 用别人写好的开源的样式重置库：
 */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
  text-decoration: none;
  color: black;
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}
/* *选择器表示所有的元素 */
*{
	box-sizing: border-box;
}

/*
 * 栅格系统：把网页分成大小相同的格子，方便快速布局
 * 实现思路：
 * 		 1 有一个盒子（容器）最外层  -- container
 *       2 先有一行   --- row  
 *       3 再在一行内写列  -- 列 col 12
 * 问题？一行要划分多少个格子（列）  
 * 规定：12列
 *       列必须放在行里面
 * 		行必须放在container 容器里面
 * 
 * 栅格系统是什么？有什么用？
 * 下一步去实现这个思想
 */

.container{
	width: 970px;
	/*居中*/
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.row{
	margin-left: -15px;
	margin-right: -15px;
}
/*把屏幕分成12份，计算每份占多宽
 * 
 * 为什么要写col-md-1,col-md-2,....,col-md-12这么多类？
 * 目的：1 首先 规定了 整个盒子分12份 （虚拟）
 *      2  分别设置不同的类来表示几个格子的宽度，col-md-1 一个格子的宽度 col-md-2 表示2个格子的宽度
 *		假如有两个div   div1宽度 + div2宽度 <= container宽度
 * 		col-md-1 + col-md-2  
 * 		col-md-1 + col-md-11
 * */
/*通过多元素选择器来优化代码，*/
.col-md-1, .col-md-2,.col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8,.col-md-9, .col-md-10, .col-md-11, .col-md-12{
	position: relative;
	float: left;
	padding-left: 15px;
	padding-right: 15px;
}
.col-md-1{
	/*占一个格 width = 1/12*100 */
	width: 8.33333333%;
}
.col-md-2{
	/*占两格*/
	width: 16.66666667%;
}
.col-md-3{
	width: 25%;
}
.col-md-4{
	width: 33.33333333%;
}
.col-md-5{
	width: 41.66666667%;	
}
.col-md-6{
	width: 50%;
}
.col-md-7{
	width: 58.33333333%;
}
.col-md-8{
	width: 66.66666667%;	
}
.col-md-9{
	width: 75%;

}
.col-md-10{
	width: 83.33333333%;

}
.col-md-11{
	width: 91.66666667%;
}
.col-md-12{
	/*占两格*/
	width: 100%;
}


/*列排序 从右边往左边拉*/
.col-md-pull-1{
	/*占一个格 width = 1/12*100 */
	right: 8.33333333%;
}

.col-md-pull-2{
	/*占两格*/
	right: 16.66666667%;
}
.col-md-pull-3{
	right: 25%;
}
.col-md-pull-4{
	right: 33.33333333%;
}
.col-md-pull-5{
	right:41.66666667%%;	
}
.col-md-pull-6{
	right: 50%;
}
.col-md-pull-7{
	right: 58.33333333%;
}
.col-md-pull-8{
	right: 66.66666667%;	
}
.col-md-pull-9{
	right: 75%;

}
.col-md-pull-10{
	right: 83.33333333%;

}
.col-md-pull-11{
	right: 91.66666667%;
}
.col-md-pull-12{
	/*占两格*/
	right: 100%;
}
/*列排序 从左边往右边推 left*/

.col-md-push-1{
	/*占一个格 width = 1/12*100 */
	left: 8.33333333%;
}

.col-md-push-2{
	/*占两格*/
	left: 16.66666667%;
}
.col-md-push-3{
	left: 25%;
}
.col-md-push-4{
	left: 33.33333333%;
}
.col-md-push-5{
	left:41.66666667%%;	
}
.col-md-push-6{
	left: 50%;
}
.col-md-push-7{
	left: 58.33333333%;
}
.col-md-push-8{
	left: 66.66666667%;	
}
.col-md-push-9{
	left: 75%;

}
.col-md-push-10{
	left: 83.33333333%;

}
.col-md-pull-11{
	right: 91.66666667%;
}
.col-md-pull-12{
	/*占两格*/
	right: 100%;
}
/*按钮类*/
.btn{
	border:1px solid #ccc ;
	padding: 6px 12px;
	border-radius: 4px;
}
.btn-default{
	background-color: #fff;
}
.btn-default:hover{
	color: #333;
	background-color: #ccc;
}.btn{
	border:1px solid #ccc ;
	padding: 6px 12px;
	border-radius: 4px;
}
.btn-default{
	color: #333;
	background-color: #fff;
}
.btn-default:hover{
	color: #333;
	background-color: #ccc;
}
/*首选项*/
.btn-primary{
	background-color: #377BB5;
	color: #fff;
	border-color: #2e6da4;
}
.btn-primary:hover{
	color: #fff;
	background-color: #2B618E;
    border-color: #2e6da4;
}
.btn-info{
	/*一般信息*/
	color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
.btn-info:hover{
	color: #fff;
	background-color: #46b8da;
}
.btn-success{
	/*成功信息*/
	color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
.btn-success:hover{
	color: #fff;
    background-color: #4cae4c;
}
.btn-warning{
	/*警告信息*/
	color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}
.btn-warning:hover{
	color: #fff;
    background-color: #eea236;
}
.btn-danger{
	/*危险信息*/
	color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.btn-danger:hover{
	color: #fff;
    background-color: #d43f3a;
}
/*预定义一些背景和文本颜色 情景：首选项  成功 警告  一般  危险*/
.bg-primary{
	background-color: #377BB5;
}
.bg-info{
	background-color: #5bc0de;
}
.bg-success{
	background-color: #5cb85c;
}
.bg-danger{
	background-color: #d9534f;
}
.bg-warning{
	background-color: #f0ad4e;
}
/*文本情景颜色*/
.text-primary{
	color: #377BB5;
}
.text-info{
	color: #5bc0de;
}
.text-success{
	color: #5cb85c;
}
.text-danger{
	color: #d9534f;
}
.text-warning{
	color: #f0ad4e;
}

/*table基础样式*/
.table{
	width: 100%;
	min-width: 100%;
	margin-bottom: 20px;
	/*让单元格边框重合*/
	border-collapse: collapse;
}
.table th, .table td{
	border-bottom: 1px solid #ddd;
	text-align: center;
	padding: 6px 12px;
}
.table-bordered td, .table-bordered th{
	border: 1px solid #ddd;
}
.table-hover tr:hover{
	background-color: #ddd;
}

/*列表组*/
.list-group{
	padding: 0;
	margin: 0;
}
.list-group-item{
	/*li里面的元素可以根据li来做定位*/
	position: relative;
	list-style: none;
	padding: 10px 15px;
	border: 1px solid #ddd;
	margin-bottom: -1px;
}
.list-group-item:first-child{
	/*:first-child 表示父元素的第一个子元素  li的父元素ul的第一个子元素*/
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.list-group-item:last-child{
	/*父元素的最后一个子元素*/
	border-bottom-left-radius:4px;
	border-bottom-right-radius: 4px;
	margin-bottom: 0;
}

/*面板*/
.panel{
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.panel .panel-heading{
	border-bottom: 1px solid transparent;
}
.panel .panel-title{
	padding: 10px 15px;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 0 ;
}
.panel .panel-body{
	padding: 15px;
}
.panel .panel-footer{
	border-top: 1px solid transparent;
	padding: 10px 15px;
}
.panel-default{
	border: 1px solid #ddd;
}
.panel-default .panel-heading{
	border-bottom: 1px solid #ddd;
	background-color: #F5F5F5;
}
.panel-default .panel-footer{
	border-top: 1px solid #ddd;
	background-color: #F5F5F5;
}