/*
	SupersizedSlideShow.css
	TemplateName:  ObjectWeb-Base
	Copyright (c) 2012, ObjectWeb Srl. All rights reserved.
	Version:  1.0.0
*/

* {
   margin: 0;
   padding: 0;
}

body {
   background: #111;
   height: 100%;
}

   img {
      border: none;
   }
   	
   #supersized-loader {
      background: url(Images/SupersizedSlideShowProgress.gif) no-repeat center center;
      height: 60px;
      left: 50%;
      margin: -30px 0 0 -30px;
      position: absolute;
      top: 50%;
      text-indent: -999em;
      width: 60px;
      z-index: 0;
   }
	
   #supersized {
      display: block;
      height: 100%;
      left: 0;
      overflow: hidden;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: -999;
   }

		#supersized img {
		   border: none;
		   display: none;
		   height: auto;
		   outline: none;
		   position: relative;
		   width: auto;
		}

			#supersized.speed img {	/*Speed*/
			   -ms-interpolation-mode: nearest-neighbor;
			   image-rendering: -moz-crisp-edges;
			}

			#supersized.quality img { /*Quality*/
			   -ms-interpolation-mode: bicubic;
			   image-rendering: optimizeQuality;
			}
		
		#supersized li {
		   background: #111;
		   display: block;
		   height: 100%;
		   left: 0;
		   list-style: none;
		   overflow: hidden;
		   position: fixed;
		   top: 0;
		   width: 100%;
		   z-index: -30;
		}

		#supersized a {
		   display: block;
		   height: 100%;
		   width: 100%;
		}

			#supersized li.prevslide {
			   z-index: -20;
			}

			#supersized li.activeslide {
			   z-index: -10;
			}

			#supersized li.image-loading {
			   background: #111 url(Images/SupersizedSlideShowProgress.gif) no-repeat center center;
			   height: 100%;
			   width: 100%;
			}

				#supersized li.image-loading img {
				   visibility: hidden;
				}

			#supersized li.prevslide img,
			#supersized li.activeslide img {
			   display: inline;
			}


	/* Controls Bar (shutter.css)
	----------------------------*/
	#controls-wrapper {
	   background: url(Images/SupersizedSlideShowNavigationBackground.png) repeat-x;
	   bottom: 0px;
	   height: 42px;
	   left: 0;
	   margin: 0 auto;
	   position: fixed;
	   width: 100%;
	   z-index: 4;
	}

		#controls {
		   height: 100%;
		   overflow: hidden;
		   position: relative;
		   text-align: left;
		   z-index: 5;
		}

			#slidecounter {
			   color: #999;
			   float: left;
			   font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
			   line-height: 42px;
			   margin: 0px 10px 0 15px;
			   text-shadow: #000 0 -1px 0;
			}

			#slidecaption {
			   color: #FFF;
			   float: left;
			   font: 400 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
			   line-height: 42px;
			   margin: 0 20px 0 0;
			   overflow: hidden;
			   text-shadow: #000 1px 1px 2px;
			}
			
			#navigation {
			   float: right;
			   margin: 0px 20px 0 0;
			}

				#play-button {
				   background: url('Images/SupersizedSlideShowBackgroundHover.png') repeat-x 0 44px;
				   border-right: 1px solid #333;
				   float: left;
				   margin-top: 1px;
				}

					#play-button: hover {
					   background-position: 0 1px;
					   cursor: pointer;
					}
				
				#prevslide,
				#nextslide {
				   height: 43px;
				   margin-top: -21px;
				   opacity: 0.6;
				   position: absolute;
				   top: 50%;
				   width: 43px;
				}

					#prevslide{
					   background: url('Images/SupersizedSlideShowBack.png');
					   left: 10px;
					}

					#nextslide{
					   background: url('Images/SupersizedSlideShowForward.png');
					   right: 10px;
					}

						#prevslide: active,
						#nextslide: active {
						   margin-top: -19px;
						}

						#prevslide: hover,
						#nextslide: hover {
						   cursor: pointer;
						}
				
				ul#slide-list{
				   float: left;
				   left: 50%;
				   padding: 15px 0;
				   position: absolute;
				}

					ul#slide-list li {
					   float: left;
					   height: 12px;
					   list-style: none;
					   margin: 0 5px 0 0;
					   width: 12px;
					}

						ul#slide-list li.current-slide a,
						ul#slide-list li.current-slide a: hover {
						   background-position: 0 0px;
						}

						ul#slide-list li a {
						   background: url('Images/SupersizedSlideShowNavigation.png') no-repeat 0 -24px;
						   display: block;
						   height: 12px;
						   width: 12px;
						}

							ul#slide-list li a: hover {
							   background-position: 0 -12px;
							   cursor: pointer;
							}
				
				#tray-button{
				   background: url('Images/SupersizedSlideShowBackgroundHover.png') repeat-x 0 44px;
				   border-left: 1px solid #333;
				   float: right;
				   margin-top: 1px;
				}

					#tray-button: hover {
					   background-position: 0 1px;
					   cursor: pointer;
					}
		
	
	/* Progress Bar
	----------------------------*/					
	#progress-back {
	   background: url('Images/SupersizedSlideShowProgressBack.png') repeat-x;
	   bottom: 42px; left: 0;
	   height: 8px; width: 100%;
	   position: fixed;
	   z-index: 5;
	}

		#progress-bar {
		   background: url('Images/SupersizedSlideShowProgressBar.png') repeat-x;
		   height: 8px;
		   position: relative;
		   width: 100%;
		}
	
	
	/* Thumbnail Navigation
	----------------------------*/	
	#nextthumb,
	#prevthumb {
	   -webkit-box-shadow: 0 0 5px #000;
	   background: #ddd;
	   border: 1px solid #fff;
	   bottom: 61px;
	   display: none;
	   height: 75px;
	   overflow: hidden;
	   position: fixed;
	   width: 100px;
	   z-index: 2;
	}

		#nextthumb {
		   right: 12px;
		}

		#prevthumb {
		   left: 12px;
		}

			#nextthumb img,
			#prevthumb img {
			   height: auto;
			   width: 150px;
			}

			#nextthumb: active,
			#prevthumb: active {
			   bottom: 59px;
			}

			#nextthumb: hover,
			#prevthumb: hover {
			   cursor: pointer;
			}
	
	
	/* Thumbnail Tray
	----------------------------*/			
	#thumb-tray {
	   -moz-box-shadow: 0px 0px 4px #000;
	   -webkit-box-shadow: 0px 0px 4px #000;
	   bottom: 0;
	   box-shadow:  0px 0px 4px #000;
	   background: url(Images/SupersizedSlideShowBackground.png);
	   /*height: 150px;*/
	   height: 130px;
	   left: 0;
	   overflow: hidden;
	   position: fixed;
	   text-align: center;
	   width: 100%;
	   z-index: 3;
	}
		
		#thumb-back,
		#thumb-forward {
		   bottom: 42px;
		   height: 108px;
		   position: absolute;
		   width: 40px;
		   z-index: 5;
		}

			#thumb-back {
			   background: url('Images/SupersizedSlideShowThumbBack.png') no-repeat center center;
			   left: 0;
			}

			#thumb-forward {
			   background: url('Images/SupersizedSlideShowThumbForward.png') no-repeat center center;
			   right: 0;
			}

				#thumb-back: hover,
				#thumb-forward: hover {
				   background-color: rgba(256,256,256, 0.1);
				   cursor: pointer;
				}

					#thumb-back: hover {
					   border-right: 1px solid rgba(256,256,256, 0.2);
					}

					#thumb-forward: hover {
					   border-left: 1px solid rgba(256,256,256, 0.2);
					}
		
		
		ul#thumb-list {
		   display: inline-block;
		   left: 0px;
		   list-style: none;
		   position: relative;
		   padding: 0 0px;
		}

			ul#thumb-list li {
			   background: #111;
			   display: inline;
			   float: left;
			   list-style: none;
			   margin: 0;
			   overflow: hidden;
			   /*
			   height: 108px;
			   width: 150px;
			   */
			}

				ul#thumb-list li img {
				   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=60)";
				   filter: alpha(opacity=60);
				   opacity: 0.5;
				   /*
				   width: 200px;
				   height: auto;
				   */
				}

				ul#thumb-list li.current-thumb img, 
				ul#thumb-list li:hover img {
				   opacity: 1;
				   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				   filter:alpha(opacity=100);
				}

				ul#thumb-list li: hover {
				   cursor: pointer;
				}