body {
	background-image: url("images/canvas.gif");
	margin: 0;
	padding: 0;
	/* overflow: hidden; */
	}

#RAPER {
	display: block;
	height: 100%;
	background: url(images/blackline.gif) repeat-y left;

	/* This makes the BODY sit up against the edge of the browser */
	margin: 0;
	padding: 0;
	
	/* Padding for black area. */
	padding-left: 200px;	
	padding-top: 20px;
	overflow: auto;
	max-height: 100%;
	}
	
	/* Adjust Logo postion to taste... */
#LOGO {
	position: absolute;
	left: 57px;
	top: 20px;
}

/* IE won't understand this and so will ignore it, so these are the positions for Safari and Firefox */
html>body #LOGO {
	top: 31px;
} 
	
	/* Image replacement technique. We do this so blind people and search engine can still see the page title. The trick is to hide the text off to the left with the 'text-indent' and give what ever were replacing a backgound image. The width and height have to be the same size as the background image. */

#TITLE {
	background: url(images/bg.gif) no-repeat top left;
	display: block;
	width: 347px;
	height: 144px;
	text-indent: -999px;
	}

	/* Don't want to pad the body so... */
p {
	padding: 1em;
	}


a {
	color: White;
	font-weight: lighter;
}
a:hover {
	color: #D6BD9F;
	font-weight: bold;
}

body {
	color: Black;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.6em;
	text-align: left;
}

div.float {
	float: left;
}

div.float p {
	text-align: center;
}

.floaty {
	float: right;
	padding-left: 40px;
	margin-left: 20px;
}

.floatyleft {
	float: left;
	padding: 6px;
}

li {
	font-size: 0.9em;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
	}

strong {
	font-size: medium;
}

.fulltext {
	margin: -23px 0px 0px 10px;
	position: absolute;
	width: 500px;
}

.leftcolumntext {
	margin: -23px 0px 0px 20px;
	position: absolute;
	width: 315px;
	left: 204px;
	top: 160px;
	height: 164px;
}

.rightcolumntext {
	margin: -23px 0px 0px 370px;
	position: absolute;
	}
	
#links {
	/* margin: 170px 0px 0px 45px; no no no, silly silly*/
	position: absolute;
	top: 170px;
	left: 45px;
	z-index: 1;
}
/* again, only Safari and Firefox will understand this one */
html>body #links {
	left: 57px;
}

#links li a {
	text-decoration: none;
	width: 120px;
	display: block;
	line-height: 1.8em;
	font-size: 1.05em;
}

#links li a:hover {
	border: 0;
}

#links li a span {
	display: none;
	font-weight: normal;
	line-height: 1.6em;
}

#links li a:hover span {
	display: block;
	left: 20px;
	position: absolute;
	top: 170px;
	z-index: 100;
	width: 120px;
	}

html>body #links li a:hover span {
	left: 0;
	}

	
/* For the scrolling thumbnail galleries. This is just to make the thumbnails look pretty. Change to taste. */
#thumbnails img {
	border: none;
}

#thumbnails td {
	border: 1px solid #D6BD9F;
	padding: 5px;
	margin: 10px;
	text-align: center;
}

.publication {
	margin: 250px 0px 0px 380px;
	position: absolute;
}

.publicationtwo {
	margin: 500px 0px 0px 380px;
	position: absolute;
	}

.publicationthree {
	margin: 750px 0px 0px 380px;
	position: absolute;
	}

.publicationfour {
	margin: 1000px 0px 0px 380px;
	position: absolute;
	}

.exhibittwo {
	margin: 250px 0px 0px 380px;
	position: absolute;
	}

.exhibitthree {
	margin: 452px 0px 0px 380px;
	position: absolute;
	}

.exhibitfour {
	margin: 654px 0px 0px 380px;
	position: absolute;
	}
	
.exhibitfive {
	margin: 856px 0px 0px 380px;
	position: absolute;
	}

.contemporary {
	margin: 115px 0px 0px 580px;
	position: absolute;
}

.oldpawn {
	margin: 115px 0px 0px 595px;
	position: absolute;
}

.artworks {
	margin: -50px 0px 0px 380px;
	position: absolute;
}
.exhibitone {
	margin-top: 30px;
	margin-left: 380px;
}