/**************************************************************************
*	 Zozo Tabs: Horizontal
*
*    1. Horizontal Structure
*    2. Horizontal Positioning 
*    3. Horizontal Rounded Cornors
     4. Horizontal Shadows
*    
*   Most of the time you shouldn't delete/edit section 1 (structure).
*   - You can delete/edit part of positioning
*   - You can delete/edit rounded and shadows section if you need.
* 
**************************************************************************/


/*#region ==========================================================================
      Horizontal Structure
========================================================================== */

.z-tabs.horizontal > ul.z-tabs-nav > li
{
    float: left;
    margin-right: -1px;
    border-width: 1px 1px 0;
}


    .z-tabs.horizontal > ul.z-tabs-nav > li > a.z-link
    {
        /*text-align: center; */       
        font-size: 12px;
        padding: 13px 24px;
    }


    .z-tabs.horizontal > ul.z-tabs-nav > li.z-active
    {
        margin-bottom: -1px;
        padding-bottom: 1px;
        z-index: 1;
    }

.z-tabs.horizontal > .z-container
{
    clear: both;
    width: 100%;
    zoom: 1;
}


/*#endregion*/




/*#region ==========================================================================
      Horizontal Positioning 
========================================================================== */

/*top-left*/

/* top-center */
.z-tabs.horizontal.top-center
{
    width: 100%;
    overflow: hidden;
    padding-right: 2px; /*version 3.0*/
}

    .z-tabs.horizontal.top-center > ul.z-tabs-nav
    {
        clear: left;
        float: left;
        left: 50%;
        text-align: center;
    }

        .z-tabs.horizontal.top-center > ul.z-tabs-nav > li
        {
            right: 50%;
            float: left;
        }


    .z-tabs.horizontal.top-center > .z-container,
    .z-tabs.horizontal.bottom-center > .z-container
    {
        width: 100%; /*version 3.0*/
        /*margin-right: 1px;version 3.0*/
    }


/* top-right */
.z-tabs.horizontal.top-right > .z-container
{
    margin-right: 0;
    padding-right: 0;
    margin-left: 0;
    padding-left: 0;
}

.z-tabs.horizontal.top-right > ul.z-tabs-nav
{
    float: right;
    margin: 0 -1px 0 0;
}

.ie7 body .z-tabs.horizontal.top-right > .z-container
{
    clear: none;
}

.ie7 body .z-tabs.horizontal.top-right
{
    margin-right: 2px;
}

/* bottom-left*/
.z-tabs.horizontal.bottom-left > ul.z-tabs-nav > li
{
    border-width: 0px 1px 1px;
}

    .z-tabs.horizontal.bottom-left > ul.z-tabs-nav > li.z-active
    {
        margin-bottom: 0px;
        padding-bottom: 0px;
        margin-top: -1px;
        padding-top: 1px;
    }

/* bottom-center*/
.z-tabs.horizontal.bottom-center
{
    width: 100%; /*overflow:hidden; version 5.0*/
    padding-right: 2px; /*version 3.0*/
}

    .z-tabs.horizontal.bottom-center > ul.z-tabs-nav
    {
        float: left;
        left: 50%;
        text-align: center;
    }

        .z-tabs.horizontal.bottom-center > ul.z-tabs-nav > li
        {
            border-width: 0px 1px 1px;
            right: 50%;
            float: left;
        }

            .z-tabs.horizontal.bottom-center > ul.z-tabs-nav > li.z-active
            {
                margin-bottom: 0px;
                padding-bottom: 0px;
                margin-top: -1px;
                padding-top: 1px;
            }

/* bottom-right*/
.z-tabs.horizontal.bottom-right > ul.z-tabs-nav
{
    float: right;
    margin-right: -1px;
}

    .z-tabs.horizontal.bottom-right > ul.z-tabs-nav > li
    {
        border-width: 0px 1px 1px;
    }

        .z-tabs.horizontal.bottom-right > ul.z-tabs-nav > li.z-active
        {
            margin-bottom: 0px;
            padding-bottom: 0px;
            margin-top: -1px;
            padding-top: 1px;
        }

.ie7 body .z-tabs.horizontal.bottom-right
{
    margin-right: 2px;
}



/* top compact*/
.z-tabs.horizontal.top-compact > ul.z-tabs-nav
{
    /*display: table; version 3.0*/
    width: 100%;
    margin-left: -1px;
    padding-left: 1px;
}

    .z-tabs.horizontal.top-compact > ul.z-tabs-nav > li
    {
        margin: 0 -2px 0 0;
        display: inline-block;
    }

        .z-tabs.horizontal.top-compact > ul.z-tabs-nav > li.z-active
        {
            font-weight: normal;
            margin-bottom: -1px;
            padding-bottom: 1px;
        }

.z-tabs.horizontal.top-compact > .z-container
{
    /*version 3.0*/ width: initial;
    margin-right: -2px !important; /*version 3.0*/
}

/* version 3.0*/
.ie7 body .z-tabs.horizontal.top-compact > ul.z-tabs-nav > li.z-first
{
    padding-left: 1px;
}

.ie7 body .z-tabs.horizontal.top-compact > ul.z-tabs-nav,
.ie7 body .z-tabs.horizontal.top-compact
{
    width: auto;
}

.ie7 .z-tabs.horizontal.top-compact > ul.z-tabs-nav.z-tabs-desktop > li
{
    margin-right: -3px;
}

    .ie7 .z-tabs.horizontal.top-compact > ul.z-tabs-nav.z-tabs-desktop > li.z-last
    {
        margin-right: 0;
    }

/* bottom compact*/
.z-tabs.horizontal.bottom-compact > ul.z-tabs-nav
{
    /* display: table; version 3.0*/
    width: 100%;
    margin-left: -1px;
    padding-left: 1px;
}

    .z-tabs.horizontal.bottom-compact > ul.z-tabs-nav > li
    {
        margin: 0 -2px 0 0;
        display: inline-block;
        border-width: 0px 1px 1px;
    }

        .z-tabs.horizontal.bottom-compact > ul.z-tabs-nav > li > a.z-link
        {
            padding-left: 0;
            padding-right: 0;
        }

        .z-tabs.horizontal.bottom-compact > ul.z-tabs-nav > li.z-active
        {
            margin-top: -1px;
            padding-top: 1px;
            margin-bottom: 0px;
            padding-bottom: 0px;
        }

.z-tabs.horizontal.bottom-compact > .z-container
{
    width: initial;
    margin-right: -2px !important; /*version 3.0*/
}


.ie7 body .z-tabs.horizontal.bottom-compact > ul.z-tabs-nav > li.z-first
{
    padding-left: 1px;
}

.ie7 body .z-tabs.horizontal.bottom > ul.z-tabs-nav
{
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}




.z-tabs.horizontal.responsive > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top-compact > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.bottom-compact > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top-center > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.bottom-center > ul.z-tabs-nav > li > a.z-link
{
    text-align: center;
}


/*#endregion*/




/*#region ==========================================================================
     Horizontal Rounded Cornors
========================================================================== */

/*top*/
.z-tabs.horizontal.top.z-rounded > ul.z-tabs-nav > li.z-first,
.z-tabs.horizontal.top.z-rounded > ul.z-tabs-nav > li.z-first > a.z-link
{
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
    border-radius: 5px 0 0 0;
}

.z-tabs.horizontal.top.z-rounded > ul.z-tabs-nav > li.z-last,
.z-tabs.horizontal.top.z-rounded > ul.z-tabs-nav > li.z-last > a.z-link
{
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
    border-radius: 0 5px 0 0;
}

/*top-left*/
.z-tabs.horizontal.top-left.z-rounded > .z-container
{
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

/*top-center*/
.z-tabs.horizontal.top-center.z-rounded > .z-container
{
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
}

/*top-right*/
.z-tabs.horizontal.top-right.z-rounded > .z-container
{
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/* top compact*/
.z-tabs.horizontal.z-rounded.top-compact > .z-container
{
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    -khtml-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

/* bottom*/
.z-tabs.horizontal.z-rounded.bottom > ul.z-tabs-nav > li.z-first,
.z-tabs.horizontal.z-rounded.bottom > ul.z-tabs-nav > li.z-first > a.z-link
{
    -webkit-border-radius: 0 0 0 5px;
    -moz-border-radius: 0 0 0 5px;
    border-radius: 0 0 0 5px;
}

.z-tabs.horizontal.z-rounded.bottom > ul.z-tabs-nav > li.z-last,
.z-tabs.horizontal.z-rounded.bottom > ul.z-tabs-nav > li.z-last > a.z-link
{
    -webkit-border-radius: 0 0 5px 0;
    -moz-border-radius: 0 0 5px 0;
    border-radius: 0 0 5px 0;
}

/* bottom-left*/
.z-tabs.horizontal.z-rounded.bottom-left > .z-container
{
    -webkit-border-radius: 6px 6px 6px 0;
    -moz-border-radius: 6px 6px 6px 0;
    border-radius: 6px 6px 6px 0;
}

/* bottom-center*/
.z-tabs.horizontal.z-rounded.bottom-center > .z-container
{
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

/* bottom-right*/
.z-tabs.horizontal.z-rounded.bottom-right .z-container
{
    -webkit-border-radius: 6px 6px 0 6px;
    -moz-border-radius: 6px 6px 0 6px;
    -khtml-border-radius: 6px 6px 0 6px;
    border-radius: 6px 6px 0 6px;
}

/* bottom compact*/
.z-tabs.horizontal.z-rounded.bottom-compact > .z-container
{
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    -khtml-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

/*responsive*/
.z-tabs.horizontal.responsive.top.z-rounded > .z-container
{
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.z-tabs.horizontal.responsive.bottom.z-rounded > .z-container
{
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

/*responsive mobile dropdown menu*/
.z-tabs.horizontal.responsive.top.z-rounded > .z-tabs-mobile,
.z-tabs.horizontal.responsive.top.z-rounded > .z-tabs-mobile > li
{
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.z-tabs.horizontal.responsive.bottom.z-rounded > .z-tabs-mobile,
.z-tabs.horizontal.responsive.bottom.z-rounded > .z-tabs-mobile > li
{
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}
/*#endregion*/




/*#region ==========================================================================
     Horizontal Shadows
========================================================================== */
.z-tabs.horizontal.z-shadows > .z-container
{ 
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .125);
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .125);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, .125);
}
.z-tabs.horizontal.z-shadows > ul.z-tabs-nav > li{box-shadow: -2px 0px 2px -2px rgba(0, 0, 0, .1);}
.z-tabs.horizontal.top-left.z-shadows >  ul.z-tabs-nav li.z-first,
.z-tabs.horizontal.top-compact.z-shadows > ul.z-tabs-nav > li.z-first{box-shadow: -3px 1px 1px -3px rgba(0, 0, 0, .2);}
.z-tabs.horizontal.top-right.z-shadows > ul.z-tabs-nav > li.z-last,
.z-tabs.horizontal.top-compact.z-shadows > ul.z-tabs-nav > li.z-last{box-shadow: 3px 1px 1px -3px rgba(0, 0, 0, .2);}


/*#endregion*/