/* 
	Template Name: Separated v3
	Template URI: www.slidetabs.com
	Description: Tabs with spacing and separate position from the content
	Version: 1.0
	Author: SlideTabs
	Author URI:
*/

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


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

/* Directional Buttons (horizontal)
------------------------------------------------------------------------------------- */
div.separated_3-horizontal > div.st_tabs a.st_prev, 
div.separated_3-horizontal > div.st_tabs a.st_next { /* Directional buttons (previous/next) */
	display: none;
	position: absolute;
	top: 0px;
	height: 40px;
	width: 43px;
	text-indent: -999em;
	outline: none;
}

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

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

div.separated_3-horizontal > div.st_tabs a.st_prev { /* Previous button */
	left: 0px;
	background-position: center 0;
}

div.separated_3-horizontal > div.st_tabs a.st_prev:hover { /* Previous button hover */	
	background-position: center -40px;
}

div.separated_3-horizontal > div.st_tabs a.st_next { /* Next button */
	right: 0px;
	background-position: center 0;
}
div.separated_3-horizontal > div.st_tabs a.st_next:hover { /* Next button hover */	
	background-position: center -40px;
}

div.separated_3-horizontal > div.st_tabs a.st_prev.st_btn_disabled, 
div.separated_3-horizontal > div.st_tabs a.st_next.st_btn_disabled { /* Previous and next buttons disabled state */
	cursor:default;
	background-color:#f8f8f8;
}
div.separated_3-horizontal > div.st_tabs a.st_prev.st_btn_disabled { /* Previous button disabled state */
	background-position:center -106px;
}
div.separated_3-horizontal > div.st_tabs a.st_next.st_btn_disabled { /* Next button disabled state */
	background-position:center -136px;
}

/* Tabs (horizontal)
------------------------------------------------------------------------------------- */
div.separated_3-horizontal > div.st_tabs { /* Tabs main container */		
	position:relative;		
	width: 100% !important;	
	height: 40px;
	overflow: hidden;
}

div.separated_3-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.separated_3-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.separated_3-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 45px; /* Adds side margins to make space for the arrow buttons */
}

div.separated_3-horizontal > div.st_tabs ul { /* Tabs unordered list */
	width: 10000px; /* Set to an arbitrary high value */
	margin: 0px;
	padding: 0px;
	list-style: none;
}

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

div.separated_3-horizontal > div.st_tabs ul li a { /* Tab links */
	display: block;
	margin: 0;
	padding: 10px 15px 10px 15px;
	text-transform: uppercase;
	color: #999;
	text-decoration: none;
	outline: none;
	border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 0;
    border-right: 1px solid #999;
}

div.separated_3-horizontal > div.st_tabs ul li a:hover { /* Tabs hover state */
	color: #fafafa;	
}

div.separated_3-horizontal > div.st_tabs ul li a.st_tab_first { /* First tab element */
	border-left: 1px solid #999;
}

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

div.separated_3-horizontal > div.st_tabs ul li a.st_tab_active { /* Tab active/highlighted state */
	background: #999;
	color: #fafafa;
}

/* Content (horizontal)
------------------------------------------------------------------------------------- */
div.separated_3-horizontal > div.st_views { /* Main content container */
	position: relative;
	height: 395px;
	padding: 0px !important; /* No padding on this container */
	overflow: hidden;
	
}
div.separated_3-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: repeat-y !important;
	background-position: 0px 0px !important;
	background-color: transparent !important;
}

div.separated_3-horizontal > div.st_views div.st_view_inner { /* Inner content containers */
	padding: 20px; /* Padding for the content */
	width: 60%;
	float: right;
}

div.separated_3-horizontal > div.st_views div.st_view_inner h3 {
	color: #333;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
	font-weight: bold;
}

div.separated_3-horizontal > div.st_views div.st_view_inner p {
	color: #333;
	font-size: .95em;
	padding: 0 0 10px 0;
	margin: 0;
	line-height: 20px;
}

div.separated_3-horizontal > div.st_views div.st_view_inner strong {
	font-weight: bold;
}

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


/* Bottom-aligned Tabs (horizontal)
------------------------------------------------------------------------------------- */
div.separated_3-horizontal.align_bottom > div.st_tabs a.st_prev, 
div.separated_3-horizontal.align_bottom > div.st_tabs a.st_next { /* Directional buttons (previous/next) */
	top: auto;
	bottom: 0px;
}

div.separated_3-horizontal.align_bottom { /* The main container */
	margin-bottom: 48px; /* Set to the total height of div.st_tabs */
}

div.separated_3-horizontal.align_bottom > div.st_tabs { /* Tabs main container */
	position: absolute; /* Absolute position the tabs container at the bottom of the main container */
	bottom: -41px;
	left: 0px;
	margin-bottom: 0;
	padding-top: 4px;
	padding-bottom: 0;
}

div.separated_3-horizontal.align_bottom > div.st_tabs div.st_tabs_wrap { /* Tabs slide-container */
	margin-top: -4px;
	padding-top: 4px;
}

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

div.separated_3-horizontal.align_bottom > div.st_views { /* Main content container */
}


/* 
 * Vertical Tabs
 *
------------------------------------------------------------------------------------- */
div.separated_3-vertical { /* The main container */
	position:relative;
	clear:both;
	width:100%; /* Set the full width */
}

/* Control Buttons (vertical)
------------------------------------------------------------------------------------- */
div.separated_3-vertical > div.st_tabs a.st_prev, 
div.separated_3-vertical > div.st_tabs a.st_next { /* Directional buttons (previous/next) */	
	display:none;
	float:left;
	position:relative;
	z-index:100;	
	height:34px;
	width:93px;
	text-indent:-999em;
	margin-bottom:3px;
	border:1px solid #ccc;
	outline:none;	
	background:#fff url("images/arrows_v.gif") no-repeat;	
}
div.separated_3-vertical > div.st_tabs a.st_prev { /* Previous button */
	border-right:0 none;
	background-position:center 13px;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
}
div.separated_3-vertical > div.st_tabs a.st_prev:hover { /* Previous button hover */
	background-position:center -51px;
	background-color:#f5f5f5;
}
div.separated_3-vertical > div.st_tabs a.st_next { /* Next button */
	background-position:center -19px;
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
}
div.separated_3-vertical > div.st_tabs a.st_next:hover { /* Next button hover */
	background-position:center -83px;
	background-color:#f5f5f5;
}
div.separated_3-vertical > div.st_tabs a.st_prev.st_btn_disabled,
div.separated_3-vertical > div.st_tabs a.st_next.st_btn_disabled { /* Previous and next buttons disabled state */
	cursor:default;
	background-color:#f7f7f7;
}
div.separated_3-vertical > div.st_tabs a.st_prev.st_btn_disabled { /* Previous button disabled state */
	background-position:center -115px;
}
div.separated_3-vertical > div.st_tabs a.st_next.st_btn_disabled { /* Next button disabled state */
	background-position:center -147px;
}

/* Tabs (vertical)
------------------------------------------------------------------------------------- */
div.separated_3-vertical > div.st_tabs { /* Tabs main container */  	
	position:relative;
	z-index:100;
	float:left;
	width:189px; /* +1px for the negative right margin */
	height:393px;
	padding-right:4px;
	margin-right:-1px;
	overflow:hidden;
}
div.separated_3-vertical.st_sliding_active > div.st_tabs { /* Tabs main container - sliding active (the '.st_sliding_active' class is added to the main container when the tabs are 'slidable') */
}
div.separated_3-vertical > 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 */
	float:left;
	clear:both;
	overflow:hidden;
}
div.separated_3-vertical > div.st_tabs ul { /* Tabs unordered list */
	float:left;
	margin:0px;
	padding:0px;
	list-style:none;
}
div.separated_3-vertical > div.st_tabs ul li { /* Tab list elements */
	position:relative;
	float:left;
	clear:both;
	margin:0px;
}
div.separated_3-vertical > div.st_tabs ul li a { /* Tab links */
	display:block;
	width:187px;
	margin:0 0 3px;
	padding:14px 0;
	font:bold 12px/18px Arial, Helvetica, sans-serif;
	color:#5c5c5c;
	text-indent:20px;
	text-decoration:none;
	outline:none;
	border:1px solid #ccc;
	background-color:#f8f8f8;
	/* Background gradient */
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#f4f4f4)); /* Safari 4+, Chrome 1-9 */
	background-image:-webkit-linear-gradient(top, #f9f9f9, #f4f4f4); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image:-moz-linear-gradient(top, #f9f9f9, #f4f4f4); /* Firefox 3.6+ */
	background-image:-ms-linear-gradient(top, #f9f9f9, #f4f4f4); /* IE 10+ */
	background-image:-o-linear-gradient(top, #f9f9f9, #f4f4f4); /* Opera 11.10+ */
	border-radius:4px;
}
div.separated_3-vertical > div.st_tabs ul li a:hover { /* Tabs hover state */
	color:#333;
	background:#fbfbfb;
}
div.separated_3-vertical > div.st_tabs ul li a.st_tab_first { /* First tab element */
}
div.separated_3-vertical > div.st_tabs ul li a.st_tab_last { /* Last tab element */
	margin-bottom:0;
}
div.separated_3-vertical > div.st_tabs ul li a.st_tab_active { /* Tab active/highlighted state */
	padding-right:10px;
	color:#1ca5ec;
	background:#fff;
}
div.separated_3-vertical > div.st_tabs ul li a span {
	display:block;
	clear:both;
	font:italic normal 11px/11px Georgia, "Times New Roman", Times, serif;
	color:#838383;
	padding-top:3px;	
}

/* Content (vertical)
------------------------------------------------------------------------------------- */
div.separated_3-vertical > div.st_views { /* Main content container */
	position:relative;
	z-index:5;
	height:392px;
	line-height:18px;
	border:1px solid #ccc;
	background-color:#fff;
	border-radius:4px;
	border-top-left-radius:3px;
	overflow:hidden;
}
div.separated_3-vertical > 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;
	/* Background-image attributes */
	background-repeat:no-repeat !important;
	background-position:0px 0px !important;
	background-color:transparent !important;
}
div.separated_3-vertical > div.st_views div.st_view_inner { /* Inner content containers - NOTE: the 'Auto Height' option uses the full height of this container to set the height */
	overflow:hidden !important; /* Makes the element wrap around the content */
	padding:30px; /* Padding for the content */
}
div.separated_3-vertical > div.st_views div.st_view_first { /* First content container */
	display:block; /* Show the first content container */
}

/* Right-aligned Tabs (vertical)
------------------------------------------------------------------------------------- */
div.separated_3-vertical.align_right > div.st_tabs { /* Tabs main container */  	
	float:right;
	margin-left:-1px;
	margin-right:0px;
	padding-right:0;
	padding-left:4px;
}
div.separated_3-vertical.align_right > div.st_tabs div.st_tabs_wrap { /* Tabs slide-container */
	margin-left:-4px;
	padding-left:4px;
}
div.separated_3-vertical.align_right > div.st_tabs ul li a.st_tab_active { /* Tab active/highlighted state */
	margin-left:-10px;
	padding-right:0px;
	padding-left:10px;
}