@charset "utf-8";
/*
Copyright is held by original owners.
CSS Document: Electric Playground
Version: 1.02
*/

/*
ATTRIBUTES
**********
Font Primary: #9b9b9b, Arial, 12px
Page Heading: #c7c7c7, NeoTech, 30px
Content Headings: #b2b0c7, NeoTech/Arial, 30px/22px
__________

DIMENSIONS
**********
Main site width: 990px
Content Main: 682px
Gutter width: 18px
__________

CSS INDEX:
**********
+ Global Styles
  - Text
  - Links
  - Lists
+ Page Layout
  - Content (Containers)
  - Columns
+ Header
+ Footer
+ Navigation
  - Primary
  - Secondary
+ Banners
+ Page Tools
+ Forms
+ Tables
+ Content (Body)
  - Headings
  - Lists
  - Events
  - Notices
__________

*/

/*
=================================
GLOBAL STYLES
*/

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

#EP {
	font-family:Arial, Helvetica, sans-serif;
	font-size:75%;
	color:#9b9b9b;
}

textarea { /* Repeat Font Family from above */
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
}
	
.accessible {
	display:block;
	position:absolute;
	left:-9999em;
	z-index:0;
	height:0px;
	width:0px;
	line-height:0px;
	font-size:0px;
	float:left;
	clear:none;
	visibility:collapse;
}

.invisible {
	display:none;
}	

.right {
	float:right;
}

.left {
	float:left;
}

.center {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.image.right, .photo.right {
	margin:0em 0em 2em 2em;
}

.image.left, .photo.left {
	margin:0em 2em 2em 0em;
}

.photo.left img {
	float:left;
}

.photo.right img {
	float:right;
}

	/* FORMS */
	form button {
	cursor:pointer;
	}

	/* LINKS */
	a {
		color:#c5bfd2;
		text-decoration:underline;
	}
	
	a:link {
		color:#c5bfd2;
	}
	a:visited {
		color:#918a9f;
	}
	a:hover {
		color:#935c8f;
	}
	a:active {
		color:#935c8f;
		outline:none;
	}
	a:focus {
		outline:none;
	}

	/* LISTS */
	#content_container ul, #content_container ol { 
		display:inline-block; /* Keep from losing bullets to floated objects */
	}
		#content_container li ul, #content_container li ol { 
			display:block; /* Restore block value */
		}
	
	
	
	
/*
=================================
PAGE LAYOUT
*/		

body {
	background:#000 url(../images/bg_page.jpg) center top no-repeat;
}

#header {
	width:990px;
	margin:0em auto;
	position:relative;
	z-index:10;
}

#banner {
	width:100%;
	text-align:center;
	position:absolute;
	z-index:1;
	top:114px;
	left:0px;
	overflow:visible;
}

#banner img {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#content_container {
	width:990px;
	margin:0em auto;
	position:relative;
	z-index:20;
	
}

#content {
	min-height:250px;
	background:url(../images/bg_content_bottom.gif) center bottom no-repeat;
}

.full #content {
	background-image:url(../images/bg_content_full_bottom.gif);
}

.home #content {
	background:none;
}

#content_container .page {
	background:url(../images/bg_content.png) center top repeat-y;
}

.full #content_container .page {
	background-image:url(../images/bg_content_full.png);
}
.home #content_container .page {
	background:none;
}
	
	/* CONTENT (containers) */
	
	#col_3x4, #col_1x4, #col_4x4 {
		position:relative;
		padding:18px;
	}
	
	#col_4X4 {
		width:954px;
		float:left;
	}
	
	#col_3x4 {
		width:682px; /* 718 */
		float:left;
	}
	
	#col_1x4 {
		width:236px; /* 272 */
		float:left;
	}
	
	/* COLUMNS */

/*
=================================
HEADER
*/

#header {
	overflow:hidden;
	height:307px;
	position:relative;
}

.home #header {
	height:345px;
}


#header .page {
	background:url(../images/bg_header.gif) left top no-repeat;
	height:119px;
	position:relative;
	z-index:10;
}

#header #company {
	position:absolute;
	left:11px;
	top:11px;
}

#header #company a {
	display:block;
	background:url(../images/logo_electric_playground.gif) left top no-repeat;
	width:324px;
	height:94px;
	text-indent:-9999em;
}


/*
=================================
FOOTER
*/
#footer {
	clear:both;
	background-color:#fff;
	margin-top:26px;
	overflow:hidden;
}

#footer .page {
	width:990px;
	position:relative;
	margin:0em auto;
}

#site_design {
	text-align:right;
}

#site_design span {
	position:absolute;
	left:-9999em;
}

#site_design a {
	display:inline-block;
	width:126px;
	height:49px;
	background:url(../images/logo_flip_creative.gif) left top no-repeat;
	margin:10px 0px 00px 0px;
}

	/* Site Links */
	#footer #site_links ul {
		background:url(../images/bg_site_link.jpg) left bottom no-repeat;
		list-style:none;
		float:left;
		width:141px;
		padding:36px 0px 0px;
	}
	
	#footer #site_links li {
		margin-left:20px;
	}
		
	#footer #site_links ul a {
		text-decoration:none;
		display:block;
		padding:3px 0px;
		font-size:.9em;
		color:#54556a;
		text-transform:capitalize;
	}
	
	#footer #site_links ul a:hover {
		text-decoration:underline;
	}

/*
=================================
NAVIGATION
*/


	/* PRIMARY */
	#nav_primary {
		width:100%;
		overflow:visible;
		height:1px;
		position:absolute;
		top:0px;
		left:0px;
		z-index:30;
	}
	
	#nav_primary .page {
		width:600px;
		margin:57px auto 0em auto;
		height:60px;
		position:relative;
		left:195px;
	}
	
		#nav_primary ul {
			margin:0em;
			padding:0em;
			list-style:none;
			float:right;
		}
		
		#nav_primary li {
			background:url(../images/bg_nav_primary_link.png) left bottom no-repeat;
			float:left;
			position:relative;
		}
		
		#nav_primary li a {
			display:block;
			width:90px;
			height:60px;
			text-indent:-999em;
			background-position:center 28px;
			background-repeat:no-repeat;
		}
		
		#nav_primary li a:hover, #nav_primary li.current a {
			background-position:center -72px; /* -100 +28 margin */
		}
		
		
		/* SIZES */
		#nav_primary .nav_pri_1 a {
			background-image:url(../images/nav_pri_1.gif);
		}
		#nav_primary .nav_pri_2 a {
			background-image:url(../images/nav_pri_2.gif);
		}
		#nav_primary .nav_pri_3 a {
			background-image:url(../images/nav_pri_3.gif);
		}
		#nav_primary .nav_pri_4 a {
			background-image:url(../images/nav_pri_4.gif);
		}
		#nav_primary .nav_pri_5 a {
			background-image:url(../images/nav_pri_5.gif);
		}
		#nav_primary .nav_pri_6 a {
			background-image:url(../images/nav_pri_6.gif);
		}
		#nav_primary .nav_pri_7 a {
			background-image:url(../images/nav_pri_7.gif);
		}
		
		
		
	
	/* SECONDARY */


	
/*
=================================
BANNERS
*/



/*
=================================
PAGE TOOLS
*/


/*
=================================
FORMS
*/

	#mailing {
		margin-top:36px;
	}
	
	.home #mailing {
		margin-top:0em;
	}
	
	#mailing h2 {
		text-transform:uppercase;
	}
	
	form .line {
		margin-bottom:1px;
		background:#000;
		padding:5px;
		border-left:1px solid #1f1f1f;
		border-right:1px solid #1f1f1f;
		white-space:nowrap;
	}
	
	form .line label {
		width:auto;
		color:#767676;
		font-weight:bold;
		margin-right:5px;
	}
	
	form .line input, form .line select, form .line textarea  {
		background:#1a1a1a;
		padding:3px 5px;
		border:none;
		color:#fff;
		cursor:pointer;
	}
	
	form .line textarea {
		margin-top:5px;
		min-height:100px;
		overflow:auto;
	}

	form .group {
		margin:6px 0px;
		padding:5px 5px 5px 0px;
		clear:both;
	} 
	
	form .buttons {
		border-top:1px solid #3b3b3b;
	}
	
	form button.submit {
		height:20px;
		width:86px;
		background:url(../images/button_submit.gif) left top no-repeat;
		margin:12px 12px 12px 0px;
	}
	
	form button span {
		position:absolute;
		left:-9999em;
	}

	/* TABLES */	
	table {
		margin-bottom:12px;
		border-collapse:collapse;
		border:1px solid #3b3b40;
		background:#d9d9e7;
		color:#1c1c1c;
	}
	
	table caption	 {
		font-size:.8em;
		background:#000;
		padding:12px;
		margin-top:12px;
		color:#c7c7c7;
	}
	
	table td, table th {
		padding:6px;
		border:1px solid #918a9f;
		border-width:0px 1px;
	}
	
	table thead th {
		background:#918a9f;
	}
	
	table tbody .alt td {
		background-color:#d2d3df;
	}
	
	table tbody th {
		background-color:#1c1c1c;
		color:#fff;
	}
	
	table tfoot th {
		background-color:#1c1c1c;
		color:#fff;
	} 


/*
=================================
CONTENT (body)
*/



	/* HEADINGS */
	h1 {
		font-size:2.5em;
		color:#c7c7c7;
		text-transform:uppercase;
		margin-bottom:18px;
		
	}
	h1.banner {
		position:absolute;
		top:-170px;
		left:18px;
	}
	h2, h3, h4 {
		font-weight:normal;
		color:#b2b0c7;
	}
	h2 {
		font-size:2em;
		margin-bottom:.5em;
		padding-bottom:.2em;
	}
	.home h2 {
		text-transform:uppercase;
		font-size:2.5em;
	}
	h3 {
		font-size:1.45em;
		margin-bottom:.5em;
		font-weight:bold;
	}
	h4 {
		font-size:1.2em;
	}
	
	h5, h6 {
		font-size:1em;
		color:#b2b0c7;
	}
	
	p + h2, ul + h2, ol + h2 {
		margin-top:1.25em;
	}
		
	/* LISTS */
	#content ul, #content ol {
		margin-bottom:18px;
		margin-left:1.4em;
		display:inline-block;
	}
	
	#content li ul, #content li ol {
		margin-bottom:0em;
	}
	
	#content ol li {
		list-style-type:decimal;
		margin-left:2em;
		margin-top:.4em;
	}
	
	#content ul li {
		margin-left:2em;
		margin-top:.4em;
	}		
	
#content p {
	margin-bottom:18px;
	line-height:1.5em;
}

#content p + ul, #content p + ol {
	margin-top:-12px;
}

/* EVENTS */
#events {
	background:url(../images/bg_events.png) left top no-repeat;
	min-height:443px; /* 479 */
	padding:18px;
	margin-bottom:18px;
	overflow:hidden;
}

#events h1 {
	text-transform:uppercase;
	margin-bottom:18px;
	font-size:3.33em;
	font-weight:normal;
}

#events .item {
	/* float:left; changed for jquery */
	position:absolute;
	left:auto;
	top:110px;
	z-index:40;
	height:390px;
}

#events .item .preview {
	position:absolute;
	left:0px;
	bottom:0px;
}

#events .item img {
	padding-bottom:21px;
	border-bottom:1px solid #636366;
	margin-bottom:9px; 
	float: left; 
}

#events .item h3 {
	display:block;
	margin:0px 4px;
	font-weight:bold;
	font-size:1.33em;
	max-width:200px;
	min-width:190px;
	position:absolute;
	bottom:325px;
	left:0px;
	height:auto;
}

#events .item p {
	display:block;
	position:absolute;
	bottom:285px;
	left:0px;
	max-width:200px;
	min-width:190px;
	height:16px;
}
	/* Positions */
	/* NOTE: this will need to change as the image sizes do!!! */
	#events .item.e1 {
		left:18px;
	}
	#events .item.e2 {
		left:208px;
	}
	#events .item.e3 {
		left:398px;
	}
	#events .item.e4 {
		left:582px;
	}
	#events .item.e5 {
		left:772px;
	}
	

	/* Colors */
	#events .item.e1 h3 {
		color:#c7fbff;
	}
	#events .item.e2 h3 {
		color:#9affa1;
	}
	#events .item.e3 h3 {
		color:#fff7a6;
	}
	#events .item.e4 h3 {
		color:#c0c6ff;
	}
	#events .item.e5 h3 {
		color:#c7fbff;
	}
	
#events .item h3 em {
	font-size:.65em;
	font-style:normal;
}

#events .item p {
	margin:0em 4px 24px 4px;
	font-weight:bold;
	color:#e2e2e2;
	font-size:1.08em;
}


/* NOTICES */
#notices {
	min-height:387px;
	background:url(../images/bg_notices.png) left top no-repeat;
	margin-bottom:18px;
}
#notices #video, #notices #photo, #notices #mailing {
	position:relative;
	padding:18px;
	float:left;
	min-height:345px;
}
#notices #video {
	width:319px; /* 355 */
}
#notices #photo {
	width:319px; /* 355 */
}
#notices #mailing {
	width:243px; /* 279 */
}
#notices .media {
	margin-bottom:18px;
}

#notices .link {
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	border-top:1px solid #5a5a5a;
	padding-top:12px;
	text-indent:18px;
}


/* SOCIAL BOOKMARKS */
#social_bookmarks {
	margin-bottom:18px;
}

#social_bookmarks h2 {
	text-transform:uppercase;
}

#content #social_bookmarks ul {
	list-style:none;
	margin:0em;
	padding:0em;
}

#content #social_bookmarks li {
	float:left;
	position:relative;
	padding:0em;
	margin:0em;
}

#social_bookmarks li a {
	float:left;
	display:block;
	background-position:left top;
	width:47px;
	height:44px;
	margin:0px 8px 8px 0px;
}

#social_bookmarks li a:hover {
	position:relative;
	top:-2px;
} 

#social_bookmarks li a span {
	position:absolute;
	left:-999em;
}

	/* Sizes */
	#social_bookmarks .facebook a {
		background-image:url(../images/icon_facebook.gif);
	}
	#social_bookmarks .myspace a {
		background-image:url(../images/icon_myspace.gif);
	}
	#social_bookmarks .twitter a {
		background-image:url(../images/icon_twitter.gif);
		width:44px;
	}
	#social_bookmarks .youtube a {
		background-image:url(../images/icon_youtube.gif);
		width:44px;
	}	
	
	
/* Events Page */
.events div {
	border-top:1px solid #636366;	
	margin:0em 0em -1px 0em;
	padding:18px;
	
}	

.events div h2 {
	font-size:1.75em;
	font-weight:normal;
	float:right;
	text-align:left;
	width:auto;
	width:40%;
	color:#935c8f;
}

#page .events div p {
	margin:0em;
}

/* Profiles */
#page .profiles {
	list-style:none;
	margin:0px;
	padding:0px;
	margin-right:-6px;
}

#page .profiles li {
	margin:0px 0px 18px 0px;
	padding:0px 18px 18px 0px;
	font-size:.9em;
	line-height:1.3em;
	float:left;
	width:142px;
}

.profiles li h3 {
	color:#c7c7c7;
	font-size:1.25em;
	padding-bottom:4px;
	margin-bottom:4px;
	border-bottom:1px solid #a1a1a1;
	margin-right:-18px;
}

#page .profiles li p {
	line-height:1.3em;
	color:#c7c7c7;
}

#page .profiles li a {
	display:block;
	margin:.1em 0em;
	color:#935c8f;
	font-weight:bold;
	text-decoration:none;
}

#page .profiles li a:hover {	
	text-decoration:underline;
}

.profile {
	padding-left:225px;
	position:relative;
	min-height:485px;
}

.profile h1 {
	padding-top:18px;
}

.profile * {
	position:relative;
	z-index:15;
}

.profile .preview {
	position:absolute;
	z-index:1;
	left:-18px;
	top:0px;
}