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: