body {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	background-color: #fff;
	font-family: Arial, 'Ultra', "Lucida Grande", sans-serif;
	font-size: 12px;
	color: #000;
	background-image: url(../images/bg.png);
	background-repeat:repeat-x;
	width: 100%;
	overflow-y: auto;
  	overflow-x: hidden;
	line-height: inherit;/*may need to change this to 'normal'*/
	text-align:center;
}
/*---- $Containers ----*/
.container{
	width:1000px;
	margin-left:auto;
	margin-right:auto;
}
.content-light {
	background-color:#AAB1BF;
	border-top:thin #c6ced1 solid;
	border-bottom:thin #536169 solid;
	height:350px;	
}
.navbar{
	background:url(../images/bg-header.jpg);
	/*fixed image banding with noise filter*/
	height:100px;
}
.content-dark{
 	background-color:#474F59;
 	height:190px;
 	/*I shouldn't keep defining height*/
 	font-family:"Arial";
 	/* border-bottom:thin #fff dotted; change to top border of lower div*/
 }
.content-dark2{
	height: 220px;
	background-color:#474F59;
}
.footer-light{
	background-color:#AAB1BF;
	border-top:thin #c6ced1 solid;
	border-bottom:thin #536169 solid;
	padding-bottom: 40px;
}
.footer-dark{
	background:url(../images/bg-header.jpg);
	height:100px;
}
/*---- $Navigation ----*/
.inbar{
	height:30px;
	font-size:24px;
	font-family:"Arial";
}
.inbar p{
	float:left;
	color: #cbcbcb;
}
.navbar ul li{
	float:right;
	padding: 30px 10px 0px 0px;	
	margin-left:20px;
}
.logo{
	float:left;
	margin-top: 10px;
}
/*---- $Light Section1 ----*/
.outsiders{
	float:right;
	margin-top: -811px;
	margin-right: -187px;
}
/*combine with backdrop?*/
.backdrop{	
	height:183px;
	width:250px;
	background-image: url(../images/first_aid.png);
	float:right;
	margin-right:0px;
	margin-top:50px;
	/*rounded corners*/
/*	-moz-border-radius: 15px;
	border-radius: 15px;
	opacity:0.7;
	filter:alpha(opacity=40); /* For IE8 and earlier */
}
.backdrop-contents{
	padding: 25px 0px 0px 0px;
}
.tiny_backdrop{
	background-image: url(../images/tiny_backdrop.png);
	padding: 0px 4px 0px 4px;
	position: relative; /* only z-indexed if positioned element*/
	z-index: 2;	/*this keeps it infront of connector*/
}
.connector{
	margin-left: 430px;
	margin-top:-20px;
	position: relative;
}
/*---- $Words are my friends ----*/
.thin {
	font-size: 20px;
	font-weight: 400;	
	text-align: left;
}
.write-wrapper {
	width: 650px;
	/*this width allows 'email' to display correctly in chrome*/
	float: left;
	margin-top: 10px;
}
.write-wrapper p{
	color: #3A3C3F;
	font-family:"Arial";	
}
.write-wrapper a{
	text-decoration:none;
	font-weight:600;
	color: #0073b2;
}
.thick {
	font-size: 40px;
	font-weight: 800;
	color: #333940;
	opacity: .7;
}
/*---- $Dark Section First ----*/
 .number-column{
	 float:left;
	 width:333px;
 }
 .big-number{
	 font-size: 156px;
	 opacity: .3;
	 color: #AAB1BF;
	 font-family: 'Ultra';
	 text-align: left;
	 float:left;
 }
 .step{
 	float: left;
 	text-align: left;
 }
 .step h1{
 	margin-top: 45px;
 	font-size: 36px;
 	color: #fff;
 	font-weight: 600;
 }
 .step p{
 	color: #939496;
 	font-size: 14px;
 }
/*---- $Light Section Second----*/
 /*project box*/
 .project-right{
 	float: right;
 	width: 659px;
 }
 .footer-light ul{
 	text-align: left;
 	margin-top: -265px;
 }
 .footer-light li{
 	font-size: 14px;
 	font-weight: 600;
 	color: #333940;
 }
 .footer-light span{
 	font-size: 14px;
 	color: #536169;
 }
 .footer-light a{
 	text-decoration: none;
 	color: #536169;
 }
  .footer-light a:hover{
 	color: #0073b2;
 }
 .project{
	width: 340px;
 }
 .project a:hover {
   background-color: #474F59;
 }
 .project a {
   display: block;
   background: rgba(255, 255, 255, 0.1);
   padding: 7px;
   line-height: 1em;
   /*corners*/
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   /*box shadow */
   -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   margin-right: 40px;
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
 }
 /* blue tag */
 .tag{
 	border: solid 1px #536169;
 	width: 25%;
 	margin: auto auto 20px;
 	color: #dedede;
 	font: bold 12pt "Arial";
 	text-align: center;
 	line-height: 35px;	
 /*text shadow */	
 	text-shadow: -1px -1px 0 #233645;
 	filter: dropshadow(color=#480000, offx=-1, offy=-1); 
 /*box shadow */
 	-moz-box-shadow: 0 1px 2px #73705d;
 	-webkit-box-shadow: 0 1px 2px #73705d;
 	box-shadow: 0 1px 2px #73705d;
 /*gradient*/	
 	background: #0073b2; /* old browsers */
 	background: -moz-linear-gradient(top, #0073b2 0%, #015482 100%); /* FF3.6+ */
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0073b2), color-stop(100%,#015482)); /* Chrome,Safari4+ */
 	background: -webkit-linear-gradient(top, #0073b2 0%,#015482 100%); /* Chrome10+,Safari5.1+ */
 	background: -o-linear-gradient(top, #0073b2 0%,#015482 100%); /* Opera11.10+ */
 	background: -ms-linear-gradient(top, #0073b2 0%,#015482 100%); /* IE10+ */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0073b2', endColorstr='#024970',GradientType=0 ); /* IE6-9 */
 	background: linear-gradient(top, #0073b2 0%,#015482 1	00%); /* W3C */	
 	}
/*----$Dark Section Second----*/
 .column-border{
 	border-right:thin #939496 solid;
 }
 .column{
 	width:332px;
 	margin: 5px 0px 0px 0px;
 	float:left;
 	z-index: -2;
 }
 .column h1{
 	color: #ffffff;
 	font-weight:600;
 	text-align: center;
 }
 .column p{
 	color:#939496;
 	font-weight:600;
 	font-size:18px; 
 }
 .sub{
 	color:#ffffff;
 	font-size:12px;
 }
 .column-container{
	 margin-left:auto;
	 margin-right:auto;
 }

/*---- $Footer ----*/
.footer-dark p{ 
	font-size:14px;
	padding: 45px 0px 0px 0px;
	text-align: right;
	/*fix this*/
}
/*---- $Hover and Sprite effect ----*/
.works {
	font-size: 22px;
	padding-top: 00px;
	margin-left:00px;
	text-decoration: none;	
	-webkit-transition: color 0.3s ease-out;
	-moz-transition: color 0.3s ease-out;
	-ms-transition: color 0.3s ease-out;
	-o-transition: color 0.3s ease-out;
	transition: color 0.3s ease-out;
}
.works:hover {
	-webkit-transition: color 0.3s ease-in;
	-moz-transition: color 0.3s ease-in;
	-ms-transition: color 0.3s ease-in;
	-o-transition: color 0.3s ease-in;
	transition: color 0.3s ease-in;
	text-decoration: none;
	color: #6abeff;
}
.linkedin {
	float: right;
	background-image: url(../images/linkedin.png);
	width: 30px;
	height: 30px;
	margin-right:25px;
	margin-top:-208px;
}
.linkedin:hover {
	background-position:0px -30px;
}
.linkedin:active {
 	background-position:0px -60px;
}
.grooveshark {
	float: right;
	background-image: url(../images/grooveshark.png);
	width: 30px;
	height: 30px;
	margin-right: 110px;
	margin-top:-158px;
}
.grooveshark:hover {
	background-position:0px -30px;
}
.grooveshark:active {
 	background-position:0px -60px;
}
.reddit{
	float: right;
	background-image: url(../images/reddit.png);
	width: 30px;
	height: 30px;	
	margin-right: 190px;
	margin-top:-110px;
}
.reddit:hover {
	background-position:0px -30px;
}
.reddit:active {
 	background-position:0px -60px;
}
.twitter{
	float: right;
	background-image: url(../images/twitter.png);
	width: 30px;
	height: 21px;	
	margin-right: 275px;
	margin-top:-55px;
}
.twitter:hover {
	background-position:0px -21px;
}
.twitter:active {
 	background-position:0px -42px;
/*end hover*/