html, body
{
	margin:0;
	padding:0;
	background-attachment: fixed;
		background-image: url(../images/bgimage.gif);
		background-repeat: repeat;
		background-position: right top; 
		background-color:#88AA88;
	
	font-family:verdana;
	font-size: 10pt;
	overflow-y: hidden;
}

li { list-style-type: none; }

a:active 
{
	color: yellow;
	text-decoration: none;
	}
	a:link 
	{
		text-decoration: none;
	}
	a:visited 
	{
		text-decoration: none;
	}
	a:hover
	{
		color: #0000EE;
		text-decoration: underline;
	}
	a img 
	{
		border: none; 
}

.header{
	position: relative;
	z-index: 20;
	margin: 0 auto;
	text-align: center;
}
	


.middlecontent 
{
	position: relative;
	z-index: 20;
	text-align: center;
	margin: 0 auto;
	/*height: 35vh;*/
	overflow: hidden;
	}
	#dragon 
	{	 
		max-height: 20vh;
		width: auto;
	}
	#qinglong 
	{	 
		max-height: 8vh;
		width: auto;
	}
	.middlecontent a 
	{
		font-size:10pt;
		color:#ffffff;
		font-family:verdana;
	}

#newFeatures
{
	position: absolute;
	max-width: 25em;
	left: 6em;
	top:  8em;
}

.indexsearchcontainer
{
	display: inline-block;
	margin: 0 auto; 
	}
.indexsearch 
{
	position: relative;
	z-index: 20;
	text-align: center; 
	margin: 2em;
	height: 20vh;
	}
	.indexsearch table 
	{
		margin: 0 auto;
	}
.searchbar{
	display:table;
	text-align: center;
	width:650px;
	
	background:#FFF;
	padding: 0.5em 0.6em;
	
	-moz-border-radius:0.7em;
	-webkit-border-radius:0.7em;
	border-radius:0.7em;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
	}
	.searchbar * {
	vertical-align: middle;
	}
	#searchbartext{
		display:table-cell;
		width:80%;
		font-size: 2em;	
		border: 0px;
		padding: 0.1em 0.1em;
		font-weight:bold;
	}
	#searchbutton{
		display:table-cell;
		border:none;
		width:19%;	
		background-image: url(../images/bgimage.gif);
		background-color:#88AA88;
		cursor: pointer;
		
		color: #FFF;
		font-size: 1.2em;
		font-weight: bold;
	
			-moz-border-radius:0.5em;
		-webkit-border-radius:0.5em;
		border-radius:0.5em;
		border: 1px solid black;
					

	}
	#searchbutton:hover { border: 2px solid black;	}
	#searchbutton:active 
	{	
		border: 1px solid black;
		font-size: 1.1em;
	}
	.settingslockcont 
	{
			text-align: left; 
			float: left;
			top: 0px;
			left: 0px;
			padding: 5px;
			}
			.settingslock{

				color:#783F04;
			}
		.settingscont {
			text-align: right; 
			float: right;
			top: 0px;
			left: 0px;
			min-height: 25px;
			margin-left: 0.5em; 
			}
			 .settings, #pinyinnotones{
				text-align: center;
				padding: 3px 7px;
				background: #ffd;
				
				-moz-border-radius:0.5em;
				-webkit-border-radius:0.5em;
				border-radius:0.5em;
				
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				text-decoration: none;
				
				color: #222; 
				font-family:verdana;
				text-align: center;
				font-size: 10pt;
				margin-left: 1em;
				border: 0;
				margin: 0;				
				padding: 0;
				height: 1.5em;
				display: table-cell; 
				vertical-align: middle;
			}
			#settingspopup { padding: 0 0.5em; }
			a.settingspopup:link, #pinyinnotones:link {	text-decoration: none; color: #222;}
			a.settingspopup:hover, #pinyinnotones:hover { color: #575; }
			a.settingspopup:active, #pinyinnotones:active {	font-style: italic; }
			.topbartogglecont
			{
				text-align: left;
				}
				.topbartoggleinnercont
				{
					background: #ffd;
					-moz-border-radius:0.5em;
					-webkit-border-radius:0.5em;
					border-radius:0.5em;
					padding: 0.5em 1em;
				}
				.topbartoggle
				{
					}
					.topbartoggle a
					{
						padding: 2px 12px;				
						background: #ffd;
						-moz-border-radius:1em;
						-webkit-border-radius:1em;
						border-radius:1em;
						text-decoration: none;
						color: #000;
				}

.contacttext
{
	margin: 0 auto;
	text-align: center;
}


.ribbon
{
	z-index: 50;	
	position: fixed; 
	top: 80px;
	right: 0;
	width: 200px;
	padding: 10px 5px 0px 5px;
	margin-right: 10px;

	max-height: 350px;
	overflow-y: scroll;
	
	background-color:#D6C79F;
	
	
	-moz-border-radius:0.5em 0.5em 0em 0em;
	-webkit-border-radius:0.5em 0.5em 0em 0em;
	border-radius:0.5em;
	
	cursor: default;
	text-align: center;
	}
	.ribbon > ul
	{
		text-align: left;	
	}
	.ribbon > ul > li
	{
		margin-bottom: 0.2em;
	}
	.ribbon > ul > li::after
	{
		display: block;
		content: "---";
	}


.cookienotification {
	position: absolute;
	bottom: 0%;
	right: 0%;
	z-index: 100;
	overflow: hidden;
}