/* ----------------------------------------------  /css/global.css  -- //
 *	
 *	Title:		Global Stylesheet
 *	Author:		Chris Brant <chris@chrisbrant.com>
 *	Copyright:  2010, Chris Brant.  All rights resevered.
 *	
 * ------------------------------------------------------------------- */


/* ----------------------------------------------------  shorthand  -- //
 *	
 *	[PROPERTY:margin, padding, border-width]
 *		(1 value ) property: all-sides;
 *		(2 values) property: top and bottom, right and left;
 *		(3 values) property: top, left and right, bottom;
 *		(4 values) property: top right bottom left;
 *	
 *	[PROPERTY:border]
 * 		(3 values) property: border-width border-style border-color;
 *	
 *	[PROPERTY:background]
 *		(1 value ) property: background-color;
 *		(3 values) property: background-color background-image background-repeat;
 *		(5 values) property: background-color background-image background-repeat background-attachment background-position;
 *	
 *	[PROPERTY:font]
 *		(6 values) property: font-style font-variant font-weight font-size/line-height font-family;
 *	
 *	[PROPERTY:list-style]
 *		(3 values) property: list-style-type list-style-position list-style-image;
 *	
 *	[PROPERTY:outline]
 *		(3 values) property: outline-color outline-style outline-width; 
 *	
 * ------------------------------------------------------------------- */


/* -------------------------------------------------------  colors  -- //
 *	
 *	White.............: #FFFFFF
 * 	light Gray........: #EEEEEE
 *	Medium Gray.......: #CCCCCC
 *	Dark Gray.........: #AAAAAA
 *  Blue..............: #1BBCFF
 *	
 * ------------------------------------------------------------------- */


/* -------------------------------------------------------  global  -- */

body {
	font-family:'DroidSansRegular', Arial, sans-serif;
	font-size:1em;
	color:#FFF;
	margin:0;
	padding:0;;
	background:#3d3b3e url('../img/bg.png') repeat;
	text-shadow: 0px -1px 0px #000;
}

p {
	margin-top: 1.2em;
}

h1 {
	height:120px;
	padding: 30px 0 0 30px;
	margin: 10px 0 10px 0;
	font-size:25px;
	line-height: 1.2em;
	font-weight: normal;
	color:#EEE;
	background-color: rgba(0, 0, 0, 0.3);
}

h2 {
	font-size:25px;
	line-height: 1.4em;
	font-weight: normal;
	padding: 45px 30px 55px 30px;
	color:#AAA;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.top {
	position: relative;
	display:block;
	float:right;
	margin:10px 0 0 0;
}

.top a {
	position: relative;
	display: block;
	text-indent:-9999px;
	width:100px;
	height:150px;
	background-image:url('../img/ui-sprite.png');
	background-repeat: no-repeat;
	background-position: 50% -56px;
}


/* ---------------------------------------------------------  wrap  -- */

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


/* --------------------------------------------------------  visor  -- */

#visor {
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-color: black;
	opacity:0.0;
	display: none;
}


/* -------------------------------------------------------  header  -- */

header {
	position:relative;
	display:block;
	width:960px;
	height:500px;
	margin:0 auto;
	
	/** For browsers that don't support CSS gradients **/
	background:transparent url('../img/glow.png') no-repeat scroll 50% 0;
	
	/** WebKit **/
	background-image: -webkit-gradient(
		radial, 50% 0%, 480, 50% 0%, 0,
		from(rgba(255,255,255,0.0)),
		to(rgba(255,255,255,0.2)),
		color-stop(1,#FFF)
	);
	
	/** Mozilla **/
	background-image: -moz-radial-gradient(
		50% 0% 0deg,
		circle cover,
		rgba(255, 255, 255, 0.2),
		rgba(255, 255, 255, 0.0),
		rgba(255, 255, 255, 0.0) 
		960px
	);
}


/* ---------------------------------------------------------  logo  -- */

#logo-container {
	position: relative;
	width:400px;
	height:232px;
	margin:0 auto;
}

div#logo {
	width:400px;
	height:232px;
	background-repeat:no-repeat;
	background-position:50% 50%;
	margin:0 auto;
	text-indent:-9999px;
}

.noFlash div#logo {
	background-image:url('../img/logo.png');
}

object#logo {
	position:relative;
	width:400px;
	height:200px;
	margin:16px auto;
	background-position: 0% 0%;
	background-repeat: no-repeat;
}


/* ------------------------------------------------------  tagline  -- */

#tagline {
	text-align:center;
	line-height:1.6em;
	padding:10px;
	font-size:1.3em;
	font-style: italic;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	color:#AAA;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
}


/* ----------------------------------------------------------  nav  -- */

nav {
	display:block;
	clear:both;
	height:170px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

nav ul {
	clear:both;
}

nav ul li {
	display: block;
	float:left;
	margin:10px;
	margin-left:0;
}

nav ul li.current {
	margin-bottom:0px;
}

nav ul li.current a {
	height:160px;
	background-color: rgba(0, 0, 0, 0.3);
}

nav ul li.current a span.title,
nav ul li.current a:hover span.title {
	color:#CCC;
	color:#FFF;
}

nav ul li.current a:hover span.info {
	text-indent:-9999px;
}

nav ul li.last {
	margin-right:0;
}

nav ul li a {
	display:block;
	width:232px;
	height:150px;
	text-decoration:none;
	background-color: rgba(0, 0, 0, 0.2);
}

nav ul li a:hover {
	background-color: rgba(0, 0, 0, 0.3);
}

nav ul li.last a {
	width:234px;
}

nav ul li a span.title {
	display:block;
	font-size:1.2em;
	line-height:1.2em;
	color:#AAA;
	padding:30px;
	padding-bottom:0px;
}

nav ul li a:hover span.title {
	color:#1BBCFF;
}

nav ul li a span.info {
	display:block;
	text-indent:-9999px;
	font-size:13px;
	line-height:1.4em;
	color:#AAA;
	padding:30px;
}

nav ul li a span.info p {
	margin: 0;
	padding: 0;
}

nav ul li a:hover span.info,
nav ul li a:hover span.info p {
	text-indent:0px;
}


/* ----------------------------------------------------  portfolio  -- */

#portfolio {
	margin-top:20px;
	margin-bottom:160px;
}

#portfolio .project {
	position: relative;
	margin-bottom: 30px;
	background-color: rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

#portfolio .project .media {
	position: relative;
	float: left;
	overflow: hidden;
	border:10px solid transparent;
	border-bottom:none;
	width: 940px;
}

#portfolio .project .media .panel {
	display: block; 
	float: left;
}

#portfolio .project .prev {
	position: relative;
	display:block;
	float:left;
	text-align: left;
	margin-left:10px;
}

#portfolio .project .next {
	position: relative;
	display:block;
	float:left;
}

#portfolio .project .prev a {
	position: relative;
	display: block;
	float:left;
	text-indent: -9999px;
	background-color: rgba(255, 255, 255, 0.03);
	background-image: url('../img/ui-sprite.png');
	background-repeat: no-repeat;
	background-position: 50% 11px;
	width: 240px;
	height:40px;
}

#portfolio .project .next a {
	position: relative;
	display: block;
	float:left;
	text-indent: -9999px;
	background-color: rgba(255, 255, 255, 0.03);
	background-image: url('../img/ui-sprite.png');
	background-repeat: no-repeat;
	background-position: 50% -23px;
	width: 100px;
	width: 240px;
	height:40px;
}

#portfolio .project .next a:hover,
#portfolio .project .prev a:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

#portfolio .project .pagination-container {
	position: relative;
	display: block;
	float: left;
	background-color: rgba(255, 255, 255, 0.03);
	width:458px;
	margin:0 1px;
	height: 40px;
}

#portfolio .project .pagination {
	position: relative;
	display: block;
	text-align: center;
	width: 100px;
	margin:0 auto;
	height:40px;
}

#portfolio .project .pagination li {
	position: relative;
	float: left;
	display: block;	
	width: 25px;
	height: 26px;
	background-color: transparent;
}

#portfolio .project .pagination li a {
	position: relative;
	float:left;
	display: block;
	text-indent: -9999px;
	background-image: url('../img/ui-sprite.png');
	background-position: 50% -203px;
	background-repeat: no-repeat;
	width: 25px;
	height: 40px;
}

#portfolio .project .pagination li a.current {
	background-position: 50% -229px;
}

#portfolio .project .title {
	clear: both;
	font-size:21px;
	color:#EEE;
	margin:0 0 0 20px;
	padding:20px 0 0 0;
}

#portfolio .project .details {
	float:left;
	width:700px;
}

#portfolio .project .details .role {
	margin:10px 10px 0 20px;
	color:#1BBCFF;
}

#portfolio .project .details .tech {
	margin:20px 240px 20px 20px;
	color:#AAA;
	font-size:13px;
	line-height:1.6em;
}

#portfolio .project .details .tech a {
	color:#AAA;
}

#portfolio .project .credits {
	float:left;
	width:260px;
	text-align: right;
	color:#AAA;
}

#portfolio .project .credits .agency {
	font-size:21px;
	margin:0 20px 0 0;
	padding:20px 0 0 0;
}

#portfolio .project .credits .client {
	margin:10px 20px 0 0;
	font-size: 1.0em;
}

#portfolio .project .credits .awards {
	margin:20px 20px 0 0;
	font-size:13px;
	line-height: 1.6em;
}


/* -------------------------------------------------  capabilities  -- */

#capabilities {
	margin-bottom:160px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#capabilities .capabilities-list {
    /** need to fix, shouldn't have to define height *******************/
	height: 144px;
	padding-top:40px;
	padding-bottom:20px;
	background-color: rgba(0, 0, 0, 0.1);
}

#capabilities ul {
	list-style-type: disc;
	list-style-position: inside;
}

#capabilities ul li {
	float:left;
	width:240px;
	padding-bottom:20px;
	padding-left:60px;
	color:#1BBCFF;
/* 	text-shadow: 0px -1px 0px #000; */
}

#capabilities ul li span {
	color:#AAA;
}


/* --------------------------------------------------------  about  -- */

#about {
	margin-bottom:160px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#about .profile {
	float:left;
	display: block;
	width:292px;
    /** need to fix, shouldn't have to define height *******************/
	height: 645px;
	padding:10px;
	overflow:hidden;
	background-color:rgba(0, 0, 0, 0.2);
}

#about .profile.middle {
	margin-left:10px;
	margin-right:10px;
	width:296px;
}

#about .profile.last {
	float:none;
}

#about .profile .photo {
	background-color:rgba(0, 0, 0, 0.1);
}

#about .profile .photo img {
	width:272px;
	height: 168px;
	padding:10px;
}

#about .profile.middle .photo img {
	width:276px;
}

#about .info {
	padding:10px;
	padding-top:20px;
}

#about .info .name {
	font-size:25px;
	color: #EEE;
}

#about .info .title {
	padding-top:10px;
	color:#1BBCFF;
}

#about .info .background {
	padding-top:10px;
	font-size:13px;
	line-height:1.6em;
	color:#AAA;
}


/* ------------------------------------------------------  contact  -- */

#contact {
	margin-bottom:160px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#contact h2 {
	text-align:center;
}


#contact .contact-container {
	background-color: rgba(0, 0, 0, 0.2);
	padding:30px;
	float:left;
}

#contact .contact-container .details {
	float:left;
	padding:10px;
	margin-right:20px;
	width:246px;
}

#contact .contact-container .map {
	float:right;
	background-color: rgba(0, 0, 0, 0.1);
}

#contact .contact-container .map img {
	border:10px solid transparent;
	width: 594px;
	height: 272px;
}

#contact .contact-container .details div {
	padding-bottom:20px;
	margin-bottom:20px;
	border-bottom:1px solid rgba(255, 255, 255, 0.1);
}

#contact .contact-container .details div h3 {
	font-weight: normal;
	font-size:1.3em;
	padding-bottom:10px;
	color: #EEE;
}

#contact .contact-container .details div div {
	line-height:1.4em;
	padding-bottom:0px;
	padding-left:10px;
	color:#AAA;
	border-bottom:none;
	margin-bottom:0;
	font-size:13px;
}

#contact .contact-container .details div.email {
	padding-bottom:0px;
	margin-bottom:0;
	border-bottom:none;
}

#contact .contact-container .details div.email a {
	color:#AAA;
}


/* -------------------------------------------------------  footer  -- */

footer {
	display: block;
	position: relative;
	clear:both;
	padding-top:80px;
	padding-bottom:40px;
}

footer .copyright {
	width:229px;
	height:31px;
	margin:0 auto;
	font-size:13px;
	line-height:31px;
	text-align:center;
	color:#AAA;
	background-image:url('../img/footer-bg.png');
	background-repeat:no-repeat;
	background-position: 0% 0%;

}