/* ==============================================================
Filename: default.css
Template: Default Template
Author: Chris Schmitz
Contact: chris@beperceived.com
Date Created: 10/5/2009
Media: Screen
-----------------------------------------------
Notes: The main style information for the Perception website
http://www.beperceived.com
============================================================== */

/* --------------------------------------------

Table of Contents

	1. Main Container

Colors
	
	#444444 = Dark Gray
	
-------------------------------------------- */

/* =General Styles */
h2.header-image {
	background: url(../images/main-sprite.png) no-repeat;
	height: 44px;
	margin: 0;
	padding: 0;
	width: 240px;
}


/* =Main Layout */
body {
	background: #f3f3f3;
}

#container { 
	margin: 0 auto;
	width: 960px;
}

#home-footer {
	background: url(../images/footer.png) no-repeat top left;
	height: 282px;
	margin-left: -485px;
	padding: 25px 15px 0 45px;
	position: absolute;
		bottom: 15px;
		left: 50%;
	width: 910px;
}

#side-ad {
	position: absolute;
		top: 77px;
		right: -136px;
}

	#side-ad a {
		border: 3px solid #000;
		display: block;
		height: 600px;
		width: 120px;
	}
	
	#side-ad a:hover, a#footer-ad:hover {
		border-color: #555;
	}


/* =Header Styles */
#header a#logo {
	background: url(../images/logo.png) no-repeat 0 0;
	display: block;
	height: 76px;
	margin: 25px 10px;
	width: 250px;
}

#header ul#main-nav {
	height: 45px;
	list-style: none;
}

	#header ul#main-nav li {
		float: left;
		position: relative;
	}
	
		#header ul#main-nav > li > a {
			display: block;
			height: 45px;
			text-indent: -9999em;
			width: 240px;
		}
	
		#header ul#main-nav li a#nav-live { background: #000 url(../images/main-sprite.png) no-repeat 0 0; }
		#header ul#main-nav li a#nav-live:hover { background: #000 url(../images/main-sprite.png) no-repeat 0 -45px; }
		
		#header ul#main-nav li a#nav-work { background: #000 url(../images/main-sprite.png) no-repeat -240px 0; }
		#header ul#main-nav li a#nav-work:hover { background: #000 url(../images/main-sprite.png) no-repeat -240px -45px; }
		
		#header ul#main-nav li a#nav-enjoy { background: #000 url(../images/main-sprite.png) no-repeat -480px 0; }
		#header ul#main-nav li a#nav-enjoy:hover { background: #000 url(../images/main-sprite.png) no-repeat -480px -45px; }
		
		#header ul#main-nav li a#nav-join { background: #000 url(../images/main-sprite.png) no-repeat -720px 0; }
		#header ul#main-nav li a#nav-join:hover { background: #000 url(../images/main-sprite.png) no-repeat -720px -45px; }
		
		#header ul#main-nav li ul {
			display: none;
		}
		
		#header ul#main-nav li:hover ul {
			display: block;
		}
		
		#header ul#main-nav li ul {
			position: absolute;
				top: 45px;
				left: 0;
				z-index: 100;
		}
		
			#header ul#main-nav li ul li a {
				border: 1px solid #333;
				border-top: none;
				color: #000;
				display: block;
				font-family: verdana;
				font-size: 14px;
				padding: 5px 10px;
				width: 218px;
			}
			
			#header ul#main-nav li ul li a:hover {
				color: #fff;
			}
			
			#header ul#main-nav li#nav-live-li ul li a {
				background: rgba(57, 101, 176, .9);
			}
			
			#header ul#main-nav li#nav-live-li ul li a:hover {
				background: rgba(37, 81, 156, .9);
			}
			
			#header ul#main-nav li#nav-work-li ul li a {
				background: rgba(124, 198, 75, .9);
			}
			
			#header ul#main-nav li#nav-work-li ul li a:hover {
				background: rgba(104, 178, 55, .9);
			}
			
			#header ul#main-nav li#nav-enjoy-li ul li a {
				background: rgba(119, 93, 219, .9);
			}
			
			#header ul#main-nav li#nav-enjoy-li ul li a:hover {
				background: rgba(99, 73, 199, .9);
			}
			
			#header ul#main-nav li#nav-join-li ul li a {
				background: rgba(239, 116, 39, .9);
			}
			
			#header ul#main-nav li#nav-join-li ul li a:hover {
				background: rgba(219, 96, 39, .9);
			}


/* =Slideshow and Login */
#slideshow {
	float: left;
	height: 300px;
	width: 720px;
}

	#slideshow img {
		height: 300px;
		position: absolute;
			top: 0;
			left: 0;
		width: 720px;
	}
	
	#slideshow img.current {
		z-index: 10;
	}
	
	#slideshow img.next {
		z-index: 9;
	}
	
	#slideshow div#slideshow-description {
		background: #000;
		background-color: rgba(0, 0, 0, .75);
		color: #fff;
		display: none;
		position: absolute;
			bottom: 0;
		width: 720px;
		z-index: 100;
	}
	
		#slideshow div#slideshow-description h3 {
			font: normal 28px/1em georgia, serif;
			margin-bottom: 10px;
			padding: 12px 15px 0;
		}
		
		#slideshow div#slideshow-description p {
			color: #fff;
			margin-bottom: 0;
			padding: 0 15px 15px;
		}
	
#login {
	background: url(../images/join-bg.png) repeat-y;
	float: left;
	height: 300px;
	width: 240px;
}

	#login h3 {
		color: #fff;
		font-size: 2em;
		font-weight: bold;
		margin-bottom: 5px;
		padding: 5px 10px 0;
		text-shadow: 0 0 3px rgba(50, 50, 50, .8);
	}
	
	#login form {
		padding: 0 10px;
	}
	
		#login form label {
			color: #fff;
			display: block;
			font-weight: bold;
			line-height: 1em;
			margin: 2px 0 2px 2px;
			text-shadow: 0 0 3px rgba(50, 50, 50, .8);
		}
		
		#login form input#username {
			background: url(../images/main-sprite.png) no-repeat -354px -192px;
			border: none;
			height: 20px;
			padding: 3px 5px 0;
			margin: 0;
			width: 211px;
		}
		
		#login form input#password {
			background: url(../images/main-sprite.png) no-repeat -575px -192px;
			border: none;
			float: left;
			height: 20px;
			padding: 3px 5px 0;
			margin: 0;
			width: 152px;
		}
		
		#login form input#submit {
			background: url(../images/main-sprite.png) no-repeat -737px -192px;
			border: none;
			cursor: pointer;
			float: right;
			height: 23px;
			padding: 0;
			margin: 0;
			width: 50px;
		}
	
	#login h2 {
		background-position: -480px -141px;
		margin: 10px 0;
	}

	#login ul {
		
	}
	
		#login ul li {
			background: url(../images/original-list-style.png) no-repeat 11px 0;
			color: #555;
			font-size: 12px;
			margin: 0 0 10px;
			min-height: 20px;
			padding: 0 10px 0 35px;
		}
		
			#login ul li a {
				color: #333;
			}
			
			#login ul li a:hover {
				color: #444;
				text-decoration: underline;
			}
		

/* =Front Columns */
.front-column {
	float: left;
	height: 375px;
	margin-bottom: 295px;
	width: 239px;
}

	.front-column p {
		color: #535353;
		height: 55px;
		margin: 5px 0 18px;
		padding: 0 10px;
	}
	
	.front-column ul {
		color: #535353;
		margin-bottom: 10px;
		padding: 0 10px;
	}
	
	.front-column a.icon {
		background: url(../images/homepage-icons.jpg) no-repeat 0 0;
		display: block;
		height: 75px;
		margin: 12px auto 0;
	}
	
		.front-column ul li {
			font: normal 12px/1em Verdana, sans-serif;
			margin-left: 15px;
			padding: 0 0 7px 25px;
		}
		
		.front-column ul li.image {
			background: url(../images/main-sprite.png) no-repeat -565px -216px !important;
			height: 7px;
			margin: 0;
			padding: 10px 0 3px;
			width: 220px;
		}
		
			.front-column ul li a:hover {
				color: #777;
				text-decoration: underline;
			}

#live-col {
	background: #eaeef5;
	border-right: 1px solid #ccc;
}

	#live-col h2 {
		background-position: 0 -90px;
	}
	
	#live-col ul li {
		background: url(../images/blue-list-style.png) no-repeat 0 0;
	}
	
	#live-col a.icon {
		background-position: 0 0;
		width: 77px;
	}

#work-col {
	background: #f0f7eb;
	border-right: 1px solid #ccc;
}

	#work-col h2 {
		background-position: -240px -90px;
	}
	
	#work-col ul li {
		background: url(../images/green-list-style.png) no-repeat 0 0;
	}
	
	#work-col a.icon {
		background-position: -86px 0;
		width: 75px;
	}

#enjoy-col {
	background: #efedf5;
	border-right: 1px solid #ccc;
}

	#enjoy-col h2 {
		background-position: -480px -90px;
	}
	
	#enjoy-col ul li {
		background: url(../images/purple-list-style.png) no-repeat 0 0;
	}
	
	#enjoy-col a.icon {
		background-position: -178px 0;
		width: 93px;
	}

#join-col {
	background: #fbefe8;
	width: 240px;
}

	#join-col h2 {
		background-position: -720px -90px;
	}
	
	#join-col ul li {
		background: url(../images/orange-list-style.png) no-repeat 0 0;
	}
	
	#join-col a#sign-up {
		background: url(../images/main-sprite.png) no-repeat -205px -148px;
		display: block;
		height: 43px;
		margin:  10px auto 25px;
		width: 180px;
	}
	
	#join-col a#calendar {
		background: url(../images/main-sprite.png) no-repeat 0 -145px;
		display: block;
		height: 47px;
		margin: 20px auto 0;
		width: 204px;
	}
	

/* =Footer */
#home-footer p.follow {
	padding-right: 8px;
	text-align: right;
}
	
	#home-footer p.follow a {
		color: #fff;
	}
	
	#home-footer p.follow a:hover {
		text-decoration: underline;
	}

#home-footer div#twitter {
	float: left;
	height: 95px;
	margin-right: 25px;
	width: 211px;
}

	#home-footer div#twitter h2 {
		background: url(../images/main-sprite.png) no-repeat -205px -194px;
		height: 32px;
		width: 149px;
	}

#home-footer div#text-me {
	float: left;
	height: 85px;
	margin-right: 25px;
	width: 211px;
}

	#home-footer div#text-me h2 {
		background: url(../images/text-me.png) 0 0 no-repeat;
		height: 32px;
		width: 211px;
	}
	
	#home-footer div#text-me p.follow span { color: #333; cursor: pointer; text-decoration: underline; }
	#home-footer div#text-me p.follow span:hover { color: #999; }

#home-footer div#facebook {
	float: left;
	height: 185px;
	margin-right: 25px;
	position: relative;
	width: 211px;
}

	#home-footer div#facebook h2 {
		background: url(../images/main-sprite.png) no-repeat -37px -194px;
		height: 32px;
		width: 159px;
	}

	#home-footer div#facebook p.follow {
		float: left;
		margin-bottom: 10px;
		text-align: left;
		width: 130px;
	}
	
	#home-footer div#facebook span.divider {
		color: #555;
		float: left;
		font-size: 36px;
		font-weight: bold;
		padding: 13px 10px 0 5px;
		width: 20px;
		text-shadow: 1px 1px 1px #fff;
	}

	#home-footer div#facebook a {
		display: block;
		float: left;
		height: 38px;
		width:  38px;
	}
	
	#home-footer div#facebook a#facebook-link { background: url(../images/main-sprite.png) no-repeat -921px -194px;	}
	#home-footer div#facebook a#facebook-link:hover { background: url(../images/main-sprite.png) no-repeat -883px -194px; }
	#home-footer div#facebook a#linkedin-link { background: url(../images/main-sprite.png) no-repeat -807px -194px; }
	#home-footer div#facebook a#linkedin-link:hover { background: url(../images/main-sprite.png) no-repeat -845px -194px; }

	#home-footer div#linked-in {
		clear: both;
		height: 85px;
	}
	
		#home-footer div#linked-in h2 {
			background: url(../images/main-sprite.png) no-repeat -800px -138px;;
			height: 42px;
			width: 157px;
		}

#home-footer div#copyright {
	float: right;
	height: 185px;
	margin-right: 25px;
	text-align: center;
	width: 405px;
}
	
	#home-footer div#copyright h1 {
		background: url(../images/logo.png) no-repeat;
		height: 76px;
		margin: 0 auto;
		text-indent: -9999em;
		width: 250px;
	}
	
	#home-footer div#copyright p#copy-info {
		font-weight: bold;
		margin: 10px 0;
	}
	
	#home-footer div#copyright p {
		margin: 0 0 3px;
	}
	
	#home-footer div#copyright a#footer-ad {
		border: 3px solid #000;
		display: block;
		height: 60px;
		margin: 0 auto;
		width: 290px;
	}
	
	#home-footer div#copyright a#footer-ad:hover {
		border-color: #555;
	}

		
/* =Misc. Styles */
div.float-clear {
	clear: both;
}