@charset "utf-8";
/* CSS Document */
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;
	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: 15px;
	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. */
}
p {
	font-size: 1rem;
}
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;
}

/* background image randomizer */

.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");
}

/* If there needs to be text in any one of these boxes, it should be 10 pt Verdana, Geneva, sans-serif */

#title {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	background-color: #CC0000;
	/* [disabled]background-image: url(images/hback02.png); */
	padding-bottom: 10px;
}
.box {
	table-layout: fixed;
	width: 712px;
	height: 355px;
	background-color: rgb(255,0,0);
	border: 1px inset rgb(255,0,0);
	border-spacing: 3px;
	border-collapse: separate;
	margin-right: auto;
	margin-left: auto;
	padding: 5px;
}

tr.boxr1 {
	height: 120px;
}
#boxr1l {
	width: 120px;
	border: 2px inset rgb(255,0,0);
	/* [disabled]background-image: url(images/intro.expl.l.jpg); */
	/* [disabled]background-repeat: no-repeat; */
	height: 120px;
	float: left;
}
#boxr1r {
	width: 120px;
	border: 2px inset rgb(255,0,0);
	/* [disabled]background-image: url(images/intro.expl.r.jpg); */
	/* [disabled]background-repeat: no-repeat; */
	height: 120px;
	float: left;
}
#boxr1m {
	width: 460px;
	border: 2px inset rgb(255,0,0);
	text-align: center;
	/* [disabled]background-image: url(images/intro.expl.gif); */
	/* [disabled]background-repeat: no-repeat; */
	float: left;
	height: 120px;
	/* [disabled]background-position: -1px; */
}
tr.boxr2 {
	height: 80px;
}
#boxr2l {
	height: 160px;
	width: 340px;
	text-align: left;
	vertical-align: middle;
	border: 2px inset rgb(255,0,0);
	padding-top: 5px;
	float: left;
	padding-left: 8px;
}

#boxr2l img {
	padding-top: 6px;
	padding-bottom: 6px;
}
#boxr2r {
	/* [disabled]width: 363px; */
	font: 10pt Verdana;
	color: rgb(231,222,189);
	text-align: center;
	border: 2px inset rgb(255,0,0);
	float: right;
	height: 150px;
	padding-top: 15px;
}

p.index {
	margin-top: 5px;
}
td.boxr2f {
	width: 180px;
	font: 10pt Verdana;
	color: rgb(231,222,189);
	text-align: center;
	vertical-align: bottom;
}
#boxr3 {
	float: left;
	height: 45px;
	text-align: left;
	vertical-align: middle;
	border: 2px inset rgb(255,0,0);
	padding-top: 10px;
	padding-left: 8px;
	width: 700px;
}

#sm {
	float: left;
}

#sh {
	float: right;
	padding-right: 8px;
}

#boxr3r {
	width: 100%;
	color: rgb(231,222,189);
	text-align: left;
	vertical-align: middle;
	border: 2px inset rgb(255,0,0);
	height: 45px;
	padding-left: 10px;
}
#contentMain {
	/* [disabled]position: relative;
*/
	/* [disabled]float: left; */
	width: 94%;
	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: 10px;
	padding-right: 10px;
	padding-bottom: 25px;
	padding-left: 10px;
	margin: 20px auto 20px auto;
}
#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 {
	width: 90%;
	margin: 0 auto;
	background-color: #FBDE90;
	background-image: url(images/bg_texture.gif);
	background-repeat: repeat;
}
.header {
	text-align: center;
	vertical-align: middle;
	padding-top: 10px;
	margin: 0 2% 0 2%;
	/* [disabled]padding-bottom: 10px; */
}
.header img {
	vertical-align: middle;
	width: 100%;
	max-width: 894px;
}
#hlc {
	background-color: #CC0000;
	float: right;
	margin: 5px;
	background-image: url(images/back_hlc.png);
	background-repeat: repeat-y;
	background-position: right;
	text-align: right;
	padding-top: 5px;
	padding-right: 7px;
	padding-bottom: 5px;
	padding-left: 5px;
}

li.ql {
	font: 10pt/20px Verdana, Geneva, sans-serif;
	list-style: none;
	text-align: right;
	width: 150px;
	/* [disabled]padding-right: 5px; */
	display: block;
}
ul.ql {
	margin: 0px;
	padding: 0px;
}
a:link.ql , a:visited.ql{
	color: #FBDE90;
	text-decoration: none;
	background-color: #CC0000;
	padding-top: 1px;
	padding-right: 3px;
	padding-bottom: 1px;
	padding-left: 3px;
}
#hlc a {
	padding-right: 3px;
	font-size: .9rem;
}

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;
}
/* ~~ 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%;
}

<!-- Tble of Contents -->

nav {
  width: 100%;
  background-color: #C00;
  margin: auto;
  text-align: center;
  padding: 10px 5px;
}
nav a {
  border: 1px solid #000;
  background: #c00;
  transition: background .5s;
  color: #FBDE90;
  text-decoration: none;
  padding: 1%;
  display: inline-flex;
}
nav a:hover {
  background: #FBDE90;
  color: #C00;
  text-decoration: underline;
  text-decoration-skip: ink;
}
nav a:target {
  background: #c00;
}

article {
  width: 80%;
  margin: 0 auto;
  padding-top: 5px;
  position: relative;
}
article section.column {
  position: absolute;
  top: 65px;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s;
  width: 100%;
  padding: 0 5%;
  background-color: #c00;
  border-radius: 5px;
  padding: 1px;
}
article section.column:target {
  opacity: 1;
  z-index: 9999;
}
article section.column h1 {
  font-size: 1.5em;
  text-align: center;
  padding-bottom: 6%;
  /*
  top: 0;
  position: relative;
  -webkit-transform: translateY(300%) rotate(-90deg);
  -webkit-transform-origin: left bottom;
  -moz-transform: translateY(300%) rotate(-90deg);
  -moz-transform-origin: left bottom;
  -o-transform: translateY(300%) rotate(-90deg);
  -o-transform-origin: left bottom;
  transform: translateY(300%) rotate(-90deg);
  transform-origin: left bottom;
  */
}

ul {
  padding-left: 0;
  margin-top: -30px;
}

.chap li {
  list-style: none;
  font-size: 1em;
  margin: 0 auto;
  text-align: center;
  padding: 1% 0;
  width: 90%;
  display: block;
  border-radius: 5px;
}
.chap li:hover {
  background: #FBDE90;
  color: #C00;
  text-decoration: underline;
  text-decoration-skip: ink;
  transition: background 0.2s;
}


#one figure {
	background-color: #CC0000;
}
#one {
	margin: 10px auto 20px auto;
}

#one figure a {
	padding: 5px;
}
table.indextoc {
	border: 2px solid rgb(0,0,0);
	width: 100%;
	margin-bottom: 20px;
}

td.indextocr1 {
	height: 292px;
	width: 25%;
	border: 1px solid rgb(0,0,0);
	vertical-align: top;
	padding: 5px;
}

#one h2 {
	font-family: "Trebuchet MS", Verdana, Geneva, sans-serif;
}


#one figure {
	margin: 5px;
	text-align: center;
	border: 5px solid #CC0000;
}

td.indextocr2 {
	height: 292px;
	width: 50%;
	border: 1px solid rgb(0,0,0);
	vertical-align: top;
	text-align: center;
	font: 14pt Arial;
	padding: 5px
}
td.indextocr3 {
	width: 100%;
	border: 1px solid rgb(0,0,0);
	vertical-align: top;
	text-align: center;
	font: 14pt Arial;
	padding: 5px
}
.toctit {
	font: 14pt Arial, Helvetica, sans-serif;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
.tocul {
	font: 10pt Arial, Helvetica, sans-serif;
	background-color: #CC0000;
	padding: 3px;
	/* [disabled]list-style-type: none; */
}
.tocli {
	line-height: 27pt;
	/* [disabled]display: inline-block; */
	float: none;
	list-style-type: none;
	text-align: center;
}
.cent {
	text-align: center;
}

@media screen and (min-width: 800px) {
	#onesmall {
		display: none;
	}
}

@media screen and (max-width: 800px) {
	#one {
		display: none;
	}
	
	#onesmall {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		font-family: Verdana, Geneva, sans-serif;
		font-size: 1em;

	}
	
	#onesmall h2, #onesmall ul, #onesmall li {
		text-align: center;
	}
	
	#onesmall a {
		padding: 2%;
		display: grid;
		text-decoration: underline;
		text-decoration-skip: ink;
		font-family: Verdana, Geneva, sans-serif;
		color: #c00;
		text-align: -webkit-center;
	}
	
	#stocHis, #stocCul, #stocPol, #stocEar, #stocFea, #stocApp {
		width: 49.54%;
	}
	
	#stocSupp {
		width: 99.5%;
		text-align: center;
		margin-bottom: 6%;
	}
	
	#stocHis, #stocCul, #stocPol, #stocEar, #stocFea, #stocApp, #stocSupp {
		border: 1px solid #c00;

	}
	
	#onesmall ul {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}
	
	#onesmall li {
		list-style: none;
	}
	
}

#one img {
	width: 90%;
}

.hosted {
	text-align: center;
}

.statcounter img {
	width: 10%;
}
	
	table.datindex {
		font-size: 1rem;
	}

a:link.contents , a:visited.contents{
	width: auto;
	color: #FBDE90;
	white-space: nowrap;
	background-color: #CC0000;
	padding-top: 7px;
	padding-right: 7px;
	padding-bottom: 7px;
	padding-left: 7px;
	text-decoration: none;
	display: inline;
}
/* a:visited.contents { font: 10pt Arial; color: rgb(128,0,0); text-decoration: underline } */
a:hover.contents {
	width: auto;
	background-color: #FBDE90;
	color: #CC0000;
}
a:link.norm , a:visited.norm {
	color: rgb(0,0,255);
	text-decoration: underline
}
/* a:visited.contents { font: 10pt Arial; color: rgb(128,0,0); text-decoration: underline } */
a:hover.norm {
	color: rgb(0,51,102);
	text-decoration: none
}
a:active.norm {
	color: rgb(128,0,0);
	text-decoration: none
}
#rotator {
	background: url(/chinesehistory/images/rotator.php) no-repeat center top;
	width: 700px;
	height: 150px;
}

figure figcaption .ap-caption {
	display: none;
}