/*  BASICS  */

	* {
		
		}
	
	body {
		background: #F5F5E4;
		margin: 0;
		padding: 0;
		}
	
	body, p {
		font-family: Arial, Helvetica, san-serif;
		font-size: 12px;
		line-height: 20px;
		color: #596967;
		}
	
	a {
		text-decoration: underline;
		color: #765027;	
		outline: none;
		}
		
	a:hover {
		text-decoration: none;
		color:#959A56;
		cursor: pointer;
		}
		
	a img {
		border: 0;
		}
	
	h2 {
		color: #4b2727;
		font-size: 14px;
		font-weight: bold;
		margin: 0;
		padding: 0 0 8px 0;
	}
	
	.floatLeft {
		float: left;
		display: inline
	}
	
	.floatRight {
		float: right;
		display: inline
	}
	
	.clearIt {
		clear: both;
	}
	
	.iconDesign, .iconSoftware {
		position: relative;
		top: 2px;
	}
	
	.textDivider {
		background: url(art/hr.gif) repeat-x;
		height: 1px;
		display: block;
		margin: 20px auto 5px auto;
	}
	

/* HEADER */
	
		
	.topBar {
		background: url(art/bkgGrainBlue.gif) repeat #516261;
		width: auto;
		height: 8px;
		}

	.header {
		background: url(art/bkgHeader.gif) repeat-x top #F0F0D9;
		width: auto;
		height: 106px;
		}
		
	.headerContainer {
		width: 962px;
		margin: 0 auto;
		}
	
	.headerLogo {
		float: left;
		display:inline;
		width: 94px;
		padding: 10px 0 0 0;
	}
	
	.clientLogin {
		float: left;
		display:inline;
		padding: 30px 0 0 66px;
	}
	
		.clientLogin a {
			position: relative;
			top: -5px;
			left: 0;
		}
	
	.clientHeadline {
		float: left;
		display:inline;
		padding: 44px 0 0 12px;
		font-weight: bold;
		color: #516261;
	}
	
		.clientHeadline .clientName {
			font-size: 20px;
			}
		
		.clientHeadline .projectName {
			font-size: 13px;
			color: #959A56;
			padding: 2px 0 0 6px;
			}

/*  NAV  */

	.mainNav {
		float: left;
		display:inline;
		width: 434px;
		padding: 33px 0 0 18px;
	}

	.mainNav ul {
		margin: 0;
		padding: 0;
		}
		
	.mainNav li {
		display: inline;
		list-style: none;
		margin: 0;
		padding: 0;
		}
		
	.mainNav strong {
		display: none;
		}
		
		.buttonHome {
			float: left;
			display: inline;
			background: url(art/navHome.gif);
			width: 61px;
			height: 37px;
			}
			
		.buttonBlog {
			float: left;
			display: inline;
			background: url(art/navBlog.gif);
			width: 52px;
			height: 37px;
			}
			
		.buttonWork {
			float: left;
			display: inline;
			background: url(art/navWork.gif);
			width: 57px;
			height: 37px;
			}
			
		.buttonMediaGrove {
			float: left;
			display: inline;
			background: url(art/navMediaGrove.gif);
			width: 106px;
			height: 37px;
			}
			
		.buttonContact {
			float: left;
			display: inline;
			background: url(art/navContact.gif);
			width: 74px;
			height: 37px;
			}

	.mainNav a:hover {
		background-position: 0 -37px;
		}
		
	.mainNav .buttonOn a {
		background-position: 0 -37px;
		}
		
	.mainNav .buttonOn a:hover {
		background-position: 0 -37px;
		}

/* PAGE CONTENT */		
		
	.contentArea {
		background: url(art/bkgHouse_wood.jpg) repeat-x bottom;
		width: auto;
		margin: 0;
		padding: 0;
		height: 727px;
		}
		
	.contentContainer {
		width: 962px;
		height: 727px;
		margin: 0 auto;
		}
		
		.contentAreaFlex {
			background: url(art/bkgHouse_wood.jpg) repeat-x bottom;
			width: auto;
			margin: 0;
			padding: 0;
			}
			
		.contentContainerFlex {
			width: 962px;
			margin: 0 auto;
			}
		
	.leftColumn {
		width: 460px;	
		}
		
	.rightColumn {
		width: 502px;
		background: #F5F5E4;
		}
		
	.bodyText {
		width: 405px;
		height: 340px;
		margin: 0;
		padding: 22px 0 0 30px;
		}
		
		.bodyTextFlex {
			width: 405px;
			margin: 0;
			padding: 22px 0 0 30px;
			}
		
	.bodyText p {
		font-size: 14px;
		line-height: 24px;
		}
		
/* HOUSE ADS */
		
	.houseAd {
		width: 460px;
		height: 365px;
		margin: 0;
		padding: 0;
		line-height: 32px;
		font-size: 28px;
		color: #F0F0D9;	
		}
		
	.houseAd .text {
		padding: 75px 0 0 30px;	
		}
		
		.houseAd .text {
		padding: 75px 0 0 30px;	
		}
	
	.houseAd a {
		font-weight: normal;
		color: #F0F0D9;
		}
		
	.houseAd a:hover {
		font-weight: normal;
		color: #959A56;
		}
		
/* HOME PAGE */
		
	.proofOfLife {
		background: url(art/bkgGrainBlue.gif) repeat #516261;
		width: 500px;
		height: 281px;
		margin: 0 auto;
		}
		
	.featureTitle {
		height: 39px;
		}
	
	a.titleLink {
		border: 0;
		text-decoration: none;
		font-weight: normal;
		color: #A1A99D;
		}
		
	a.titleLink:hover {
		font-weight: normal;
		color: #f5f5e4;
		}
		
	.featureComment {
		margin: 11px 0 0 0;
		font-size: 12px;
		}
		
	.featuredProject {
		width: 500px;
		height: 121px;
		font-size: 16px;
		line-height: 19px;
		margin: 0;
		padding: 0;
		}
		
	.featuredProject a {
		width: 460px;
		height: 106px;
		display: block;
		padding: 15px 0 0 40px;
		color: #F5F5E4;
		text-decoration: none;
		}
		
		.featuredProject a.designDark {
			background: url(art/iconD_dark.gif) no-repeat 20px 18px;
			}
			
		.featuredProject a.designMed {
			background: url(art/iconD_med.gif) no-repeat 20px 18px;
			}
			
		.featuredProject a.designLight {
			background: url(art/iconD_light.gif) no-repeat 20px 18px;
			}
			
		.featuredProject a.softwareDark {
			background: url(art/iconS_dark.gif) no-repeat 20px 18px;
			}
			
		.featuredProject a.softwareMed {
			background: url(art/iconS_med.gif) no-repeat 20px 18px;
			}
			
		.featuredProject a.softwareLight {
			background: url(art/iconS_light.gif) no-repeat 20px 18px;
			}
			
		.featuredProject a.none {
			background: transparent;
			}
		
	.featuredProject a:hover {
		color: #F5F5E4;
		text-decoration: underline;	
		}
		
	.fromOurBlog {
		/*background: url(art/bkgGrainOrange.gif) repeat #765027;*/
		background: #E2E3C8;
		margin: 4px auto 0 auto;
		width: 500px;
		height: 442px;
		}
	
	.fromOurBlog .blogEntry {
		background: url(art/underlineBrown.gif) repeat-x bottom;
		margin: auto;
		padding: 9px 30px;
		width: 420px;
		height: 62px;
		color: #596967;
	}
	
	.fromOurBlog .blogEntryEnd {
		background: transparent;
	}
	
	.fromOurBlog .icon {
		position: relative;
		float: left;
		top: 11px;
		left: 19px;
	}
	
	.fromOurBlog a {
		font-weight: normal;
		text-decoration: underline;
		color: #765027;	
		}
		
	.fromOurBlog a:hover {
		font-weight: normal;
		text-decoration: none;
		color: #959A56;
		}
		
	.resourceBoxHome {
		background: #E2E3C8;
		width: 500px;
		height: 399px;
		margin: 0;
		padding: 4px 0 0 0;
		}
		
/* WORK PAGE */
		
	.portfolioList {
	 	margin: 0;
		padding: 0;
	}
		
	.clientColumn {
		width: 225px;
		margin: 0 0 0 0;
		}
		
	.portfolioList p {
		font-size: 12px;
		line-height: 18px;
	}
		
	.projectColumn {
		width: 132px;
		margin: 0 0 0 40px;
		}
		
	.projectColumn ul {
		margin: 0;
		padding: 0;
		color: #bebe97;
	}
		
	.projectColumn li {
		margin: 0;
		padding: 0 0 3px 0;
		list-style: none;
		font-size: 17px;
		}
		
	.projectColumn a {
		font-weight: normal;
		text-decoration: none;
		color: #516261;	
		}
		
	.projectColumn a:hover {
		text-decoration: underline;
		color:#959a56;
		}
		
	.projectColumn .on {
		background: url(art/iconArrow_downRight.gif) no-repeat right 6px;
		padding: 0 15px 0 0;
		text-decoration: none;
		color: #959a56;	
		}
		
	.projectViewer {
		background: #fbfbf4;
		width: 500px;
		height: 300px;
		margin: 0 auto;
		}
		
	.clientDetail {
		background: #E2E3C8;
		margin: 4px auto 0 auto;
		width: 500px;
		/*height: 423px;*/
		}
		
		.clientDetail .minHeight {
			background: #E2E3C8;
			margin: 0;
			padding: 0;
			width: 1px;
			height: 423px;
			}
		
		.clientDetail ul {
			margin: 0;
			padding: 0;
			width: 225px;
			color: #828D84;
			}
		
		.clientDetail li {
			margin: 0;
			padding: 2px 0 0 0;
			background: url(art/underlineBrown.gif) repeat-x bottom; 
			height: 21px;
			list-style: none;
			}
		
		.clientDetail li.spacer {
			height: 10px;
			background: transparent;
			}
		
	.clientDetail .currentProject {
		font-weight: normal;
		text-decoration: none;
		color: #959A56;	
		}
		
	.clientDetail .currentProject:hover  {
		text-decoration: none;
		color: #959A56;	
		}
		
	.clientDetail a {
		padding: 0 0 0 20px;
		font-size: 12px;
		font-weight: normal;
		text-decoration: none;
		color: #516261;	
		}
		
	.clientDetail a:hover {
		text-decoration: underline;
		color:#959A56;
		}
		
	.clientDetail a.on {
		background: url(art/iconArrow_up.gif) no-repeat 7px 2px;
		color:#959A56;	
		}

		
/* CONTACT PAGE */

	.contactDetails {
		font-size: 14px;
		line-height: 22px;
		color: #596967;
		width: 250px;
		padding: 0 25px 35px 20px;
		}
		
		.contactDetailsDesign {
			background: url(art/iconD_light.gif) no-repeat 0px 4px;
			}
			
		.contactDetailsSoftware {
			background: url(art/iconS_light.gif) no-repeat 0px 4px;
			}
			
		.contactDetailsMail {
			background: url(art/iconPostOffice_light.gif) no-repeat 0px 4px;
			}
		
	.iconContact {
		position: relative;
		float: left;
		top: 38px;
		left: 0;
		}
		
	.contactHeader {
		font-size: 14px;
		font-weight: bold;
		color: #4b2727;
	}
	
	.mapControl {
		font-size: 14px;
		float: left;
		display:inline;
		padding: 75px 0 0 275px;
		}
		
	
	.contactTable {
		margin: 0 10px 0 10px;
		font-size: 14px;
		}
		
		.contactTable td {
			background: url(art/underlineBrown.gif) repeat-x bottom; 
			vertical-align: top;
			}
			
		.contactTable td.bottom {
			background: transparent; 
			}
	
		.contactTable .label {
			padding: 5px 0 5px 28px;
			width: 200px;
			}
			
		.contactTable .field {
			padding: 5px 0;
			width: 250px;
			}
			
	.contactResult {
		font-size: 14px;
		padding: 5px 0 0 38px;
	}
		
		
/* MEDIA GROVE PAGE */
		
	.mediaGroveDiagram {
		background: url(art/mediaGrove_diagram.jpg) no-repeat;
		width: 359px;
		height: 489px;
		margin: 45px 0 0 35px;
	}
	
	.mediaGroveDiagram img {
		margin: 404px 0 0 160px;
		padding: 0;
	}
				
/* BLOG */

	.contentAreaBlog {
		width: auto;
		margin: 0;
		padding: 0;
		}
			
	.contentContainerBlog {	
		width: 962px;
		margin: 0 auto;
		padding: 25px 0;
		}

	/* sidebar */
	
	.contentAreaBlog .sideBar {
		width: 156px;
		margin: 0;
		padding: 0 25px 0 30px;
	}
	
		.contentAreaBlog .sideBar ul {
			margin: 0;
			padding: 0;
			color: #765027;
		}
			
		.contentAreaBlog .sideBar li {
			margin: 0;
			padding: 0 0 3px 0;
			list-style: none;
			font-size: 17px;
			}
			
		.contentAreaBlog .sideBar a {
			font-weight: normal;
			text-decoration: none;
			color: #516261;	
			}
			
		.contentAreaBlog .sideBar a:hover {
			text-decoration: underline;
			color:#959a56;
			}
			
		.contentAreaBlog .sideBar .on {
			background: url(art/iconArrow_right.gif) no-repeat right 6px;
			padding: 0 18px 0 0;
			text-decoration: none;
			color: #959a56;	
			}
			
	/* main page */
	
	.contentAreaBlog .mainPage {
		background: url(art/blog_mainPageColumns.gif) repeat-y 210px 0;	
		}
	
	/* posts */
	
	.contentAreaBlog .archiveColumn {
		margin: 0;
		padding: 0;
		width: 750px;
	}
	
	.contentAreaBlog .oneColumn {
		width: 220px;
		padding: 0 15px;
	}
	
	.contentAreaBlog .twoColumn {
		width: 470px;
		padding: 0 15px;
	}
	
	.contentAreaBlog .blogPost img {
		border: 3px solid #c7c7a9;
	}
	
	.contentAreaBlog .blogPost, .contentAreaBlog .blogComment {	
		padding: 20px 0 0 0;
	}
	
	.blogPost .date {	
		font-weight: bold;
		line-height: 14px;
	}
	
	.blogPost a.title, .blogCommentLink a {
		font-weight: normal;
		font-size: 14px;
		line-height: 18px;
	}
	
	.blogComment .label {	
		line-height: 14px;
		margin: 0 0 7px 0;
	}
	
	
	/* archive pages */	
	
	.contentAreaBlog .archivePage {
		background: url(art/blog_archivePageColumns.gif) repeat-y 210px 0;	
		}
		
	.contentAreaBlog .blogCommentLink {
		background: url(art/iconArrow_left.gif) no-repeat 40px 40px;	
		padding: 34px 0 0 60px;
	}
	

/* RESOURCE BOXES */
		
	.resourceBoxWork {
		background: #E2E3C8;
		width: 499px; /* 1 px less than 500 to accomodate the minHeight div */
		/* height: 419px; */
		padding: 4px 0 0 0;
		}
		
	.resourceBoxProducts {
		background: #E2E3C8;
		width: 500px;
		height: 419px;
		padding: 4px 0 0 0;
		}
		
	.resourceBoxContact {
		background: #E2E3C8;
		width: 500px;
		height: 419px;
		padding: 4px 0 0 0;
		}

	.resourceColumn {
		width: 235px;
		margin: 0 0 0 10px;
		}
		
	.resourceColumn .icon {
		margin: 0 5px 0 0;
		position: relative;
		float: left;
		top: 2px;
		left: 0;
		border: 0;
	}
		
	.resourceHeadline {
		background: url(art/underlineBrown.gif) repeat-x bottom; 
		margin: 0;
		padding: 3px 0 0 20px;
		width: 205px;
		height: 20px;
		font-size: 14px;
		font-weight: bold;
		color: #4b2727;
	}
	
	.resourceText {
		margin: 0 30px 0 30px;
		padding: 0;
		width: 440px;
		padding: 0;
		}
		
	.resourceText p {
		font-size: 12px; 
		line-height: 15px;
		color:#596967;
		}
			
	.resourceBoxContact a {
		font-size: 14px;
		font-weight: bold;
		text-decoration: underline;
		margin: 0;
		padding: 0;
		color: #765027;
		}
		
	.resourceBoxContact a:hover {
		font-size: 14px;
		font-weight: bold;
		text-decoration: none;
		color: #959A56;
		}
				
/* FOOTER */
		
	.footer {
		background: url(art/bkgGrainBlue.gif) repeat #516261;
		width: auto;
		height: 222px;
		margin: 3px 0 0 0;
		}
		
	.footerContainer {
		width: 962px;
		margin: 0 auto;
		}
		
	.copyrightInfo {
		float: left;
		display:inline;
		width: 248px;
		height: 200px;
		padding: 22px 0 0 30px;
		color: #A1A99D;
		line-height: 14px;
	}
	
	.contactInfo {
		background: url(art/bkgGrainGreen.gif) repeat #959A56;
		float: left;
		display:inline;
		width: 162px;
		height: 200px;
		padding: 22px 0 0 20px;
		color: #F0F0D9;
		line-height: 14px;
	}
	
	.contactInfo p {
		color: #F0F0D9;
		line-height: 14px;
	}
	
	.footer a {
		color: #F0F0D9;
	}
	
			
	.comments {
		float: left;
		display:inline;
		width: 429px;
		padding: 22px 0 0 32px;
		}
		
	.comments p {
		color: #A1A99D;
		line-height: 18px;
		}		

/*  FORM ELEMENTS  */
		
	input.text, textarea, select {
		font-family: Arial, Helvetica, san-serif;
		font-size: 12px;
		color: #596967;
		border: 1px solid #596967;
		background: #F5F5E4;
		padding: 3px 0 0 7px;
		height: 18px;
		}
		
	.clientLogin input.text {
		width: 151px;
		margin: 0 11px 4px 0;
		}
		
		.clientLogin input.username {
			 background: url(art/loginUsername.gif) no-repeat 7px 7px #F5F5E4;
			}

		.clientLogin input.password {
			 background: url(art/loginPassword.gif) no-repeat 7px 5px #F5F5E4;
			}
		
		.clientLogin input.filled {
			background: #F5F5E4;
		}
		
	.portfolioList select {
		background: #fbfbf4;
		padding: 0 0 0 2px;
		width: 225px;
		height: 20px;
		}
		
	.portfolioList option {
		padding: 2px 0 2px 5px;
	}
		
	.contactTable input.text {
		width: 206px;
		height: 18px;
		}
		
	.contactTable .textarea {
		width: 206px;
		height: 54px;
		}
		
	/* blog comment fields */
	
	.blogComment input.text {
		background: #fcfcf4;
		width: 200px;
		height: 18px;
		}
		
	.blogComment .textarea {
		background: #fcfcf4;
		width: 200px;
		height: 72px;
		}