Tab box with tool bar CSS

 We will see how we can customize the look and feel for Tabbox With toolbar

<zk xmlns:x="xhtml">
    <style>

    .menutabs.z-tab .z-tab-text 
    {
        color: red;
        cursor: pointer;
        font-family: arial,sans-serif;
        font-size: 12px;
        font-size-adjust: none;
        font-weight : bold;
        padding: 4px 14px;
        white-space: nowrap;
    }
    
    .mainmenu.z-tabbox .z-tab .z-tab-hm 
    {
        background-image:none;
        background-color: #d9eef7;
        background-position : center;
        background-repeat : repeat;
        height:36px;
    }

    .mainmenu.z-tabbox .z-tab .z-tab-hm:hover 
    {
        background-image:none;
        background-color: #007ead;
        background-position : center;
        background-repeat : repeat-X;
        height:36px;
        padding:none;
        margin:none;
    }

.mainmenu.z-tabbox .z-tab .z-tab-hl 
    {
        background-image:none;
        background-color: #d9eef7;
        background-position : left ;
        background-repeat : repeat;
        height:36px;
    }

    .mainmenu.z-tabbox .z-tab .z-tab-hl:hover 
    {
        background-image:none;
        background-color: #007ead;
        background-position : left ;
        background-repeat : repeat;
        height:36px;
        padding:none;
        margin:none;
    }


    .mainmenu.z-tabbox .z-tab .z-tab-hr 
    {
        background-image:none;
        background-color: #d9eef7;
        background-position : right ;
        background-repeat : repeat;
        height:36px;
    }

    .mainmenu.z-tabbox .z-tab .z-tab-hr:hover 
    {
        background-image:none;
        background-color: #007ead;
        background-position : right ;
        background-repeat : repeat;
        height:36px;
    }

    .z-tabs-header 
    {
        height: 32px;
        margin: 0;
        overflow: hidden;
        position: relative;
        height: 32px;
    }



    .z-toolbar .z-toolbarbutton-cnt 
    {
        color: #000000;
        font-family: Tahoma,verdana;
        font-size: 1em;
        font-weight: normal;
        padding: 2px 10px 2px 10px;
        position: relative;
        border-left: 1px solid #dddddd;
        border-right: 1px solid #eeeeee;
        border-top: 1px solid #e0e0e0;
    }

    .z-toolbar 
    {
        background: none;
        background-color: #cff791;
        height: 18px;
    }

    .z-toolbarbutton-over .z-toolbarbutton-cnt
    {
        background-image:none;
        background-color: #cff791;
        
    }

    .z-toolbarbutton-select .z-toolbarbutton-cnt
    {
        background-image:none;
        background-color: red;
        
    }
    
    
    </style>
    <tabbox width="100%" sclass="mainmenu">
        <tabs id="tabs" >
            <tab label="Our Product" sclass="menutabs"/>
            <tab label="Live Demo" sclass="menutabs"/>
            <tab label="Online Documentation" sclass="menutabs"/>
        </tabs>

        <tabpanels>
            <tabpanel>

                <toolbar width="794px">
                    <toolbarbutton label="Product 1"  />
                    <toolbarbutton label="Product 2" />
                    <toolbarbutton label="Product 3" />
                </toolbar>
            </tabpanel>

            <tabpanel>
                <toolbar width="800px">
                    <toolbarbutton label="Documentation 1" />
                    <toolbarbutton label="Documentation 2" />
                    <toolbarbutton label="Documentation 3" />
                    <toolbarbutton label="Documentation 4" />
                    <toolbarbutton label="Documentation 5" />
                </toolbar>
            </tabpanel>
        </tabpanels>
    </tabbox>
    <separator height="30px"></separator>
</zk>

Output