/* 
	Template Name: Dotted
	Template URI:
	Description: Dotted style tabs.
	Version: 1.0
	Author: 360north
	Author URI:
*/

/* NOTE: Prefix the template styles with st_template_(template folder name)-horizontal/vertical */

/* 
 * Horizontal Tabs
 *
------------------------------------------------------------------------------------- */

div.st_template_dotted-horizontal { /* The main container */	
	position:relative;
	clear:both;
	width:775px; /* Set the full width */	
	color:#616161;
}

/* Control buttons
------------------------------------------------------------------------------------- */
div.st_template_dotted-horizontal a.st_prev, 
div.st_template_dotted-horizontal a.st_next { /* Directional buttons (previous/next) */
	position:absolute;
	top:0px;
	z-index:110;
	display:none;
	height:42px;
	width:42px;
	border:1px solid #F4F4F4;
	outline:none;
	background:#fff url(btn_arrows.gif) no-repeat;	
}

div.st_template_dotted-horizontal a.st_prev { /* Previous button */
	left:0px;
	background-position:12px 14px;
	border-top-left-radius:4px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; /* Set top left borders */
}

div.st_template_dotted-horizontal a.st_prev:hover { /* Previous button hover */
	background-color:#0a4d87;
}

div.st_template_dotted-horizontal a.st_next { /* Next button */
	right:0px;
	background-position:11px -16px;
	border-top-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; /* Set top right borders */
}

div.st_template_dotted-horizontal a.st_next:hover { /* Next button hover */
	background-color:#f2f2f2;
}

div.st_template_dotted-horizontal a.st_prev.st_btn_disabled, 
div.st_template_dotted-horizontal a.st_next.st_btn_disabled { /* Previous and next buttons disabled state */
	cursor:default;
	background-color:#1A3E61;
}

div.st_template_dotted-horizontal a.st_prev.st_btn_disabled { /* Previous button disabled state */
	background-position:-46px 14px;
}

div.st_template_dotted-horizontal a.st_next.st_btn_disabled { /* Next button disabled state */
	background-position:-47px -16px;
}

/* Tabs
------------------------------------------------------------------------------------- */
div.st_template_dotted-horizontal div.st_tabs_container { /* Tabs main container */		
	position:relative;
	z-index:100;		
	width:100% !important;	
	height:42px;
	border-bottom:1px solid #dddddd;
}

div.st_template_dotted-horizontal div.st_slide_container { /* Tabs slide-container */
	position:relative !important; /* The tabs position will be calculated from ul.tabs first parent element with position:relative */
	height:48px;
	border:1px solid #dddddd;
	border-bottom:0 none;
	border-top-left-radius:4px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px;
	border-top-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px;
	overflow:hidden;
}

div.st_template_dotted-horizontal div.st_sliding_active div.st_slide_container { /* The .st_sliding_active class is added to the div.st_tabs_container element when tab sliding is activated */
	margin:0px 43px; /* Adds side margins to make space for the arrow buttons */
	border-left:0 none;
	border-right:0 none;
	/* Reset bottom borders */
	border-top-left-radius:0px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px;
	border-top-right-radius:0px; -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px;
}

div.st_template_dotted-horizontal ul.st_tabs { /* Tabs unordered list */
	width:10000px; /* Set to an arbitrary high value */
	height:42px;
	margin:0px;
	padding:0px;
	list-style:none;
	background:#0a4d87;
	overflow:visible;
}

div.st_template_dotted-horizontal ul.st_tabs li { /* Tab list elements */
	float:left;
	height:42px;
	margin:0px;
	padding:0px;
}

div.st_template_dotted-horizontal ul.st_tabs li:hover, /* Tab list elements hover state */
div.st_template_dotted-horizontal ul.st_tabs li.st_active_li { /* Tab -parent- li active/highlighted state */	
	background:#3f7fb5; /* Active tab -parent- background color */
}

div.st_template_dotted-horizontal ul.st_tabs li a { /* Tab links */
	display:block;
	margin:0px;
	padding:11px 28px 19px;
	font:12px/18px Arial, Helvetica, sans-serif;
	color:#FFF;
	text-decoration:none;
	outline:none;
	background:transparent url(dot.gif) no-repeat center 37px;
}

div.st_template_dotted-horizontal ul.st_tabs a:hover, /* Tabs hover state */
div.st_template_dotted-horizontal ul.st_tabs a.st_tab_active { /* Tab active/highlighted state */
	color:#FFF;
}

div.st_template_dotted-horizontal ul.st_tabs li a.st_first_tab {} /* First tab */

div.st_template_dotted-horizontal ul.st_tabs li a.st_last_tab {} /* Last tab */


/* Content
------------------------------------------------------------------------------------- */
div.st_template_dotted-horizontal div.st_view_container { /* Main content container */
	position:relative;
	z-index:5;
	height:277px;
	padding:20px 20px 23px; /* Set the padding for the content here */
	border:1px solid #F4F4F4;	
	border-bottom-left-radius:4px; -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px;
	border-bottom-right-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px;
	background-color:#fff;
	overflow:hidden;
}

div.st_template_dotted-horizontal div.st_view { /* Slide-container for the content */
	position:relative;
	height:100%;
	overflow:hidden;
}

div.st_template_dotted-horizontal div.st_tab_view { /* Individual content containers */
	display:none; /* Hides the content when Javascript is disabled */
	width:100%;	
}

div.st_template_dotted-horizontal div.st_first_tab_view {
	display:block; /* Show the first content container */
}

div.st_template_dotted-horizontal div.st_view h2 {
	font-size:26px;
	color:#454545;
	margin:0 0 16px;
	padding:0px;
}

div.st_template_dotted-horizontal div.st_view p { /* Content paragraphs */
	margin:14px 0 0;
	padding:0px;
}

/* Bottom aligned tabs
------------------------------------------------------------------------------------- */
div.st_template_dotted-horizontal.align_bottom { /* The main container */
	margin-bottom:43px; /* Set to the total height of the div.st_tabs_container */
}

div.st_template_dotted-horizontal.align_bottom a.st_prev, 
div.st_template_dotted-horizontal.align_bottom a.st_next { /* Directional buttons (previous/next) */
	top:5px;
}

div.st_template_dotted-horizontal.align_bottom a.st_prev { /* Previous button */
	border-top-left-radius:0px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; /* Reset top borders */
	border-bottom-left-radius:4px; -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; /* Set bottom borders */
}

div.st_template_dotted-horizontal.align_bottom a.st_next { /* Next button */
	border-top-right-radius:0px; -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; /* Reset top borders */
	border-bottom-right-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; /* Set bottom borders */
}

div.st_template_dotted-horizontal.align_bottom div.st_tabs_container { /* Tabs main container */
	position:absolute; /* Absolute position the tabs container at the bottom of the main container */
	bottom:-36px;
	left:0px;	
	border-bottom:0 none;
	margin-bottom:0px;
}

div.st_template_dotted-horizontal.align_bottom div.st_slide_container { /* Tabs slide-container */	
	height:42px;	
	padding-top:6px;
	border-top:0 none;
	border-bottom:1px solid #dddddd;	
	/* Reset top borders */
	border-top-left-radius:0px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; 
	border-top-right-radius:0px; -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px;	
	/* Set bottom borders */
	border-bottom-left-radius:4px; -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; 
	border-bottom-right-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px;
}

div.st_template_dotted-horizontal.align_bottom div.st_sliding_active div.st_slide_container { /* The .st_sliding_active class is added to the div.st_tabs_container element when tab sliding is activated */
	/* Reset bottom borders */
	border-bottom-left-radius:0px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px;
	border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px;
}

div.st_template_dotted-horizontal.align_bottom ul.st_tabs li a { /* Tab links */	
	position:relative;
	top:-6px;
	padding:19px 28px 11px;	
	background-position:center 0px;
}

div.st_template_dotted-horizontal.align_bottom ul.st_tabs a:hover, /* Tabs hover state */	
div.st_template_dotted-horizontal.align_bottom ul.st_tabs a.st_tab_active { /* Tab active/highlighted state */
	background:transparent url(dot_active.png) no-repeat center 0px;
}

div.st_template_dotted-horizontal.align_bottom div.st_view_container { /* Main content container */	
	/* Reset bottom borders */
	border-bottom-left-radius:0px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px;
	border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px;
}

/* 
 * Vertical Tabs
 *
------------------------------------------------------------------------------------- */

div.st_template_dotted-vertical { /* The main container */
	position:relative;
	float:left;
	clear:both;
	width:775px; /* Set the full width */
	color:#616161;
}

/* Control buttons
------------------------------------------------------------------------------------- */
div.st_template_dotted-vertical a.st_prev, 
div.st_template_dotted-vertical a.st_next { /* Directional buttons (previous/next) */	
	display:none;
	float:left;
	position:relative;
	z-index:100;	
	height:36px;
	width:92px;
	border-right:1px solid #EEE;
	border-bottom:1px solid #EEE;
	outline:none;	
	background:#fff url(btn_arrows.gif) no-repeat;	
}

div.st_template_dotted-vertical a.st_prev { /* Previous button */
	background-position:35px -56px;
}

div.st_template_dotted-vertical a.st_prev:hover { /* Previous button hover */
	background-color:#f5f5f5;
}

div.st_template_dotted-vertical a.st_next { /* Next button */
	background-position:35px -86px;
}

div.st_template_dotted-vertical a.st_next:hover { /* Next button hover */
	background-color:#f5f5f5;
}

div.st_template_dotted-vertical a.st_prev.st_btn_disabled,
div.st_template_dotted-vertical a.st_next.st_btn_disabled { /* Previous and next buttons disabled state */
	cursor:default;
	background-color:#fbfbfb;
}

div.st_template_dotted-vertical a.st_prev.st_btn_disabled { /* Previous button disabled state */
	background-position:-28px -56px;
}

div.st_template_dotted-vertical a.st_next.st_btn_disabled { /* Next button disabled state */
	background-position:-28px -86px;
}

/* Tabs
------------------------------------------------------------------------------------- */
div.st_template_dotted-vertical div.st_tabs_container { /* Tabs main container */  	
	position:relative;
	z-index:100;
	float:left;
	width:186px;
	height:349px;
	margin-right:-6px;
	border:1px solid #EEE;	
	border-right:0 none;
	border-top-left-radius:4px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; /* Set top borders */
	border-bottom-left-radius:4px; -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; /* Set bottom borders */
	overflow:hidden;
}

div.st_template_dotted-vertical div.st_slide_container { /* Tabs slide-container */
	position:relative !important; /* The tabs position will be calculated from ul.tabs first parent element with position:relative */
	float:left;
	clear:both;
	width:100%;
	height:100%;
	overflow:hidden;
}

div.st_template_dotted-vertical ul.st_tabs { /* Tabs unordered list */
	float:left;
	height:10000px; /* Set to an arbitrary high value */
	margin:0px;
	padding:0px;
	list-style:none;
	background: #BBBBBB;
	background: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(#B1B1B1));
	background: -moz-linear-gradient(top,  #BBBBBB,  #B1B1B1);
}

div.st_template_dotted-vertical ul.st_tabs li { /* Tab list elements */
	float:left;
	clear:both;
	width:190px; /* The width of the div.st_tabs_container - minus the overflowing content (6px) */
	margin:0px;
	color: #FFFFFF;
	background: #BBBBBB;
	background: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(#B1B1B1));
	background: -moz-linear-gradient(top,  #BBBBBB,  #B1B1B1);
}

div.st_template_dotted-vertical ul.st_tabs li:hover, /* Tab list elements hover state */
div.st_template_dotted-vertical ul.st_tabs li.st_active_li { /* Tab -parent- li active/highlighted state */
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	background: #E9E9E9;
}

div.st_template_dotted-vertical ul.st_tabs li a { /* Tab links */
	display:block;
	width:166px;
	margin:0px;
	padding:15px 6px 15px 15px;
	font-family: 'Conv_thaisanslite_r1';
	font-size: 21px;
	color:#FFF;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-decoration:none;
	outline:none;
	background:transparent url(dot.gif) no-repeat 162px center;
}

div.st_template_dotted-vertical ul.st_tabs a:hover { /* Tabs hover state */  
	color:#111;
}
div.st_template_dotted-vertical ul.st_tabs a.st_tab_active { /* Tab active/highlighted state */	
	color:#111;
	background:transparent url(dot_active.png) no-repeat right center;	
}

div.st_template_dotted-vertical ul.st_tabs li a span {
	display:block;
	clear:both;
	font-size:11px;
	font-weight:normal;
	color:#838383;
	padding-top:0px;
}

/* Content
------------------------------------------------------------------------------------- */
div.st_template_dotted-vertical div.st_view_container { /* Main content container */
	position:relative;
	z-index:5;
	height:305px;
	padding:22px 22px 22px 25px; /* Set the padding for the content here */
	line-height:19px;
	border:1px solid #EEE;
	border-top-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; /* Set top borders */
	border-bottom-right-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; /* Set bottom borders */
	background-color:#fff;
	overflow:hidden;
}

div.st_template_dotted-vertical div.st_view { /* Slide-container for the content */
	position:relative;
	height:100%;
	overflow:hidden;
}

div.st_template_dotted-vertical div.st_tab_view { /* Individual content containers */	
	display:none; /* Hides the content when Javascript is disabled */
	width:100%;	
	margin-bottom:20px;
	background-color:#fff;
}

div.st_template_dotted-vertical div.st_first_tab_view {
	display:block; /* Show the first content container */
}

div.st_template_dotted-vertical div.st_view h2 {	
	font-size:22px;
	color:#222;
	margin:0 0 16px;
	padding:0px;
}

div.st_template_dotted-vertical div.st_view p {	/* Content paragraphs */
	margin:12px 0 0;
	padding:0px;
}

/* Right aligned tabs
------------------------------------------------------------------------------------- */
div.st_template_dotted-vertical.align_right a.st_prev, 
div.st_template_dotted-vertical.align_right a.st_next { /* Directional buttons (previous/next) */
	border-left:1px solid #EEE;
	border-right:0 none;
}

div.st_template_dotted-vertical.align_right a.st_prev { /* Previous button */
	margin-left:5px;
}

div.st_template_dotted-vertical.align_right div.st_tabs_container { /* Tabs main container */  	
	float:right;
	margin-right:0px;
	margin-left:-6px;
	border:1px solid #EEE;	
	border-left:0 none;
	border-top-left-radius:0px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; /* Reset top left borders */
	border-bottom-left-radius:0px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; /* Reset bottom left borders */	
	border-top-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; /* Set top right borders */
	border-bottom-right-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; /* Set bottom right borders */
}

div.st_template_dotted-vertical.align_right div.st_slide_container { /* Tabs slide-container */
	padding-left:5px;
}

div.st_template_dotted-vertical.align_right ul.st_tabs { /* Tabs unordered list */
	width:161px;
	border-left:1px solid #EEE;
	border-right:0 none;
	padding-left:6px;
}

div.st_template_dotted-vertical.align_right ul.st_tabs li { /* Tab list elements */
	margin-left:-6px;
}

div.st_template_dotted-vertical.align_right ul.st_tabs li a { /* Tab links */
	width:141px; 
	margin-left:-6px;
	padding:17px 6px 17px 26px;
	background:transparent url(dot.gif) no-repeat 0px center;	
}

div.st_template_dotted-vertical.align_right ul.st_tabs a:hover, /* Tabs hover state */
div.st_template_dotted-vertical.align_right ul.st_tabs a.st_tab_active { /* Tab active/highlighted state */	
	background:transparent url(dot_active.png) no-repeat 0px center;	
}

div.st_template_dotted-vertical.align_right div.st_view_container { /* Main content container */
	padding:22px 25px 22px 22px; /* Set the padding for the content here */
	border-top-right-radius:0px; -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; /* Reset top right borders */
	border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; /* Reset bottom right borders */
	border-top-left-radius:4px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; /* Set top left borders */
	border-bottom-left-radius:4px; -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; /* Set bottom left borders */
}