@import url(reset.css);

body { min-width: 900px; background-color: #070A0F; color: #fff; padding: 30px; font: 11px/14px "Lucida Grande", "Trebuchet MS", Arial, sans-serif; }
.wrap { position: relative; width: 900px; margin: 0 auto; }
a { outline: none; text-decoration: none; color: #537021; }
a:hover { text-decoration: underline; }
a img { border: none; }
#thumbs { width: 230px;  }
	#thumbs li { list-style: none; margin-bottom: 5px; }
		#thumbs li a.cat { display: block; height: 30px; width: 230px; text-indent: -9999px; }
		#thumbs li#weddings a.cat { background: url(../img/bg_weddings.png) left top no-repeat; }
			#thumbs li#weddings a.cat:hover, #thumbs li#weddings.selected a.cat { background-position: left bottom; }
		#thumbs li#engagements a.cat { background: url(../img/bg_engagements.png) left top no-repeat; }
			#thumbs li#engagements a.cat:hover, #thumbs li#engagements.selected a.cat { background-position: left bottom; }
		#thumbs li#portraiture a.cat { background: url(../img/bg_portraiture.png) left top no-repeat; }
			#thumbs li#portraiture a.cat:hover, #thumbs li#portraiture.selected a.cat { background-position: left bottom; }
		#thumbs li#travel a.cat { background: url(../img/bg_travel.png) left top no-repeat; }
			#thumbs li#travel a.cat:hover, #thumbs li#travel.selected a.cat { background-position: left bottom; }
		#thumbs div { overflow: hidden; padding: 0; }
			#thumbs div a { float: left; height: 50px; width: 50px; margin: 5px 0 5px 10px; }
			#thumbs div a.first { margin-left: 0; }	
				#thumbs div a img { border: 1px solid #545968;}
				#thumbs div a img:hover { border-color: #ccc; }
#controls { float: right; width: 230px; }
#frame { float: left; height: 480px; width: 650px; }
#photo { height: 480px; width: 650px; display: table-cell; vertical-align: middle;  }
	#photo.loading { background: url(../img/loading.gif) 309px 224px no-repeat;  }
	#photo img { display: block; margin: 0 auto; border: 10px solid #ddd; }
#head { position: fixed; top: 0; left: 0; height: 43px; width: 100%; z-index: 8888; background: url(../img/bg_head.png) left top repeat-x; }
	#head h1 a { display: block; background: url(../img/logo.png) 0 50% no-repeat; height: 43px; width: 270px; text-indent: -9999px;}
	#head #main-nav { position: absolute; overflow: hidden; right: 0; top: 14px; }
		#head #main-nav li { float: left; margin-left: 18px;  }
		#head #main-nav li.sep { border-right: 1px solid #252d34; padding-right: 18px; }
			#head #main-nav li a { font-family: "Myriad Pro", "Lucida Grande", "Trebuchet MS", Arial, sans-serif; letter-spacing: 2px; font-size: 1.2em; color: #fff; }
#portfolio { padding-top: 63px; overflow: hidden; margin-bottom: 60px; }
	#portfolio .missing-id { background: #fff8da url(../img/error.png) 10px 6px no-repeat; padding: 8px 8px 8px 33px;  border: 1px solid #f3cd35; color: #111; font-size: 1.2em; margin-bottom: 20px; }
#prev-next { overflow: hidden; margin-bottom: 20px; }
	#prev-next li { float: left; width: 110px; height: 110px; background: url(../img/btn_controls.png) left top no-repeat;  }
		#prev-next li a { display: block; width: 110px; height: 110px; text-indent: -9999px; }
			#prev-next li#prev a { background: url(../img/btn_controls.png) -110px 0 no-repeat; }
			#prev-next li#prev a:hover { background-position: -110px -110px; }
			#prev-next li#next a { background: url(../img/btn_controls.png) -220px 0 no-repeat; }
			#prev-next li#next a:hover { background-position: -220px -110px; }
	#prev-next li + li { margin-left: 10px; }
#nav-overlay { position: fixed; height: 10px; width: 100%; top: 24px; left: 0; z-index: 9999; }
	#nav-overlay #about { height: 315px; width: 560px; position: absolute; top: 0; right: 9px;  background: url(../img/bg_about.png) left top no-repeat; }
		#about #me { width: 268px; float: right; margin-right: 57px; margin-top: 100px; color: #333; }
		#about #me p { margin-bottom: 1.4em; text-align: justify; }
	#nav-overlay #proofs { height: 150px; width: 330px; position: absolute; top: 0; right: -80px; background: url(../img/bg_proof.png) left top no-repeat; }
		#nav-overlay #proofs input { margin-top: 52px; width:215px; margin-left: 50px; font-size: 1.4em; padding: 4px 6px; color: #666;  }
#get-in-touch { border-top: 1px solid #151a2a; padding-top: 10px; overflow: hidden; padding-bottom: 10px; margin-bottom: 30px; }
	#get-in-touch h2 { background: url(../img/bg_getintouch.png) left top no-repeat; height: 26px; width: 216px; text-indent: -9999px; }
	#get-in-touch form { padding-top: 30px;  }
	#get-in-touch label { font-size: 1.1em; display: block; color: #486C8c; padding: 4px 0; }
		#get-in-touch label span { color: #b7f055; padding-left: 2px; }
	#get-in-touch input[type="text"] { margin-right: 20px; font-size: 1.2em; width: 225px; padding: 6px 8px; margin-bottom: 6px; border: 0; border: 1px solid #151a2a; background-color: #151a2a; color: #fff;  }
	#get-in-touch input.error, #get-in-touch textarea.error { border: 1px solid #d00b0b; }
	#get-in-touch input[type="submit"] { float: right; }
	#get-in-touch textarea { display: block; padding: 6px 8px;  color: #fff; border: 0; width: 398px; border: 1px solid #151a2a;background-color: #151a2a; margin-bottom: 10px;  }
	#get-in-touch .left { float: left;   }
	#get-in-touch .desc { width: 200px; margin-right: 20px;color: #777;}
	#get-in-touch .desc p { margin-bottom: 10px; }
#flash { color: #b7f005; margin-top: 40px; font-size: 1.1em; text-align: center; margin-bottom: -20px; }
#flash.missing { color: #e80808;}