/*
基础CSS(公用)
先统一标签样式，再定义常用样式
*/


/*=======================================================
	统一标签样式
=========================================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline}

/* 统一老式浏览器HTML5显示 */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block;}
ol, ul { list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}


/* 选择文字时 */
::-moz-selection { background: #59a9ff;color:#fff; text-shadow: none;}
::selection { background: #59a9ff; color: #fff; text-shadow: none; }


body { font-family:Verdana, Arial, sans-serif;  font-size: 16px; color: #212121;}
hr { width: 100%; border: none; border-bottom: 1px solid #aaa; margin-top: 12px; margin-bottom: 12px;}

/* H1 - H6 */
h1 { margin-top: 8px; line-height: 1; margin-bottom: 4px; font-size: 35px;}
h2 { margin-top: 8px; line-height: 1; margin-bottom: 4px; font-size: 30px;}
h3 { margin-top: 8px; line-height: 1; margin-bottom: 4px; font-size: 25px;}
h4 { margin-top: 8px; line-height: 1; margin-bottom: 4px; font-size: 20px;}
h5 {font-weight:bold; line-height: 1; margin-bottom: 4px; font-size: 15px;}
h6 {font-weight:bold; line-height: 1; margin-bottom: 4px; font-size: 11px;}

/* 连接 */
a:hover, a:active { outline: 0; }
a { color: #555; text-decoration: none; }
a:hover { color: #555555;}
a:active { color: #333333;}

/* sup上标, sub下标 */
p sup { position: relative; font-size: 60%; bottom: 7px;}
p sub { position: relative; font-size: 60%; top: 2px;}
b, strong { font-weight: bold;}
i {font-style: italic;}
code, pre {font-family: monospace;}
q { color: #919191;}
q::before { content: "\201C"; font-size: 28px; line-height: 28px;}
q::after { content: "\201D"; font-size: 28px; line-height: 28px;}

/* 列表 */
/*ul li { list-style: disc;}*/
ul li ul li { list-style: circle; margin-left: 5px;}
ol { margin-left: 25px;}
ol li { list-style-type: decimal;}
ol li ol li { list-style-type:lower-alpha; margin-left: 5px;}
dl dt { font-weight: bold;}
dl dd { margin-left: 10px;}

table { border: 1px solid #ababab;}
td { padding: 5px; border: 1px solid #ababab; vertical-align: middle;}

p{ margin:15px 0;}


/*=========================================
	定义样式
=========================================*/
.clear { clear: both;}
.left { float: left;}
.right { float: right;}

ul.none{ margin:0; padding:0;}
ul.none li{ list-style:none; list-style:none;}
ol.none{ margin:0; padding:0;}
ol.none li{ margin:0; padding:0; list-style:none;}
dl.none dd{ margin:0;}


.r3px{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.r5px{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.r10px{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}


.red{ color:#F00;}
.green{ color:#390}
.blue{ color:#06F}
.yellow{ color:#FF0}



a.button{}
a.button:hover{}
a.button:active{}
a.button:visited{}

input.button{
	background-color: #4D90FE;
	background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
	background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
	background-image: -ms-linear-gradient(top,#4D90FE,#4787ED);
	background-image: -o-linear-gradient(top,#4D90FE,#4787ED);
	background-image: linear-gradient(top,#4D90FE,#4787ED);
	border: 1px solid #3079ED;
}
input.button:active{}
input.button:focus{}

input.text, textarea.text{ border:1px #CCC solid; -moz-box-shadow: inset 0 2px 2px #DEDEDE; -o-box-shadow: inset 0 2px 2px #DEDEDE; -webkit-box-shadow: inset 0 2px 2px #DEDEDE;}




/*===================
	图片
===================*/
img.flashy {
	padding: 5px;
    border: solid 1px #DADADA;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-transition: 400ms;
    -moz-transition: 400ms;
    transition: 400ms;
	margin-bottom: 15px;
}
img.flashy:hover {
	border: solid 1px #ABABAB;
}



/*=========================================
	布局
=========================================*/
.blu_0 {float: left; width: 3%; margin-left: 1%; margin-right: 1%;}
.blu_1 {float: left; width: 8%; margin-left: 1%; margin-right: 1%;}
.blu_2 {float: left; width: 18%; margin-left: 1%; margin-right: 1%;}
.blu_3 {float: left; width: 28%; margin-left: 1%; margin-right: 1%;}
.blu_4 {float: left; width: 38%; margin-left: 1%; margin-right: 1%;}
.blu_5 {float: left; width: 48%; margin-left: 1%; margin-right: 1%;}
.blu_6 {float: left; width: 58%; margin-left: 1%; margin-right: 1%;}
.blu_7 {float: left; width: 68%; margin-left: 1%; margin-right: 1%;}
.blu_8 {float: left; width: 78%; margin-left: 1%; margin-right: 1%;}
.blu_9 {float: left; width: 88%; margin-left: 1%; margin-right: 1%;}
.blu_10 {float: left; width: 98%; margin-left: 1%; margin-right: 1%;}

.offset_0 {margin-left: 5%;}
.offset_1 {margin-left: 10%;}
.offset_2 {margin-left: 20%;}
.offset_3 {margin-left: 30%;}
.offset_4 {margin-left: 40%;}
.offset_5 {margin-left: 50%;}
.offset_6 {margin-left: 60%;}
.offset_7 {margin-left: 70%;}
.offset_8 {margin-left: 80%;}
.offset_9 {margin-left: 90%;}

.after_0 {margin-right: 5%;}
.after_1 {margin-right: 10%;}
.after_2 {margin-right: 20%;}
.after_3 {margin-right: 30%;}
.after_4 {margin-right: 40%;}
.after_5 {margin-right: 50%;}
.after_6 {margin-right: 60%;}
.after_7 {margin-right: 70%;}
.after_8 {margin-right: 80%;}
.after_9 {margin-right: 90%;}




.container { width: 1000px; margin: 0 auto;}

/*=========================================
	Media Queries 根据不同的大小显示不同的样式, Html5属性
	小于580时所有显示统一宽度，适用于移动
=========================================*/
/*
@media screen and (max-width: 999px) {
.container {width: 720px;}
}
@media screen and (max-width: 719px) {
.container {width: 100%;}
}
@media screen and (max-width: 479px) {
.blu_1 {width: 98%;}
.blu_2 {width: 98%;}
.blu_3 {width: 98%;}
.blu_4 {width: 98%;}
.blu_5 {width: 98%;}
.blu_6 {width: 98%;}
.blu_7 {width: 98%;}
.blu_8 {width: 98%;}
.blu_9 {width: 98%;}
.blu_10 {width: 98%;}
}
*/