/*
Tabs - additional IE specific bug fixes

Recommended usage (Conditional Comments):
<_--[if lte IE 7]>
<link rel="stylesheet" href="tabs_ie.css" type="text/css" media="projection, screen" />
<_[endif]-->

*/

.tabs-nav 
{ /* auto clear */
    display:                inline-block;
}

.tabs-nav .tabs-disabled 
{
    position:               relative; /* fixes opacity */
    _filter:                 alpha(opacity=40);
}

.tabs-nav .tabs-disabled a span     
{
    _height:                19px; /* for some reason the height is 1px to less with opacity... */
    min-height:             19px; /* ...in both IE 6 and 7 */
}

/* Caution_ Ensure accessibility in print and other media types... */
@media projection, screen 
{ /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide 
    {
        display:            none;
    }
}

/* Hide useless elements in print layouts... */
@media print 
{
    .tabs-nav 
    {
        display:            none;
    }
}

/* Skin */
.tabs-nav 
{
    list-style:             none;
    margin:                 0;
    padding:                5px 0 0 5px;
}

.tabs-nav:after 
{ /* clearing without presentational markup, IE gets extra treatment */
    display:                block;
    clear:                  both;
    content:                " ";
}

.tabs-nav li 
{
    float:                  left;
    margin:                 0 0 0 1px;
    min-width:              84px; /* be nice to Opera */
}

.tabs-nav a, .tabs-nav a span 
{
    display:                block;
    padding:                0 7px;
    background:             url(/images/tab.png) no-repeat;
}

.tabs-nav a 
{
    position:               relative;
    top:                    1px;
    z-index:                2;
    padding-left:           0;
    color:                  #999;
    font-size:              12px;
    font-weight:            bold;
    line-height:            12pt;
    text-align:             center;
    text-decoration:        none;
    white-space:            nowrap; /* required in IE 6 */    
    
}

.tabs-nav .tabs-selected a 
{
    color:                  #AD040A;
}

.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active 
{
    background-position:    100% -150px;
    outline:                0; /* prevent dotted border in Firefox */
}

.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active 
{
    background-position:    100% -100px;
}

.tabs-nav a span 
{
    width:                  64px; /* IE 6 treats width as min-width */
    min-width:              64px;
    height:                 18px; /* IE 6 treats height as min-height */
    min-height:             18px;
    padding-top:            4px;
    padding-right:          0;
}

*>.tabs-nav a span 
{ /* hide from IE 6 */
    width:                  auto;
    height:                 auto;
}

.tabs-nav .tabs-selected a span 
{
    padding-top:            5px;
}

.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span 
{
    background-position:    0 -50px;
}

.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span 
{
    background-position:    0 0;
}

.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited 
{ /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor:                 text;
}

.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active 
{ /* @ Opera, we need to be explicit again here now... */
    cursor:                 pointer;
    color:                  Black;
}

.tabs-nav .tabs-disabled 
{
    _opacity:                .4;
}

.tabs-container 
{
    border-top:             1px solid #ccc;
    padding:                1em 8px;
    background:             #fff;
}

.tabs-loading em 
{
    padding:                0 0 0 20px;
    background:             url(/images/loading.gif) no-repeat 0 50%;
}
