/* 
Document   : siteTabs
Created on : Jun 22, 2009, 3:51:42 PM
Author     : tharini.virabadran
Description:
Purpose of the stylesheet follows.
*/

/* 
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root { 
    display: block;
}

#menu ul
{
    float:right;
    list-style-type:none;
    margin:0px;
 
    width:auto;
    vertical-align: bottom;
    position:relative;
}

#menu ul li
{
    float:left;
    background:url('http://zautos.com/images/siteTabs/unselected_start.png') no-repeat;
}

#menu ul li a
{
    float:left;
    background:url('http://zautos.com/images/siteTabs/unselected_end.png') no-repeat;
    background-position: 100% 0%;
    font:12px Arial;
    text-decoration:none;
    font-weight:bold;
    color:#ffffff;
    line-height: 30px;
    padding-right: 10px;
    padding-left: 10px;
}


/* For hover Tab selections */

#menu ul li:hover
{
    float:left;
    background:url('http://zautos.com/images/siteTabs/selected_start.png') no-repeat;
}

#menu ul li a:hover
{
    text-decoration:underline;
    background:url('http://zautos.com/images/siteTabs/selected_end.png') no-repeat;
    background-position: 100% 0%;
    padding-left:10px;
    padding-right:10px;
    font:12px Arial;
    text-decoration:none;
    font-weight:bold;
    color:#000000;
    line-height:30px;
}

#menu ul li:hover a
{
    text-decoration:underline;
    background:url('http://zautos.com/images/siteTabs/selected_end.png') no-repeat;
    background-position: 100% 0%;
    padding-left:10px;
    padding-right:10px;
    font:12px Arial;
    text-decoration:none;
    font-weight:bold;
    color:#000000;
    line-height:30px;
}

/* END of Hover Tab selections */



/* For Current Tab selections */
#menu ul li.active
{
    float:left;
    background:url('http://zautos.com/images/siteTabs/selected_start.png') no-repeat;
}

#menu ul li a.active
{
    text-decoration:underline;
    background:url('http://zautos.com/images/siteTabs/selected_end.png') no-repeat;
    background-position: 100% 0%;
    padding-left:10px;
    padding-right:10px;
    font:12px Arial;
    text-decoration:none;
    font-weight:bold;
    color:#000000;
    line-height:30px;
}

/* END of Current Tab selections */

/* START OF SUBMENU TABS */

#menu #submenu {
    list-style:none;
    margin-top:2px;
    background:#FFFFFF;
}

#menu #submenu li {
    background:#FFFFFF;
    color:#313031;
    font:12px Arial;
    text-decoration:none;
    font-weight:normal;
    line-height: 15px;
    padding-right:0;
}

#menu #submenu li a, #menu #submenu li a:hover {
    background:#FFFFFF;
    color:#ff7929;
    font:12px Arial;
    text-decoration:none;
    font-weight:normal;
    line-height: 15px;
    padding-right:10px;
}

#menu #submenu li a.selected {
    background:#FFFFFF;
    color:#ff7929;
    font:12px Arial;
    text-decoration:underline;
    font-weight:normal;
    line-height: 15px;
    padding-right:10px;
}

#htabs li ul {
    display: none;
}

#htabs li.active ul {
    display: block;
    z-index: 100;
}

#htabs li:hover ul {
    display: block;
    z-index: 1000;
}

#htabs li ul, #htabs li a ul, #htabs li.active ul, #htabs li a.active ul,#htabs li:hover ul, #htabs li a:hover ul {
    position:absolute;
    top:30px;
    right:2px;
    height: 15px;
    width: 338px;
  
    background:#FFFFFF;
    padding:0;
}


#htabs li:hover ul {
    display: block;
    z-index: 1000;
}

#htabs li ul, #htabs li a ul, #htabs li.active ul, #htabs li a.active ul,#htabs li:hover ul, #htabs li a:hover ul {
    position:absolute;
    top:30px;
    right:2px;
    height: 15px;
    width: 388px;
    background:#FFFFFF;
    padding:0;
}



/* END OF SUBMENU TABS */