/*
 * KidsWrite stylesheet (base)
 * Version: 1.0
 * Author: Shaun Tarves
 */

/* RESET */
/* @import url(/assets/css/reset.css); */
@import url(http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css);


/* LAYOUT */
.clear { clear: both; }
.clearer { clear: both; display: block; margin: 0px; padding: 0px; height: 0px; line-height: 1px; font-size: 1px; }

img { behavior: url(/assets/css/iepngfix.htc); }
img.left { float: left; margin: 2px 20px 10px 0px; }
img.right { float: right; margin: 2px 0px 10px 20px; }
img.across { margin: 2px 0px 16px 0px; }

#custom-doc {
	margin: auto; text-align: left; /* leave unchanged */
	width: 980px;/* non-IE 75.39em*/
	*width: 980px;/* IE 73.50em*/
	min-width: 980px;/* optional but recommended */
}
#container { width: 100%; position: relative; background-color: #ffffff; }
#main { width: 100%; position: relative; }
#content {
	padding: 10px 20px;
	position: relative;
	color: #333333;
	font-size: 85%!important;
}

/* TYPE */
html { background: #afdc62 none repeat scroll 0%!important; color: #333333; }
body {
	font-family: verdana!important;
}

a, a:visited, a:active { color: #0879c2; text-decoration: none; }
strong, b { font-weight: bold; }
em, i { font-style:i italic; }

#main p { margin-bottom: 8px; }
#main h1 { font: 22px Tahoma, "Lucida Grande", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 26px; margin-bottom: 10px; }
#main h2 { font: 18px Tahoma, "Lucida Grande", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 20px; margin-bottom: 10px; }
#main h3 { font: 16px Tahoma, "Lucida Grande", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 20px; margin-bottom: 10px; }
#main h4 { font: 12px Tahoma, "Lucida Grande", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 16px; margin-bottom: 8px; }
#main h5 { font: 10px Tahoma, "Lucida Grande", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 14px; margin-bottom: 8px; }

.blue { color: #21a5ff; }

/* LISTS */
ul, ol { list-style: none; }

#content ul { margin-bottom: 8px; list-style: disc outside; }
#content ol { margin-bottom: 8px; list-style: decimal outside; }
#content ul li, #main ol li { margin-left: 18px; }

/* FOOTER */
#footer {
	padding-top: 15px;
	width: 100%;
	background: transparent url(/assets/img/footer-bg.png) no-repeat scroll 0px 0px;
	font-size: 77%;
}
	#footer p.left { width: 50%; float: left; text-align: left; text-indent: 10px; }
	#footer p.right { width: 50%; float: right; text-align: right; }
	#footer a { margin: 0px 2px; text-decoration: none; }
	#footer a:hover { text-decoration: underline; }

/* HEADER */
#header {
	width: 100%; height: 125px;
	position: relative;
	background: transparent url(/assets/img/header-bg.png) no-repeat scroll 0px 0px;
}
	#logo {
		position: absolute; top: 0px; left: 100px;
		display: block; height: 113px; width: 295px;
		background: transparent url(/assets/img/logo.png) no-repeat scroll 0px 0px;
		text-indent: -9999px;
	}
	
	#header #sitenav { width: 550px; position: absolute; bottom: 0px; right: 10px; }
		#header #sitenav li { display: inline; }
			#header #sitenav li a { 
				margin-left: 2px;
				display: block; height: 74px; width: 89px;
				float: right;
				overflow: hidden;
				text-indent: -9999px;
				background: transparent url(/assets/img/sitenav.png) no-repeat scroll;
			}
			#header #sitenav #sn-about a { background-position: -97px 0px; }
			#header #sitenav #sn-forkids a { background-position: -188px 0px; }
			#header #sitenav #sn-forschools a { background-position: -279px 0px; }
			#header #sitenav #sn-corner a { background-position: -370px 0px; }
			#header #sitenav #sn-cafe a { background-position: -461px 0px; }
			
			#header #sitenav #sn-about a:hover, #header #sitenav #sn-about a:active, #header.about #sitenav #sn-about a { background-position: -97px -74px; }
			#header #sitenav #sn-forkids a:hover, #header #sitenav #sn-forkids a:active, #header.forkids #sitenav #sn-forkids a { background-position: -188px -74px; }
			#header #sitenav #sn-forschools a:hover, #header #sitenav #sn-forschools a:active, #header.forschools #sitenav #sn-forschools a { background-position: -279px -74px; }
			#header #sitenav #sn-corner a:hover, #header #sitenav #sn-corner a:active, #header.corner #sitenav #sn-corner a { background-position: -370px -74px; }
			#header #sitenav #sn-cafe a:hover, #header #sitenav #sn-cafe a:active, #header.cafe #sitenav #sn-cafe a { background-position: -461px -74px; }