* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ie-box-sizing: border-box }

body {
	margin: 0px;
	background: #bbb url(/media/img/graybg.jpg) center top;
	font-size: 16px; /* Base font size for whole page */
}

body, input {
	/* Font info from http://www.yale.edu/chinesemac/pages/fonts.html */
	font-family:
	"Open Sans", "Arial", /* This causes IE to display CJK+V in a Ming font */
	
	/* Ming Fonts first, just better display quality */
	"hanaminb","hanamina","nom na tong",
	"MingLiU-ExtB","PMingLiU-ExtB","SimSun-ExtB",

	serif,
	
	/* ios fonts */
	"STXihei", "Heiti TC", "Heiti SC",
	
	/* android fonts */
	"Noto Sans", "Noto Sans CJK", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans CJK JP",

	/* Then Other fallbacks */
	"han-nom gothic", "Han-Nom Gothic Supplement",
	"nom na tong", "nom na tong supplement"
	;
}

.pa {
	font-family: "STXihei", "Heiti TC", "Noto Sans CJK", "Noto Sans", "Han-Nom Gothic", arial;
}

.pa-convert {visibility:hidden}
.pa-converted {visibility:visible}
.pa-converted rt:hover {background:#eef;cursor:pointer;border-radius:4px}



.clearfix:after { content:""; display: block; clear: both }
.nom { /* nom font */ }
.radical { font-family: "Radicals Supplement" }
form { margin: 0px }
a { color: #22a }
a:hover { text-decoration: inherit }
a.link { color: #292 }
img {border: none }
.right { float: right }
.left { float: left }
.clear { clear: both }
.speech {cursor:pointer;border:none}

.level:hover { opacity: 0.5 }
.level { float: right; padding: 1px 8px; border-radius: 5px; margin-right: 5px; font-size: 80%; color: white; background: silver; text-decoration: none!important }
.level-0 { background: #f5f5f5; color: #f5f5f5 }
.level-1 { background: #4A0 }
.level-2 { background: #A04 }
.level-3 { background: #990 }
.level-4 { background: #000 }

#login-info {
	text-align: left;
	padding: 12px;
}

#language {
	text-align: center;
	background: #000;
	padding: 2px 0;
}
#language img { vertical-align: middle; margin: 0 2px }
#language a {
	color: white;
	font-size: 80%;
}

#settings-bar { background: black; color: white; padding: .5em 0; font-size: 75% }
#settings-bar .settings-box:first-child { margin-left: 10px }
#settings-bar .settings-box { display: inline-block; margin-left: 5px; padding: 2px 0; cursor: pointer; vertical-align: top }
#settings-bar .settings-box img { border-radius: 5px; border: 1px solid #bbb; vertical-align: top }
#settings-bar .settings-box:hover .settings-options { display: block;  }
#settings-bar .settings-options { position: absolute; display: none; z-index: 10; border: 1px solid black; min-width: 100px; font-size: 13px; background: #fff }
#settings-bar .settings-options a { display: block; color: black!important; text-decoration: none; padding: 2px 5px }
#settings-bar .settings-options a.selected { background: #AFC5DB!important; font-weight: bold!important }
#settings-bar .settings-options a:hover { background: #6C90B4!important }

#searchform {
	text-align: center;
	background: #000;
	padding: 8px 0 5px 0;
}
#searchform input.search-field {
	background: #fff;
	color: black;
	font-size: 95%;
	width: 180px;
	border: none;
	border-radius: 10px;
	height: 21px;
	padding: 2px 5px;
	outline: none;
}

#wrapper-content p { padding-right: 1em }
#background {
	/*max-width: 2000px;*/
	min-height: 100%;
	text-align: center;
}
#wrapper {
	position: relative;
	background: #303337;
	background: rgba(0,5,10,0.75);
	background: #303337\9; /*ie8 only*/
	margin: auto;
	text-align: left;
	width: 1000px;
	min-height: 100%;
	padding-bottom: 15px;
}

#wrapper-content {
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 50px;
}

hr, h1, #wrapper-content .fullwidth, .fullwidth{margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px}
hr {
	margin-top: 16px;
	margin-bottom: 16px;
	border: none;
	border-top: 1px solid #eee;
}
h1 {
	padding: 1em 0px 1em 0px;
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #ccc;
	background: #eee;
	text-align: left;
	font-weight: bold;
	font-size: 135%;
	margin-top: 0px;
}
h2 {
	margin: 1em 0px 1em 0px;
	font-weight: bold;
	font-size: 150%;
	background: #f3f3f3;
	padding: 1px 2px;
}

#wrapper-content-frame {
	float: right;
	margin-right: 15px;
	width: 775px;
	background: white;
	min-height: 550px;
}

@media screen and (min-width: 1280px) {
	#wrapper { width: 1100px }
	#wrapper-content-frame {
		width: 875px;
	}
}

#wrapper-menu a { color: #eee; text-decoration: none }
#wrapper-menu {
	text-align: left;
	width: 210px;
	color: #eee;
}
#wrapper-menu ul.menu {
	list-style: none;
	margin: 20px 0 0 0;
	padding: 0 0 30px 0;
}
#wrapper-menu ul.menu li {
	list-style: none;
	margin-top: 2px;
}
#wrapper-menu ul.menu li small {
	font-size: 80%;
	font-weight: normal;
}
#wrapper-menu ul.menu a:hover { color: white; background: #555 }
#wrapper-menu ul.menu a {
	display: block;
	font-weight: bold;
	padding: 0px 10px;
}

#footer {
	text-align: center;
	font-size: 80%;
	padding: 20px;
}
#footer a:hover { background: #666 }
#footer a {
	color: #fff;
	background: #777;
	background: rgba(88, 88, 88, 0.7);
	margin: 1px;
	padding: 5px 45px;
	line-height: 35px;
	text-decoration: none;
}

#messages { margin-left: -20px }
.message { margin: 0 10px 10px 10px; padding: 1em; background-color: lightskyblue; text-align: center; box-shadow: 0px 3px 10px silver }
.message-info { background-color: lightskyblue }
.message-info:before { content: url(/media/img/messagebox-info.png); margin-right: 1em }
.message-success { background-color: palegreen }
.message-success:before { content: url(/media/img/messagebox-success.png); margin-right: 1em }
.message-error { background-color: lightpink }
.message-error:before { content: url(/media/img/messagebox-error.png); margin-right: 1em }

/* Styles for mobile devices */
#wrapper-collapsed-menu {display: none}
#wrapper-mobile-menu {display: none}
.mobile-only {display: none}

@media screen and (max-width: 1024px) { /* max-width = width of #wrapper */
	body{background:#333}
	.mobile-not { display: none }
	.mobile-only { display: block }

	/* Example list: make columns better fit smaller displays */
	.example { width: 100px!important }
	.definition { max-width: 275px!important }

	/* Use webfonts on mobile devices */
	body, input {
		font-family:
		"Han-Nom Gothic Supplement", "han-nom gothic",
		"SimHei", "Microsoft JhengHei", "MS Gothic",
		"STXihei", "Heiti TC", "Heiti SC",
		"MingLiU-ExtB","PMingLiU-ExtB","SimSun-ExtB",
		"hanaminb","hanamina","nom na tong",
		sans-serif;
	}
	
	/* Mobile Layout */
	#wrapper {width: 100%}
	#wrapper-logo {display: none}
	#searchform {padding: 16px; background: rgba(0,0,0,0.3)}
	#searchform input{display:none}
	#searchform input.search-field{display: block; padding: 1em; width: 100%; border-radius: 2px}
	#settings-bar {padding: 1em 0;background: rgba(0,0,0,0.8)}
	#wrapper-collapsed-menu {display: block; position: relative; top: 0; width: 100%; height: 50px; background: #333}
	#wrapper-overlay {z-index:9000000000;display: none; opacity: 0; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3)}
	#wrapper-collapsed-menu::before {content: "Chunom.org"; position: absolute; left: 16px; color: white; line-height: 50px; font-size: 22px}
	#wrapper-collapsed-menu::after,
	#wrapper-overlay::after {content: "\D7"; font-size: 50px; display: block; position: absolute; top: 0; right: 0; width: 100%; line-height: 50px; height: 50px; text-align: right; background: #336; color: white}
	#wrapper-collapsed-menu::after {content: "≡"; font-size: 40px; padding-right: 8px; background: rgba(0,0,0,0.3)}
	#wrapper-content-frame {
		width: 100%;
		margin-top: 50px;
		margin-bottom: 50px;
		margin-right: 0px;
	}
	#wrapper-menu {
		position: fixed;
		z-index:9000000001;
		top: 0;
		bottom: 0;
		width: 280px;
		left: -280px;
		background: #336;
		overflow: auto;
	}
	#login-info,
	#wrapper-menu .menu a {padding: 8px 16px!important}
	#footer {background: #333 }
	
}