Login form CSS

Login form CSS

Example 1:


Example 2:


Example 3:

You can download the source here.

Reference
http://demo.tutorialzine.com/2012/02/apple-like-login-form/
http://webdesigntutsplus.s3.amazonaws.com/tuts/344_login_form/Demo/index.html
http://cssdeck.com/labs/login-form-using-html5-and-css3

Read More

Some Button CSS In ZK

 

Read More

ZK Grid CSS

<zk>

    <style>
        .fgrid tr.z-row td.z-row-inner,tr.z-row,div.z-grid-body
        div.z-cell,div.z-grid { border: none; overflow: hidden; zoom: 1;
        background: white; border-top: none; border-left: none;
        border-right: none; border-bottom: none; }

        .fgrid .z-grid-odd .fgrid .z-row-inner,.fgrid .z-grid-odd
        .z-cell { background-color: #F7F7F7; border-bottom: 1px solid
        transparent; border-left: 1px solid transparent; border-top: 1px
        solid transparent; }

        .fgrid .z-grid-odd .fgrid.z-row-inner,.fgrid.z-grid-odd
        .z-cell,.fgrid.z-grid-odd { background: none repeat scroll 0 0
        transparent; }

        .fgrid tr.z-grid-odd td.z-row-inner,.fgrid tr.z-grid-odd
        .z-cell,.fgrid tr.z-grid-odd { background: white }

        .fgrid tr.z-row td.z-row-inner,.fgrid tr.z-row .z-cell {
        background: white; border-top: none; }

        
    </style>

    <window id="win" width="99%" height="auto">
        <label value="Grid without sclass " style="font-size :20px;" />
        <panel width="100%">
            <panelchildren>
                <separator />
                <grid hflex="min">
                    <columns>
                        <column hflex="min" align="right" />
                        <column hflex="min" />
                        <column hflex="min" align="right" />
                        <column hflex="min" />
                        <column hflex="min" align="right" />
                        <column hflex="min" />
                        <column hflex="min" align="right" />
                        <column hflex="min" />
                        <column hflex="min" align="right" />
                        <column hflex="min" />
                    </columns>
                    <rows>
                        <row>
                            <label value="Salutation" />
                            <textbox />
                            <label value="Last Name" />
                            <textbox />
                            <label value="First Name" />
                            <textbox />
                            <label value="Middle Name" />
                            <textbox />
                        </row>
                        <row>
                            <label value="Suffix" />
                            <textbox />
                            <label value="Gender" />
                            <textbox />
                            <label value="DOB" />
                            <textbox />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />

                        </row>
                        <row>
                            <label value="SSN" />
                            <textbox />
                            <label value="Marital Status" />
                            <textbox />
                            <label value="" />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                        </row>

                        <row>
                            <cell colspan="8">
                                <separator bar="true" />
                            </cell>
                        </row>

                        <row>
                            <cell colspan="8" style="" align="left">
                                <label value="Contact Details" />
                            </cell>
                        </row>


                        <row>
                            <label value="Address:" />
                            <cell colspan="3">
                                <textbox rows="1" hflex="1" />
                            </cell>
                            <label value="" />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                        </row>

                        <row>
                            <label value="" />
                            <cell colspan="3">
                                <textbox rows="1" hflex="1" />
                            </cell>
                            <label value="" />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                        </row>

                        <row>
                            <label value="City" />
                            <textbox rows="1" hflex="1" />
                            <label value="State" />
                            <textbox />
                            <label value="ZipCode " />
                            <textbox />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                        </row>

                        <row>
                            <label value="Home Phone" />
                            <textbox />
                            <label value="Office Phone" />
                            <span>
                                <textbox width="100px" />
                                <textbox width="30px" />
                            </span>
                            <label value="Mobile" />
                            <textbox />
                            <label value="Fax" />
                            <textbox />
                            <label value=" " />
                            <label value=" " />
                        </row>

                        <row>
                            <label value="Email" />
                            <cell colspan="3">
                                <textbox rows="1" hflex="1" />
                            </cell>
                        </row>
                    </rows>
                </grid>
            </panelchildren>
        </panel>
    </window>
    <window id="win1" width="99%" height="440px">
        <label value="Grid with sclass " style="font-size :20px;" />
        <panel width="100%">
            <panelchildren>
                <separator />
                <grid hflex="min" sclass="fgrid">
                    <columns>
                        <column hflex="min" align="right" />
                        <column hflex="min" />
                        <column hflex="min" align="right" />
                        <column hflex="min" />
                        <column hflex="min" align="right" />
                        <column hflex="min" />
                        <column hflex="min" align="right" />
                        <column hflex="min" />
                        <column hflex="min" align="right" />
                        <column hflex="min" />
                    </columns>
                    <rows>
                        <row>
                            <label value="Salutation" />
                            <textbox />
                            <label value="Last Name" />
                            <textbox />
                            <label value="First Name" />
                            <textbox />
                            <label value="Middle Name" />
                            <textbox />
                        </row>
                        <row>
                            <label value="Suffix" />
                            <textbox />
                            <label value="Gender" />
                            <textbox />
                            <label value="DOB" />
                            <textbox />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />

                        </row>
                        <row>
                            <label value="SSN" />
                            <textbox />
                            <label value="Marital Status" />
                            <textbox />
                            <label value="" />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                        </row>

                        <row>
                            <cell colspan="8">
                                <separator bar="true" />
                            </cell>
                        </row>

                        <row>
                            <cell colspan="8" style="" align="left">
                                <label value="Contact Details" />
                            </cell>
                        </row>


                        <row>
                            <label value="Address:" />
                            <cell colspan="3">
                                <textbox rows="1" hflex="1" />
                            </cell>
                            <label value="" />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                        </row>

                        <row>
                            <label value="" />
                            <cell colspan="3">
                                <textbox rows="1" hflex="1" />
                            </cell>
                            <label value="" />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                        </row>

                        <row>
                            <label value="City" />
                            <textbox rows="1" hflex="1" />
                            <label value="State" />
                            <textbox />
                            <label value="ZipCode " />
                            <textbox />
                            <label value=" " />
                            <label value=" " />
                            <label value=" " />
                        </row>

                        <row>
                            <label value="Home Phone" />
                            <textbox />
                            <label value="Office Phone" />
                            <span>
                                <textbox width="100px" />
                                <textbox width="30px" />
                            </span>
                            <label value="Mobile" />
                            <textbox />
                            <label value="Fax" />
                            <textbox />
                            <label value=" " />
                            <label value=" " />
                        </row>

                        <row>
                            <label value="Email" />
                            <cell colspan="3">
                                <textbox rows="1" hflex="1" />
                            </cell>
                        </row>
                    </rows>
                </grid>
            </panelchildren>
        </panel>
    </window>
</zk>

Read More

Tabbed Dialog Form - 2

Here is an example in ZK for Tabbed Dialog form. In these, we have created each tab information as individual zul file and loaded on clicking of the tab at run time.

Download Source

Read More

Tabbed Dialog Form - 1

Here is an example in ZK for Tabbed Dialog form. In these, we have created each tab information as individual zul file and loaded on clicking of the Toolbar button on the left using Border layout.

Download Source

Read More

Navigation Menu

Main zul file

<zk>
<style src="/style.css" />
    <window border="none" width="100%" height="100%">
        <separator />
        <div left="20px" height="25px">
            <image src="/images/logo3a.jpg"
                style="padding-left: 10px;" height="30px" width="auto" />
        </div>
        <separator />
        <borderlayout>
            <north id="north" border="0" height="9%" flex="true">
                <div id="Menu" sclass="Mainmenudiv" height="90%">
                    <include src="menu.zul" />
                </div>
            </north>
            <west title=" " size="16%" flex="true" splittable="true"
                collapsible="true">
                <div id="nav" style="background:white; height:100%">
                    
                </div>
            </west>
            <center border="0">
                <div height="99%" id="Screen">
                    
                </div>
            </center>
            <south height="70px">
                <div align="center">
                    <label
                        value="Copyright © 2012 xxxxx All Rights Reserved. Powered By xxxx"
                        sclass="loginlabel" />
                </div>
            </south>
        </borderlayout>
    </window>
</zk>

Menu zul file

<?page title="" contentType="text/html;charset=UTF-8"?>
<zk>
    <window>
        <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" />
                <tab label="Downloads" sclass="menutabs" />
                <tab label="Support" sclass="menutabs" />
            </tabs>
            <tabpanels sclass="mytabpanel">
                <tabpanel>
                    <toolbar sclass="maintoolbar">
                        <toolbarbutton label="Product 1" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Product 2" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Product 3" sclass="maintoolbarbtn"/>
                    </toolbar>
                </tabpanel>
                <tabpanel>
                    <toolbar sclass="maintoolbar">
                        <toolbarbutton label="Live Demo 1" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Live Demo 2" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Live Demo 3" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Live Demo 4" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Live Demo 5" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Live Demo 6" sclass="maintoolbarbtn"/>
                    </toolbar>
                </tabpanel>
                <tabpanel>
                    <toolbar sclass="maintoolbar">
                        <toolbarbutton label="Documentation 1" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Documentation 2" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Documentation 3" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Documentation 4" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Documentation 5" sclass="maintoolbarbtn"/>
                    </toolbar>
                </tabpanel>
                <tabpanel>
                    <toolbar sclass="maintoolbar">
                        <toolbarbutton label="Download 1" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Download 2" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Download 3" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Download 4" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Download 5" sclass="maintoolbarbtn"/>
                    </toolbar>
                </tabpanel>
                <tabpanel>
                    <toolbar sclass="maintoolbar">
                        <toolbarbutton label="Support 1" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Support 2" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Support 3" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Support 4" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Support 5" sclass="maintoolbarbtn"/>
                    </toolbar>
                </tabpanel>
            </tabpanels>
        </tabbox>
    </window>
</zk>

CSS File

/* Start: Main Tabs Menu
---------------------------------------------- */
.Mainmenudiv {
    background-image: url('./images/menubgsmall.png');
    background-position: top center;
}

.menutabs.z-tab .z-tab-text {
    color: white;
    cursor: pointer;
    font-family: arial, sans-serif;
    font-size: 12px;
    font-size-adjust: none;
    font-weight: bold;
    padding: 4px 14px;
    white-space: nowrap;
}

.menutabs.z-tab .z-tab-hl:hover .z-tab-text {
    padding: 6px 14px;
    color: yellow;
    font-weight: bold;
}

.mainmenu.z-tabbox .z-tab .z-tab-hm {
    background-image: url('./images/blank_p.gif');
    background-color: transparent;
    background-position: center;
    background-repeat: repeat;
    height: 36px;
}

.mainmenu.z-tabbox .z-tab .z-tab-hm:hover {
    background-image: url('./images/blank_over_p.gif');
    background-color: transparent;
    background-position: center;
    background-repeat: repeat-X;
    height: 36px;
    padding: none;
    margin: none;
}

.mainmenu.z-tabbox .z-tab-seld .z-tab-hm {
    background-image: url('./images/current-bg.png');
    background-color: transparent;
    background-position: center;
    background-repeat: repeat-X;
    height: 36px;
    padding: none;
    margin: none;
}

.mainmenu.z-tabbox .z-tab .z-tab-hl {
    background-image: url('./images/blank_p.gif');
    background-color: transparent;
    background-position: left;
    background-repeat: repeat;
    height: 36px;
}

.mainmenu.z-tabbox .z-tab .z-tab-hl:hover {
    background-image: url('./images/blank_over_p.gif');
    background-color: transparent;
    background-position: left;
    background-repeat: repeat;
    height: 36px;
    padding: none;
    margin: none;
}

.mainmenu.z-tabbox .z-tab-seld .z-tab-hl {
    background-image: url('./images/current-bg.png');
    background-color: transparent;
    background-position: center;
    background-repeat: repeat-X;
    height: 36px;
    padding: none;
    margin: none;
}

.mainmenu.z-tabbox .z-tab .z-tab-hr {
    background-image: url('./images/blank_p.gif');
    background-color: transparent;
    background-position: right;
    background-repeat: repeat;
    height: 36px;
}

.mainmenu.z-tabbox .z-tab .z-tab-hr:hover {
    background-image: url('./images/blank_over_p.gif');
    background-color: transparent;
    background-position: right;
    background-repeat: repeat;
    height: 36px;
}

.mainmenu.z-tabbox .z-tab-seld .z-tab-hr {
    background-image: url('./images/current-bg.png');
    background-color: transparent;
    background-position: center;
    background-repeat: repeat-X;
    height: 36px;
    padding: none;
    margin: none;
}

.mainmenu.z-tab .z-tab-hl:hover .z-tab-hr {
    background-position: right 0;
}

.mainmenu.z-tab .z-tab-hl:hover .z-tab-hl {
    background-position: left 0;
}

.mainmenu.z-tab .z-tab-hl:hover .z-tab-hm {
    background-position: center 0;
}

.mytabpanel.z-tabpanel {
    border-top: none;
}


.mytabpanel .z-tabpanel, .mytabpanel .z-tabbox-ver .z-tabpanel-ver {
    padding: 0px;
}

.mytabpanel.z-tabpanel,.z-tabbox-ver .z-tabpanels-ver {
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
}

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

.maintoolbar.z-toolbar {
    border-color: transparent;
    border-style: solid;
    border-width: 0 0 1px;
    display: block;
    padding: 2px;
    position: relative;
}

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

.maintoolbar.z-toolbar  {
    background: none;
    height: 18px;
}

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

 


/* End: Main Tabs Menu 
---------------------------------------------- */

Download source

Read More

ZK Vertical Menu CSS

 

                                                                                                        

Read More

ZK Form Design–CRUD Screen Example

Zul File

   1: <zk>

   2:     <style src="/practice.css" />

   3:     <window id="PracticeCRUD" title=" " width="520px"

   4:         height="auto" border="normal" minimizable="false" mode="modal" sclass="mymodal"

   5:         maximizable="false" closable="true"

   6:         apply="org.zkoss.bind.BindComposer">

   7:         <separator />

   8:         <label value="Practice information" sclass="flbltitle" />

   9:         <separator />

  10:         <panel width="100%">

  11:             <panelchildren>

  12:                 <separator />

  13:                 <grid width="99.5%" sclass="fgrid">

  14:                     <columns>

  15:                         <column label="" width="150px" />

  16:                         <column label="" />

  17:                     </columns>

  18:                     <rows>

  19:                         <row>

  20:                             <hbox>

  21:                                 <label value="Practice Code" sclass="flabel" />

  22:                                 <label value="*"  sclass="flblreq" />

  23:                             </hbox>

  24:                             <textbox id="txtLoginURL" name="txtLoginURL"

  25:                                 cols="50" maxlength="25" />

  26:                         </row>

  27:                         <row>

  28:                             <hbox>

  29:                                 <label value="Practice Name" sclass="flabel" />

  30:                                 <label value="*" sclass="flblreq" />

  31:                             </hbox>

  32:                             <textbox id="txtPracticeName"

  33:                                 name="txtPracticeName" cols="50" maxlength="50" />

  34:                         </row>

  35:                         <row>

  36:                             <hbox>

  37:                                 <label value="Street Address" sclass="flabel" />

  38:                                 <label value="*" sclass="flblreq" />

  39:                             </hbox>

  40:                             <textbox id="txtAddress1" name="txtAddress1"

  41:                                 cols="50" maxlength="30" />

  42:                         </row>

  43:                         <row>

  44:                             <label value="" />

  45:                             <textbox id="txtAddress2" name="txtAddress2"

  46:                                 cols="50" maxlength="30" />

  47:                         </row>

  48:                         <row>

  49:                             <hbox>

  50:                                 <label value="City" sclass="flabel" />

  51:                                 <label value="*" sclass="flblreq" />

  52:                             </hbox>

  53:                             <textbox id="txtCity" name="txtCity"

  54:                                 cols="50" maxlength="20" />

  55:                         </row>

  56:                         <row>

  57:                             <hbox>

  58:                                 <label value="State" sclass="flabel" />

  59:                                 <label value="*" sclass="flblreq" />

  60:                             </hbox>

  61:                             <combobox id="cmbstate" width="150px"> </combobox>

  62:                         </row>

  63:                         <row>

  64:                             <hbox>

  65:                                 <label value="Zip" sclass="flabel" />

  66:                                 <label value="*" sclass="flblreq" />

  67:                             </hbox>

  68:                             <textbox id="txtZipCode" name="txtZipCode"

  69:                                 cols="30" />

  70:                         </row>

  71:  

  72:                         <row>

  73:                             <hbox>

  74:                                 <label value="NPI" sclass="flabel" />

  75:                             </hbox>

  76:                             <textbox id="txtNPI" name="txtNPI"

  77:                                 maxlength="10" />

  78:                         </row>

  79:                         <row>

  80:                             <hbox>

  81:                                 <label value="EIN" sclass="flabel" />

  82:                             </hbox>

  83:                             <textbox id="txtEIN" name="txtEIN" />

  84:                         </row>

  85:                         <row>

  86:                             <hbox>

  87:                                 <label value="Email" sclass="flabel" />

  88:                             </hbox>

  89:                             <textbox id="txtEmail" name="txtEmail"

  90:                                 cols="50" maxlength="50" />

  91:                         </row>

  92:                         <row>

  93:                             <hbox>

  94:                                 <label value="Phone" sclass="flabel" />

  95:                                 <label value="*" sclass="flblreq" />

  96:                             </hbox>

  97:                             <hbox>

  98:                                 <textbox id="phone1" name="phone1"

  99:                                     width='150px' />

 100:                                 <label value="Ext" sclass="flabel" />

 101:                                 <textbox id="txtPhoneExt"

 102:                                     name="txtPhoneExt" />

 103:                             </hbox>

 104:                         </row>

 105:                         <row>

 106:                             <hbox>

 107:                                 <label value="Fax" sclass="flabel" />

 108:                             </hbox>

 109:                             <textbox id="txtFax" name="txtFax" />

 110:                         </row>

 111:                     </rows>

 112:                 </grid>

 113:             </panelchildren>

 114:         </panel>

 115:         <separator />

 116:         <div align="center">

 117:             <button id="submit" label="Submit" sclass="mybutton blue small bigrounded" mold="trendy" />

 118:             <button id="cancel" label="Cancel" sclass="mybutton blue small bigrounded" mold="trendy" />

 119:         </div>

 120:         <separator />

 121:     </window>

 122: </zk>

CSS File

   1: .fgrid tr.z-row

   2:         td.z-row-inner,tr.z-row,div.z-grid-body div.z-cell,div.z-grid {

   3:     border: none;

   4:     overflow: hidden;

   5:     zoom: 1;

   6:     background: white;

   7:     border-top: none;

   8:     border-left: none;

   9:     border-right: none;

  10:     border-bottom: none;

  11: }

  12:  

  13: .fgrid .z-grid-odd .fgrid .z-row-inner, .fgrid .z-grid-odd .z-cell {

  14:     background-color: #F7F7F7;

  15:     border-bottom: 1px solid transparent;

  16:     border-left: 1px solid transparent;

  17:     border-top: 1px solid transparent;

  18: }

  19:  

  20:  

  21: .fgrid .z-grid-odd .fgrid.z-row-inner, .fgrid.z-grid-odd .z-cell, .fgrid.z-grid-odd {

  22:     background: none repeat scroll 0 0 transparent;

  23:  

  24: }

  25:  

  26: .mymodal .z-window-modal-hm,.mymodal .z-window-modal-br,.mymodal .z-window-modal-cr,.mymodal .z-window-modal-cl,.mymodal .z-window-modal-hr,.mymodal .z-window-modal-tr,.mymodal .z-window-modal-hl

  27:     {

  28:     background-image: none;

  29:     background-color: #0C6BA8;

  30: }

  31:  

  32:  

  33: .mymodal.z-window-modal-shadow, .z-window-highlighted-shadow {

  34:     box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);

  35: }

  36:  

  37: .mymodal .z-window-modal-icon {

  38:     width: 20px;

  39:     height: 16px;

  40:     border-width: 1px;

  41:     border-style: solid;

  42:     border-color: #0C6BA8 #0C6BA8 #0C6BA8 #0C6BA8;

  43:     box-shadow: inset 0 1px 0 #0C6BA8, inset -1px -1px 0 #0C6BA8, inset -1px

  44:         -2px 0 #0C6BA8;

  45: }

  46:  

  47: .mymodal .z-window-modal-close {

  48:     background: url('images/close.jpg') transparent no-repeat 0 0;

  49: }

  50:  

  51: .mymodal .z-window-modal-header,.mymodal .z-window-modal-header-noborder

  52:     {

  53:     padding-top: 1px;

  54:     padding-right: -1px;

  55:     padding-bottom: 1px;

  56:     padding-left: 0;

  57:     margin-right: -4px;

  58:     color: white;

  59:     font-family: "Tahoma", verdana, arial, sans-serif;

  60:     font-size: 12px;

  61:     font-weight: bolder;

  62: }

  63:  

  64: /* Start: Input Form Title 

  65: ---------------------------------------------- */

  66: .flbltitle.z-label {

  67:     font-size: 14px;

  68:     font-weight: bolder;

  69:     color: #0C6BA8;

  70: }

  71:  

  72: /* End: Input Form Title 

  73: ---------------------------------------------- */

  74:  

  75: /* Start: Input Form Label

  76: ---------------------------------------------- */

  77: .flabel.z-label {

  78:     font-size: 12px;

  79:     font-family: verdana, arial, sans-serif

  80: }

  81:  

  82: /* End: Input Form Label 

  83: ---------------------------------------------- */

  84:  

  85: /* Start: Required Field asterix 

  86: ---------------------------------------------- */

  87: .flblreq.z-label {

  88:     font-size: 16px;

  89:     font-weight: bolder;

  90:     color: red;

  91: }

  92:  

  93: /* End: Required Field asterix 

  94: ---------------------------------------------- */

  95:  

  96: /* button 

  97: ---------------------------------------------- */

  98: .mybutton.z-button .z-button-cm {

  99:     background-image: none;

 100:     color: white;

 101:     font-weight: bolder;

 102: }

 103:  

 104: .mybutton.z-button .z-button-tm,.z-button .z-button-bm {

 105:     background-image: none;

 106: }

 107:  

 108: .mybutton.z-button .z-button-cl,.z-button .z-button-cr {

 109:     background-image: none;

 110: }

 111:  

 112: .mybutton.z-button .z-button-tl {

 113:     background-image: none;

 114: }

 115:  

 116: .mybutton.z-button .z-button-bl {

 117:     background-image: none;

 118: }

 119:  

 120: .mybutton.z-button .z-button-tr {

 121:     background-image: none;

 122: }

 123:  

 124: .mybutton.z-button .z-button-br {

 125:     background-image: none;

 126: }

 127:  

 128: .button {

 129:     display: inline-block;

 130:     zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */

 131:     *display: inline;

 132:     vertical-align: baseline;

 133:     margin: 0 2px;

 134:     outline: none;

 135:     cursor: pointer;

 136:     text-align: center;

 137:     text-decoration: none;

 138:     font: 14px/100% Arial, Helvetica, sans-serif;

 139:     padding: .5em 2em .55em;

 140:     text-shadow: 0 1px 1px rgba(0, 0, 0, .3);

 141:     -webkit-border-radius: .5em;

 142:     -moz-border-radius: .5em;

 143:     border-radius: .5em;

 144:     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

 145:     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

 146:     box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

 147: }

 148:  

 149: .button:hover {

 150:     text-decoration: none;

 151: }

 152:  

 153: .button:active {

 154:     position: relative;

 155:     top: 1px;

 156: }

 157:  

 158: .smallrounded {

 159:     -webkit-border-radius: 9em;

 160:     -moz-border-radius: 9em;

 161:     border-radius: 9em;

 162: }

 163:  

 164: .bigrounded {

 165:     -webkit-border-radius: 2em;

 166:     -moz-border-radius: 2em;

 167:     border-radius: 2em;

 168: }

 169:  

 170: .medium {

 171:     font-size: 12px;

 172:     padding: .4em 1.5em .42em;

 173: }

 174:  

 175: .small {

 176:     font-size: 11px;

 177:     padding: .2em 1em .275em;

 178: }

 179:  

 180: .roundsearch {

 181:     background-image: url('../images/green_search_button.png');

 182:     background-position: center;

 183:     height: 22px;

 184:     width: 22px;

 185: }

 186:  

 187: .roundsearch:hover {

 188:     background-image: url('../images/green_search_button-hover.png');

 189:     background-position: center;

 190:     height: 22px;

 191:     width: 22px;

 192: }

 193:  

 194: /* color styles 

 195: ---------------------------------------------- */

 196:  

 197: /* black */

 198: .black {

 199:     color: #d7d7d7;

 200:     border: solid 1px #333;

 201:     background: #333;

 202:     background: -webkit-gradient(linear, left top, left bottom, from(#666),

 203:         to(#000) );

 204:     background: -moz-linear-gradient(top, #666, #000);

 205:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',

 206:         endColorstr='#000000' );

 207:     padding: 3px 5px 3px 5px;

 208: }

 209:  

 210: .black:hover {

 211:     background: #000;

 212:     background: -webkit-gradient(linear, left top, left bottom, from(#444),

 213:         to(#000) );

 214:     background: -moz-linear-gradient(top, #444, #000);

 215:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',

 216:         endColorstr='#000000' );

 217:     padding: 4px 5px 2px 5px;

 218: }

 219:  

 220: .black:active {

 221:     color: #666;

 222:     background: -webkit-gradient(linear, left top, left bottom, from(#000),

 223:         to(#444) );

 224:     background: -moz-linear-gradient(top, #000, #444);

 225:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',

 226:         endColorstr='#666666' );

 227:     padding: 3px 5px 3px 5px;

 228: }

 229:  

 230: /* gray */

 231: .gray {

 232:     color: #e9e9e9;

 233:     border: solid 1px #555;

 234:     background: #6e6e6e;

 235:     background: -webkit-gradient(linear, left top, left bottom, from(#888),

 236:         to(#575757) );

 237:     background: -moz-linear-gradient(top, #888, #575757);

 238:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',

 239:         endColorstr='#575757' );

 240:     padding: 3px 5px 3px 5px;

 241: }

 242:  

 243: .gray:hover {

 244:     background: #616161;

 245:     background: -webkit-gradient(linear, left top, left bottom, from(#757575),

 246:         to(#4b4b4b) );

 247:     background: -moz-linear-gradient(top, #757575, #4b4b4b);

 248:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',

 249:         endColorstr='#4b4b4b' );

 250:     padding: 4px 5px 2px 5px;

 251: }

 252:  

 253: .gray:active {

 254:     color: #afafaf;

 255:     background: -webkit-gradient(linear, left top, left bottom, from(#575757),

 256:         to(#888) );

 257:     background: -moz-linear-gradient(top, #575757, #888);

 258:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',

 259:         endColorstr='#888888' );

 260:     padding: 3px 5px 3px 5px;

 261: }

 262:  

 263: /* white */

 264: .white {

 265:     color: #606060;

 266:     border: solid 1px #b7b7b7;

 267:     background: #fff;

 268:     background: -webkit-gradient(linear, left top, left bottom, from(#fff),

 269:         to(#ededed) );

 270:     background: -moz-linear-gradient(top, #fff, #ededed);

 271:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',

 272:         endColorstr='#ededed' );

 273:     padding: 3px 5px 3px 5px;

 274: }

 275:  

 276: .white:hover {

 277:     background: #ededed;

 278:     background: -webkit-gradient(linear, left top, left bottom, from(#fff),

 279:         to(#dcdcdc) );

 280:     background: -moz-linear-gradient(top, #fff, #dcdcdc);

 281:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',

 282:         endColorstr='#dcdcdc' );

 283:     padding: 4px 5px 2px 5px;

 284: }

 285:  

 286: .white:active {

 287:     color: #999;

 288:     background: -webkit-gradient(linear, left top, left bottom, from(#ededed),

 289:         to(#fff) );

 290:     background: -moz-linear-gradient(top, #ededed, #fff);

 291:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',

 292:         endColorstr='#ffffff' );

 293:     padding: 3px 5px 3px 5px;

 294: }

 295:  

 296: /* orange */

 297: .orange {

 298:     color: #fef4e9;

 299:     border: solid 1px #da7c0c;

 300:     background: #f78d1d;

 301:     background: -webkit-gradient(linear, left top, left bottom, from(#ffac53),

 302:         to(#fe7d1e) );

 303:     background: -moz-linear-gradient(top, #ffac53, #fe7d1e);

 304:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffac53',

 305:         endColorstr='#fe7d1e' );

 306:     padding: 3px 5px 3px 5px;

 307: }

 308:  

 309: .orange:hover {

 310:     background: #f47c20;

 311:     background: -webkit-gradient(linear, left top, left bottom, from(#fe7d1e),

 312:         to(#ffac53) );

 313:     background: -moz-linear-gradient(top, #fe7d1e, #ffac53);

 314:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe7d1e',

 315:         endColorstr='#ffac53' );

 316:     padding: 4px 5px 2px 5px;

 317: }

 318:  

 319: .orange:active {

 320:     color: #fcd3a5;

 321:     background: -webkit-gradient(linear, left top, left bottom, from(#f47a20),

 322:         to(#faa51a) );

 323:     background: -moz-linear-gradient(top, #f47a20, #faa51a);

 324:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',

 325:         endColorstr='#faa51a' );

 326:     padding: 3px 5px 3px 5px;

 327: }

 328:  

 329: /* red */

 330: .red {

 331:     color: #faddde;

 332:     border: solid 1px #980c10;

 333:     background: #d81b21;

 334:     background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24),

 335:         to(#aa1317) );

 336:     background: -moz-linear-gradient(top, #ed1c24, #aa1317);

 337:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',

 338:         endColorstr='#aa1317' );

 339:     padding: 3px 5px 3px 5px;

 340: }

 341:  

 342: .red:hover {

 343:     background: #b61318;

 344:     background: -webkit-gradient(linear, left top, left bottom, from(#c9151b),

 345:         to(#a11115) );

 346:     background: -moz-linear-gradient(top, #c9151b, #a11115);

 347:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',

 348:         endColorstr='#a11115' );

 349:     padding: 4px 5px 2px 5px;

 350: }

 351:  

 352: .red:active {

 353:     color: #de898c;

 354:     background: -webkit-gradient(linear, left top, left bottom, from(#aa1317),

 355:         to(#ed1c24) );

 356:     background: -moz-linear-gradient(top, #aa1317, #ed1c24);

 357:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',

 358:         endColorstr='#ed1c24' );

 359:     padding: 3px 5px 3px 5px;

 360: }

 361:  

 362: /* blue */

 363: .blue {

 364:     color: #d9eef7;

 365:     border: solid 1px #0076a3;

 366:     background: #0095cd;

 367:     background: -webkit-gradient(linear, left top, left bottom, from(#77bcfc),

 368:         to(#286a99) );

 369:     background: -moz-linear-gradient(top, #77bcfc, #286a99);

 370:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77bcfc',

 371:         endColorstr='#286a99' );

 372:     padding: 3px 5px 3px 5px;

 373: }

 374:  

 375: .blue:hover {

 376:     background: #007ead;

 377:     background: -webkit-gradient(linear, left top, left bottom, from(#286a99),

 378:         to(#77bcfc) );

 379:     background: -moz-linear-gradient(top, #286a99, #77bcfc);

 380:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#286a99',

 381:         endColorstr='#77bcfc' );

 382:     padding: 4px 5px 2px 5px;

 383: }

 384:  

 385: .blue:active {

 386:     color: #80bed6;

 387:     background: -webkit-gradient(linear, left top, left bottom, from(#0078a5),

 388:         to(#00adee) );

 389:     background: -moz-linear-gradient(top, #0078a5, #00adee);

 390:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',

 391:         endColorstr='#00adee' );

 392:     padding: 3px 5px 3px 5px;

 393: }

 394:  

 395: /* rosy */

 396: .rosy {

 397:     color: #fae7e9;

 398:     border: solid 1px #b73948;

 399:     background: #da5867;

 400:     background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c),

 401:         to(#bf404f) );

 402:     background: -moz-linear-gradient(top, #f16c7c, #bf404f);

 403:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',

 404:         endColorstr='#bf404f' );

 405:     padding: 3px 5px 3px 5px;

 406: }

 407:  

 408: .rosy:hover {

 409:     background: #ba4b58;

 410:     background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a),

 411:         to(#a53845) );

 412:     background: -moz-linear-gradient(top, #cf5d6a, #a53845);

 413:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',

 414:         endColorstr='#a53845' );

 415:     padding: 4px 5px 2px 5px;

 416: }

 417:  

 418: .rosy:active {

 419:     color: #dca4ab;

 420:     background: -webkit-gradient(linear, left top, left bottom, from(#bf404f),

 421:         to(#f16c7c) );

 422:     background: -moz-linear-gradient(top, #bf404f, #f16c7c);

 423:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',

 424:         endColorstr='#f16c7c' );

 425:     padding: 3px 5px 3px 5px;

 426: }

 427:  

 428: /* green */

 429: .green {

 430:     color: #e8f0de;

 431:     border: solid 1px #538312;

 432:     background: #64991e;

 433:     background: -webkit-gradient(linear, left top, left bottom, from(#93dd31),

 434:         to(#4f8801) );

 435:     background: -moz-linear-gradient(top, #93dd31, #4f8801);

 436:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93dd31',

 437:         endColorstr='#4f8801' );

 438:     padding: 3px 5px 3px 5px;

 439: }

 440:  

 441: .green:hover {

 442:     background: #538018;

 443:     background: -webkit-gradient(linear, left top, left bottom, from(#4f8801),

 444:         to(#93dd31) );

 445:     background: -moz-linear-gradient(top, #4f8801, #93dd31);

 446:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f8801',

 447:         endColorstr='#93dd31' );

 448:     padding: 4px 5px 2px 5px;

 449: }

 450:  

 451: .green:active {

 452:     color: #a9c08c;

 453:     background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e),

 454:         to(#7db72f) );

 455:     background: -moz-linear-gradient(top, #4e7d0e, #7db72f);

 456:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',

 457:         endColorstr='#7db72f' );

 458:     padding: 3px 5px 3px 5px;

 459: }

 460:  

 461: /* pink */

 462: .pink {

 463:     color: #feeef5;

 464:     border: solid 1px #d2729e;

 465:     background: #f895c2;

 466:     background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3),

 467:         to(#f171ab) );

 468:     background: -moz-linear-gradient(top, #feb1d3, #f171ab);

 469:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',

 470:         endColorstr='#f171ab' );

 471:     padding: 3px 5px 3px 5px;

 472: }

 473:  

 474: .pink:hover {

 475:     background: #d57ea5;

 476:     background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb),

 477:         to(#e86ca4) );

 478:     background: -moz-linear-gradient(top, #f4aacb, #e86ca4);

 479:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',

 480:         endColorstr='#e86ca4' );

 481:     padding: 4px 5px 2px 5px;

 482: }

 483:  

 484: .pink:active {

 485:     color: #f3c3d9;

 486:     background: -webkit-gradient(linear, left top, left bottom, from(#f171ab),

 487:         to(#feb1d3) );

 488:     background: -moz-linear-gradient(top, #f171ab, #feb1d3);

 489:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',

 490:         endColorstr='#feb1d3' );

 491:     padding: 3px 5px 3px 5px;

 492: }

 493:  

 494:  

Read More