/*
* Project	:	Single Responsive Photo Gallery plus Slideshow
* Author	:	Phong Thai (http://www.javascriptbank.com/)
* Support	:	http://www.javascriptbank.com/single-responsive-photo-gallery-plus-slideshow.html
* Version	:	1.0.1
*/

/*
	You are free to use this plugin in any personal, commercial project without my permission.
	But please help me by leaving the Copyright sign, it just occupies about 10 pixels, 
	otherwise please help me with a milk coffee (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2MEPB69L9E5VQ) to remove this sign.
*/
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
	margin: 0;
	padding: 0;
}
#srpgs-container {
	height: 600px;
}
.srpgs-holder {
	background-position: center top;
	background-repeat: no-repeat;
	width: 100%;
	height: 600px;
	position: absolute;
}
#srpgs-control {
	height: 110px;
	position: relative;
}
#srpgs-picture {
	width: 90%;
	float: left;
	clear: both;
	position: relative;
	top: 5px;
	left: 5px;
}
#srpgs-picture-title {
	background-image: url("images/textbg.png");
	color: #333;
	font-size: 20px;
	padding: 4px 13px 7px;
	float: left;
	display: block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}
#srpgs-picture-title:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}
.srpgs-picture-link {
	background-color: orange;
	color: #FFF;
	font-size: 12px;
	padding: 9px 16px;
	text-transform: uppercase;
	float: left;
	display: block;
	clear: both;
	margin-top: 10px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}
.srpgs-picture-link:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}
.srpgs-picture-link a {
	font-size: 13px;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
}
.srpgs-picture-link a:hover {
	text-decoration: underline;
}
#srpgs-control-btns div {
	height: 32px;
	width: 32px;
	float: left;
	cursor: pointer;
}
#srpgs-control-back {
	background-image: url(../images/btn_back.png);
}
#srpgs-control-next {
	background-image: url(../images/btn_next.png);
}
#srpgs-control-play-pause {
	background-image: url(../images/btn_pause.png);
	display: block !important;
}
#srpgs-control {
	position: fixed;
	height: 100%;
	bottom: 0px;
	margin: 0 auto;
	right: 0;
	background: #000;
	width: 170px;
}
#srpgs-control div {
	position: relative;
}
#srpgs-control div.srpgs-thumbs-nav {
	background: no-repeat top center;
	width: 82px;
	height: 40px;
	left: 45px;
	margin: 10px 0 0 0;
	cursor: pointer;
}
#srpgs-control div.up {
	background-image: url(../images/up.png);
}
#srpgs-control div.down {
	background-image: url(../images/down.png);
}
#srpgs-control div.copyright {
	top: 0;
	margin: 0;
	padding: 0;
	height: 5px;
	line-height: 5px;
	font-size: 10px;
	text-align: right;
}
#srpgs-control div.copyright a {
	text-decoration: none;
	color: white;
	background-color: orange;
	padding: 1px;
}
#srpgs-control div.copyright a:hover {
	background-color: silver;
}
#srpgs-thumbs-gallery {
	height: 77%;
	margin-bottom: 10px;
	text-align: center;
	overflow: hidden;
	padding: 0 0 0 5px;
	width: 144px;
}
#srpgs-thumbs-gallery img {
	width: 140px;
	height: 85px;
	cursor: pointer;
	border: 1px solid #ccc;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	margin: 19px auto;
	display: block;
}
#srpgs-thumbs-gallery img:hover, #srpgs-thumbs-gallery img.active {
	border: 1px solid #fff;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}
#srpgs-control-btns {
	padding-left: 34px;
}
@media screen and (max-width:1000px) {
#srpgs-thumbs-gallery img {
	width: 70px;
	height: 70px;
}
#srpgs-control div.srpgs-thumbs-nav {
	height: 35px;
}
#srpgs-control div.copyright {
	height: 5px;
}
}
@media screen and (max-width:800px) {
#srpgs-thumbs-gallery img {
	width: 60px;
	height: 60px;
}
#srpgs-control div.srpgs-thumbs-nav {
	height: 30px;
}
#srpgs-control div.copyright {
	height: 5px;
}
#srpgs-picture-title {
	font-size: 16px;
}
}
@media screen and (max-width:600px) {
#srpgs-thumbs-gallery img {
	width: 50px;
	height: 50px;
}
#srpgs-control div.srpgs-thumbs-nav {
	height: 25px;
}
#srpgs-control div.copyright {
	height: 5px;
}
}
@media screen and (max-width:400px) {
#srpgs-thumbs-gallery img {
	width: 40px;
	height: 40px;
}
#srpgs-control div.srpgs-thumbs-nav {
	height: 20px;
}
#srpgs-control div.copyright {
	height: 5px;
}
#srpgs-picture-title {
	font-size: 12px;
}
}


/* witten */
@media screen and (max-width:1024px) {
#srpgs-control {
	visibility:hidden;
}
}

@media only screen and (min-width: 320px) and (max-width: 1279px) {

#srpgs-container {
	height: 100%;
}
.srpgs-holder {
	background-position: center top;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
}
#srpgs-control {
	height: 110px;
	position: relative;
}

}