/* ------------------------------ @ Resets LITE ------------------------------- 

 	Resets LITE based on Eric Myers "reset-reloaded" -- http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html,body,h1,h2,h3,h4,h5,h6,p,blockquote,ul,ol,li,a,img,pre,abbr,acronym,fieldset,form,label,legend,table{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0}:focus{outline:0}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:400}









/* -------------------------------- @ Elements --------------------------------- */

html {overflow-y: scroll;}
.none {display: none;}
.clear {clear: both;}
.super {clear: both; line-height: 0; font-size: 0;}
hr {display: none;}
img {line-height: 0; font-size: 0;}
.left {float: left; display: inline;}
.right {float: right; display: inline;}

strong {font-weight: bold;}
em {font-style: italic;}

abbr {
	border-bottom: 1px dotted #ababab;
	letter-spacing: .07em;
	}

	/* Image replacement */
.imgr {
	text-indent: -9999px;
	text-align: left;
	line-height: 5px;
	}

.page-break {display:none;} /* see print_x.css */


	/* Bottom Border (underline) link */
	/* Only works inside p, ul & ol tags unless forced */
.ulink p a, 
.ulink ul a, 
.ulink ol a,
a.ulink,
.force_ulink a {
	color: #333;
	text-decoration: none;
	border-bottom:1px solid #00B0FD;
	}
.ulink p a:hover, 
.ulink ul a:hover, 
.ulink ol a:hover,
a.ulink:hover,
.force_ulink a:hover {
	text-decoration: none;
	border-bottom:1px solid #00B0FD;
	color: #00B0FD;
	}
















/* ------------------------------------------------	*/
/*		START										*/
/* ------------------------------------------------	*/


* html {background-image: url(image.jpg); /* IE6 fixed position stutter fix */} 

body {
	background: #000;
	color: #fff;
	}





/* ------------------------------------------------	*/
/*		Typography									*/
/* ------------------------------------------------	*/

body, .font-body {
	font-size: 14px;
	line-height: 18px;
	font-family: Baskerville, Garamond, Times, "Times New Roman", serif;
	color: #999;
	}

h1, h2, h3, h4, h5, h6, .font-h {
	font-size: 18px;
	line-height: 22px;
	/* letter-spacing: -0.01em; */
	color: #ccc;
	margin-bottom: 10px;
	/* margin-top: 20px; */ padding-top: 10px;
	}

p {
	margin-bottom: 10px;/*  padding-bottom: 10px; */
	}

.small {
	font-size: 14px;
	line-height: 16px;
	color: #666;
	}

a {color:#ccc;}
a:hover {color:#fff;}


ul li, ol li {
	margin-left: 20px;
	}


.entry h2 {
	font-style: italic;
	margin-top: 20px;
	border-top: 1px solid #333;
	padding-top: 20px;
	}
.entry h2:first-child {
	border-top: none;
	padding-top: 0;
	}
* html .entry h2 {border-top: none;}

/* -------------------------------- @ HEADER --------------------------------- */


#title {
	position: relative;
	z-index: 200;
	width: auto;
	height: 0px;
	font-size: 0;
	line-height: 0;
	}
#title div {
	position: absolute;
	width: 0px;
	height: 0px;
	left: 50%;
	top:0;
	}
#title h1 {
	width: 240px;
	height: 192px;
	background: #ccc;
	position: absolute;
	left: -120px;
	top:0;
	margin: 0; padding: 0;
	background:url(../images/top_banner.png) left bottom;
	font-size: 12px;
	line-height: 14px;
	overflow: hidden;
	}
#title h1 img {margin: 30px 0 0 9px;}
#title h1 span {display: none;}

#title h1.short {height: 154px;}
#title h1.short img {margin-top: -11px;}

#title h1 a {display: block;}


#header {
	z-index: 150;
	width: 100%;
	position:fixed;
	height: 48px;
	text-align:center;
	background: #000;
	border-bottom: 1px solid #363636;
	}
* html #header { 
	position: absolute; /* position fixed for IE6 */ 
	top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
	} 

	#header .shadow {
		position: absolute;
		width: 100%;
		height: 8px;
		bottom: -9px;
		left: 0; right: 0;
		background:url(../images/nav_shadow.png) repeat-x;
		}
	* html #header .shadow {display: none;}

	
	#header ul {
		list-style: 0;
		}
		
	#header li {
		display: inline;
		float: left;
		}
	
	#header a {background-image: url(../images/main_nav.jpg);}
	#header li a {
		position: absolute;
		z-index: 100;
		top:-1px;
		height: 50px;
		width: 85px;
		display: block;
		/* overflow: hidden; */
		text-indent: -9999px;
		text-decoration: none !important;
		}
	
	#header .li-home a {background-position: 0 0; left: 10px;} 			
	#header .li-home a:hover, #header .li-home a.selected {background-position: 0 -50px; z-index:101; }
	
	#header .li-work a {background-position: -85px 0; left: 178px;} 		
	#header .li-work a:hover, #header .li-work a.selected {background-position: -85px -50px; z-index:101;}
	
	#header .li-personal a {background-position: -170px 0; left: 94px}	
	#header .li-personal a:hover, #header .li-personal a.selected {background-position: -170px -50px; z-index:101;}
		
	#header .li-about a {background-position: -255px 0; right: 178px;}	
	#header .li-about a:hover, #header .li-about a.selected {background-position: -255px -50px; z-index:101;}
	
	#header .li-contact a {background-position: -340px 0; right: 94px;}	
	#header .li-contact a:hover, #header .li-contact a.selected {background-position: -340px -50px; z-index:101;}
	
	#header .li-rope a {background-position: -425px  0; right: 10px;}	
	#header .li-rope a:hover, #header .li-rope a.selected {background-position: -425px  -50px; z-index:101;}


	a#top {
		width: 51px;
		height: 24px;
		margin: 14px auto 0 auto;
		display: block;
		text-indent: -999px;
		overflow: hidden;
		background-position: right -30px;
		}
	a#top:hover {
		background-position: right -55px;
		}



	#header li a span {
		display: block;
		background: url(../images/nav_hover2.png) no-repeat;
		text-align: center;
		width: 78px;
		height: 42px;
		font-size: 14px;
		line-height: 42px;
		overflow: hidden;
		font-family: Garamond, Baskerville, "Times New Roman", Times, serif;
		font-style: italic;
		position: absolute;
		top: 49px;
		left: 3px;
		color: #fff;
		text-indent: 0;
		}
	* html #header li a span {background: url(../images/nav_hover2.gif) no-repeat;}
	*+html #header li a span {background: url(../images/nav_hover2.gif) no-repeat;}


/* -------------------------------- @ FOOTER --------------------------------- */

#footer {background-image: url(../images/footer_bg.jpg);}
#footer {
	background-repeat:no-repeat;
	padding-top: 13px;
	padding-bottom: 20px;
	min-height: 80px;
	font-size: 11px;
	line-height: 13px;
	}
#footer .left {
	color: #999;
	}
#footer .right {
	color: #555;
	text-align: right;
	}
#footer .right a {color: #999; text-decoration: underline;}
#footer .right a:hover {color: #ccc; text-decoration: underline;}

a#footer_contact {
	background-image: url(../images/contact_wedge.jpg);
	background-position: 0 0;
	width: 215px;
	height: 40px;
	display: block;
	margin: 0 auto;
	text-indent: -9999px;
	margin-bottom: 10px;
	}
a#footer_contact:hover {
	background-position: -220px 0;
	}



/* -------------------------------- @ PAGE --------------------------------- */

#spacer {height: 160px;}

#grad {
	background:url(../images/grad_background.png) 0 0 no-repeat; 
	padding: 20px 0 15px 0;
	}
* html #grad {height: 1%;}
*+html #grad {height: 1%; }

#page {
	width: 770px;
	margin: 0 auto;
	position: relative;
	}




/* -------------------------------- @ ARCHIVE --------------------------------- */

.archive #grad {padding-left: 45px;}

a.preview {
	border: 1px solid #5a5a5a;
	text-decoration: none;
	margin: 15px;
	float: left;
	position: relative;
	width: 138px;
	height: 138px;
	}

a.preview span {display: block;}

a.preview img {padding: 2px; line-height: 0; font-size: 0;}

	a.preview .h3 {
		display: block;
		font-weight: normal;
		text-align: center;
		font-size:15px;
		line-height:18px;
		font-style: italic;
		color: #ccc;
		position: absolute;
		left: 0;
		bottom: 0;
		margin: 0;
		border-top: 1px solid #5a5a5a;
		padding: 10px 5px;
		width: 128px;
		background: #171717;
		cursor: pointer;
		}

	.js a.preview .h3 {
		left: -1px;
		top: -1px;
		bottom: auto;
		padding: 2px;
		width: 134px;
		height: 134px;
		background: #0d0d0d;
		border:1px dashed #333333;
		}
		
	.js a.preview .bg {
		background: #171717;
		display: block;
		width: 134px;
		height: 134px;
		/* padding: 0 5px 0 5px; */
		cursor: pointer;
		}
	.js .bg .txt {
		padding: 0 5px;
		display: block;
		position: relative;
		cursor: pointer;
		}

a.preview:hover {
	border: 1px solid #999;
	text-decoration: none;
	}
.js a.preview:hover {border: 1px solid #5a5a5a;}
	

#sub_cats {
	position: absolute;
	top:-30px;
	left: 10px;
	font-style: italic;
	color: #333;
	}

#sub_cats a {
	color: #666;
	text-decoration: none;
	}
#sub_cats a:hover {
	color: #999;
	text-decoration: underline;
	}
#sub_cats a.selected {
	color: #ccc; 
	font-weight: bold;
	text-decoration: underline;
	}






/* -------------------------------- @ SINGLE (PERSONAL) --------------------------------- */

#copy_column {
	float:left;
	display: inline;
	width: 150px;
	}

.swirly {
	height: 32px;
	width: auto;
	background: url(../images/swirly.gif) center bottom no-repeat;
	margin: 35px 0 0 0;
	position: relative;
	}

#copy_column h2,
#copy_column h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border: none;
	}

#copy_column h2 span, h2.title span {border-bottom: 2px dotted #333;}

.single #grad {padding-top: 38px;}
.single .entry {background: url(../images/grey_got.gif) 183px top repeat-y;}
* html .single .entry {height: 1%;}
*+html .single .entry {height: 1%;}

p.date {font-style: italic; color: #666;}

#images {
	float: right;
	display: inline;
	width: 586px;
	/* overflow-x: hidden; */
	text-align: right;
	position: relative;
	top: -33px;
	}

* html #copy_column h2 {padding-top: 30px;}
*+html #copy_column h2 {padding-top: 30px;} 
*+html #copy_column h2:first-child {padding-top: 30px;}
* html .single #grad {padding-top: 5px;}
*+html .single #grad {padding-top: 5px;}
* html #images {top:auto;}
*+html #images {top:auto;}

#images img {
	padding: 6px;
	border: 1px solid #565656;
	}
#images img:last-child {margin-bottom: -33px;}
	
#images p {
	font-style: italic;
	font-size: 16px;
	line-height: 18px;
	padding: 10px 0 5px 0;
	margin: 0;
	color: #999;
	}




#post_nav {
	clear: both;
	position: relative;
	height: 23px;
	margin-top: 15px;
	}
.to_newer a, .to_older a {
	background-image: url(../images/post_nav_sprite.jpg);
	display: block;
	width: 85px;
	position: absolute;
	top:0;
	height: 23px;
	overflow: hidden;
	text-indent: -9999px;
	padding: 0; margin: 0;
	}

.to_newer a {
	background-position: left 0;
	left: 0;
	}
.to_newer a:hover {background-position: left -23px;}

.to_older a {
	background-position: right 0;
	right: 0;
	}
.to_older a:hover {background-position: right -23px;}





/* -------------------------------- @ SINGLE (WORK) --------------------------------- */

.work #copy_column {
	float:right;
	width: 189px;
	}
.work #copy_column h2 {font-style: normal;}

.single .work .entry {background: none;}
.single .work #grad {padding-top: 20px;}

.work #images {
	float: left;
	width: 556px;
	top: auto;
	}

#gallery img, #gallery img:last-child {margin: 0 0 15px 0;}

#thumbnails {margin-bottom: 15px; display: none;}

* html .work #copy_column h2 {padding-top: 0px;}
*+html .work #copy_column h2 {padding-top: 0px;}


/* ----@ GALLERY ---- */

/* .JS GALLERY */
.js #thumbnails {display: block;}

#thumbnails img {
	border: 1px solid #737373;
	margin: 0 5px 5px 0; 
	cursor: pointer;
	}
#thumbnails img.fourth {margin-right: 0;}

/* #thumbnails img.current_thumb {border: 1px solid #fff;} */

.js #gallery {
	position: relative;
	width: 554px;
	height: 376px;
	overflow: hidden;
	border: 1px solid #737373;
	}

.js #gallery img,
#gallery #loading {
	border: none;
	padding: 0; margin: 0;
	position: absolute;
	top:6px;
	left:6px;
	}

#prev_wrap, #next_wrap {
	/* the doors */
	z-index: 101;
	height: 376px;
	width: 55px;
	position: absolute;
	top:0;
	background-image: url(../images/doors.png);
	background-repeat: no-repeat;
	}
	* html #prev_wrap {background-image: url(../images/doors.gif);}
	* html #next_wrap {background-image: url(../images/doors.gif);}
	
#prev_wrap {
	/* left: 0; */
	background-position: -55px 0;
	}
#next_wrap {
	/* right: 0; */
	background-position: 0px 0;
	} 

#prev, #next, #prev_btn, #next_btn {
	/* the buttons */
	z-index: 100;
	width: 86px;
	height: 39px;
	position: absolute;
	top: 169px;
	}
#prev, #next {background-image: url(../images/gallery_nav.png);}

* html #prev {background-image: url(../images/gallery_nav.gif);}
* html #next {background-image: url(../images/gallery_nav.gif);}

#prev {
	/* left: -86px; */
	background-position: left top;
	}
#next {
	/* right: -86px; */
	background-position: right top;
	}

#prev_btn, #next_btn {
	background: none;
	cursor: pointer;
	z-index: 102; /* top */
	}

#gallery #loading {
	background: #333 url(../images/ajax-loader-flower.gif) center center no-repeat;
	width: 542px;
	height: 364px;
	}





.js .lamp-post {
	width: 189px;
	}




/* ---------- @ SEO ----------- */



.js .SEO {
	width: 189px;
	padding-left: 581px;
	position: relative;
	min-height: 380px;
	}
	* html .SEO {height: 380px !important;}
	
.SEO h2 {
	border: none;
	margin-top: 0px;
	padding-top: 0px;
	}
.SEO h2 span {border-bottom: 2px dotted #333;}

.js .SEO #gallery {
	position: absolute;
	top: 0;
	left: 0;
	}


.em {font-style: inherit;}








/* ABOUT */

.page-template-template_about-php h2.title {
	float:left;
	width:128px;
	display: inline;
	margin-right: 25px;
	}
.page-template-template_about-php .entry {background: url(../images/grey_got.gif) 128px top repeat-y;}

.page-template-template_about-php .about_column {
	float: left;
	width: 570px;
	}

#about_footer, 
a#cv_button,
#mini_footer {background-image: url(../images/cv-button.gif);}

#about_footer {
	height: 40px;
	background-position: center top;
	background-repeat: no-repeat;
	}

#mini_footer {
	background-position: right -54px;
	background-repeat: no-repeat;
	margin-top:25px;
	min-height:30px;
	padding-top:30px;
	position: relative;
	}
* html #mini_footer {height:30px;}
#mini_footer p {margin-bottom: 0;}

a#cv_button {
	background-position: 0 0;
	display: block;
	text-indent: -9999px;
	height: 27px;
	width: 132px;
	position: absolute;
	top:34px;
	right:35px;
	}
a#cv_button:hover {
	background-position: 0 -27px;
	}













/* -------------------------------- @ HOME --------------------------------- */
/* serve from separate initial stylesheet? */

#strapline {
	background: url(../images/strapline.png);
	text-indent: -9999px;
	width: 746px;
	height: 35px;
	margin: 35px auto 0;
	padding: 0;
	}

h1#big_buttons {
	margin-top: 35px;
	/* margin-bottom: 35px; */
	background: url(../images/grey_got.gif) center center repeat-y;
	line-height: 0;
	font-size: 0;
	}

* html h1#big_buttons {height: 1%;}
*+html h1#big_buttons {height: 1%;}

a.home_button {
	display: inline;
	width: 196px;
	height: 195px;
	position: relative;
	float: left;
	line-height: 10px;
	font-size: 10px;
	}
a#personal {margin-left: 110px;}
a#work {float: right; margin-right: 110px;}

a.home_button img {
	position: relative;
	z-index: 97;
	}

a.home_button .bg_ring {
	background: url(../images/ring.gif) 0 0 no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	height: 195px;
	width: 196px; 
	}
a.home_button span,
a.home_button img {
	display: block;
	cursor: pointer;
	}

a.home_button .banner {
	position: absolute;
	top:90px;
	left: -18px;
	z-index: 98;
	height: 97px;
	width: 232px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	}

/*
a#work .banner {background-image: url(../images/banner_work.png); background-position: 0 -97px;}
a#personal .banner {background-image: url(../images/banner_personal.png); background-position: 0 -97px;}

* html a#work .banner {background-image: url(../images/banner_work.gif);}
* html a#personal .banner {background-image: url(../images/banner_personal.gif);}
*+html a#work .banner {background-image: url(../images/banner_work.gif);}
*+html a#personal .banner {background-image: url(../images/banner_personal.gif);}
*/


a#work .banner {background-image: url(../images/newbanner_work.png); background-position: 0 -97px;}
a#personal .banner {background-image: url(../images/newbanner_personal.png); background-position: 0 -97px;}

* html a#work .banner {background-image: url(../images/newbanner_work.gif);}
* html a#personal .banner {background-image: url(../images/newbanner_personal.gif);}
*+html a#work .banner {background-image: url(../images/newbanner_work.gif);}
*+html a#personal .banner {background-image: url(../images/newbanner_personal.gif);}


a#work:hover .banner,
a#personal:hover .banner,
/* JS */
.js a#work .banner,
.js a#personal .banner {background-position: center center;}







/* CONTACT */

.js p.no-spam {visibility: hidden; overflow: hidden; height: 0;}

.page-template-template_contact-php a#footer_contact {display: none;}

.contact_column {
	background: url(../images/contact_mail.gif) center 20px no-repeat;
	min-height: 331px;
	margin: 0 auto;
	}

#contact_footer {
	background: url(../images/contact_phone.gif) no-repeat;
	height: 16px;
	margin: 15px auto 0 auto;
	width: 747px;
	}

* html .contact_column {height: 331px;}


.wpcf7 .left {
	width: 340px;
	}
	
.wpcf7 .right {
	width: 340px;
	text-align: right;
	}

.contact_column h2.title {/* margin-bottom:30px; */}

.contact_column #mini_footer {
	background: none;
	padding: 0;
	text-align: right;
	margin:0;
	position:relative;
	top:-25px;
	}




input[type=text], textarea {
	border: 1px solid #999;
	background: #333;
	padding: 5px;
	color: #ccc;
	}

input:focus, textarea:focus{
	border: 1px solid #fff;
}


