@charset "utf-8";
/* format
==================================================*/
/* [reset] */
body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td{ margin:0;padding:0 }
h1,h2,h3,h4,h5,h6,input,textarea,select,button{ font-size:100%;vertical-align:middle }
ul,dl,ol{ list-style:none;overflow:hidden }
img,fieldset,button{ border:none }
img{ display:inline-block;vertical-align:top }
em{ font-style:normal }
table{ border-collapse:collapse;border-spacing:0 }

/* [default style] */
body{ background:#fff;font-size:12px;line-height:1.5 }
body,input,select,textarea,button{ color:#333;font-family:"宋体" }
textarea,select,.text{ border:1px solid #ccc }
h1,legend{ position:absolute;left:-9999px }
a{ text-decoration:none }
a:hover{ text-decoration:underline }
:focus{ outline:none }


/* layout
==================================================*/
#header, .container, #footer{ margin:0 auto }

/* [container] */
.container:after{ content:".";clear:both;display:block;height:0;visibility:hidden } /* close float(not IE) */
.container{ margin-top:10px }

/* [three_column] */
.three_col_m, .three_col_l, .three_col_r{ display:inline;float:left;width:auto }
/*
  structure:
	<div class="container">
    <div class="three_col_m">middle(main)</div>
		<div class="three_col_l">left</div>
		<div class="three_col_r">right</div>
  </div>
	
	style:
  .container .three_col_m{ width:400px;padding-left:310px }  padding-left = three_col_l.width + margin.width(10px)
  .container .three_col_l{ width:300px;margin-left:-710px }  margin-left = -(three_col_m.padding-left + this.width)
  .container .three_col_r{ width:200px;margin-left:10px }
*/

/* [two_column] */
.two_col_l, .two_col_r{ display:inline;float:left;width:auto }

/* [box] */
.box, .box_vertical{ margin-bottom:8px }

.box{ position:relative }
/*
  structure:
  <div class="box">
    <div class="box_title">
      <h2><a href="#" title="title">title</a></h2>
    </div>
    <div class="box_main">main</div>
		<ul class="more">  <<  if only one link then  <a class="more" href="#">更多</a>
      <li><a href="#">link1</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">更多&gt;&gt;</a></li>
    </ul>
  </div>
*/

.box_title{ border:1px solid;overflow:hidden;padding-right:5px }
.box_title h2{ padding-left:10px }

/* tab box title */
.box_title li, .box_title li h2, .box_title li h2 a{ display:inline;float:left;width:auto }
.box_title ul:after{ content:".";clear:both;display:block;height:0;visibility:hidden }
.box_title ul{ display:inline-block }
.box_title ul{ display:block }
.box_title li{ cursor:pointer;margin-right:5px;text-align:center;overflow:hidden }
.box_title li h2{ padding-left:0 }
.box_title li h2 a{ text-decoration:none }
.tab_content{ overflow:hidden }
/*
  structure:
  <div class="box">
    <div class="box_title">
      <ul>
        <li><h2>title1</h2></li>
        <li><h2>title2</h2></li>
      </ul>
    </div>
    <div class="box_main">
      <div class="tab_content">title1</div>
      <div class="tab_content">title2</div>
    </div>
  </div>
*/

/* box main */
.box_main{ border:1px solid;border-top:0;padding:10px;overflow:hidden }

/* more and others link */
.more{ line-height:21px;position:absolute;right:9px;top:1px }  /* line-height = box_title.line-height */
.more li{ display:inline }

/* [erect tilte box] */
.box_vertical:after{ content:".";clear:both;display:block;height:0;visibility:hidden }
.box_vertical{ border:1px solid;overflow:hidden }
.box_vertical .box_title, .box_vertical .box_title h2, .box_vertical .box_title h2 a, .box_vertical .box_main{ height:100% }
.box_vertical .box_title{ border:none;float:left;margin-right:0!important;margin-right:-3px;padding-right:0;width:auto }
.box_vertical .box_title h2{ float:left;margin-right:0;padding-left:0;width:auto }
.box_vertical .box_title h2 a{ display:block;width:14px }
.box_vertical .box_main{ border:none;border-left:1px solid }
/*
  structure:
  <div class="box_vertical">
    <div class="box_title">
      <h2><a href="#" title="">title</a></h2>
    </div>
    <div class="box_main">main</div>
  </div>

  style:
  .box_vertical{ height:100px }
  .box_vertical .box_title h2 a{ width:14px;padding:0 8px }  real.width = width(font-size) + padding
*/


/* style config
==================================================*/
/* [layout] */
#header, #footer{ width:1002px }
.container{ width:960px } /* page width / IE haslayout(close float) */

/* [title font style] */
h2{ color:#000;font-size:14px }
h3{ color:#114BAC;font-size:14px }

/* [link] */
a{ color:#333 }  /* default link */
a:hover{ color:#ff5b02 }

h2 a{ color:#000 }
h2 a:hover{ color:#ff5b02;text-decoration:none }

/* [function] */
.clear_margin{ margin:0 }

/* clear float */
.clearfix:after{ content:".";clear:both;display:block;height:0;visibility:hidden }
.clearfix{ display:inline-block }
.clearfix{ display:block }
/* 
  usage:
  <div class="clearfix">
    <div style="float:left">float div</div>
  </div>
*/

/* [module] */
/* image mouseover style */
.image{ overflow:hidden;text-align:center }
.image img{ border:1px solid #ccc;display:block;text-align:left }
.image a:hover img{ border-color:#ff5b02 }
/* 
  structure:
  <div class="image">
    <a href="#" title="">
      <img src="" width="100" height="100" alt="图片" />
      <span>图片标题</span>
    </a>
  </div>

  style:
  .image{ width:102px }  width = border.width + img.width
*/

/* clear float */
.image_info:after, .image_group:after, .date_list li:after{ content:".";clear:both;display:block;height:0;visibility:hidden }
.image_info, .image_group, .date_list li{ display:inline-block }
.image_info, .image_group{ display:block }
.date_list li{ display:list-item }

.image_info .image{ display:inline;float:left;width:auto }
.image_info ul, .image_info dl, .image_info ol{ display:inline-block }  /* IE haslayout */
.image_info ul, .image_info dl, .image_info ol{ display:block }
/*
  structure:
  <div class="image_info">
    <div class="image">
      <a href="#" title=""><img src="" width="" height="" alt="" /></a>
    </div>

    <ul>  <<  <dl> or <ol> or <p>
      <li>列表</li>
      <li>列表</li>
    </ul>
  </div>
*/

.image_group .image{ display:inline;float:left;width:auto }
/*
<div class="image_group">
  <div class="image">
    <a href="#" title=""><img src="" width="" height="" alt="" /></a>
  </div>

  <div class="image">
    <a href="#" title=""><img src="" width="" height="" alt="" /></a>
  </div>
</div>
*/

.date_list li{ font-size:0;background:#ccc }
.date_list li a, .date_list li span{ float:left;font-size:12px;height:20px;line-height:18px;overflow:hidden;width:auto }
.date_list li a{ margin-right:70px }
.date_list li span{ margin-left:-60px;width:60px }
/* 
  structure:
  <ul class="date_list">
    <li><a href="" title="">链接</a><span>2009-07-13</span></li>
  </ul>
*/


/* header and footer
==================================================*/
/* [header] */
/* ico */
.ico_home, .ico_people{ background:url("../images/handbook_ico.png") no-repeat }
.ico_home{ background-position:0 0;padding:2px 0 2px 20px }
.ico_people{ background-position:0 -35px;padding:2px 0 2px 16px }

/**/
#header .main_nav li .current, #header .main_nav li .current span, #header .main_nav li a:hover, #header .main_nav li a:hover span{ background:url("../images/handbook_img.png") no-repeat }

#header{ padding-top:20px }
#header .logo{ display:inline;float:left;margin:0 0 22px 38px;width:auto }
#header .top_nav{ float:right;height:56px;line-height:56px;padding-right:20px;width:auto }
#header .top_nav li{ display:inline;margin-right:15px }
#header .main_nav{ background:url("../images/handbook_shade.png") repeat-x;clear:both;width:100% }
#header .main_nav ul{ margin:0 auto;overflow:visible;width:825px }
#header .main_nav li{ float:left;padding:0 20px;width:auto }
#header .main_nav li a, #header .main_nav li span{ float:left;width:auto }
#header .main_nav li a{ color:#fff;text-decoration:none }
#header .main_nav li span{ cursor:pointer;font-weight:700;font-size:14px;height:31px;line-height:31px }
#header .main_nav li .current, #header .main_nav li a:hover{ background-position:0 -108px;margin:-5px -15px 0 -16px;position:relative }
#header .main_nav li .current span, #header .main_nav li a:hover span{ background-position:right -108px;height:36px;line-height:36px;padding:0 15px 0 16px }

/* [footer] */
#footer{ border-top:1px solid #ccc;margin-top:10px;text-align:center;font-weight:200;padding:8px 0 20px }
#footer h6{ font-weight:200 }
#footer ul{ margin:0 0 12px }
#footer li{ border-right:1px solid #333;display:inline;padding:0 8px 0 3px;*padding:0 2px 0 9px }
#footer a{ color:#333 }
#footer a:hover{ color:#ff5b02 }
#footer .clear_border{ border:none }