/* Css Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

:focus {outline: 0;}

ins {text-decoration: none;}
del {text-decoration: line-through;}

table {border-collapse: collapse; border-spacing: 0;}





/*==============================
			Global Styles
================================*/ 
body{font-family: Helvetica Neue, helvetica, arial, sans-serif; font-size: 14px; background: url('../images/bg2.jpg') top center no-repeat;}

h1, h2, h3, h4, h5, h6{ color: #333; font-family: Helvetica Neue, helvetica, arial, sans-serif; font-weight: bold;}
h1{ font-size: 80px; letter-spacing: -1.4pt;}
h3{ font-size: 24px;}
h4{ font-size: 20px;}

p{ color: #333; line-height: 1.4; font-weight: 300;}

a{ color: #666;}
a:link, a:visited{ text-decoration: none; font-weight: bold;}
a:hover, a:active{ text-decoration: underline;}

/*==============================
			Structure
================================*/ 
#wrap{ width: 940px; margin: 0 auto;}
	#header{ margin-top: 0px; height: 140px;}
	#title{ width: 940px; margin: 0 auto; height: 382px; background: url('../images/title-border.jpg') bottom center no-repeat;}
	#main{ width: 940px; overflow: hidden; margin-bottom: 30px;}
	#footer{ width: 940px; margin: 0 auto;}
	
	.half{ width: 460px; margin: 40px 0; overflow: hidden; float: left;}
	.last{ float: right;}
	
/*==============================
		 Title Structure
================================*/ 

#title img{ float: left;}
#title h1, #title p{ float: left; width: 466px;}
#title p{font-weight: 300; color: #333; line-height: 1.2; font-size: 18px;}

/*about title*/ 
#about #title img{ position: relative; top: 42px; left: -20px;}
#about #title h1{ margin-top: 120px; margin-bottom: 20px;}
#about #title p{ margin-bottom: 30px;}

/*challenge title*/
#challenge #title img{ position: relative; top: 80px;}
#challenge #title h1{ margin-top: 120px; position: relative; left: -50px;}
#challenge #title p{ text-align: right; position: relative; right: 55px; margin-top: 10px;}

/*journey title*/
#journey #title{ background: url('../images/journey-bg.jpg') bottom center no-repeat; position: relative; top: 40px; height: 280px;}
#journey #title span{ width: 940px; margin: 0 auto; height: 168px; background: url('../images/title-border.jpg') bottom center no-repeat; display: block; clear: both;}
#journey #title h1{ width: 500px; position: relative; top: 70px; left: 430px;}
#journey #title p{ position: relative; top: 60px; left: 570px;}



/*learn title*/
#learn #title img{ position: relative; top: 87px;}
#learn #title h1{ font-size: 75px; margin-top: 120px;}
#learn #title p{ text-align: right; position: relative; left: -20px;}

/*==============================
		 Learn Page
================================*/
#learn{ background: url('../images/about-bg.jpg') top center no-repeat;}


#articles{ width: 940px; margin-top: 40px;}
#articles .article{ background-color: #231f20; height: 200px; position: relative; margin-bottom: 15px;}

#articles img{ float: left; margin-right: 20px;}

#articles .article h6{ padding-top: 10px; color: #ccc; font-size: 12px; font-weight: normal; letter-spacing: 0.4pt;}
#articles .article h3{ margin-top: 5px; color: #fff; font-size: 20px; font-weight: 300; letter-spacing: 0.4pt;}
.article .icon{ position: absolute; top: 20px; left: 20px;}

.three{ width: 680px; padding: 10px;}
.two{ width: 440px; padding: 10px;}
.one{ width: 200px; padding: 10px;}
	.one img{ margin-bottom: 10px;}

#articles .article.first{ float: left; margin-right: 20px;}
#articles .article.last{ float: right;}

#ten-wrap{ width: 100%; background-color: #333; margin-top: 20px; overflow: hidden; padding-bottom: 30px;}
#top-ten{ width: 940px; margin: 0 auto;}
#top-ten h2{ color: #fff; font-size: 24px; font-weight: 300; letter-spacing: 0.2pt;}


#examples .onebyone.a.first{ margin-right: 20px; float: left;}
#examples .onebyone.a.last{ float: right; margin: 0;}

#learn #footer p{ padding-bottom: 20px;}
#learn .section1{ padding-top: 10px;}
#learn .section2{ padding-top: 10px;}
#learn .section1 .twobyone { overflow: visible;}
#learn .section1 .twobyone img{ position: relative; top: -10px;}
#learn .section2 .onebytwo{ height: 300px;}
/*==============================
		 Journey Page
================================*/
#journey{ background: url('../images/about-bg.jpg') top center no-repeat;}
#journey #main{ margin-top: 70px;}

#journey #coda-slider{ margin-bottom: 30px;}
.panel .intro, .panel img{ width: 300px; height: 250px; float: left;}
.points{ width: 630px; float: right; margin-top: 50px;}
.points li{ width: 280px; float: left; margin-right: 20px; color: #fff; margin-bottom: 15px; padding: 3px 15px 7px 10px; line-height: 1.3; background: url('../images/corner.png') no-repeat top right #00aef0; text-shadow: 0px 1px 1px #333;filter: dropshadow(color=#333, offx=0, offy=1); letter-spacing: 0.2pt;}
.points .last{ margin: 0;}

#journey #slide2 .points{ position: relative; top: -30px;}

#coda-nav-left-1{ float: left;}
#coda-nav-right-1{ float: right;}
#coda-nav-1{ float: left; margin-left: 340px; width: 200px; margin-top: -10px;}

#journey #footer{ margin-top: -30px;}

/*==============================
		 About Page
================================*/ 
#about{ background: url('../images/about-bg.jpg') top center no-repeat;}
#about h3{ font-weight: 300; font-size: 22px; margin-bottom: 15px;}
#about .half img{ padding: 5px 5px; border: 1px solid #ccc; width: 448px;}
#about .half p{ padding-top: 20px;}

/*Team section*/
.member{ width: 300px; height: 110px; background-color: #eaeaea; float: left; overflow: hidden; margin-right: 20px; -webkit-box-shadow: 1px 1px 5px  #333;
-moz-box-shadow: 1px 1px 5px #333;box-shadow: 1px 1px 5px #333; }

.member img{ float: left; width: 75px; height: 75px; background-color: #333; margin: 10px 10px 10px 10px;}
.member.last{ margin: 0; position: relative; right: 3px;}
.member.first{ position: relative; left: 3px;}
.member h5{ font-size: 14px; font-weight: bold; color: #000; margin-top: 10px; margin-bottom: 2px;}
.member p{ font-size: 12px; margin-bottom: 5px; color: #333; text-shadow: 0px 1px 0px #fff;}
p.tagline{ color: #000;}
p.tagline2{ font-size: 13px; color: #666; position: relative; top: 5px; text-align: center; clear: both;}
#about #main{ padding-bottom: 5px;}

#examples{ margin-top: 40px; overflow: hidden;}
#examples .section1, #top-ten .section1{ width: 460px; overflow: hidden; float: left;}
#examples .section2, #top-ten .section2{ width: 460px; overflow: hidden; float: right;}

.onebyone, .twobyone, .onebytwo{ position: relative; float: left; overflow: hidden;}

.onebyone{ width: 140px; height: 140px;}
.twobyone{ width: 300px; height: 140px;}
.onebytwo{ width: 140px; height: 295px;}

.twobyone.a{ margin-left: 20px;}
.twobyone.b{ margin-right: 20px;}
.onebyone.a, .twobyone.a{ margin-bottom: 20px;}

#examples .section2 .onebyone{ margin-left: 20px;}

#examples p, #top-ten p{ position: absolute; top: 0px; left: 10px; z-index: 5; padding: 0px 5px; background-color: #00aef0; color: #fff; text-shadow: 0px 1px 2px #000; filter: dropshadow(color=#000, offx=0, offy=1); }

#about #footer{ position: relative; top: -15px;}
/*==============================
		 Challenge Us
================================*/
#challenge #main{ margin-top: 30px;}
#challenge{ background: url('../images/about-bg.jpg') top center no-repeat;}
#challenge .section{ width: 300px; float: left; margin-right: 20px;}
#challenge .last{ float: right; margin-right: 0;}
#challenge h3, #journey h3{ font-weight: 300; font-size: 24px; margin-bottom: 20px;}
#challenge p, #journey p{ line-height: 1.6; margin-bottom: 20px;}

#challenge-contact h5{ width: 600px; text-align: center; font-size: 30px; font-weight: bold; margin: 0 auto; clear: both;}
#challenge .section{ margin-bottom: 50px;}

#challenge-contact{ width: 940px; overflow: hidden; position:}

.con{ font-size: 24px; text-align: center; float: left; margin-top: 50px;}
.con.email{float: right;}
.con.email span{ color: #ff0099}
.con span{ color: #00aeef; display: block; font-weight: bold;}
.or{ float: left; font-size: 30px; color: #ccc; font-weight: bold; position: relative; left: 190px; top: 55px; padding: 20px 40px 0 40px; background: url('../images/arrow.jpg') no-repeat top center;}

/*==============================
		 Home
================================*/
#home #footer p{ margin-bottom: 20px;}
#home #footer{ margin-top: 10px;}
#home #footer h3{ margin-top: 35px;}

/*==============================
		   Header Styles
================================*/
#logo{ width: 187px; height: 89px; background: url('../images/logo.gif') top  center no-repeat; overflow: hidden; text-indent: -9999px; float: right; position: relative; left: -60px;}
#nav{ width: 490px; position: relative; top: 110px; left: 305px; overflow: hidden; height: 30px;}
	#nav li{ float: left; margin-right: 15px; font-size: 13px;}
	#nav a:link, #nav a:visited{ color: #333;  padding: 3px 5px 5px 5px; font-weight: bold;}
	#nav a:hover{ color: #fff; background-color: #00adef; text-decoration: none; text-shadow: 0px 1px 2px #000; filter: dropshadow(color=#000, offx=0, offy=1); 
	-moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari, Chrome */ border-radius: 5px; /* CSS3 */}
	#nav a:active{ position: relative; top: 1px;}
ul li{ line-height: 1.7; font-weight: 400; font-size: 14px;}
/*==============================
		  Main Structure
================================*/
#slider{ margin-bottom: 20px; width: 940px; height: 354px; padding-bottom: 44px; background: url('../images/shadow2.png') no-repeat bottom center;}
#main-video{ width: 540px; height: 304px; float: left;}

#coda-slider-1 .panel img{ width: 390px; height: 300px;}

/*==============================
			Footer
================================*/ 
#footer{ border-top: 1px solid #ccc; padding-top: 15px; font-size: 12px; font-weight: normal;}
#footer .meta{ float: left; width: 560px;}
#footer .contact{ float: right; width: 260px; font-weight: bold;}
#footer .phone{ color: #00AEEF; padding-left: 16px; background: url('../images/iphone3.png') no-repeat left center;}
#footer .email{ color: #FF0099; margin-left: 30px; padding-left: 19px; background: url('../images/mail.png') no-repeat left center;}
#footer .email a{ color: #FF0099;}

a.print:link, a.print:visited{ font-size: 10px; color: #ccc; font-weight: normal; letter-spacing: 0.4pt; float: left; margin-top: 25px;}

.con a:link{ color: #FF0099;}
.alter{ position: relative; top: -15px;}
	
#footer .cite{ float: left; clear: left; padding: 3px 5px; background-color: #00AEEF; color: #fff; font-size: 10px; font-weight: 300; -moz-border-radius: 8px; /* Firefox */ -webkit-border-radius: 8px; /* Safari, Chrome */ border-radius: 8px; /* CSS3 */ margin-right: 8px;}

#footer .meta a:hover{ background-color: #FF0099; text-decoration: none; }