body {
	font: 12px "HelveticaLTStdRoman", "Arial", "Tahoma", "Verdana", sans-serif;
	color: #333;
	min-width: 820px;
	min-height: 700px;
}

html, body {
	height: 100%;
}

p {
	margin: 10px 0;
}

h1, h2, h3, h4, h5 {
	font: 14px "HelveticaLTStdBlackCondensed", "HelveticaLTStdRoman", "Arial", "Tahoma", "Verdana", sans-serif;
}

#container {
	width: 800px;
	height: 680px;	
	position: relative;
	overflow: hidden;
	top: 50%;
	margin: -340px auto 0 auto;
}

/* Header */

#header {
	height: 70px;
	background: #FFF;
}

#header #logo {
	text-transform: uppercase;
	width: 254px;
	height: 48px;
	position: relative;
	background: #FFF;
}

#header #logo a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: #FFF;
	width: 254px;
	height: 48px;
	text-decoration: none;
}

#header #logo a strong {
	font: 30px "AvenirLTStd85Heavy";
	font-weight: bold;
	display: block;
	color: #d0dadc;
}

#header #logo a strong span {
	font-weight: normal;
	font: 30px "AvenirLTStd45Book";
}

#header #logo a em {
	font: 14px "HelveticaLTStdBlackCondensed";
	display: block;
	margin: -4px 0 0 0;
	font-weight: bold;
	color: #989898;
}

#header #logo a.hover {
	opacity: 0;
}

#header #logo a.hover strong {
	color: #bac8cb;
}

#header #logo a.hover em {
	color: #737373;
}


/* Main */

#main {
	width: 800px;
	height: 415px;
	position: relative;
	background: #FFF;
}

#main .content.basic {
	height: 308px;
	padding: 20px;
	background: #d1d9dc;
}


/* Footer */

#footer {
	width: 800px;
	height: 155px;
	background: #dbdac8;
	position: relative;
}

#footer h2 {
	position: absolute;
	color: #dbdac8;
	font-size: 52px;
	letter-spacing: 2px;
	text-transform: uppercase;
	top: -52px;
	right: -4px;
	z-index: 10;
}

#footer div {
	float: left;
	width: 140px;
	margin: 28px 30px;
}

#footer div h3 {
	color: #FFF;
	font-size: 24px;
	display: block;
}

#footer div h3 span {
	color: #595959;
}

#footer div ul {
	list-style: none;
	margin: 10px 0 0 0 ;
}

#footer div ul li {
	display: block;
	margin: 4px 0 0 0;
}

#footer div ul li a {
	text-decoration: none;
	color: #595959;
	font: 14px "HelveticaLTStdBlackCondensed";
	text-transform: uppercase;
}

#footer div ul li a:hover {
	color: #FFF;
}


/* Disclaimer */

#disclaimer {
	width: 800px;
	height: 40px;
	line-height: 40px;
	color: #CCC;
	background: #FFF;
	position: relative;
	z-index: 99;
	font-size: 11px;
}

#disclaimer .left {
	width: 500px;
	float: left;
}

#disclaimer .right {
	width: 300px;
	float: right;
	text-align: right;
}

#disclaimer a {
	color: #CCC;
	text-decoration: none;
}

#disclaimer a:hover {
	text-decoration: underline;
}


/* Validation */

#main form label.error {
	display: none !important;
}

#main form .active {
	background: #FFF !important;
}

#main form .error {
	background: url('../images/required.jpg') no-repeat top right !important;
}

#main form .error.active {
	background: #FFF url('../images/required.jpg') no-repeat top right !important;
}



/*
	*
		*
			*	Specific pages below
		*
	*
*/


/* Homepage */

#main.home div {
	float: left;
	width: 155px;
	height: 400px;
	background: #babfc5;
	margin: 0 0 0 20px;
	position: relative;
}

#main.home div a {
	text-decoration: none;
	display: block;
	width: 155px;
	height: 400px;
}

#main.home div.second {
	margin: 0;
}


#main.home div h2 {
	color: #f1f0e9;
	width: 135px;
	font-size: 16px;
	text-transform: uppercase;
	position: absolute;
	top: 10px;
	left: 10px;
	line-height: 16px;
}

#main.home div.middle h2 {
	top: auto;
	bottom: 10px;
}

#main.home div h3 {
	color: #999;
	font-size: 16px;
	width: 135px;
	text-transform: uppercase;
	position: absolute;
	top: 46px;
	left: 10px;
}

#main.home div.middle h3 {
	top: auto;
	bottom: 30px;
}

#main.home div img {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
}

#main.home div img.on {
	z-index: 2;
}

#main.home div.middle img {
	position: absolute;
	top: 0;
	left: 0;
}

#main.home div p {
	display: block;
	color: #f1f0e9;
	width: 135px;
	position: absolute;
	letter-spacing: -0.05px;
	background: #babfc5;
	font-size: 11px;
	top: 64px;
	left: 10px;
}

#main.home div.middle p {
	top: auto;
	bottom: 64px;	
}

#main.home div.first {
	width: 295px;
	margin: 0;
	background: #FFF url('../images/homepage/latest_work.jpg') no-repeat 250px 0;
}

#main.home div.first h1 {
	text-transform: uppercase;
	font-size: 28px;
	color: #d1d9dc;
	line-height: 32px;
}

#main.home div.first h1 strong {
	color: #babfc5;
}


/* What we do - Ecommerce */

#main.ecommerce {
	
}

#main.ecommerce .transition {
	width: 518px;
	height: 395px;
	background: #DDD;
	float: left;
	position: relative;
	overflow: hidden;
}

#main.ecommerce .transition img.mask {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}

#main.ecommerce .transition div {
	position: absolute;
	top: 0;
	left: 0;
	width: 518px;
	height: 395px;
	z-index: 8;
}

#main.ecommerce .transition div img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#main.ecommerce .right {
	background: #babfc5;
	float: right;
	padding: 20px 20px 10px 20px;
	width: 225px;
}

#main.ecommerce .right h1 {
	text-transform: uppercase;
	font-size: 22px;
	color: #4c4c4c;
}

#main.ecommerce .right h1 span {
	color: #3fa9f5;
}

#main.ecommerce .right p {
	line-height: 17px;
	font-size: 11px;
}


/* Who we are - Case Studies */

#main.casestudies {
	
}

#main.casestudies .links {
	width: 196px;
	position: absolute;
	top: 0;
	left: 0;
}

#main.casestudies .links ul {
	list-style: none;	
}

#main.casestudies .links ul li {
	display: block;
}

#main.casestudies .links ul li a {
	color: #d1d9dc;
	font: 22px "HelveticaLTStdBlackCondensed";
	text-transform: uppercase;
	text-decoration: none;
}

#main.casestudies .links ul li a:hover {
	color: #b4b8ba;
}

#main.casestudies .links ul li a.current {
	color: #989898;
}

#main.casestudies .content {
	width: 584px;
	height: 346px;
	position: absolute;
	overflow: hidden;
	top: 0;
	right: 0;
}

#main.casestudies .content .scroll {
	width: 584px;
	position: absolute;
	top: 0;
	right: 0;
}

#main.casestudies .content .scroll div {
	width: 341px;
	height: 306px;
	padding: 20px 223px 20px 20px;
	margin: 0 0 80px 0;
	background: #d1d9dc;
	position: relative;
}

#main.casestudies .content .scroll div img {
	position: absolute;
	top: 0;
	right: 0;
}

#main.casestudies .content .scroll div h1,
#main.casestudies .content .scroll div h2 {
	color: #4c4c4c;
	font: 22px "HelveticaLTStdBlackCondensed";
	text-transform: uppercase;
}

#main.casestudies .content .scroll div p {
	line-height: 16px;
}


/* Who we are - Portfolio */

#main.portfolio {
	position: relative;
}

#main.portfolio .arrows {
	position: absolute;
	z-index: 3;
	top: -20px;
	right: 0;
}

#main.portfolio .arrows a {
	font: 11px "HelveticaLTStdBlackCondensed";
	text-transform: uppercase;
	text-decoration: none;
	color: #777;
	margin: 0 0 0 6px;
}

#main.portfolio .arrows a.prev {
	background: url('../images/left_arrow.jpg') no-repeat left center;
	padding: 0 0 0 8px;
}

#main.portfolio .arrows a.next {
	background: url('../images/right_arrow.jpg') no-repeat right center;
	padding: 0 8px 0 0;
}

#main.portfolio .arrows a:hover {
	color: #333;
}

#main.portfolio .arrows a.disabled {
	cursor: default;
	opacity: 0.5;
	color: #777;
}

#main.portfolio .pages {
	width: 4000px;
	height: 415px;
	overflow: hidden;
}

#main.portfolio .content {
	width: 800px;
	height: 415px;
	position: relative;
	float: left;
}

#main.portfolio .content img {
	position: absolute;
	top: 20px;
	right: 16px;
	z-index: 2;
}

#main.portfolio .content img.left {
	right: auto;
	left: 20px;
}

#main.portfolio .content img.background {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#main.portfolio #portfolio1 img.left,
#main.portfolio #portfolio1 img.right {
	display: none;
}


/* Who we are - About Us */

#main.aboutus {
	position: relative;
}

#main.aboutus .content {
	position: absolute;
	top: 0;
	right: 0;
	padding: 20px;
	width: 224px;
	background: #f1f1e9;
	z-index: 2;
}

#main.aboutus .content h1 {
	color: #4c4c4c;
	font-size: 22px;
	text-transform: uppercase;
}

#main.aboutus .content h1 span {
	color: #3fa9f5;
}

#main.aboutus .content p {
	color: #595959;
	font-size: 11px;
	line-height: 16px;
	margin: 12px 0 0 0;
}

#main.aboutus .img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}


/* Get in touch - Contact Us */

#main.contactus .content {
	height: 348px;
	background: #d1d9dc;
}

#main.contactus div.left {
	width: 462px;
	margin: 20px 0 0 20px;
	float: left;
	position: relative;
}

#main.contactus div.right {
	width: 298px;
	margin: 20px 0 0 0;
	height: 328px;
	float: right;
	position: relative;
}

#main.contactus div h1,
#main.contactus div h2 {
	text-transform: uppercase;
	color: #4e4c4d;
	font-size: 20px;
}

#main.contactus div.left h2 {
	margin: 16px 0 10px 0;
}

#main.contactus div p {
	font-size: 12px;
	line-height: 16px;
	color: #8c8f94;
}

#main.contactus div p span {
	display: block;
	float: left;
	width: 70px;
}

#main.contactus div p a {
	color: #8c8f94;
	text-decoration: none;
}

#main.contactus div p a:hover {
	text-decoration: underline;
}

#main.contactus div form {
	width: 462px;
}

#main.contactus div form p {
	display: block;
	width: 184px;
	float: left;
	margin: 0 0 9px 0;
	height: 26px;
	position: relative;
}

#main.contactus div form p label,
#main.contactus div form p input {
	width: 176px;
	height: 16px;
	line-height: 20px;
	padding: 6px 4px 4px 4px;
	border: none;
	background: none;
	font: 12px "HelveticaLTStdRoman";
	color: #8c8f94;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

#main.contactus div form p label {
	z-index: 1;
	background: #FFF;
}

#main.contactus div form p.textarea {
	width: 269px;
	height: 164px;
	float: right;
	margin: 0;
}

#main.contactus div form p.textarea label {
	padding: 6px 4px 4px 6px;
	width: 260px;
	height: 155px;
}

#main.contactus div form p.textarea textarea {
	width: 262px;
	height: 157px;
	background: none;
	color: #8c8f94;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 4px;
	resize: none;
	border: none;
}

#main.contactus div form p button {
	background: #8c8f94;
	border: none;
	width: 184px;
	height: 26px;
	cursor: pointer;
	padding: 0 0 0 6px;
	margin: -1px 0 0 0;
	color: #FFF;
	font: 12px "HelveticaLTStdRoman", "Arial", "Tahoma", "Verdana", sans-serif;
	text-align: left;
	text-transform: uppercase;
	line-height: 18px;
}

#main.contactus div form p button:hover {
	background: #989898;
}

#main.contactus div.right img {
	position: absolute;
	bottom: 0;
	right: 0;
}

/* Get in touch - Send us your brief */

#main.sendusyourbrief {
		
}

#main.sendusyourbrief .scrollable {
	position: relative;
	padding-right: 22px;
	width: 164px;
}

#main.sendusyourbrief .content {
	height: 348px;
	background: #d1d9dc;
}

#main.sendusyourbrief div h1 {
	text-transform: uppercase;
	color: #4e4c4d;
	font-size: 20px;
	float: left;
	clear: both;
	margin: 20px 0 0 20px;
}

#main.sendusyourbrief div form {
	width: 759px;
	height: 273px;
	float: left;
	clear: both;
	margin: 10px 20px;
}

#main.sendusyourbrief div form p {
	display: block;
	width: 184px;
	float: left;
	margin: 0 0 9px 0;
	height: 26px;
	position: relative;
}

#main.sendusyourbrief div form p label,
#main.sendusyourbrief div form p input {
	width: 176px;
	height: 16px;
	line-height: 20px;
	padding: 6px 4px 4px 4px;
	border: none;
	background: none;
	font: 12px "HelveticaLTStdRoman";
	color: #8c8f94;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

#main.sendusyourbrief div form p label {
	z-index: 1;
	background: #FFF;
}

#main.sendusyourbrief div form p.textarea {
	width: 563px;
	height: 273px;
	float: right;
	margin: 0;
}

#main.sendusyourbrief div form p.textarea label {
	padding: 6px 4px 4px 6px;
	width: 553px;
	height: 263px;
}

#main.sendusyourbrief div form p.textarea textarea {
	width: 555px;
	height: 265px;
	background: none;
	color: #8c8f94;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 4px;
	resize: none;
	border: none;
}

#main.sendusyourbrief div form p button {
	background: #8c8f94;
	border: none;
	width: 184px;
	height: 26px;
	cursor: pointer;
	text-indent: 4px;
	margin: -1px 0 0 0;
	color: #FFF;
	font: 12px "HelveticaLTStdRoman", "Arial", "Tahoma", "Verdana", sans-serif;
	text-align: left;
	text-transform: uppercase;
	line-height: 18px;
}

#main.sendusyourbrief div form p button:hover {
	background: #989898;
}

#main.sendusyourbrief div form p.docs {
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

#main.sendusyourbrief div form p.docs input {
	position: absolute;
	top: -10px;
	left: -10px;
	height: 100px;
	width: 300px;
	z-index: 2;
	opacity: 0.01;
	opacity: 0.1;
	filter: alpha(opacity=1);
	color: #8c8f94;
	font-size: 200px;
	cursor: pointer;
	backgrond: none;
}

#main.sendusyourbrief div form p.docs label {
	position: absolute;
	top: 0;
	left: 0;
	color: #FFF;
	cursor: pointer;
	background: #8c8f94;
	padding-left: 8px;
	z-index: 1;
}

#main.sendusyourbrief div form p.docs label.hover {
	background: #989898;
}

#fakeupload {
	cursor: pointer !important;
}

#main.sendusyourbrief div form p.docsResults {
	height: 64px;
	overflow: auto;
}

#main.sendusyourbrief div form p.docsResults span {
	display: block;
	color: #8c8f94;
	font-size: 12px;
	margin: 0 0 2px 0;
	padding-left: 14px;
	background: url('../images/loading.gif') no-repeat 0 2px;
}

#main.sendusyourbrief div form p.docsResults span.success {
	background: url('../images/success.jpg') no-repeat 0 2px;
}

#main.sendusyourbrief div form p.docsResults span.fail {
	background: url('../images/fail.jpg') no-repeat 0 2px;
}


/* get in touch - thank you */

#main.thankyou .content h1 {
	text-transform: uppercase;
	color: #4e4c4d;
	font-size: 20px;
}

#main.thankyou .content p {
	color: #8c8f94;
}


/* privacy policy */

#main.privacy .content {
	overflow: auto;
	width: 740px !important;
	padding: 20px 40px 20px 20px !important;
}

#main.privacy .content a.arrowUp {
	top: 10px;
	right: 10px;
}

#main.privacy .content a.arrowDown {
	bottom: 10px;
	right: 10px;
}

#main.privacy .content h1 {
	text-transform: uppercase;
	color: #4e4c4d;
	margin: 0 0 10px 0;
	font-size: 20px;
}

#main.privacy .content h2 {
	text-transform: uppercase;
	color: #737373;
	font-size: 16px;
}

#main.privacy .content p {
	color: #8c8f94;
	line-height: 16px;
}

#main.privacy .content p a {
	color: #8c8f94;
	text-decoration: none;
}

#main.privacy .content p a:hover {
	text-decoration: underline;
}

/* Custom scroll arrows */

.scrollable {
	position: relative;
	padding-right: 12px;
}

.scrollable div.scrollable-content {
	width: 100%;
	height: 100%;
	padding-bottom: 20px;
	overflow: hidden;
}

.scrollable .arrowUp {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 99;
	background: url('../images/up_arrow.gif') no-repeat 0 0;
	width: 8px;
	height: 4px;
}

.scrollable .arrowDown {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 99;
	background: url('../images/down_arrow.gif') no-repeat 0 0;
	width: 8px;
	height: 4px;
}

.scrollable .arrowUp.inactive,
.scrollable .arrowDown.inactive {
	opacity: 0.2;
	filter: alpha(opacity=20);
}


/* terms and conditions */

#main.terms .content {
	overflow: auto;
}

#main.terms .content h1 {
	text-transform: uppercase;
	color: #4e4c4d;
	margin: 0 0 10px 0;
	font-size: 20px;
}

#main.terms .content p {
	color: #8c8f94;
	line-height: 16px;
}