/*	davidamrock.com
	Master style sheet */

/*	Do not use the Travaille fonts without permission. */


@font-face {
	font-family: 'Travaille';
	src: url('fonts/Travaille-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	}

@font-face {
	font-family: 'Travaille';
	src: url('fonts/Travaille-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'Travaille';
	src: url('fonts/Travaille-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	}

@font-face {
	font-family: 'Travaille';
	src: url('fonts/Travaille-Light.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	}


html, body {
	margin: 0;
	padding: 0;
	background: #fff;
	color: #000;
	font: 102.5%/150% "Travaille", sans-serif;
	}

h2 {
	position: absolute;
	top: -999em;
	left: -999em;
	}

a {
	color: #07d;
	text-decoration: none;
	transition: color .25s;
	}

	a.here {
		color: #000;
		}

	a:link:hover,
	a:visited:hover {
		color: #05c;
		}

h1 {
	margin: 0;
	font-weight: normal;
	font-size: 100%;
	}

	h1 a {
		display: block;
		width: 100%;
		padding: .75rem 1.5rem;
		background: #fff;
		box-sizing: border-box;
		text-align: center;
		transition: background .25s, color .25s;
		}

		h1 a:link:hover,
		h1 a:visited:hover {
			color: #05c;
			background: #def;
			}

		strong.indicator {
			padding-right: .75rem;
			font-weight: normal;
			font-size: 85%;
			letter-spacing: .09em;
			text-transform: uppercase;
			}

#nav {
	border-top: 1px solid #ccc;
	}

#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	#nav a {
		display: block;
		width: 100%;
		padding: .75rem .5rem;
		box-sizing: border-box;
		background: #fff;
		transition: background .25s, color .25s, border-bottom-color .25s;
		}

		#nav a:link:hover,
		#nav a:visited:hover {
			color: #05c;
			background: #def;
			}

	#nav li {
		display: block;
		width: 50%;
		float: left;
		background: #fff;
		border-bottom: 1px solid #ccc;
		box-sizing: border-box;
		text-align: center;
		}

		#nav li+li {
			border-left: 1px solid #ccc;
			}

	p {
		max-width: 39rem;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 0 2.25rem;
		}

.artdesign p a[href],
.writing p a[href] {
	padding: .125em 0;
	border-bottom: .0625em solid #07d;
	color: #000;
	}

	.artdesign p a[href]:hover,
	.writing p a[href]:hover {
		border-color: #05c;
		color: #05c;
	}

	.writing p a[href*="note"] {
		border: none;
		color: #07d;
		}

#content {
	padding-top: 6rem;
	}



.home #content {
	padding-top: 3rem;
	}

	.home #content #intro {
		padding: 1.5rem 0;
		}

	.home #intro p {
		max-width: 42rem;
		color: #07d;
		font-weight: 100;
		font-size: 200%;
		line-height: 1.125em;
		letter-spacing: -.02em;
		text-align: center;
		box-sizing: content-box;
		padding: 1.5rem;
		}

		.home #intro a {
			color: #000;
			}

			.home #intro a:hover {
				color: #05c;
				}

.artdesign.index #content {
	padding-bottom: 1.5rem;
	}

.artdesign.index #content ul {
	list-style: none;
	margin: 0 auto;
	padding: 0rem .375rem;
	box-sizing: border-box;
	text-align: center;
	max-width: 100%;
	}

	.artdesign.index #content li {
		display: inline-block;
		box-sizing: border-box;
		padding: .375rem .375rem .5rem .375rem;
		}

	.artdesign.index #content a {
		display: inline-block;
		transition: background .25s;
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		}

	.artdesign.index #content img {
		display: block;
		max-width: 100%;
		height: auto;
		object-fit: contain;
		transition: opacity .25s;
		}

.artdesign.project #content div {
	margin: 1.5rem auto;
	}

	.artdesign.project #content h3+div {
		margin-top: 0rem;
		}

	.artdesign.project #content div p {
		margin: 0 auto;
		padding: 0 2.25rem;
		}

	.artdesign.project #content div p+p {
		text-indent: 1.5em;
		}

.artdesign.project img {
		display: block;
		width: 60rem;
		max-width: 100%;
		max-height: 100%;
		margin: 0 auto;
		padding: .375rem .75rem;
		box-sizing: border-box;
		}

		.artdesign.project #content div img+p {
			margin-top: .75rem;
			}

.writing.index ol {
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 100;
	font-size: 200%;
	line-height: 100%;
	letter-spacing: -.02em;
	text-align: center;
	}

	.writing.index ol a {
		display: block;
		border-top: 1px solid #07d;
		padding: 1.5rem 1.5rem;
		}

.writing #content {
		padding-bottom: 6rem;
		}

.writing.index .about {
		padding-top: 3rem;
		}

		.writing.index .about p {
			max-width: 36rem;
			}

.writing.post p+p {
	text-indent: 1.5em;
	}

	.writing.post p.date {
		margin-top: 4.5rem;
		margin-bottom: 1.5rem;
		}
sup {
	vertical-align: baseline;
	line-height: 100%;
	position: relative;
 	top: -0.25em;
	padding: 0 .125em;	
}

.writing h4 {
	padding-top: 3em;
	padding-bottom: 1em;
	font-weight: normal;
	text-align: center;
	}

	.writing h4[class!=notes]:first-child {
		padding-top: 1.5em;
		}

.writing .notes {
		max-width: 39rem;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 0 2.25rem;	
		}

	.writing .notes ul {
		list-style: none;
		margin: 0;
		padding: 0;
		}

	.writing .notes a[href] {
		padding: .125em 0;
		border-bottom: .0625em solid #07d;
		color: #000;
		}

		.writing .notes a[href]:hover {
			border-color: #05c;
			color: #05c;
			}

		.writing .notes li {
			padding-bottom: .75em;
			}

		.writing .notes h5 {
			display: inline-block;
			margin: 0;
			font-size: 100%;
			font-weight: normal;
			}

			.writing .notes h5:after {
				content: "\002E";
				margin: 0 .24em 0 0;
				}

			.writing .notes a[id] {
				color: #000;
				}

h3 {
		font-weight: 100;
		font-size: 200%;
		line-height: 100%;
		letter-spacing: -.02em;
		text-align: center;
		}

#more,
#contact,
#footer {
	box-sizing: border-box;
	border-top: 1px solid #ddd;
	padding: .75rem 1.5rem;
	}

	.home #footer {
/*		position: fixed;
		bottom: 0; */
		width: 100%;
		}

div#more {
		margin: 0 auto;
		padding: .75rem 1.5rem;
		border-top: 1px solid #ddd;
		box-sizing: border-box;
		text-align: right;
	}

#footer p,
#contact p {
		margin: 0;
		padding: 0;
		max-width: none;
		font-size: 100%;
		letter-spacing: 0;
		text-align: right;
		}

#contact p a[href],
#contact p a[href] {
	border: 0;
	}



@media (min-width: 42em) and (min-device-width: 42em) {

h1 {
	width: 100%;
	text-align: center;
	}

	h1 a {
		display: inline-block;
		width: auto;
		}

#nav {
	border: 0;
	}

#nav li {
	position: absolute;
	top: 0;
	left: 0;
	width: 33.3%;
	border-bottom: 0;
	text-align:left;
	}

	#nav li+li {
		left: 66.6%;
		border-left: 0;
		text-align:right;
		}

#nav a {
	display: inline-block;
	width: auto;
	padding: .75rem 1.5rem;
	}

.home #nav a {
	border: 0;
	}

#content {
	padding-bottom: 9rem;
	}

	.home #content {
		padding-bottom: 0;
		}

	.artdesign.index #content {
		padding-bottom: 9rem;
		}

.home #content #intro {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	padding: 0;
	align-items: center;
	justify-content: center;
	}

	.home #intro p {
		margin: 0 auto;
		padding: 1.25em;
		font-weight: 100;
		font-size: 300%;
		line-height: 125%;
		letter-spacing: -.04em;
		text-align: center;
		max-width: 24em;
		box-sizing: border-box;
		}

		.home #intro p a br {
			display: none;
			}

h3 {
		margin: 0 0 1.5rem 0;
		font-weight: 100;
		font-size: 300%;
		line-height: 100%;
		letter-spacing: -.04em;
		}

.artdesign.index #content ul {
	padding: 0rem 1.125rem;
	}

	.artdesign.index #content li {
		display: inline-block;
		width: 49.5%;
		box-sizing: border-box;
		padding: .4375rem .375rem;
		}

		.artdesign.index #content a[href]:before {
			content: "\2192";
			display: block;
			position: absolute;
			margin-top: 2.25rem;
			margin-left: -1.5rem;
			margin-right: 1.5rem;
			width: 1.5em;
			height: 1.5em;
			box-sizing: border-box;
			padding-top: .525em;
			border-radius: 1.5em;
			background: #fff;
			color: #06c;
			font-size: 300%;
			font-weight: 100;
			opacity: 0;
			transition: opacity .25s, transform .25s;
			box-shadow: 0 0 .75rem rgba(0,20,35,.25);
			}

			.artdesign.index #content a[href]:hover:before {
				opacity: 1;
				transform: translate(0,-.75rem);
				}

.artdesign.project #content div {
	margin: 4.5rem auto 4.5rem auto;
	}

		.artdesign.project #content div img+p {
			margin-top: 2.625rem;
			}



.writing.index h3 {
		margin: 0;
		line-height: 125%;
		}

	.writing.index ol a {
		display: inline-block;
		border: 0;
		padding: 0;
		font-size: 150%;
		line-height: 125%;
		letter-spacing: -.04em;
		}

	.writing.index ol a:after {
			content: "\2192";
			position: absolute;
			margin-left: 1.5rem;
			color: #fff;
			transition: color .25s, transform .25s;
		}		

	.writing.index ol a:hover:after {
			color: #05c;
			transform: translate(-.75rem, 0);
		}

.writing.index .about {
		padding-top: 6rem;
		}

.writing.post #content {
		padding-bottom: 12rem;
		}

		.writing .notes h5 {
			display: inline-block;
			width: 1em;
			margin: 0 .66em 0 -1.66em;
			font-weight: normal;
			text-align: right;
			}

			.writing .notes h5:after {
				display: none;
				content: none;
				}

footer {
	position: absolute;
	border: 0;
	width: 100%;
	box-sizing: border-box;
	margin-top: 1.5rem;
	}

	#contact {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 33.33%;
		padding: 0;
		border: 0;
		}

	#contact p {
		text-align: left;
		}

		#contact a {
			display: inline-block;
			padding: .75rem 1.5rem;
			}

	#footer {
		width: 33.33%;
		position: absolute;
		bottom: 0;
		right: 0;
		padding: .75rem 1.5rem;
		border: 0;
		}

		.home #footer {
			position: fixed;
			}

div#more {
		width: 33.33%;
		position: absolute;
		left: 33.33%;
		bottom: 0;
		border: 0;
		padding: 0;
		text-align: center;
		background: #fff;
		}
		
		div#more a {
			display: inline-block;
			padding: .75rem 1.5rem;
			transition: background .25s, color .25s;
			}

			div#more a:hover {
				background: #def;
				color: #05c;
				}

}