/**
 * Yuan Associates
 * Jan 2012
 *  
 * Author: Jericho dizon
 * www.iamthej.com
 */
 
@charset "utf-8";
/* CSS Document */

/* set height to resize according to window screen */
html,body {height:100%}
.outer {
	height:100%;
	min-height:100%;/*for mozilla*/
}
html>body #outer {height:auto}/*for mozilla */
body{
	padding:0;
	margin:0;
	background-image:url(images/shadowbg.png);
	background-position:top center;
	background-repeat:no-repeat;
	background-color:#fff;
	background-attachment:fixed;
	}
img#expando{
	position:absolute;
	display:none;
	z-index:1;
	-ms-interpolation-mode:bicubic;
}
.wide img#expando,.tall img#expando{
	display:block;
}
.wide img#expando{
	width:100%;
	height:auto;
}
.tall img#expando{
	width:auto;
	height:100%;
}
.ie6fixed{
	position:absolute;
	top:expression((ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + 'px') !important;
}
h1{
	position:absolute;
	width:100%;
	font-family:Helvetica,Arial,sans-serif;
	font-size:2em;
	padding:0.5em 0;
	margin-top:30%;
	margin-bottom:1em;
	color:#333;
	font-weight:normal;
	text-align:center;
	background-color:#fff;
	background-color:rgba(255,255,255,0.8);
	z-index:2;
}
/* page background */
#who_bg {
	background:url('../images/whois.png')no-repeat;
	background-position:center center;
	-o-background-size: 100%, auto;
	-moz-background-size: 100%, auto;
	-webkit-background-size: 100%, auto;
	background-size: 100%, auto;
}
#how_bg {
	background:url('../images/how_it_work.png')no-repeat;
	background-position:center center;
	-o-background-size: 100%, auto;
	-moz-background-size: 100%, auto;
	-webkit-background-size: 100%, auto;
	background-size: 100%, auto;
}
#profile_bg {
	background:url('../images/audience_profile2.png')no-repeat;
	background-position:center center;
	-o-background-size: 100%, auto;
	-moz-background-size: 100%, auto;
	-webkit-background-size: 100%, auto;
	background-size: 100%, auto;
}
#usp_bg {
	background:url('../images/usp.png')no-repeat;
	background-position:center center;
	-o-background-size: 100%, auto;
	-moz-background-size: 100%, auto;
	-webkit-background-size: 100%, auto;
	background-size: 100%, auto;
}
#contact_bg {
	background:url('../images/contact_us.png')no-repeat;
	background-position:center center;
	-o-background-size: 100%, auto;
	-moz-background-size: 100%, auto;
	-webkit-background-size: 100%, auto;
	background-size: 100%, auto;
}
#process_bg {
	background:url('../images/process.png')no-repeat;
	background-position:center center;
	-o-background-size: 100%, auto;
	-moz-background-size: 100%, auto;
	-webkit-background-size: 100%, auto;
	background-size: 100%, auto;
}
.content {
	width:70%;
	height:100%;
	min-height:100%;
	margin:0 auto;
}
p {
	margin: 0 0 20px 0;
}
p, ul {
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:200;
	font-style:normal;
}
.default {
	font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#fff;

}
img {
	border: 0;
}
h1, #pixels {
	font-family:"Museo 900", Verdana, serif;
	font-size-adjust:0.40;
	font-weight:700;
	font-style:normal;
}
h2 {
	font-family:"Beau Sans Pro Book", Verdana, sans-serif;
	font-size-adjust:0.531;
	font-weight:500;
	font-style:normal;
}
#logo {
	width:960px;
	margin:0 auto;
	display:block;
	padding-top:150px;
	padding-bottom:30px;
}
#logo-team {
	width:960px;
	margin:0 auto;
	padding-top:90px;
	padding-bottom:30px;
}
#txtstyle {
	font-family: 'Gudea', sans-serif;
	font-size:50px;
	color:#FFFFFF;
	text-align:left;
	line-height:47px;
	letter-spacing: -1px;
}
#txtstyle_small {
	font-family: 'Gudea', sans-serif;
	font-size:24px;
	color:#FFFFFF;
	font-weight:bold;
	text-align:left;
	letter-spacing: -1px;
}
#header h1, #pixels {
	color: #48941A;
}
.float-left {
	float: left;
	margin: 0 0 0 20px;
}
.float-right {
	float: right;
	margin: 0 20px 0 0;
}
.center {
	font-size: 2.5em;
	padding: 80px 0;
	text-align: center;
}
/* Navigation */
#nav {
	list-style: none;
	position: fixed;
	top: -10px;
}
#nav ul {
	float:right;
}
#nav li {
	margin: 0 0 10px 0;
	text-align:right;
}
#nav li a {
	opacity:0.4;
	filter:alpha(opacity=40);
}
#nav li a:hover {
	opacity:1;
	filter:alpha(opacity=100);
	font-weight:normal;
}
#nav li a:current {
	opacity:1;
	filter:alpha(opacity=100);
	font-weight:normal;
}
#header, #intro, #second {
	width: 100%;
}
#header {
	background: white;
	height: 130px;
}
/* index */
#intro, #who {
	background-color:#bcd42d;
	color: white;
}
/* USP */
#second, #usp, #profile{
	background-color:#f26c4f;
	color: white;
}
#second a {/*color:#dde89a;*/ 
	color:#fff  }
#second a:hover {color:#fff;}

/* Step */
#step1, #step2, #step3, #step4, #step5{
	background-color:#6dcff6;
	min-height: 1000px;
	color: white;
	height: 1000px;
	margin: 0;
}
/* How it works */
#third, #how {
	background-color:#6dcff6;
	color: white;
}
#fourth {
	background-color:#aeaeae;
	color: white;
}
.story {
	margin:0 auto;
	display:block;
	min-width:960px;
	width:960px;
	
}
.story .float-left, .story .float-right {
	padding: 100px 0 0 0;
	display:block;
	margin:0 auto;
	width: 350px;
}
#footer {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:12px;
	height:30px;
	margin-top:20px;
}
/* Positions the contact form so it doesn't interfere with any other content, as well as a z-index above any other elements on the page */	
#contactFormContainer {
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	z-index:1;
}
/* Hides the whole contact form until needed */	
#contactForm {
	height:340px;
	width:450px;
	background:#431e16;
	background-repeat:no-repeat;
	background-position:bottom right;
	padding:7px 12px;
	color:#fff;
	display:none;
}
/* Loading bar that will appear while the ajax magic is happening */
.bar {
	display:none;
	background:url(../images/ajax-loader.gif);
    no-repeat center;
	margin-top:100px;
	height:40px;
	width:230px;
}
/* Hides the confirmation message until needed */	
#messageSent {
	display:none;
}
/* This hides the form validation alert messages until needed */
#contactForm span {
	display:none;
	font-size:9px;
	line-height:10px;
	padding-left:6px;
	color:#f5c478;
}
/* Some styling for the contact button */
#contactFormContainer .contact .contact2{
	height:47px;
	width:211px;
	background-image:url(../images/contact_me.png);
	position:absolute;
	left:368px;
	bottom:-44px;
	cursor:pointer;
	color:#FFF;
}
/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */	
#backgroundPopup {
	display:none;
	position:fixed;
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	background:#000;
	z-index:11;
}
/* Form styling from here on out. There is nothing in here that you HAVE to use to get this to work */	
#contactForm textarea, #contactForm input {
	width:180px;
	background:#fff;
	color:#006f8c;
	border:1px solid #8a8a8a;
	height:15px;
	line-height:14px;
	font-size:11px;
	margin-left:3px;
	margin-top:3px;
	padding:2px 2px 0px 2px;
}
#contactForm input {
	background-position:0px -20px;
}
#contactForm textarea {
	height:114px;
	font-family:Verdana, Geneva, sans-serif;
	width:400px;
}
#contactForm .submit {
	border:1px solid #aba8a8;
	background:#e5e5e5;
	text-transform:uppercase;
	color:#4d4d4d;
	font-weight:bold;
	padding:7px 16px 7px 14px;
	height:37px;
	width:124px;
	cursor:pointer;
	float:left;
	margin-top:10px;
}
#contactForm .submit:active {
	background:#cacaca;
}
#contactForm label {
	padding-left:4px;
	font-weight:bold;
}
#contactForm p {
	padding-bottom:8px;
}
#contactForm .input_boxes {
	float:left;
	width:204px;
}
#dummycontent {
	padding-top:100px;
	height:900px;
	position:relative;
}
.bottomlink {
	position:absolute;
	bottom:0;
}
#gallery-tn {float:left; margin-left:10px;}