/* Some browsers, notably Firefox, don't leave space on the right of the
   viewport for a vertical scrollbar, so the page shifts to the left or
   right depending on the length of the content. By setting min-height
   of the html element to 100% and declaring a margin-bottom of 0.1px,
   the page always spawns a vertical scrollbar, but doesn't scroll unless
   the content exceeds the height of the viewport. This isn't ideal, but
   is less confusing to the user than having the page constantly jump
   to left and right. 
*/
html {
	min-height:100%;
	margin-bottom:0.1px;
	}
/* The body rule removes margin and padding so that the page is positioned equally
   in all browsers. The background image is centered and tiled vertically. The
   background color matches the edges of the 1,200-pixel wide background. Text
   color is set to black and a set of sans-serif fonts is chosen.
*/
body {
		margin: 0px;
		padding: 0px;
		color:#3e2301;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		height: 100%;
		background: #a9c6b9;
}
label {
	font-weight:bold;
}
/* The wrapper div encloses the page content and centers it in the page.
   By setting background-color to white, the content remains readable
   even if the body's background image fails to display.
*/
#wrapper {
		width: 700px;
		margin: 0 auto;
		padding: 20px;
		height: 900px;
		border: 4px groove #3e2301;
		background: #f9f2f8;
}
/* The select div has a top margin of 15 pixels and a left one of 5 pixels
   to position the drop-down menu and its label away from the header image
   and left side of the wrapper div.
*/
#select {
	margin: 15px 0 0 5px;
	min-height: 100%;
}
/* The thumbs div has a 20-pixel margin on each side except the right. It
   also has a 4-pixel grooved border, making its overall width 228 pixels.
   It's floated left so that it can sit alongside the mainPic div.
*/
#thumbs {
		margin: 0;
		float: left;
		width: 180px;
		padding: 10px;
		border: 3px solid #F9F2F8;
		height: 400px;
		background: #3e2301;
}
 /* The mainPic div is floated left so that it comes up alongside the
   thumbs div. Its width is set to 492px to fill the remaining horizontal
   space in wrapper div (228 + 492 = 720).
*/
#mainPic {
		float: right;
		margin: 0;
		vertical-align: top;
		border: 3px solid #3e2301;
		padding: 0;
		width: 425px;
}
/* The main image and its caption are in a center-aligned paragraph to
   position them within the mainPic div. The line-height property is
   set to 2 to give extra breathing space for the caption beneath the
   main image.
*/
#mainPic p {
		text-align: middle;
		font-weight: normal;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14pt;
}
/* The description div uses the clear property to ensure there's no overlap
   with either of the floated divs above. Using auto for the left and right
   margins centers the div within the wrapper.
*/
#description {
		width: 425px;
		font-size:12pt;
		font-family: Georgia, "Times New Roman", Times, serif;
		float:right;
		color: #3e2301;
		text-align: left;
}
a:link {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-style: normal;
		font-weight: bold;
		color: #3e2301;
		text-decoration: underline;
}

a:visited {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-weight: normal;
		color: #3e2301;
		text-decoration: underline;
}

a:hover {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-style: oblique;
		color: #3e2301;
		text-decoration: underline;
}

a:active {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		line-height: normal;
		font-weight: bold;
		color: #3e2301;
		text-decoration: underline;
}