﻿/* ============================================
	公用、重置样式 - pub.css
	更新：2014-04-07
	By:DogNicole QQ:7877767
============================================ */



/*
	.debug

	用于快速检查布局排除常见错误，在支持 outline 的浏览器下：

	1.给html元素 class 追加 .debug 后检查盒边界范围
	2.将 .debug{...} 直接改名为 *{...} 后检查页面中所有元素盒边界范围
*/
.debug{outline:red dotted 1px;}


/*
	#csshack
	此ID并无具体作用，只是示意常用 css 区别各常见浏览器的方法
*/
#csshack{
	padding: 10px;		/* FF、OP、CH、WK、IE9+ */
	padding: 9px \9;	/* all ie */
	padding: 8px \0;	/* ie8-9 */
	*padding: 5px;		/* ie6-7 */
	+padding: 7px;		/* ie7 */
	_padding: 6px;		/* ie6 */
}


/*
	解决 IE6 重复请求服务器背景图片 ，如：a:hover 切换背景图时不读取缓存图片而是重新请求服务器的问题
*/
html{filter:expression(document.execCommand("BackgroundImageCache", false, true));}

object, embed{max-width: 100%;}	/* 图片、插件等元素设置最大宽度 */
_object, _embed{width: 100%;}		/* IE6 不支持最大宽度，因此默认为 100% 宽度 */

+img{-ms-interpolation-mode: bicubic;}	/* 改善 IE7 图像缩放质量,IE7私有属性 */
img{border: 0;}			/* 修正 IE 图片下方 3pxbug */


html, div, span, object, iframe,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, abbr, address, cite,
code, del, dfn, em, ins, kbd, q,
samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, caption, figcaption,
tbody, tfoot, thead, th, article,
aside, figure, footer, header, hgroup,
menu, nav, section, time, mark, audio,
video, details, summary,dialog{
	margin: 0 auto;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section ,menu ,dialog{display: block;}

figure{margin: 0;}

audio[controls], canvas, video{
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

audio:not([controls]){display: none;}

ul, ol, li{list-style:none outside none;}

b, strong{font-weight: 700;}

blockquote, q{quotes: none;}

blockquote::before,
blockquote::after,
q::before,
q::after{
	content: "";
	content: none;
}

del{text-decoration: line-through;}

mark{
	background: #ff0;
	color: #000;
}

abbr[title], dfn[title]{
	border-bottom: 1px dotted #000;
	cursor: help;
}

dfn{font-style: italic;}

hr{
	display: block;
	height: 1px;
	margin: 1em 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #ccc;
}

pre, code, kbd, samp{
	/* 对可能出现代码引用的文本块使用宽度字体 */
	font-family: monospace, sans-serif;
	_font-family: "courier new", monospace;
}

pre{
	/* 改善所有浏览器中预格式化文本可读性 */
	white-space: pre;			/* CSS2 */
	white-space: pre-wrap;		/* CSS 2.1 */
	white-space: pre-line;		/* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word;		/* IE */
}

pre, code, kbd, samp{
	font-family: monospace, monospace;
	_font-family: "courier new", monospace;
	font-size: 1em;
}



table button, table input{*overflow: auto;}	/* 在 table 中重新加入内边距，以避免 IE6/7 中的交迭和空白问题(原理不明，待查) */

table{
	border-collapse: collapse;
	border-spacing: 0;
}

th{
	font-weight: bold;
	vertical-align: bottom;
}

td{vertical-align: top;}
td, td img{vertical-align: top;}



button, input, select, textarea{
	margin: 0;	/* 归零 Webkit 内核多加的 2px */
	font-size: 100%;
	vertical-align: baseline;
	*vertical-align: middle;
}

button, input{
	line-height: normal;		/* 按钮、文本框行高定义为正常，以匹配 FF3、4 */
	*overflow: visible;			/* 纠正 IE6/7 中显示异常的内边距 */
}

button, input[type="button"], input[type="reset"], input[type="submit"]{
	cursor: pointer;			/* 手形光标，表示可点击的表单元素 */
	-webkit-appearance: button;	/* 允许 iOS 中可点击的表单元素样式 */
}

button{
	width: auto; overflow: visible;	/* make buttons play nice in IE */
}

button:-moz-focus-inner, input:-moz-focus-inner{
	/* 删除 FF3/4 中的内边距和边框 */
	border: 0;
	padding: 0;
}

input[type="checkbox"], input[type="radio"]{box-sizing: border-box;}
input[type="radio"]{vertical-align: text-bottom;}
input[type="checkbox"]{vertical-align: bottom;}
input[type="search"]{
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration{-webkit-appearance: none;}



/* 表单验证提示 */
input:valid, textarea:valid{}	/* 输入合法有效时的设置 */
input:invalid, textarea:invalid{background-color: #f0dddd;}/* 输入错误时的提示警告 */
textarea:focus, input:focus{background: #FEFFF1;}

textarea{
	overflow: auto;			/* 删除 textarea 在 IE6/7/8/9 中的默认垂直滚动条 */
	vertical-align: top;
	resize: vertical;		/* 在支持 html5 文本框尺寸调整的浏览器上仅允许垂直方向调整 textarea 大小 */
}


/* html5表单文本默认值 */
::-webkit-input-placeholder{color:#a9a9a9;}
input:-moz-placeholder{color:#a9a9a9;}
textarea:-moz-placeholder{color:#a9a9a9;}


legend{
	/* 纠正 legend 在 IE6/7 中显示异常的对齐 */
	border: 0;
	*margin-left: -7px;
	padding: 0;
}

/* 手型鼠标元素 */
label,
input[type="button"],
input[type="submit"],
input[type="file"],
button{
	cursor: pointer;
}



/* ==|== 浮动及清理 ==============================================
 * 浮动，并消除ie6双倍浮动边
 * 预置清理浮动方法
================================================================== */
.fl{float: left;_display: inline;}
.fr{float: right;_display: inline;}
.o-clear{overflow: hidden;zoom: 1;}

.p-clear{
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
}

.fix:before, .fix::after{
	content: "\0020";
	display: block;
	height: 0;
	line-height: 0;
	overflow: hidden;
	visibility: hidden;
}

.fix::after{clear: both;}
.fix{zoom: 1;}



/* ==|== 隐藏元素 ==============================================
 * 针对不同设备隐藏元素方式
================================================================ */
/* 同时在屏幕读取器和浏览器中隐藏 */
.hide{display: none;}

/* 仅可视隐藏，在屏幕读取器中可用 */
.hide-pro{
	border: 0;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
}

/* 允许元素通过键盘浏览时成为焦点 */
.hide-tab.focusable:active,
.vhide-tab.focusable:focus{
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
}

/* 可视隐藏且在屏幕读取器中隐藏，但保留布局 */
.hide-v{visibility: hidden;}





/* ==|== IE9 溢出 ================================================
 * 纠正 IE9 中一个怪异的溢出现象
================================================================== */
svg::not(:root){overflow: hidden;}





/* ==|== h 标签预定义 ================================================
 * h1 ~ h6 字号默认大小
====================================================================== 
h1 ,h2 ,h3 ,h4 ,h5 ,h6{font-size: 1.2em;}*/


/* 上标、下标 */
sub, sup{
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
	position: relative;
}

sup{top: -0.5em;}
sub{bottom: -0.25em;}