@charset "UFT-8";

/* ===================
 * fonts CSS
 * ==================*/
@font-face {
	font-family: Droid Sans;
	src: url('../fonts/DroidSans-webfont.eot');
	src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff');
}

@font-face {
	font-family: News Cycle;
	src: url('../fonts/NewsCycle-Regular.eot');
	src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf');
}

/* ===================
 * GENERAL
 * ==================*/
html {
	height: 100%;
}

* {
	margin: 0;
	padding: 0;
}

*, *:before, *:after {
	box-sizing: border-box;
}

/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
	display: block;
}

body {
	font: normal .9em 'Droid Sans', arial, sans-serif;
	color: #000;
}

p {
	padding: 0 0 16px 0;
	line-height: 1.7em;
}

img {
	border: 0;
}

h1, h2, h3, h4, h5, h6 {
	color: #000;
	letter-spacing: 0em;
	padding: 0 0 5px 0;
}

h1, h2, h3 {
	font: normal 140% 'News Cycle', arial;
	margin: 0 0 15px 0;
	padding: 15px 0 5px 0;
}

h2 {
	font-size: 160%;
	padding: 9px 0 5px 0;
}

h3 {
	font-size: 140%;
	padding: 5px 0 0 0;
}

h4, h6 {
	padding: 0 0 5px 0;
	font: normal 120% 'Droid Sans', arial, sans-serif;
}

h5, h6 {
	font: italic 100% 'Droid Sans', arial;
	padding: 0 0 15px 0;
}

h6 {
	font: normal 100% 'Droid Sans', arial;
}

a, a:hover {
	outline: none;
	text-decoration: none;
	color: #F5388C;
}

a:hover {
	text-decoration: underline;
}

blockquote {
	margin: 20px 0;
	padding: 10px 20px 0 20px;
	border: 1px solid #E5E5DB;
	background: #FFF;
}

ul {
	margin: 2px 0 22px 17px;
}

ul li {
	list-style-type: circle;
	margin: 0 0 6px 0;
	padding: 0 0 4px 5px;
	line-height: 1.5em;
}

ol {
	margin: 8px 0 22px 20px;
}

ol li {
	margin: 0 0 11px 0;
}

.left {
	float: left;
	width: auto;
	margin-right: 10px;
}

.right {
	float: right;
	width: auto;
	margin-left: 10px;
}

.center {
	display: block;
	text-align: center;
	margin: 20px auto;
}

#wrapper, #container, #title, #logo, #site_content, footer {
	margin-left: auto;
	margin-right: auto;
}

/* ===================
 * clearfix
 * ==================*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}

/* ===================
 * header
 * ==================*/
#header {
	background-color: #007294;
	background-image: -webkit-linear-gradient(top, #008dab, #007294);
	height: 98px;
}

#title {
	position: relative;
	width: 1000px;
	height: 90px;
	background: transparent;
	padding: 15px 0 0 0;
}

#title_text {
	width: 330px;
	left: 0;
	height: 70px;
	padding: 8px 20px 20px 20px;
}

#header h1, #header h2 {
	font: normal 300% 'Droid Sans', 'News Cycle', arial, sans-serif;
	border-bottom: 0;
	text-transform: none;
	margin: 0;
}

#title h1 a {
	color: #fff;
	text-shadow: 3px 3px 3pc #294701;
}

#title a:hover {
	color: orange;
}

#title h1, #title h1 a {
	padding: 0;
	color: #FFF;
	text-decoration: none;
}

#title h2 {
	font-size: 105%;
	padding: 0 0 0 0;
	color: #FFF;
	text-shadow: 3px 3px 3px #294701;
}

#title h2 .title_colour {
	color: yellow;
	font-weight: bold;
	font-size: 0.9em;
	padding-left: 0.5em;
}

/* ===================
 * search
 * ==================*/
#search_area {
	position: absolute;
	width: 180px;
	right: 20px;
	top: 40px;
	padding-right: 15px;
}

.search input {
	-web-kit-appearance: none;
	-moz-appearance: none;
	outline: 0;
	border: 1px solid #c8cccf;
	float: right;
	width: 90px;
	padding: 2px 0px 3px 5px;
	font-family: helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1em;
	color: #888;
}

.search input:focus {
	width: 180px;
	background-color: #fff;
}

.search label {
	display: none;
}

form.search input {
	background-color: #ddd;
}

form.search input::-webkit-input-placeholder {
	color: #ccc;
}

/* ===================
 * nav menu CSS
 * ==================*/
nav {
	height: 40px;
	background: #E5E5E5;
}

.multi_drop_menu {
	font: 1.2em helvetica, arial, sans-serif; /* font color and size */
	width: 1000px; /* width for the nav bar */
	margin: auto; /* center align */
}

.multi_drop_menu a {
	color: #666; /* text color */
	background-color: transparent; /* background color */
	border-width: 0; /* divider width */
	border-color: transparent; /* divider color - can be 'transparent' */
	font-weight: normal;
}

.multi_drop_menu a:hover {
	color: #FFF; /* hover text color */
	background-color: #FF8C00; /* hover background color */
}

.multi_drop_menu li a:active {
	background: #FFF; /* b/g hilite when clicked */
	color: #CCC; /* text color hilite when clicked */
	background-clip: padding-box; /* prevents border hiliting */
}

.multi_drop_menu li ul {
	width: 8em; /* width of 2nd, 3rd level menus */
}

.multi_drop_menu li li a {
	border-right-style: none;
}

.multi_drop_menu li li li a {
	border-left-style: solid;
}

/* "MECHANICAL" STYLINGS - ADJUST WITH CARE! */
/* menu mechanics */
/* level 1 */
.multi_drop_menu * {
	margin: 0;
	padding: 0;
}

.multi_drop_menu ul {
	float: left;
} /* forces ul to enclose floated li elements */
.multi_drop_menu li {
	float: left; /* makes menu horizontal */
	list-style-type: none; /* removes default bullets off lists */
	position: relative; /* position context for child list */
}

.multi_drop_menu li a {
	display: block; /* makes link fill li */
	border-right-style: solid; /* adds a right border on the links */
	background-clip: padding-box;
	/* background only under padding, not border */
	text-decoration: none; /* removes link underlining */
	padding: 8px 20px 6px 20px;
}

.multi_drop_menu li a {
	zoom: 1;
} /* IE6/7 fix */
.multi_drop_menu li:last-child a {
	border-right-style: none;
}

/* level 2*/
.multi_drop_menu li ul {
	display: none; /* hides levels 2, 3, etc. */
	position: absolute; /* position relative to parent menu */
	left: 0; /* aligns left of sub-menu to parent */
	top: 100%; /* aligns to bottom of parent */
}

.multi_drop_menu li:hover>ul {
	display: block; /* displays menu when parent hovered */
	background-color: #FF8C00;
	z-index: 1; /* pull down menu on top */
}

.multi_drop_menu li:hover>ul a {
	color: #555;
	font-size: 0.8em;
}

.multi_drop_menu li:hover>ul a:hover {
	color: #fff;
	background-color: #ff8c00;
}

.multi_drop_menu li:hover>ul a:active {
	color: #666;
}

.multi_drop_menu li li {
	position: relative; /* position context for child list */
	float: none; /* kills inherited float - makes list stack */
}

/* level 3 */
.multi_drop_menu li li ul {
	position: absolute; /* position relative to parent menu */
	left: 100%; /* aligns menu with right of parent */
	top: 0; /* aligns with parent menu choice top */
}

/* ===================
 * site_content
 * ==================*/
#site_content {
	width: 1000px;
	background: #fff;
	padding: 0 20px 0 10px;
}

/* ===================
 * side
 * ==================*/
#sidebar_container {
	display: table-cell;
	width: 210px;
	padding: 15px 0 0 0;
}

.sidebar {
	width: 200px;
	margin: 0 0 0px 0;
	padding: 0 15px 5px 13px;
}

.sidebar h3, .content h1 {
	padding: 0 15px 20px 0;
	font: 200% 'News Cycle', arial, sans-serif;
	margin: 0 1px;
}

.sidebar h3 {
	padding: 4px 15px 9px 0;
}

.sidebar ul {
	margin: 0 0 15px 0;
}

.sidebar li a {
	display: block;
	padding: 2px;
	text-decoration: none;
	color: #000;
}

.sidebar li a:hover {
	background: #ddd;
	color: #000;
}

.sidebar li a:active {
	color: #069;
}

.sidebar_item, .content_item {
	padding: 15px 0;
}

.sidebar ul li {
	list-style-type: none;
	background: url(../images/bullet.png) no-repeat;
	margin: 0 0 0 0;
	padding: 0 0 4px 28px;
	line-height: 1.5em;
}

/* ===================
 * MAIN CONTENT
 * ==================*/
.content_container {
	display: table-cell;
	text-align: left;
	font-size: 1em;
	padding: 15px 10px 0 10px;
}

.content ul {
	margin: 2px 0 22px 0px;
}

.content ul li {
	list-style-type: none;
	background: url(../images/bullet.png) no-repeat;
	margin: 0 0 0 0;
	padding: 0 0 4px 28px;
	line-height: 1.5em;
}

/* ===================
 * form
 * ==================*/
.form_settings {
	margin: 15px 0 0 0;
}

.form_settings p {
	padding: 0 0 4px 0;
}

.form_settings span {
	float: left;
	width: 200px;
	text-align: left;
}

.form_settings input, .form_settings textarea {
	padding: 5px;
	width: 299px;
	font: 100% 'Droid Sans', arial;
	border: 1px solid #E5E5DB;
	background: #FFF;
	color: #47433F;
	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border: 7px 7px 7px 7px;
}

.form_settings .submit {
	font: 100% 'Droid Sans', arial;
	border: 0;
	width: 99px;
	margin: 0 0 0 212px;
	height: 33px;
	padding: 2px 0 3px 0;
	cursor: pointer;
	background: #1A1225;
	color: #FFF;
	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border: 7px 7px 7px 7px;
}

.form_settings textarea, .form_settings select {
	font: 100% 'Droid Sans', arial;
	width: 299px;
}

.form_settings select {
	width: 310px;
}

.form_settings .checkbox {
	margin: 4px 0;
	padding: 0;
	width: 14px;
	border: 0;
	background: none;
}

.separator {
	width: 100%;
	height: 0;
	border-top: 1px solid #D9D5CF;
	border-bottom: 1px solid #FFF;
	margin: 0 0 20px 0;
}

form.stylin_form1 {
	width: 22em; /* overall width of form */
	margin: 0 auto 20px auto; /* centers form in container */
	border: 1px solid #bbb7ae;
	padding: .5em .5em .15em;
}

.stylin_form1 h3 { /* form main heading */
	margin: 0;
	padding: 0 0 .2em .2em;
	font-weight: 600;
	color: #bbb7ae;
}

.stylin_form1 fieldset {
	margin: 0;
	padding: 0 0 .2em 0;
	width: 100%;
	border: 0;
}
/* legend has weird position behavior, so I wrap the text in block-leveled span and style that instead */
.stylin_form1 legend {
	width: 100%;
	padding: .3em 0;
	background: #bbb7ae;
}

.stylin_form1 legend span { /* size of legend headings text */
	display: block;
	font-size: 1em;
	line-height: 1.1em;
	padding: 0 0 0 .4em;
	font-weight: 700;
	color: #fff;
}
/* EACH LABEL/INPUT COMBO IS WRAPPED IN A section */
.stylin_form1 section {
	overflow: hidden;
	/* forces section to enclose the form control and label */
	padding: .2em 0 .4em 0;
	border-bottom: 8px solid #e7e5df;
	/* visual separation between each section if wanted */
}

.stylin_form1 section:last-child {
	/* no border on last section of each group */
	border-bottom: 0px;
}

/* TEXT FIELDS */
.stylin_form1 section label, .stylin_form1 section h4 {
	/* h4 is used to title groups of checkboxes and radio buttonss */
	display: block;
	clear: both;
	margin: .3em .3em 0 0;
	/* right margin ensures label text wraps before touching input */
	padding-bottom: .1em;
	font-size: .8em;
	font-family: 'Droid Sans';
	font-weight: 400;
	line-height: 1.1;
}

.stylin_form1 section label span, /* asterisk for required fields */
	.stylin_form1 section h4 span {
	font-size: .75em;
	vertical-align: text-top;
	color: #f00;
}

.stylin_form1 section p.note {
	font-size: .7em;
	color: #f00;
	margin: 0;
	padding: 0 0 .3em 0;
}

.stylin_form1 section input, .stylin_form1 section textarea,
	.stylin_form1 section select {
	margin: .2em .5em .2em 0;
	padding: .2em .4em; /* creates space around the text in the input */
	color: #000;
	box-shadow: 1px 1px 3px #ccc;
	font-size: .8em;
	font-family: inherit;
	/* for Firefox - uses Courier on textarea without this */
	outline: none; /* removes default blue focus outline */
}
/* style the text fields (text, password, date, textarea, etc) with rounded corners */
.stylin_form1 section input, .stylin_form1 section textarea {
	width: 12em;
	border: 1px solid #bbb7ae;
	border-radius: 3px;
}

.stylin_form1 section textarea {
	height: 5em; /* vertical height of textarea box */
	margin-top: .3em; /*space below label */
	line-height: 1.1;
}

.stylin_form1 section p {
	margin: .3em .75em 0;
	clear: both;
	font-size: .7em;
	line-height: 1.1;
	color: #000;
}

.stylin_form1 section p.error {
	color: #f00; /* colors direction text red when error class added */
}

.stylin_form1 section section {
	/* an inner wrpper for the label/control pairs */
	overflow: hidden; /* forces element to enclose the floated labels */
	margin: .2em 0 .3em .4em;
	padding: 0 0 .1em 0;
	border-bottom: none;
}

.stylin_form1 section section input {
	float: left;
	clear: both;
	width: 1.25em; /* resets inherited width */
	margin: .1em 0 0em .3em;
	/* top aligns with label, left stops input clipping */
}

.stylin_form1 section section label {
	float: left;
	clear: none; /* reset the inherited value */
	width: 24em;
	margin: .15em 0 0 .6em;
	/* creates spacing betwen adjacent c/boxes, and btw each c/box and its label */
	font-weight: normal; /* reset the inherited value */
	font-size: .7em;
	line-height: 1.2;
}

.stylin_form1 section select {
	margin-left: .4em;
	font-size: .85em;
}

.stylin_form1 section input[type="submit"] {
	width: auto; /* resets width setting for fields */
	margin: .4em .3em 0 0;
	font-size: 1em;
	font-weight: 800;
	color: #fff;
	background-color: #bbb7ae;
	cursor: pointer;
}

.stylin_form1>section:last-child {
	text-align: center;
}

/****************
	labels_left
*****************/
form.stylin_form1.labels_left {
	width: 26em;
}

form.stylin_form1.labels_left label, form.stylin_form1.labels_left h4 {
	float: left;
	width: 6em;
}

form.stylin_form1.labels_left p {
	margin: 0 0 0 7.35em;
	padding: .3em 0 0 0;
	clear: both;
}

form.stylin_form1.labels_left p.note {
	margin: 0 0 .2em 0;
}

form.stylin_form1.labels_left section section {
	width: 19em;
	margin-left: 5em;
	padding-top: 0;
}

form.stylin_form1.labels_left section section input {
	width: 1.25em;
	margin-left: 0;
}

form.stylin_form1.labels_left section section label {
	width: 24em;
}

.stylin_form1.labels_left section input, .stylin_form1.labels_left section textarea,
	.stylin_form1.labels_left section select {
	float: left;
	width: 12em;
}

.stylin_form1.labels_left section select {
	margin-left: .2em;
}

.stylin_form1.labels_left>section input[type=submit] {
	float: none;
}

/*===================
 * TABLE
 * ==================*/
table {
	margin: 0px 0 30px 0;
	border-collapse: collapse;
}

table tr th, table tr td {
	background: #555;
	color: #FFF;
	padding: 7px 4px;
	text-align: left;
	text-shadow: none;
	font-size: 0.86em;
}

table tr td {
	background: #DDD;
	color: #47433F;
}

table tr.even th, table tr.even td {
	background-color: #ddd;
	border-bottom: 2px solid #bbb;
}

table tr td {
	background: #eee;
	color: #47433F;
}

/*===================
 * TIP
 * ==================*/
.content_container .notice.tip {
	border-top: 1px dotted #00a3d9;
	background: #fafeff;
	position: relative;
}

h2.tip {
	font-size: 0.9em;
	margin: 1.5em 0 0 0;
	padding: .6em 0 0.4em 0;
}

.content_container .notice.tip:before {
	content: 'Test';
	background: #00a3d9;
	font-size: 18px;
	padding: .3em;
	line-height: 24px;
	color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	transform: rotate(-6deg) translateX(-10px) translateY(-25px);
}

.content_container .notice.error {
	border-top: 1px dotted red;
	background: #fff0f5;
	position: relative;
}

h2.error {
	font-size: 0.9em;
	margin: 1.5em 0 0 0;
	padding: .6em 0 0.4em 0;
}

.content_container .notice.error:before {
	content: '错误';
	background: red;
	font-size: 18px;
	padding: .3em;
	line-height: 24px;
	color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	transform: rotate(-6deg) translateX(-10px) translateY(-25px);
}

.content_container .notice.topText {
	border-top: 1px dotted #00a3d9;
	background: #fafeff;
	position: relative;
}

h2.topText {
	font-size: 1.2em;
	color: navy;
	font-weight: bold;
	margin: 1.5em 0 0 0;
	padding: .1em 0 0.4em .2em;
}
/* ===================
 * footer
 * ==================*/
footer#page_footer {
	font: 100% 'Droid Sans', arial, sans-serif;
	height: 60px;
	padding: 15px;
	text-align: center;
	font-size: .9em;
	background: #1f1d1c;
	color: #FFF;
	border-top: 3px solid #007294;
}

footer#page_footer p {
	line-height: 1.2em;
	color: #ddd;
}

footer#page_footer a {
	color: #FFF;
	text-decoration: none;
}

footer#page_footer a:hover {
	color: orange;
	text-decoration: none;
}

/* ===================
 * scroll to top
 * ==================*/
#scroll {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	bottom: 15px;
	right: 0;
	background: red;
	padding: 0;
}

#scroll a {
	float: right;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#scroll a img {
	float: right;
	padding: 0 0 0 0;
	margin: 0;
}

/* ===================
 * autoArrows CSS
 * ==================*/
span.sf-arrow {
	width: 7px;
	height: 7px;
	position: absolute;
	top: 20px;
	right: 5px;
	display: block;
	background: url(../images/arrows-white.png) no-repeat 0 0;
	overflow: hidden;
	font-size: 1px;
}

ul ul span.sf-arrow {
	right: 10;
	top: 20px;
	background-position: 0 100%;
}

/* ===================
 * page number
 * ==================*/
#page_num {
	height: 20px;
	clear: both;
  	padding: 0 0 30px 0;
  	position: relative;
}

#page_num ul{
	position: absolute;
	right: 10px;
	height: 18px;
}

#page_num ul li{
	float: left;
	width: 26px;
	height: 20px;
	list-style-type: none;
}

#page_num ul li a{
	text-align: center;
	text-decoration: none;
	line-height: 20px;
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid #333;
}

#page_num ul li a:hover,#page_num ul li a.selected {
	background: #666;
	font-weight: bold;
	color:#fff;
}

/* ===================
 * page text
 * ==================*/
#page_text {
	height: 20px;
	clear: both;
  	padding: 0 0 50px 0;
  	color: #333;
}

#page_text ul{
	text-align: center;
}

#page_text ul li{
	display: inline;
	list-style-type: none;
}

#page_text ul li a{
	color: #333;
	padding: 5px 0;
	text-decoration: none;
}

#page_text ul li a:hover{
	color: navy;
	background: orange;
}