/*
no tag soup - Cascading Style Sheet
Copyright:  All Rights Reserved

Last Edited: Initial Deployment of Website
Last Validated: As Above
Author: No Tag Soup / notagsoup.com

------------------------------
	Contents
------------------------------

01.	general
02.	header
03.	tag soup
04.	highlight
05.	project band - index
06.	content
07.	project list
08.	sections
09.	login form
10.	footer
11.	easter egg

------------------------------
	01.	general
----------------------------*/

*		{ margin: 0; padding: 0; border: none; }

body 	{
		color: #333;
		background-color:  #fff;
		text-align: center;		/* center hack for ie 5.x  */
		font: small/1.5 "Lucida Grande", helvetica, arial, sans-serif;
		border-top: 3px solid #2C2D29;
}

#wrapper  { 
		width: 900px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		text-align: left;
}

/*----------------------------
	02.	header
----------------------------*/

#header {

		background: #fff url('../graphics/top_border.gif') no-repeat 0 bottom;
		position: relative;
		height: 85px;
}

#logo	{
		width: 235px;
		height: 54px;
		position: relative;
		top: 16px;
		left: 60px;
		text-indent: -9999em;
		background: #fff url('../graphics/notagsoup2.png') no-repeat 0 0;
}

ul#nav	{
		width: 400px;
		height: 30px;
		background-color: #333;
		list-style: none;
		position: absolute;
		bottom: 1px;
		right: 30px;
}

ul#nav li	{
		float: left;
		height: 30px;
		width: 100px;
}



ul#nav li a {
		float: left;
		height: 30px;
		width: 100px;
		text-indent: -999em;
		overflow: hidden;
}

li#h a { background: #333 url('../graphics/nav.gif') no-repeat 0 0; }
li#s a { background: #333 url('../graphics/nav.gif') no-repeat -100px 0; }
li#w a { background: #333 url('../graphics/nav.gif') no-repeat -200px 0; }
li#c a { background: #333 url('../graphics/nav.gif') no-repeat -300px 0; }

li#h a:hover { background: #333 url('../graphics/nav.gif') no-repeat 0 -31px; }
li#s a:hover { background: #333 url('../graphics/nav.gif') no-repeat -100px -31px; }
li#w a:hover { background: #333 url('../graphics/nav.gif') no-repeat -200px -31px; }
li#c a:hover { background: #333 url('../graphics/nav.gif') no-repeat -300px -31px; }

body#home li#h a		{ background: #333 url('../graphics/nav.gif') no-repeat 0 -31px; }
body#services li#s a	{ background: #333 url('../graphics/nav.gif') no-repeat -100px -31px; }
body#work li#w a		{ background: #333 url('../graphics/nav.gif') no-repeat -200px -31px; }
body#contact li#c a	{ background: #333 url('../graphics/nav.gif') no-repeat -300px -31px; }

/*----------------------------
	03.	tag soup
----------------------------*/

#tagsoup {
		width: 840px;
		position: relative;
		left: 30px;
		margin-top: 30px;
		border: 1px solid #ccc;
		background: #fff url('../graphics/nts.gif') no-repeat 0 50%;
}

#tagsoup h1 {
		width: 140px;
		height: 30px;
		position: relative;
		top: 7px;
		left: 25px;
		background: #fff url('../graphics/tagsoup.gif') no-repeat 0 0;
		text-indent: -9999em;
		overflow: hidden;
}

#tagsoup blockquote { padding: 10px 0; }

#tagsoup blockquote p {
		width: 770px;
		position: relative;
		left: 32px;
		color: #333;
}

/*----------------------------
	04.	highlight
----------------------------*/

#intro	{
		margin-top: 30px;
		width: 900px;
		height: 119px;
		background: #fff url('../graphics/intro.jpg') no-repeat 0 bottom;
}

#intro h1, #intro h2 {
		width: 347px;
		height: 30px;
		position: relative;
		top: 7px;
		left: 64px;
		font-weight: normal;
		letter-spacing: 1px;
		color: #fff;
		overflow: hidden;
}

body#services #intro h1 {
		width: 92px;
		height: 28px;
		background: #7CA01A url('../graphics/h1_services.gif') no-repeat -5px 0; 
		text-indent: -9999em;
}

body#work #intro h1 {
		width: 184px;
		height: 28px;
		background: #7CA01A url('../graphics/h1_work.gif') no-repeat -5px 0; 
		text-indent: -9999em;
}

body#contact #intro h1 {
		width: 133px;
		height: 28px;
		background: #7CA01A url('../graphics/h1_contact.gif') no-repeat -4px 0; 
		text-indent: -9999em;
}

body#standards #intro h1 {
		width: 111px;
		height: 28px;
		background: #7CA01A url('../graphics/h1_standards.gif') no-repeat -4px 0; 
		text-indent: -9999em;
}

body#accessibility #intro h1 {
		width: 132px;
		height: 28px;
		background: #7CA01A url('../graphics/h1_accessibility.gif') no-repeat -4px 0; 
		text-indent: -9999em;
}

body#aa #intro h1 {
		width: 192px;
		height: 28px;
		background: #7CA01A url('../graphics/h1_aa.gif') no-repeat -4px 0; 
		text-indent: -9999em;
}

body#ten #intro h1 {
		width: 295px;
		height: 28px;
		background: #7CA01A url('../graphics/ten.gif') no-repeat -4px 0; 
		text-indent: -9999em;
}

body#easter_egg #intro h1 {
		width: 295px;
		height: 28px;
		background: #7CA01A url('../graphics/easteregg.png') no-repeat -4px 0; 
		text-indent: -9999em;
}

body#home #intro h2 {
			width: 292px;
			height: 37px;
			background: #7CA01A url('../graphics/proj_wm.gif') no-repeat 0 0; 
			text-indent: -9999em;
			left: 59px;
			top: 8px;
}

body#home #intro h1 {
		width: 347px;
		height: 30px;
		position: relative;
		top: 7px;
		left: 64px;
		background: #fff url('../graphics/webdesign.gif') no-repeat 0 0;
		text-indent: -999em;	
}

#intro blockquote { padding: 14px 0; }

#intro blockquote p {
		width: 600px;
		position: relative;
		left: 64px;
		color: #fff;
}

body#contact #intro strong { padding-right: 20px; }


/*----------------------------
	05.	project band - index
----------------------------*/

#project {
		height: 190px;
		background: #fff url('../graphics/project_bkgd.jpg') no-repeat 0 bottom;
}

#project_logo {
		width: 200px;
		height: 100px;
		position: relative;
		top: 18px;
		left: 125px;
}

#project #pic {
		width: 384px;
		border: 3px solid #e5e5e5;
		position: relative;
		top: 25px;
		left: 220px;
		padding: 1px;
}

/*----------------------------
	06.	content
----------------------------*/

#content {
		padding-bottom: 45px;
		background: #fff url('../graphics/project_bkgd.jpg') no-repeat 0 bottom;
		overflow: auto;
}


body#services #content h2, body#standards #content h2, body#accessibility #content h2, body#easter_egg #content h2, body#aa #content h2, body#ten #content h2, body#contact #content h2  {
		position: relative;
		left: 30px;
		margin: 30px 0 20px 0;
		color: #333;
		background: #fff url('../graphics/hdg_circle.gif') no-repeat 10px 50%;
		border: 1px solid #ccc;
		width: 806px;
		padding: 2px 0 2px 34px;
		font-size: medium;
}

#content p {
		width: 730px;
		position: relative;
		left: 64px;
}

#content ul {
		position: relative;
		left: 74px;
		list-style: none;
		width: 700px;
		margin: 10px ;
}

#content ul li {
		line-height: 2em;
		padding: 0 0 0 18px;
		background: #fff url('../graphics/bullit.gif') no-repeat 0 52%;
}

#content a { color: #2C5F7C; }

#content p.highlight {
		border: 1px solid #EAE3B9;
		background: #FDFBE7 url('../graphics/info.gif') no-repeat 20px 50%;
		padding: 4px 0 5px 0;
		margin: 20px 0;
		width: 537px;
		left: 164px;
}

#content p.highlight a {
		position: relative;
		left: 60px;
		text-decoration: none;
		color: #BFB86B;
}

#content p.highlight a:hover { text-decoration: underline; }

/*----------------------------
	07.	project list
----------------------------*/

body#work #content ul.details {
		width: 320px;
		float: left;
		position: relative;
		top: 13px;
		left: 54px;
		border-bottom: 1px solid #ccc;
}

body#work #content ul.details h2 {
		height: 29px;
		border-bottom: 1px solid #ccc;
		text-indent: -9999em;
}

body#work #content ul.details h2#wm { background: #fff url('../projects/wm.png') no-repeat 0 0; }
body#work #content ul.details h2#sw2 { background: #fff url('../projects/sw2.png') no-repeat 0 0; }
body#work #content ul.details h2#rk { background: #fff url('../projects/rk.png') no-repeat 0 0; }

body#work #content ul.details li {
		background-image: none;
		padding: 0 0 4px 5px;
		line-height: 1.5em;
}

body#work #content ul.details li.heading {
		background-image: none;
		padding: 0 0 2px 0;
		line-height: 1.8em;
		margin: 0 0 4px 0;
}

body#work #content ul.details li p { left: 0; }

body#work #content .tbn {
		width: 384px;
		border: 3px solid #e5e5e5;
		position: relative;
		top: 24px;
		left: 100px;
		padding: 1px;
}

#project1, #project2, #project3 { height: 113px; padding-bottom: 75px; }
#project1 { background: #fff url('../graphics/p1.jpg') no-repeat 0 bottom; }
#project2 { background: #fff url('../graphics/p2.jpg') no-repeat 0 bottom; }
#project3 { background: #fff url('../graphics/p3.jpg') no-repeat 0 bottom; }
#project4 { height: 113px; padding-bottom: 40px; }

ul.details span {
		color: #7DA21F;
}
/*----------------------------
	08.	sections
----------------------------*/

ul#sections {
		list-style: none;
		margin: 34px 0 0 0;
		position: relative;
		left: 32px;
		overflow: auto;
}

ul#sections li {
		width: 270px;
		margin: 0 0 0 12px;
		position: relative;
		float: left;
		border: 1px solid #ccc;
		overflow: auto;
}

ul#sections li#one { margin: 0; }

ul#sections li a:hover { text-decoration: underline; }

ul#sections li h2 a{
		float: right;
		top: 9px;
		position: relative;
		right: 24px;
		width: 130px;
		font-weight: normal;
		letter-spacing: 1px;
		background-color: #ccc;
		text-indent: -999em;
		}

ul#sections li#one h2 a {
		width: 117px;
		height: 26px;
		background: #fff url('../graphics/standards.gif') no-repeat right 0;
}

ul#sections li#two h2 a {
		width: 126px;
		height: 26px;
		background: #fff url('../graphics/accessibility.gif') no-repeat right 0;
}

ul#sections li#three h2 a{
		width: 112px;
		height: 26px;
		background: #fff url('../graphics/points.gif') no-repeat right 0;
}

ul#sections li p {
		position: relative;
		left: 24px;
		width:230px;
		margin: 40px 0 16px 0;
		line-height: 1.5em;
		text-transform: capitalize;
}

/*----------------------------
	09.	form
----------------------------*/

form		{
		position: relative;
		left: 150px;
		width: 550px;
		border: 1px solid #ccc;
		margin: 30px 0;
		padding: 20px;
}

form p#required { position: relative; left: 100px; padding-bottom: 20px; width: 200px;}

form div	{ clear: left; padding: 10px 0; }

label	{ float: left; width: 100px; }

input, textarea	{
		float: left;
		width: 400px;
		padding: 2px;
		border: 1px solid #ccc;
}

input		{ width: 200px; }

#send	{
		position: relative;
		left: 100px;
		background-color: #fff;
}

/*----------------------------
	10.	footer
----------------------------*/

ul#footer {
		list-style: none;
		margin: 34px 0;
		background: #fff url('../graphics/bottom_border.gif') no-repeat 0 0;
		padding: 24px;
		color: #ccc;
		font-size: x-small;
		text-align: center;
}

ul#footer li {
		position: relative;
		top: 14px;
		float: left;
		width: 170px;
}

ul#footer li a { color: #ccc; text-decoration: none; }

/*----------------------------
	O	easter egg
----------------------------*/

/*     http://www.notagsoup.com/easteregg.php     */

#red_highlight { color: #840000; font-weight: bold; }