/**************************************************************************
*	 Zozo Tabs: Underlined
*
*    1. Underlined Structure
*    2. Underlined Vertical 
*    3. Underlined Sizes
*    4. Underlined Themes
*    
*   Most of the time you shouldn't section 1 (structure).
*   You can delete/edit vertical, sizes and themes section if you need.
* 
**************************************************************************/


/*#region ==========================================================================
    Underlined Structure
========================================================================== */


/* underlined reset*/
.z-tabs.underlined,
.z-tabs.underlined > ul.z-tabs-nav,
.z-tabs.underlined > ul.z-tabs-nav > li,
.z-tabs.underlined > ul.z-tabs-nav > li.z-first,
.z-tabs.underlined > ul.z-tabs-nav > li.z-last,
.z-tabs.underlined > ul.z-tabs-nav > li.z-first.z-active,
.z-tabs.underlined > ul.z-tabs-nav > li.z-last.z-active,
.z-tabs.underlined > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined > ul.z-tabs-nav > li:hover,
.z-tabs.underlined > ul.z-tabs-nav > li > a.z-link,
.z-tabs.underlined > ul.z-tabs-nav > li > a.z-link:hover,
.z-tabs.underlined > .z-container
{
    border-width: 0;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: none;
    filter: none;
}



    .z-tabs.underlined.vertical > .z-container > .z-content > .z-content-inner
    {
        padding: 0 2em;
    }

    .z-tabs.underlined.horizontal > .z-container > .z-content > .z-content-inner
    {
        padding: 1.4em 0;
    }


.z-tabs.underlined.horizontal.top-left > ul.z-tabs-nav > li.z-first,
.z-tabs.underlined.horizontal.bottom-left > ul.z-tabs-nav > li.z-first{margin-left:0;}
.z-tabs.underlined.horizontal.top-right > ul.z-tabs-nav > li.z-last,
.z-tabs.underlined.horizontal.bottom-right > ul.z-tabs-nav > li.z-last{margin-right:0;}

.z-tabs.underlined.horizontal > ul.z-tabs-nav > li,
.z-tabs.underlined.horizontal > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.horizontal > ul.z-tabs-nav > li:hover{filter:none;background: transparent;padding:0;margin-left:16px;}


.z-tabs.underlined.horizontal > ul.z-tabs-nav > li{opacity: 0.80;}
.z-tabs.underlined.horizontal > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.horizontal > ul.z-tabs-nav > li:hover{opacity: 1;}

/*underlined horizontal top*/
.z-tabs.horizontal.underlined > ul.z-tabs-nav{border-width: 0;} 
.z-tabs.horizontal.underlined > ul.z-tabs-nav > li:hover,
.z-tabs.horizontal.underlined > ul.z-tabs-nav > li.z-active{font-weight: normal; margin-bottom: 0;padding-bottom: 0;border-bottom: 3px solid}
.z-tabs.horizontal.underlined > ul.z-tabs-nav > li.z-active  { font-weight: bold; }
.z-tabs.horizontal.underlined > ul.z-tabs-nav > li > a.z-link{text-shadow: 0 1px 1px white;color: #333}
.z-tabs.horizontal.underlined > .z-container{border-width: 1px 0 0 0;}


/*underlined*/
.z-tabs.underlined.horizontal.top-compact > ul.z-tabs-nav.z-tabs-desktop > li, 
.z-tabs.underlined.horizontal.top-compact > ul.z-tabs-nav.z-tabs-desktop > li.z-active, 
.z-tabs.underlined.horizontal.top-compact > ul.z-tabs-nav.z-tabs-desktop > li:hover {margin-left: 0;}


/*underlined horizontal bottom*/
.z-tabs.horizontal.underlined.bottom-left > ul.z-tabs-nav > li,
.z-tabs.horizontal.underlined.bottom-center > ul.z-tabs-nav > li,
.z-tabs.horizontal.underlined.bottom-right > ul.z-tabs-nav > li,
.z-tabs.horizontal.underlined.bottom-compact > ul.z-tabs-nav > li{background: transparent; border-width: 0;margin:0;margin-left:16px;padding:0;}

.z-tabs.horizontal.underlined.bottom-left > .z-container,
.z-tabs.horizontal.underlined.bottom-center > .z-container,
.z-tabs.horizontal.underlined.bottom-right > .z-container,
.z-tabs.horizontal.underlined.bottom-compact > .z-container{border-width: 0 0 1px 0;}


.z-tabs.horizontal.underlined.bottom-left > ul.z-tabs-nav > li:hover,
.z-tabs.horizontal.underlined.bottom-center > ul.z-tabs-nav > li:hover,
.z-tabs.horizontal.underlined.bottom-right > ul.z-tabs-nav > li:hover,
.z-tabs.horizontal.underlined.bottom-compact > ul.z-tabs-nav > li:hover{background: transparent; border-width: 0;padding:0;color:#111;}

.z-tabs.horizontal.underlined.bottom-left > ul.z-tabs-nav > li.z-active,
.z-tabs.horizontal.underlined.bottom-center > ul.z-tabs-nav > li.z-active,
.z-tabs.horizontal.underlined.bottom-right > ul.z-tabs-nav > li.z-active,
.z-tabs.horizontal.underlined.bottom-compact > ul.z-tabs-nav > li.z-active{font-weight: bold; margin-bottom: 0;padding-bottom: 0;border-width:3px 0 0 0;background: #FCFCFC;}


/*underlined*/
.z-tabs.horizontal.underlined.bottom-left > ul.z-tabs-nav.z-tabs-desktop > li,
.z-tabs.horizontal.underlined.bottom-center > ul.z-tabs-nav.z-tabs-desktop > li,
.z-tabs.horizontal.underlined.bottom-right > ul.z-tabs-nav.z-tabs-desktop > li,
.z-tabs.horizontal.underlined.bottom-compact > ul.z-tabs-nav.z-tabs-desktop > li{margin-left: 0;}



/*#endregion*/




/*#region ==========================================================================
    Underlined Vertical
========================================================================== */

.z-tabs.vertical.underlined > ul.z-tabs-nav > li,
.z-tabs.vertical.underlined > ul.z-tabs-nav > li:hover{filter:none;background: transparent;border-width: 0 1px 0 0;margin:0;padding:0;}
.z-tabs.vertical.underlined > ul.z-tabs-nav > li > a.z-link{text-shadow: 0 1px 1px white;color: #333}
.z-tabs.vertical.underlined > .z-container{border-width: 0;}

.z-tabs.vertical.underlined >.z-container > .z-content .z-content-inner {padding: 0 2em;}

.z-tabs.vertical.underlined.top-right > ul.z-tabs-nav > li,
.z-tabs.vertical.underlined.top-right > ul.z-tabs-nav > li:hover{filter:none;background: transparent;border-width: 0 0 0 1px;margin:0;padding:0;}

.z-tabs.vertical.underlined.top-left > ul.z-tabs-nav > li.z-active,
.z-tabs.vertical.underlined.top-left > ul.z-tabs-nav > li:hover{font-weight: bold; margin-bottom: 0;padding-bottom: 0;border-right: 3px solid;background: #eee;}

.z-tabs.vertical.underlined.top-right > ul.z-tabs-nav > li.z-active,
.z-tabs.vertical.underlined.top-right > ul.z-tabs-nav > li:hover{font-weight: bold; margin-bottom: 0;padding-bottom: 0;border-left: 3px solid;background: #eee;}
.z-tabs.vertical.underlined.top-right > ul.z-tabs-nav{border-width:0;} 



.ie7 body .z-tabs.underlined.vertical.top-right > ul.z-tabs-nav > li.z-active { border-right-width: 0 !important; border-left: 3px solid #444 !important; left:-1px; }
.ie7 body .z-tabs.underlined.vertical.top-left > ul.z-tabs-nav > li.z-active { border-right: 3px solid #444 !important; }


/*#endregion*/




/*#region ==========================================================================
    Underlined Sizes
========================================================================== */


/*underlined sizes*/
.z-tabs.horizontal.underlined.mini > ul.z-tabs-nav > li > a.z-link {padding: 6px 6px;}
.z-tabs.horizontal.underlined.small > ul.z-tabs-nav > li > a.z-link{padding: 8px 8px;}
.z-tabs.horizontal.underlined.medium > ul.z-tabs-nav > li > a.z-link{padding: 10px 10px;}
.z-tabs.horizontal.underlined.large > ul.z-tabs-nav > li > a.z-link{padding: 10px 12px;}
.z-tabs.horizontal.underlined.xlarge > ul.z-tabs-nav > li > a.z-link{padding: 12px 14px;}
.z-tabs.horizontal.underlined.xxlarge > ul.z-tabs-nav > li > a.z-link{padding: 14px 16px;}

.z-tabs.horizontal.underlined.mini > ul.z-tabs-nav > li:hover, 
.z-tabs.horizontal.underlined.mini > ul.z-tabs-nav > li.z-active,
.z-tabs.horizontal.underlined.small > ul.z-tabs-nav > li:hover, 
.z-tabs.horizontal.underlined.small > ul.z-tabs-nav > li.z-active {border-bottom-width: 2px;}



/*#endregion*/




/*#region ==========================================================================
    Underlined Themes
========================================================================== */
.z-tabs.underlined.red > .z-container,.z-tabs.underlined.red  > ul.z-tabs-nav > li,
.z-tabs.underlined.blue > .z-container,.z-tabs.underlined.blue  > ul.z-tabs-nav > li,
.z-tabs.underlined.deepblue> .z-container,.z-tabs.underlined.deepblue  > ul.z-tabs-nav > li,
.z-tabs.underlined.orange > .z-container,.z-tabs.underlined.orange  > ul.z-tabs-nav > li,
.z-tabs.underlined.green > .z-container,.z-tabs.underlined.green  > ul.z-tabs-nav > li,
.z-tabs.underlined.white > .z-container,.z-tabs.underlined.white  > ul.z-tabs-nav > li,
.z-tabs.underlined.silver > .z-container,.z-tabs.underlined.silver  > ul.z-tabs-nav > li,
.z-tabs.underlined.gray > .z-container,.z-tabs.underlined.gray  > ul.z-tabs-nav > li,
.z-tabs.underlined.black > .z-container,.z-tabs.underlined.black  > ul.z-tabs-nav > li   {border-color:#e6e6e6;}


.z-tabs.underlined.red  > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.red.vertical > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.red.vertical > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.red  > ul.z-tabs-nav > li:hover{border-color:#DD4B39;}


.z-tabs.underlined.blue > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.blue.vertical > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.blue.vertical > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.blue > ul.z-tabs-nav > li:hover{border-color:#00B0D8;}

.z-tabs.underlined.deepblue > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.deepblue.vertical > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.deepblue.vertical > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.deepblue > ul.z-tabs-nav > li:hover{border-color:#1E69DE;}

.z-tabs.underlined.orange > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.orange.vertical > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.orange.vertical > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.orange > ul.z-tabs-nav > li:hover{border-color:#FD9C00;}

.z-tabs.underlined.green > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.green.vertical > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.green.vertical > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.green > ul.z-tabs-nav > li:hover{border-color:#093;}


.z-tabs.underlined.white > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.white.vertical > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.white.vertical > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.white > ul.z-tabs-nav > li:hover{border-color:#D8D8D8;}

.z-tabs.underlined.crystal > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.crystal.vertical > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.crystal.vertical > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.crystal > ul.z-tabs-nav > li:hover{border-color:#999;}


.z-tabs.underlined.silver > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.silver.vertical > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.silver.vertical > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.silver > ul.z-tabs-nav > li:hover{border-color:#777;}

.z-tabs.underlined.gray > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.gray.vertical > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.gray.vertical > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.gray > ul.z-tabs-nav > li:hover{border-color:#333;}

.z-tabs.underlined.black > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.black.vertical > ul.z-tabs-nav > li.z-active,
.z-tabs.underlined.black.vertical > ul.z-tabs-nav > li:hover,
.z-tabs.underlined.black > ul.z-tabs-nav > li:hover{border-color:black;}




/*#endregion*/