@import url( 'normalize.css' );
@import url( 'reset.css' );

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

/* BASE */

IMG { border: 0px; }
BODY { 
	font-family: Poppins, Helvetica, Tahoma, sans-serif;
	background: url( http://img.davidhuyck.com/BG.gif ) #666;
	color: #333333;
	font-size: 13px; 
	margin:0px; 
	padding:0px;
	line-height: 20px;
}
EM { font-style: italic; color: #666; }
STRONG { font-weight: bold; }

A:link, A:active, A:visited {
		color: #f60;
    	text-decoration: none;
}
A:hover { 
		text-decoration: none;
		color: #fff;
        background-color: #f60;
}

H1, H2, H3, H4, H5, H6 {
	font-family: "Walter Turncoat", "ff-providence-sans-web-pro", Georgia, serif;
	font-weight: bold;
    margin: 1em 0 0.5em 0;
}

H1 {
	font-size: 36px;
	font-style: italic;
}

H2 {
	font-size: 24px;
	padding: 5px 10px;
	margin: 5px 0 5px -15px;
}


/* NAV */

HEADER#siteheader {
	font-family: "ff-providence-sans-web-pro", Georgia, serif;
	color: #ccc;
	background-color: #333;
	border-bottom: 5px solid #f60;
	padding: 15px 0;
	text-align: center;
	width: 100%;
	height: 20px;
	-webkit-box-shadow: 0 2px 2px 1px rgba(90, 90, 90, 0.3);
	   -moz-box-shadow: 0 2px 2px 1px rgba(90, 90, 90, 0.3);
	     -o-box-shadow: 0 2px 2px 1px rgba(90, 90, 90, 0.3);
	        box-shadow: 0 2px 2px 1px rgba(90, 90, 90, 0.3);
}
	HEADER#homeheader { border-bottom: 5px solid #f60; }

#navContent {
	text-align: center;
}
#navLinks {
	text-align: center;
	margin: 0 auto;
	width: 480px;
}
	.navChunk {
		float: left;
	}
	
DIV#info {
	font-family: "ff-providence-sans-web-pro", Georgia, serif;
	text-align: center;
	background-color: #333;
	color: #fff;
	padding: 30px 0;
	margin-bottom: 10px;
	
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
}
DIV#intro {
	font-family: "ff-providence-sans-web-pro", Georgia, serif;
	font-size: 16px;
	text-align: center;
}
HEADER#siteheader A.navigation {
	height: 19px;
	padding: 2px 3px;
	margin: 0 5px;
	display: block;
	float: left;
	-webkit-transform: skewX(-10deg);
	-moz-transform: skewX(-10deg);
	-o-transform: skewX(-10deg);
	transform: skewX(-10deg);
}
	HEADER#siteheader A.navigation:hover { background: #ccc; color: #000; }
	.currentNav {
		background-color: #f60;
		color: #000;
		padding: 2px 3px;
	}
		A.currentNav { 
			color: #000;
		}

.sayMyName {
	font-size: 1.7em;
	padding: 5px 3px;
	color: #fff;
	border: 0;
	margin-right: 5px;
}
	A.sayMyName, .sayMyName A { color: #fff; }
	A.sayMyName:hover, .sayMyName A:hover { color: #f60; background: none; }
	#info .navigation { font-size: 1.4em; }

.sayHello {
	font-size: 1.5em;
	padding: 2px 3px;
	margin-left: 5px;
	color: #fff;
}
	A.sayHello, .sayHello A { color: #fff; border: 0; }
	A.sayHello:hover, .sayHello A:hover { color: #f60; background: none; border: 0; }
	A.On, .On A {
		color: #000;
		background: #f60;
		line-height: 1em;
		width: 3.2em;
		padding: 6px 3px 1px 3px;
		margin-left: 5px;
		margin-top: -4px;
		border-radius: 1em;
		display: inline-block;
	}
	A.sayHelloOn:hover, .sayHelloOn A:hover {
		color: #f60;
		background: #000;
	}
	
#galleryNavChunk {
	width: 250px;
	margin: 0 auto;
	padding-bottom: 20px;
}
	.galleryNav {
		float: left;
	}
	#galleryPREV { width: 50px; text-align: right; }
	#galleryGALLERY { width: 150px; text-align: center; }
	#galleryNEXT { width: 50px; text-align: left; }

/* end NAV */

#about {
	width: 40%;
	margin: 0 5%;
	float: left;
}
#contactCV {
	width: 35%;
	float: left;
	margin: 10 2%;
}
#contact {
	background: #e5e5e5;
	padding: 5px 7% 10px 7%;
	
	border-radius: 20px;
	margin-top: 2.3em;
}
#linkCV {
	margin: 20px 0;
}
	#linkCV IMG { max-width: 100%; }

P.DH-sig {
	font-family: "ff-providence-sans-web-pro", "Walter Turncoat", verdana, sans-serif;
	text-align: right;
	margin-bottom: 0;
}

P {
	margin-bottom: 13px;
}
	P A { color: #c60; }

#pieceNoDHX {
	background-color: #ffc;
}

SECTION#main, SECTION#hello {
	background-color: #fff;
	margin: 0px 20px 40px 20px;
	min-width: 730px;
	padding: 5px 20px 20px 20px;
	
	-webkit-border-radius: 0 0 15px 15px;
	-moz-border-radius: 0 0 15px 15px;
	-o-border-radius: 0 0 15px 15px;
	border-radius: 0 0 15px 15px;
	
	-webkit-box-shadow: 0 4px 4px 2px rgba(60, 60, 60, 0.5);
	-moz-box-shadow: 0 4px 4px 2px rgba(60, 60, 60, 0.5);
	-o-box-shadow: 0 4px 4px 2px rgba(60, 60, 60, 0.5);
	box-shadow: 0 4px 4px 2px rgba(60, 60, 60, 0.5);
}

SECTION#main HEADER.showTheLove {
	font-family: "ff-providence-sans-web-pro", "Walter Turncoat", verdana, sans-serif;
	font-size: 1.5em;
	line-height: 1.6em;
	color: #777;
	background: #f6f6f6;
	max-width: 500px;
	padding: 0.7em 1em;
	border: 2px solid #f60;
	border-radius: 0.8em;
	margin: 0.5em auto;
	box-sizing: border-box;
}

#gallery {
	margin: 10px auto;
	min-width: 240px;
	/* max-width: 1380px;
	border: 1px solid red; */
}
.galleryCaption {
	display: none;
	z-index: 500;
	position: inherit;
	bottom: -1;
	width: 80%;
	background-color: rgba(25, 25, 25, 0.8);
	color: #fff;
	font-size: 11px;
	padding: 5px;
	
	-webkit-border-radius: 0 10px 0 0;
	-moz-border-radius: 0 10px 0 0;
	-o-border-radius: 0 10px 0 0;
	border-radius: 0 10px 0 0;
}

.bookCover {
	width: 30%;
	float: left;
	border-right: 1px solid #ccc;
	padding-right: 2%;
	margin: 20px 2% 0 0;
}
	.bookCover IMG {
		max-width: 100%;
	}

.bookInfo {
	width: 30%;
	float: left;
	border-right: 1px solid #ccc;
	padding-right: 2%;
	margin: 20px 2% 0 0;
}
	.bookMeta {
		padding-bottom: 1em;
		/* border-bottom: 1px dashed #999; */
		margin-bottom: 1em;
	}
	.bookDivider {
		height: 1px;
		border-bottom: 1px dotted #ccc;
		margin-bottom: 1em;
		margin-top: -1em;
	}
	BLOCKQUOTE {
		padding: 10px 20px;
		border: 1px solid #e5e5e5;
		margin: 10px 0;
		
		-webkit-box-shadow: 0 2px 2px 0 rgba(90, 90, 90, 0.3);
		   -moz-box-shadow: 0 2px 2px 0 rgba(90, 90, 90, 0.3);
		     -o-box-shadow: 0 2px 2px 0 rgba(90, 90, 90, 0.3);
		        box-shadow: 0 2px 2px 0 rgba(90, 90, 90, 0.3);
	}
	.bookAwardsActivities {
		padding: 1em;
		margin: 1.2em 0;
		text-align: center;
		font-size: 1.4em;
		line-height: 1.4em;
		background: rgba(255, 102, 0, 0.2);
		position: relative;
		outline: 2px solid #fff;
		outline-offset: -0.4em;
	}
		.boookAwardsActivities:before {
			content: "";
			width: 80%;
			height: 0;
			position: absolute;
			top: -25px;
			left: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 25px solid rgba(255, 102, 0, 0.2);
		}
		.boookAwardsActivities:after {
			content: "";
			width: 80%;
			height: 0;
			position: absolute;
			bottom: -25px;
			left: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-top: 25px solid rgba(255, 102, 0, 0.2);
		}
	.bookSales {
		padding: 0.5em 0.5em 0.5em 1em;
		background: #eee;
		border: 1px solid #f60;
		border-radius: 0.5em;
	}
.bookImages {
	width: 30%;
	float: left;
	margin-top: 20px;
}

.homeNAV {
	width: 95%;
	margin: 1%;
}
.homeNAV IMG {
	max-width: 100%;
}
	.homeNAV img:hover {
		margin: 0;
		border: 0;
	}
.homeBooks {
	font-family: "ff-providence-sans-web-pro", "Walter Turncoat", verdana, sans-serif;
	margin: 5px 0 0 0;
	font-size: 1.4em;
	color: #333;
	text-align: center;
}
	.booksNav {
		font-family: "ff-providence-sans-web-pro", "Walter Turncoat", verdana, sans-serif;
		margin: 0;
		font-size: 1.1em;
		color: #333;
		text-align: center;
		background-color: #eee;
		padding: 3px 0;
	}

.piece, .pieceWide {
	width: 95%;
	margin: 1%;
}

.bookSample, .bookSampleWide {
	width: 95%;
	margin: 1%;
}

.piece IMG, .bookSample IMG {
	max-width: 100%;
}
	.piece img:hover {
		margin: -2px;
		border: 2px solid #c60;
	}
	DIV#info img:hover {
		margin: 0;
		border: 0;
	}

.projectInfo {
	width: 420px;
	margin: 0 auto 20px auto;
	text-align: center;
}
	P.projectTitle {
		font-family: "ff-providence-sans-web-pro", "Walter Turncoat", verdana, sans-serif;
		margin-bottom: 3px;
		font-size: 1.8em;
		color: #333;
	}
	P.projectCaption {
		margin-bottom: 10px;
		font-size: .9em;
		line-height: 1.6em;
		font-style: italic;
		color: #666;
	}
	.projectImage {
		text-align: center;
	}
		.projectImage IMG {
			max-width: 100%;
			margin-bottom: 20px;
		}

FOOTER {
	padding: 4px 3px 6px 3px;
	font-size: 13px;
	background-color: rgba(51, 51, 51, 0.9);
	color: #fff;
	border-bottom: 3px solid #f60;
	text-align: center;
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 1000;
}
	FOOTER SPAN {
		white-space: nowrap;
	}
	FOOTER SPAN A {
		display: inline-block;
		width: 1.5em;
		line-height: 1.3em;
		height: 1.3em;
		vertical-align: bottom;
		border-radius: 50%;
	}
	FOOTER SPAN A:hover {
		margin: -2px;
		padding: 4px 2px 2px 2px;
	}
	FOOTER A.footer-email:hover {
		margin: 0;
		padding: 0;
		background: none;
	}

.headshot {
	float: right;
	margin: 0 0 5px 15px;
	width: 220px;
}
.headshot IMG {
	max-width: 100%;
	border-radius: 20px;
}

/************************************/
/* RESPONSIVE
/************************************/

/* LARGE */
@media only screen and (min-width: 1000px) {

	.homeNAV {
		width: 31%;
		margin: 1%;	
	}
	.piece {
		width: 23%;
		margin: 1%;	
	}
		.pieceWide {
			width: 48%;
			margin: 1%;	
		}
		
	.bookSample {
		width: 47%;
		margin: 1%;	
	}
		.bookSampleWide {
			width: 94%;
			margin: 1%;	
		}
	
	HEADER#siteheader {
		padding: 15px 0;
		height: 30px;
	}
}
/* end LARGE */

/* MEDIUM */
@media only screen and (max-width: 999px) {
	
	.homeNAV {
		width: 31%;
		margin: 1%;	
	}
	.piece {
		width: 31%;
		margin: 1%;	
	}	
		.pieceWide {
			width: 63.5%;
			margin: 1%;	
		}
		
	.bookSample {
		width: 47%;
		margin: 1%;	
	}
		.bookSampleWide {
			width: 94%;
			margin: 1%;	
		}

	HEADER#siteheader {
		padding: 15px 0;
		height: 30px;
	}
	
	SECTION#main, SECTION#hello {
		min-width: 0;
		max-width: 100%;
		background-color: #fff;
		margin: 0 15px 40px 15px;
		padding: 10px 10px 50px 10px;
	}
	.headshot {
		width: 50%;
		height: auto;
		max-width: 227px;
	}
}
/* end MEDIUM */

/* SMALL */
@media only screen and (max-width: 649px) {

	.homeNAV {
		width: 47%;
		margin: 1%;	
	}
	.piece {
		width: 47%;
		margin: 1%;	
	}
		.pieceWide {
			width: 47%;
			margin: 1%;	
		}
	
	.bookCover {
		width: 95%;
		float: left;
		border: 0;
		margin: 10px 0;
	}
	
	.bookInfo {
		width: 95%;
		float: left;
		border: 0;
		margin: 10px 0;
	}
	.bookImages {
		width: 95%;
		float: left;
	}
	
	DIV#info img { max-width: 60%; }
	#info .navigation { font-size: 1em; }
	
	SECTION#main, SECTION#hello {
		min-width: 0;
		max-width: 100%;
		background-color: #fff;
		margin: 0;
		padding: 10px 10px 50px 10px;
		-webkit-border-radius: 0;
		   -moz-border-radius: 0;
		     -o-border-radius: 0;
		        border-radius: 0;
		-webkit-box-shadow: 0;
		   -moz-box-shadow: 0;
		     -o-box-shadow: 0;
		        box-shadow: 0;
	}
		
	H1 {
		margin: 0 -10px 10px -10px;
		padding: 5px 10px;
		font-size: 24px;
	}
	#about { width: 90%; margin: 0 2% }
	#contactCV { width: 90%; margin: 10px 2% }
}
/* end SMALL */

/* start iPhone */
@media only screen and (max-width: 480px) {

	.homeBooks {
		font-size: 1.1em;
	}
	.projectInfo {
		width: 300px;
		margin: 0 auto 20px auto;
		text-align: center;
	}
		P.projectTitle {
			font-family: "ff-providence-sans-web-pro", "Walter Turncoat", verdana, sans-serif;
			margin-bottom: 3px;
			font-size: 1.2em;
			color: #333;
		}
	
	.bookSample {
		width: 47%;
		margin: 1%;	
	}
		.bookSampleWide {
			width: 94%;
			margin: 1%;	
		}
	.bookImages {
		padding-bottom: 20px;
		margin: 20px 0;
		border-bottom: 10px solid #ccc;
	}
	
	.sayMyName {
		font-size: 1.4em;
	}
	.sayHello {
		font-size: 1.1em;
	}
		.sayHelloOn, A.sayHelloOn {
			font-size: 1.1em;
		}
	
	#navLinks {
		width: 280px;
	}
	HEADER#siteheader {
		padding: 8px 0;
		height: 65px;
	}
	
	SECTION#main, SECTION#hello {
		width: auto;
		margin: 0;
	}
	#gallery {
		margin: 10px auto;
		min-width: 200px;
		max-width: 480px;
	}
	.galleryNav IMG {
		width: 30px;
	}
}
/* end iPhone */