/* CSS: Alpheus Media */

/* -------------------------------------------------------- */
/* GLOBAL styles */
/* -------------------------------------------------------- */

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}

strong {font-weight: bold}
em {font-style: italic}

body {
	background: #000;
	font-family: helvetica, arial, verdana, sans-serif;
	}

#wrapper {width: 938px; margin: 15px auto; position: relative;  z-index: 30;}

.bg {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}

h1 {color: #fff; font-size: 48px; font-weight: bold; letter-spacing: -0.05em;}
h2 {color: #fff; font-size: 23px; line-height: 23px; padding-bottom: 16px; font-weight: bold; letter-spacing: -0.05em;}
#about h2 {color: #000;}
h3 {color: #000; font-size: 23px; line-height: 23px; font-weight: bold; letter-spacing: -0.05em;}
h4 {color: #f7941d; font-size: 13px; line-height: 18px; font-weight: bold; letter-spacing: -0.05em; }
h5 {color: #a1a1a1; font-size: 11px; line-height: 18px; font-weight: bold; letter-spacing: -0.05em; text-transform: uppercase;}
p {font-size: 11px; line-height: 15px;}
#about p {font-size: 14px; line-height: 20px; padding-bottom: 14px}
ul, li {list-style: none;}
a {text-decoration: none; color: #2eafce}
a:hover {color: #000}

#logo a {	
	text-indent: -9999px;
	border: 0;
	display: block;	
	width: 215px;
	height: 39px;
	margin: 0 auto;
	background: transparent url(../i/logo_white.png) top center no-repeat;
	border: 0;
	float: left;
	}
#logodark a {	
	text-indent: -9999px;
	border: 0;
	display: block;	
	width: 215px;
	height: 39px;
	margin: 0 auto;
	background: transparent url(../i/logo_black.png) top center no-repeat;
	border: 0;
	float: left;
	}

#menu {
	text-align: right;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	padding: 11px 0 0 0;
	color: #2eafce;
	}
#menu a {color: #fff; padding: 3px 3px 2px 3px;}
#menu a:hover {background: #000; padding: 3px 3px 2px 3px;}
a#menuon {color:#fff;  background: #000}

#menudark {
	text-align: right;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	padding: 11px 0 0 0;
	color: #2eafce;
	}
#menudark a {color:#000; padding: 3px 3px 2px 3px;}
#menudark a:hover {color:#fff; padding: 3px 3px 2px 3px; background: #000}
#menudark a#menuon {color:#fff;  background: #000}


#contentwrapper {
	width: 780px;
	margin: 30px auto;
	background: #fff;
	clear: both;
	}

#hero {width: 760px; height: 378px; border: 10px solid #fff; }
#video {width: 760px; height: 428px; border: 10px solid #fff; }
#video_sm {width: 760px; height: 428px; border: 10px solid #fff; background: #000; text-align: center}

#content {
	clear: both;
	}

.clear {clear: both;}
.clearborder {clear: both; height:10px; background: #fff;}

#sidecol {
	width: 217px;
	margin: 0 10px 0 10px;
	}

#sidecol h3 {display: block; padding: 15px 10px 10px 10px; background: #e1e1e1;}
#sidecol li {display: block; padding: 8px 10px 10px 10px; background: #fff; border-top: 1px dotted #e1e1e1}
#sidecol h4.more {display: block; padding: 8px 10px 10px 10px; border-top: 2px solid #e1e1e1}
#sidecol a {color: #2eafce}
#sidecol a:hover {color: #000}

#maincol {
	float: right;
	width: 543px;
	}

#footer {clear: both; padding: 550px 0 150px 0; font-size: 11px;
	width: 938px;
	margin: 30px auto;
}
#returntop {text-align: right; color:#fff; text-transform: uppercase; font-weight: bold}
#returntop a {color:#fff}
#ftrcontent {font-size: 14px; font-weight: bold; margin-bottom: 1px}
#ftrmenu {
	text-align: right; 
	display: block; 	
	text-transform: uppercase;
	color: #2eafce;
	float: right;
	background: #fff;
	padding: 10px 10px 7px 10px;
	}
#ftrmenu a {color: #000; padding: 3px 3px 2px 3px;}
#ftrmenu a:hover {color: #666; padding: 3px 3px 2px 3px;}

body #menu a#menuon {color:#fff;  background: #000}

#bgcaption {
	color: #fff;
	padding: 10px 10px 7px 10px;
	
	}
#bgcaption a {color: #fff;}

#copyright {clear: both; font-size: 10px; display: block; padding: 10px; color: #000; background: #fff;}




/* -------------------------------------------------------- */
/* HOME styles */
/* -------------------------------------------------------- */

#homeprojects {
	float: right;
	width: 543px;
	}

#homeprojects li {margin-bottom: 10px}
#homeprojects li a {display: block; width: 523px; height: 118px; background: #e1e1e1; color: #7a7a7a; font-size: 11px; line-height: 15px; padding: 0 10px 10px 0}
#homeprojects li a h5 {padding-top: 10px}
#homeprojects li a:hover {background: #fff}

.homeproject {width: 523px; height: 116px; background: #e1e1e1; margin-bottom: 10px; color: #7a7a7a; }
img.projthumb {float: left; margin: 0 10px 0 0 }
.projdescr {margin: 10px 10px 10px 186px;}



/* -------------------------------------------------------- */
/* WORK styles */
/* -------------------------------------------------------- */

#projectfilter {
	margin: 30px auto 20px auto;
	background: #000;
	clear: both;
	font-size: 15px;
	line-height: 15px;
	font-weight: bold;
	padding: 10px;
	color: #2eafce;
	}
#projectfilter a {color: #fff; padding: 3px 5px 0 5px;}
#projectfilter a:hover {background: #2eafce;}
#projectfilter a#workon {color:#fff;  background: #2eafce}

#workprojects  {
	margin: 0 auto;
	padding: 15px 0 20px 0;
	clear: both;
	}
	
#workprojects li {margin: 5px; float: left; border: 10px solid #fff; height: 128px;}
#workprojects li a {display: block; width: 277px; height: 128px; background: #e1e1e1; color: #7a7a7a; font-size: 11px; line-height: 15px; padding-right: 5px}
#workprojects li a h5, #ftrprojects li a h5 {padding-top: 10px}
#workprojects li a:hover, #ftrprojects li a:hover {background: #fff}

#workprojects li.comingsoon {display: block; border: 10px solid #bdbdbd; width: 277px; height: 128px; background: #bdbdbd; font-size: 11px; line-height: 15px; padding-right: 5px}
#workprojects li.comingsoon h5 {padding-top: 10px; color: #999}
#workprojects li.comingsoon h3 {color: #999}

#ftrprojects  {
	margin: 0 auto 1px auto;
	clear: both;
	background: #fff;
	border: 5px solid #fff;
	 height: 138px;
	}

#ftrprojects li {margin: 5px; float: left; height: 128px;}
#ftrprojects li a {display: block; width: 294px; height: 128px; background: #e1e1e1; color: #7a7a7a; font-size: 11px; line-height: 15px; padding-right: 5px}

	

/* -------------------------------------------------------- */
/* PROJECT styles */
/* -------------------------------------------------------- */

#projoptions {margin: 0; padding: 10px; font-size: 18px; font-weight: bold; color: #000; letter-spacing: -0.05em;}
#projoptions a:hover {color:#fff}

body#fightinggoliath #video {background: transparent url(../i/fg_10.jpg) top center no-repeat; border: 10px solid #fff; }
body#fightinggoliath h1 {margin: 180px 0 0 400px}
body#fightinggoliath #projoptions {background: #333a48;}

body#last_best_hope #video {background: transparent url(../images/uploads/projects/lbh.jpg) top center no-repeat; border: 10px solid #fff; }
body#last_best_hope h1 {margin: 40px 0 0 40px}
body#last_best_hope #projoptions {background: #242320;}
body#last_best_hope #projoptions a {}

body#ss #video {background: transparent url(../i/bg_ss7.jpg) top center no-repeat; border: 10px solid #fff; }
body#ss h1 {margin: 240px 0 0 40px}
body#ss #projoptions {background: #000; color:#333}

body#lafmanifesto #video {background: transparent url(../i/lafmanifesto.jpg) top center no-repeat; border: 10px solid #fff; }
body#lafmanifesto h1 {margin: 300px 0 0 40px}
body#lafmanifesto #projoptions {background: #000; color:#333}

body#sot #video {background: transparent url(../i/sot.jpg) top center no-repeat; border: 10px solid #fff; }
body#sot h1 {margin: 270px 0 0 320px; color: #000}
body#sot #projoptions {background: #000; color:#333}

body#healthychild #video {background: transparent url(../i/healthychild.jpg) top center no-repeat; border: 10px solid #fff; }
body#healthychild h1 {margin: 150px 0 0 380px; color: #000}
body#healthychild #projoptions {background: #2d4040; color:#808d32}

body#whenirise #video {background: transparent url(../i/barbara.jpg) top center no-repeat; border: 10px solid #fff; }
body#whenirise h1 {margin: 300px 0 0 400px; color: #fff}
body#whenirise #projoptions {background: #000; color:#333}

body#lschallenge #video {background: transparent url(../i/lschallenge.jpg) top center no-repeat; border: 10px solid #fff; }
body#lschallenge h1 {margin: 330px 0 0 50px; color: #fff}
body#lschallenge #projoptions {background: #000; color:#333}

body#citybycity #video {background: transparent url(../i/citybycity.jpg) top center no-repeat; border: 10px solid #fff; }
body#citybycity h1 {margin: 220px 0 0 450px; color: #fff}
body#citybycity #projoptions {background: #000; color:#333}

body#ls_globalcancer #video {background: transparent url(../i/ls_globalcancer.jpg) top center no-repeat; border: 10px solid #fff; }
body#ls_globalcancer h1 {margin: 300px 0 0 50px; color: #fff}
body#ls_globalcancer #projoptions {background: #000; color:#333}

body#sot_campaign #video {background: transparent url(../i/sotcampaign.jpg) top center no-repeat; border: 10px solid #fff; }
body#sot_campaign h1 {margin: 30px 0 0 30px; color: #fff}
body#sot_campaign #projoptions {background: #000; color:#333}

body#laf2008 #video {background: transparent url(../i/laf2008.jpg) top center no-repeat; border: 10px solid #fff; }
body#laf2008 h1 {margin: 200px 0 0 20px; color: #fff}
body#laf2008 #projoptions {background: #000; color:#333}

#about {background: #e1e1e1; padding: 20px; color: #7a7a7a; }
#awards {clear: both; border-top: 1px dotted #999; background: #fff; margin: 0 10px 10px 10px }
#awards img {padding: 10px 3px 15px 3px} 
.optionOn {color: #fff}

#projcontent {background: #ccc; border-bottom: 10px solid #fff; border-left: 10px solid #fff; border-right: 10px solid #fff}
#projsidecol {color: #666; background: #ccc; margin: 0 0 0 10px; width: 190px; padding: 10px 0 10px 10px}
#projsidecol li {font-size: 12px; line-height: 18px; padding: 6px 0; }


/* -------------------------------------------------------- */
/* BLOG styles */
/* -------------------------------------------------------- */

#blogcol {clear: both; float: left; width:700px; margin: 20px 0}
.blogpost {background: #fff; border: 10px solid #e1e1e1; padding: 20px; margin: 0 0 10px 0}
.blogpost h2 {font-size: 32px; line-height: 32px; padding-bottom: 0px; font-weight: bold; letter-spacing: -0.05em; color: #000;}
.blogpost p {font-size: 14px; line-height: 20px; padding: 10px 0; color: #7a7a7a;}
.blogmeta {margin: 10px 0 0 0; background: #e1e1e1; color: #acacac; padding: 10px; font-weight: bold; font-size: 13px;}
#blogside {width: 227px; margin: 20px 0 0 0; float: right}
#blogside ul  {background: #fff; color: #a7a7a7; margin: 0 0 10px 0; border: 10px solid #fff; font-weight: bold; font-size: 14px; padding-bottom: 5px }
#blogside ul li {padding: 3px 10px}
.sidebox  {background: #fff; color: #a7a7a7; margin: 0 0 10px 0; border: 10px solid #fff; font-weight: bold; font-size: 14px; padding: 3px 10px 5px 10px }
.sidebox input {border: 1px solid #ccc; padding: 4px; width: 100%;}
.post_utilities {padding: 10px; margin: 10px 0 0 0; background: #e1e1e1; font-size: 13px; font-weight: bold; color: #a1a1a1; }



/* -------------------------------------------------------- */
/* ABOUT styles */
/* -------------------------------------------------------- */

h1.aboutheadline {font-size: 72px; clear: both; margin: 130px 0}
#blogside h2{padding: 0}
.aboutcontent {background: #e1e1e1; border: 10px solid #fff; padding: 20px; margin: 0 0 10px 0; color: #7a7a7a;}
.aboutcontent h2 {font-size: 32px; line-height: 32px; padding-bottom: 14px; color: #000; font-weight: bold; letter-spacing: -0.05em;}
.aboutcontent p {font-size: 14px; line-height: 20px; padding-bottom: 14px}
#blogside h3 {display: block; padding: 15px 10px 10px 10px; background: #e1e1e1; margin-bottom: 5px;}
#alpheusmyth {border: 10px solid #fff; color: #a7a7a7; background: #e1e1e1; margin: 550px 0 0 0; }
#alpheusmyth p {float: right; font-size: 24px; font-weight: bold; padding: 12px; width: 420px; line-height: 28px;}


/* -------------------------------------------------------- */
/* CONTACT styles */
/* -------------------------------------------------------- */

#contactwrapper {clear: both; background: #e1e1e1; border: 10px solid #fff; margin: 30px 0}
#contactinfo {float: right; color: #000; padding: 20px 30px 20px 0; font-size: 36px; font-weight: bold; width: 460px}
#contactinfo h3 {padding: 24px 0 4px 0}
#contactinfo p {font-weight: normal; color: #666; font-size: 14px; line-height: 18px}


/* -------------------------------------------------------- */
/* CLIENT styles */
/* -------------------------------------------------------- */

body#login {
	background: #666;
	font-family: helvetica, arial, verdana, sans-serif;
}

#loginwrapper {clear: both; background: #e1e1e1; border: 10px solid #fff; margin: 30px auto; width: 400px; padding: 20px}
#loginwrapper p {clear:both; font-size: 14px; line-height: 20px; padding: 0 0 14px 0}
#loginwrapper h3 {display: block; padding: 0 0 14px 0; background: #e1e1e1; }

#loginwrapper label {
	width: 6em;
	float: left;
	margin-right: 0.5em;
	display: block;
	padding: 2px 0 0 0;
	}
	
input {
	color: #666;
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
	}

input.submit {
	color: #fff;
	background: #2eafce;
	border: none;
	margin-left: 6.5em;
	padding: 6px;
	}
	
p.checkbox {margin-left: 6.5em;}	
#loginwrapper p.checkbox label {float: none; display: inline;}

#clientmenu {
	text-align: right;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	padding: 11px 0 0 0;
	color: #666;
	}
#clientmenu a {color: #666; padding: 3px 3px 2px 3px;}
#clientmenu a:hover {background: #000; color: #fff; padding: 3px 3px 2px 3px;}
a#menuon {color:#fff;  background: #000}

#deliverable_movie {padding: 14px 0}


/* HOME HERO */
#hero {background: #000; height: 288px; padding: 90px 30px 0 30px; color:#a1a1a1; width: 700px;}
#hero h1 {font-size: 72px; letter-spacing: -0.05em;}
#hero h3 {font-size: 22px; letter-spacing: -0.05em; color:#a1a1a1; margin-bottom: 22px;}
#hero img {padding: 0 0 0 5px; margin-bottom: -3px;}