@charset "utf-8";

/* CSS Document for Lawrence Watson*/

@import url('reset.css');

html { height: 100% }
body { background: #000; color: #FFF; height: 100%; font-family: Georgia }

input,
textarea { background-color: #000; border: 1px solid #333; padding: 4px; font-family: Arial; font-size: 12px; color: #FFF; margin-bottom: 10px; display: block; width: 300px}
textarea { height: 100px }
input.error,
textarea.error { color: #68BBDE }
.submit { cursor: pointer; float: right; width: auto; text-align: center; font-family: Georgia; font-family: 14px; text-transform: uppercase; font-style: italic; padding: 4px 10px }
.submit:hover,
.availability #enquireBtn:hover { background: #222; border-color: #444; color: #68BBDE }
	
#alignment { float: left; height: 50%; width: 1px; margin-bottom: -300px }

#container { position: relative; clear: both; margin: 0 auto; width: 950px; height: 600px; }

#by_bozboz { position: absolute; bottom: 10px; right: 8px; color: #AAA; padding-top: 26px; text-indent: -999px; overflow: hidden; background: url('../images/web/site_by_bozboz_dark.jpg'); width: 84px; height: 0 }

#menu { border-top: 1px solid #FFF; font-family: 'Rockwell'; width: 950px; padding: 1px 0; height: 35px; position: absolute; bottom: 0 }
	#menu li { float: left; overflow: hidden; line-height: 20px; text-transform: lowercase; font-style: italic; font-size: 14px; height: 21px }
		#menu li a { color: #FFF; text-decoration: none; margin: 0 4px }
		#menu li a:hover { color: #666 }
		#menu li a.on { color: #68BBDE }
	#menu #homeLink { margin-left: -2px }
	#menu #logo { overflow: hidden; text-indent: 1000px; margin-top: 5px; float: right; width: 233px; background: url('../images/web/lawrence-watson.png'); }
		#menu #logo a { display: block }
	
.text-box { position: absolute; top: 50%; right: 50px }
	.text-box h1 { font-size: 26px; margin-bottom: 20px; font-family: 'Rockwell' }
	.text-box p { font-family: Georgia; font-size: 13px; line-height: 1.6em }

#home .text-box { width: 230px; height: 300px; position: absolute; top: 50%; margin-top: -150px; right: 90px }
	#home .text-box h1 { font-size: 26px; margin-bottom: 20px }
	#home .text-box p { line-height: 1.7em; font-size: 13px }
	
#bio img { position: absolute; top: 50%; margin-top: -220px; left: 20px }
#bio .text-box { width: 445px; right: 50px; height: 400px; margin-top: -220px }
	#bio .text-box p { font-size: 12px; line-height: 2}

#contact h1 { margin-bottom: 10px }
#contact img { margin-top: 50px; margin-left: 40px }
#contact .text-box { float: right; width: 300px; height: 400px; right: 130px; margin-top: -220px }
#contact form { margin-top: 20px }
#contact p { margin-bottom: 15px }

#portfolio ul { margin-right: -10px }
	#portfolio li { float: left; margin-right: 10px; height: 276px }
		#portfolio li a { display: block; color: #FFF; text-decoration: none; font-style: italic; font-size: 13px }
			#portfolio li a img { width: 230px; height: 240px; display: block; margin-bottom: 9px }
			#portfolio li a strong { padding-left: 3px }
		#portfolio li a:hover { color: #DDD }
			
	#portfolio .return { font-size: 13px; position: absolute; top: 3px; right: 3px; color: #FFF; text-decoration: none; font-style: italic }
		#portfolio .return:hover { color: #68BBDE }
	#portfolio h1 { position: absolute; bottom: 40px; left: 2px; line-height: 60px; font-style: italic; font-size: 13px }
	#portfolio .nav { position: absolute; right: 0; text-align: right; bottom: 45px; font-size: 12px }
		#portfolio .nav span { display: block }
		#portfolio .placeholder { width: 760px; height: 500px; display: table-cell; vertical-align: middle }
			.placeholder a { color: #FFF; }
		#portfolio img { color: #000; max-width: 780px; max-height: 500px; margin: auto; display: block }
		#portfolio .nav a { color: #FFF; padding-bottom: 6px; display: inline-block; font-weight: bold; padding-left: 4px; font-size: 14px; text-decoration: none }
		#portfolio .nav a:hover { color: #68BBDE }
		#portfolio .nav a.inactive { color: #555; cursor: default }
		#portfolio .availability { width: 170px; font-style: italic; top: 380px; position: absolute; right: 0 }
			.availability h3 { color: #FFF; margin-bottom: 10px } 
				.availability h3 span { color: #68BBDE }
			.availability p { font-size: 11px; line-height: 1.5em; color: #FFF }
			.availability #enquireBtn { border: 1px solid #333; padding: 6px; float: right; margin-top: 20px; color: #FFF; text-decoration: none; text-transform: uppercase; font-size: 12px }
	
	#enquiryForm { background: #000; padding: 30px 40px; display: none; border: 6px solid #FFF; position: absolute; top: 50%; margin-top: -240px; left: 50%; margin-left: -300px; width: 320px; height: 300px }
		#enquiryForm form { float: left }
		#enquiryForm p { line-height: 1.5; margin-bottom: 20px; font-size: 11px;  }
		#enquiryForm .close { position: absolute; padding: 5px; color: #FFF; text-decoration: none; top: 0; right: 0; font-weight: bold; font-family: Arial }
	
#shows { padding: 0 10px 15px }
	#shows .listings { padding-top: 15px; width: 360px; margin-right: 30px; float: left }
		#shows .listings li { clear: left; margin-bottom: 10px }
			#shows .listings li a { overflow: hidden; display: block; text-decoration: none; color: #BBB; font-size: 12px; line-height: 1.5em }
			#shows .listings li strong { color: #DDD; font-size: 16px; font-family: 'Rockwell'; display: block; margin-bottom: 5px }
			#shows .listings img { float: left; padding-right: 20px; width: 150px }
	#shows .featured { height: 525px; padding-top: 15px; float: left; width: 506px; padding-left: 33px; border-left: 1px solid #333 }
		.featured img { float: right; margin-left: 20px; margin-top: 5px; margin-bottom: 20px }
		.featured h2 { font-family: Rockwell; font-size: 20px; line-height: 1.2em; margin-bottom: 0.5em }
		.featured p { font-size: 13px; line-height: 1.5em; margin-bottom: 1em }
		.featured p.date { color: #BBB }