/* 
	Template Name: Project Slideshow
	Template URI: www.slidetabs.com
	Description: Tabs with spacing and separate position from the content
	Version: 1.0.5
	Author: SlideTabs
	Author URI:
*/

/* NOTE: Prefix the template styles with <TEMPLATE FOLDER NAME>-horizontal/vertical */


/* 
 * Horizontal Tabs
 *
------------------------------------------------------------------------------------- */
div.slideshow-horizontal { /* The main container */	
	position:relative;
	clear:both;
	width: 100%; /* Set the full width */
	margin: 0;
}

/* Directional Buttons (horizontal)
------------------------------------------------------------------------------------- */

div.slideshow-horizontal > div.st_tabs a.st_prev, 
div.slideshow-horizontal > div.st_tabs a.st_next { /* Directional buttons (previous/next) */
	z-index: 999;
	height: 35px;
	width: 25px;
	text-indent: -9999em;
	outline: none;
}

div.slideshow-horizontal > div.st_tabs a.st_prev {
	background: url(images/prev.png) no-repeat;
}

div.slideshow-horizontal > div.st_tabs a.st_next {
	background: url(images/next.png) no-repeat;	
}

div.slideshow-horizontal > div.st_tabs a.st_prev:hover, div.slideshow-horizontal > div.st_tabs a.st_next:hover { /* Previous/Next button hover */	
	background-position: center -35px;	
}

div.slideshow-horizontal > div.st_tabs a.st_prev.st_btn_disabled, 
div.slideshow-horizontal > div.st_tabs a.st_next.st_btn_disabled { /* Previous and next buttons disabled state */
	cursor: default;
}

div.slideshow-horizontal > div.st_tabs a.st_prev.st_btn_disabled { /* Previous button disabled state */
	background-position:center -106px;
}

div.slideshow-horizontal > div.st_tabs a.st_next.st_btn_disabled { /* Next button disabled state */
	background-position:center -136px;
}

/* Tabs (horizontal)
------------------------------------------------------------------------------------- */
div.slideshow-horizontal > div.st_tabs { /* Tabs main container */	
	position: absolute;
	bottom: 40%;
	right: 0;
	z-index: 100;		
	width: 25px !important;	
	height: 70px;
	overflow: hidden;
}

div.slideshow-horizontal.st_sliding_active > div.st_tabs { /* Tabs main container - sliding active (the '.st_sliding_active' class is added to the tabs main container when the tabs are 'slidable') */
}

div.slideshow-horizontal > div.st_tabs div.st_tabs_wrap { /* Tabs slide-container */
	position:relative !important; /* Don't remove: The tabs sliding position will be calculated from the tabs <ul> first parent element with position:relative */
	width: 100%;
}

div.slideshow-horizontal.st_sliding_active > div.st_tabs div.st_tabs_wrap { /* The '.st_sliding_active' class is added to the main container when tab sliding is activated */
	width:auto !important;
	margin: 0 50px; /* Adds side margins to make space for the arrow buttons */
}

div.slideshow-horizontal > div.st_tabs ul { /* Tabs unordered list */
    width: 640px; /* Set to an arbitrary high value */
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: absolute;
	bottom: 0;
	right: 0;
}

div.slideshow-horizontal > div.st_tabs ul li { /* Tab list elements */
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}

div.slideshow-horizontal > div.st_tabs ul li a { /* Tab links */
	display: block;
	height: 41px;
	margin: 0px;
	margin-right: 5px;
	padding: 0 30px;
	font: bold 12px/41px Arial, Helvetica, sans-serif;	
	color: #6a6a6a;
	text-decoration:none;
	outline:none;
}

div.slideshow-horizontal > div.st_tabs ul li a:hover { /* Tabs hover state */
	
}

div.slideshow-horizontal > div.st_tabs ul li a.st_tab_first { /* First tab element */
	
}

div.slideshow-horizontal > div.st_tabs ul li a.st_tab_last { /* Last tab element */
	margin-right:0px;
}

div.slideshow-horizontal > div.st_tabs ul li a.st_tab_active { /* Tab active/highlighted state */
}

/* Content (horizontal)
------------------------------------------------------------------------------------- */
div.slideshow-horizontal > div.st_views img {
	width: 660px;
	height: 360px;
}

div.slideshow-horizontal > div.st_views { /* Main content container */
	position: relative;
	height: 395px;
	padding: 0px !important; /* No padding on this container */
	overflow: hidden;	
}

div.slideshow-horizontal > div.st_views div.st_view { /* Content containers - NOTE: background images will be set on these containers */
	width:100%;
	height:100%;
	overflow:hidden;
	background-image:none;
	-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* Set 'border-box' box-sizing when using 100% width/height combined with margin or padding */
	/* Background-image attributes */
	background-repeat:no-repeat !important;
	background-position: 0px 0px !important;
	background-color:transparent !important;
}

div.slideshow-horizontal > div.st_views div.st_view_inner { /* Inner content containers */	
}

div.slideshow-horizontal > div.st_views div.st_view_first { /* First content container */
	display: block; /* Show the first content container */
}

div.about-slideshow-horizontal > div.st_views div.st_view_first img {
	display: block;
}