/* gallerific */

div.content {
	/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	float: right;
}

div.content a, div.navigation a {
	text-decoration: none;
	color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
	text-decoration: underline;
}


.caption-panel { 
  position: relative;
  float: left;
  width: 14em;
  height: 30em;
}

.caption-headline { 
  margin-top: 0em;
  margin-left: 3em;
  margin-bottom: 0;

}

.caption-container { 
  position: absolute;
  display: block;
  top: 22em;
  margin-left: 3em;
  width: 12em;
}

.image-caption {
  display: block;
  position: absolute;
  /* bottom: 0; */
  float: left;
  font-size: 75%;
  font-style: italic;
}

.image-title {
  font-size: 130%;
  /* margin-bottom: 0.7em; */
  height: 2em;
  color: #777;
}

.image-desc {
  font-size: 110%;
  color: #777;
  padding-right: 2em;
}

.copyright { 
  font-size: 80%;
  margin-top: 3em;
}

.slideshow-container { 
  position: relative;
  float: left;
  width: 50em;
   /* border: solid 1px #dfdfdf; */
}

div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 50em;
	height: 30em; /* This should be set to be at least the height of the largest image in the slideshow */
}

.slide-panel { 
  position: relative;
  padding: 0;
  margin-left: 0em; /* 675 -> 4em */
  width: 730px; /* 675px; /* 46em; */
  height: 440px;  /* 30em; */
  overflow: hidden;
  float: left;
  /*  background-color: #f4f4f0; */
}

div.slideshow {
  width: 46em;
  overflow: hidden;
}

div.slideshow span.image-wrapper {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  /* border: 1px solid black; */
}

div.slideshow a.advance-link {
  height: 0;
  width: 0;
  position: relative;
}

div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}

div.slideshow img {
  /* vertical-align: text-top;  /* middle; */
  /* display: inline; */
     /* to accomadate "space" put in by gallerific - scale down sizes*/
     /* 675 -> 668 , 440 -> 436 , ratio   1.53 : 1 */
  max-width: 668px; /* 45.5em; */
  max-height: 436px;  /* 29.8em; */
}

div.download {
	/* float: right; */
}


/* thumbnails */

/* outer container */
.navigation-container { 
  position: relative;
  float: left;
  /* clear: both; */
  margin-left: 14em;
  margin-top: 2em;
  width: 50em;
  /* border: 1px solid #bbeecc;  */
}

/* inner container */
div.navigation { 
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  float: left;
  width: 40em;
  /* border: 1px solid magenta;  */
}


#thumbs {
  /* position: absolute;
  top: 40px;
  left: 7em;
  margin: 0;
  padding: 0;
  width: 40em; */
  /* margin-top: 1.6em; */
  position: relative;
  float: left;
  width: 40em;
  padding: 0;
  margin: 0;
  margin-top: 3em;
  margin-left: 8em;
  z-index: 3;
  /* border: 1px solid red; */
}

#thumbs ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  float: right;
  /* margin-left: 10em; */
  /* margin-right: 3em; */
  width: 42em;
  /* border: 1px solid green;*/
}

#thumbs li {
  margin-left: 1.7em;
  float: left;
  text-transform: uppercase;
}

.thumb img {
  width: 75px;
  height: 75px;
}

/* show N of  M */
.photo-index-container { 
  position: relative;
  width: 50em;
  float: left;
  /* margin-top: 2em; */
  /* margin-bottom: 1em; */
}

/* photo-index and div.controls are absolute to photo-index-container
   */
.photo-index { 
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  font-size: 80%;
  margin-top: 2.4em; 
  /* margin-bottom: 2em; */
  margin-left: 31em;
  text-align: center;
  /* background-color: red; */
}



/* image navigation controls */

div.controls { 
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  width: 50em;
  /* height: 4em; */
  margin-top: 1.6em;
  /* border: 1px solid #909090; */
  z-index: 2;
 }

div.controls a {
  /*  padding: 5px; */
}

div.ss-controls {
  margin-top: 0em;
  padding: 0;
  margin-left: 0em;
  float: right;
  text-align: right;
   width: 10em;  /* total of 28em */
}

div.ss-controls .play {
  margin-left: 0.5em;
  font-size: 74%;
  color: #909090;
}

div.ss-controls .pause {
  margin-left: 0.5em;
  font-size: 74%;
  color: #909090;
}

div.nav-controls {
  width: 50em;  /* 64 - 28 for ss-controls */
  float: right;
  margin-top: 3em;
  /* border: solid 1px cyan; */
}

.nav-controls a { 
  text-decoration: none !important;
 }

.nav-controls .prev { 
  margin-left: 4em;
  float: left;
  background-image: url(images/l_arrow.png);
  width: 40px;
  height: 10px;
}

.nav-controls .next { 
  margin-right: 0em;
  float: right;
  background-image: url(images/r_arrow.png);
  width: 40px;
  height: 10px;
}


div.navigation-container .top {
/*
  margin-top: 2em;
  margin-left: 4em;
  width: 10em;
*/  height: 11px;
}

div.navigation-container .bottom {
  height: 11px;
  /*
  width: 7.8em;
  display: none;
     */
}

div.navigation-container a.prev {
}

div.navigation-container a.next {
}

/* page controls */

div.pagination {
  position: relative;
  float: left;
  clear: both;
  /* border: 1px solid yellow; */
  visibility: hidden; 
}

div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
  display: block;
  float: left;
  font-size: 74%;
}

div.pagination a:hover {
  text-decoration: none;
}

div.pagination span.current {
  background-color: #444;
}

div.pagination span.ellipsis {
	border: none;
}