body {
margin: 0;
padding: 0;
background-color: #444444;
color: #DDCC99;
}

a img {
border: 0px none;
}

h1{
font: bold 24pt "Comic Sans MS", cursive, arial, sans-serif;
color: #DDCC99;
}

h2{		/* h2 USED ONLY ON THE BIO PAGES */
font: 18pt "Comic Sans MS", arial, sans-serif; 
color: #FFFFFF;
}

h4{
font: 14pt "Comic Sans MS", arial, sans-serif; 
color: #DDCC99;
}

p {
font: 10pt/16pt arial, sans-serif;
color: #DDCC99;
}
p span.highlight {
color: #FFFFFF;
font: 12pt "Comic Sans MS", arial, sans-serif;
}

p a {
color: #FF8ACD;
text-decoration: none;
border-bottom: #FF8ACD 1px solid;
padding-bottom: 2px;
}

p a.red {
color: #FF0000;
border-bottom: #FF0000;
}

p a:hover {
color: #FFFFFF;
border-bottom: #FFFFFF 1px solid;
}

p.imagenumb {	/*tried relative positioning on this one to move number up onto picture, but ie has a lot of trouble, and this way moz fails to put background and border on top of image, just text, so number has to be to one side.*/
margin: -45px 0 0 498px;
width: 50px;
padding: 0;
background-color: #000000;
display: block;
text-align: center;
}


/*........................LEFT STUFF........................*/


#subleftcontent {
position: absolute;
top: 15px;
left: 0;
width: 160px;
}

ul#subnav {
list-style: none;
margin: 0;
padding-left: 0; 
background-color: transparent;
}

ul#subnav li {
display: block;
background-color: #444444;	/*very strange - without a background colour setting (and block, presumably) the 'block of the hyperlink only works erratically in areas not actually filled with text - i.e.ends of blocks.*/
width: 160px;
}

ul#subnav li a:link, ul#subnav li a:visited {
text-decoration: none;
display: block;
width: 150px;		
padding: 2px 0px 3px 10px;
font: 10pt "Comic Sans MS", cursive, arial, sans-serif;
Color: #DDCC99;
}

ul#subnav li a:hover {
background: url(images_bits/grey_holesslide3_r.jpg) repeat-y;
color: #FF0000;
}

ul#subnav li a#currentpage {
background: url(images_bits/grey_holesslide3_r.jpg) repeat-y;
color: #FF0000;
}

#backtomain a {
display: block;
width: 140px;
text-decoration: none;
margin: 0;
padding: 10px;
border: #DDCC99 1px solid;
background: url(images_bits/grey_holesslide3_r.jpg) repeat-y;
font: 10pt "Comic Sans MS", cursive, arial, sans-serif;
color: #DDCC99;
}

#backtomain a:hover {
border: #FF0000 1px solid;
color: #FF0000;
}



/*.......LEFT - FOR BIO PAGES.............*/

div#leftbio {
background: url(images_bits/notepaper2.gif) repeat-y;
}

ul#navbio {
list-style: none;
background-color: transparent;
margin: 0;
padding-left: 0; 
padding-bottom: 50px;
padding-top: 30px;
}

ul#navbio li a {
color: #CAB576;
display: block;
width: 150px;
margin: 10px 0 10px 0;
padding: 0 0 3px 15px;
text-decoration: none;
border-bottom: #555555 1px solid;
}

ul#navbio li a:hover {
color: #FFFFFF;
border-bottom: #888888 1px solid;
}

ul#navbio li a#return {
color: #FFFFFF;
border-bottom: #888888 2px solid;
font: 12pt arial, sans-serif;
padding-left: 8px;
width: 157px;
}

ul#navbio li a#currentpagebio {
color: #FFFFFF;
border-bottom: #888888 1px solid;
}

/*...................BOTTOM LEFT SECTION - PHOTO PAGES........................*/


div#bottomleft {
position: absolute;
top: 0;
margin-left: 0;
margin-right: 50%;
width: 49%;
}

div#bottomleftcontent {
margin-top: 650px;		/*this needs to be lowered individually on each page, unless there is no list of prints, as this margin setting puts it just below navigation bar. */
margin-right: 195px;
}

div#bottomleftcontent p, div#bottomleftcontent h3 {
padding-left: 10px;
padding-right: 10px;
}
div#bottomleftcontent img {
padding-left: 30px;
}

div#pictures {
}

/*........................CENTER PHOTO STUFF........................*/

#centerphoto {
position: relative;
z-index: 3;
top: 0;
left: 160px;
margin-right: 160px;
}

#photostrip {
display: block;
top: 0;
margin-left: auto;
margin-right: auto;
width: 550px;
color: #FFFFFF;
background: url(images_bits/photoedge.gif) repeat-y;
overflow: hidden;
}

ul#photolist {
list-style: none;
margin-left: 0;
margin-top: 0;
padding-left: 0; 
}

ul#photolist li img {	/*images preferably 440 wide, but this setting alows for centering a range of widths*/
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 14px;
margin-bottom: 14px;
}

ul#photolist li.photoinsert {
margin: 0 70px;
}

ul#photolist li.photoinsert h1, ul#photolist li.photoinsert h4 {
text-align: center;
}


/*........................CENTER FILM STUFF........................*/



div#filmstrip {
position: absolute;
display: block;
top: 120px;
left: 180px;
width: 80%;
height: 450px;
color: #FFFFFF;
background: url(images_bits/photoedge_vert2.gif) repeat-x;
}

div#filmthumbs {
display: block;
overflow: hidden;
padding: 0;
width: 800px;
height: 14px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}

div#filmthumbs img {
width: 10px;
height: 10px;
margin: 1px;
padding: 0;
border: #444444 1px solid;
}

div#film {
display: block;
width: 343px;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
text-align: center;
}

/*...................CENTER BIO STUFF..................*/

div#biopic {
position: absolute;
top: 130px;
left: 110px;
width: 290px;
background: url(images_bits/notepaper.gif) repeat-y;
color:#AAAAAA;
padding: 10px 30px 30px 60px;
}

div#biopic p, div#biopic h2 {
color: #222222;
}

div#biopic img {
border-right: #A89762 solid 1px;
border-bottom: #7D6F44 solid 1px;
border-left: #FFFFFF solid 1px;
}