/*
	Template Name: Contrast_Custom
	Template URI: www.slidetabs.com
	Description: Tabs with border shadow.
	Author: SlideTabs
	Author URI:
*/

/* NOTE: Prefix the template styles with <TEMPLATE FOLDER NAME>-horizontal/vertical */


/* 
 * Horizontal Tabs
 *
------------------------------------------------------------------------------------- */
div.contrast_custom-horizontal { /* The main container */	
	position:relative;
	clear:both;
	width:100%; /* Set the full width */
	border:1px solid #d1d1d1;
	border-radius:5px;
	background-color:#f5f5f5;
	box-shadow:0 0 4px rgba(0, 0, 0, 0.06);
}

/* Directional Buttons (horizontal)
------------------------------------------------------------------------------------- */
div.contrast_custom-horizontal > div.st_tabs a.st_prev, 
div.contrast_custom-horizontal > div.st_tabs a.st_next { /* Directional buttons (previous/next) */
	display:none;
	position:absolute;
	top:0px;
	z-index:110;
	height:48px;
	width:48px;
	text-indent:-999em;
	outline:none;
	background:transparent url("images/arrows_h.png") no-repeat;
}
div.contrast_custom-horizontal > div.st_tabs a.st_prev { /* Previous button */
	left:0px;
	border-right:1px solid #dcdcdc;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	background-position:center 18px;
}
div.contrast_custom-horizontal > div.st_tabs a.st_prev:hover { /* Previous button hover */
	background-color:#fff;
}
div.contrast_custom-horizontal > div.st_tabs a.st_next { /* Next button */
	right:0px;
	border-left:1px solid #dcdcdc;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	background-position:center -16px;
}
div.contrast_custom-horizontal > div.st_tabs a.st_next:hover { /* Next button hover */
	background-color:#fff;
}
div.contrast_custom-horizontal > div.st_tabs a.st_prev.st_btn_disabled, 
div.contrast_custom-horizontal > div.st_tabs a.st_next.st_btn_disabled { /* Previous and next buttons disabled state */
	cursor:default;
}
div.contrast_custom-horizontal > div.st_tabs a.st_btn_disabled:hover {
	background-color:#f5f5f5;
}
div.contrast_custom-horizontal > div.st_tabs a.st_prev.st_btn_disabled { /* Previous button disabled state */
	background-position:center -118px;
}
div.contrast_custom-horizontal > div.st_tabs a.st_next.st_btn_disabled { /* Next button disabled state */
	background-position:center -152px;
}

/* Tabs (horizontal)
------------------------------------------------------------------------------------- */
div.contrast_custom-horizontal > div.st_tabs { /* Tabs main container */		
	position:relative;
	z-index:100;		
	width:100% !important;	
	height:49px;
	overflow:hidden;
	background:url("images/border_bottom.png") repeat-x 0 bottom;
}
div.contrast_custom-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%;
	height:100%;
}
div.contrast_custom-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:0px 48px; /* Adds side margins to make space for the arrow buttons */
}
div.contrast_custom-horizontal > div.st_tabs ul { /* Tabs unordered list */
	width:10000px; /* Set to an arbitrary high value */
	margin:0px;
	padding:0px;
	list-style:none;
}
div.contrast_custom-horizontal > div.st_tabs ul li { /* Tab list elements */
	display:block;
	float:left;
	margin:0px;
}
div.contrast_custom-horizontal > div.st_tabs ul li.st_li_active { /* Tab active/highlighted state */
	padding-bottom:1px;
	background:#fff url("images/arrow_bottom.png") no-repeat center bottom;
	border-top-left-radius:5px;
}
div.contrast_custom-horizontal > div.st_tabs ul li a { /* Tab links */
	display:block;
	position:relative;
	height:48px;
	margin:0px;
	padding:0 40px;
	font-size:12px;
	line-height:48px;
	color:#6a6a6a;
	text-decoration:none;
	outline:none;
	border-right:1px solid #e1e1e1;
	border-left:1px solid #fff;
}
div.contrast_custom-horizontal > div.st_tabs ul a:hover { /* Tabs hover state */
	color:#000;
	background-color:#fff;
}
div.contrast_custom-horizontal > div.st_tabs ul li a.st_tab_first {
	border-left:0 none;
}
div.contrast_custom-horizontal > div.st_tabs ul li a.st_tab_active { /* Tab active/highlighted state */
	color:#000;
}
div.contrast_custom-horizontal > div.st_tabs ul li a.st_tab_active:hover {
	background:none;
}
div.contrast_custom-horizontal > div.st_tabs ul li a.st_tab_last { /* Last tab element (with tab sliding activated) */
	border-right:0 none;
}

/* Content (horizontal)
------------------------------------------------------------------------------------- */
div.contrast_custom-horizontal > div.st_views { /* Main content container */
	position:relative;
	z-index:5;
	height:400px;
	padding:0px !important; /* No padding on this container */
	line-height:19px;
	border-top:1px solid #d1d1d1;
	border-top:0 none;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
	background-color:#fff;
	overflow:hidden;
}
div.contrast_custom-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:center center !important;
	background-color:transparent !important;
}
div.contrast_custom-horizontal > div.st_views div.st_view_inner { /* Inner content containers */
	padding:30px; /* Padding for the content */
}
div.contrast_custom-horizontal > div.st_views div.st_view_first { /* First content container */
	display:block; /* Show the first content container */
}

/* Bottom-aligned Tabs (horizontal)
------------------------------------------------------------------------------------- */
div.contrast_custom-horizontal.align_bottom { /* The main container */
	padding-bottom:49px; /* Set to the total height of div.st_tabs */
}
div.contrast_custom-horizontal.align_bottom > div.st_tabs a.st_prev,
div.contrast_custom-horizontal.align_bottom > div.st_tabs a.st_next { /* Directional buttons (previous/next) */
	top:1px;
}
div.contrast_custom-horizontal.align_bottom > div.st_tabs { /* Tabs main container */
	position:absolute; /* Absolute position the tabs container at the bottom of the main container */
	bottom:0px;
	left:0px;
	background:url("images/border_top.png") repeat-x 0 top;
	box-shadow:0 0 4px rgba(0, 0, 0, 0.06);
}
div.contrast_custom-horizontal.align_bottom > div.st_tabs div.st_tabs_wrap { /* Tabs slide-container */
	padding-top:1px;
}
div.contrast_custom-horizontal.align_bottom > div.st_tabs ul li.st_li_active { /* Tab active/highlighted state */
	margin-top:-1px;
	padding-top:1px;
	padding-bottom:0;
	background:#fff url("images/arrow_top.png") no-repeat center top;
	border-top-left-radius:0px;
	border-bottom-left-radius:5px;
}
div.contrast_custom-horizontal.align_bottom > div.st_views { /* Main content container */
	border-top-right-radius:5px;
	border-top-left-radius:5px;
	/* Reset bottom border radius */
	border-bottom-right-radius:0px;
	border-bottom-left-radius:0px;
}


/* 
 * Vertical Tabs
 *
------------------------------------------------------------------------------------- */
div.contrast_custom-vertical { /* The main container */
	position:relative;
	clear:both;
	width:100%; /* Set the full width */
	box-shadow:0 0 4px rgba(0, 0, 0, 0.06);
}

/* Control Buttons (vertical)
------------------------------------------------------------------------------------- */
div.contrast_custom-vertical > div.st_tabs a.st_prev, 
div.contrast_custom-vertical > div.st_tabs a.st_next { /* Directional buttons (previous/next) */	
	display:none;
	float:left;
	position:relative;
	z-index:100;	
	height:36px;
	width:103px;
	text-indent:-999em;
	border-right:1px solid #dcdcdc;
	border-bottom:1px solid #dcdcdc;
	outline:none;
	background:#f5f5f5 url("images/arrows_v.png") no-repeat;	
}
div.contrast_custom-vertical > div.st_tabs a.st_prev { /* Previous button */
	background-position:center 11px;
}
div.contrast_custom-vertical > div.st_tabs a.st_prev:hover { /* Previous button hover */
	background-color:#fff;
}
div.contrast_custom-vertical > div.st_tabs a.st_next { /* Next button */
	border-right-color:#d1d1d1;
	background-position:center -18px;
}
div.contrast_custom-vertical > div.st_tabs a.st_next:hover { /* Next button hover */
	background-color:#fff;
}
div.contrast_custom-vertical > div.st_tabs a.st_prev.st_btn_disabled,
div.contrast_custom-vertical > div.st_tabs a.st_next.st_btn_disabled { /* Previous and next buttons disabled state */
	cursor:default;
}
div.contrast_custom-vertical > div.st_tabs a.st_btn_disabled:hover {
	background-color:#f5f5f5;
}
div.contrast_custom-vertical > div.st_tabs a.st_prev.st_btn_disabled { /* Previous button disabled state */
	background-position:center -105px;
}
div.contrast_custom-vertical > div.st_tabs a.st_next.st_btn_disabled { /* Next button disabled state */
	background-position:center -134px;
}

/* Tabs (vertical)
------------------------------------------------------------------------------------- */
div.contrast_custom-vertical > div.st_tabs { /* Tabs main container */
	position:relative;
	z-index:100;
	float:left;
	width:208px;
	height:437px;
	margin-right:-1px;
	border:1px solid #999999;
	border-right:0 none;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	overflow:hidden;
	background:#800000 url("images/border_right.png") repeat-y right 0;    /* default:  #f5f5f5 */
}
div.contrast_custom-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;
}
div.contrast_custom-vertical > div.st_tabs ul { /* Tabs unordered list */
	float:left;
	margin:0px;
	padding:0px;
	list-style:none;
}
div.contrast_custom-vertical > div.st_tabs ul li { /* Tab list elements */
	position:relative;
	float:left;
	clear:both;
	margin:0px;
}
div.contrast_custom-vertical > div.st_tabs ul li.st_li_active { /* The active tab's parent <li> element */
	padding-right:1px;
	background:url("images/arrow_right.png") no-repeat right 0 #E3E3E3;    /* default: #fff */
}
div.contrast_custom-vertical > div.st_tabs ul li a { /* Tab links */
	position:relative;
	display:block;
	font-size:13px;
	line-height:50px;
	color:#F2F2F2;
	text-decoration:none;
	width:207px;
	height:48px;
	margin:0px;
	text-indent:20px;
	outline:none;
	border-top:1px solid #BDBDBD;
	border-bottom:1px solid #D4D4D4;
}
div.contrast_custom-vertical > div.st_tabs ul li a:hover { /* Tabs hover state */
	color:#000;
   	font-weight:bold;
	background-color:#E3E3E3;
}
div.contrast_custom-vertical > div.st_tabs ul li a.st_tab_active { /* Tab active/highlighted state */
	position:relative;
	z-index:10;
	font-weight:bold;
	color:#000000;
}
div.contrast_custom-vertical > div.st_tabs ul li a.st_tab_active:hover {
	background:none;
}
div.contrast_custom-vertical > div.st_tabs ul li a.st_tab_last { /* Last tab link */
	border-bottom-color:#f5f5f5;
}

/* Content (vertical)
------------------------------------------------------------------------------------- */
div.contrast_custom-vertical > div.st_views { /* Main content container */
	position:relative;
	z-index:5;
	height:437px;
	line-height:18px;
	border:1px solid #d1d1d1;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	background-color:#fff;
	overflow:hidden;
}
div.contrast_custom-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:center center !important;
	background-color:transparent !important;
}
div.contrast_custom-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.contrast_custom-vertical > div.st_views div.st_view_first { /* First content container */
	display:block; /* Show the first content container */
}

/* Right-aligned Tabs (vertical)
------------------------------------------------------------------------------------- */
div.contrast_custom-vertical.align_right > div.st_tabs a.st_prev, 
div.contrast_custom-vertical.align_right > div.st_tabs a.st_next { /* Directional buttons (previous/next) */	
	border-right:0 none;
	border-left:1px solid #dcdcdc;
}
div.contrast_custom-vertical.align_right > div.st_tabs a.st_prev { /* Previous button */
	margin-left:-1px;
	padding-left:1px;
}
div.contrast_custom-vertical.align_right > div.st_tabs a.st_next { /* Previous button */
}
div.contrast_custom-vertical.align_right > div.st_tabs { /* Tabs main container */  	
	float:right;
	margin-left:-1px;
	margin-right:0px;
	padding-left:1px;	
	border-right:1px solid #d1d1d1;
	border-left:0 none;	
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	/* Reset left border radius */
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
	background:#f5f5f5 url("images/border_left.png") repeat-y 0 0;
}
div.contrast_custom-vertical.align_right > div.st_tabs ul li.st_li_active { /* The active tab's parent <li> element */
	margin-left:-1px;
	padding-right:0px;
	padding-left:1px;
	background:url("images/arrow_left.png") no-repeat 0 0 #fff;
}
div.contrast_custom-vertical.align_right > div.st_views { /* Main content container */
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	/* Reset right border radius */
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
}


/* 
 * Media Queries
 *
------------------------------------------------------------------------------------- */
@media screen and (max-width: 760px) {
	/* Vertical Tabs
	------------------------------------------------------------------------------------- */
	
	/* Arrow Buttons (vertical) */
	div.contrast_custom-vertical > div.st_tabs a.st_prev, 
	div.contrast_custom-vertical > div.st_tabs a.st_next { /* Directional buttons (previous/next) */					
		width:50px;
	}
	
	/* Tabs (vertical) */
	div.contrast_custom-vertical > div.st_tabs {
		width:51px;
	}
	div.contrast_custom-vertical > div.st_tabs ul li a {
		width:50px;
		text-indent:-1000em;
	}
	
	/* Right-aligned Tabs (vertical) */
	div.contrast_custom-vertical.align_right > div.st_tabs a.st_prev,
	div.contrast_custom-vertical.align_right > div.st_tabs a.st_next {
		margin-left:-1px;
	}
}