body {
	background-color: #FFF;
	color: #333333;
}
h1 {
	font-family: "Comic Sans MS", sans-serif;
}

.quote {
	text-align: left;
	padding: 10px;
	margin-bottom:25px;
}
/*
 This CSS file controls the entire appearance of the photo gallery.
 Most of the photo controls below are hidden by default, until their 'active'
 style is applied by the script. This is for older/non-JS-supporting browsers.
*/



/*
 Prev/Next Arrow styles: I'm giving them a button appearance,
 and pushing them to the sides of the page with CSS floats.
*/

.photoArrow {
	display: none;
	width: 5em;
	padding: 0.1em;
	text-align: center;
	color: white;
	background-color: #990000;
	border: 1px solid #5080B0;
	border-color: #CCCCCC;
	cursor: pointer;
}
#container {
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	width: 780px;
	margin-right: auto;
	margin-left: auto;
}

.photoPrevActive {
 display: block;
 float: left;
}
.photoNextActive {
 display: block;
 float: right;
}


/*
 The list is shrunk down, with only the active item displayed.
 A cool alternative to this is to display the list with "overflow: auto" to
 the side of your photos, as the script allows you to click items to jump to them!
 You could have a list of thumbnails, linking to the full-size images, and use
 photoItemActive to put a border/background around the active image...
*/

.photoListActive {
 margin: 0 0 1em 0;
 padding: 0em 6em;
 text-align: center;
 list-style: none;
}
.photoListActive li {
	font: bold 1em/1.6 "Comic Sans MS", sans-serif;
	margin: 0;
	padding: 0;
	display: none;
	color: #990000;
}
.photoListActive li.photoItemActive {
 display: block;
}
.photoListActive a {
 color: #34C;
}


/* It's a good idea to wrap your photos in an area the size of the largest photo */

.photoContainer {
	height: 725px;
	background: url(images/frame.gif) no-repeat center top;
}


/* OK, the photo area itself. Nothing too special here, a border and some padding. */

.photoArea {
	position: relative;
	visibility: hidden;
	margin: 0 auto 0 auto;
	top: 90px;
}
.photoAreaActive {
	visibility: visible;
	padding: 4px;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
}


/*
 The AutoPlay setup is complicated; the two styled spans are alternately hidden and
 shown depending on the script state. I also have a small loading message that is
 shown to the right.
*/

.photoAutoDisabled {
 display: none;
}
.photoAutoPlay, .photoAutoPause {
	display: block;
	width: 5em;
	padding: 0.1em;
	text-align: center;
	color: white;
	background-color: #990000;
	border: 1px solid #5080B0;
	border-color: #CCCCCC;
	cursor: pointer;
}
.photoAutoPlay span, .photoAutoPause span {
 display: none;
 width: 5em; /* IE/Mac fix */
}
.photoAutoPlay .photoAutoPlayLabel {
 display: block;
}
.photoAutoPause .photoAutoPauseLabel {
 display: block;
}

.photoLoadMessage {
 float: right;
 visibility: hidden;
 font-style: italic;
 text-align: center;
}