1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
/** *************************************************************************
* Base form styles
*/
/* Zero out padding and margin, adjust where needed later */
form, fieldset, label, input, .checkbox, textarea, select, option, form div {
margin: 0;
padding: 0;
}
fieldset {
margin: 1em 0;
padding: 1em;
border: 1px solid #999;
}
legend {
font-weight: bold;
margin: 0 2% .5em 0;
padding: .2em .5em;
}
input.text, textarea, select, input.password {
border: 1px solid #666;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
option {
float: none;
clear: both;
margin-right: 2em;
}
input.radio, input.checkbox {
margin-right: .5em;
}
/* Create a bit of padding for text inputs and selects */
input.text, input.password, input.button, textarea, select {
padding: .2em;
}
input.button {
margin-right: 1em;
padding: .2em .6em;
}
.readonly {
color: #999;
background: #e7e7e7;
}
/* standard widths */
.w12 { width: 12% }
.w25 { width: 25% }
.w37 { width: 37% }
.w50 { width: 50% }
.w62 { width: 62% }
.w75 { width: 75% }
.w87 { width: 87% }
.wauto { width: auto; }
/** *************************************************************************
* Provide proper vertical alignment for expanded and compact forms
*/
.gExpandedForm .row div,
.gCompactForm div div label {
padding-top: .5em;
}
/** *************************************************************************
* Expanded form layout styles
*/
.gExpandedForm { overflow: hidden; }
.gExpandedForm .row {
padding: .3em 0;
white-space: nowrap;
overflow: hidden;
clear: both;
}
.gExpandedForm label,
.gExpandedForm .row p,
.gExpandedForm .row div,
.gExpandedForm input,
.gExpandedForm select,
.gExpandedForm textarea {
float: left;
}
/* change column widths for labels and inputs */
.gExpandedForm .text, textarea { width: 80%; }
.gExpandedForm label, .gExpandedForm .row p {
width: 15%;
margin: .5em 1em .5em 0;
text-align: right;
white-space: normal;
overflow: hidden;
}
.gExpandedForm .row div {
white-space: nowrap;
overflow: hidden;
clear: none;
}
/* labels and form inputs inside of divs should not float */
.gExpandedForm .row div * {
float: none;
clear: none;
}
.expanded input.checkbox,
.expanded input.radio,
.expanded select {
margin-top: 1.5em;
}
.gExpandedForm div div input {
margin-right: 0;
}
/** *************************************************************************
* Compact form layout styles
*/
.gCompactForm { overflow: hidden; }
.gCompactForm div,
.gCompactForm label,
.gCompactForm input,
.gCompactForm select,
.gCompactForm textarea {
float: left;
}
.gCompactForm input.text,
.gCompactForm select,
.gCompactForm textarea {
/* set width: auto to allow form element content
to set width otherwise 90% is a good setting */
width: 90%; /* determines space between form elements */
}
/* Increase width of elements in twoper
columns to provide better alignment */
.gCompactForm .twoper input.text,
.gCompactForm .twoper select,
.gCompactForm .twoper textarea {
width: 95%;
}
.gCompactForm div {
width: 99%;
margin-bottom: 1em; /* space between rows */
clear: both;
}
/* Nested divs shouldn't clear floated elements */
/* keeps nested divs from compounding margin value */
.gCompactForm div div {
margin-bottom: 0;
clear: none;
}
/* Nested div label contents should determine their own width */
.gCompactForm div div label {
width: auto;
white-space: normal;
/* unccomment to stack form inputs inside a row */
/* clear: left; */
margin-right: 1em;
}
/* Fix paragraph white space in Safari */
.gCompactForm div div p {
margin: 0;
padding: 0;
}
/* Compact layout - Set item width within rows */
.oneper label, .oneper div { width: 99%; } /* can't be 100%, IE bug */
.twoper label, .twoper div { width: 46%; }
.threeper label, .threeper div { width: 32%; }
.fourper label, .fourper div { width: 23%; }
.fiveper label, .fiveper div { width: 19%; }
.sixper label, .sixper div { width: 15%; }
.sevenper label, .sevenper div { width: 13%; }
.eightper label, .eightper div { width: 11%; }
.nineper label, .nineper div { width: 10%; }
.tenper label, .tenper div { width: 8.7%; }
.oneper label, .oneper div,
.twoper label, .twoper div,
.threeper label, .threeper div,
.fourper label, .fourper div,
.fiveper label, .fiveper div,
.sixper label, .sixper div,
.sevenper label, .sevenper div,
.eightper label, .eightper div,
.nineper label, .nineper div,
.tenper label, .tenper div {
white-space: nowrap;
overflow: hidden;
border: none;
border-collapse: collapse;
}
|
