/*------------------------------------------------------------------------------*/
/* designPhoto.css */
/*	jpl 8/06/08
/*	Core CSS for designphoto
/* 
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Global HTML Resets */

* {
	padding : 0;
	margin : 0;
}


html {
	padding : 0;
	margin : 0;
}

body {
	text-align:			left;
	padding:			0;
	margin:				0;
	background:			#fff;
	font:				12px Trebuchet MS, Arial, sans serif;
	color:				#D0D1D3;
}


p {
	line-height:		13px;
	margin-bottom:		13px;
}


a img { border : 0; }

a:link		{ color: #939598; text-decoration: none; font-weight: normal; }
a:visited	{ color: #939598; text-decoration: none; font-weight: normal; }
a:hover		{ color: #939598; text-decoration: underline; font-weight: normal; }
a:active	{ color: #939598; text-decoration: underline; font-weight: normal; }


/* End SECTION::Global HTML Resets
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Page Structure */

#page-wrapper {
	margin:				40px auto 0 auto;
	text-align:			left;
	width:				990px;
	height:				602px;
}


	#page-header {
		position:		relative;
		margin:			0;
		padding:		0;
		width:			100%;
		height:			43px;
		background:		top left no-repeat;
	}

	
	#page-header #logo {
		position:		absolute;
		top:			8px;
		left:			35px;
		width:			255px;
		height:			44px;
	}
	
	#page-header #logo a {
		width:			255px;
		height:			44px;
		display:		block;
		text-decoration:none;
	}
	
	#page-header #logo span {
		display:		none;
	}
	
	#page-header #homeText {
		position:		absolute;
		top:			9px;
		left:			334px;
		width:			390px;
		height:			40px;
		font-size:		12px;
		line-height:	13px;
		color:			#939598;
	}
	
	
	#page-body {
		width:			925px;
		margin-left:	30px;
		margin-top:		30px;
	}
	
	
	#page-footer {
		width:			100%;
		height:			11px;
		background:		top left no-repeat;
	}
	
	#page-footer-portfolio {
		width:			962px;
		height:			35px;
		background:		url(../images/footerPortfolio.gif) no-repeat;
	}
	
	#topMenu .menuButton {
		width:			181px;
		height:			50px;
		background:		url(../images/menuButtonBackground.jpg) no-repeat;
		padding:		3px;
		cursor:			pointer;
	}
	#leftMenu a:link	{ color: #fff; text-decoration: none; font-weight: normal; }
	#leftMenu a:visited	{ color: #fff; text-decoration: none; font-weight: normal; }
	#leftMenu a:hover	{ color: #fff; text-decoration: underline; font-weight: normal; }
	#leftMenu a:active	{ color: #fff; text-decoration: underline; font-weight: normal; }
	
	#leftMenu .menuButton img {
		float:			left;
		margin-right:	17px;
	}
	
	#leftMenu .menuButton h3 {
		margin-top:		9px;
		font-size:		13px;
	}
	
	
	
/* End SECTION::Page Structure
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Nav-bar */
	#nav-bar {
		position:		absolute;
		top:			6px;
		left:			348px;
	}
	
	
	#nav-bar li {
		text-align:			center;
		float:				left;
		display:			inline;
		color:				#fff;
		background:			#939598;
		font-size:			16px;
	}
	
	#nav-bar li a, #nav-bar li span {
		color:				#fff;
		text-decoration:	none;
		width:				84px;
		height:				25px;
		padding-top:		4px;
		display:			block;
	}
	
	#nav-bar li a:link		{ color: #D0D1D3; background: #fff; }
	#nav-bar li a:visited	{ color: #D0D1D3; background: #fff; }
	#nav-bar li a:hover		{ color: #fff; background: #D0D1D3; }
	#nav-bar li a:active	{ color: #fff; background: #D0D1D3; }
	
	#nav-bar li.current span{ color: #fff; background: #D0D1D3; }


	
/* End SECTION::Nav-bar
/*------------------------------------------------------------------------------*/



#contactBlurb {
	float:				right;
	padding:			30px 0;
	width:				270px;
}

#contactInfo {
	float:				right;
	padding:			30px;
	width:				150px;
	color:				#939598;
}

#contactForm {
	float:				right;
	padding:			27px 30px;
	width:				379px;
	color:				#fff;
	height:				305px;
}

	#contactForm .text {
		width:			300px;
	}



#photoSectionMenu {
	margin-top:		30px;
	width:			925px;
	padding:		6px 0px 3px 30px;
	background:		#1E2B5F;
}

#photoSectionMenu img {
	border:			none;
	padding:		1px;
}
#photoSectionMenu img.current {
	border:			1px solid #fff;
	padding:		0px;
}

#photoSectionMenu a {
	margin-right:	8px;
}

.photoMenu {
	width:			300px;
}

.photoMenu img {
	float:			left;
	height:			60px;
	width:			60px;
	margin-right:	11px;
	margin-bottom:	11px;
	cursor:			pointer;
}

.photoCanvas {
	float:			right;
	width:			625px;
	color:			#939598;
	text-align:		left;
}
.photoCanvas img {
	max-width:		625px;
	padding-bottom:	10px;
}



#caseStudyMenu {
	margin-top:		30px;
	width:			925px;
	padding:		7px 0px 4px 30px;
	background:		#1875BC;
}
#caseStudyMenu img {
	margin-right:	10px;
	cursor:			pointer;
	height:			60px;
	width:			60px;
	padding:		1px;
}
#caseStudyMenu img.current {
	border:			1px solid #fff;
	padding:		0px;
}

.portfolioSectionName {
	position:		absolute;
	top:			10px;
	left:			615px;
	font-size:		15px;
	font-weight:	900;
}

#designPortfolioSectionName {
	color:			#1875bc;
}
#photoPortfolioSectionName {
	color:			#1e2b5f;
}


/*------------------------------------------------------------------------------*/
/* SECTION::Case Study Page */

#caseStudyViewPort {
	overflow:				hidden;
	height:					485px;
	width:					780px;
}

.caseStudyDetails {
	width:					270px;
	margin-right:			30px;
	float:					left;
	color:					#939598;
}
.caseStudyImages {
	width:					625px;
	float:					left;
}

/*
.mainImage {
	margin-top:				21px;
	width:					459px;
	height:					324px;
}

.imageSet {
	padding-top:			10px;
	margin-right:			10px;
}
*/
.mainImageCaption {
	padding:				0px;
	margin:					8px 0px 6px;
	font-size:				12px;
	color:					#939598;
}

.caseStudyThumbnail {
	margin-right:			10px;
	width:					60px;
	height:					60px;
}

.caseStudyThumbnail:last-child {
	margin-right:			0px
}


.field, .stackedField {
	font-size:				11px;
}

.fieldName {
	width:					75px;
	color:					#1875BC;
}

.fieldValue {
	width:					225px;
	margin-bottom:			7px;
}


.stackedField .fieldName {
	float:					none;
	width:					auto;
	margin-bottom:			3px;
}

div.stackedField p {
	font-size:				11px;
	margin-bottom:			3px;
}

div.stackedField p.testimonial {
	margin-bottom:			2px;
}

	
/* End SECTION::Case Study Page
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Inputs */

input[type="text"], textarea {
	border:					1px solid #B3B3B3;
	padding-left:			4px;
}

#contactUsForm input, #contactUsForm textarea {
	width:					288px;
	margin-bottom:			4px;
}

	
/* End SECTION::Inputs
/*------------------------------------------------------------------------------*/





/*------------------------------------------------------------------------------*/
/* SECTION::Global Utility  */

.highlight {
	color:				#B64D3E;
}



.nextElement {
	margin-top:			6px;
}


/* End SECTION::Global Utility
/*------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------*/
/* SECTION::Universal Utility  */
	
	.left       { float: left; }
	.right      { float: right; }
	.inline		{ display: inline; }
	
	.block		{ display: block; }
	.inline		{ display: inline; }
	
	/* this is for using on a block-level container element */
	/* and will center contents inside the container */
	.center     { text-align: center; }
	
	/* this is for using on an inline element, such as an image */
	/* and will turn the element block, and center the element within its container */
	.centered   { display: block; margin: 0 auto 10px auto; }
	
	.verticalMiddle td, td.verticalMiddle { vertical-align: middle; }
	div.verticalMiddle { vertical-align: middle; display: table-cell; }
	.verticalMiddle * { vertical-align: middle; }
	
	.relative	{ position: relative; }
	.absolute	{ position: absolute; }
	
	.hidden     { display: none; }
	.no-border  { border: none !important; }
	
	.flush-left { padding-left : 0 !important; margin-left : 0 !important }
	.flush-right{ padding-right: 0 !important; margin-right: 0 !important }
	
	.fullWidth	{ width: 100%; }
	
	.clear      { clear: both; }
	
	.clickable	{ cursor: pointer; }
	.strikeText { text-decoration: line-through; }
	.transparent{ border: none !important; background: transparent; }
	
/* End SECTION::Universal Utility
/*------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------*/
/* Drop Shadow Elements */
html>body .outerpair1 { background: url(../images/dropShadowUpperRight.png) right top no-repeat; }
html>body .outerpair2 { background: url(../images/dropShadowLowerLeft.png) left bottom no-repeat; padding-top: 8px; padding-left: 8px; }
html>body .shadowbox { background: url(../images/dropShadowMain.png) bottom right; }
html>body .innerbox { position: relative; left: -8px; top: -8px; }
/*------------------------------------------------------------------------------*/