/* --------------- DELIBERATE.CO.NZ FRONT END // STYLESHEET ---------------*/

/* --------------- 1. RESET STYLES ---------------*/
/* --------------- 2. LAYOUT STYLES ---------------*/
/* --------------- 3. TYPOGRAPHY STYLES ---------------*/
/* --------------- 4. FORM STYLES ---------------*/
/* --------------- 5. NAVIGATION STYLES ---------------*/



/* --------------- 1. RESET STYLES // SEE CSS/HTML5-RESET.CSS ---------------*/

/* --------------- 2. LAYOUT STYLES ---------------*/

/*-------- GENERIC --------*/

body {
	background:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:62.5%;
	color:#5d5040; /*-- dark green --*/
	}
	
div.clr {clear:both;}
	
div#wrapper {
	width:980px;
	margin:10px auto;
	position:relative;
	}
	
.go-left {float:left;}
.go-right {float:right;}
	
/*-------- HEADER --------*/

header {height:170px; width:980px;}

div#top-dropshadow {
	height:30px;
	background:transparent url(../images/top-dropshadow.png) 0 0 no-repeat;
	}

header figure {
	background:transparent url(../images/header-dropshadow.png) 0 0 repeat-y;
	height:138px;
	padding:2px 0 0 0;
	width:980px;
	margin:0;
	}
	
	header figure img { /*-- center the logo within the header --*/
		display:block;
		margin-left:auto;
		margin-right:auto;
		}
		
/*-------- CONTENT --------*/

div#content{background:transparent url(../images/content-background.png) 0 0 repeat-y; width:980px;}

div#content nav, div#content section, div#content aside, article.three-col, article.two-col {position:relative; float:left; display:inline;}

div#content nav {width:155px; padding-top:15px;}

span.call-to-action {float:right;}

.home div#content section {width:520px; padding-left:25px;}
.services div#content section {width:750px; padding-left:25px; padding-bottom:20px;}

	div#content section article {border-right:2px dotted #fff; padding-right:30px; padding-bottom:50px;}

div#content aside {width:210px; padding:25px 0 15px 30px; }
div#content aside#sign-off {width:120px; padding:0px 0 0px 0px; float:right;}

	div#content aside address {margin-left:10px;}
	
div#content section article.three-col {
	width:220px;
	padding:0 20px;
	border-right:none;
	padding-bottom:5px;
	}
	
div#content section article.two-col {
	width:350px;
	padding:0 20px;
	border-right:none;
	padding-bottom:5px;
	}
	
div#content section article.first {padding-left:0;}
div#content section article.last {padding-right:0;}
div#content section article.right-border {border-right:2px dotted #fff;}
div#content section article.left-border {border-left:2px dotted #fff;}

figure.image-float {
	display:inline;
	float:right;
	}



/*-------- FOOTER --------*/

footer {position:relative; width:980px; margin:0; padding:0;}

div#footer-wrapper {width:980px; position:relative; background:transparent url(../images/footer-dropshadow.png) 0 0 repeat-y;}

div#footer-wrapper figure {position:relative; display:inline;}

	figure#linkedin {margin:12px 0 0 87px;}
	figure#footer-logo {margin:10px 40px 0 60px;}

div#bottom-dropshadow {
	height:30px;
	background:transparent url(../images/bottom-dropshadow.png) 0 0 no-repeat;
	width:980px; 
	position:relative; 
	}

	
/* --------------- 3. TYPOGRAPHY STYLES ---------------*/

/*-------- GENERIC TYPOGRAPHY --------*/

h1 {
	font-size:2.6em;
	line-height:1.6em;
	font-weight:normal;
	margin-bottom:10px;
	}

h2 {
	font-size:1.2em;
	font-weight:normal;
	color:#fff;
	}
	
h3 {
	font-size:1.6em;
	font-weight:bold;
	line-height:1.3em;
	font-style:normal;
	margin:10px 0 8px 0;
	}
	
	address h3 {margin:10px 0 0px 0;}
	
h4 {
	font-size:1.2em;
	line-height:1.6em;
	margin:0;
	font-style:normal;
	font-weight:normal;
	}
	
	address h4 {margin:0px 0 10px 0;}

h5 {
	font-size:1.2em;
	line-height:1.6em;
	margin:0;
	font-weight:bold;
	}	

p {
	font-size:1.2em;
	line-height:1.6em;
	margin:0 0 10px 0;
	}
		
a {text-decoration:none;}
	
a.body-link {
	color:#5d5040; /*-- Deliberate dark green --*/
	text-decoration:underline;
	}
	
a:hover {color:#8a1f03; /*-- Deliberate red --*/ text-decoration:underline;}
	
span.emphasis {font-weight:bold;}
span.white {color:#fff;}
span.call-to-action p {font-size:0.5em; margin:15px 0 0 0;}
 

ul.body-list {margin:0px 0 0px 15px; padding:0; list-style:none;}

ul.body-list > li {
		font-size:1.2em;
		line-height:1.6em;
		margin:0 0 10px 15px;
		}

/* Prevent nested li's from getting messed up */
	ul.body-list > li::before {
		content: "\2013\2002"; /* &ndash + space - see https://css-tricks.com/css-content/ */
		margin-left: -15px;
	}
	
address p {
	font-style:normal;
	font-size:1.2em;
	line-height:1.6em;
	margin-bottom:10px;
	}

/*-------- FOOTER --------*/

p.copyright {
	font-size:0.8em;
	line-height:1.2em;
	margin:34px 0 10px 0;
	}
	
	
/* --------------- 4. FORM STYLES ---------------*/


/* --------------- 5. NAVIGATION STYLES ---------------*/

nav a {
	width:108px;
	height:98px;
	text-align:center;
	padding-right:2px;
	padding-bottom:12px;
	color:#fff;
	font-size:1.2em;
	line-height:1.4em;
	display:table-cell;
    vertical-align:middle;
	}
	
nav a:hover {color:#fff; text-decoration:underline;}
	
nav a#home, nav a#home-selected {background:transparent url(../images/main-navigation-sprite.png) -2px 0 no-repeat;}
nav a#services, nav a#services-selected {background:transparent url(../images/main-navigation-sprite.png) -2px -150px no-repeat;}
nav a#why-deliberate, nav a#why-deliberate-selected {background:transparent url(../images/main-navigation-sprite.png) -2px -300px no-repeat;}

nav a#home-selected, nav a#services-selected, nav a#why-deliberate-selected {font-weight:bold; text-decoration:none;}
nav a#home-selected:hover, nav a#services-selected:hover, nav a#why-deliberate-selected:hover {text-decoration:none;}