/**************************************************************************
*	@name		    Zozo UI Tabs
*	@descripton	    Create awesome tabbed content area
*	@version	    5.0
*   @requires       jQuery v1.7 or later
*	@copyright      Copyright (c) 2013 Zozo UI
*   @author         Zozo UI
*   @URL:           http://www.zozoui.com
*
*    1. Core (structure)
*    2. Sizes 
*    3. Video 
*    4. Icons
*    5. Helper classes
*    
*   Most of the time you shouldn't delete/edit section 1 (Core).
*   You can delete/edit sizes, video, icons support and Helper classes if you need.
* 
**************************************************************************/



/*#region ==========================================================================
    Core (structure)
========================================================================== */

.z-tabs *, .z-tabs:before, .z-tabs:before
{
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.z-tabs,
.z-tabs > ul.z-tabs-nav,
.z-tabs > ul.z-tabs-nav > li,
.z-tabs > ul.z-tabs-nav > li > a.z-link
{
    
}


.z-tabs
{
    margin: auto;
    padding: 0;
    clear: both;
    color: #333;
    font: 12px/1.7em "Helvetica Neue",Helvetica,Arial,sans-serif;  
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;  
}

    .z-tabs > ul.z-tabs-nav
    {
        position: relative;
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        list-style: none;
    }

        .z-tabs > ul.z-tabs-nav > li
        {
            background: #F9F9F9;
            background:#fff;
            position: relative;
            display: block;
            list-style-type: none;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

            .z-tabs > ul.z-tabs-nav > li:hover
            {
                outline: 0 none;
                text-decoration: none;
            }

            .z-tabs > ul.z-tabs-nav > li.z-active,
            .z-tabs > ul.z-tabs-nav > li.z-active:hover
            {
                background: #fff;
                font-weight: bold;
            }

            .z-tabs > ul.z-tabs-nav > li,
            .z-tabs > ul.z-tabs-nav > li > a.z-link
            {
                cursor: pointer;
            }

                .z-tabs > ul.z-tabs-nav > li.z-active,
                .z-tabs > ul.z-tabs-nav > li.z-active > a.z-link
                {
                    cursor: default;
                    font-weight: bold;
                }

                .z-tabs > ul.z-tabs-nav > li > a.z-link
                {
                    display: block;
                    position: relative;
                    outline: 0;
                    color: #111;
                    line-height: 18px;
                    text-decoration: none;
                    font-weight: inherit;
                    font-size: 1.11em;
                }
  
    .z-tabs > ul.z-tabs-nav,
    .z-tabs > ul.z-tabs-nav > li,
    .z-tabs > .z-container
    {
        border-color: #CECECE;        
        border-style: solid;
    }



    .z-tabs > .z-container
    {
        padding: 0;
        margin: 0;
        border-width: 1px;
        background: #fff;
        position: relative;
        font-size: 1.2em;
        /*min-height: 100px;*/
    }

        .z-tabs > .z-container > .z-content
        {
            display: none;
            background: none;
        }

            .z-tabs > .z-container > .z-content > .z-content-inner
            {
                padding: 1.4em 2em;
                height: auto;
            }

                /*clear floats after each content*/
                .z-tabs > .z-container > .z-content::after,
                .z-tabs > .z-container > .z-content > .z-content-inner::after
                {
                    content: ".";
                    display: block;
                    height: 0;
                    clear: both;
                    visibility: hidden;
                }

            /*clear floats after each content For IE 6/7 */
            .z-tabs > .z-container > .z-content,
            .z-tabs > .z-container > .z-content > .z-content-inner
            {
                zoom: 1;
            }



    /* animation sliding effects */
    .z-tabs.z-slide > .z-container
    {
        overflow: hidden;
    }

        .z-tabs.z-slide > .z-container > .z-content,
        .z-tabs > .z-container.z-animating > .z-content
        {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0;
            z-index: 7;
        }

            .z-tabs.z-slide > .z-container > .z-content.z-active
            {
                z-index: 8;
            }





/*#endregion*/




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

/**/
.z-tabs.vertical.mini > ul.z-tabs-nav > li > a.z-link,
.z-tabs.vertical.small > ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.mini >  ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.small >  ul.z-tabs-nav > li > a.z-link  {font-weight: inherit;}

.z-tabs.vertical.mini > ul.z-tabs-nav > li.z-active > a.z-link,
.z-tabs.vertical.small > ul.z-tabs-nav > li.z-active > a.z-link,
.z-tabs.horizontal.mini >  ul.z-tabs-nav > li.z-active > a.z-link,
.z-tabs.horizontal.small >  ul.z-tabs-nav > li.z-active > a.z-link  {font-weight: bold;}
    

/* version 4.0 */
.z-tabs.vertical.mini > ul.z-tabs-nav > li > a.z-link   {height: 34px;line-height: 34px;margin:0 10px 0 0;font-size: 11px;}
.z-tabs.vertical.small > ul.z-tabs-nav > li > a.z-link  {height: 40px;line-height: 40px;margin:0 12px;font-size: 11px;}
.z-tabs.vertical.medium > ul.z-tabs-nav > li > a.z-link {height: 46px;line-height: 46px;margin:0 14px;font-size: 12px;}
.z-tabs.vertical.large > ul.z-tabs-nav > li > a.z-link  {height: 52px;line-height: 52px;margin:0 18px;font-size: 13px;}
.z-tabs.vertical.xlarge > ul.z-tabs-nav > li > a.z-link {height: 58px;line-height: 56px;margin:0 20px;font-size: 14px;}
.z-tabs.vertical.xxlarge > ul.z-tabs-nav > li > a.z-link{height: 62px;line-height: 60px;margin:0 22px 0 20px;font-size: 14px;}

   

.z-tabs.vertical.top-left > ul.z-tabs-nav > li > a.z-link {padding-left:20px;margin-left:0;}
.z-tabs.vertical.top-right > ul.z-tabs-nav > li > a.z-link {padding-right:20px;margin-right:0;}



.z-tabs.vertical.mini > ul.z-tabs-nav{min-width: 180px;width:25%;}
.z-tabs.vertical.small > ul.z-tabs-nav {min-width: 180px;width:25%;}
.z-tabs.vertical.medium > ul.z-tabs-nav {min-width: 200px;width:25%;}
.z-tabs.vertical.large > ul.z-tabs-nav {min-width: 220px;width:25%;}
.z-tabs.vertical.xlarge > ul.z-tabs-nav {min-width: 240px;width:25%;}
.z-tabs.vertical.xxlarge > ul.z-tabs-nav {min-width: 260px;width:25%;}


.z-tabs.horizontal.mini >  ul.z-tabs-nav > li > a.z-link    {font-size: 11px;padding: 7px 20px;}
.z-tabs.horizontal.small >  ul.z-tabs-nav > li > a.z-link   {font-size: 11px;padding: 10px 20px;}
.z-tabs.horizontal.medium >  ul.z-tabs-nav > li > a.z-link  {font-size: 21px;padding: 13px 24px; font-weight: normal;}
.z-tabs.horizontal.large >  ul.z-tabs-nav > li > a.z-link   {font-size: 13px;padding: 16px 28px;}
.z-tabs.horizontal.xlarge >  ul.z-tabs-nav > li > a.z-link  {font-size: 14px;padding: 19px 32px;/*padding:20px 40px 8px 20px*/}
.z-tabs.horizontal.xxlarge >  ul.z-tabs-nav > li > a.z-link {font-size: 14px;padding: 22px 36px;}

/**/
.z-tabs.horizontal.top-compact.mini >  ul.z-tabs-nav > li > a.z-link    {font-size: 11px;padding: 7px 10px;}
.z-tabs.horizontal.top-compact.small >  ul.z-tabs-nav > li > a.z-link   {font-size: 11px;padding: 10px 11px;}
.z-tabs.horizontal.top-compact.medium >  ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.medium >  ul.z-tabs-nav > li > a.z-link  {font-size: 21px;padding: 13px 0; font-weight: normal;}
.z-tabs.horizontal.top-compact.large >  ul.z-tabs-nav > li > a.z-link   {font-size: 13px;padding: 16px 13px;}
.z-tabs.horizontal.top-compact.xlarge >  ul.z-tabs-nav > li > a.z-link  {font-size: 13px;padding: 19px 14px;}
.z-tabs.horizontal.top-compact.xxlarge >  ul.z-tabs-nav > li > a.z-link {font-size: 14px;padding: 22px 15px;}

/* version 5.0
.z-tabs.horizontal.top.responsive.mini >  ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.small >  ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.medium >  ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.large >  ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.xlarge >  ul.z-tabs-nav > li > a.z-link,
.z-tabs.horizontal.top.responsive.xxlarge >  ul.z-tabs-nav > li > a.z-link    {padding-left:8px;padding-right:8px;}*/

/* version 4.0 multiline
.z-tabs.horizontal.bottom-compact.mini >  ul.z-tabs-nav > li > a.z-link  {font-size: 11px;padding: 7px 0px;}
.z-tabs.horizontal.bottom-compact.small >  ul.z-tabs-nav > li > a.z-link   {font-size: 11px;padding: 10px 0px;}
.z-tabs.horizontal.bottom-compact.medium >  ul.z-tabs-nav > li > a.z-link  {font-size: 12px;padding: 13px 0px;}
.z-tabs.horizontal.bottom-compact.large >  ul.z-tabs-nav > li > a.z-link   {font-size: 13px;padding: 16px 0px;}
.z-tabs.horizontal.bottom-compact.xlarge >  ul.z-tabs-nav > li > a.z-link  {font-size: 13px;padding: 19px 0px;}
.z-tabs.horizontal.bottom-compact.xxlarge >  ul.z-tabs-nav > li > a.z-link {font-size: 14px;padding: 22px 0px;}
    */
/* version 4.0 multiline
.z-tabs.horizontal.mobile.mini > ul.z-tabs-nav > li > a.z-link   {height: 32px;line-height: 32px;margin:0 10px;font-size: 11px;padding-top:0;padding-bottom:0;}
.z-tabs.horizontal.mobile.small > ul.z-tabs-nav > li > a.z-link  {height: 38px;line-height: 38px;margin:0 12px;font-size: 11px;padding-top:0;padding-bottom:0;}
.z-tabs.horizontal.mobile.medium > ul.z-tabs-nav > li > a.z-link {height: 44px;line-height: 44px;margin:0 14px;font-size: 12px;padding-top:0;padding-bottom:0;}
.z-tabs.horizontal.mobile.large > ul.z-tabs-nav > li > a.z-link  {height: 50px;line-height: 50px;margin:0 18px;font-size: 13px;padding-top:0;padding-bottom:0;}
.z-tabs.horizontal.mobile.xlarge > ul.z-tabs-nav > li > a.z-link {height: 56px;line-height: 56px;margin:0 20px;font-size: 13px;padding-top:0;padding-bottom:0;}
.z-tabs.horizontal.mobile.xxlarge > ul.z-tabs-nav > li > a.z-link{height: 62px;line-height: 62px;margin:0 22px;font-size: 14px;padding-top:0;padding-bottom:0;}
    */


/*#endregion*/




/*#region ==========================================================================
    Video Support, Youtube, Vimeo, Iframe
========================================================================== */

.z-tabs .z-video
{
    position: relative;
    padding-bottom: 46.25%;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

    .z-tabs .z-video iframe,
    .z-tabs .z-video object,
    .z-tabs .z-video embed
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border:none;
        z-index: 50;
    }

/*#endregion*/




/*#region ==========================================================================
    Icons Support
========================================================================== */


/* Font Awesome */
.z-tabs > ul.z-tabs-nav > li > a.z-link i
{
    font-size: 16px;
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
}

.z-tabs > ul.z-tabs-nav > li > a.z-link > span.z-icon,
.z-tabs.z-multiline > ul.z-tabs-nav.z-tabs-desktop > li > a.z-link > span.z-icon,
.z-tabs.z-multiline > ul.z-tabs-nav.z-tabs-mobile > li > a.z-link > span > span.z-icon
{
    width: 20px;
    display: inline-block;
    font-size: inherit;
    font-weight: normal;
    text-transform: initial;
    text-align: left;
}


.z-tabs.vertical > ul.z-tabs-nav > li > a.z-link > span.z-icon,
.z-tabs.z-multiline.vertical > ul.z-tabs-nav.z-tabs-desktop > li > a.z-link > span.z-icon,
.z-tabs.z-multiline.vertical > ul.z-tabs-nav.z-tabs-mobile > li > a.z-link > span > span.z-icon
{
    width: 24px;
}



/*#endregion*/




/*#region ==========================================================================
    Helper classes
========================================================================== */


    /*align tabs titles center*/
    .z-tabs.center > ul.z-tabs-nav > li > a.z-link,
    .z-tabs.center.mobile > ul.z-tabs-nav > li > a.z-link
    {
        text-align: center !important;
    }

    /*align tabs titles right*/
    .z-tabs.right > ul.z-tabs-nav > li > a.z-link,
    .z-tabs.right.mobile > ul.z-tabs-nav > li > a.z-link
    {
        text-align: right !important;
    }


    /*align tabs titles left*/
    .z-tabs.left > ul.z-tabs-nav > li > a.z-link,
    .z-tabs.left.mobile > ul.z-tabs-nav > li > a.z-link
    {
        text-align: left !important;
    }



    /*z-nopadding on content*/
    .z-tabs.vertical > .z-container > .z-content.z-nopadding > .z-content-inner,
    .z-tabs.horizontal > .z-container > .z-content.z-nopadding > .z-content-inner
    {
        padding: 0;
    }


/*Clear the float on any element*/
.clearfix
{
    *zoom: 1;
}

    .clearfix:before,
    .clearfix:after
    {
        display: table;
        content: "";
        line-height: 0;
    }

    .clearfix:after
    {
        clear: both;
    }


/*#endregion*/