/*
Theme Name: Spinifex
Theme URI: http://spinifexdesign.co.nz/
Description: Bespoke theme created for the Spinifex website, designed by Sam Worsp and built by Richard Westenra. If you find this theme used anywhere else please contact the author.
Version: 1.0
Author: Richard Westenra
Author URI: http://richardwestenra.com/
*/

/*
#################### GLOBAL RESET ####################
*/
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }
ol, ul, li { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h5, h5, h6 { font-size:100%; font-weight:normal; }
q:before, q:after { content:'';}
/* Global reset-RESET - restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */
p { margin:8px 0px; }
/* Tricks */
.hide { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } /* hide text from viewers but make it still readable by screenreaders */
.clearFix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } /* clear blocks of text/images */
.alert { background: #fff6bf url(image_folder/exclamation_mark.gif) center no-repeat; background-position: 15px 50%; text-align: center; padding: 5px 20px 5px 45px; border: 2px solid #ffd324; }


/*
#################### Typography & Colors ####################
*/
body {
	font-size: 100%;
	font-family: "Trebuchet MS", Trebuchet, Verdana, "Verdana Ref", Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif;
	color: #666666;
	}
a {
	color:#666666;
	text-decoration:underline;
	}
a:hover, a:focus, #rightX h3 a:hover, #rightX h3 a:focus, #footer a:hover, #footer a:focus {
	color:#00A1E4;
	text-decoration:none;
}
h2 {
	color:#4d4d4d;
	font-size:2.6em;
	font-weight:600;
	margin-left:-3px;
}
h3 {
	color:#4d4d4d;
	font-size:1.25em;
	font-weight:600;
	margin-left:-2px;
	line-height:1.5em;
}
h4 {
	color:#4d4d4d;
	font-size:1em;
}
p {
	font-size:0.85em;
	line-height:1.6em;
}

/*
#################### Main Layout ####################
*/
html, body {
	background-color:#cccdc7;
	height:100%;
	}
#container {
	min-height:100%;
	position:relative;
}
.wrapper {
	width:900px;
	margin:auto;
	overflow:hidden;
}
#header {
	background:#cccdc7 url('images/topBG.png') repeat-x top;
	}
#header .wrapper {
	background:url('images/header.jpg') no-repeat top right;
	height:250px;
	}
#content {
	padding-bottom:150px;
}

/*
#################### Navigation ####################
*/
#logo {
	display:block;
	height:90px;
	width:220px;
	margin:40px 0px 0px 60px;
	float:left;
}
#nav {
	float:right;
	margin:102px 45px 0px 0px;
}
#nav li {
	float:left;
}
#nav li a{
	display:block;
	height:56px;
}
#nav li a span { /* hide text from viewers but make it still readable by screenreaders */
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
.navHome {
	width:81px;
}
.navHome:hover, .navHomeCurrent {
	width:81px;
	background:url(images/nav.png);
}
.navServices {
	width:89px;
}
.navServices:hover, .navServicesCurrent {
	width:89px;
	background:url(images/nav.png) -81px;
}
.navEnvironment {
	width:108px;
}
.navEnvironment:hover, .navEnvironmentCurrent {
	width:108px;
	background:url(images/nav.png) -170px;
}
.navContact {
	width:118px;
}
.navContact:hover, .navContactCurrent {
	width:118px;
	background:url(images/nav.png) -278px;
}

/*
#################### Index ####################
*/
#emailPostIt {
	display:block;
	width:196px;
	height:185px;
	background:url(images/postit.jpg);
	margin:20px 0px;
}
#leftColumn {
	width:205px;
	float:left;
	margin-left:65px;
}
#rightColumn {
	width:550px;
	float:right;
	margin-right:40px;
}
#rightColumn #rcTop {
	height:10px;
	background:url(images/contentBG.png);
}
#rightColumn #rcMiddle {
	background-color:#e6e6e3;
	width:507px;
	margin-left:2px;
	overflow:hidden;
	padding:11px 20px;
}
#rightColumn #rcBottom {
	height:11px;
	background:url(images/contentBG.png) 0px -8px;
}
.portfolioItem {
	width:213px;
	float:left;
	margin:20px 20px
}
.portfolioThumb {
	width:222px;
	height:152px;
	background:url(images/thumbDropShadow.png);
}
.portfolioDescription h4 a {
	text-decoration:none;
}
.portfolioDescription p {
	margin:0px;
	font-size:0.75em;
	/* two-line description fix: */
	height:19px;
	overflow:visible;
}
.navigation {
	clear:both;
	text-align:center;
}
/*
#################### Page ####################
*/
#leftX {
	width:205px;
	height:300px;
	float:left;
	margin-left:65px;
	background:url(images/x.png) no-repeat;
}
#rightX {
	width:380px;
	float:right;
	margin-right:210px;
}
#rightX h2 {
	margin-top:10px;
}
#rightX p {
	margin-bottom:20px;
}
#rightX h3, #rightX h3 a {
	font-weight:500;
	color:#58595b;
}

/*
#################### Single ####################
*/
#project {
	background-color:#FFFFFF;
	border-top:solid 10px #CCCDC7;
	padding-top:25px;
	padding-bottom:110px;
}
#slideshowImageWrapper {
	width:777px;
	padding:30px 62px 28px 62px;
	margin:auto;
}
#slideshowNav {
	float:right;
}
#slideshowCount {
	float:left;
	margin:6px 20px 0px 0px;
}
#prevImg, #nextImg {
	display:block;
	width:35px;
	height:33px;
	cursor:pointer;
	float:left;
}
#prevImg {
	background:url(images/slideshowButton.png) no-repeat 0px 0px;
}
#prevImg:hover {
	background:url(images/slideshowButton.png) no-repeat 0px -33px;
}	
#nextImg {
	background:url(images/slideshowButton.png) no-repeat -36px 0px;
}
#nextImg:hover {
	background:url(images/slideshowButton.png) no-repeat -36px -33px;
}
#nextProject {
	float:left;
	margin-left:3px;
}
#nextProject a {
	display:block;
	width:200px;
	height:33px;
	background:url(images/nextProjectButton.png) no-repeat 0px 0px;
}
#nextProject a:hover {
	background:url(images/nextProjectButton.png) no-repeat 0px -33px;
}
#projectDescription {
	background-color:#e0e1dd;
	margin-top:30px;
	padding:30px 0px;
}
#projectDescription h3, .projectContent  {
	padding-left:90px;
}
#projectDescription h3 {
	margin:0px;
	float:left;
	font-size:1.3em;
	letter-spacing:-0.02em;
}
.excerpt {
	float:left;
	font-size:0.93em;
	font-weight:600;
	margin-left:8px;
}
.projectContent {
	clear:both;
	font-size:0.8em;
	width:600px;
}


/*
#################### Footer ####################
*/
#footer {
	background:#a67c52;
	padding:20px 0px;
	position:absolute;
	bottom:0;
	width:100%;
	height:70px;
}
#footer p {
	line-height:1.2em;
	font-size:0.75em;
	color:#FFFFFF;
	text-align:center;
}
#footer a {
	color:#FFFFFF;
}
#footer a:hover, #footer a:focus {
	color:#00A1E4;
}