body { background: url(../img/bg-body.gif) repeat-x; }
#header { background: url(../img/bg-header.gif) no-repeat; min-width: 900px; width: 95%; height: 100px; margin: 0 auto; }
	#header-nav {
		position: relative;
		height:54px;
		width: 401px;
		top: 25px; left: 450px;
		overflow: visible;
		background: url(../img/nav.gif) no-repeat;
	}
		#header-nav li {
			float: left;
		}
			#header-nav li a {
				position:absolute; 
				text-indent:-9999px; 
				text-decoration:none;
				border:none !important; 
				top:0; 
				height:54px;
				background-repeat: no-repeat;
			}
			#header-nav li.nav-home a      { left:     0; width:  99px; background: url(../img/nav.gif)      0 0; }
			#header-nav li.nav-hints a     { left:  99px; width:  86px; background: url(../img/nav.gif)  -99px 0; }
			#header-nav li.nav-tutorials a { left: 185px; width: 115px; background: url(../img/nav.gif) -185px 0; }
			#header-nav li.nav-about a     { left: 300px; width: 101px; background: url(../img/nav.gif) -300px 0; }
				#header-nav li.nav-home a:hover      { background-position:      0 -54px; }
				#header-nav li.nav-hints a:hover     { background-position:  -99px -54px; }
				#header-nav li.nav-tutorials a:hover { background-position: -185px -54px; }
				#header-nav li.nav-about a:hover     { background-position: -300px -54px; }
				#header-nav li.nav-home a.on      { background-position:      0 -108px; }
				#header-nav li.nav-hints a.on     { background-position:  -99px -108px; }
				#header-nav li.nav-tutorials a.on { background-position: -185px -108px; }
				#header-nav li.nav-about a.on     { background-position: -300px -108px; }

#wrap { 
	min-width: 900px;
	width: 95%;
	margin: 0 auto;
	overflow: auto;
}

#side { 
	width: 170px;
	float: right;
	padding: 0 10px;
	}
	#side dl { font-size: .95em; }
		#side dl dt { margin: 0; }
		#side dl dd { padding: 0 0 0 1.5em; border-top: 1px solid #ddd; background: url(../img/bg-sidebar-dd.gif) 2px 5px no-repeat; }
			#side dl dd:hover { background-position: 2px -46px; }
			#side dl dd a { display: block; margin: 0; padding: .5em 0; line-height: 1.1em; }

#main {
	min-width: 690px;
	margin: 0 210px 0 10px;
	border-right: 1px solid #ddd;
	padding: 1px 10px 10px 0;
	font-size: 1.1em;
}

#banner {
	margin: 20px 0 0;
	padding: 0 !important;
	width: 100%;
	height: 150px;
	border-bottom: 5px solid #3997cb;
	background: #bdced5;
	}
	#banner dt, #banner dd {
		float: left;
		margin: 0;
		height: 150px;
		width: 50%;
		}
	#banner dt { text-align: left; }
	#banner dd { text-align: right; }
	
#banner.home      { background: url(../img/banner-home.jpg) top center no-repeat; }
#banner.hints     { background: url(../img/banner-hints.jpg) top center no-repeat; }
#banner.tutorials { background: url(../img/banner-tutorials.jpg) top center no-repeat; }
#banner.about     { background: url(../img/banner-about.jpg) top center no-repeat; }

#footer {
	background: url(../img/bg-footer.gif) repeat-x;
	text-align: left;
	}
	#footer-shadow {
		width: 900px;
		background: url(../img/footer-shadow.gif) no-repeat;
		padding: 20px 0;
	}
	#footer p { margin-left: 40px; }
		#footer strong { margin-left: 40px; color: #12367d; }

/* hints page */
#hints-nav {
	font-weight:700;
	padding:.5em;
	overflow:auto;
	height:1%;
	width: 100%;
		}
		#hints-nav a {
			color:#999;
			text-decoration:none;
			margin: 0;
			height:30px;
			padding: 0 10px 0 0;
			line-height:30px;
			float:left;
			display:block;
				}
				#hints-nav a span { padding: 0 0 0 10px; }
				#hints-nav a:hover {
					height:30px;
					line-height:30px;
					background:url(../img/bg-hints-nav-r.gif) right top no-repeat;
					padding-right:10px;
						}
						#hints-nav a:hover span {
							background:url(../img/bg-hints-nav-l.gif) left top no-repeat;
							height:30px;
							display:block;
							}

.all #hints-nav-all,
.sites #hints-nav-sites,
.text-editor #hints-nav-text-editor,
.preview #hints-nav-preview,
.css-editor #hints-nav-css-editor,
.terminal #hints-nav-terminal,
.books #hints-nav-books,
.ftp #hints-nav-ftp,
.hotkeys #hints-nav-hotkeys,
.bugs #hints-nav-bugs,
.misc #hints-nav-misc {
	height:30px;
	line-height:30px;
	background: url(../img/bg-hints-nav-r.gif) right bottom;
	padding-right:10px;
}

.all #hints-nav-all span,
.sites #hints-nav-sites span,
.text-editor #hints-nav-text-editor span,
.preview #hints-nav-preview span,
.css-editor #hints-nav-css-editor span,
.terminal #hints-nav-terminal span,
.books #hints-nav-books span,
.ftp #hints-nav-ftp span,
.hotkeys #hints-nav-hotkeys span,
.bugs #hints-nav-bugs span,
.misc #hints-nav-misc span {
	height:30px;
	display:block;
	background:url(../img/bg-hints-nav-l.gif) left -30px no-repeat;
	color: #fff;
}

/* tutorials page */
.tutorial { margin-bottom: 2em; }
.tutorial h3 { margin-bottom: 0; padding-bottom: 0; }
.tutorial h6 { margin: 0; padding: 0; }
.tutorial small { color: #999; display: block; margin: 0 0 2em; }

/* about page */
.speariaLogo { float: left; margin: 0 10px 5px 0; }

/* homepage form */
#home-form { width: 100%; margin: 0; }
#home-form span, #home-form span.notify { color: #d00; }
#home-form fieldset { background: #eaf2f5; }
#home-form legend { font-weight: 700 !important; font-size: 1.2em; background: transparent; }
#home-form label { width: 20%; font-weight: 700; float: left; clear: both; margin-bottom: .5em; }
#home-form input, #home-form textarea { width: 70%; float: left; margin-bottom: .5em; }
#home-form input.submit { width: 10em; float: right; clear: both; margin-right: 2em; }


/* generic styles*/
.clear {
	clear: both;
	height: 0;
	line-height: 0;
	}

.navigation {
	display: block;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 4em;
	}
	.navigation .alignleft { float: left; }
	.navigation .alignright { float: right; }

small { font-size: .95em; }

.entry small { 
	padding: 10px; 
	margin: 10px; 
	border: 1px solid #7ea2d1; 
	display: block; 
	background: #eaf2f5; 
	}
	
.alignLeft { text-align: left; }
.alignCenter { text-align: center; }
.alignRight { text-align: right; }

.firstColumnHalf { width: 50%; padding: 0 4% 2% 0; float: left; }
.secondColumnHalf { width: 38%; padding: 0 2% 2% 4%; float: left; border-left: 1px solid #ddd; }
	
/* rounded corner boxes */
.formMessage {
	margin: 20px 0;
	background: #e6fcc1;
	min-width: 300px;
	overflow: auto;
	}

	.formMessage .left { float: left; }
	.formMessage .right { float: right; }
	
	.formMessage p {
		margin: 0;
		clear: both;
		color: #6b9756;
		padding: 10px 20px 0 80px;
		font-size: 1.3em;
		font-weight: 700;
		background: url(../img/bigcheck.gif) 20px 0 no-repeat;
		min-height: 30px;
		}
	
	div.clear {
		clear: both;
		height: 0px;
		line-height: 0px;
		}