* {
	margin: 0;
	padding: 0;
}

body {
	font: 0.8em "Lucida Grande", Arial, sans-serif;
	color: #3a3f40;
	background: #e9ebe7 url("../img/bg.jpg") repeat-x;
}

#wrapper {
	background: url( "../img/body_bg.jpg" ) no-repeat;
	margin: 0 auto 50px auto;
	width: 900px;
}

/***********
Header
***********/
#header {
	height: 70px;
	padding: 20px 77px 0;
}
	#logo a img {
		border: none;
	}

/***********
Portfolio
***********/
#portfolio-wrapper {
	height: 410px;
}
.campaign-wrapper {
	height: 370px;
	width: 778px;
	position: absolute;
}
.port-arrow{
	float: left;
	width: 60px;
}
	.port-arrow a, .port-arrow div{
		display: block;
		height: 31px;
		margin: 169px auto 0 auto;
		text-indent: -9999px;
		width: 31px;
		overflow: hidden;
		outline: none;
	}
	.port-arrow a.prev, .port-arrow div.prev{
		background: url("../img/arrow-prev.png") 0 0 no-repeat;
	}
	.port-arrow a.next, .port-arrow div.next{
		background: url("../img/arrow-next.png") 0 0 no-repeat;
	}
	.port-arrow div{display: none;}
	
	.port-arrow a:hover{background-position: 0 -31px;}
	
	.port-arrow span.loading
	{
	   display: block;
	   margin: 3px auto;
	   width: 24px;
	}

#portfolio_mask{
	border-left: 1px solid #deecea;
	border-right: 1px solid #deecea;
	padding: 0 16px;
	height: 380px;
	width: 746px;
	float: left;
	overflow: hidden;
	position: relative;
}	
#portfolio{
	position: absolute;
	height: 370px;
	width: 746px;
}
/* Portfolio Image */
#portfolio .img{background-color: #ebede4; float: left;}
#portfolio .img .tl{ background: url("../img/img_corner_tl.gif") no-repeat 0 0; }
#portfolio .img .tr{ background: url("../img/img_corner_tr.gif") no-repeat 100% 0; }
#portfolio .img .bl{ background: url("../img/img_corner_bl.gif") no-repeat 0 100%; }
#portfolio .img .br{ background: url("../img/img_corner_br.gif") no-repeat 100% 100%; padding: 12px;}
#portfolio .img .br a{display: block; line-height: 1;}
#portfolio .img .br a img{border:none;}

#portfolio .portfolio-content{
	float: left;
	margin: 0 26px;
	width: 260px;	
}
#portfolio #loading {
	float: left;
	margin: 0 26px;
	text-align: center;
	line-height: 370px;
	width: 260px;
}

#portfolio .project-list{
	float: left;
	margin: 0;
	overflow: hidden;
	width: 154px;	
}
	#portfolio .project-list .row {
		border-bottom: 1px solid #e4eaea;
		clear: both;
		text-align: center;
		margin: 0 0 7px;
		padding: 0 0 7px;
	}
	#portfolio .project-list .row.last {
		border-bottom: none;
	}
	#portfolio .project-list a {
		line-height: 44px;
		margin: 0 1px;
	}
	#portfolio .project-list a img{border: 2px solid #dce3e6; vertical-align: middle;}
	
	#portfolio .project-list a:hover img{border-color: #bfc6c9;}


/***********
Content
***********/
#content-wrapper{margin: 15px 77px 10px;}
	#content-navigation{
		background: #e9ebe7 url("../img/content-nav-bg.png") 0 0 repeat-x ;
		list-style: none;
		margin: 0;
		padding: 0 32px;
		height: 41px;
		overflow: hidden;
		width: 682px;
	}
		#content-navigation li{
			float: left;
		}
			#content-navigation li a{
				background: url("../img/content-nav.png") 0 0 no-repeat;
				display: block;
				height: 41px;
				text-indent: -9999px;
				overflow: hidden;
				outline: none;
			}
			li#nav-about a{
				background-position: -32px 0;
				width: 82px;
			}
			li#nav-services a{
				background-position: -114px 0;
				width: 100px;
			}
			li#nav-clients a{
				background-position: -214px 0;
				width: 90px;
			}
			
			li#nav-about a:hover{background-position: -32px -41px;}
			li#nav-services a:hover{background-position: -114px -41px;}
			li#nav-clients a:hover{background-position: -214px -41px;}
		
			li#nav-about a.selected{background-position: -32px -82px;}
			li#nav-services a.selected{background-position: -114px -82px;}
			li#nav-clients a.selected{background-position: -214px -82px;}
			
#content-area{
	background-color: #f9fbf4;
	padding: 30px 30px 50px;
	height: 220px; 
	height: auto !important; 
	min-height: 220px;
	overflow: hidden;
}
#content-area #loading {
	background-color: #f9fbf4;
	height: 220px; 
	height: auto !important; 
	min-height: 220px;
	text-align: center;
	line-height: 220px;
}
	#content-area div.content {
		background-color: #f9fbf4;
		display: none;
		overflow: hidden;
		width: 100%;
	}
	#content-area div.content.displayed {
		display: block;
	}
	.layout-2col{
		background: url("../img/layout-2col.gif") 0 0 repeat-y;
		overflow: hidden;
	}
	.left_col{
		float: left;
		width: 425px;
	}
	.right_col{
		float: right;
		width: 210px;	
	}

/* CLIENT LIST */	
ul.clientList-nav {
	list-style: none;
	margin: 15px 0 0;
	overflow: hidden;
}
	.clientList-nav li{
		float: left;
		margin: 0 3px 3px 0;
	}
.clientList{
	border-top: 1px solid #c4c4c3;
	border-bottom: 1px solid #c4c4c3;
	padding: 10px 0;
	overflow: hidden;
	width: 100%;
}
#content-clients div.clientList {
	display: none;
}
#content-clients div.clientList.displayed {
	display: block;
}
	.clientList .client-col{
		color: #5e6059;
		float: left;
		list-style: none;
		margin: 0 20px 0 0;
		width: 215px;
	}
	.clientList .client-col.last{
		margin: 0;
	}
		.clientList .client-col li{
			margin: 0 0 3px;
		}


/* Filter Buttons */
a.filter {
	float: left;
	height: 33px;
	background: url( "../img/filter-button-left.png" ) no-repeat left top;
	padding: 0 0 0 10px;
	color: #666;
	text-decoration: none;
	margin: 0 3px 0 -4px;
	font-size: 0.9em;
	outline: none;
}

a.filter span {
	float: left;
	background: url( "../img/filter-button-right.png" ) no-repeat right top;
	padding: 0 13px 0 3px;
	height: 33px;
	line-height: 33px;
	cursor: pointer;
}
a.filter:hover {
	background-position: left -33px;
	text-decoration: none;
	color: #333;
}

a.filter:hover span {
	background-position: right -33px;
}
a.filter.selected, a.filter.selected:hover {
	background-position: left -66px;
}

a.filter.selected span, a.filter.selected:hover span {
	color: #fff;
	background-position: right -66px;
}


/*  FOOTER  */	
#footer{
	background-color: #e9ebe7;
	border-top: 1px solid #c4c4c3;
	clear: both;
	color: #85887e;
	font-size: .833em;
	padding: 10px 0;
}
	#footer .footer-name{
		color: #5a5c54;
	}
	#footer p.footer-contact{margin-top: 10px;}
	#footer p span{
		margin-right: 35px;
	}	
	#footer p.footer-copyright{
		color: #838b91;
		font-size: .9em;
		margin-top: 18px;
	}
	
	
/***********
Formating
***********/	
a {
	color: #29a1cc;
	text-decoration: underline;
}

a:hover, a:active {
	color: #0c82ae;
	text-decoration: underline;
}

h1 {
	color: #535753;
	font-family: Arial, sans-serif;
	font-size: 1.75em;
	font-weight: normal; /*bold;*/
	margin: 0;
	padding: 0;
}

h2 {
	font-size: 1.55em;
	font-family: Arial, sans-serif;
	font-weight: normal;
	color: #3a3f40;
}

h3 {
	font-size: 1.45em;
	font-family: Arial, sans-serif;
	font-weight: normal; /*bold;*/
	color: #3a3f40;
	margin: 10px 0 1px;
}

h3 a, h3 a:hover {
    text-decoration: none;
}

h4 {
	font-size: 1.2em;
	font-family: Arial, sans-serif;
	font-weight: bold;
	color: #3a3f40;
	margin: 5px 0 1px 0;
}

h5 {
	font-size: 1.0em;
	font-family: Arial, sans-serif;
	font-weight: normal;
	color: #7b0b0c;
	margin: 3px 0 1px;
}

h6 {
	font-size: 0.8em;
	font-weight: normal;
	letter-spacing: 2px;
	color: #999;
	text-transform: uppercase;
}

strong {
	font-weight: bold;
}
ul {
	margin: -.9em 0 1.1em 1.2em;
}
ol {
	margin: -.9em 0 1.1em 1.95em;
}
li {
	line-height: 1.6;
	margin-bottom: .8em;
}
/*  PORTFOLIO SECTION */
#portfolio h1, #project h1 {
	color: #535753;
	font-family: "Trebuchet MS",Arial, sans-serif;
	font-size: 1.22em;
	font-weight: bold;
	margin: 10px 0 0;
	padding: 0;
}
#portfolio h2, #project h2 {
	color: #262a27;
	font-family: "Trebuchet MS",Arial, sans-serif;
	font-size: 1.20em;
	font-weight: normal;
	margin: 0 0 5px;
	padding: 0;
}
#portfolio .project-list h3, #project h3 {
	border-bottom: 1px solid #7b0b0c;
	color: #7b0b0c;
	font-size: .88em;
	line-height: 1;
	margin: 55px 0 10px;
	padding: 0 0 1px;
}
	#project h3{margin: 10px 0 8px;}
#portfolio p, #project p {
	color: #3d433e;
	font-size: .88em;
	line-height: 1.4;
}

#portfolio .quote p, #project .quote p {
	border-top: 1px solid #7b0b0c;
	color: #8e9990;
	margin: 10px 0;
	padding: 10px 0;
}
#project .quote p{
	border-top: 1px solid #bec2b4;
}
#portfolio .creditline p, #project .creditline p {
	color: #bcc4a6;
	margin: 3px 0 0;
	text-align: right;
}
#portfolio .creditline p a, #project .creditline p a{
	color: #939982;
}


#content-area p {
	color: #5e6059;
	line-height: 1.85;
	margin-bottom: 16px;
}
#content-area .left_col ul, #content-area .left_col ol {
	color: #5e6059;
	line-height: 1.7;
}

#content-area .right_col h2 {
	color: #7b0b0c;
	font-family: "Trebuchet MS",Arial, sans-serif;
	font-size: 1.85em;
	font-weight: normal;
	margin: 6px 0 1px;
}
#content-area .right_col p {
	color: #444a34;
	font-size: .95em;
	line-height: 1.35;
	margin-bottom: 10px;
}
#content-area .right_col ul, #content-area .right_col ol {
	color: #444a34;
}


/*************
PAGE 
*************/
#page{margin: 0 77px 0; height: 410px; height: auto !important; min-height: 410px;}

/* Border */
#page .box{background-color: #c2c4bc;}
#page .box .tl{ background: url("../img/box_corner_tl.gif") no-repeat 0 0; }
#page .box .tr{ background: url("../img/box_corner_tr.gif") no-repeat 100% 0; }
#page .box .bl{ background: url("../img/box_corner_bl.gif") no-repeat 0 100%; }
#page .box .br{ background: url("../img/box_corner_br.gif") no-repeat 100% 100%; padding: 12px;}
#page-nav{
	position: absolute;
	top:8px;
	right: 8px;
	overflow: hidden;
}
	#page-nav a {
		background: url("../img/project-nav.png") no-repeat;
		display: block;
		float: left;
		height: 21px;
		margin-right: 4px;
		text-indent: -9999px;
		overflow: hidden;
		width: 21px;
	}
	#page-nav a.close {
		background-position: -26px 0;
	}
	#page-nav a.close:hover {
		background-position: -26px -25px;
	}

#page #content-area{background-color: #ffffff;}
#page #content-area div.content {
		background-color: #ffffff;
		display: block;
		overflow: hidden;
		width: 100%;
	}
	#page h1{margin-bottom: 10px;}
	#page .layout-2col{
		background: url("../img/page_layout-2col.gif") 0 0 repeat-y;
		overflow: hidden;
	}
	#page .left_col{
		float: left;
		width: 425px;
	}
	#page .right_col{
		float: right;
		width: 210px;	
	}



/******************
PROJECT DETAIL PAGE
*******************/
#project{margin: 0 77px 0; height: 410px; height: auto !important; min-height: 410px;}

/* Border */
#project .box{background-color: #c2c4bc;}
#project .box .tl{ background: url("../img/box_corner_tl.gif") no-repeat 0 0; }
#project .box .tr{ background: url("../img/box_corner_tr.gif") no-repeat 100% 0; }
#project .box .bl{ background: url("../img/box_corner_bl.gif") no-repeat 0 100%; }
#project .box .br{ background: url("../img/box_corner_br.gif") no-repeat 100% 100%; padding: 12px;}
.detail-content{background-color: #ffffff; padding: 40px; overflow: hidden; position: relative;}
#project-nav{
	position: absolute;
	top:8px;
	right: 8px;
	overflow: hidden;
}
	#project-nav a {
		background: url("../img/project-nav.png") no-repeat;
		display: block;
		float: left;
		height: 21px;
		margin-right: 4px;
		text-indent: -9999px;
		overflow: hidden;
		width: 21px;
	}
	#project-nav a.prev {
		background-position: 0 0;
	}
	#project-nav a.close {
		background-position: -26px 0;
	}
	#project-nav a.next {
		background-position: -51px 0;
	}
	#project-nav a.prev:hover {
		background-position: 0 -25px;
	}
	#project-nav a.close:hover {
		background-position: -26px -25px;
	}
	#project-nav a.next:hover {
		background-position: -51px -25px;
	}
	
.download-link{
	background: url("../img/download_icon.gif") 0 50% no-repeat;
	display: block;
	margin: 3px 0 0;
	padding: 0 0 0 12px;
	font-size: .8em;
	font-weight: bold;
	text-decoration: none;
	height: 10px;
	line-height: 10px;
}

.detail-content .image{
	float: left;
	width: 255px;
}
.detail-content .image img {
	border: none;
}
.text-col {
	float: right;
	width: 355px;
}

#project_page #footer {border: none; background: none; margin: 20px 77px 0;}

#lightbox_overlay {
    background-color: transparent;
    display: none;
    height: 9999em;
    left: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 9000;
}
#lightbox {	
	background: #c2c4bc;
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -380px;
    top:88px;
    width: 760px;
    z-index: 9001;
}
#lightbox #project {
	margin: 0;
}
#lightbox .white_bg {background-color: #ffffff;}
#lightbox .detail-content{background-color: #ffffff; height: 340px; height: auto !important; min-height: 340px;}
#lightbox #loading{
	text-align: center;
	line-height: 340px;
	height: 320px;
}