@charset "utf-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, input, ins, kbd, q, samp, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	outline-color: invert;
	outline-style: none;
	outline-width: 0pt;
}

html, body {
	height: 99%;
}

body {
	margin: 0;
	padding: 0;
	color: #000;
	/* [disabled] background-color: #CC0000;
*/
	background-color: #FBDE90;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	/* [disabled]background-image: url(images/hback.png);
*/
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 10px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}

/*
ol, ul, li {
	font: 10pt Verdana, Geneva, sans-serif;
}
*/
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	text-decoration: underline;
}

a:visited {
	text-decoration: underline;
}

a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

#contentMain {
	/* [disabled]position: relative;
*/
	float: left;
	/* [disabled]width: 900px; */
	background-color: #FBDE90;
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 25px;
	padding-left: 10px;
	margin: 20px;
	min-width: 95%;
}

#contentMain:before, #contentMain:after {
	position: absolute;
	width: 40% height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
}

#contentMain:after {
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}

.container {
	/* [disabled]width: 960px; */
	width: 80%;
	background-color: #FBDE90;
	background-image: url(http://www.ibiblio.org/chinesehistory/images/bg_texture.gif);
	background-repeat: repeat;
	top: 80px;
	margin-top: 80px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#headbak {
	background-repeat: repeat-x repeat-y;
	text-align: center;
	background-color: #FF0000;
	height: 80px;
	position: fixed;
	z-index: 100;
	width: 100%;
	top: 0px;
}

.bga {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback02.png");
}

.bgb {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback03.png");
}

.bgc {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback04.png");
}

.bgd {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback05.png");
}

.bge {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback10.png");
}

.bgf {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback11.png");
}

.bgg {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback12.png");
}

.bgh {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback13.png");
}

.bgi {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback14.png");
}

.bgj {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback15.png");
}

.bgk {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback30.png");
}

.bgl {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback31.png");
}

.bgm {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback32.png");
}

.bgn {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback33.png");
}

.bgo {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback34.png");
}

.bgp {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback35.png");
}

.bgq {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback36.png");
}

.bgr {
	background: url("http://www.ibiblio.org/chinesehistory/images/hback37.png");
}

.hcon {
	/* [disabled]width: 960px; */
	width: 80%;
	height: 80px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 0px;
}

@media screen and (max-width: 970px) {
	.hcon {
		width: 100%;
	}
}
@media screen and (max-width: 770px) {
	.hcon {
		width: 80%;
	}
}

#hmen {
	height: 40px;
	background-color: #CC0000;
	overflow: visible;
	padding-left: 1%;
	vertical-align: middle;
	/* [disabled]font: 12px Verdana, Geneva, sans-serif; */
	position: fixed;
	display: inline-table;
	width: 79%;
	margin: 0;
	/* [disabled]clear: both; */
	/* [disabled]width: 950px;
*/
	z-index: 1;
}

#hla {
	float: left;
	/* [disabled]width: 660px; */
	/* [disabled]background-color: #CC0000;
*/
	text-align: left;
	height: 80px;
}
@media screen and (max-width: 770px) {
	
	#hla {
		text-align: center;
	}
}

#hla img {
	display: block;
	margin-top: 2px;
}

.hlb {
	float: left;
	width: 336px;
	background-color: #CC0000;
	height: 32px;
	padding: 5px;
	margin-top: 25px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 50px;
}

/*
.hlc {
	background-color: #CC0000;
	float: right;
	padding-right: 2px;
	padding-left: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
}
*/
#hlc {
	float: right;
	text-align: right;
	padding-top: 3px;
	padding-right: 6px;
	/* [disabled]padding-bottom: 3px;
*/
	/* [disabled]padding-left: 6px; */
	height: 80px;
	/* [disabled]top: 0px;
*/
	min-height: 80px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 2px;
	vertical-align: middle;
	/* [disabled]width: 250px; */	
}
	@media screen and (max-width: 770px) {
		#hlc {
			display: none;
	}
}
#hlc input {


}


form.searchbox {
	background-color: #FF0000;
	padding: 4px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

.inp {
	vertical-align: middle;
	background-color: rgb(255,0,0);
	padding: 5px;
}

.srinp {
	border: 1px solid rgb(0,0,0);
	/* [disabled]background-color: rgb(255,0,0);
*/
	padding: 5px;
	background-image: url(http://www.google.com/coop/images/google_custom_search_watermark.gif);
	background-repeat: no-repeat;
}

li.ql {
	font: 10pt/18px Verdana, Geneva, sans-serif;
	list-style: none;
	text-align: right;
	padding-right: 5px;
}

ul.ql {
	margin: 0px;
	padding: 0px;
}

a:link.ql, a:visited.ql {
	color: rgb(251,222,144);
	text-decoration: none;
	background-color: #CC0000;
	padding-top: 1px;
	padding-right: 3px;
	padding-bottom: 1px;
	padding-left: 3px;
}

a:hover.ql {
	color: rgb(204,0,0);
	text-decoration: none;
	background-color: #FBDE90;
	padding-top: 1px;
	padding-right: 3px;
	padding-bottom: 1px;
	padding-left: 3px;
}

a:active.ql {
	color: rgb(128,0,0);
	text-decoration: none;
	padding-top: 1px;
	padding-right: 3px;
	padding-bottom: 1px;
	padding-left: 3px;
}

.q {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10pt;
	text-align: center;
	margin-top: 10px;
	padding-top: 10px;
}

.header {
	text-align: center;
	vertical-align: middle;
	padding-top: 68px;
	padding-bottom: 18px;
}

.header img {
	vertical-align: middle;
	width: 80%;
	max-width: 650px;
	/* [disabled]margin-top: 40px;
*/
}

.pgegrp {
	/* [disabled]width: 960px; */
	margin-right: auto;
	margin-left: auto;
}

.content {
	width: 940px;
	float: left;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}

ul.nav li {
	border-bottom: 1px solid #666; /* this creates the button separation */
}

ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 15px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
	text-decoration: none;
	background: #C6D580;
}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background: #ADB96E;
	color: #FFF;
}

/* ~~ The footer ~~ */
.footer {
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	padding: 10px 0 10px 0;
	width: 100%;
}

footer img.footimg {
	width: 28%;
	max-width: 345px;
}

footer .footspace {
	width: 5%;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}

.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}

.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* Page intro classes */
table.intro {
	width: 60%;
	background-color: rgb(255,0,0);
	border-collapse: collapse;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

td.intro {
	text-align: center;
	color: rgb(0,0,0);
	border-top: 3px double rgb(0,0,0);
	border-bottom: 3px double rgb(0,0,0);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22pt;
	font-weight: bold;
	font-variant: small-caps;
}

tr.intro {
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 3pt;
}

.pintro {
	font: bold 1.5em Verdana, Geneva, sans-serif;
	text-align: left;
	/* [disabled]clear: both; */
}

#minorities .pintro {
	clear: both;
	border-top: solid 1px #000;
	padding-top: 10px;
	padding-bottom: 10px;
}

#minorities .imglt {
	margin-bottom: 10px;
}

p.aat {
	font: bold 12pt Verdana, Geneva, sans-serif;
	text-align: center;
}

p {
	font: 1.1em Verdana, Geneva, sans-serif;
}

#linorm {
	font: 12pt/normal Verdana, Geneva, sans-serif;
}

.linorm {
	font: 12pt/normal Verdana, Geneva, sans-serif;
}

p.seeals {
	font: 12pt Verdana, Geneva, sans-serif;
	text-align: left
}

p.contents {
	font: 10pt Verdana, Geneva, sans-serif;
	text-align: center
}

a:link.contents, a:visited.contents {
	color: rgb(0,0,255);
	text-decoration: underline
}
/* a:visited.contents { font: 10pt Arial; color: rgb(128,0,0); text-decoration: underline } */
a:hover.contents , a:active.contents{
	color: rgb(0,51,102);
	text-decoration: none
}

.pageintro {
	text-align: center;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 15px;
	margin-left: auto;
	font: bold 14pt Verdana, Geneva, sans-serif;
}

.secintro {
	text-align: center;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	font: bold 12pt Verdana, Geneva, sans-serif;
}

#nav {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

#nav p {
	font: small-caps 1em Verdana, Geneva, sans-serif;
	text-align: center;
	padding-left: 0;
}

div.navl {
	width: 70%;
	float: left;
	margin-left: 1%;
}

div.navr {
	background-color: #CC0000;
	background-image: url(http://www.ibiblio.org/chinesehistory/images/back_hlc.png);
	background-repeat: repeat-y;
	background-position: right;
	text-align: right;
	padding: 5px 12px 5px 5px;
	margin-right: 2%;
	/* [disabled]width: 140px; */
	float: right;
	width: 18%;
}

a:link.nav {
	color: rgb(0,0,255);
	text-decoration: none;
	padding: 1px 3px 1px 3px;
}

a:visited.nav {
	color: rgb(0,0,255);
	text-decoration: none;
	padding: 1px 3px 1px 3px;
}

a:hover.nav {
	color: rgb(185,42,38);
	text-decoration: none;
	padding: 1px 3px 1px 3px;
}

a:active.nav {
	color: rgb(185,42,38);
	text-decoration: none;
	padding: 1px 3px 1px 3px;
}

.v2h {
	font: 9pt Verdana, Geneva, sans-serif;
	text-align: left
}

#rotator {
	background: url(http://www.ibiblio.org/chinesehistory/images/rotator.php) no-repeat center top;
	width: 700px;
	height: 150px;
}

#share-buttons img {
	width: 32px;
	padding: 2px;
	border: 0;
	box-shadow: 0px;
	display: inline;
}

#scroll-to-top {
	display: none;
	position: fixed;
	bottom: 73px;
	right: 80px; /* right: 100px; */
	width: 100px;
	height: 25px;
	/* [disabled]font: 9pt Verdana, Geneva, sans-serif; */
	text-decoration: none;
	background-color: rgb(204,0,0);
	border-radius: 5px;
	box-shadow: 1px 1px 1px #333;
	text-align: center;
	padding-top: 12px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	font-size: 0.7rem;
}

#scroll-to-top a:link {
	border-radius: 5px;
	color: #FBDE90;
	text-decoration: none;
	background-color: #CC0000;
	padding: 4px;
}

#scroll-to-top a:hover {
	border-radius: 5px;
	color: rgb(204,0,0);
	text-decoration: none;
	background-color: #FBDE90;
	padding: 4px;
}

.datatable {
/*	width: 100%;	*/
	margin-right: 15px;
	margin-left: 15px;
	border: 5px solid #C00;
	border-collapse: separate;
	background-color: #FBDE90;
	border-radius: 10px;
	border-spacing: 0px;
}

.datatable td {
	border-top: 1px solid #C00;
	padding: 3px;
	/* [disabled]border-collapse: collapse; */
}
.datatable th.col {
	border-top: 1px solid #C00;
	padding: 3px;
	color: #FBDE90;
	width: 50%;
}

.datatable th {
	background-color: #C00;
	text-align: left;
	padding: 3px;
}

table.imglt {
	width: 20px;
	border-collapse: collapse;
	margin-top: 1px;
	margin-right: 8px;
	margin-bottom: 1px;
	margin-left: 15px;
	border: 1px solid #000;
	/* [disabled]clear: right; */
	/* [disabled]float: left; */
}

table.imgrt {
	width: 20px;
	border-collapse: collapse;
	margin-top: 1px;
	margin-right: 15px;
	margin-bottom: 1px;
	margin-left: 8px;
	border: 1px solid #000;
	/* [disabled]clear: left; */
	/* [disabled]float: right; */
}

table.imglg {
	width: 95%;
	border-collapse: collapse;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 15px;
	padding: 3px;
	border: 1px solid #000;
}

td.imgittb {
	font: 10pt Arial;
	vertical-align: top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 0px;
	padding-left: 3px;
}

div.jquery-image-zoom {
	line-height: 0;
	font-size: 0;
	z-index: 10;
	border: 5px solid #C00;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	margin: 10px;
}

div.jquery-image-zoom a {
	background: url(http://www.ibiblio.org/chinesehistory/images/jquery.imageZoom.png) no-repeat;
	display: block;
	width: 25px;
	height: 25px;
	position: absolute;
	left: -17px;
	top: -17px;
*left: auto;
*right: -17px;
	text-decoration: none;
	text-indent: -100000px;
	outline: 0;
	z-index: 11;
}

div.jquery-image-zoom a:hover {
	background-position: left -25px;
}

/* Size of the image within the expanded div */
div.jquery-image-zoom img, div.jquery-image-zoom embed, div.jquery-image-zoom object, div.jquery-image-zoom div {
	width: 100%;
	height: 100%;
	margin: 0;
}