/*  
Site Name: Big Backyard Portfolio site
Site URI: big-backyard.net.nz
Description: ---
Version: 1.0

UPDATE INFO ---------------------------------------

Revision number: 1.0
Last updated: 
Last update made by: adam

CONVENTIONS ---------------------------------------

hyphenate class / id names - #my-id-name, .my-class-name
class / id names to start with lower case letter (ID's reserved for .net use will start with Upper case letter)

CONTENTS ------------------------------------------

*01: Reset
*02: Util classes & Phrase Elements
*03: Default Styles (Typography, colour)
*04: Structure (layout, size, positioning)
*05: Common Containers & Subclasses
*06: Custom Containers & Subclasses
*07: Forms

*/

/* *01: Reset -----------------------------------------------------------------------------------------------------------------*/

body {color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
img{display:block;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:"'";}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/* *02: Util Classes ----------------------------------------------------------------------------------------------------------*/

.center 					{ text-align: center; }
.right 						{ text-align: right !important; }
.left 						{ text-align: left !important; }
.small 						{ font-size: 9px !important;}
#ie6 .small, #ie7 .small	{ font-size: 10px !important;}
.float-right 				{ float: right; }
.float-left 				{ float: left;}
.clear 						{ clear: both; }
.uppercase 					{ text-transform: uppercase; }
.nowrap 					{ white-space: nowrap; }
.offscreen					{ position: absolute; left: -9999px; top: -9999px; }
.hidden						{ display: none; }
.self-clear 				{ zoom: 1; }
.self-clear:after 			{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.no-right-margin			{ margin-right: 0 !important; }
.no-left-margin				{ margin-left: 0 !important; }
.no-top-margin				{ margin-top: 0 !important; }
.no-bottom-margin			{ margin-bottom: 0 !important; }
.hot						{ cursor:pointer; }

/* *02a: Phrase Elements -------------------- */
strong, .bold 				{ font-weight: bold !important; /*letter-spacing:1px;*/ }
em, .italic					{ font-style: italic; }
code						{ font-family: Courier, serif; color: #999; font-size: 0.5em; }
cite						{ font-style: italic; }
abbr, acronym				{ border-bottom: 1px dotted; cursor: help; }
q							{ color: #fff; }
blockquote					{ color: #fff; font-size: 1.1em; margin: 0 0 0.5em 0; }

/* *02b: Fonts -------------------- */
@font-face {
	font-family: 'RabioheadRegular';
	src: url('/content/fonts/rabiohead.eot');
	src: local('Rabiohead'), local('Rabiohead'), url('/content/fonts/rabiohead.woff') format('woff'), url('/content/fonts/rabiohead.ttf') format('truetype'), url('/content/fonts/rabiohead.svg#Rabiohead') format('svg');
}


/* *03: Default Styles --------------------------------------------------------------------------------------------------------*/

body {
	font: 62.5%/1.6 "etica-1","etica-2", "Segoe UI", "Lucida Sans", "Lucida Grande", Helvetica, Arial, sans-serif; /* set font size to 10px (a nice round number) - 1.4 line height */
	background: #445056 url(/content/Images/interface/bg-body.jpg);
	color: #d7d7d7;
}

img, h1, .control, #love-code, #say-hello, #thanks, .btn-submit, #projects .proj-ind { behavior: url(/scripts/iepngfix.htc) }

h1, h2, h3, h4, h5, h6 { letter-spacing: 0px; margin-bottom: 0; color: #d7d7d7; font-weight: bold; line-height: 1.2em; }

h1 { 
	font-size: 2.4em; margin: 0 0 0 0; 
	text-indent: -9999px; overflow: hidden;
	width: 565px; height: 50px; margin-bottom: 47px;
	background: url(/content/Images/interface/bg-heading.png) no-repeat;
}
h2 { font-size: 1.7em; margin: 2.7em 0 0 0; text-shadow: rgba(0,0,0, 0.5) 1px 1px 1px; }
h3 { font-size: 1.6em; margin: 70px 0 0 0; text-shadow: rgba(0,0,0, 0.5) 1px 1px 1px; }

p { font-size: 1.3em; line-height: 1.6em; margin: 1.6em 0 0 0; text-shadow: rgba(0,0,0, 0.3) 1px 1px 1px; }

a 					{ color: #fff; text-decoration: none; border-bottom: 1px dotted #458aa1; }
a:hover, a:active 	{ color: #61bddc; }

ul li 								{ list-style-type: none; }
ol li 								{ list-style-type: decimal; }
.rte-output ul, .rte-output ol 		{ font-size: 1.2em; margin: 1em 0 0 2em; }
.rte-output ul li 					{ list-style-type: disc; }

/* *04: Structure -------------------------------------------------------------------------------------------------------------*/
/*    : NOTE: only structural css here - widths, heights, floats, margins etc. any styling code to go in '05: Common Containers & Subclasses' */

#header {
	width: 860px;
	margin: auto auto;
	position: relative;
}

#master { padding-top: 100px; }

#page {
	background: url(/content/Images/interface/bg-shadow.png) no-repeat 50% 100%;
}
#ie6 #page { background: none; }

#content {
	width: 860px;
	margin: auto auto;
	position: relative;
	padding-bottom: 100px;
}

#footer {
	background: #1f2b31;
	padding: 80px 0px 80px 0px;
	border-top: 1px solid #43494c;
}

#footer fieldset {
	width: 860px;
	margin: auto auto;
	position: relative;
}

/* *05: Common Containers & Subclasses ----------------------------------------------------------------------------------------*/

#email {
	position: absolute; top: 27px; right: 0; 
	color: #818b91; font-size: 1.3em; text-shadow: rgba(0,0,0, 0.2) 1px 1px 0px;
	border: none; 
	display: block;
	padding: 0px 0px 0px 25px;
}

#email a 		{ color: #818b91; }
#email a:hover 	{ background-position: 0 -14px; color: #fff; }

.div-line { background: url(/content/Images/interface/bg-div-line.gif) no-repeat; height: 2px; }

#welcome {
	font-size: 2.2em; color: #1f2b31; font-weight: bold; line-height: 1.3em;
	color: #d7d7d7;
	text-shadow: rgba(0,0,0, 0.2) -1px -1px 1px;
	margin: 40px 0px 0px 0px;
}

#welcome em { font-style: normal; font-size: 0.7em; display: block; }

/* project rotator ========================= */
#highlight								{ position: relative; margin: 45px 0 45px 0; }
#projects 								{ width: 910px; margin: auto auto; position: relative; overflow: hidden; }
#projects li 							{ width: 270px; float: left; margin: 0px 0px 55px 25px; }
#projects li .img						{ width: 270px; overflow: hidden; /*-moz-box-shadow: 2px 2px 5px rgba(0,0,0, 0.3); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0, 0.3);*/ }
#projects li .img img 					{ cursor: pointer; }
#projects li h4 						{ font-size: 1.5em; font-weight: bold; margin-top: 37px; }
#projects li h4 a 						{ text-shadow: rgba(0,0,0, 0.3) 1px 1px 1px; /*border: none;*/ padding-bottom: 3px; }
#projects .descrip						{ clear: left; font-size: 1.3em; }
#projects .descrip a 					{  }

#projects .proj-ind 					{ 
	background: url(/content/Images/interface/ind-proj-img-no.png) no-repeat; 
	display: block; width: 45px; height: 22px; 
	border: none; 
	position: absolute; top: 210px;
	outline: none;
	cursor: pointer;
}

#projects .one 		{ background-position: 0 0; }
#projects .two 		{ background-position: 0 -29px; }
#projects .three 	{ background-position: 0 -58px; }

#projects.active						{ width: 100%; height: 360px; }
#projects.active li 					{ margin: 0; position: absolute; top: 0; z-index: 2; }
#ie6 #projects.active li, 
#ie7 #projects.active li 				{ overflow: hidden; }
#projects.active li img					{ position: relative; }
#projects.active li h4 					{ position: relative; float: left; margin: 60px 0 13px 0; z-index: 3; }

.control								{ 
	text-indent: -9999px; overflow: hidden; 
	display: block; width: 50px; height: 200px;
	background: url(/content/Images/interface/bg-controls.png) no-repeat;
	position: absolute; top: 0; left: 0;
	display: none; outline: none;
	cursor: pointer;
	border: none;
}
#ie6 .control						{ background: url(/content/Images/interface/bg-controls.gif) no-repeat; }
#next								{ left: auto; right: 0; }
#next:hover							{ background-position: -50px 0; }
#next.disabled						{ background-position: -100px 0; cursor: auto; }
#prev								{ background-position: 0 -200px; }
#prev:hover							{ background-position: -50px -200px; }
#prev.disabled						{ background-position: -100px -200px; cursor: auto; }

/* content ========================= */
#love-code {
	display: block;
	width: 780px; height: 20px;
	text-indent: -9999px; overflow: hidden;
	background: url(/content/Images/interface/bg-write-code.png) no-repeat;
	margin: 55px 0px 35px 0px;
	border: none; cursor: pointer;
}

#love-code:hover {
	background-position: bottom left;
}

#photo-album {
	width: 240px;
	float: left;
	position: relative;
	height: 200px;
}

#photo-album.active img { cursor: pointer; }

#photo-album img {
	position: absolute; top: 0; left: 0;
}

#photo-album #img1 img { top: 0; left: 0; -moz-transform: rotate(-7.5deg); -webkit-transform: rotate(-7.5deg); }
#photo-album #img2 img { top: 0; left: -2px; -moz-transform: rotate(1.7deg); -webkit-transform: rotate(1.7deg); }
#photo-album #img3 img { top: -3px; left: 4px; -moz-transform: rotate(4.5deg); -webkit-transform: rotate(4.5deg); }
#photo-album #img4 img { top: 0; left: 0; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }

#caption { 
	position: absolute; top: 315px; left: 0;
	width: 200px;
	font-family: 'RabioheadRegular'; text-align: center; font-size: 2.2em; line-height: 1em;
}

#copy {
	width: 620px;
	float: left;
}

/*#copy p:nth-child(1), */
#copy p.first { margin-top: 0; }

#say-hello {
	display: block; width: 220px; height: 130px; float: left;
	background: url(/content/Images/interface/bg-say-hello.gif) no-repeat;
	text-indent: -9999px; overflow: hidden;
	border: none;
	margin-right: 20px;
}

#say-hello:hover {
	background-position: bottom left;
}

textarea {
	width: 580px; height: 120px; float: left;
	padding: 20px;
	
	background: #d7d7d7;
	background-image: -moz-linear-gradient(top, #fff, #d7d7d7); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #d7d7d7));
	border: none;
	-moz-border-radius: 10px; -webkit-border-radius: 10px;
	-moz-box-shadow: 2px 2px 3px rgba(0,0,0, 0.5);
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0, 0.5);
	
	font-size: 1.3em; color: #445055;
	
	font-family:  "etica-1","etica-2", "Segoe UI", "Lucida Sans", "Lucida Grande", Arial, Helvetica, sans-serif;;
}

textarea.default-value {
	color: #91999d;
}

.btn-submit {
	width: 50px; height: 50px;
	background: url(/content/Images/interface/btn-submit.png) no-repeat;
	border: none;
	cursor: pointer;
	position: absolute; bottom: -16px; right: -16px;
}

.btn-submit:hover {
	background-position: bottom left;
}

#form-error {
	padding: 10px 15px 0px 15px;
	height: 31px;
	
	background: #b71616;
	background-image: -moz-linear-gradient(top, #e71212, #b71616);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e71212),color-stop(1, #b71616));	
	-moz-border-radius: 5px; -webkit-border-radius: 5px;
	text-shadow: rgba(0,0,0, 0.5) 1px 1px 2px;
	
	color: #fff; font-weight: bold; font-size: 1.5em;
	position: absolute; bottom: -10px; right: 40px;
	
	display: none;
}

#thanks {
	width: 593px; height: 128px;
	background: url(/content/Images/interface/bg-thanks.gif) no-repeat;
	text-indent: -9999px; overflow: hidden;
	float: left;
	margin: 0;
/*	display: none;*/
}

#no-script {
	clear: both;
	margin-top: 40px;
	/*background: #458aa1;*/
	padding: 80px 0 0 0;
	-moz-border-radius: 5px; -webkit-border-radius: 5px;
}

/* *06: Custom Containers & Subclasses ----------------------------------------------------------------------------------------*/

/* *07: Forms -----------------------------------------------------------------------------------------------------------------*/