﻿/* AjaxToolkit TABS Style */
/*  
You can change the look and feel of Tabs using the Tabs CssClass property. 
Tabs has a predefined set of CSS classes that can be overridden. 
It has a default style ("XP") which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. 
You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\Tabs\Tabs.css" file. 
If your CssClass does not provide values for any of those then it falls back to the default value. 
In the example above the default style is used. 
To customize the same the user would have to set the CssClass property to the name of the CSS style 
and define the styles for the individual classes so that the various elements in a Tab control can be styled accordingly.
For example if the CssClass property was set to "CustomTabStyle" this is how the css to style the tab header would look: 

.CustomTabStyle .ajax__tab_header {
    font-family:verdana,tahoma,helvetica;
    font-size:11px;
    background:url(images/tab-line.gif) repeat-x bottom;
}

Tabs Css classes 
.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. 

*/

/* 
    la classe .ajax__tab_default .ajax__tab_header overrides la classe embedded, e serve per fare il wrap dei tab su piu' linee
    http://littletalk.wordpress.com/2008/11/28/wrap-ajax-tabs-into-multiple-lines/
*/ 
.ajax__tab_default .ajax__tab_header {white-space:normal!important;}


/* cgil theme (to override default) */
.ajax__tab_cgil .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}
.ajax__tab_cgil .ajax__tab_outer {padding-right:4px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right;height:21px;}
.ajax__tab_cgil .ajax__tab_inner {padding-left:3px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}
.ajax__tab_cgil .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}
.ajax__tab_cgil .ajax__tab_hover .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}
.ajax__tab_cgil .ajax__tab_hover .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}
.ajax__tab_cgil .ajax__tab_hover .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}
.ajax__tab_cgil .ajax__tab_active .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}
.ajax__tab_cgil .ajax__tab_active .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}
.ajax__tab_cgil .ajax__tab_active .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}
.ajax__tab_cgil .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

/* Altri stili per la master page */

td.master_topleft 
{
text-align: left;
vertical-align: top;
background-image: url('/grafica/rovescio_01.jpg');
background-repeat: no-repeat;
}
td.master_topcenter 
{
text-align: left;
vertical-align: top;
background-image: url('/grafica/rovescio_02.jpg');
background-repeat: repeat-x;

}
td.master_topright 
{
text-align: left;
vertical-align: top;
background-image: url('/grafica/rovescio_04.jpg');
background-repeat: no-repeat;
}

/* href o hyperlink sul tab di menu e sui links di sottomenu */
.menutabcaption
{
    font-size: 14px;
}
.menutabitemcaption
{
    font-size: 14px;
}

