/* @override http://localhost/~woz/ns/css/nextsteps.css */

/* # Stylesheet Defaults */

body, div, p, a, ul, ol, li, h1, h2, h3, h4, h5, h6, img, form
{
	padding: 0px;
	margin: 0px;
	border: none;
}

a
{
	color: darkgray;
}

a:active, a:hover, a:link, a:visited {
}

body
{
	text-align: left;
	font-size: 100%;
	background: #d2cdba url(../images/body_background.jpg) repeat-y fixed center top;
}

h1
{
	color: #b87024;
	font-size: 3.8em;
	font-family: Georgia, Times, serif;
	font-weight: normal;
	text-shadow: rgba(0,0,0,0.49) 1px 1px 1px;
}

h2,h3,h4,h5,h6
{
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}

h2
{
	font-size: 1.25em;
	color: black;
}

h3, h4, h5, h6
{
	font-size: 1em;
}

p, li
{
	color: #636363;
	line-height: 1.4;
	font-size: .875em;
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}

/* # Universal Styles */

/* ## Wrapper Information */

#wrapper
{
	width: 100%;
	min-width: 920px;
	position: relative;	
}

#wrapper.homepage #identity
{
	z-index: 0;
}

/* ## Identity Information (found in the site header)*/

#identity
{
	position: absolute;
	left: 50%;
	height: 108px;
	width: 920px;
	margin-left: -460px;
	z-index: 1;
	background: transparent url(../images/header_background.png) no-repeat center top;
}

#identityline
{
	position: absolute;
	display: block;
	left: 380px;
	top: 10px;
	color: #542415;
	font: 24px "Helvetica Neue", "Helvetica", "Arial",sans-serif;
	opacity: 0.4;
}

#identityat
{
	margin: 0 -.3em 0 -.3em;
	color: #c69c6d;
	font-size: 48px;
	vertical-align: middle;
}

/* ## Next Steps Logo */

#logo
{
	position: absolute;
	left: 34px;
	top: 21px;
	display: block;
	z-index: 6;
}

/* ## Main Navigation (found in site header) */

#sitemenu
{
	position: absolute;
	top: 80px;
	left: 50%;
	margin-left: -80px;
	margin-top: -.9em;
	z-index: 6;
	list-style-type: none;
	overflow: visible;
}

#sitemenu li
{
	float: left;
	margin-right: .5em;
	height: 1.2em;
}

#sitemenu a
{
	font-size: 1.0em;
	color: white;
	text-decoration: none;
	background-color: #b87024;
	padding: .1em .6em .1em .6em;
}

	#sitemenu a:hover, #sitemenu #currentpage
	{
		padding-bottom: .5em;
		position: relative;
		top: -.5em;
		background-color: #b5bb7d;
		color: black;
	}
	
	#sitemenu #currentpage
	{
		color: white;
	}

/* ## Content Section
The Content Div contains all of the page's specific content. Thus, no header or footer info is found inside here. The following styles outline a layout for how each page will look. Page specific styles are found later in this document.
*/

#content
{
	position: relative;
	width: 920px;
	margin: auto;
	padding-top: 120px;
	padding-bottom: 40px;
	overflow: auto;
	background: white url(../images/backgrounds/exterior.jpg) fixed no-repeat center bottom;
}

	/* #### On the homepage every main block element has to be absolutly positioned.*/
	.homepage #content
	{
		height: 477px;
		position: absolute;
		left: 50%;
		margin-left: -460px;
		background-image: url(../images/backgrounds/homepage.jpg);
		background-attachment: scroll;
		background-position: center 86px;
		background-color: transparent;
	}
	
	.bricks #content
	{
		background-image: url(../images/backgrounds/bricks.jpg);
	}
	
	.bottombricks #content
	{
		background-image: url(../images/backgrounds/bottombricks.jpg);
	}
	
	.exterior #content
	{
		background-image: url(../images/backgrounds/exterior.jpg);
		background-attachment: scroll;
	}
	
	.shortbricks #content
	{
	background: white url(../images/backgrounds/bottombricks.jpg) no-repeat 80px -140px;
}

/* ### Column Definitions
Pages have, by default, three column types to choose from. The 'singlecol' class is used by pages that want to adjust their own column widths, and the 'leftcol', and 'rightcol' classes are pre-defined columns that fit nicely into the #content box.
*/
.singlecol
{
	width: 840px;
	position: relative;
	left: 40px;
	clear: both;
	padding-bottom: .5em;
}

.leftcol
{
	float: left;
	width: 280px;
	position: relative;
	left: 80px;
}

.rightcol {
	float: left;
	width: 400px;
	position: relative;
	left: 120px;
}

/* ### Misc. classes
These are classes that are found through out the content section that have no other home. Their names should be self-explanitory.
*/
.right
{
	float: right;
}

.left
{
	float: left;
}

.dropcap
{
	display: block;
	float: left;
}

.allcaps
{
	text-transform: uppercase;
	font-size: 1.222em;
	color: #c57826;
	text-shadow: rgba(0,0,0,0.49) 1px 1px 1px;
}

/* ### Intro Sytes
Some pages have introduction paragraphs (e.g. the "Meet Us" and the "Services" pages). Theses styles 	define a consistant look to those paragraphs.
*/
#intro
{
	float: left;
	width: 280px;
}
	
	#intro p
	{
		margin-bottom: 1em;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 1.20em;
	}
	
	#intro span
	{
		font-family: Georgia, "Times New Roman", Times, serif;
	}
	
	#intro .dropcap
	{
		padding-right: .1em;
		margin-top: .1em;
		font-size: 4.2em;
		line-height: 0.8;
		color: #979797;
	}

/* ## Footer Information */

#footer
{
	padding: 15px 0;
	clear: both;
	width: 920px;
	margin: auto;
	position: relative;
	top: -8px;
	color: #978b72;
	background: transparent url(../images/footer_background.png) no-repeat center top;
}

	#footer span
	{
		float: left;
		display: block;
		clear: both;
		padding-left: 40px;
		width: 880px;
	}
	
	#footer a
	{
		color: #994806;
	}
	/* #### On the homepage every main block element has to be absolutly positioned.*/
	.homepage #footer
	{
		position: absolute;
		top: 589px;
		left: 50%;
		margin-left: -460px;
	}

/* # Page Specific Styles */

/* ## Homepage */

/* ### Mission Statement Box */

#mission
{
	position: absolute;
	right: 140px;
	top: 40px;
	width: 400px;
	color: #603913;
	border: 1px dotted #636363;
	background: transparent url(../images/transparent.png);
}

	#mission h1
	{
		position: relative;
		margin-top: -1em;
		left: 0;
		color: #b87024;
		font-size:2.5em;
		line-height: 1.2;
	}
	
	#mission p
	{
		padding: .4em 20px 1em 20px;
		font-size: 1.1em;
		line-height: 1;
	}
	
	#mission span
	{
	   font-family:Georgia, "Times New Roman", Times, serif;
	}

.collective
{
	vertical-align: -18%;
	display: inline-block;
	position: relative;
	font-size: 2em;
	vertical-align: -18%;
	color: #C8976F;
	line-height: 1em;
}
	
	.collectivemed
	{
		font-size: 1.5em;
		color: #6F543B;
		line-height: 1.00em;
	}
	
	.collectivesmall
	{
		font-size: .9em;
		color: #6F543B;
	}
	
	.collectiveem
	{
		position: relative;
		display: inline;
		top: .1em;
		font-size: 1.2em;
		color: #6F543B;
		line-height: .5em;
	}

/* ### Services Checklist Box ("Just Look.") */

#checklist
{
	position: absolute;
	top: -51px;
	left: -40px;
	float: left;
	width: 341px;
	height: 525px;
	z-index: 1;
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
	list-style-type: none;
}

	#checklist a
	{
		display: block;
		width: 100%;
		height: 100%;
		font-size: 1.20em;
		color: #363636;
		text-indent: -5000px;
	}
	
	#checklist li:hover
	{
		z-index: 1;
	}

	#update
	{
		position: absolute;
		top: 18px;
		left: 34px;
		width: 241px;
		height: 53px;
		z-index: 0;
		background: url(../images/update.jpg) no-repeat left top;
	}
	
	#update a:hover
	{
		background: url(../images/update_highlight.jpg) no-repeat left top;
	}
	
	#create
	{
		position: absolute;
		top: 62px;
		left: 65px;
		width: 211px;
		height: 56px;
		z-index: 0;
		background: url(../images/create.jpg) no-repeat left top;
	}
	
	#create a:hover
	{
		background: url(../images/create_highlight.jpg) no-repeat left top;
	}
	
	#advertise
	{
		position: absolute;
		top: 110px;
		left: 67px;
		width: 211px;
		height: 56px;
		z-index: 0;
		background: url(../images/advertise.jpg) no-repeat left top;
	}
	
	#advertise a:hover
	{
		background: url(../images/advertise_highlight.jpg) no-repeat left top;
	}
	
	#publish
	{
		position: absolute;
		top: 158px;
		left: 68px;
		width: 211px;
		height: 56px;
		z-index: 0;
		background: url(../images/publish.jpg) no-repeat left top;
	}
	
	#publish a:hover
	{
		background: url(../images/publish_highlight.jpg) no-repeat left top;
	}
	
	#announce
	{
		position: absolute;
		top: 205px;
		left: 51px;
		width: 229px;
		height: 55px;
		z-index: 0;
		background: url(../images/announce.jpg) no-repeat left top;
	}
	
	#announce a:hover
	{
		background: url(../images/announce_highlight.jpg) no-repeat left top;
	}
	
	#plan
	{
		position: absolute;
		top: 252px;
		left: 39px;
		width: 244px;
		height: 52px;
		z-index: 0;
		background: url(../images/plan.jpg) no-repeat left top;
	}
	
	#plan a:hover
	{
		background: url(../images/plan_highlight.jpg) no-repeat left top;
	}

/* ### Homepage News */
#news
{
	width: 284px;
	height: 198px;
	position: absolute;
	top: 386px;
	left: 87px;
	z-index: 3;
	padding: 0px 28px 10px 10px;
	color: #000;
	font-size: 1.111em;
}

	#news h2
	{
		width: 100%;
		margin-top: 36px;
		padding-bottom: .2em;
		text-align: center;
		font-family: "Times New Roman";
		font-weight: normal;
		font-size: 1.5em;
		line-height: 26px;
	}
	
	#news p
	{
		padding: 0;
		padding-left: 16px;
		color: black;
		line-height: 26px;
	}
	
	#news span
	{
		display: block;
	}

/* ## Services Page */
#services h1
{
	text-align: left;
}
	
	#services h2
	{
		padding: 20px 40px 0 40px;
		text-align: left;
		font-size: 1.1em;
	}
	
	#services p
	{
		padding: 0 40px 0 40px;
	}
	
.service
{
	margin-bottom: 20px;
	padding-bottom: 20px;
	background: transparent url(../images/transparent.png);
	border: 1px dotted #636363;
}
	
	.service strong
	{
		color: #864e17;
		font-weight: normal;
		font-size: 1.2em;
	}
	
	.service a
	{
		color: black;
	}

.caption
{ font-family:Verdana, Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: .7em;
		width: 255px;
		}

.caption img
{ border: 1px solid #636363; }

/* ## Meet Us Page */
.bio
{
	margin-bottom: 20px;
	padding-bottom: 20px;
	min-height: 340px;
	background: transparent url(../images/transparent.png);
	border: 1px dotted #636363;
	clear: both;
}

	.bio h2
	{
		padding: 20px 40px 10px 40px;
		font-size: 1.1em;
	}
	
	.bio p
	{
		padding: 0 40px;
		margin-bottom: .8em;
	}
	
	.bio img
	{
		float: right;
		padding-bottom: 5px;
		position: relative;
		left: 95px;
		margin-left: -90px;
		width: 200px;
		height: 287px;
	}
	
.biotitle
{
	display: block;
	font-size: .8em;
	font-weight: normal;
}

.bioname
{
	text-decoration: underline;
}

#bio
{
	width: 300px;
	float: left;
	position: relative;
	left: 80px;
	margin: 0 0 30px 0;
	padding: 10px;
	background-image: url(../images/transparent.png);
}

	#bio p
	{
		padding: 0 16px 10px 16px;
	}

#amazed_photo
{
	background-image: url(../images/collective/amazed_bg.png);
}

#barry_bio
{
	background-image: url(../images/collective/barry_bg.png);
}

#becky_bio
{
	background-image: url(../images/collective/becky_bg.png);
}

#cindy_bio
{
	background-image: url(../images/collective/cindy_bg.png);
}

#dawn_bio
{
	background-image: url(../images/collective/dawn_bg.png);
}

#explore_photo
{
	background-image: url(../images/collective/explore_bg.png);
}

#jonathan_bio
{
	background-image: url(../images/collective/jonathan_bg.png);
}

#matt_bio
{
	background-image: url(../images/collective/matt_bg.png);0;
}

#mike_bio
{
	background-image: url(../images/collective/mike_bg.png);
}

#paul_bio
{
	background-image: url(../images/collective/paul_bg.png);
}

#rosalind_bio
{
	background-image: url(../images/collective/rosalind_bg.png);
}

#shirley_bio
{
	background-image: url(../images/collective/shirley_bg.png);
}

#sue_bio
{
	background-image: url(../images/collective/cindy_bg.png);
}
/* ## Our Vision Info */

/* #### The 'Our Vision' page overwrites many default styles used on other pages. Thus it is neccesary to use the .vision prefix in most selectors to ensure that only the vision page is modified. */
.vision h1
{
	margin-left: 40px;
}

.vision h2, .vision h2 span
{
	font-size: 2em;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight: 100;
}

.vision h3
{
	font-size: 1.388em;
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}

.vision img
{
	position: relative;
}

.vision p, li
{
	color: black;
	font-size: 1em;
}

#wrapper.vision #content
{
	background-image: none;
}

.vision #intro
{
	width: 820px;
	margin-bottom: 20px;
	padding: 10px 10px 0 10px;
	border: 1px dotted #636363;
}

	.vision #intro p
	{
		color: black;
		font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
		font-size: 1em;
	}
	
	.vision #intro .dropcap
	{
		color: black;
	}
	
	.vision #intro img.left
	{
		margin-left: -40px;
	}

	.vision #intro img.right
	{
		margin-right: -40px;
	}

.vision .singlecol, .vision .rightcol, .vision .leftcol
{
	left: 0;
	margin-bottom: 20px;
	padding: 10px;
}

.vision .singlecol
{
	left: 40px;
	width: 800px;
	padding: 20px;
}

.vision .singlecol p
{
	margin-bottom: 1em;
}


	.vision .singlecol img.left
	{
		margin-right: 10px;
	}
	
	.vision .rightcol
	{
		width: 360px;
		left: 60px;
		border: 1px dotted #636363;
		position: relative;
	}
	
	.vision .leftcol
	{
		width: 420px;
		left: 40px;
		border: 1px dotted #636363;
	}

.vision ol
{
	width: 100%;
	list-style-position: inside;
	padding-bottom: .5em;
}

	.vision ol li
	{
		padding: .5em 0 0 1em;
	}

#first_img, #middle_img, #last_img
{
	float: left;
	border: 1px solid #636363;
		margin-top: 10px;
}

	#first_img
	{
		margin-left: -472px;
	}
	
	#middle_img
	{
		margin-left: -322px;
	}
	
	#last_img
	{
		margin-left: -125px;
		margin-right: 20px;
	}

.vision_png
{
	background-image: url(../images/vision/vision_bg.png);
}

/* ## Contact Page */
form
{
	width: 360px;
	position: relative;
	left: 80px;
	padding: 0 20px;
	margin: 20px 0;
	border-width: 4px;
	border-color: #949494;
}

form ul
{
	list-style-type: none;
}

form li
{
	position: relative;
}

form li:hover .instruct
{
	display: block;
}

input.text
{
	display: block;
	height: 1.5em;
	border: 1px inset #eaeaea;
}

textarea.field
{
	display: block;
	margin-top: 6px;
	border: 1px inset #949797;
}

.large
{
	width: 100%;
}

.medium
{
	width: 75%;
}

.small
{
	width: 30%;
}

.instruct
{
	display: none;
	width: 200px;
	border: 1px solid #949494;
	background-color: #fefefe;
	padding: 5px;
	position: absolute;
	right: -240px;
	top: 0px;
}

.desc
{
	display: block;
	margin-top: .8em;
}

.checkbox_collection
{
	margin-left: 20px;
	padding-top: 6px;
	display: block;
}


#saveForm
{
	font-size: 1.0em;
	margin: 10px auto;
	text-align: center;
	display: block;
}

form em
{
	font-size: .8em;
}

.req
{
	color: #d01010;
}