@import url(http://fonts.googleapis.com/css?family=Walter+Turncoat|Quicksand:400,700);

html {
	background-color: #c7ae75;
	font-size:100%;
	min-height: 100%;
	font-family: Quicksand, Verdana, Arial, Helvetica, sans-serif;
	line-height: 20pt;
	letter-spacing: .125em;
	color: #000;
/*	color: #332117;*/ /* a color to match the eraser */
/* 	color: #46201d;*/ /* a color to match the sharpener */
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Walter Turncoat", Verdana, Arial, Helvetica, sans-serif;

}

b, strong {
 font-weight: 700;
}

body {
	margin: auto;
	display: block;
	width:48.75em;
	height: 100%;
	min-height: 40em;
	padding: 0;
	background: #fff url(../images/drawing-tools.jpg) 0 7.5em no-repeat;
	background-size: 20.512821% auto;
	position: relative;
}
/*#header {height: 7.5em}*/
nav, #nav {
	display:block;
	list-style:none;
	float:left;
	text-align:left;
	padding: .125em;
	margin: 0 0 0 20.512821%;
	letter-spacing: .5em;
/*	border: .0625em solid #508aca;*/
	background-color: #d9ebf4;
	font-size: 80%;
	clear: both;
}
nav li, #nav li {
	list-style:none;
	display: block;
	float:left;
	padding: .125em;
	margin: 0 .125em 0 0;
}
nav a, #nav a {
	text-decoration: none;
	padding: .3125em .5em .3125em 1em;
	margin: 0;
	height:1em;
	display:block;
	float:left;
	line-height:1em;
}
nav a:visited, #nav a:visited  {color: #0477ba;}
#content {
	display: block;
	background : transparent;
	margin: 0 0 0 20.512821%;
	padding-top: 1em;
	right:0;
	text-align:left;
	clear:both;
 }
#home #content {
	padding-top: 2.5em;
}
#logo {
/* 1em = 50px */
 float: left;
 font-size: 500%;
 width: 6em; /* 300px */
 margin-right:-2em;
 padding: .5em .25em; /* 40px 20px */
 letter-spacing: 0;
 margin: 0;
 clear:none;
 white-space:nowrap;
}
#tagline {
/* 1em = 12.8px */
 float: left;
 font-size: 80%;
 line-height: 1.75em;
 font-family: "Walter Turncoat", Verdana, Arial, Helvetica, sans-serif;
/* width: 18.74em; */
 font-weight: normal;
 margin: 0;
 clear:none;
 padding: .78125em;
 list-style: none;
}

a:link {
	color: #0477ba;
	background-color : transparent;
}
a:visited {
	color: #402b64;
	background-color : transparent;
}
a:hover {
	color: #0477ba;
	background-color : #bee8f6;
}
a:active {
	color: #0477ba;
	background-color : #bee8f6;
}
/* #main {
	width: 43.75em;
	display: block;
	margin: 1.5625em;
	background : #FFFFFF;
	position:absolute;
	top:1.5625em;
	left: 1.5625em;
}
*/


p { margin: 0 0 1em 0;}


h1 {
	font-size: 180%;
	margin: 0 0 1em 0;
	padding: 0;
}
h2 {
	font-size: 160%;
	margin: 0 0 1em 0;
	padding: 0;
}
h3 {
	font-size: 110%;
	line-height: 100%;
	margin: 0 .5em 1em 0;
	padding-bottom: .25em;
	border-bottom: .25em solid #c7ae75;
}
.portfolio {clear:right;}
.portfolio img, .portfolio div img {
	float:right;
	margin:.5em;
}
span.portfolio, a span.portfolio, a:link span.portfolio, a:visited span.portfolio, a:hover span.portfolio, a:active span.portfolio {
	font: 10pt Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #60563e;
	text-decoration: none;
	background: transparent;
}
.round {
	border-radius: .625em;
	-moz-border-radius: .625em;
	-webkit-border-radius: .625em;
}




@media all and (max-width: 48.75em) {

html {
 background-color: #fff;
 height: 100%;
}

body {
	margin: auto;
	width:100%;
	padding: 0;
	height:100%;
}

}

@media all and (max-width: 47.5em) {

body {
 padding-top: .125em;
}

#logo {
/* 1em = 50px */
 float: none;
 width: 98%;
 margin: .125em auto;
 text-align: center;
 padding: 0;
 line-height: .75em;
}

#tagline {
 text-align: center;
 float: none;
 width: 98%;
 margin: 0 auto;
 padding: 0;
}

#tagline li {
 display: inline;
 padding: 0;
}
#tagline li:before {
 content: " · ";
}
#tagline li:first-child:before {
 content: "";
}

@media all and (max-width: 40em) {

body {
 background-image: none;
}
#content, nav, #nav {
	margin: 0;
	width: 100%;
}

nav, #nav {
 text-align: center;
}

nav, nav li, nav a, #nav, #nav li, #nav a, {
 float: none;
}

nav li, #nav li {
 display: inline;
 padding: 0; 
}

nav a, #nav a {
 display: inline;
 padding: 1em;
}

nav a:before, #nav a:before {
 content: "»";
}

#content {
 padding: 1em;
 width: auto;
}

}


@media all and (max-width: 40em) {

#logo {
 font-size:250%;
 white-space:normal;
}

}