1 h1:first-child, h2:first-child, h3:first-child,
2 p + h1, p + h2, p + h3 {
6 /* ====== COMMON ELEMENTS ======*/
12 margin: 0; padding: 1em;
15 background-color: #FAA;
16 border: 1px solid #000;
17 border-style: none none solid none;
20 /* =========== FILTER AND SEARCH Headers ========= */
23 form.search, form.sort, form.filter, form.newcard, form.newcourses {
24 margin-top: 1em; padding: 0 1em;
27 form.filter > h1 { display: none; }
29 form.filter fieldset { margin-top: .5em; }
30 form.filter fieldset.item + fieldset.item legend { display: none; }
32 form.filter fieldset.item input[type=text] { display: block; }
34 form.filter fieldset.order legend {
35 float: left; margin-right: 1em;
38 form.filter fieldset label,
39 form.filter fieldset a { white-space: pre;}
40 form.filter button[type=submit] {
41 margin-top: .5em; margin-bottom: .5em;
44 form.filter button[value=export_csv] { margin-left: 1em; }
46 body.courses form .order { display: inline-block; margin-right: 2em;}
48 body.cards form.newcard {
51 background-color: #FFF;
54 body.cards form.newcard input[name=seed] { flex: 1; }
55 body.cards form.newcard a[href="#top"] { float: right; }
58 /* ============ LIST ITEMS, Generic ============= */
64 width: 98%; width: calc(100% - 2em);
65 margin-left: auto; margin-right: auto;
67 box-shadow: .125em .125em .25em;
71 /* HACK: put anchor point 10em above card and highlight target element */
72 div:target { box-shadow: none; z-index: 0; }
86 box-shadow: .125em .125em .25em;
87 animation: highlight 4s;
90 @keyframes highlight { from { background-color: #FF0; } to { background-color: transparent; } }
93 div .section, form .section {
98 word-break: break-word;
101 div .section :last-child, form .section :last-child {
105 div .section h2, form .section h2,
106 div .section h3, form .section h3 {
107 border-bottom: 1pt solid #EEE;
109 div .control, form .control {
110 background-color: #EEE;
115 @media(min-width: 60em) {
116 div .section, form .section {
118 width: calc(100% / 10);
120 div .section :last-child { margin-bottom: 0; }
121 div .control, form .control {
122 background-color: transparent;
124 div .section:nth-of-type(2n) {
125 background-color: #EEE;
128 @media(min-width: 80em) {
129 div .control, form .control {
131 width: calc(100% / 10);
133 div .control .item, form .control .item {
135 margin-bottom: .25em;
139 div .section .item, form .section .item,
140 form .section.attendance > label {
145 div .section .item.NOTE {
146 white-space: pre-wrap;
149 form .section .item {
150 margin-bottom: .25em;
153 form .section button[value^=addfield] {
155 margin-top: .5em; padding: 0 .375em;
158 /* HACK: "responsive" Delete Button above each field */
159 form input.delete { display: none; }
160 form input.delete + label {
164 max-width: 1.75em; height: 1.125em; overflow: hidden;
165 color: #FBB; background-color: #444;
166 margin: 0; padding: .125em .5em 0 .5em;
167 border-radius: 4pt 4pt 0 0;
168 transition: max-width .3s;
170 form input.delete + label:before { content: '\274c '; margin-right: .5em; }
171 form input.delete + label:hover { max-width: 10em; }
172 -form input.delete + label:hover:before { content: ''; }
173 -form input.delete + label:hover:after { content: ' \274c'; }
174 form input.delete:checked + label,
175 form input.delete:checked + label + *,
176 form input.delete:checked + label + .teltype + .TEL {
182 /* ====== right hand Control Buttons on list items ====== */
189 form .control .item {
190 display: inline-block;
191 margin-bottom: .25em;
192 vertical-align: text-bottom;
195 /* Combined Select/Submit Box */
196 form .control .item.newfield { box-shadow: .125em .125em .25em; }
197 form .control .item.newfield select { margin-right: -1pt; }
198 form .control .item.newfield button { box-shadow: none; }
201 /* HACK: Delete Checkbox before delete Button */
202 form .control .item.delete {
204 bottom: .375em; left: .25em; width: auto;
205 padding-bottom: calc(2.25em + 2pt);
208 form .control .item.delete input + label + button {
211 bottom: 0; width: 100%;
213 background-color: #FEE;
216 form .control .item.delete:after {
217 content: attr(label);
220 bottom: 0; width: 100%;
225 box-shadow: .125em .125em .25em;
227 form .control .item.delete input:checked + label + button { display: block; }
230 @media(min-width: 80em) {
231 form .control { padding: .25em; min-height: 16em; }
232 form .control .item { width: 100%; }
233 form .control .item.newfield select { width: calc(100% - 2.5em); }
234 form .control .item.delete { bottom: .125em; right: .25em; }
237 /* ======= LIST ITEMS, Clients ======= */
239 div.card .therapies a.therapy.button { padding: .25em; line-height: .75em; }
241 form.card .insurance #hi_select_list:checked ~ .tab[name=hi_company] {display: block; }
242 form.card .insurance #hi_other:checked ~ .tab[name=hi_other] {display: block; }
244 /* ======= LIST ITEMS, Courses ======= */
246 form.course .dtstart input[name=DTS_YEAR],
247 form.course .dtstart select[name=DTS_MONTH] { width: calc(50% - 1.25em); }
248 form.course .dtstart input[name=DTS_YEAR] { margin-right: -.375em; }
249 form.course .dtstart table { width: 100%; margin: 1em 0; }
250 form.course .dtstart table td { text-align: right; -border: .5pt solid; }
251 form.course .dtstart table input[type=radio] { display: none; }
252 form.course .dtstart table input[type=radio] + label {
255 margin: 0; padding: 0 3pt;
257 form.course .dtstart table input[type=radio]:checked + label {
260 box-shadow: .125em .125em .25em;
263 form.course .dtstart label.DTSTIME {
264 display: inline-block;
267 width: calc(100% - 7.875em);
269 form.course .dtstart input[name=DTS_HOUR],
270 form.course .dtstart input[name=DTS_MINUTE] {
271 vertical-align: baseline;
276 form.course .recur .item { white-space: nowrap; }
277 form.course .recur .item > * { margin-bottom: 0; vertical-align: baseline; }
278 form.course .recur input[name=RRULE_INTERVAL],
279 form.course .recur input[name=RRULE_COUNT],
280 form.course .recur input[name=RRULE_UMONTH],
281 form.course .recur input[name=RRULE_UDAY] { width: 3.5em; }
282 form.course .recur input[name=RRULE_UYEAR] { width: 4.5em; }
283 form.course .recur input[name=RRULE_UYEAR],
284 form.course .recur input[name=RRULE_UMONTH],
285 form.course .recur input[name=RRULE_UDAY] {
286 margin-right: -.375em;
289 form.course .attendance div.attendance {
293 form.course .attendance label {
294 display: inline-block;
295 max-width: calc(100% - 2em);
299 form.course .attendance input { margin-top: .375em; }
301 /* ======== Categories Page ======== */
303 body.categories form ul { list-style: none; margin: 0; }
306 display: inline-block;
307 background-color: #EEE;
308 margin-right: .5em; margin-bottom: .5em;
310 box-shadow: .125em .125em .25em;
312 form.categories li button[name=remove] {
315 background-color: #FBB;
319 form.categories li button[name=remove]:before {
324 form.categories li:last-child { padding-left: 0 }
326 body.categories form.namelist ul.namelist > li:nth-of-type(2n + 1) { background-color: #EEE; }
327 body.categories form.namelist ul.namelist > li h2,
328 body.categories form.namelist ul.namelist > li ul {
329 display: inline-block;
331 body.categories form.namelist ul.namelist > li h2 {
335 body.categories form.namelist ul.namelist > li ul li {
336 display: inline-block;