/* 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;
	background-image: url(../../images/gallery_bg.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	background-color: #F9F2F8;
	color:#000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
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: 720px;
	margin: 0 auto;
	background-color:#FFF;
}
/* 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;
}
/* 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: 20px 0 20px 20px;
	float: left;
	width: 200px;
	border: 4px groove #F9F2F8;
}
/* The images inside the thumbs div have both padding and margin. The
   padding allows you to add a Spry highlight effect when the thumbnails
   are moused over (see Chapter 2 for an explanation). The thumbnails are
   80 pixels wide, so the overall width of each one comes to 96 pixels.
   In theory, you should be able to use 100 pixels for each thumbnail,
   but this creates problems with the accessible gallery case study in
   Chapter 20. For the Spry gallery in Chapter 10, increasing the margin
   to 6px gives the best appearance. Experiment to find the most pleasing
   layout.
*/
#thumbs img {
	margin: 5px;
	padding: 3px;
	cursor: pointer;
	border: none;
}
/* 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: left;
	width: 492px;
	margin: 0;
}
/* 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: center;
	font-weight: bold;
	line-height: 2;
}
/* 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 {
	clear: left;
	width: 600px;
	margin: 0 auto;
	font-size:85%;
}