body,html{
	padding: 0; margin: 0;
	font-family: 'Arvo', serif;
	background: #c9c2aa;
	font-size: 1em;
	-webkit-text-size-adjust: 100%;}

#wrapper{
	position: relative;
	float: left;
	width: 855px;
	height: 604px;
	background: url('../art/background.png') 0 0 no-repeat;
	padding: 98px 45px 98px 100px;}

#leftcol{
	float: left;
	width: 253px; height: 602px;}

h1#site-title, h2#site-title{
	margin: 45px 0 0 18px;
	padding: 0;}
	#site-title a{
		display: block;
		text-indent: -5000px;
		height: 42px; width: 218px;
		background: url('../art/ariel-logo.png') 0 0 no-repeat;}

select.menuselect{ display: none; }
#nav ul{
	list-style-type: none;
	margin: 38px 0 0 7px; padding: 0;}
	#nav ul li{
		margin: 0; padding: 0;
		font-style: italic;
		font-size: 0.9em;}
	
	#nav ul li a{
		color: #000;
		text-decoration: none;
		display: block;
		padding: 31px 0 18px 85px;
		height: 44px;}
		#nav ul li.about a{
			background: url('../art/nav-about.png') 0 0 no-repeat;}
		#nav ul li.notable a{
			background: url('../art/nav-notable.png') 0 0 no-repeat;}
		#nav ul li.titles a{
			background: url('../art/nav-titles.png') 0 0 no-repeat;}
		#nav ul li.contact a{
			background: url('../art/nav-contact.png') 0 0 no-repeat;}
			#nav ul li a:hover, #nav ul li.active a{
				background-position: 0 -217px;}
		#nav ul li a span.caps{
			font-family: 'Ubuntu', sans-serif;
			text-transform: uppercase;
			font-style: normal;
			font-size: 1.1em;
			display: block;
			margin: 0 28px 0 -4px;
			padding: 0 0 2px 4px;}
			#nav ul li a:hover span.caps, #nav ul li.active a span.caps{
				background: url('../art/underline-bg.png') 0 100% repeat-x;}

#content{
	height: 502px;
	margin: 1px 0 0 253px;
	padding: 100px 44px 0 36px;
	font-size: 0.85em;
	line-height: 1.75em;
	width: 522px;
	overflow-y: auto;
	overflow-x: none;}
	.titles #content, .contact #content{
		padding-top: 64px;
		height: 538px;}
	.notable #content{
		padding-top: 40px;
		height: 562px;
	}
	
	h3{
		font-family: 'Ubuntu', sans-serif;
		font-size: 0.8em;
		font-weight: normal;
		margin: 0 0 2px; padding: 0;
		line-height: 1em;}
		h3 span{
			padding: 0 0 2px;
			background: url('../art/underline-bg.png') 0 100% repeat-x;}
	
	p{
		margin: 0 0 1em;}
	
	p.small{
		font-family: 'Ubuntu', sans-serif;
		font-size: 0.85em;
		line-height: 1.5em;}
	p.right{
		text-align: right;}
	
	p.about-first{
		margin-top: 23px;}
	img.right{
		float: right;}
	.neg86{
		margin: -86px 0 0;}
	
	ul.books{
		list-style-type: none;
		margin: 0; padding: 0;
		font-family: 'Ubuntu', sans-serif;
		font-weight: 400;
		font-size: 0.8em;
		line-height: 1.3em;
		color: #333;
		text-transform: uppercase;}
		ul.books li{
			float: left;
			margin: 0 28px 1em 0;}
			ul.books li.width123{
				width: 123px;}
			ul.books li.width153{
				width: 153px;}
			ul.books li.width188{
				width: 188px;}
		ul.books h3{
			text-transform: none;
			font-weight: normal;
			font-family: 'Arvo', serif;
			font-style: italic;
			font-size: 1.1em;
			line-height: 1.3em;
			margin: 0 0 0.5em;}
		ul.books img{
			border: 1px solid #b1ada1;
			margin: 0 0 9px;}

	form{
		width: 350px;
		position: relative;}
		form p{
			position: relative;
			float: left;
			margin: 0;}
	label{
		font-family: 'Ubuntu', sans-serif;
		text-transform: uppercase;
		font-size: 0.95em;
		float: left;
		height: 20px;
		margin: 0 0 5px;
		width: 90px;}
		label.error{
			display: block;
			color: #fff;
			margin: 0;
			height: auto;
			line-height: 1em;
			font-size: 0.75em;
			padding: 5px;
			width: 180px;
			background: #af2a00;
			left: 350px;
			top: 0;
			position: absolute;}
	input[type='text'],textarea{
		float: left;
		width: 248px;
		border: none;
		background: #dbcfb5;}
		input[type='text']{
			height: 20px;
			margin: 0 0 5px;}
		textarea{
			height: 70px;}
	input[type='submit']{
		clear: both;
		border: none;
		background: none;
		text-transform: uppercase;
		float: right;
		margin: 6px 0 0;
		font-size: 0.95em;
		cursor: pointer;}

#footer{
	text-align: right;
	color: #666;
	font-size: 0.75em;
	margin: 11px 0 0;}

	#footer .vert{
		padding: 0 1em;
	}

@media screen and (max-device-width: 767px) {
#wrapper{
	width: 100%;
	height: auto;
	padding: 0;
	background: #c9c2aa;}

#leftcol{
	padding: 35px 0 20px;
	float: none;
	width: 100%;
	height: auto;
	background: url('../art/stripes.png') 0 0 repeat;}
	
	h1#site-title, h2#site-title{
		width: 218px;
		margin: 0 auto 20px;
		padding: 0;}
	
	select.menuselect{
		display: block;
		margin: 0 auto;}
	#leftcol #nav{
		display: none;}

#content{
	float: left;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px;
	overflow: visible;
	background: #ece7d7;}
	.notable #content, .titles #content, .contact #content{
		padding-top: 64px;
		height: auto;}

	.neg86.right{
		display: block;
		float: none;
		margin: 0;}

	ul.books li{
		float: none;
		margin: 0 0 2em 0;}

	form{
		width: 100%;
		position: relative;}
		label{
			width: 90px;}
			label.error{
				padding: 5px;
				width: auto;
				position: relative;
				clear: both;
				float: none;
				left: 0;
				top: 0;
				margin: 0 0 10px;}
		input[type='text'],textarea{
			width: auto;}
			input[type='text']{
				height: 20px;
				margin: 0 0 5px;}
			textarea{
				height: 70px;}
		input[type='submit']{
			clear: both;
			border: none;
			background: none;
			text-transform: uppercase;
			float: right;
			margin: 6px 0 0;
			font-size: 0.95em;
			cursor: pointer;}

#footer{
	text-align: center;
	font-size: 0.5em;
	clear: both;
	padding: 10px 0;}

}