/**
 * @file
 * WWWenlin layout method
 * Belongs here: /public_html/sites/all/themes/wwwenlin/layout.css
 */

/* TODO: Equal-height column layout:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://css-tricks.com/fluid-width-equal-height-columns/
http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

http://drupal.stackexchange.com/questions/58614/how-do-i-create-a-custom-search-block
 */

html { height:100%; }

body {
	margin:0;
	padding:0;
	height:100%;
	/* Note: we prefer a font that includes all pinyin letters, like ǚ. This seems to be
	   true of Baskerville for Mac, and Times New Roman for Windows. */
	font-family: Baskerville, "Times New Roman", serif;
	color: #111; /* almost black */
	background-color: #b7ba7e; /* green. Same as sidebar-first, so extends to bottom of page */
}

#sidebar-first {
	float: left;
	box-sizing: border-box;
	left: 0;
	top: 0;
	width: 20%;
	margin: 0;
	padding: 1em;
	padding-left: 0;
	text-align: right;
	list-style-type: none;
	font-size: 150%;
	background-color: #b7ba7e; /* green; may be redundant if same as body */
}

#sidebar-first a {
	text-decoration: none !important;
	color: #111; /* almost black */
}
#sidebar-first a:hover {
	text-decoration: none !important;
	color: #e43b16; /* red as in seal */
}
#sidebar-first a:active {
	text-decoration: none !important;
	color: #e43b16 !important;	/* red as in seal */
}
a, a:link, a:hover, a:visited {
	text-decoration: none !important;
}

a.active {
	text-decoration: none !important;
	color: #e43b16 !important;	/* red as in seal */
}

.language-switcher-locale-url {
	font-size: 67%;
}

/* main division (not sidebar) */
#nihao {
	background-color: #fffcdf; /* off-white */
	float: left;
	box-sizing: border-box;
	margin-left: 20%;
	width: 80%;
	/* height: 100%; */
	min-height: 100%;
	padding: 2em;
	margin: 0px
}

#nihao a {
	color: #e43b16;	/* red as in seal */
}

#sidebar-first ul,
#sidebar-first ul li.expanded ,
#sidebar-first ul li.collapsed,
#sidebar-first ul li.leaf,
#sidebar-first li,
#sidebar-first li.expanded,
#sidebar-first li.collapsed,
#sidebar-first li.leaf {
	list-style-type: none;
	list-style-image: none;
	text-align: right;
	padding: 0;
}

/* To make the logo right-justified in the sidebar, we use "float: right"; but that would make
	 the following text wrap around it, so we also need to follow the image with an empty
	 div (maybe containing nbsp), with "clear:both" -- see div.after-sidebar-logo below. */
img.sidebar-logo {
	float: right;
	text-align: right;
}

/* See comment for img.sidebar-logo above. */
div.after-sidebar-logo {
	font-size: 10%;
	clear: both;
}

img.regular-tree {
	float: right;
}

img.unicode-logo {
	margin-top: 1em;
	margin-bottom: 0;
}

img.social-logo {
	margin-top: 0;
	margin-bottom: 0;
}

p.social-logos {
	margin-top: 0;
	margin-bottom: 0;
}

img.wenlin-image-main-page { /* displayed in the name-and-slogan area on main page */
	display: block;
	margin-left: auto;
	margin-right: auto;
	/* margin-top: 3em; */
	/* margin-bottom: 3em; */
}

#name-and-slogan {
	/* experimental stuff:
 	background-image: url(trees_large_crop_green.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	*/
}

#copyright {
	font-size: 50%;
}

h1.title {
	color: #e43b16; /* red as in seal */
	font-weight: normal; 
	font-size: 300%;
}

blockquote.mission { /* Mission statement on About Us page */
	font-style: italic;
}