/*
 * CSS for b4k4.co.uk/photography
 * Hand-baked by Phil Moore
 */

body { 
	padding: 0; margin: 0;	height: 100%;
	background: #71716a url('/images/photo-page-bg.gif') repeat-y top left;
	font-family: "Tahoma", "Lucida Grande", "Lucida Sans Unicode", "Arial", "Helvetica", sans-serif;
	font-size: 0.9em; color: #eee;
}

/* GENERAL ELEMENTS */
p { line-height: 1.5em; margin: 0.3em 0 0.6em; padding: 0; font-size: 1em; }
li { line-height: 1.5em; font-size: 1em; }
small { font-size: 0.75em; }
h3 { font-size: 1.6em; font-weight: normal; text-transform: uppercase; color: #00d0ff; border-bottom: 1px solid #c3c2c2; width: 610px; padding: 0; margin: 1em 0 .6em; }
h4 { font-size: 1.4em; font-weight: normal; /*color: #333232; border-bottom: 1px solid #d7efed; width: 610px;*/ padding: 0; margin: 1.4em 0 .5em; }

a:link, a:visited { color: #00d0ff; text-decoration: none; }
a:hover, a:active { color: #000; background-color: #00d0ff; text-decoration: none; }

a.nostyle:link, a.nostyle:visited, a.nostyle:hover, a.nostyle:active, a.nostyle img { padding: 0; border: 0; background: none; }

/* Subtlties */
a.subtle:link, a.subtle:visited { color: #000; background-color: #fff; }
a.subtle:hover, a.subtle:active { color: #fff; background-color: #000; }
p.intro { font-size: 1.1em; font-weight: normal; }
p.intro em { font-weight: bold; font-style: normal; }


/* LEFT BAR (heading) */
h1#banner {
	position: absolute;
	top: 0; left: 38px;
	width: 161px; height: 490px;
	padding: 0; margin: 0;
	z-index: 10;
}
h1#banner a {
	display: block;
	width: 161px; height: 490px;
	background: url('/images/photo-b4k4-banner.gif') no-repeat left top;
	text-indent: -5000px;
	overflow: hidden;
}

/* NAV */
#nav { position: absolute; top: 0; padding: 0; margin: 0; font-size: 0.9em; right: 45px; text-align: right; z-index: 10; height: 1em; color: #424040; }
#nav a.on { font-weight: bold; }
#nav a { color: #696969; padding: 1px 2px; vertical-align: bottom; background-color: transparent; }
#nav a.over { color: #00d0ff; padding: 1px 2px; }
#nav_info { font-size: 0.9em; position: absolute; padding: 0; top: 1.45em; right: 45px; display: block; background: transparent; text-align: center; color: #aaa; border-top: 1px solid #aaa; }


/* CONTENT */
#content { padding: 77px 45px 0px 245px; margin: 0; background: transparent url('/images/black-cross.gif') top right no-repeat; width: 665px; position: relative; }

/* MAIN PAGE HEADINGS */
#superfluous { position: absolute; width: 665px; }
#header { margin: 0; padding: 0 0 7px; background: #161515 url('/images/photo-h2-bottom.gif') bottom no-repeat; width: 665px; overflow: hidden; }
#header h2#header_box {
	width: 665px; height: 50px; padding: 0; margin: 0; background: url('/images/photography-h2.gif') no-repeat top left; overflow: hidden;
}
#header.over h2#header_box { background-position: 0 -50px; }
#header h2#header_box a { display: block; width: 240px; height: 57px; text-indent: -5000px; overflow: hidden; background: transparent; padding: 0; margin: 0; }
#header_nav { 
	padding: 0 13px; margin: 0; font-size: 0.8em; color: #424040; text-transform: lowercase;
	background: transparent url('/images/photography-h2-bg.gif') repeat-y; ; display: block; overflow: hidden;
}
#header_nav a:link, #header_nav a:visited { color: #696969; background: transparent; }
#header_nav a:hover, #header_nav a:active { color: #00d0ff; background: transparent; }
#header h3 { position: absolute; top: 13px; left: 248px; margin: 0; padding: 0; height: 33px; border: 0; width: 350px; }
#header h3 a { display: block; background: transparent no-repeat top left; height: 33px; text-indent: -5000px; overflow: hidden; width: 100%; }

#content-display { padding: 100px 0px 30px; }


/* THUMBNAIL DISPLAY */
#thumbs { margin: 10px 0; padding: 10px 0;  }
#thumbs p { clear: both; color: #666; font-size: .8em; padding-top: 10px; }
#thumbs a.thumb { background: transparent; margin: 0 12px 10px 0; display: inline; float: left; }
* html #thumbs a.thumb { margin-bottom: 4px; }
#thumbs a.thumb img { border: 1px solid #fff; }
#set-thumbs .cat { position: relative; display: block; width: 315px; height: 220px; float: left; margin-bottom: 40px; background: transparent; }
#set-thumbs .cat img { border: 0; }
.cat.odd { margin-right: 30px; }
.cat-arrow { width: 25px; height: 24px; background: url('/images/set-arrow.gif') no-repeat; position: absolute; top: 2px; right: 1px; display: none; } 
.over .cat-arrow { display: block; }

/* MAIN IMAGE & CAPTION DISPLAY */
/* the 'fancy' classes are added by the JS if using the Moo stuff */
#image { margin: 0 auto; text-align: left; position: relative; clear: both; }
#image img { border: 3px solid #fff; }
.fancy #caption { position: absolute; width: 100%; top: 0px; left: 0px; margin: 3px 3px 0; text-align: left; background: #000; font-size: 0.8em; padding: 0; overflow: hidden; }
#caption h4 { font-size: 1em; font-weight: bold; padding: 2px 5px; margin: 0; opacity: 1; z-index: 10; }
#caption p { font-size: .9em; padding: 2px 5px 3px; margin: 0; }
#caption .use-photo { float: right; padding: 4px; }
.fancy #caption .use-photo a { color: #fff; display: block; background: url('/images/plus-button.gif') no-repeat top right; width: 9px; height: 9px; text-indent: -1000px; }
#prevnext { width: 100%; bottom: 0px; left: 0px; margin: 0 3px; }
.fancy #prevnext { position: absolute; }
#prev, #next { bottom: 3px; background: #fff; width: 50px; height: 47px; }
.fancy #prev, .fancy #next { position: absolute; }
#prev { left: 0; }
#next { right: 0; }
#prev a, #next a { display: block; width: 50px; height: 47px; text-indent: -1000px; overflow: hidden; }
#prev a { background: url('/images/prev-arrow.gif') no-repeat bottom left; }
#next a { background: url('/images/next-arrow.gif') no-repeat bottom right; }

p#footer { clear: both; padding: 3px 0 5px; margin: 5px 50px 10px; color: #666; font-size: 0.75em; text-align: center; border-top: 1px solid #333; }