/* The gallery overlay */

#galleryOverlay{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; z-index: 100000; background-color: #222; background-color: rgba(10,10,10,0.95); overflow: hidden; display: none; -moz-transition: opacity 1s ease; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; }

/* This class will trigger the animation */

#galleryOverlay.visible{ opacity: 1; }

#gallerySlider{ height: 100%; left: 0; top: 0; width: 100%; white-space: nowrap; position: absolute; -moz-transition: left 0.4s ease; -webkit-transition: left 0.4s ease; transition: left 0.4s ease; }

#gallerySlider .placeholder{  height: 100%; line-height: 1px; text-align: center; width: 100%; display: inline-block; }

/* The before element moves the
 * image halfway from the top */

#gallerySlider .placeholder:before{ content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; }

#gallerySlider .placeholder img{
	display: inline-block;
	max-height: 80%;
	max-width: 90%;
	vertical-align: middle;
	border: 4px solid #545454;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-khtml-border-bottom-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-khtml-border-bottom-left-radius: 5px;
	border-bottom-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	-khtml-border-top-right-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-khtml-border-top-left-radius: 5px;
	border-top-left-radius: 5px;
}

#gallerySlider.rightSpring{ -moz-animation: rightSpring 0.3s; -webkit-animation: rightSpring 0.3s; }

#gallerySlider.leftSpring{ -moz-animation: leftSpring 0.3s; -webkit-animation: leftSpring 0.3s; }

/* Firefox Keyframe Animations */

@-moz-keyframes rightSpring{
	0%{ margin-left: 0px; }
	50%{ margin-left: -30px; }
	100%{ margin-left: 0px; }
}

@-moz-keyframes leftSpring{
	0%{ margin-left: 0px; }
	50%{ margin-left: 30px; }
	100%{ margin-left: 0px; }
}

/* Safari and Chrome Keyframe Animations */

@-webkit-keyframes rightSpring{
	0%{ margin-left: 0px; }
	50%{ margin-left: -30px; }
	100%{ margin-left: 0px; }
}

@-webkit-keyframes leftSpring{
	0%{ margin-left: 0px; }
	50%{ margin-left: 30px; }
	100%{ margin-left: 0px; }
}

/* Arrows */

#prevArrow,#nextArrow{ border: none; text-decoration: none; background: url('./TouchImageViewer/arrows.png') no-repeat; opacity: 0.5; cursor: pointer; position: absolute; width: 43px; height: 58px; top: 50%; margin-top: -29px; -moz-transition: opacity 0.2s ease; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; }
#closeButton{ border: none; text-decoration: none; background: url('./TouchImageViewer/close.png') no-repeat; opacity: 0.5; cursor: pointer; position: absolute; width: 58px; height: 58px; -moz-transition: opacity 0.2s ease; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; }

#prevArrow:hover, #nextArrow:hover{ opacity: 1; }

#prevArrow{ background-position: left top; left: 40px; }

#nextArrow{ background-position: right top; right: 40px; }
#closeButton{ background-position: right top; right: 15px; top: 15px; }