/*
Theme Name: Vitriol Consult
Author: Vitriol Consult
Author URI: http://vitriolconsult.com/
*/

@import url('css/reset.css');
@import url('css/nivo-slider.css');
@import url('css/fonts.css');

html, body { margin:0; padding:0; width:100%; height:100%; min-height:100%; }

.clear { clear:both; }
.left { float:left; }
.right { float:right; }
.hide { display:none; }

img.alignleft {
	position:relative;
	float:left;
	margin-right:10px;
}

img.alignright {
	position:relative;
	float:right;
	margin-left:10px;
}

img.aligncenter {
	display:block;
	margin:10px auto;
}

#wrap {
	position:relative;
	min-width:100%;
	min-width:1000px;
	margin:0; padding:0;
	overflow:hidden;
}

.wrap {
	position:relative;
	width:960px;
	margin-left:auto;
	margin-right:auto;
}

/************************************************************
		HEADER
*************************************************************/

#header {
	position:relative;
	display:block;
	margin:0; padding:0;
	height:275px;
	background:#000 url(images/head-bg.jpg) repeat-x top center;
}

#header .inner {
	display:block;
	height:245px;
	margin:0; padding:0;
	background:url(images/head-inner-bg.jpg) no-repeat top center;
}

#header a.logo {
	position:relative;
	left:-60px;
}

#client-login {
	position:absolute;
	top:0; right:0;
	width:99px; height:29px;
	z-index:500;
}

/************************************************************
		NAVIGATION
*************************************************************/

#nav {
	position:absolute;
	top:75px; right:0;
	margin-top:0px;
}

#nav .hover {
	position:absolute;
	top:-7px; left:0;
	height:3px;
	background:url(images/nav-hover.jpg) repeat-x;
}

#nav ul.menu {
	position:relative;
	display:block;
	margin:0; padding:0;
}

#nav ul.menu li {
	position:relative;
	float:left;
	margin:0 0 0 40px;
	color:#fff;
}

#nav ul.menu li a {
	padding-top:4px;
}

#nav ul.menu li em {
	display:block;
	margin-top:4px;
}

/************************************************************
		SLIDER
*************************************************************/
#slider {
	position:relative;
	display:block;
	height:300px;
	background:url(images/slide-shadow.jpg) no-repeat bottom center;
}

#slider .slider-border {
	position:absolute;
	top:-110px; left:50%;
	width:960px; height:339px;
	margin:0 0 0 -481px;
	background:url(images/cube-bg.png) no-repeat top left;
}

#slider .slider-content {
	position:absolute;
	top:5px; left:5px;
	width:946; height:339px;
	margin:0; padding:0;
}

/************************************************************
		TESTIMONIALS
*************************************************************/
#testimonials {}

#testimonials ul {
	position:relative;
}

#testimonials ul li {
	position:absolute;
	display:block;
	background:#fff;
}

/************************************************************
		CONTENT
*************************************************************/
#content {
	position:relative;
	width:960px;
	margin:15px auto; padding:0;
}

#content p {
	margin-bottom:15px;
}

#content h1.page-title {
	margin-bottom:15px;
}

#content h1 span.extra {
	padding-left:50px;
}

#content .cols {
	position:relative;
	display:block;
	overflow:hidden;
}

#content .cols .col {
	position:relative;
}

#content .cols .col50 {
	width:47%;
}

#content .cols .col306 {
	width:306px;
	margin-left:20px;
}

#content .cols .col306:first-child {
	margin-left:0;
}

#content .cols .col306 h2 {
	margin-bottom:10px;
}

#content .cols .col306 img {
	display:block;
	margin-bottom:15px;
}

#content .blurb {
	display:block;
	margin:0 0 50px 0; padding:0;
}

#content .blurb h1 {
	font-size:20px;
}

#homepage {}

#homepage h2 {
	font-size:24px;
}

/************************************************************
		FOOTER
*************************************************************/
#footer {
	position:relative;
	display:block;
	width:960px;
	margin:25px auto;
	padding:10px 0;
	border-top:#7c7c7c 1px solid;
	overflow:hidden;
	
	font-size:11px;
	color:#333
}

#footer .right { text-align:right; }

/************************************************************
		PORTFOLIO
*************************************************************/
#portfolio {
	position:relative;
	left:-21px;
	display:block;
	width:1002px;
	margin:0 auto; padding:0;
	overflow:hidden;
	/*min-height:500px;*/
	z-index:10;
}

#portfolio .project {
	position:relative;
	float:left;
	width:334px; height:188px;
	margin:0; padding:0;
	background:url(images/portfolio_thumb_shadow.png) no-repeat center center;
	cursor:pointer;
}

#portfolio .project img.shadow {
	position:absolute;
	top:-7px; left:-7px;
	z-index:1;
}

#portfolio .project .thumb {
	position:relative;
	top:14px; left:14px;
	width:306px; height:160px;
	z-index:10;
}

#portfolio .project .thumb img {
	position:relative;
}

#single_portfolio {}

#single_portfolio .project-head {
	display:block;
	position:relative;
	overflow:hidden;
}

#single_portfolio .project-head h1 {
	position:relative;
	float:left;
	max-width:75%;
}

#single_portfolio .project-head a {
	position:relative;
	top:5px;
	font-size:11px;
}

#single_portfolio .col1 {
	width:700px;
	overflow:hidden;
}

#single_portfolio h1 {
	margin-bottom:15px;
}

#single_portfolio .col1 .pagi {
	display:block;
	position:relative;
	overflow:hidden;
	margin-top:20px;
	text-align:center;
}

#single_portfolio .col1 .pagi a {
	font-size:11px;
}

#single_portfolio .col2 {
	width:200px;
}

#single_portfolio .col2 p strong:first-child {
	text-transform:capitalize;
}

#single_portfolio .col2 h2 {
	margin-bottom:15px;
}

#single_portfolio a.launch-btn {
	padding:3px 10px;
	color:#555555;
	font-weight:bold;
	background:#cfccc0;
}

#single_portfolio a.launch-btn:hover {
	background:#00a2cd;
	color:#fff;
}

#single_portfolio a.pagilink {
	display:inline-block;
	height:20px;
	margin-left:5px;
	background:url(images/portfolio_nav.png) no-repeat;
	
	*display:inline;
	*zoom:1;
}

#single_portfolio .pagi a.pagilink:first-child { margin-left:0; }

#single_portfolio a.previousproject { width:12px; background-position:0 0; }
#single_portfolio a.previousproject:hover { width:12px; background-position:0 -20px; }

#single_portfolio a.backproject { width:20px; height:19px; background-position:-17px -1px; }
#single_portfolio a.backproject:hover { width:20px; height:19px; background-position:-17px -20px; }

#single_portfolio a.nextproject { width:12px; background-position:-42px 0; }
#single_portfolio a.nextproject:hover { width:12px; background-position:-42px -20px; }

/* client list */
#client-list {
	position:relative;
	margin-top:40px;
	display:block;
	overflow:hidden;
}

#client-list ul {
	display:block;
}

#client-list li {
	position:relative;
	width:24%;
	float:left;
	margin-left:10px;
}

#client-list li:first-child {
	margin-left:0;
}

/************************************************************
		BLOG/POSTS
*************************************************************/
#posts {
	position:relative;
	left:-10px;
	display:block;
	width:980px; min-height:450px;
	overflow:hidden;
}

#posts .post {
	position:relative;
	float:left;
	width:223px; height:306px;
	background:#f5f3f0;
	margin:0 10px 10px 10px; padding:0;
}

#posts .post .post-pad {
	display:block;
	padding:15px;
}

#posts .post em.post-date {
	display:block;
	margin-bottom:5px;
}

#posts .post h2.post-title {
	color:#555;
	margin-bottom:15px;
}

#posts .post h2.post-title a {
	color:#555;
}

#posts .post h2.post-title a:hover {
	color:#0082fe;
}

#posts .post img {
	display:block;
	margin:0 auto 15px auto;
}

#posts .post .comments {
	position:absolute;
	bottom:20px; left:20px;
	display:block;
	padding-left:33px;
}

#posts .post .comments a.trig {
	position:absolute;
	top:-4px; left:0;
	display:inline-block;
	width:26px; height:26px;
	margin-right:7px;
	background:url(images/comment-icons.jpg) no-repeat 1px 0;
}

#posts .post .comments a.trig:hover {
	background-position:top right;
}

/* twitter box */
#posts .twitter {
	background:#fff;
	border:#f5f3f0 1px solid;
}

/************************************************************
		SINGLE POST PAGE
*************************************************************/
#single-post {}

#single-post .single-content {
	display:block;
	margin:0 0 15px 0;
	padding:15px;
	background:#f5f3f0;
}

#single-post .single-content .post-pagi {
	position:relative;
	display:block;
	overflow:hidden;
}

#single-post .single-content .post-pagi span { position:relative; }

#single-post .single-content .post-pagi a { font-size:11px; }

#single-post .single-content .post-date {
	position:relative;
	display:block;
	margin-bottom:15px;
}

#single-post .single-content .catlist {
	position:relative;
}

#single-post .single-content .catlist a {
	color:#555;
}

#single-post .comments {
	position:relative;
	width:615px;
	margin-left:15px;
}

#single-post .comments .comments-head {
	position:relative;
	display:block;
	overflow:hidden;
	margin-bottom:15px;
}

#single-post .comments .comments-head h3 {
	position:relative;
	float:left;
	max-width:50%;
	margin:0; padding:0;
}

#single-post .comments .comments-head .social {
	position:relative;
	float:right;
	max-width:50%;
	margin:0; padding:0;
}

#single-post .comments .comments-head .social a.icon {
	display:inline-block;
	height:16px; width:16px;
	margin-left:5px;
	background:url(images/social-icons.jpg) no-repeat;
	
	*display:inline;
	*zoom:1;
}

#single-post .comments .comments-head .social a.i1 { background-position:0 0; }
#single-post .comments .comments-head .social a.i2 { background-position:-19px 0; }
#single-post .comments .comments-head .social a.i3 { background-position:-38px 0; }
#single-post .comments .comments-head .social a.i4 { background-position:-57px 0; }
#single-post .comments .comments-head .social a.i5 { background-position:-76px 0; }
#single-post .comments .comments-head .social a.i6 { background-position:-95px 0; }
#single-post .comments .comments-head .social a.i7 { background-position:-114px 0; }
#single-post .comments .comments-head .social a.i8 { background-position:-133px 0; }

#single-post .comments .comments-list {
	display:block;
}

#single-post .comments .comments-list .comment {
	margin-bottom:20px;
}

#single-post .comments .comments-head .social a.icon span {
	display:none;
}

#single-post .comment-box {
	position:relative;
	width:310px;
}

#single-post .comment-box .comment-box-wrap {
	display:block;
	padding:20px;
	background:#f5f3f0;
}

#single-post .comment-box .comment-box-wrap h2 {
	margin-bottom:15px;
}

/************************************************************
		FORMS
*************************************************************/
#content .xform {}

#content .xform .inp {
	display:block;
	width:100%;
	margin-bottom:10px;
	background:#fff;
	border:#e7e6e5 1px solid;
	padding:3px 0;
	
	text-indent:5px;
	font-size:11px;
	font-style:italic;
	color:#555555;
	font-family:Arial, Helvetica, sans-serif;
}

/************************************************************
		CONTACT
*************************************************************/
#map {
	position:relative;
}

#map .office {
	position:absolute;
	visibility:hidden;
}

#map .office img:first-child { cursor:pointer; }

#map .loc-fl { top:125px; left:176px; }
#map .loc-de { top:83px; left:191px; }
#map .loc-it { top:64px; left:463px; }
#map .loc-mol { top:67px; left:520px; }

#map .office .office-details {
	display:none;
	position:absolute;
	padding:10px; margin:0;
	background:transparent url(images/box-fade-bg.png) repeat;
	white-space:nowrap;
	z-index:9999;
}

#map .office .office-details p { display:block; margin:0; }

#map .primary-loc .office-details { top:50px; left:35px; }
#map .secondary-loc .office-details { top:40px; left:18px; }

#contact-form, #contact-success, #contact-error {
	position:absolute;
	top:85px; right:0px;
	width:270px;
	padding:20px; margin:0;
	background:url(images/box-fade-bg.png) repeat top left;
	z-index:500;
}

#contact-form h2, #contact-success h2, #contact-error h2 {
	margin-bottom:20px;
}

#contact-form .inp {
	display:block;
	margin-bottom:10px;
	border:none;
	padding:3px;
	font-style:italic;
	color:#555;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
}

#contact-form .i1 {
	width:180px; height:18px;
	background:url(images/contact-input.jpg) no-repeat top left;
}

#contact-form .i2 {
	width:263px; height:95px;
	margin-bottom:5px;
	background:url(images/contact-textarea.jpg) no-repeat top left;
}

#contact-form .callus {
	margin-top:15px;
}

#contact-form .lg {
	display:block;
	margin-top:5px;
	font-size:25px;
}

#contact-success, #contact-error {
	top:-1500px;
}

/************************************************************
		ABOUT
*************************************************************/
#team {
	position:relative;
	display:block;
	overflow:hidden;
}

#team .team-member {
	position:relative;
	width:300px;
	margin-left:30px;
}

#team .team-member:first-child {
	margin-left:0;
}

#team .team-member .headshot {
	display:block;
	margin-bottom:10px;
	font-size:12px;
	overflow:hidden;
}

#team .team-member .headshot .name {
	display:block;
	padding-top:70px;
	padding-bottom:5px;
	font-size:24px;
}

#other-team {
	margin-top:25px;
	font-size:18px;
}

/************************************************************
		404
*************************************************************/
#the404 {
	max-width:450px;
	margin-right:145px;
}

#the404 a {
	padding-right:15px;
}

/************************************************************
		LARGE ICONS
*************************************************************/
#content .lgicon {
	position:absolute;
}

#content .icon-hand {
	top:-25px; right:-300px;
	width:354px; height:496px;
	background:url(images/sideimg-portfolio.jpg) no-repeat top left;
	z-index:1;
}

#content .icon-twitter {
	top:0; right:-425px;
	width:499px; height:432px;
	background:url(images/lgicon-twitter.png) no-repeat top left;
	z-index:50;
}