/*!
 *  SimpleSlide [shortcode]
 *  Replace the WordPress Gallery with something just a bit better.
 *  -------------------------------------------------------
 *  Usage examples and documentation be found at: 
 *	http://onesmallpixel.com/plugin/better-gallery-shortcode/
 *
 *  Style is Based on yogaCSS by Jordan Roberts @ yogacss.com
 *
 *  Contact
 *  -------------------------------------------------------
 *  Twitter: http://twitter.com/superherogeek
 *  onesmallpixel.com
 */
 
/**
 * GLOBAL styles 
 */
.osp_ss-bg-yoga {
	position: relative;
	background: #2e2e2e;
}

#osp_ss-simpleslide {
	padding:0;
	margin:0;
	background:#eeeeee;
	clear:both;
}
	
#osp_ss-simpleslide img {
	/*width: 100%;*/
	margin: 0 auto;
	max-width: 100%;
}

#osp_ss-primary-image {
	width: 100%;
	text-align: center;
	margin: 0 auto;
	position: relative;
}
#osp_ss-caption {
	color:#ffffff !important;
	background-color: #555 !important;
	font-size: 14px !important;
	line-height: 18px !important;
	padding: 20px !important;
	font-family: 'Helvetica Neue', Helvetica, arial, sans-serf;

}

#osp_ss-caption h4 {
	color:#ffffff !important;
	background-color: #555 !important;
	font-size: 18px !important;
	line-height: 16px !important;
	margin:0 0 5px 0 !important;
	padding:0 0 5px 0 !important;
	font-family: 'Helvetica Neue', Helvetica, arial, sans-serf;
}

.osp_ss-bg-caption {
	background-color: #333 !important;
	font-size: 16px !important;
	line-height: 18px !important;
	padding: 10px !important;
	margin-top: -10px !important;
	font-family: 'Helvetica Neue', Helvetica, arial, sans-serf;
}

.img-container {
	width:auto;
	/*text-align:center;*/
}
.osp_ss-image {
	width: 120px;
	margin: 10px;
	margin-bottom:0;
	display: inline-block;
}
.osp_ss-image img {
	border: 4px solid #ffffff;
	max-width: auto;
}
.osp_ss-image a.current-image img {
	border: 4px solid yellow;

}
.osp_ss-image a {
	text-decoration: none;
}
.osp_ss-image span.image-number {
	display: block;
	padding: 5%;
	color: #fff;
	font-size: 12px;
	font-family: 'Helvetica Neue', helvetica, arial, sans-serf;
	text-align:left;
}
.osp_ss-image span.view {
	text-align: center;
	display: block;
	margin: 0 auto;
	width: 50%;
	border: 1px solid;
	padding: 5%;
	background: #2e2e2e;
	color: #fff;
	font-size: 12px;
	position: relative;
	top: -40px;
	font-family: 'Helvetica Neue', helvetica, arial, sans-serf;
	transition: opacity 0.5s ease;
	opacity: 0;
}

.osp_ss-image a:hover span.view {
	background: #000000;
	opacity: 1;
}


.right-nav {
	position: absolute;
	right: 0;
	padding: 0 2.2%;
	background-color: #000;
	top: 0;
	height: 100%;
	opacity: .1;
	z-index: 10;
	color:#ffffff;
}

.right-nav:hover, .left-nav:hover {
	opacity: 1;
	cursor: pointer;
} 
.left-nav {
	position: absolute;
	left: 0;
	
	background-color: #000;
	top: 0;
	height: 100%;
	opacity: .1;
	padding: 0 2.2%;
	z-index: 10;
	color:#ffffff;
}

.left-nav span, .right-nav span {
	position: relative;
	top: 47.2%;
}

.next-image {
	position: absolute;
	right: -10px;
	padding: 2.2%;
	background-color: #000;
	top: 50%;
	
	opacity: .25;
	z-index: 10;
	color:#ffffff;
}

.next-image:hover, .prev-image:hover {
	opacity: 1;
	cursor: pointer;

} 
.prev-image {
	position: absolute;
	left: -10px;
	
	padding: 2.2%;
	background-color: #000;
	top: 50%;
	
	opacity: .25;
	z-index: 10;
	color:#ffffff;
}

.next-image span, .prev-image span {
	position: relative;
	top: 47.2%;
}
/**
 * Micro Clearfix
 * http://nicolasgallagher.com/micro-clearfix-hack/
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}


/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.osp_ss-img .cf {
	*zoom: 1;
}


/*----------------------------*/	
/* Flexible Grid ------------ */

/* Container */
.osp_ss-gal-container {
	margin:0 auto;
	width: 93.75%; /* (960px) / 1024 => 1024w x 768h is a common screen resolution */
	padding-top: 1.04166666667%; /* (10px)/960 (10px)/960 */
	text-align: left;

}

.osp_ss-gal-container::-webkit-scrollbar {
    -webkit-appearance: none;
}

.osp_ss-gal-container::-webkit-scrollbar:vertical {
    width: 11px;
}

.osp_ss-gal-container::-webkit-scrollbar:horizontal {
    height: 11px;
}

.osp_ss-gal-container::-webkit-scrollbar-thumb {
 /*   border-radius: 8px;*/
   /*  border: 2px solid #333; should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .75);
}

.osp_ss-gal-container::-webkit-scrollbar-track { 
    background-color: #555; 
    border-radius: 8px; 
}
/* Storage Containers */
.osp_ss-caption-storage {
	display: none;
	visibility: hidden;
	height: 0;
	width: 0;
	line-height: 0;
}

		
	/* Add Horizontal Scroll */
	/* http://stackoverflow.com/questions/15906508/chrome-browser-for-android-no-longer-supports-webkit-overflow-scrolling-is-the */
.osp_ss-gal-container {
	overflow-y: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	width: auto;
	z-index:0;
}

	@media only screen and (max-width : 400px) {
		.osp_ss-image a:hover span.view {
				opacity: 0;
		}
		.next-image, .prev-image, .left-nav, .right-nav {
			display: none;
		} 
	}