/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	*** Basic Styling ***
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
html, body {
	height: 100%; /* Height Hack 1/3 */
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	We set the page background, the font color and size, 
	center the template...
	We set the relative font size of IE5-5.5 differently 
	to everything else, and we scale it from there.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body {
	background: #FFF repeat-y center top;
	line-height: 1.1em;
	color: #333;
	font: small Verdana, Geneva, Arial, Helvetica, sans-serif!important;
	font /*IE5-5.5 Hack*/: x-small Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: center; /* center template 1/2 */
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Whitespace Reset"
	We define padding and margin for all elements and
	we scale it from there if we need to.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body, form, input {	
	padding: 0px;
	margin: 0px;
}
h1, h2, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { 
	margin: 5px 0; 	
}
dd, blockquote {
	margin-left: 40px;
}
fieldset {
	padding: 10px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Hyperlink Control"
	We keep the underline since users have gotten used
	to that line defining a hyperlink and we just change 
	the mouseover color.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
a:link, a:visited {
	color: #06c;
}
a:hover {
	color: #8ccc33;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Heading Settings"
	We define font size and color mostly among some 
	other more specific things.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
h1, h2, h3 {
	color: #036;
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 18px;
	position: relative;
}
h2 {
	margin-bottom: .8em;
	font-size: 2em;
	font-weight: normal;
}
h3 {
	margin-bottom: 1em;
	text-transform: uppercase;
	letter-spacing: 2px;
	font: bold x-small Verdana, Arial, Helvetica, sans-serif;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Image Control"
	We remove the border from all images and we scale it
	from there if we need to.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
img {
	border: 0;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	*** Layers Time ***
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Wrapper"
	This is our parent layer which includes them all.
	From here we mainly choose the width of our page.
	We made it fixed and appropriate for 800x600 res.
	However, if you change it, remember to also alter 
	the width for the "center" layer. If you wish to go
	for relative width, well... be careful.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#monster {
        
	background: url(img/bg.gif) repeat-y top center;
	width: 843px;
	text-align: center; /* center tabbed menu 1/2 */
	margin:0 auto; /* center template 2/2 */
	height:100%; /* Height Hack 2/3 */
        padding:0;
}

#header{
	width:783px;
	margin:0 0 0 14px;
}

#Container{
	margin:0 auto;
	text-align: center;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Tabbed Menu"
	We mainly set the width of the tabs as a whole.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#navcontainer {
	/*clear: both;*/
	position: relative;
	margin:0 auto; /* center tabbed menu 2/2 */
  width: 85%;
  text-algin:center;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Site Logo" or "Site Header Graphic"
	You could put the site title in this div or insert
	an image in your html. If you want to place an old
	classic header to your site, define a background
	image within the "monster" div and insert a 
	transparent image within this div in your html with
	the height of your background image.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#tagline {
	clear: both;
	position:relative;     
        width:809px;
        height:146px;
	background:url("img/banner1.gif") no-repeat;
	font: bold italic 86% Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding:0;
        /*border:1px #ccc solid;*/
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	The actual tabs
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#navlist {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align:center;     
}
#navlist ul, #navlist, #navlist li  {
	margin: 0;
	padding: 0;
}
#navlist li {
	float: left;
	display: block;
	width: 20%;
	min-height: 10px;
}
#navlist li a {
	position: relative;
	display: block;
	text-align: center;
	color: #000;
	text-decoration: none;
	font: 11px Verdana, sans-serif;
}
#navlist li a.active {
	padding-bottom: 5px;
        color:#FFF;
       	background-color: #1f5791;
}
#navlist li .active:hover {
       cursor:default;
       background-color: #1f5791;
}
#navlist li a:hover {
	background-color: #8ccc33;
	color: #fff!important;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Individual Tab Control"
	We make each tab a seperate div so we can have better
	control of the tabbed assembly.
	One nice trick that we achieve this way is the use
	of one image for the two edges of the menu without
	bothering altering the width of the image.
	If you want to add more tabs, just copy and paste
	the whole code of "tabb" or "tabc", give it a name of 
	your choice and remember to define it in your html.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#taba, #tabb, #tabc, #tabd ,#tabe{
	padding: 4px;
	background-color: #546F9E;
}
#tabe{
	background: #BEFF7D url(img/slanter.gif);
	background-position: bottom left;
        padding-left: 23px;
	margin-right: -1px;
}
#taba {
	background: #BEFF7D;
  margin-right: -1px;
	border-left: 1px solid #fff;
}
#tabb {
	background: #BEFF7D;
	margin-right: -1px;
	border-left: 1px solid #fff;
}
#tabc {
	background: #BEFF7D;
	margin-right: -1px;
	border-left: 1px solid #fff;
}
#tabd {
	background: #BEFF7D url(img/slanter.gif);
	background-position: bottom right;
	border-left: 1px solid #fff;
	padding-right: 25px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	The blue line below the tabs.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#tabbar {
	position: relative;
        width:783px;
	background: #1f5791 url("img/overburn.gif") no-repeat center top;
	font: bold italic 10px Verdana, Arial, Helvetica, sans-serif;
	clear:both;	 
	height:14px;	
	margin:0 0 0 13px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Search Utility"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#contex {
  both:clear;
  width:783px;
        border-top: 2px solid #fff;
	border-bottom: 4px solid #1f5791;
	background:url("img/gradient.gif") repeat-x;
	color: #fff;
        height:50px;
	text-align: left;
	margin:0 0 0 14px;
        }

#lcontex{
       float:left;
       width:200px;
       height:50px;
       background: url("img/contex.gif") no-repeat;
       margin:0;
       text-align:center;
       /*border:1px solid #000;*/
      }

#loupe{
       float:left;
       position:relative;
       margin:5px 0;
       width:30px;
       height:25px;
       background:url("img/loupe.gif") no-repeat;
       /*border:1px solid #000;*/
}

#rcontex{
          /*clear:both;*/
          /*position:relative;*/
          margin:0;
          padding:0;
          /*border:1px solid #000;*/
          
         }

#rcontex ul{
        list-style: none;
        font: 12px/140% Verdana, Arial, sans-serif;    
}




/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Columns"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Content"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

#leftcontainer{
      position:relative;
      float:left;
      width:540px;
      height:auto;
      margin:0 0 0 21px;
      padding:0;
}

#rightcontainer{
      float:right;
      width:228px;
      height:524px;
      background:url("img/bg_nav.gif") no-repeat top center;
      margin:5px 15px 0 0;
      padding:0;
}

#NowON,#Print,#Ending{
      position:relative;
      height:auto;
      border:1px solid #ccc;
      text-align:left;
      padding:0 0 0 20px;
      margin-top:5px;
}
#NowON ul,#Print ul,#Ending ul{
      list-style:none;
}

#NowON li,#Print li,#Ending li{
	    margin:0;
	    padding:0;
      background:url("img/hr.gif") no-repeat bottom left;
      padding:5px 0;
      /*border:1px solid #000;*/
}

#NowON li a,#Print li a,#Ending li a{
      text-decoration:none;
}

/* Content > Sidebar > Login */
#login {
       float:left;
       width:240px;
       text-align:left;
       margin:10px 0;
}

#login form {
}

#login fieldset {
	border: none;
        margin:-15px 0;
}

#login legend {
	display: none;
}

#login label {
	font-size: x-small;
	font-weight: bold;
        color:#ccc;
}

#login input {
	padding: 2px 5px;
	border: 1px solid #385B88;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#inputtext1, #inputtext2 {
	color: #385B88;
}

#inputsubmit1 {
	background: #385B88;
	color: #FFFFFF;
}

/* Boxed Style */

.boxed {
	margin-bottom: 20px;
}

.boxed .title {
	height: auto;
	margin: 0;
	padding: 4px 0 0 25px;
	font-size: 1.1em;
	color: #5B62BA;
}

.boxed .content {
	padding: 0 0 0 20px;
}

.bmdate {
	FONT-SIZE: 14px; COLOR: red; FONT-FAMILY: "宋体"; TEXT-DECORATION: none;
}


/* Bar */
#bar1,#bar2,#bar3,#bar4{
	    position:relative;
	    float:left;
	    margin:0;
	    padding:4px 0 0 10px;
	    width:100%;
	    height:20px;
	    color:#FFF;
	}

#bar1{
	background:url('img/bar1.gif');
}
#bar2{
	background:url('img/bar2.gif');
}
#bar3{
	background:url('img/bar3.gif');
}
#bar4{
	background:url('img/bar4.gif');
}

#JJ,#GWY,#JSJ,#QT{
      width:540px;
      height:auto;
      text-align:left;
      padding:0;
      margin-top:10px;
      float:left;
}

#jjcontent{
	   border:1px solid #FF9900;
	   padding:10px 0 0 20px;
}
#gwycontent{
	border:1px solid #FFCC00;
	padding:10px 0 0 20px;
}
#jsjcontent{
	border:1px solid #3CF;
	padding:10px 0 0 20px;
}
#qtcontent{
        position:relative;
	border:1px solid #ccc;
	padding:10px 0 0 20px;
}
#jjcontent ul,#gwycontent ul,#jsjcontent ul,#qtcontent ul{
	list-style:none;
	margin:0;
	padding:0;
}
#jjcontent li,#gwycontent li,#jsjcontent li,#qtcontent li{
        background:url("img/hr.gif") no-repeat bottom left;
        padding:5px 0;
}
#jjcontent li a,#gwycontent li a,#jsjcontent li a,#qtcontent li a{
        text-decoration:none;
}
#jjmore,#gwymore,#jsjmore,#qtmore{
	text-align:right;
	margin:0 0 2px 0;
	padding:0 20px 0 0;
}

#jjmore a,#gwymore a,#jsjmore a,#qtmore a{
	text-decoration:none;
}

/* Footer */
#footer{
     position:relative;
     float:left;
     height:143px;
     width:784px;
     background:url("img/footer.gif") no-repeat top center;
     clear:both;
     margin:0 0 0 18px;
     padding:0;
}

/* Hr */
#hrgreen{
     width:181px;
     margin:10px 0 10px 20px;
     padding:0;
     background:url("img/hr.gif") no-repeat bottom center;
}

/* Menu */
#menu {
    text-align: center;
	font-size: 100%; 
	text-transform: uppercase;
	font-weight: bold;
    margin:20px 0 0 20px;
}



#menu a:hover {
	color: #B60400;
	font-size: 9pt;
	font-weight: bold;
	padding: 0 0 0 0px;
}

ul#menu
{
	padding: 0px ;
	list-style-type: none ;
	text-align: left;
}

ul#menu li
{
	margin: 0px 0 0 0 ;
	padding: 0 ;
}

ul#menu li a
{
	display: block ; 
	width: 175px ;
	line-height: 29px ;
	color: #B60400;
	text-indent: +30px ; 
	text-decoration: none ;
	background: url(img/li.gif) no-repeat +10px +8px; 
}


ul#menu li a:hover
{
	background: #eaeaea;
	text-indent: +30px ;
	line-height: 29px;
	background: #ebebeb url(img/li.gif) no-repeat +10px +8px; 
}

#rightcontainer .blank{
        width:100%;
        margin:20px 0;
}
#rightcontainer .blank{
        width:100%;
        margin:10px 0;
}