/*------------------------------------------------------------------------------*/
/* playgroundcreative.css */
/*	jpl 8/23/08
/*	Core CSS for playgroundcreative.com
/* 
/*------------------------------------------------------------------------------*/



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

* {
	padding:				0;
	margin:					0;
}

body {
	padding:				0;
	margin:					0;
	background-color:		#000;
	font-family:			Arial, Helvetica, Verdana, sans-serif;
	color:					#fff;
	font-size:				12px;
}

a img { border : 0; }

p {
	margin-bottom:			20px;
	text-align:				justify;
}

table td { vertical-align:	top; }

input[type="radio"] { margin:3px 3px 0 5px; }

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

	a:link		{ text-decoration: underline; }
	a:visited	{ text-decoration: underline; }
	a:hover		{ text-decoration: none; }
	a:active	{ text-decoration: none; border: none !important; }


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

#page-wrapper {
	position:				relative;
	margin:					30px auto 20px auto;
	padding:				0;
	width:					960px;
}

/* header */

	#page-header {
		position:			relative;
		height: 			165px;
	}
	
	#headerLogo {
		position:			absolute;
		top:				0px;
		left:				80px;
	}
	
	#contactIcon {
		position:			absolute;
		top:				110px;
		left:				0px;
	}
	
	#headerContent {
		position:			absolute;
		top:				73px;
		left:				380px;
	}
	#headerContent img.left {
		margin-top:			20px;
	}
		
		#headerNavigation {
			float:				left;
			position:			relative;
			padding-left:		20px;
			height:				70px;
			vertical-align:		bottom;
		}
		#headerNavigation div {
			position:			absolute;
			bottom:				0px;
			width:				100%;
		}
		
		.designHeader	#headerNavigation	{ width: 360px; }
		.webHeader		#headerNavigation	{ width: 400px; }
		.developHeader	#headerNavigation	{ width: 200px; }
		.playHeader		#headerNavigation	{ width: 380px; }
		
		
		#portfolioNavigation {
			font-size:		26px;
		}

		#portfolioNavigation a:link		{ color: #fff; text-decoration: none; font-weight : bold; }
		#portfolioNavigation a:visited	{ color: #fff; text-decoration: none; font-weight : bold; }
		#portfolioNavigation a:hover	{ color: #fff; text-decoration: none; font-weight : bold; }
		#portfolioNavigation a:active	{ color: #fff; text-decoration: none; font-weight : bold; }
	
	
	#page-content {
		width:				800px;
		padding:			0px 80px;
	}
	
	#leftWing {
		position:			absolute;
		top:				290px;
		left:				0px;
	}
	#rightWing {
		position:			absolute;
		top:				290px;
		right:				0px;
	}
	
/* End SECTION::Page Structure
/*------------------------------------------------------------------------------*/




/*------------------------------------------------------------------------------*/
/* SECTION::Portfolio Fundamentals */

.caseStudyPage {
	background-color:		#000;
}

.menuSection {
	position:				absolute;
	cursor:					pointer;
	width:					800px;
}

.menuSectionBar {
	position:				absolute;
	top:					12px;
	left:					265px;
	height:					27px;
	color:					#fff;
	text-align:				right;
	padding:				5px;
	font-size:				22px;
	background-color:		#fff;
}


.sectionMenu {
	margin-top:				20px;
}

.sectionMenu img {
	margin:					0 24px 24px 0;
}
	

/* End SECTION::Portfolio Fundamentals
/*------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------*/
/* SECTION::Capabilities Page */
	
	.rollOut {
		cursor:					pointer;
	}
	
	ul.capabilities-list {
		font-size:			14px;
		list-style-type:	none;
		float:				left;
		width:				300px;
		cursor:					pointer;
	}
	ul.capabilities-list li {
		padding:			0px 0px 20px 0px;
	}
	ul.capabilities-list li ul {
		padding-top:		1px;
		margin-bottom:		0px;
	}
	
	ul.capabilities-list li li {
		margin-bottom:		0px;
		font-weight:		normal;
		margin-left:		23px;
		list-style-type:	square;
		padding-left:		0px;
		padding-bottom:		0px;
	}
	
	ul.capabilities-list p {
		margin:				0px;
		padding:			0px;
		font-weight:		normal;
		font-size:			12px;
		padding-left:		10px;
	}
	
	#showOffArea {
		margin-left:		340px;
		width:				460px;
		background-color:	#000;
		font-size:			14px;
	}
	#showOffArea div.canvas { /* fix fade in/out bug on IE, chrome: need a non-transparent BG! */
		background-color:	#000;
	}
	
	#showOffCloseIcon {
		position:			absolute;
		top:				165px;
		left:				890px;
	}
	
	
	
	/*-----------------------------------------------------
	/* Design Section */
	
	#showOffArea .caseStudyMainImageHolder {
		width:					459px;
		height:					237px;
		margin-top:				0px;
		margin-bottom:			6px;
		
	}
	#showOffArea .caseStudyImageCaption {
		font-size:				13px;
		text-align:				justify;
		padding:				0px;
		height:					35px;
	}
	
	#showOffArea .caseStudyImageSet {
		padding-top:			0px;
	}
	
	/* End Design Section */
	/*---------------------------------------------------*/
	
	
	
/* End SECTION::Capabilities Page
/*------------------------------------------------------------------------------*/



.leftColumn {
	float:					left;
	width:					300px;
}

.rightColumn {
	margin-left:			340px;
	width:					460px;
}


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


	.caseStudyInfoColumn {
		float:				left;
		width:				300px;
	}
	
	.caseStudyImageColumn {
		margin-left:		340px;
		width:				462px;
	}


.caseStudy {
	float:					left;
	height:					485px;
	width:					780px;
	background-color:		#fff;
	background-position:	470px 0px;
	background-repeat:		repeat-y;
}


.caseStudyMainImageHolder {
	margin-top:				21px;
	width:					459px;
	height:					324px;
}

.caseStudyImageCaption {
	padding:				0px 10px 0px 0px;
	margin:					9px 0px;
	font-size:				11px;
	height:					40px;
}

.caseStudyImageSet {
	padding-top:			10px;
	margin-left:			-2px;
}

.caseStudyImageSet img {
	margin-right:			8px;
	margin-bottom:			5px;
	border:					none;
	padding:				1px;
	cursor:					pointer;
	height:					71px;
	width:					84px;
}

.caseStudyImageSet img.last {
	margin-right:			0px
}

.caseStudyImageSet img.current {
	border:					1px solid #fff;
	padding:				0px !important;
}



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

.fieldName {
	width:					75px;
	float:					left;
	color:					#939598;
	margin-bottom:			7px;
}

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


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

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

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


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

#caseStudyPage0 {	font-size:	14px; }

/*------------------------------------------------------------------------------*/
/* SECTION::Contact Page  */

#contactPage {	font-size:	14px; }
#contactPage h2 {
	color:					#FCE700;
}

#contactPage a:link		{ color: #fff; text-decoration: none; }
#contactPage a:visited	{ color: #fff; text-decoration: none; }
#contactPage a:hover	{ color: #fff; text-decoration: underline; }
#contactPage a:active	{ color: #fff; text-decoration: none; }

#contactPage .textInput, #contactPage textarea {
	width:					360px;
	border:					1px solid #fff;
}
#contactPage select {
	width:					260px;
	border:					1px solid #fff;
}

#contactPage form table td { padding-bottom: 8px; }

/* End SECTION::Contact Page
/*------------------------------------------------------------------------------*/



#pimpMyIdeaPage {
	position:				relative;
	background:				url(../images/play/pimpMyIdeaBackground.png) no-repeat;
	height:					565px;
	width:					881px;
	margin-left:			-40px;
	margin-top:				-30px;
}
	#pimpMyIdeaIntro {
		position:			absolute;
		top:				30px;
		left:				404px;
		width:				460px;
	}

	#pimpMyIdeaStep1 {
		position:			absolute;
		top:				190px;
		left:				440px;
		width:				193px;
	}

	#pimpMyIdeaStep2 {
		position:			absolute;
		top:				202px;
		left:				712px;
		width:				130px;
	}

	#pimpMyIdeaStep3 {
		position:			absolute;
		top:				417px;
		left:				343px;
		width:				192px;
	}
	
	#criteriaPopUp {
		visibility:			hidden;
		position:			absolute;
		top:				170px;
		left:				580px;
		width:				180px;
		padding:			20px;
		background:			#fd0b99;
		color:				#000;
	}
	
	#criteriaCloseIcon {
		position:			absolute;
		top:				10px;
		right:				10px;
	}
	
	#contactUsLink {
		position:			absolute;
		top:				455px;
		left:				190px;
	}
	

/*------------------------------------------------------------------------------*/
/* SECTION::Global Widgets  */

	.designHover:hover span { color: #FF008A; }
	.webHover:hover span    { color: #00AEFF; }
	.developHover:hover span{ color: #FFAE00; }
	.playHover:hover span   { color: #B4FF00; }
	
	
	.popUpCanvas {
		background:			#fff;
		padding:			15px 20px;
		color:				#000;
	}
	
/* End SECTION::Global Widgets
/*------------------------------------------------------------------------------*/






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

	.red	{ color:		#FF008A; }
	.orange { color:		#FFAE00; }
	.yellow { color:		#FFE400; }
	.green	{ color:		#B4FF00; }
	.blue	{ color:		#00AEFF; }
	.purple { color:		#7A54AC; }
	
.nextElement {
	margin-top:				6px;
}
.nextSection {
	display:				block;
	margin-top:				16px;
}

.elementSet td { padding-top: 4px; }


/* 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-left: auto; margin-right: 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; }
	.clearLeft	{ clear: left; }
	.clearRight { clear: right; }
	
	.clickable	{ cursor: pointer; }
	.strikeText { text-decoration: line-through; }
	.transparent{ border: none !important; background: transparent; }
	
/* End SECTION::Universal Utility
/*------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------*/
/* Drop Shadow Elements */
html>body .ds1UR { background: url(../images/chrome/ds1UR.png) right top no-repeat; }
html>body .ds1LL { background: url(../images/chrome/ds1LL.png) left bottom no-repeat; padding-top: 9px; padding-left: 9px; }
html>body .ds1M { background: url(../images/chrome/ds1M.png) bottom right; }
html>body .ds1C { position: relative; left: -9px; top: -9px; }
/*------------------------------------------------------------------------------*/