/* ############################ */
/*                   THE BASICS */
/* ############################ */

body {
	background: #fff;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font: 76% lucida grande, arial, sans-serif;
	color: #434749;
	}

strong { font-weight: bold; }

em { font-style: italic; }

a:link, a:visited {
	color: #84ac26;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color: #02a0c6;
	font-weight: bold;
}

/* ############################ */
/*               NAV AND HEADER */
/* ############################ */

#container {
	width: 740px;
	margin: 20px auto 0 auto;
	}

#header { position: relative; }

#header h1 a {
	display: block;
	float: left;
	margin: 0;
	text-decoration: none;
	text-indent: -4000px;
	width: 320px;
	height: 112px;
	background: #fff url(images/logo.jpg) no-repeat left top; }

#nav {
	margin: 29px -142px -18px 0;
	padding: 0;
	height: 83px;
	width: 276; }
	
#header > #nav {
	position: absolute;
	right: 0; 
	margin: 29px 0 0 0;
	padding: 0;
	height: 83px;
	width: 276px; }

#nav a { 
	width: 90px;
	height: 83px;
	display: block;
	padding: 0;
	margin: 0 0 0 3px;
	float: left;
	text-decoration: none;
	text-indent: -1000px; }

#nav a.end { margin: 0; }

#nav a:hover { background-position: 0 -83px; }

#nav a.active { background-position: 0 -166px; }

#about { background: #fff url(images/nav_about.jpg) no-repeat top left; }

#portfolio { background: #fff url(images/nav_portfolio.jpg) no-repeat top left; }

#services { background: #fff url(images/nav_services.jpg) no-repeat top left; }

#about_active { background: #fff url(images/nav_about.jpg) no-repeat top left; background-position: 0 -166px; }

#portfolio_active { background: #fff url(images/nav_portfolio.jpg) no-repeat top left; background-position: 0 -166px; }

#services_active { background: #fff url(images/nav_services.jpg) no-repeat top left; background-position: 0 -166px; }

#content {
	width: 740px;
	clear: left; }

/* ############################ */
/*                      SIDEBAR */
/* ############################ */

#sidebar {
	border-left: 1px solid #ccc;
	width: 275px;
	text-align: left;
	float: right; }

#sidebar p {
	margin: 5px 10px 8px 10px;
	padding: 0;
	font-size: small; }

#sidebar h2 {
	width: 275px;
	height: 275px;
	text-indent: -2100px;
	padding: 0;
	margin: 0 0 28px 0; }

/* ############################ */
/*                      CONTENT */
/* ############################ */

#main {
	width: 464px;
	margin: 0;
	float: left; }

#main p {
	text-align: left;
	margin: 5px 10px 8px 10px;
	padding: 0;
	font-size: small; }

#main h2 {
	width: 464px;
	height: 275px;
	margin: 0 0 28px 0; }

#main h3 {
	text-indent: -2100px;
	width: 464px;
	height: 24px;
	border-bottom: 1px solid #e5e5e5;
	margin: 50px 0 15px 0; }

/* ############################ */
/*     PAGE-SPECIFIC ATTRIBUTES */
/* ############################ */

#sidebar h3.contact {
	text-indent: -2000px;
	width: 159px;
	height: 23px;
	margin: 0 0 0 10px;
	background: transparent url(images/contact.jpg) no-repeat left top; }

#home #sidebar h2 { background: transparent url(images/tagline_home.jpg) no-repeat left top; }

#home #sidebar h3.allabout {
	text-indent: -2000px;
	width: 167px;
	height: 23px;
	margin: 20px 0 0 10px;
	background: transparent url(images/allabout.jpg) no-repeat left top; }

#home #sidebar h3.work {
	text-indent: -2000px;
	width: 153px;
	height: 23px;
	margin: 20px 0 0 10px;
	background: transparent url(images/work.jpg) no-repeat left top; }

#home #main h2 { background: transparent url(images/picture_home.jpg) no-repeat top left; text-indent: -2100px; }

#home #main img.righty { float: right; margin: 5px; padding: 5px; border: 1px solid #e5e5e5; }

#home #main h3.welcome {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/welcome.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#home #main h3.consider {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/whyconsider.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }


#story #sidebar h2 { background: transparent url(images/tagline_about.jpg) no-repeat left top; }

#story #sidebar p.quote { font-style: italic; width: 90%; }

#story #sidebar h3.told {
	text-indent: -2000px;
	width: 210px;
	height: 23px;
	margin: 20px 0 0 10px;
	background: transparent url(images/told.jpg) no-repeat left top; }

#story #sidebar h3.scare {
	text-indent: -2000px;
	width: 230px;
	height: 23px;
	margin: 20px 0 0 10px;
	background: transparent url(images/please.jpg) no-repeat left top; }

#story #sidebar ul { list-style: circle; }

#story #sidebar li { font-size: small; }

#story #main h2 { background: transparent url(images/picture_about.jpg) no-repeat top left; text-indent: -2100px; }

#story #main h3.alittle {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/aboutus.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#story #main h3.thoughts {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/ourthoughts.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#folio #sidebar h2 { background: transparent url(images/tagline_portfolio.jpg) no-repeat left top; }

#folio #sidebar h3.size {
	text-indent: -2000px;
	width: 224px;
	height: 23px;
	margin: 20px 0 0 10px;
	background: transparent url(images/size.jpg) no-repeat left top; }

#folio #sidebar h3.standard {
	text-indent: -2000px;
	width: 200px;
	height: 23px;
	margin: 20px 0 0 10px;
	background: transparent url(images/standard.jpg) no-repeat left top; }

#folio #main h2 { background: transparent url(images/picture_portfolio.jpg) no-repeat top left; text-indent: -2100px; }

#folio #main img { border: 1px solid #e5e5e5; padding: 3px; margin-right: 5px; float: left; }

#folio #main p.desc { 
	background: transparent url(images/desc_arrow.jpg) no-repeat top left;
	font-size: x-small;
	color: #666666;
	margin: 0 10px 8px 20px;
	padding-left: 20px; }

#folio #main h3.rep {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/rep.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#folio #main h3.webdesign {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/webdesign.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#folio #main h3.dvd {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/dvdvideo.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#folio #main h3.identity {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/identity.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#serve #sidebar h2 { background: transparent url(images/tagline_services.jpg) no-repeat left top; }

#serve #sidebar h3.process {
	text-indent: -2000px;
	width: 148px;
	height: 23px;
	margin: 20px 0 0 10px;
	background: transparent url(images/process.jpg) no-repeat left top; }

#serve #sidebar strong { color: #02a0c6; }

#serve #sidebar li { font-size: x-small; }

#serve #main h2 { background: transparent url(images/picture_services.jpg) no-repeat top left; text-indent: -2100px; }

#serve #main h3.rend {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/rend.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#serve #main h3.forweb {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/fortheweb.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#serve #main p.webstuff { 
	border-left: 5px solid #02a0c6;
	font-size: small;
	margin: 0 10px 8px 10px;
	padding-left: 10px; }

#serve #main h3.filmandvideo {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/filmandvideo.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#serve #main p.filmstuff { 
	border-left: 5px solid #62ac57;
	font-size: small;
	margin: 0 10px 8px 10px;
	padding-left: 10px; }

#serve #main h3.marketing {
	text-indent: -2100px;
	width: 100%;
	height: 13px;
	background: transparent url(images/marketing.jpg) no-repeat top left;
	border-bottom: 1px solid #e5e5e5; }

#serve #main p.marketstuff { 
	border-left: 5px solid #98ca45;
	font-size: small;
	margin: 0 10px 8px 10px;
	padding-left: 10px; }

/* ############################ */
/*                       FOOTER */
/* ############################ */

#footer {
	position: relative;
	clear: both;
	border-top: 1px solid #e5e5e5;
	width: 100%;
	padding: 10px 0 0 0;
	margin: 0 0 10px 0;
	text-align: left; }

html>body #footer { padding: 0; }

#footer ul li {
	border-right: 1px solid #404040;
	font-size: x-small;
	display: inline;
	padding: 0 8px 0 8px; }

#footer ul li.end {
	border: 0;
	padding: 0 8px 0 8px; }

#footer ul li a { text-transform: uppercase; }

#footer ul li a:link, #footer ul li a:visited { color: #404040; text-decoration: none; }

#footer ul li a:hover { color: #98ca45; }