/* everything except body#bg image in this page refers to script-written html - keep tied-in with photo_format.js*/
/* beware - 'screen-bite' is in shakuhachi.css too*/

body#photos {background:URL(img/F/blue_white_waves.jpg)}

div.screen-bite {
	position:relative;z-index:4;display:none;float:left;margin-top:0;padding-top:4px} 

div.ob_replacer {height:47em} /* redefined from index.css to accommodate photo grid */

/*each of 27+ DIVs containing a thumb and associated text*/
.phd, .phdHiLi {
	position:absolute;top:6px;left:0px;
	border:solid 1px #dcdada;border-top:none;border-left:none;
	width:246px;max-width:246px;height:211px;max-height:211px;
	margin-left:6px;margin-top:6px;text-align:center;z-index:5}
.phd {
	background:#eee}
.phdHiLi {
	background:#eceae4;border-color:#eceae4;z-index:6} /*js switch on mouseover*/

/*pre rather than p as p wraps to unecessarily short lines, all tested mac browsers*/
.phd pre, .phdHiLi pre {
	position:relative;margin:0;padding:0;color:#cccaca;line-height:1em;font-size:0.84em;width:auto;visibility:hidden} /* <-- AWAITING COMMENTS --> */
.phd pre {top:0.4em}
.phdHiLi pre {top:-1.6em}
.phd pre.ab {top:1.6em}
.phdHiLi pre.ab {top:0}
a.iPw, a.iPt, a.iPq {
	display:block;margin:0;padding:0;line-height:0.8em;font-size:0.84em;text-decoration:none;color:#bcbaba; text-align:center}
a.iPw {margin-top:24px}
a.iPt {margin-top:0}
a.iPq {margin-top:14px}
.phdHiLi a:hover, .phdHiLi a:active {
	color:#8c8a8a;position:relative; top:-23px}

/*WIDE THUMBS*/
img.iPw {
	border:none;margin:2px;width:214px;height:135px;vertical-align:middle}
a:hover img.iPw, a:active img.iPw {
	border:solid 4px #eceae4;margin:0;padding:0;width:285px;height:180px;position:relative;left:-17px;z-index:6}
/*top reset in .phdHiLi a: to keep text locked but IE5mac currently upsets page using this rule*/

/*TALL THUMBS*/
img.iPt {
	border:none;margin-left:47px;margin-bottom:0;width:150px;height:210px;float:left}
a:hover img.iPt, a:active img.iPt {
	border:solid 4px #eceae4;margin:0;margin-left:22px;padding:0;width:200px;height:280px;position:relative;left:0;top:-16px;z-index:6} 

/*SQUARE THUMBS*/
img.iPq {
	border:none;margin-left:40px;margin-bottom:2px;width:180px;height:180px;float:left}
a:hover img.iPq, a:active img.iPq {
	border:solid 4px #eceae4;margin:0;padding:0;width:280px;height:280px;position:relative;left:-17px;top:-30px;z-index:6} 

/*ENLARGEMENT - reset all to 0*/
.phd#p0, .phdHiLi#p0 {
	position:absolute;top:0;left:0;
	border:none;
	width:auto;height:auto;
	margin-left:2px;margin-top:2px;float:none;text-align:center;background:none;z-index:5}
#p0 a:link, #p0 a:visited, #p0 a:hover, #p0 a:active {
	position:relative;top:-1em;left:0;
	border:none;
	width:auto;height:auto;
	margin-left:2px;margin-top:1em;float:left;text-align:center;background:none;z-index:5}

/*p and text nodes created in js to replace pre node used in small divs*/
#p0 p, .HiLi#p0 p {position:absolute;z-index:6;background:url(img/F/50bg.png);top:2em;left:2em;width:20em;height:auto;font-size:0.9em;color:#aaa;text-align:left;padding:0.7em;text-align:center;display:none}/* <---- DISPLAY NONE TILL COMMENTS SUPPLIED ---> */

a.enlargement, a.enlargement img{text-decoration:none;border:none}

span.bTi {display:none}
a:link span.bTi strong , a:visited span.bTi strong {color:#999}
a:hover span.bTi strong {background:white;color:#6bd}
a:active span.bTi strong {color:black}