/* Body, reset and fonts
 -------------------------------------------------------------- */ 
 @font-face {font-family:'GoudyBookletter1911';
    src:url('../fonts/GoudyBookletter1911.eot');
    src:local('GoudyBookletter1911'), 
	url('../fonts/GoudyBookletter1911.woff') format('woff'), 
	url('../fonts/GoudyBookletter1911.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    border: 0;
}

:focus {
    outline: 0;
}

body {
    font: 76% Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
    color: #2e2e2e;
	background: #262626;
}

/* Styles
 -------------------------------------------------------------- */
/* -- General -- */
p {
    font-size: 1.2em;
    line-height: 1.5;
    margin-bottom: 16px;
}

p:last-of-type {
    margin-bottom: 0;
}

a {
	color: #2e2e2e;
}

a:hover, a:focus, a:active {
	background: #2e2e2e;
	color: #f8f8f8;
}

ul {
    list-style: none;
	margin-bottom: 16px;
}

li {
	font-size: 1.2em;
    line-height: 1.4;
}

h1, h2, h3, h4, h5, h6 {
    font-family: GoudyBookletter1911, Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
    margin: 0 0 20px 0;
    color: #404040;
	margin-bottom:16px;
}

h1 {
	float:right;
    text-indent:-999em;
	width:382px;
	height:200px;
	background:url('../img/headings.png') no-repeat;
	margin:10px;
}

h2 {
    float:right;
    text-indent:-999em;
	line-height:0;
	width:382px;
	height:200px;
	background:url('../img/headings.png') no-repeat;
	margin:10px;
}

#about h2 {
	background-position:0 -200px;
}

#work h2 {
	background-position:0 -400px;
}

#contact h2 {
	background-position:0 -600px;
}

h3 {
    font: 3em GoudyBookletter1911, Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
    text-shadow: rgba(0, 0, 0, .6) 1px 1px 1px;
}

h4 {
	color:#fff;
	font-size:2em;
	font-weight:normal;
}

h5 {
	position:absolute;
	bottom:-52px;
	right:-20px;
	text-indent:-999em;
	line-height:0;
	width:256px;
	height:52px;
	background:url('../img/hover.png') no-repeat;
}

img {
    border: o;
}

/* Layout
 -------------------------------------------------------------- */
/* -- Main sections -- */

#wrapper {
	width:960px;
	position:relative;
}

#content-wrapper {
    background: #c8c8c8 url('../img/woodLight.jpg');
	width:620px;
	position:relative;
	overflow:auto;
}

#content-wrapper div#top, #content-wrapper div#about, #content-wrapper div#work, #content-wrapper div#contact {
	margin: 10px 10px 600px;
	position:relative;
}

#content-wrapper .inner {
	position:relative;
	width:580px;
	padding:10px 10px 20px;
	background: rgb(255,255,255);
	background: rgba(255,255,255,0.9);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
	clear:both;
}

.no-rgba #content-wrapper .inner {
	background: url('../img/white-bg.png');
	border:1px solid #262626;
}

img.tools {
	position:absolute;
	top:-225px;
	left:0;
}

/* -- Sidebar -- */

#sidebar {
	position:fixed;
	left:620px;
	top:0;
	height:100%;
	min-height:600px;
	border-left:10px solid rgb(0,0,0);
	border-left:10px solid rgba(0,0,0,0.7);
	z-index:100;
}

nav {
	display:block;
}

ul#nav {
	float:left;
	margin:10px;
	z-index:4;
	width:310px;
}

ul#nav li a {
	display: block;
    padding:6px 50px 6px 0;
    z-index: 5;
    color: #d0d0d0;
	text-align:right;
	font:1.5em GoudyBookletter1911, Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
    text-decoration: none;
	text-transform:lowercase;
	position:relative;
	text-shadow:0 0 1px rgba(0,0,0,0.8);
}

ul#nav li a:hover, ul#nav li a:active, ul#nav li a:focus {
	color:#fff;
	text-shadow:0 0 1px rgba(0,106,127,0.9);
	background:transparent;
}

ul#nav li.backLava {
    background: #00C7F4;
	background:-webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(0,208,255)), color-stop(0.5, rgb(0,191,234)), color-stop(1, rgb(3,169,206)));
	background:-moz-linear-gradient(center bottom, rgb(0,208,255) 0%, rgb(0,191,234) 50%, rgb(3,169,206) 100%);
    position: absolute;
	z-index:-5;
	-moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

ul#nav li.selectedLava a {
	color:#fff;
	text-shadow:0 -1px 0 rgba(0,106,127,0.9);
}

ul#nav li a span {
	width:50px;
	height:50px;
	position:absolute;
	top:-5px;
	right:0;
	background:transparent url('../img/nav-tools.png') no-repeat;
}

ul#nav li a#about-link span {
	background-position:0 -50px;
}

ul#nav li a#work-link span {
	background-position:0 -100px;
}

ul#nav li a#contact-link span {
	background-position:0 -150px;
}


ul#nav li a:hover span {
	visibility:visible;
}

ul#nav li em {
	visibility:hidden;
	position:absolute;
	bottom:15px;
	right:135px;
	width:100px;
	padding:20px;
	text-align:center;
	font-style:normal;
	color:#000;
	font-size:1em;
	-webkit-border-top-left-radius:200px 120px;
	-webkit-border-top-right-radius:200px 120px;
	-webkit-border-bottom-right-radius:200px 120px;
	-webkit-border-bottom-left-radius:200px 120px;
	-moz-border-radius:200px / 120px;
	border-radius:200px / 120px;
	background:rgb(255,255,255);
}

.no-borderradius ul#nav li em {
	bottom:45px;
	right:115px;
}

ul#nav li:hover em {
	visibility:visible;
}

/* creates part of the curve */
ul#nav li em:before {
	content:"\00a0";
	position:absolute;
	z-index:-10;
	top:-10px;
	right:60%;
	width:0;
	height:25px;
	border-right:60px solid #fff;
	background:#fff;
	-moz-border-radius-topright:80px 50px;
	-webkit-border-top-right-radius:80px 50px;
	border-top-right-radius:80px 50px;
	-moz-transform:translate(0, -2px);
	-webkit-transform:translate(0, -2px);
	-o-transform:translate(0, -2px);
	transform:translate(0, -2px);
}

/* creates part of the curved pointy bit - background is same color as body */
ul#nav li em:after {
	content:"\00a0";
	position:absolute;
	z-index:-9;
	top:-10px;
	right:60%;
	width:40px;
	height:25px;
	background:#262626;
	-moz-border-radius-topright:40px 50px; 
	-webkit-border-top-right-radius:40px 50px; 
	border-top-right-radius:40px 50px; 
	-moz-transform:translate(-20px, -2px);
	-webkit-transform:translate(-20px, -2px);
	-o-transform:translate(-20px, -2px);
	transform:translate(-20px, -2px);
}

.no-borderradius ul#nav li em:before, .no-borderradius ul#nav li em:after {
	display:none;
}

#wavingMan {
	position:absolute;
	bottom:0;
	left:-30px;
    width: 125px;
    height: 174px;
    background: url('../img/wavingMan.png') no-repeat;
	z-index:10;
}

/* -- Thumbnails -- */
div#thumbnails {
	float:left;
	clear:both;
	width:320px;
	margin:5px 0 0 10px;
	position:relative;
}

div#thumbnails img {
	display:block;
}

div.thumbnail-container {
	position:relative;
}

.trigger {
	float:left;
	border:5px solid #202020;
	margin:0 5px 5px 0;
	text-decoration:none;
	cursor:pointer;
	position:static;
	-moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.trigger:hover{
	border-color:#fff;
}

.trigger span {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	opacity:0;
	background:#000;
	background:rgba(0,0,0,0.6);
	color:#fff;
	padding:4px;
	font: 1.2em GoudyBookletter1911, Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 1s;
	-moz-transition-property: opacity;
	-moz-transition-duration: 1s;
}

.trigger:hover span {
	opacity:1;
}

.trigger:hover .hidden {
	left:0;
	opacity:1;
}

.hidden {
	height:100%;
	position:fixed;
	top:0;
	left:-620px;
	opacity:0;
	background:#000;
    background:rgba(0,0,0,0.9);
	padding:20px;
	width:580px;
	color:#fff; 
	-webkit-transition-property: left, opacity;
	-webkit-transition-duration: 1s;
	-moz-transition-property: left, opacity;
	-moz-transition-duration: 1s;
} 

.hidden img {
	margin:10px auto;
	border:5px solid #fff;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

ul.slideshow {
	height: 440px;
	overflow:hidden;
}

/* -- Contact form -- */
form#contact-form {
    margin-top: 20px;
    font: 1.4em / 1.8 GoudyBookletter1911, Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
    color: #000;
    background: url('../img/white-bg.png');
    padding: 20px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #eee;
    overflow: auto;
}

form#contact-form fieldset {
    padding: 10px 0;
}

form#contact-form label {
    background: #eee;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

form#contact-form input {
    font: 1.1em GoudyBookletter1911, Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
    background: transparent;
    border-bottom: 1px dotted #515151;
    width: 180px;
	margin:0 6px;
}

form#contact-form button {
    float: right;
    cursor: pointer;
    font: 1.1em GoudyBookletter1911, Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
    background: rgb(4, 169, 206);
    background: -webkit-gradient( linear, left bottom, left top, color-stop(0.36, rgb(4,169,206)), color-stop(0.83, rgb(0,208,255)));
	background:-moz-linear-gradient( center bottom, rgb(4,169,206) 36%, rgb(0,208,255) 83% );
	padding:3px 5px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border: 1px solid rgba(0,0,0,0.4);
	color:#eee;
	text-shadow: rgba(0, 0, 0, .6) 1px 1px 1px;
}

form#contact-form button:hover {
	color:#fff;
	background:rgb(0,208,255);
	background:-webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,208,255)), color-stop(1, rgb(4,169,206)));
	background:-moz-linear-gradient( center bottom, rgb(0,208,255) 0%, rgb(4,169,206) 100% );
}

form#contact-form input:focus, form#contact-form input:active {
	border-style:solid;
}

@media only screen and (max-width: 960px) {
body {
	background: #c8c8c8 url('../img/woodLight.jpg');
}
#sidebar {
	position:absolute;
	left:0;
	top:0;
	right:0;
	min-height:0;
	height:auto;
	padding:0;
	margin:0;
	border-bottom:5px solid rgba(0,0,0,0.7);
}

#sidebar:before {
 	content:url('../img/HomeCarpenter.png');
	position:absolute;
	top:10px;
	right:10px;
}

#sidebar:after {
 	content:url('../img/wavingMan.png');
	position:absolute;
	top:20px;
	left:0;
}

ul#nav {
	display:none;
}

ul#nav li em {
	display:none;
}

div#thumbnails, #wavingMan {
	display:none;
}

#wrapper, #content-wrapper .inner {
	width:auto;
	position:relative;
}

#content-wrapper {
	width:auto;
}

#content-wrapper div#top, #content-wrapper div#about, #content-wrapper div#work, #content-wrapper div#contact {
	margin: 10px;
	position:relative;
	z-index:10;
}

h1, h2 {
	height:160px;
	background:none;
}

h3 {
	font-size:1.9em;
}
p, #content-wrapper li {
	font-size:1.4em;
}
img.tools {
	top:auto;
	bottom:-225px;
	left:0;
}

div#contact img.tools {
display:none;
}
}