/*----------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*	以下是css通用部分，涉及到页面的排版、布局等等。
    这些定义与样式，制作模板的时候也可以直接使用，一定程度上可以减少制作模板的工作量。
	当然，在制作其他网站的时候，您可以同样拷贝和使用下面的css定义。
	
	1、重置相关的html元素
	2、与字体与显示相关的定义
	3、表单区域的样式
	4、反馈信息
	5、对列表的定义
	6、表格样式
	7、翻页
    8、布局相关的css定义
/*----------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------------*/
/* 1、 重置相关的html元素
/*----------------------------------------------------------------------------------------------------------------------*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { 
	margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; 
	font-family: inherit; vertical-align: baseline; list-style:none;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td { font-weight: normal;}
table, td, th { vertical-align: top;}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }
a{color:#000;text-decoration:none; outline:none}
a:hover {color: #f90;}

/*----------------------------------------------------------------------------------------------------------------------*/
/*2、与字体与显示相关的定义
/*----------------------------------------------------------------------------------------------------------------------*/
/* 标题
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; margin:15px 0; font-weight: bold;}

h1 { font-size: 18px;}
h2 { font-size: 16px; }
h3 { font-size: 14px;}
h4 { font-size: 12px;}
h5 { font-size: 1em;}
h6 { font-size: 1em;}

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}

/* 与文字与字体相关的元素
-------------------------------------------------------------- */
a           {color:#000;text-decoration:none;}
a:hover     {color: #f90;}
.lnk        {text-decoration:underline; cursor:pointer}

p           { margin: 0 0 1.5em; }
p img.left  { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } 


/* Misc classes
-------------------------------------------------------------- */
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

/* 字体向右对齐 */
.textright,td.textright,a.textright,span.textright,li.textright,div.textright,p.textright
{text-align:right;}
/* 字体向左对齐 */
.textleft, td.textleft,a.textleft,span.textleft,li.textleft,div.textleft,p.textleft,colgroup.textleft
{text-align:left;}
/* 字体居中对齐 */
.textcenter, td.textcenter,a.textcenter,span.textcenter,li.textcenter,div.textcenter,p.textcenter,colgroup.textcenter
{text-align:center;}
/* 容器内文字不换行 */
.textnowrap, td.textnowrap,a.textnowrap,span.textnowrap,li.textnowrap,div.textnowrap,p.textnowrap
{white-space:nowrap;}
/* 容器内文字可以换行 */
.textwrap, td.textwrap,a.textwrap,span.textwrap,li.textwrap,div.textwrap,p.textwrap
{white-space:normal;}
/* 设置元素既有inline属性又有block属性 */
.inline-block{display:inline-block;display:-moz-inline-stack;*display:inline;zoome:1;}

/* 字体的大小颜色
-------------------------------------------------------------- */
.font9px         { font-size:9px;}
.font10px         { font-size:10px;}
.font11px         { font-size:11px;}
.font12px         { font-size:12px;}
.font14px         { font-size:14px;}
.font16px         { font-size:16px;}
.font18px         { font-size:18px;}
.font20px         { font-size:20px;}

/* 字体的粗细
-------------------------------------------------------------- */
.fontbold         { font-weight:700;}
.fontnormal       { font-weight:normal;}

/* 字体的颜色
-------------------------------------------------------------- */
.fontcolorRed     { color:#CC0000}
.fontcolorGreen   { color:#618605}
.fontcolorOrange  { color:#f90;}
.fontcolorBlack   { color:#000;}
.fontcolorGray    { color:#666;}
.fontcolorBlue    { color:#369;}

/* 元素背景色
-------------------------------------------------------------- */
.ColColorRed            {background:#fbeeef; }
.ColColorDeepRed        {background:#d9685a;  color:#fff;}
.ColColorGray           {background:#efefef; }
.ColColorGraydark       {background:#efefef; }
.ColColorGreen          {background:#eefbee; }
.ColColorBlue           {background:#eef4fb }
.ColColorOrange         {background:#FBF7EE}
.ColColorWhite          {background:#fff}




/*----------------------------------------------------------------------------------------------------------------------*/
/*3、表单区域的样式
/*----------------------------------------------------------------------------------------------------------------------*/

fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }

/*表单元素的包裹*/
.FormWrap                      {margin:10px 0;margin-bottom:0;border:1px solid #D5D5D5;background:#f0f0f0;	padding:7px;}
.FormWrap label                {width:auto;}
.FormWrap em                   {font-stretch:normal;	color:#FF6600;	margin:0 2px;}
.inputstyle                    {border:1px solid #ccc; padding:3px 5px; }
.buttonstyle                   {padding:1px 5px; font-size:14px;}
		
/*分区内的表格形式的表单*/		
.division                      {background:#fff;	border:1px solid #E1E1E1;	padding:7px;	margin-bottom:7px;}/*表单不同区域的划分*/
.borderdown                    {border-top: 1px solid #bec6ce;  border-left: 1px solid #bec6ce; border-right: 1px solid #fff;     border-bottom: 1px solid #fff;}
.borderup         			   {border-top: 1px solid #efefef;     border-left: 1px solid #efefef;    border-right: 1px solid #bec6ce;  border-bottom: 1px solid #bec6ce;}
.borderbottom                  {border-bottom: 1px solid #eee; margin-bottom:5px;}
.forform th                    { width:120px;}

/*表单部分带有增减按钮的输入框*/	
.Numinput                      {padding:0 14px; position:relative; height:25px;}
.Numinput input                {font-size:12px; width:24px;}
.Numinput .numadjust           {position:absolute;top:4px; width:12px; height:12px; overflow:hidden;background-image:url(images/numadjust.gif); background-repeat:no-repeat}
.Numinput .numadjust.increase  {background-position:0 0;right:1px}
.Numinput .numadjust.decrease  {background-position:0 -12px; left:-1px;}



/*----------------------------------------------------------------------------------------------------------------------*/
/*4、反馈信息
/*----------------------------------------------------------------------------------------------------------------------*/

/*设置不同的提示的样式，包括背景与颜色*/
.error,
.notice,
.note, 
.success    { padding: .8em; margin-bottom: 1em; border: 1px solid #ddd; margin:10px 0}


.error h4,
.notice h4,
.note h4, 
.success h4{ margin:3px 0;}

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.note       { background: #F5F4EC; color: #514721; border-color: #E5DDC7;}
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }

.toshow     { background:#F0F5EC; margin:15px 0; border:3px solid #C2D7B2; padding:10px; }

/*设置不同提示信息内的链接的样式*/
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.note a     { color: #000; }
.success a  { color: #264409; }

/*关闭提示信息的按钮*/
.error .option,
.notice .option,
.note .option, 
.success .option   { float:right;cursor:pointer;}

/*带图标的提示信息样式*/
.error .pic,
.notice .pic, 
.note .pic,     
.success .pic { width:48px; height:48px;}
.error .pic   { background: url(images/infoerror.gif); }
.notice .pic  { background: url(images/infonotice.gif); }
.note .pic    { background: url(images/infonote.gif); }
.toshow .pic { width:56px; height:48px;background: url(images/infosuccess.gif); }

.toshow .pic { background: url(images/toshow.gif); }
/*简单的提示信息*/
.infotips{ color:#999; padding-left:5px}
.infohelp{ background:url(images/faq.gif) no-repeat right 0; padding-right:14px; margin-right:2px; white-space:nowrap}

/*系统信息反馈页面*/
.FeedBackInfo                 {margin:50px auto;color:#333333; width:700px;}
.FeedBackInfo .success,
.FeedBackInfo .error          {margin:0 auto; background:none; border:0;}

.FeedBackInfo .success .pic,
.FeedBackInfo .error .pic     {background:url(images/feedbackinfo.gif) no-repeat center;	width:128px; height:128px;padding:0 10px;		border-right:1px solid #eee;}
.FeedBackInfo .success .pic   {background-position:0 18px;}
.FeedBackInfo .error .pic     {background-position:0 -97px;}

.FeedBackInfo h1              {margin:0 0 0 5px; font-size:14px; }
.FeedBackInfo .success h1     {color:#060;}
.FeedBackInfo .error h1       {color:#900}


/*----------------------------------------------------------------------------------------------------------------------*/
/*5、对列表的定义
/*----------------------------------------------------------------------------------------------------------------------*/
/*普通的列表定义*/
ul.list                    {margin:10px 0;}
ul.list li                 {background:url(images/ra.gif) no-repeat 0 8px;padding-left:15px;color:#666;display:block;border-bottom:1px solid #efefef;line-height:23px;}
ul.list ul                 {margin-left:10px;}												
ul.list li.nolist          {border-bottom:0;background:none;}

/*右侧带有说明的列表*/
ul.list.WithRight li       {position:relative;}
ul.list.WithRight li span  {position:absolute;	right:0;color:#666/*可以写入时间*/}	

/*浮动列表*/
ul.list.float li		   {width:45%;float:left; margin-left:15px;}	/*这里宽度可以根据实际情况在模板的css里面重新定义*/

/*有序列表*/											
ol                         {}
ol li                      {margin:0 0 0 20px; color:#000;border-bottom:1px solid #efefef;line-height:20px;list-style:decimal;}
ol li ol                   {margin-top:1px 0 0 10px}	



/*----------------------------------------------------------------------------------------------------------------------*/
/*6、表格样式
/*----------------------------------------------------------------------------------------------------------------------*/

/*定义table类型 可以结合colgroup使用来定义列的背景色，th与td元素全部居中，如需要单元格内文字左对齐或者右对齐，需要在td上设置*/
.liststyle              { border: 1px solid #efefef;	width:100%;	margin:0;}
.liststyle a            { padding-right:5px; text-decoration:underline;}
.liststyle thead th     {text-align:center;	font-size:12px; white-space:nowrap;	font-weight:700;background:url(images/tablethbg.gif);	
						 border-bottom:1px solid #ccc;	border-top:1px solid #fff;	border-right:1px solid #DBE2E7;	border-left:1px solid #fff;
						 padding:4px 3px;}/*定义列表的头部*/
.liststyle  td, 
.liststyle  th          {padding:4px;  word-break:break-word; text-align:center;
				        border-right:1px solid #DBE2E7;	border-left:1px solid #fff;	border-bottom:1px solid #efefef;	border-top:1px solid #fff;}


/*定义data型表格，th居右对齐，td居左对齐*/
.liststyle.data td, 
.liststyle.data th      {word-break:break-word;}				
.liststyle.data th      {text-align:right;color:#000; font-size:14px;} 
.liststyle.data td      {text-align:left;}	
.liststyle.data .colspan{ text-align:center; border-bottom:1px solid #aaa;border-top:1px solid #fff; color:#000; font-weight:700;}	/*用于整个通栏的td，使用了colspan的td*/
/*表格下方的操作区域*/
.liststyle_option       {}
.liststyle_option th,
.liststyle_option td    {padding:5px; text-align:center; background:#eee; text-align:left;}

/*----------------------------------------------------------------------------------------------------------------------*/
/*7、翻页
/*----------------------------------------------------------------------------------------------------------------------*/
.pager{ clear:both; margin:10px;}
.pagerbox{ float:right;}
	.pager a{text-align:center; border:1px solid #ccc; padding:0 4px;_padding:0 4px; background:#fff; text-decoration:none; margin:0 1px;}
	.pager a.first,
	.pager a.last,
	.pager a.pre,
	.pager a.next{ background-repeat:no-repeat;width:21px; height:18px; border:0;padding:1px 10px 1px 8px;}
	.pager a.first{ background:url(images/thefirst.gif);}
	.pager a.last{ background:url(images/thelast.gif); }
	.pager a.pre{ background:url(images/theprevious.gif); }
	.pager a.next{ background:url(images/thenext.gif);}
	
/*----------------------------------------------------------------------------------------------------------------------*/
/*7、翻页
/*----------------------------------------------------------------------------------------------------------------------*/
.boxTips           { padding: .8em; margin-top:13px;margin-bottom: 1em; border: 2px solid #ddd; position:relative; z-index:1000; background:#fff;}
.boxTips i         { display:block;width:23px; height:14px; position:absolute;top:-13px; z-index:1001; background-repeat:no-repeat}
.boxTips i.left    {left:8px;} 
.boxTips i.right   {right:8px;} 
	
.boxTips.success   { border: 2px solid #C6D880;} 
.boxTips.success i {background-image:url(images/boxtips-success.gif)}


/*----------------------------------------------------------------------------------------------------------------------*/
/*8、布局相关的css定义
/*----------------------------------------------------------------------------------------------------------------------*/


/* 定义布局css的浮动与margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, 
div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, 
div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, 
div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, 
div.span-21, div.span-22, div.span-23, div.span-24, div.span-auto {
  float: left;
  margin-right: 10px; 
}
/* 布局的最后一项 */
div.last { margin-right: 0; }
/* 布局元素的宽度 */
.span-0  { width: 10px; }
.span-1  { width: 30px; }
.span-2  { width: 70px; }
.span-3  { width: 110px; }
.span-4  { width: 150px; }
.span-5  { width: 190px; }
.span-6  { width: 230px; }
.span-7  { width: 270px; }
.span-8  { width: 310px; }
.span-9  { width: 350px; }
.span-10 { width: 390px; }
.span-11 { width: 430px; }
.span-12 { width: 470px; }
.span-13 { width: 510px; }
.span-14 { width: 550px; }
.span-15 { width: 590px; }
.span-16 { width: 630px; }
.span-17 { width: 670px; }
.span-18 { width: 710px; }
.span-19 { width: 750px; }
.span-20 { width: 790px; }
.span-21 { width: 830px; }
.span-22 { width: 870px; }
.span-23 { width: 910px; }
.span-24, div.span-24 { width: 950px; margin: 0; }
.span-auto{ width:auto;}
/*附加右边空栏*/
.append-1  { padding-right: 40px; }  
.append-2  { padding-right: 80px; } 
.append-3  { padding-right: 120px; } 
.append-4  { padding-right: 160px; } 
.append-5  { padding-right: 200px; } 
.append-6  { padding-right: 240px; } 
.append-7  { padding-right: 280px; } 
.append-8  { padding-right: 320px; } 
.append-9  { padding-right: 360px; } 
.append-10 { padding-right: 400px; } 
.append-11 { padding-right: 440px; } 
.append-12 { padding-right: 480px; } 
.append-13 { padding-right: 520px; } 
.append-14 { padding-right: 560px; } 
.append-15 { padding-right: 600px; } 
.append-16 { padding-right: 640px; } 
.append-17 { padding-right: 680px; } 
.append-18 { padding-right: 720px; } 
.append-19 { padding-right: 760px; } 
.append-20 { padding-right: 800px; } 
.append-21 { padding-right: 840px; } 
.append-22 { padding-right: 880px; } 
.append-23 { padding-right: 920px; } 

/*附加左边空栏*/
.prepend-1  { padding-left: 40px; }  
.prepend-2  { padding-left: 80px; } 
.prepend-3  { padding-left: 120px; } 
.prepend-4  { padding-left: 160px; } 
.prepend-5  { padding-left: 200px; } 
.prepend-6  { padding-left: 240px; } 
.prepend-7  { padding-left: 280px; } 
.prepend-8  { padding-left: 320px; } 
.prepend-9  { padding-left: 360px; } 
.prepend-10 { padding-left: 400px; } 
.prepend-11 { padding-left: 440px; } 
.prepend-12 { padding-left: 480px; } 
.prepend-13 { padding-left: 520px; } 
.prepend-14 { padding-left: 560px; } 
.prepend-15 { padding-left: 600px; } 
.prepend-16 { padding-left: 640px; } 
.prepend-17 { padding-left: 680px; } 
.prepend-18 { padding-left: 720px; } 
.prepend-19 { padding-left: 760px; } 
.prepend-20 { padding-left: 800px; } 
.prepend-21 { padding-left: 840px; } 
.prepend-22 { padding-left: 880px; } 
.prepend-23 { padding-left: 920px; } 

div.floatLeft{ float:left}
div.floatRight { float:right}
div.floatNone{ float:none}

/*布局元素右边边框*/
.border { padding-right: 4px; margin-right: 5px; border-right: 1px solid #eee;}

/* 布局元素具有更宽边距的右边边框 */
.colborder {padding-right: 24px;margin-right: 25px;border-right: 1px solid #eee;}

/*把元素向前或者向后推向前一栏或者后一栏*/
.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }
.push-6 { margin-left: -240px;  }
.push-7 { margin-left: -280px;  }

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 { margin: 0 -200px 1.5em 240px; }
.push-7 { margin: 0 -200px 1.5em 280px; }

.box{padding:7px;}
.boxBlue {background:#ECF2F5; border:1px solid #C7DBE5; padding:7px;}
.boxBrown{background:#F5F4EC; border:1px solid #E5DDC7; padding:7px;}
.boxGray {background:#efefef;	border:1px solid #E1E1E1;padding:7px;}/*表单不同区域的划分*/


/*分隔线*/
hr       {background: transparent; color: #ddd;  float: none; width: 100%; height: 0; margin:5px 0; padding:0;border: none;}
hr.space {background: #fff;color: #fff;}

/*清除浮动
	 提供两个方式来清除浮动：
	 1、clearfix可以直接在浮动元素的包裹容器内直接写上class=cleafix就可以就可以清除浮动了，好处是仅仅增加一个class而不需要增加额外的多于html元素。比如
			<div class="clearfix">
				<div style="float:left"></div>
				<div style="float:right"></div>
			</div>
	 2、另一个方法是直接在浮动元素的结尾处写上<div class="clear"></div>
 */
 
.clearfix:after  {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix        {display: inline-block;}
* html .clearfix,
* html           {height: 1%;}
.clearfix        {display: block;}
.clear           {border-top:1px solid transparent !important; border-top:0; clear:both; line-height:0; font-size:0;height:0;height:1%;}