* {
	margin: 0;
	padding: 0;
	list-style: none;
}
body {
	font-size: 0.8em;
	background: url(../images/header-new.png) 170px 0 repeat-x;
}


/* GENERAL LAYOUT */


.content {
	width: 500px;
	padding: 310px 0 0 170px;
}
#nav {
	position: absolute;
	left: 0;
	top: 0;
	width: 330px;
	height: 190px;
	padding: 0;
	background: #fff url(../images/nav-drop.png) 100% 0 no-repeat;
}
.sidebar {
	position: absolute;
	left: 680px;
	top: 310px;
	width: 300px;
}
.logo {
	position: fixed;
	left: 24px;
	top: 214px;
	width: 107px;
	height: 75px;
	background: url(../images/logo.png);
}
.footer {
	position: relative;
	margin: 5em 0 0;
	padding: 0 1em;
	height: 180px;
	background: #999;
}


/* TEXT FORMATTING */


h1 {
	position: absolute;
	right: 10px;
	top: 195px;
	color: #666;
	font: 0.9em helvetica,sans-serif;
}
h2 {
	padding: 0 0 0.6em;
	color: #666;
	font: 1.8em helvetica,sans-serif;
}
h3 {
	padding: 0 0 0.6em;
	color: #c00;
	font: 1.4em helvetica,sans-serif;
}
h4 {
	padding: 0.2em 0 0.6em;
	color: #000;
	font: 1.1em helvetica,sans-serif;
}
p, ul {
	padding: 0 0 1em;
	color: #666;
	font: 1em/1.8em helvetica,sans-serif;
}
blockquote {
	margin: 0 0 0 20px;
	padding: 0 0 0 10px;
	border-left: 2px solid #c00;
}
blockquote p {
	margin: 0 0 1em;
	padding: 0;
}
.content ul, .content ol {
	padding: 0 0 2em 15px;
}
.content ul ul, .content ul ol {
	padding: 0 0 0 15px;
}
.content li {
	padding: 0 0 0 20px;
	color: #666;
	font: 1em/1.8em helvetica,sans-serif;
	background: url(../images/bullet.png) 0 7px no-repeat;
}
strong, em {
	font-style: normal;
	font-weight: normal;
}
.content a {
	color: #666;
	text-decoration: none;
	border-bottom: 2px solid #c00;
}
.content a:hover {
	color: #c00;
}
.content h3 a {
	color: #c00;
	font-size: 0.9em;
	border-color: #ccc;
}
.content h3 a:hover {
	border-color: #666;
}
.content li a {
	border-width: 0 0 1px;
}
.content a.plain, a img {
	border: 0;
}
.sidebar a {
	color: #666;
	text-decoration: none;
	border-bottom: 2px solid #ccc;
}
.sidebar a:hover {
	color: #000;
}
.thick {
	font-weight: bold;
}


/* NAVIGATION */


#nav li {
	width: 164px;
	margin: 0 0 3px;
}
#nav li#home {
	margin: 26px 0 3px;
}
#nav a {
	width: 164px;
	height: 19px;
	text-indent: -500em;
	display: block;
}
#home a {
	background: url(../images/nav-home.png) 100% 0 no-repeat;
}
#services a {
	background: url(../images/nav-services.png) 100% 0 no-repeat;
}
#portfolio a {
	background: url(../images/nav-portfolio.png) 100% 0 no-repeat;
}
#resources a {
	background: url(../images/nav-resources.png) 100% 0 no-repeat;
}
#contact a {
	background: url(../images/nav-contact.png) 100% 0 no-repeat;
}


/* SIDEBAR */


.sidebar ol {
	margin: 0 0 3em;
	padding: 5px 0 0 35px;
	background: url(../images/sidebar-backdrop.png);
}
.sidebar li {
	padding: 0 0 14px;
	color: #666;
	font: 1.1em/22px helvetica,sans-serif;
	list-style: decimal;
}


/* FOOTER */


.footer ul {
	position: relative;
	left: 200px;
	top: 60px;
	width: 535px;
	height: 28px;
	background: url(../images/brackets.png) 185px 0 no-repeat;
}
.footer li a {
	position: absolute;
	top: 0;
	height: 28px;
	text-indent: -500em;
	display: block;
}
.footer li.accessibility a:hover, .footer li.map a:hover, .footer li.contact a:hover {
	background-position: 0 100%;
}
.footer li.accessibility a {
	width: 165px;
	left: 0;
	background: url(../images/accessibility.png) no-repeat;
}
.footer li.map a {
	width: 117px;
	left: 214px;
	background: url(../images/site-map.png) no-repeat;
}
.footer li.contact a {
	width: 156px;
	left: 380px;
	background: url(../images/contact-me.png) no-repeat;
}
.footer a {
	color: #fff;
}
.footer a:hover {
	text-decoration: none;
}
.footer p {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 980px;
	color: #eee;
	font: 1em/1.4em arial,sans-serif;
	text-align: center;
}


/* FORMS */


form {
	padding: 0 0 3em;
}
fieldset {
	width: 460px;
	margin: 0 0 2em;
	padding: 18px;
	border: 2px solid #c00;
}
legend {
	padding: 0 0.5em;
	color: #c00;
	font: 1.2em helvetica,sans-serif;
}
input {
	width: 482px;
	padding: 5px 3px;
	color: #666;
	font: 1.2em helvetica,sans-serif;
}
textarea {
	width: 484px;
	height: 200px;
	padding: 3px;
	color: #666;
	font: 1.2em helvetica,sans-serif;
}
fieldset input {
	width: 450px;
}
fieldset textarea {
	width: 452px;
}
.button {
	width: 200px;
	margin: 0 2px 0;
	color: #000;
	float:left
}
.space {
	padding: 0 0 0 1em;
}
span.checkbox {
	width: 19px;
	height: 25px;
	padding: 0 5px 0 0;
	background: url(../images/checkbox.png) no-repeat;
	display: block;
	clear: left;
	float: left;
}
span.radio {
	width: 19px;
	height: 25px;
	padding: 0 5px 0 0;
	background: url(../images/radio.png) no-repeat;
	display: block;
	clear: left;
	float: left;
}
span.select {
	position: absolute;
	width: 158px;
	height: 21px;
	padding: 0 24px 0 8px;
	color: #fff;
	font: 12px/21px arial,sans-serif;
	background: url(../images/select.png) no-repeat;
	overflow: hidden;
}


/* SITE-WIDE CLASSES */


.accessible {
	display: none;
}
.left {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
}
.learn {
	padding: 1.2em 0 2em;
	font-size: 1.2em;
}
.tag {
	position: absolute;
	left: 200px;
	top: 190px;
	width: 334px;
	height: 38px;
	background: url(../images/tag.png);
}
.touch {
	font-size: 1.1em;
}
.portfolio {
	width: 220px;
	padding: 11px;
	background: url(../images/portfolio-drop.png) no-repeat;
	float: left;
}
.row {
	margin: 0 8px 0 0;
	clear: both;
}
.portfolio h3 {
	padding: 1em 0 0.4em;
	color: #333;
	font: 1.3em helvetica,sans-serif;
}
.portfolio a {
	border: 0;
	color: #c00;
}
.key {
	font: bold 1.3em monospace;
}
li .key {
	padding: 0 1em 0 0;	
}


/* MISCELLANEOUS CLASSES */


#webdesign {
	width: 325px;
	height: 28px;
	text-indent: -500em;
	background: url(../images/web-design-arizona.png) no-repeat;
}
#designservices {
	width: 325px;
	height: 28px;
	text-indent: -500em;
	background: url(../images/web-design-services.png) no-repeat;
}
#designportfolio {
	width: 325px;
	height: 28px;
	padding: 0 0 40px;
	text-indent: -500em;
	background: url(../images/web-design-portfolio.png) no-repeat;
}
#webresources {
	width: 325px;
	height: 28px;
	text-indent: -500em;
	background: url(../images/web-design-resources.png) no-repeat;
}
#webarticles {
	width: 325px;
	height: 28px;
	margin: 2em 0 0;
	text-indent: -500em;
	background: url(../images/web-design-articles-h.png) no-repeat;
}
#contactme {
	width: 325px;
	height: 28px;
	text-indent: -500em;
	background: url(../images/contact-me-h.png) no-repeat;
}
#usability {
	width: 490px;
	height: 28px;
	text-indent: -500em;
	background: url(../images/usability-and-accessibility.png) no-repeat;
}
#code {
	width: 490px;
	height: 28px;
	text-indent: -500em;
	background: url(../images/better-code-better-results.png) no-repeat;
}
#manage {
	width: 490px;
	height: 28px;
	text-indent: -500em;
	background: url(../images/manage-your-site.png) no-repeat;
}
h2.stageone {
	width: 500px;
	height: 200px;
	text-indent: -500em;
	background: url(../images/stage-one.png) no-repeat;
}
h2.stagetwo {
	width: 500px;
	height: 200px;
	text-indent: -500em;
	background: url(../images/stage-two.png) no-repeat;
}
h2.stagethree {
	width: 500px;
	height: 200px;
	text-indent: -500em;
	background: url(../images/stage-three.png) no-repeat;
}
h3.stages {
	width: 300px;
	height: 58px;
	text-indent: -500em;
	background: url(../images/stages.png) no-repeat;
}
h3.better {
	width: 300px;
	height: 58px;
	text-indent: -500em;
	background: url(../images/better.png) no-repeat;
}
h3.popular {
	width: 300px;
	height: 58px;
	text-indent: -500em;
	background: url(../images/popular-resources.png) no-repeat;
}
h3.design {
	width: 300px;
	height: 58px;
	text-indent: -500em;
	background: url(../images/web-design-articles.png) no-repeat;
}




h3.conjection {
	width: 300px;
	height: 58px;
	text-indent: -500em;
	background: url(../images/conjection-tracking.png) no-repeat;
}
.sidebar p {
	margin: 0 0 3em;
	padding: 10px 15px 10px 15px;
	background: url(../images/sidebar-backdrop.png);
}