/* stop resize */
div, p, a, li, td {-webkit-text-size-adjust:none;}

/* Stop the font flicking when cufon is ready */
/*.js .stag, .js .stag-light{
	display: none;
}
.stag, .stag-light{
	display: block;
}
.js #main-navigation a{
	display: none;
}
#main-navigation a{
	display: inline;
	display: inline-block;
}*/
.stag{
	font-weight: 400;
}
.stag-light{
	font-weight: 200;
}
/* Global Elements */
body{
		background: url(http://www.officetwelve.com/images/site_images/repeating-pattern_300px.jpg) 0 0 repeat;
		font-family: Helvetica, Arial, sans;
	color: #333132;
	font-size: 13px;
	line-height: 17px;
}
p{margin-bottom:12px;}
hr{
	border:0px;
	height: 1px;
	background: #949497;
	display: block;
}
a, a:visited{
	color: #a4082d;
}
a:hover{
	text-decoration: underline;
}
/* logo area */
#logo{
	display: block;
	width: 100%;
	height: 10px;
	overflow: visible;
	margin-top: 30px;
	background: url(http://www.officetwelve.com/images/site_images/line.png) 0 0 repeat-x;
	position: relative;
}
	#logo-image{
		position: absolute;
		top:5px;
		right:0px;
	}
/* Main Navigation */
#main-navigation{
	width:960px;
	margin:9px auto 0px auto;
	padding-bottom:6px;
	text-align: center;
	height: 23px;
	display: block;
}
	#main-navigation a{
		padding:2px 6px;
		font-size: 14px;
		color: #333132;
	}
	#main-navigation a:hover, #main-navigation a.current{
		color: #a4082e;
		text-decoration: none;
	}
/* Sub Navigation */
#sub-navigation{
	display: none;
	text-align: center;
	font-size: 13px;
	line-height:16px;
}
	.portfolio #sub-navigation, .about #sub-navigation, .contact #sub-navigation, .home #sub-navigation, .press #sub-navigation{
		display: block;
		height: auto;
	}
	no-menu #sub-navigation{
		display: none;
	}
		.portfolio #clients{
			margin-top: 35px;
			display: block;
		}
		.home #intro{
			display: block;
			text-align: left;
		}
		.about #about{
			display: block;
		}
		.press #about{
			display: block;
		}
		.contact #contact{
			display: block;
		}
	.sub-menu{
		margin: 0 auto;
		text-align: center;
	}
		.sub-menu .label{
			color: #333132;
			display: inline-block;
			padding:1px 0px;
			margin: 10px 0;
		}
		.sub-menu .label.current{
			color: #a4082e;
		}
		.sub-menu a, .sub-menu a:visited{
			color: #333132;
			padding: 0px 5px;
			display: inline!important;
		}
		.sub-menu a:hover{
			color: #a4082e;
			text-decoration: none;
		}
		.sub-menu a.current{
			color: #a4082e;
		}	
			.portfolio-menu{
				overflow: hidden;
			}
			.portfolio-menu.closed{
				display: none;
			}
			.portfolio-menu.open{
				display: block;
			}
	#clients, #creative, #about, #contact, #intro{
		display: none;
	}
	#sub-navigation #about a:link, #sub-navigation #about a:visited, #sub-navigation #contact a:link, #sub-navigation #contact a:visited{ 
		padding-bottom: 9px;
	}
	#intro, #about, #contact{
		text-align: left;
		padding-top: 25px;
	}
		#intro p{
			display: block;
		}
/* Inner Navigation */
#inner-navigation{
	width: 130px;
	font-size: 13px;
	line-height:16px;
	float:left;
	margin-right: 10px;
}
	#inner-navigation .sub-menu{
		margin:0;
		text-align: left;
	}
	#inner-navigation .sub-menu .label{
		margin: 0 0 10px 0;
	}
	#inner-navigation .sub-menu a, #inner-navigation .sub-menu a:visited{
		display: block!important;
		padding:3px 0px;
		line-height: 18px;
	}
/* Press Area */
.press-content{
	width: 719px;
	height: 515px;
	padding: 15px;
	display: block;
	margin: 20px auto;
	background: url(http://www.officetwelve.com/images/site_images/white_bg.png) 0 0 repeat;
	background: rgba(255,255,255,.75); 
	/* Drop Shadows */
	-moz-box-shadow:8px 4px 8px rgba(0,0,0,.35);
	-webkit-box-shadow:8px 4px 8px rgba(0,0,0,.35);
	box-shadow:8px 4px 8px rgba(0,0,0,.35);
	position: relative;
}
.press-item{
	position: absolute;
	top:15px;
	left:15px;
	display: none;
}
	.press-image{
		width: 719px;
		text-align: center;
	}
.press-item.current{
	display: block;
}
#press-previous, #press-next{
		/*
		display: block;
		text-indent: -1000em;
		width: 23px;
		height: 27px;
		float: left;
		padding:0px 5px;
		*/
		float: left;
		color: #898478;
		font-size: 30px;
		line-height: 20px;
		padding-right:5px;
	}/*
	#press-next{
		background: url(http://www.officetwelve.com/images/site_images/project_next.png) 0 0 no-repeat;
	}
	#press-previous{
		background: url(http://www.officetwelve.com/images/site_images/project_previous.png) 0 0 no-repeat;
	}*/
/* Main Content Area */
.main-content{
	width: 719px;
	min-height: 515px;
	padding: 15px;
	display: block;
	margin:10px auto 0 auto;
	background: url(http://www.officetwelve.com/images/site_images/white_bg.png) 0 0 repeat;
	background: rgba(255,255,255,.75);
	/* Drop Shadows */
	-moz-box-shadow:8px 4px 8px rgba(0,0,0,.35);
	-webkit-box-shadow:8px 4px 8px rgba(0,0,0,.35);
	box-shadow:8px 4px 8px rgba(0,0,0,.35);
}
/* Featured Page */
	#featured-projects{
		position: relative;
		width: 719px;
		height: 515px;
	}	
		.featured-project{
			display: none;
			position: absolute;
			top: 15px;
			left: 15px;
		}
			.featured-project.current{
				display: block;
			}
			.featured-project .project-image{display:block;}
			.project-label{
				position: relative;
				height:30px;
			}
				#project-label .label{
					position: absolute;
					left: 0px;
					top: 0px;
					display:none;
				}
				#project-label .label.current{
					display: block;
				}
					.label h2{
						font-size: 14px;
						font-weight: normal;
					}
						.label h2 a, .label h2 a:visited{
							color: #333132;
						}
						.label h2 a:hover{
							color: #a4082e;
						}
	
		#project-images{
			width: 719px;
			height: 475px;
			overflow: hidden;
			position: relative;
		}
			.project-image{
				display: none;
			}
			.project-image.current{
				display: block;
			}
				#project-images .images{
					position: absolute;
					top:0px;
					left:0px;
					width: 719px;
					height: 475px;
					text-align: center;
					display: none;
				}
				#project-images .images.current{
					display: block;
				}
		#project-label{
			position: relative;
			height:30px;
		}
			#project-label .label{
				position: absolute;
				left: 0px;
				top: 0px;
				display:none;
			}
			#project-label .label.current{
				display: block;
			}
				.label h2{
					font-size: 12px;
					font-weight: normal;
				}
					.label h2 a, .label h2 a:visited{
						color: #333132;
					}
					.label h2 a:hover{
						color: #a4082e;
					}
		#project-indicators{
			visibility: hidden;
			position: absolute;
			right: 15px;
			bottom: 15px;
		}
		#project-indicators .indicator{
			float:left;
			padding:0px 5px;
		}
		#project-indicators .indicator.current{
			color: #a4082e;
		}
	
/* Project Listing Page */

.listing-content{
	width: 760px;
	min-height: 515px;
	display: block;
	margin: 0px auto;
}
.listing-wrapper{
	min-height: 555px;
}
	.listing{
		display: block;
		width: 228px;
		height: 152px;
		margin:0px 17px 17px 0px;
		padding: 7px;
		background: url(http://www.officetwelve.com/images/site_images/white_bg.png) 0 0 repeat;
		background: rgba(255,255,255,0.56);
		float: left;
		position: relative;
		/* Drop Shadows */
		-moz-box-shadow:5px 2px 5px rgba(0,0,0,.35);
		-webkit-box-shadow:5px 2px 5px rgba(0,0,0,.35);
		box-shadow:5px 2px 5px rgba(0,0,0,.35);
		filter: progid:DXImageTransform.Microsoft.Shadow(strength=5, direction=112.5, color='rgba(0,0,0,.35)');
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength=5, Direction=112.5, Color='rgba(0,0,0,.35)')";
		/*Shadows look very different in IE (Only cardinal directions supported)*/
		/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
		/*Element should have a background-color*/
		/*All filters must be placed together*/
		/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
	}
	.listing.end{
		margin:0px 0px 17px 0px;
	}
		.listing a.stag{
			visibility: hidden;
		}
		.listing a{
			visibility: hidden;
			width: 228px;
			height: 152px;
			position: absolute;
			left: 7px;
			top: 7px;
			text-align: center;
			line-height: 152px;
			background: url(http://www.officetwelve.com/images/site_images/black.png) 0 0 repeat;
			background: rgba(35,31,33, .61);
			color: #fff;
			font-size: 17px;
			text-decoration: none;
		}
		.listing:hover a{
			visibility: visible;
		}
		.listing img{
			display: block;
			position: absolute;
			left: 7px;
			top: 7px;
		}
.label-holder{padding-bottom:9px;}
/* Project Page */
.portfolio{
	position: relative;
}
#project-pagination{
	position: absolute;
	right: 15px;
	bottom: 15px;
}
	#project-previous:link, #project-previous:visited, #project-next:link, #project-next:visited{
		/*display: block;
		text-indent: -1000em;
		width: 23px;
		height: 27px;
		float: left;
		padding:0px 5px;*/
		float: left;
		color: #898478;
		font-size: 30px;
		line-height: 20px;
		padding-right:5px;
	}/*
	#project-next{
		background: url(http://www.officetwelve.com/images/site_images/project_next.png) 0 0 no-repeat;
	}
	#project-previous{
		background: url(http://www.officetwelve.com/images/site_images/project_previous.png) 0 0 no-repeat;
	}*/
#project-label{
	
}
	#more-link{
		color: #a4082e;
	}
	#more-link:hover{
		color: #333132;
	}
#project-information{
	position: absolute;
	left:0px;
	bottom:0px;
	background: #fff;
	background: rgba(255,255,255,0.9);
	width:100%;
	display: none;
}
	#project-information-inner{
		width: 600px;
		padding: 20px 10px 10px 10px
	}
/* News Page */
#news-feed{
	padding:15px;
	width: 719px;
}
	.news-column{
		width:233px;
		float: left;
		margin-right:10px;
	}
	.news-column-double{
		width: 486px;
		float: left;
	}
	.news-column.last{
		margin-right: 0;
	}
.js .sort{
	/*opacity: 0;*/
}
.sort{
	width: 223px;
	display: block;
	border-bottom: 1px solid #949497;
	padding: 0px 0px 10px 0px;
}
.sort a.wrap{
	color: #333132;
}
.sort a.wrap:hover{
	text-decoration: none;
}	
	.news-post, .blog-post{
		margin-bottom: 10px;
	}
	.floatleft{
		width: 223px;
		margin-right: 10px;
		padding-right: 10px;
		float: left;
	}
	.news-post.pagination{
		display: block;
		width: 466px;
		text-align: center;
	}
	.sort.facebook-post{
		background: url(http://www.officetwelve.com/images/site_images/facebook_icon.gif) left 0px no-repeat;
		padding-left:40px;
		width: 193px;
		margin-bottom: 10px;
	}
	.sort.facebook-post p{margin:0;}
	.sort.twitter-post{
		background: url(http://www.officetwelve.com/images/site_images/twitter_icon.gif) left 0px no-repeat;
		padding-left:40px;
		width: 193px;
		margin-bottom: 10px;
	}
	.sort iframe, .sort embed .sort object{
		width: 233px!important;
		max-width: 233px;
	}
.date{
	display:none;
	width:0px;
	height:0px;
	overflow: hidden;
}
/* About Page */
#about-content{
	position: relative;
	width: 669px;
	margin: 10px auto;
	padding: 25px;
	min-height: 495px;
}
	.about-copy h2{
		font-size: 20px;
		line-height: 20px;
	}
.about-copy{
	float:left;
	font-size: 14px;
	line-height: 17px;
}	
	.ethos-image{
		margin-bottom: 15px;
	}
	.ethos-text{
		font-size: 14px;
		line-height: 17px;
	}
	
	.review{
		width: 669px;
		margin: 10px 0px 20px 0px;
	}

.copy{
	font-size: 14px;
	line-height: 17px;
	margin-top: 20px;
}
.cite{
	font-size: 14px;
	line-height: 17px;
	margin:10px 0px 20px 0px;
}
.pillars{
	position: relative;
	width: 719px;
	height: 475px;
	overflow: hidden;
}
	.pillar-image{
		position: absolute;
		left: 0;
		top: 0;
		display: none;
	}
	.pillar-image.current{
		display: block;
	}
.pillar-thumbnails{
	margin-top: 15px
}
	.pillar-thumbnail{
		cursor: pointer;
		float: left; margin-right: 15px;
		opacity: 0.5;
		-webkit-opacity: 0.5;
		-moz-opacity: 0.5;
		-ms-opacity: 0.5;
		-o-opacity: 0.5;
		transition: all .5s;
		-moz-transition: all .5s; /* Firefox 4 */
		-webkit-transition: all .5s; /* Safari and Chrome */
		-o-transition: all .5s; /* Opera */
	}
		.pillar-thumbnail.current, .pillar-thumbnail:hover{
			opacity: 1;
			-webkit-opacity: 1;
			-moz-opacity: 1;
			-ms-opacity: 1;
			-o-opacity: 1;
		}
	.pillar-thumbnail.last{
		margin: 0;
	}
.more-info{
	position: absolute;
	left:0px;
	bottom:0px;
	background: #fff;
	background: rgba(255,255,255,0.9);
	width:100%;
}
	.more-info-inner{
		padding: 15px
	}
.awards{
	margin-bottom: 20px;
	padding-bottom: 10px;
}
#award-logo{
	position: absolute;
	bottom:20px;
	left:20px;
}
.awards.last{
	border:0;
	margin:0;
	padding:0;
}
	.awards h3{
		font-size: 14px;
		line-height: 16px;
	}
		.awards .description{
			margin: 4px 0 10px 0;
		}
		.awards .project{
			position: relative;
		}
			.awards .project .award{
				position: absolute;
				bottom: 15px;
				left: 15px;
			}
/* Careers Page */
.careers-copy{
	float:left;
	width: 659px;
	margin-right: 10px;
}
	.careers-copy h3{
		font-size: 16px;
		line-height: 20px;
		padding-bottom: 4px;
	}
	.job-description{
		margin-bottom: 30px;
	}
	.careers-copy .blurb{
		font-size: 14px;
		line-height: 17px;
	}
	.careers-copy .download{
		font-size: 14px;
		line-height: 17px;
	}

/* Splash Page */
.splash-content{
	width: 960px;
	margin: 200px auto;
	text-align: center;
}
	.splash-content h2{
		line-height: 20px;
		margin: 0 auto;
		padding: 0;
		font-size:21px;
		font-weight: normal;
		color: #333132;
	}
	#enter-btn{
		display: block;
		width: 60px;
		margin:20px auto;
		padding: 15px;
		/*background: url(http://www.officetwelve.com//images/site_images/line.png) bottom left repeat-x;*/
		color: #333132;
		font-size: 17px;
		text-transform: uppercase;
	}
	#enter-btn:hover{
		color: #a4082e;
		text-decoration: none;
	}
/* Footer */
#footer-copyright{
	width:721px;
	margin: 15px auto 0 auto;
	text-align: right;
	color: #aaa;
}
.news #footer-copyright, .portfolio #footer-copyright, .home #footer-copyright, .about.awards #footer-copyright, .press #footer-copyright{
	width: 749px;
}
	#footer-right{float:right;}
		#footer-right a{
			color: #aaa;
		}
		#footer-right a:hover{
			color: #a4082e;
			text-decoration: none;
		}
	#footer-left{float:left;}
/* Javascript scrolling stuff */
.jscroll{
	height: 550px;
	overflow: hidden;
}
	.jscroll-holder{
		position: relative;
		top:0px;
	}
		.policy{
			/*min-height: 550px;*/
			margin: 15px 0 30px 0;
		}
		.policy p{
			font-size: 14px;
			line-height: 17px;
			font-weight: 200;
		}
		.policy p strong{
			font-weight: 400;
		}
	#jscroll-previous, #jscroll-next{
		display: block;
		text-indent: -1000em;
		width: 16px;
		height: 13px;
		float: left;
	}
	#jscroll-next{
		background: url(http://www.officetwelve.com/images/site_images/jscroll_next.png) 0 0 no-repeat;
	}
	#jscroll-previous{
		background: url(http://www.officetwelve.com/images/site_images/jscroll_previous.png) 0 0 no-repeat;
	}

#sub-navigation{
	position:absolute;
	width: 165px;
	left:50%;
	margin-left: -548px;
}
	#sub-navigation a{
		text-align: left;
		line-height:16px;
		display: block!important;
		padding:3px 0px;
		margin:0px;
	}
	#sub-navigation .sub-menu{
		text-align: left;
	}