/* 
Colourspace
Author: Tristan Duncan - Colourspace Web & Graphic Design - http://www.colourspace.net.au
Copyright 2010 - Present Tristan Duncan
*/

/* ------------------- SETUP AND GENERIC STYLES------------------- */

body {
	background-color:#fff;
	margin: auto;
	width:100%;
	font-family:tahoma, arial, sans-serif;
	font-size:11pt;
	line-height:1.5em;
	color:#373b44;
	}
	
.clear {
	clear:both;
	}
	
/* COLUMNS AND LINKS */
	
.column_3 {
	float:left;
	margin:10px 20px 10px 10px;
	width:290px;
	text-align:center;
	}
	
.column_3 h3 {
	text-align:center;
	height:40px;
	}

.column_3 p {
	text-align:left;
	}
	
.column_3 p + p, #contact_column p + p {
	padding-top:10px;
	}
	
.column_3 a {
	color:#373b44;
	font-weight:bold;
	text-decoration:none;
	}
	
.column_3 a:hover {
	color:#00aab8;
	}

	
/* Horizontal Divider */
	
.hr {
	margin:0 auto;
	clear:both;
	height:8px;
	width:960px;
	background-image:url('../img/hr.jpg');
	background-repeat:no-repeat;
	}

.hr hr {
	display:none;
	}

/* INFO SECTION */

.info {
	clear:both;
	margin:0 auto;
	padding:40px;
	}
	

	
.info p {
	margin:0 auto;
	width:500px;
	padding-left:60px;
	background-image:url('../img/info.png');
	background-repeat:no-repeat;
	background-position:center left;
	text-align:left;
	font-size:12pt;
	line-height:18pt;
	}

/* CALL TO ACTION BUTTON */

#CTA_home {
	position:absolute;
	top:485px;
	left:550px;
	width:410px;
	height:90px;
	margin-right:20px;

	}
	
#CTA_home a {
	position:absolute;
	display:block;
	height:90px;
	width:410px;
	overflow:hidden;
	text-indent:-9999px;
	border:none;
	background-image:url('../img/CTA.jpg');
	background-position:top;
	}
	
#CTA_home a:hover {
		background-position:bottom;
		}
		
#CTA {
	float:right;
	width:410px;
	height:90px;
	margin-top:38px;
	}
	
#CTA a {
	position:absolute;
	display:block;
	height:90px;
	width:410px;
	overflow:hidden;
	text-indent:-9999px;
	border:none;
	background-image:url('../img/CTA.jpg');
	background-position:top;
	}
	
#CTA a:hover {
		background-position:bottom;
		}
		
#CTA_lead {
	margin-top:33px;
	float:left;
	width:550px;
	height:101px;
	text-indent:-9999px;
	background-image:url('../img/CTA_lead.png');
	background-repeat:no-repeat;
	background-position:top left;
	}

/* ------------------- MASTER WIDTHS AND MARGINS --------------------- */	
	
#header_full, #feature_full, #topper_full, #content_full, #footer_full {
	width:100%;
	}
	
#header, #feature, #topper, #content, #footer {
	width:960px;
	margin:0 auto;
	}
		
/* -------------------- HEADER AND NAV --------------------- */

	
#header_full {
	color:#fff;
	height:120px;
	background-color:#232529;
	background-image:url('../img/header_bg.jpg');
	background-repeat:repeat-x;
	}
	
#header h1  a{
	float:left;
	width:509px;
	line-height:120px;
	background-image:url('../img/colourspace_logo.png');
	background-repeat:no-repeat;
	background-position:top left;
	text-indent:-9999px;
	border:none;
	}
	
#header ul {
	float:right;
	}
	
#header ul li {
	float:left;
	width:80px;
	line-height:120px;
	position:relative;
	display:block;
	color:#c8d1db;
	}
	
#header ul li a {
	font-family:tahoma, arial, sans-serif;
	font-size:12pt;
	text-align:center;
	display:block;
	color:#c8d1db;
	text-decoration:none;
	z-index:20;
	position:relative;
	height:120px;
	}
	
#header ul li a:hover {
	color:#fff;
	}
	
#header ul li a.nojs:hover {
	background-image:url('../img/nav_hover.jpg');
	}
	
#nav li .hover {
	position:absolute;
	height:120px;
	width:80px;
	top:0;
	left:0;
	background-image:url('../img/nav_hover.jpg');
	display:none;
	z-index:0;
	}
	
.nav_active {
	background-image:url('../img/nav_active.jpg');
	}
	

/* ------------------------------ CONTENT GENERIC ----------------------------- */
	
#content_full {
	color:#232529;
	background-color:#fff;
	}
	
#content {
	margin-top:15px;
	}

/* ---------------------------- CONTENT HOME PAGE --------------------------- */

#feature_full {
	color:#fff;
	height:600px;
	background-color:#fff;
	background-image:url('../img/feature_bg.jpg.png');
	background-repeat:repeat-x;
	background-position:top;
	}
	
#feature {
	position:relative;
	}
	
#feature_home {
	position:absolute;
	left:-70px;
	}
	
#welcome_message {
	width:525px;
	height:205px;
	position:absolute;
	top:370px;
	text-indent:-9999px;
	background-image:url('../img/welcome_message.png');
	background-repeat:no-repeat;
	background-position:top left;
	}
	
#quick_gallery {
	margin-bottom:27px;
	float:right;
	}
	
#quick_gallery li {
	margin-left:14px;
	margin-top:8px;
	margin-bottom:4px;
	float:left;
	}
	
#quick_gallery li a {
	display:block;
	padding:0px;
	width:120px;
	height:85px;
	border:4px solid #dbe0e8;
	}
	
#quick_gallery img {
	width:120px;
	height:85px;
	}
	
#quick_gallery li a:hover {
	border-color:#bfc4cb;
	}
	
#who_am_i h3{
	text-indent:-9999px;
	background-image:url('../img/who_am_i.jpg');
	background-repeat:no-repeat;
	background-position:top center;
	}
	
#what_i_offer h3{
	text-indent:-9999px;
	background-image:url('../img/what_i_offer.jpg');
	background-repeat:no-repeat;
	background-position:top center;
	}
	
#latest_work h3{
	text-indent:-9999px;
	background-image:url('../img/latest_work.jpg');
	background-repeat:no-repeat;
	background-position:top center;
	}
	
/* -------------------------------- CONTENT SERVICES ---------------------------- */

#topper_full {
	color:#fff;
	height:325px;
	background-color:#fff;
	background-image:url('../img/topper_bg.jpg.png');
	background-repeat:repeat-x;
	background-position:top;
	}
	
#topper {
	position:relative;
	}
	
#topper_graphic {
	position:absolute;
	top:0;
	left:0;
	}
	
#services_message {
	width:915px;
	height:127px;
	position:absolute;
	top:160px;
	text-indent:-9999px;
	background-image:url('../img/services_message.png');
	background-repeat:no-repeat;
	background-position:top left;
	}
	
#services_intro h3 {
	text-indent:-9999px;
	width:880px;
	height:38px;
	margin-top:25px;
	margin-bottom:17px;
	background-image:url('../img/services_intro.png');
	background-repeat:no-repeat;
	background-position:top left;
	}
	
#services_intro ul li {
	display:block;
	float:left;
	width:140px;
	margin:0px 10px 25px 9px;
	}
	
#services_intro ul li h4 {
	display:none;
	}
	
#services_intro ul li p {
	font-size:11pt;
	}

#web_development h3, #print_design h3, #brand_identity h3 {
	text-indent:-9999px;
	height:132px;
	margin-bottom:20px;
	background-repeat:no-repeat;
	background-position:bottom center;
	}
	
#web_development h3{
	background-image:url('../img/web_development.png');
	}
	
#print_design h3{
	background-image:url('../img/print_design.png');
	}
	
#brand_identity h3{
	background-image:url('../img/brand_identity.png');
	}

#web_development p strong, #print_design p strong, #brand_identity p strong {
	font-weight:bold;
	}
	
#web_development ul, #print_design ul, #brand_identity ul {
	margin:10px 0 20px 20px;
	}
	
#web_development ul li, #print_design ul li, #brand_identity ul li{
	text-align:left;
	line-height:1.8em;
	background-image: url('../img/tick.png');
	background-repeat: no-repeat;
	background-position:left center;
	padding-left:32px;
	}
	
.turnaround {
	background-image:url('../img/clock.png');
	background-repeat:no-repeat;
	background-position:0 3px;
	padding-left:45px;
	}

.cost {
	background-image:url('../img/cost.png');
	background-repeat:no-repeat;
	background-position:0 3px;
	padding-left:45px;
	}

/* -------------------------- CONTENT GALLERY ---------------------- */


#gallery li {
	margin:6px 6px 30px 0px;
	display:block;
	float:left;
	text-align:right;
	}
	
#gallery li a {
	text-decoration:none;
	display:block;
	width:228px;
	background-image:url('../img/gallery_image.png');
	background-repeat:no-repeat;
	background-position:center top;
	}
	
#gallery li a:hover {
	background-position:center -208px;
	}

#gallery li a img {
	width:210px;
	padding:8px 9px 5px 9px;
	height:130px;
	border:none;
	}
	
#gallery li a span {
	margin-right:6px;
	color:#373b44;
	}
	
#gallery li a:hover span {
	color:#00aab8;
	}
	
	
#portfolio_message {
	width:925px;
	height:122px;
	position:absolute;
	top:160px;
	text-indent:-9999px;
	background-image:url('../img/portfolio_message.png');
	background-repeat:no-repeat;
	background-position:top left;
	}

#portfolio_print {
	width:222px;
	height:60px;
	text-indent:-9999px;
	background-image:url('../img/portfolio_print.png');
	background-repeat:no-repeat;
	background-position:center left;
	}
	
#portfolio_web {
	width:206px;
	height:60px;
	text-indent:-9999px;
	background-image:url('../img/portfolio_web.png');
	background-repeat:no-repeat;
	background-position:center left;
	}
	
#portfolio_brand {
	width:266px;
	height:60px;
	text-indent:-9999px;
	background-image:url('../img/portfolio_brand.png');
	background-repeat:no-repeat;
	background-position:center left;
	}
	
	
	

/* -------------------------- CONTENT CONTACT ---------------------- */

#contact_column {
	width:310px;
	height:500px;
	padding:0 20px 0 10px;
	float:left;
	background-image:url('../img/vr.jpg');
	background-repeat:no-repeat;
	background-position:top right;
	}
	
#contact_form {
	width:590px;
	float:left;
	padding-left:20px;
	}
	
#contact_message {
	width:874px;
	height:80px;
	position:absolute;
	top:160px;
	text-indent:-9999px;
	background-image:url('../img/get_in_touch.png');
	background-repeat:no-repeat;
	background-position:top left;
	}
	
#contact_column h3{
	text-indent:-9999px;
	width:221px;
	height:23px;
	background-image:url('../img/get_connected.png');
	background-repeat:no-repeat;
	background-position:top center;
	}
	
#contact_column ul {
	margin-top:20px;
	}
	
#contact_column ul li {
	margin-bottom:5px;
	}
	
#contact_column ul li a{
	height:50px;
	line-height:50px;
	text-decoration:none;
	font-size:12pt;
	font-weight:bold;
	color:#373b44;
	}
	
#contact_column ul li a:hover{
		color:#00aab8;
		}
	
#contact_column ul img {
	margin-right:20px;
	border:none;
	position:relative;
	top:10px;
	}

/* ----------------- FOOTER ------------------ */
	
#facebook_like {
	clear:both;
	margin:0 auto;
	padding-top:30px;
	width:960px;
	text-align:center;
	}
	
#footer_full {
	clear:both;
	color:#fff;
	height:100%;
	min-height:289px;
	background-color:#232529;
	background-image:url('../img/footer_bg.jpg.png');
	background-repeat:repeat-x;
	background-position:top;
	}
	
#footer {
	position:relative;
	top:39px;
	padding-top:20px;
	min-height:230px;
	background-color:#232529;
	background-image:url('../img/footer.jpg');
	background-repeat:no-repeat;
	background-position:top center;
	text-align:center;
	}
	
#footer img {
	float:left;
	}
	
#copyright {
	float:left;
	margin:17px 0 0 98px;
	}
	
#social {
	float:right;
	margin:10px 10px 0 0;
	}
	
#social a {
	border:none;
	}
	
#social img {
	margin-left:20px;
	}