/*--------------------------------------------------------------*/
/* Colas Construction											*/
/* 																*/
/* Date: November 11th, 2010									*/
/* Developer: Ryan Anderson										*/
/* Designer: Chip Truex											*/
/* Company: Harlo Interactive									*/
/* Website: www.harlointeractive.com							*/
/*																*/
/*--------------------------------------------------------------*/


/*--------------------------------------------------------------*/
/* General														*/
/*--------------------------------------------------------------*/
	* { margin: 0; padding: 0; }
	
	a { text-decoration: none; outline: none; }
	a img { border: none; }
	
	.clear { clear: both; }

	.float-left { float: left; }
	.float-right { float: right; }

	.margin-top { margin-top: 1px; }
	.margin-right { margin-right: 1px; }
	.margin-bottom { margin-bottom: 1px; }
	.margin-left { margin-left: 1px; }
	
	.blue { color: #00c8ff; }
	.green { color: #8dc63f; }
	.dark-grey { color: #636363; }
	.mid-grey { color: #959595; }
	.light-grey { color: #c2c2c2; }

	
	body {
		background: #000;
		color: #fff;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	#container {
		width: 880px;
		margin: 0 auto;
	}
	
	header, #header {
		height: 55px;
		background: #fff;
	}
	
	nav, #nav {
		width: 880px;
		margin: 0 auto;
	}
	nav ul, #nav ul {
		margin: 0; padding: 0;
		list-style: none;
	}
	nav li, #nav li {
		display: block;
		width: 110px; height: 55px;
		line-height: 55px;
		float: left;
	}
	nav li a, #nav li a {
		display: block;
		text-align: center;
		font-size: 15px;
		font-weight: bold;
		color: #000;
		letter-spacing: -1px;
	}
	nav li a.active, nav li a:hover, #nav li a.active, #nav li a:hover {
		color: #00bff3;
		background: #000;
	}
	
	#social {
		position: absolute;
		right: 0; top: 203px;
	}
	#social a {
		display: block;
		width: 21px; height: 21px;
		margin-bottom: 1px;
		text-indent: -9999px;
	}
	#social .facebook {
		background: url('../images/structure/facebook.png') no-repeat left top;
	}
	#social .twitter {
		background: url('../images/structure/twitter.png') no-repeat left top;
	}
	#social .linked_in {
		background: url('../images/structure/linked_in.png') no-repeat left top;
	}
	#social a:hover {
		background-position: left -21px;
	}
	
	
/*--------------------------------------------------------------*/
/* Top															*/
/*--------------------------------------------------------------*/
	#top {
		margin: 40px 0 35px;
	}
	
	#logo {
		float: left;
	}
	#logo img {
		padding-left: 16px;
	}
	
	#bid-room {
		float: right;
		width: 450px;
	}
	#bid-room div {
		display: block;
		vertical-align: middle;
		float: right;
		margin-right: 1px;
	}
	#bid-room a {
		display: block;
		height: 45px;
		line-height: 45px;
		font-size: 15px;
		font-weight: bold;
		color: #000;
		background: #fff;
		text-align: center;
		padding: 0 15px 0 30px;
		background: #fff url('../images/structure/bid_room.png') no-repeat 12px 17px;
	}
	#bid-room .logout a {
		background: #fff url('../images/structure/bid_room_logout.png') no-repeat 12px 17px;
	}
	
	.bid-input-contain {
		position: relative;
		width: 165px; height: 45px;
	}
	.bid-input-contain input, .bid-input-contain label {
		display: block;
		position: absolute;
		left: 0; top: 0;
		font-size: 11px;
	}
	.bid-input-contain input {
		background: transparent;
		border: none;
		width: 150px; height: 45px;
		line-height: 43px;
		color: #bbb;
		outline: none;
		padding-left: 15px;
		font-size: 15px;
	}
	.bid-input-contain label {
		background: #252525;
		color: #636363;
		width: 150px; height: 45px;
		line-height: 45px;
		padding-left: 15px;
		font-size: 15px;
		font-weight: bold;
	}
	
	
	
/*--------------------------------------------------------------*/
/* Home															*/
/*--------------------------------------------------------------*/
	section {
		margin-top: 1px;
		background: #1a1a1a;
		letter-spacing: -1px;
	}
	section h1 {
		padding: 25px;
		background: #252525;
		font-size: 35px;
		line-height: 35px;
	}
	section p {
		display: inline-block;
		margin: 25px;
		font-size: 17px;
		line-height: 20px;
		font-weight: bold;
	}


/*--------------------------------------------------------------*/
/* Inputs														*/
/*--------------------------------------------------------------*/

	.input-contain {
		position: relative;
		width: 255px; height: 45px;
	}
	.input-contain input, .input-contain label {
		display: block;
		position: absolute;
		left: 0; top: 0;
		font-size: 11px;
	}
	.input-contain input {
		background: transparent;
		border: none;
		width: 240px; height: 45px;
		line-height: 43px;
		color: #333;
		outline: none;
		padding-left: 15px;
		font-size: 15px;
	}
	.input-contain label {
		background: #fff;
		color: #636363;
		width: 240px; height: 45px;
		line-height: 45px;
		padding-left: 15px;
		font-size: 15px;
		font-weight: bold;
		letter-spacing: -1px;
	}

	.textarea-contain {
		position: relative;
		height: 230px;
		margin: 10px 0;
	}
	.textarea-contain label,
	.textarea-contain textarea {
		position: absolute;
		top: 0; left: 0;
		display: block;
		font-size: 11px;
	}
	.textarea-contain textarea.tinymce {
		position: relative;
	}
	.textarea-contain label {
		background: #fff;
		padding: 10px;
		width: 491px; height: 210px;
		color: #fff;
		font-size: 15px;
		font-weight: bold;
	}
	.textarea-contain textarea {
		border: none;
		padding: 10px;
		width: 491px; height: 210px;
		color: #333;
		background: transparent;
		outline: none;
		resize: none;
		font-size: 15px;
		font-weight: bold;
	}
	
	.checkbox-contain {
		float: left;
		cursor: pointer;
	}
	.checkbox-contain .checkbox {
		display: block;
		width: 45px; height: 45px;
		background: #fff;
		float: left;
		margin-right: 15px;
	}
	.checkbox-contain p {
		display: block;
		float: left;
		font-size: 15px;
		line-height: 15px;
		margin: 7px 0 8px;
		font-weight: bold;
	}
	
	.submit-contain {
		float: right;
	}
	.submit-contain input {
		display: block;
		background: #00c8ff;
		border: none;
		width: 110px; height: 45px;
		font-size: 15px;
		text-align: center;
		line-height: 45px;
		letter-spacing: -1px;
		color: #000;
		font-weight: bold;
	}


/*--------------------------------------------------------------*/
/* Gallery														*/
/*--------------------------------------------------------------*/
	#gallery {
		position: relative;
		width: 880px; height: 375px;
	}
	#gallery img {
		position: absolute;
		top: 0; left: 0;
	}
	
	#next, #last {
		position: absolute;
		top: 0;
		display: block;
		opacity: 0;
		width: 58px; height: 375px;
		text-indent: -9999px;
		z-index: 100;
	}
	#next { right: 0; }
	#last { left: 0; }

	#next a, #last a {
		display: block;
		width: 58px; height: 375px;
	}
	#next a { background: url('../images/gallery/next.png') no-repeat left top; }
	#last a { background: url('../images/gallery/last.png') no-repeat left top; }
	#next a:hover, #last a:hover {
		background-position: -58px 0;
	}

	#gallery #indicators {
		position: absolute;
		bottom: 10px; right: 10px;
		z-index: 100;
	}
	#gallery .indicator {
		width: 40px; height: 40px;
		opacity: 0.5;
		text-indent: -9999px;
		background: #fff;
		display: block;
		float: left;
		margin-left: 1px;
	}
	#gallery .indicator.active {
		background: #00c8ff;
	}
	
	
/*--------------------------------------------------------------*/
/* Timeline														*/
/*--------------------------------------------------------------*/
	#intro {
		width: 879px; height: 364px;
		overflow: hidden;
	}
	
	#dates {
		margin: 1px 0;
		position: relative;
	}
	.date-container {
		display: block;
		width: 10px; height: 10px;
		float: left;
		margin-right: 1px;
		background: #1e1e1e;
		position: relative;		
	}
	#dates .date {
		display: block;
		width: 10px; height: 10px;
		margin-right: 1px;
		background: #1e1e1e;
	}
	#dates .date:last-child {
		margin-right: 0;
	}
	#dates .date.active { cursor: pointer; background: #636363; }
	#dates .date.active:hover { background: #00c8ff; }
	
	.timeline-popup {
		position: absolute;
		bottom: 15px; left: -11px;
		padding: 17px 15px;
		background: #1e1e1e;
		height: 25px;
		display: none;
	}
	.initial-timeline-popup {
		position: absolute;
		bottom: 28px; left: 77px;
		padding: 17px 15px;
		background: #1e1e1e;
		width: ; height: 25px;
	}
	.timeline-popup h3, .initial-timeline-popup h3 {
		font-size: 14px;
		letter-spacing: -1px;		
	}
	.timeline-popup p, .initial-timeline-popup p {
		display: block;
		height: 12px;
		font-size: 11px;
		line-height: 12px;
		font-style: italic;
	}
	.timeline-popup .arrow, .initial-timeline-popup .arrow {
		position: absolute;
		left: 6px; bottom: -9px;
	}
	
	#years ul {
		list-style: none;
		margin: 0; padding: 0;
	}
	#years li {
		display: block;
		width: 109px; height: 44px;
		line-height: 44px;
		font-size: 15px;
		letter-spacing: -1px;
		background: #252525;
		text-align: center;
		float: left;
		border-right: 1px solid #181818;
	}
	#years li:last-child { border-right: none; }

	#history {
		display: block;
		width: 819px; height: 309px;
		overflow: hidden;
		padding: 55px 0 0 60px;
	}
	#history h1 {
		font-size: 60px;
		line-height: 50px;
		letter-spacing: -2px;
	}
	#history h2 {
		font-size: 40px;
		line-height: 35px;
		letter-spacing: -2px;
		margin-bottom: 20px;
	}
	#history p {
		font-size: 12px;
		line-height: 14px;
		margin-bottom: 14px;
	}


/*--------------------------------------------------------------*/
/* Services														*/
/*--------------------------------------------------------------*/
	#service-links {
		
	}
	#service-links a {
		display: block;
		float: left;
		background: #252525;
		font-size: 40px;
		line-height: 35px;
		letter-spacing: -1px;
		color: #fff;
		text-align: center;
		font-weight: bold;
	}
	#service-links a:hover { background: #00c8ff; }

	#service-links a.sustain:hover { background: #8dc63f; }
	
	a.services {
		padding: 195px 0;
		width: 290px; height: 50px;
		margin-right: 1px;
	}
	a.sustain {
		padding: 195px 0;
		width: 290px; height: 50px;
		margin-right: 1px;
	}
	a.systems {
		padding: 170px 0;
		width: 290px; height: 100px;
	}
	
	#services-container table {
		background: #252525;
	}
	#services-container table .left {
		width: 150px;
		padding: 45px 35px 0;
		border-right: 1px solid #111;
	}
	.service-link {
		display: block;
		color: #fff;
		font-size: 35px;
		line-height: 30px;
		font-weight: bold;
		letter-spacing: -1px;
		margin-bottom: 15px;
	}
	.service-link:hover, .service-link.active { color: #00c8ff; }

	.service-link-green {
		display: block;
		color: #8dc63f;
		font-size: 35px;
		line-height: 30px;
		font-weight: bold;
		letter-spacing: -1px;
		margin-bottom: 15px;
	}
	.service-link-green:hover, .service-link-green.active { color: #8dc63f; }
	
	#services-container table .right {

	}
	#services-container table .right h2 {
		margin: 30px 45px 0;
		font-size: 35px;
		font-weight: bold;
		letter-spacing: -1px;
	}
	
	.service {
		padding: 30px 45px;
		border-bottom: 1px solid #161616;
	}
	.service:last-child { border-bottom: none; }
	.service.alt {
		background: #212121;
	}
	.service h3 {
		font-size: 21px;
		line-height: 24px;
		margin-bottom: 5px;
	}
	.service p {
		font-size: 12px;
		line-height: 13px;
		margin-bottom: 13px;
	}
	.service ul { margin: 0 17px; }
	.service li { margin-bottom: 3px; }
	.service li p { margin-bottom: 3px; }
	.service li p:last-child { margin-bottom: 9px; }
	

/*--------------------------------------------------------------*/
/* Portfolio													*/
/*--------------------------------------------------------------*/
	.image-main {
		float: left;
		display: block;
		width: 659px; height: 365px;
		overflow: hidden;
		margin-right: 1px;
		background: #1a1a1a;
	}
	.image-sidebar {
		display: block;
		width: 220px; height: 365px;
		float: right;
		background: #1a1a1a;
		overflow: hidden;
	}
	.image-thumb {
		display: block;
		float: left;
		width: 109px; height: 121px;
		overflow: hidden;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
	}
	.image-thumb img {
		opacity: 0.25;
	}

/*	.image-thumb a:hover img, */
	.image-thumb a.active img {
		opacity: 1;
	}
	
	#projects {
		background: #1a1a1a;
		border: 1px solid #000;
		margin-top: 1px;
	}
	#projects ul {
		list-style: none;
		margin: -1px; padding: 0;
	}
	#projects li {
		display: block;
		float: left;
		border-bottom: 1px solid #000;
		border-right: 1px solid #000;
	}
	#projects a {
		display: block;
		width: 219px; height: 45px;
		background: #252525;
		text-align: center;
		line-height: 45px;
		font-size: 15px;
		color: #636363;
		font-weight: bold;
		letter-spacing: -1px;
	}
	#projects a:hover, #projects a.active {
		background: #00c8ff;
		color: #000;
	}
	
	#project-info {
		background: #1a1a1a;
		padding: 33px;
		width: 813px;
	}
	#project-info h1 {
		font-size: 40px;
		letter-spacing: -2px;
	}
	#project-info h2 {
		font-size: 17px;
		line-height: 20px;
		letter-spacing: -1px;
	}
	#project-info .content {
		margin-top: 30px;
		-webkit-column-count: 2;
		-webkit-column-gap: 25px;
		-moz-column-count: 2;
		-moz-column-gap: 25px;
		column-count: 2;
		column-gap: 25px;
	}
	#project-info .content p {
		font-size: 12px;
		line-height: 14px;
		padding-bottom: 14px;
	}



/*--------------------------------------------------------------*/
/* Team															*/
/*--------------------------------------------------------------*/
	#team-image {
		width: 879px; height: 375px;
		overflow: hidden;
		position: relative;
	}




/*--------------------------------------------------------------*/
/* Blog															*/
/*--------------------------------------------------------------*/
	#blog {
		
	}
	#blog table {
		background: #252525;
	}
	#blog td {
	}
	
	#blog .left {
		border-right: 1px solid #111;
	}
	.post {
		position: relative;
		padding: 55px 60px 40px 155px;
		border-bottom: 1px solid #161616;
	}
	.post.alt {
		background: #212121;
	}
	.post:last-child { border-bottom: none ;}
	.post h1 {
		font-size: 50px;
		line-height: 40px;
		letter-spacing: -3px;
	}
	.post h4 {
		font-size: 11px;
		font-weight: normal;
		margin-bottom: 25px;
	}
	.post p {
		font-size: 12px;
		line-height: 13px;
		margin-bottom: 13px;
	}
	.post p:last-child {
		margin-bottom: 0;
	}
	.post .date {
		position: absolute;
		left: 45px; top: 40px;
	}
	.date {
		display: inline-block;
		width: 75px; height: 75px;
		background: #00bff3;
		color: #1e1e1e;
		text-align: center;
	}
	.date .month {
		display: block;
		margin-top: 13px;
		font-size: 20px;
		line-height: 16px;
		letter-spacing: -2px;
		font-weight: bold;
	}
	.date .day {
		display: block;
		font-size: 40px;
		line-height: 35px;
		line-height: 35px;
		letter-spacing: -3px;
		font-weight: bold;
	}
	.date .date-indicator {
		position: absolute;
		right: -10px; top: 24px;
	}
	.share {
		background: #fff;
		position: absolute;
		top: 116px; left: 45px;
		width: 75px; height: 20px;
		text-align: center;
	}
	.share a {
		font-size: 10px; line-height: 20px;
		font-weight: bold;
		letter-spacing: -1px;
		color: #000;
	}
	
	#twitter {
		margin-top: 25px;
		background: #212121;
		padding: 20px;
		font-size: 11px;
		line-height: 15px;
	}
	#twitter h2 {
		font-size: 20px;
	}
	#twitter a {
		display: block;
		margin-top: 15px;
	}
	
	.list-contain {
	}
	.list-contain ul {
		display: none;
		margin: 10px 0 10px 17px;
		list-style: none;
	}
	
	
	#blog .right {
		padding: 45px;
		width: 191px;
	}
	#blog .right h1 {
		font-size: 35px;
		line-height: 40px;
		letter-spacing: -1px;
		height: 40px;
	}
	#blog .right h1 a {
		color: #fff;
	}
	#blog .right h1 a:hover,
	#blog .right h1 a.active {
		color: #00c8ff;
	}

	#blog .right h2 {
		font-size: 16px;
		line-height: 16px;
		letter-spacing: -1px;
		margin-bottom: 16px;
	}
	#blog .right h3 {
		font-size: 13px;
		line-height: 13px;
		letter-spacing: -1px;
		margin-bottom: 13px;
	}


/*--------------------------------------------------------------*/
/* Contact														*/
/*--------------------------------------------------------------*/
	#contact-left {
		float: left; 
		background: #252525;
		width: 511px; height: 340px;
		padding: 40px 46px;
	}
	#contact-right {
		float: right;
		display: block;
		width: 206px; height: 330px;
		padding: 45px 35px;
		background: #252525;
	}
	#contact-right h1 {
		font-size: 50px;
		letter-spacing: -3px;
	}
	#contact-right h2 {
		font-size: 16px;
		line-height: 16px;
		letter-spacing: -1px;
		margin-bottom: 12px;
	}
	#contact-right h3.last {
		font-size: 13px;
		line-height: 13px;
		margin-bottom: 16px;
		letter-spacing: -1px;
	}
	#contact-right p {
		font-size: 12px;
		line-height: 13px;
		margin-bottom: 13px;
	}


/*--------------------------------------------------------------*/
/* Charity														*/
/*--------------------------------------------------------------*/
	#charity {
		
	}
	#charity table {
		background: #252525;
	}
	#charity td {
		padding: 45px;
	}
	
	#charity .left {
		border-right: 1px solid #111;
	}
	#charity .left h1 {
		font-size: 35px;
		line-height: 35px;
		letter-spacing: -1px;
	}
	#charity .left h2 {
		font-size: 17px;
		line-height: 20px;
		letter-spacing: -1px;
		margin-bottom: 10px;
	}
	#charity .left h3 {
		
	}
	#charity .left p {
		font-size: 12px;
		line-height: 13px;
		margin-bottom: 13px;
	}
	#charity .left p:last-child {
		margin-bottom: 0;
	}
	#charity ul {
		margin: 0; padding: 0;
		margin-bottom: 13px;
	}
	#charity li p {
		margin-bottom: 7px !important;
	}

	ul.foundations {
		list-style: none;
	}
	.foundations li {
		float: left;
		margin-right: 1px;
		margin-bottom: 1px;
	}
	.foundations a {
		display: block;
		background: #545454;
		color: #fff;
		width: 254px; height: 45px;
		text-align: center;
		line-height: 45px;
		font-weight: bold;
	}
	.foundations a:hover {
		background: #00c8ff;
		color: #000;
	}
	
	
	#charity .right {
		width: 188px;
	}
	#charity .right h1 {
		background: #fff;
		color: #000;
		width: ; height: 80px;
		line-height: 80px;
		font-size: 35px;
		letter-spacing: -1px;
		text-align: center;
		margin-bottom: 1px;
	}
	#foundations {
		margin-bottom: 35px;
	}
	#foundations a {
		display: block;
		float: left;
		width: 62px; height: 62px;
		text-indent: -9999px;
		margin-bottom: 1px;
	}
	#foundations .ocf { background: url('../images/charity/oregon_community_foundation.png') no-repeat left top; margin-right: 1px; }
	#foundations .mti { background: url('../images/charity/medical_teams_international.png') no-repeat left top; margin-right: 1px; }
	#foundations .mc { background: url('../images/charity/mercy_corp.png') no-repeat left top; }
	#foundations .oa { background: url('../images/charity/oxfam_america.png') no-repeat left top; margin-right: 1px; }
	#foundations .pih { background: url('../images/charity/partners_in_heath.png') no-repeat left top; margin-right: 1px; }
	#foundations .dwb { background: url('../images/charity/doctors_without_borders.png') no-repeat left top; }
	
	#foundations a:hover { background-position: left -62px; }

	#charity .right h2 {
		font-size: 16px;
		line-height: 16px;
		letter-spacing: -1px;
		margin-bottom: 16px;
	}
	#charity .right h3 {
		font-size: 13px;
		line-height: 13px;
		letter-spacing: -1px;
		margin-bottom: 13px;
	}


/*--------------------------------------------------------------*/
/* Bid Room														*/
/*--------------------------------------------------------------*/
	#bidroom table {
		margin-bottom: 30px;
		width: 100%;
	}

	#bidroom table td {
		background: #363636;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		padding: 10px;
	}
	#bidroom .alt td {
		background: #252525;
	}
	
	
	#bidroom .left {
		
	}
	#bidroom h1 {
		font-size: 40px;
		line-height: 75px;
		letter-spacing: -2px;
	}
	#bidroom h2 {
		font-size: 15px;
		letter-spacing: -1px;
	}
	#bidroom h3 {
		font-size: 25px;
		font-weight: bold;
		letter-spacing: -2px;
	}
	#bidroom h3 a.download {
		display: block;
		height: 38px;
		line-height: 38px;
		margin: 5px 0 5px 10px;
		padding-left: 63px;
		background: url('../images/structure/download_forms.png') no-repeat left top;
		color: #f00804;
	}
	#bidroom h3 a.download:hover {
		color: #fff;
		background-position: left -38px;
	}
	#bidroom p {
		font-size: 12px;
		line-height: 18px;
	}
	
	#bidroom .right {
		width: 226px;
	}
	#bidroom div { float: left; }
	.year {
		display: inline-block;
		background: #fff;
		width: 150px; height: 75px;
		text-align: center;
		line-height: 75px;
		font-size: 50px;
		font-weight: bold;
		letter-spacing: -4px;
		color: #1e1e1e;
		margin-left: 1px;
	}


/*--------------------------------------------------------------*/
/* Footer														*/
/*--------------------------------------------------------------*/
	footer, #footer {
		margin: 15px 0;
		font-size: 10px;
		line-height: 11px;
		color: #707070;
	}
	footer .right, #footer .right {
		float: right;
		text-align: right;
	}
	footer .left, #footer .left {
		float: left;
	}
	footer .left a , #footer .left a {
		color: #999;		
	}
	footer .left a:hover , #footer .left a:hover { color: #fff; }