/* Ajax TabControl Themes

One of the cooler controls the Microsoft included with their implementation 
of AJAX is the TabContainer. The TabContainer easily allows you to create 
(not surprisingly) a tabbed container. While it's easy to setup, it's 
pretty plain out of the box. Thankfully with just a little CSS, we can change this. 

Let's start first by creating the CSS you will need to style your 
container. Below is a brief description of what each element in the 
CSS for the TabContainer does. 

Below is the CSS I'm going to use to style these a bit. While you can go 
crazy and use images, I'm just going to go for a simple, clean look by using some different coloring and font styles. 

.NewsTab .ajax__tab_header 
{
    color: #aa976b;
    font-size: 13px;
    font-weight: bold;
    background-color: White;
    margin-left: 10px;
}
.NewsTab .ajax__tab_outer
{
    background-color: White;
}
.NewsTab .ajax__tab_inner
{
    padding: 6px;
    margin-right: 1px;
    margin-left: 1px;
    margin-top: 1px;
    margin-bottom: 1px;
    background-color: #f8f6ea;
}
.NewsTab .ajax__tab_hover .ajax__tab_outer
{
    background-color: Orange;
}
.NewsTab .ajax__tab_hover .ajax__tab_inner
{
    background-color: #FFFFE1;
}
.NewsTab .ajax__tab_active .ajax__tab_outer
{
    background-color: White;
}
.NewsTab .ajax__tab_active .ajax__tab_inner
{
    background-color: #fefdf7;
}

If you want to see this in action, visit Smthop.com and look at the 
TabContainer on the top of the right side bar. You can also see a 
variation of this used for this site(with slightly different coloring) 
on the right side bar of this page. 

After you get your CSS created, you just need to associate it with your 
TabContainer, which is done simply by added a CssClass property pointing 
to this CSS class in your TabContainer. 

<ajaxToolkit:TabContainer ID="myTabContainer" runat="server" Width="100%" 
	CssClass="NewsTab" >
</ajaxToolkit:TabContainer> 

Definitions:
.ajax__tab_header: 
	A container element that wraps all of the tabs at the top of the 
	TabContainer. Child CSS classes:.ajax__tab_outer. 

.ajax__tab_outer: 
	An outer element of a tab, often used to set the left-side 
	background image of the tab.Child CSS classes: .ajax__tab_inner. 

.ajax__tab_inner: 
	An inner element of a tab, often used to set the right-side image of the tab. 
	Child CSS classes:.ajax__tab_tab. 

.ajax__tab_tab: 
	An element of the tab that contains the text content. Child CSS classes:none. 

.ajax__tab_body: 
	A container element that wraps the area where a TabPanel is displayed. 
	Child CSS classes: none. 

.ajax__tab_hover: 
	This is applied to a tab when the mouse is hovering over. 
	Child CSS classes:.ajax__tab_outer. 

.ajax__tab_active: 
	This is applied to a tab when it is the currently selected tab. 
	Child CSS classes:.ajax__tab_outer. 
*/


.ajax__myTab .ajax__tab_header 
{        
	font-family: Arial, Helvetica, Sans-Serif;        
	font-size: 14px;     
	font-weight:bold;   
	border-bottom: solid 1px #245882     
}         

.ajax__myTab .ajax__tab_outer 
{        
	padding-right: 4px;        
	height: 21px;        
	background-color: #C0C0C0;        
	margin-right: 2px;        
	border-right: solid 1px #245882;        
	border-top: solid 1px #aaaaaa     
}         

.ajax__myTab .ajax__tab_inner 
{        
	padding-left: 3px;        
	background-color: #C0C0C0;     
}         

.ajax__myTab .ajax__tab_tab 
{        
	height: 13px;        
	padding: 4px;        
	margin: 0; 
	font-size:12px;    
}         

.ajax__myTab .ajax__tab_hover .ajax__tab_outer 
{        
	background-color: #cccccc;
	color:White; 
	font-weight:bold;
}         
.ajax__myTab .ajax__tab_hover .ajax__tab_inner 
{        
	background-color: #cccccc;
	color:White;
	font-weight:bold;
}         

.ajax__myTab .ajax__tab_hover .ajax__tab_tab 
{
	color:White;
	font-weight:bold;
}        

.ajax__myTab .ajax__tab_active .ajax__tab_outer 
{        
	background-color: #A5CAE5;        
	border-left: solid 1px #245882;     
}         

.ajax__myTab .ajax__tab_active .ajax__tab_inner 
{        
	background-color:#A5CAE5;     
}         
.ajax__myTab .ajax__tab_active .ajax__tab_tab 
{
	font-weight:bold;
}        

.ajax__myTab .ajax__tab_body 
{        
	font-family: Arial, Helvetica, Sans-Serif;        
	font-size: 12pt;        
	border: 1px solid #245882;        
	border-top: 0;        
	padding: 8px;       
	background-color: #A5CAE5;      
}