/*stop hyperlink borders from showing up. */
.body a {
	text-decoration: none;
	color: #000066;
	border-bottom: none;
}
.body a:hover {
	text-decoration: none;
	color: #333;
	border-bottom: none;
}
.body {
	width: 538px;
	height: 420px;
	background-color: #FFFFFF;
	padding-left: 0px;
	padding-right: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #336699;
	line-height: 18px;
	border-right: 1px solid #EAB570;
	border-top: 1px solid #EAB570;
	font-style: normal;
}
.galleryHeader {
  width: 479px;
  height: 40px;
  background: #FFF url(images/galleryHeader.jpg) right no-repeat;
  padding: 30px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #336699;
  line-height: 18px;
  font-style: normal;
}

/*Top Navigation Bar*/

.galleryNavTop {
	background: #333;
	margin-left: 1px;
	margin-right: 1px;
	padding-left: 1px;
	height: 20px;
	width: 100%;
}

/*
.galleryNavTop span:hover, div:hover, div a:hover {
  color: #FFF;
}
*/

.photoArrow {
  font:Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  display: none;
  width: 50px;
  height: 18px;
  padding: 1px;
  margin-right: 1px;
  text-align: center;
  color: #333;
  background: #666 url(images/navButtonsBack.png);
  cursor: pointer;
}
.photoPrevActive {
  display: block;
  float: left;
}
.photoNextActive {
  display: block;
  float: left;
}
.photoAutoDisabled {
  display: none;
}
.photoAutoPlay, .photoAutoPause {
  font:Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  float: left;
  display: block;
  width: 75px;
  height: 18px;
  padding: 1px;
  margin-right: 1px;
  text-align: center;
  color: #333;
  background: #666 url(images/navButtonsBack.png);
  cursor: pointer;
}
.photoAutoPlay span, .photoAutoPause span {
 display: none;
}
.photoAutoPlay .photoAutoPlayLabel {
 display: block;
}
.photoAutoPause .photoAutoPauseLabel {
 display: block;
}

.photoLoadMessage {
  float: left;
  height: 35px;
  line-height: 35px;
  margin-left: 10px;
  visibility: hidden;
  font-style: italic;
  text-align: center;
}

.navCenter {
	text-align: center;
	margin: 0px auto;
	width: 100%;
}
.galleryCenter {
  width: 220px;
  margin: 0px auto;
}
.galleryHome a {
  font:Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  float: right;
  width: 150px;
  height: 18px;
  padding: 1px;
  margin-right: 1px;
  text-align: center;
  color: #333;
  background: #666 url(images/navButtonsBack.png);
  cursor: pointer;
}
.galleryPrev {
  font:Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  width: 100px;
  height: 18px;
  padding: 1px;
  text-align: center;
  color: #333;
  background: #666 url(images/navButtonsBack.png);
  cursor: pointer;
}

.galleryNext {
  font:Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  float: right;
  width: 100px;
  height: 18px;
  padding: 1px;
  margin-left: 1px;
  text-align: center;
  color: #333;
  background: #666 url(images/navButtonsBack.png);
  cursor: pointer;
}

.galleries {

}

.galleries a {
  font:Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
	display: block;
  float: left;
  color: #CCCCCC;
  background: #333;
  width: 240px;
  height: 80px;
  border: 1px solid #999;
  text-align: left;
  margin: 5px;
  padding: 4px;
  overflow: hidden;
}

.galleries a:hover {

	background: #999;
	color: #FFFFFF;

}

.galleries img {
  float:left;
  margin: 4px;
}

.thumbList {
  clear: both;
  width: 147px;
  height: 200px;
  margin: 5px 0;
  padding: 10px;
  border: 1px solid #EEE;
  background: #333;
  text-align: center;
}

.thumbList ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  list-style: none;
 
}

.thumbList li {
  width: 25px;
  height: 25px;
  float: left;
  border: 1px solid #999;
  pading: 1px;
  margin: 2px;
  filter:alpha(opacity=70);
  -moz-opacity:0.7;
  opacity:0.7;
  -khtml-opacity:0.7;
}

.thumbList li:hover {
  filter:alpha(opacity=100);
  -moz-opacity:1.0;
  opacity:1.0;
  -khtml-opacity:1.0;
}

#outer {float: left; margin: 3px; width: 25px; height: 25px; line-height: 25px; background: #EEE; border: 1px solid #CCC; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%} /* for explorer only */
#inner[id] {position: static;}


/*GALLERY STYLES*/

/*
 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 {
  text-align: center;
  list-style: none;
}
.photoListActive li {
  margin: 1px;
  padding: 0px;
  color: #567;
  text-align: center;
  /*display: none;*/
}
.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 {
  clear: both;
  height: 450px;
}


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

.photoArea {
 position: relative;
 visibility: hidden;
 margin: 0 auto 0 auto;
}
.photoAreaActive {
 visibility: visible;
 border: 1px solid #C0C0C0;
 padding: 4px;
}