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: