@CHARSET "UTF-8";
#top, .top {
	width:856px;
	margin:0 auto;
}

#main, .main {
  width:824px;
  margin:0 auto;
}

#images, .images {
  margin:0 24px;
  margin-left:auto;
  margin-right:auto;
}



#right,
#left {
  display:inline;
}

#right a img,
#left a img {
  height:40px;
  width:20px;
  border:none;
  opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
}

#right a:hover img,
#left a:hover img {
  opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
}

#right a,
#left a {
  outline:none;
}

.panel {
  margin:0 auto 12px;
}

ul.exposureThumbs {
  background:#333;
  border:3px solid #333;
  border-right:none;
  padding:0;
  margin:0;
  list-style-type:none;
  height:79px;
}

ul.exposureThumbs li {
  background:#111;
  margin:0 3px 0 0;
  padding:0;
  text-align:center;
  //display:none;
  float:left;
}

ul.exposureThumbs li img {
  cursor:pointer;
}

ul.exposureThumbs li.last {
  margin:0;
}

.exposureTarget {
  width:800px;
  height:600px;
  background-color:#111;
  background-image:url(/img/loading.gif);
  background-repeat:no-repeat;
  background-position:center center;
  padding:0;
  margin:0 auto;
  border:3px solid #333;
  position:relative;
  overflow:hidden;
}

.exposureWrapper {
  position:absolute;
  top:0;
  left:0;
}

.exposureWrapper img {
  cursor:pointer;
  position:absolute;
  top:0;
  left:0;
}

.exposureLoaded {
  background-image:none;
}

.exposureData {
  position:absolute;
   left:0;
   right:0;
   bottom:0;
  height:60px;
  padding:7px;
  background-image:url(/img/veil.png);
  color:#fff;
  font-size:16px;
  font-weight:bold;
}

/* In this demo we are using thumbs with fixed size */
ul.exposureThumbs li {
  width:150px;
  max-height:79px;
}

ul.exposureThumbs li img{
  max-width:150px;
  max-height:79px;
}

.exposureSlideshowControls a {
  font-size:11px;
  color:#bba;
  text-decoration:none;
  outline:none;
  padding:2px 6px;
  display:inline;
}

.exposureSlideshowControls a:active,
.exposureSlideshowControls a:hover {
  background-color:#999;
  color:#444;
}

p.info {
  margin:40px auto;
  text-align:center;
  width:600px;
}

p.info a {
  color:#006fc0;
}

p.info a:hover, p.info a:active {
  color:#0084e7;
}

.exposureImage {
  max-width:800px;
  max-height: 800px;
}

.clear {
  clear:both;
}

.exposureSlideshowControls a,
.exposureControls span,
.exposureControls a {
  font-family:Arial,Verdana,Helvetica,sans-serif;
  font-size:11px;
  padding:8px;
  background-color:#999;
  display:block;
  float:left;
}

.exposureSlideshowControls a {
  float:right;
}

.exposureSlideshowControls a,
.exposureControls a {
  color:#333;
  text-decoration:none;
  outline:none;
}

.exposureSlideshowControls a:active,
.exposureSlideshowControls a:hover,
.exposureControls a:active,
.exposureControls a:hover {
  background-color:#ddd;
	color:#444;
}