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 { display: flex; }
49 body.cards form.newcard input[name=seed] { flex: 1; }
52 /* ============ LIST ITEMS, Generic ============= */
58 width: 98%; width: calc(100% - 2em);
59 margin-left: auto; margin-right: auto;
61 box-shadow: .125em .125em .25em;
65 /* HACK: put anchor point 10em above card and highlight target element */
66 div:target { box-shadow: none; z-index: 0; }
80 box-shadow: .125em .125em .25em;
81 animation: highlight 4s;
84 @keyframes highlight { from { background-color: #FF0; } to { background-color: transparent; } }
87 div .section, form .section {
92 word-break: break-word;
95 div .section :last-child, form .section :last-child {
99 div .section h2, form .section h2,
100 div .section h3, form .section h3 {
101 border-bottom: 1pt solid #EEE;
103 div .control, form .control {
104 background-color: #EEE;
109 @media(min-width: 60em) {
110 div .section, form .section {
112 width: calc(100% / 10);
114 div .section :last-child { margin-bottom: 0; }
115 div .control, form .control {
116 background-color: transparent;
118 div .section:nth-of-type(2n) {
119 background-color: #EEE;
122 @media(min-width: 80em) {
123 div .control, form .control {
125 width: calc(100% / 10);
127 div .control .item, form .control .item {
129 margin-bottom: .25em;
133 div .section .item, form .section .item,
134 form .section.attendance > label {
139 div .section .item.NOTE {
140 white-space: pre-wrap;
143 form .section .item {
144 margin-bottom: .25em;
147 form .section button[value^=addfield] {
149 margin-top: .5em; padding: 0 .375em;
152 /* HACK: "responsive" Delete Button above each field */
153 form input.delete { display: none; }
154 form input.delete + label {
158 max-width: 1.75em; height: 1.125em; overflow: hidden;
159 color: #FBB; background-color: #444;
160 margin: 0; padding: .125em .5em 0 .5em;
161 border-radius: 4pt 4pt 0 0;
162 transition: max-width .3s;
164 form input.delete + label:before { content: '\274c '; margin-right: .5em; }
165 form input.delete + label:hover { max-width: 10em; }
166 -form input.delete + label:hover:before { content: ''; }
167 -form input.delete + label:hover:after { content: ' \274c'; }
168 form input.delete:checked + label,
169 form input.delete:checked + label + *,
170 form input.delete:checked + label + .teltype + .TEL {
176 /* ====== right hand Control Buttons on list items ====== */
183 form .control .item {
184 display: inline-block;
185 margin-bottom: .25em;
186 vertical-align: text-bottom;
189 /* Combined Select/Submit Box */
190 form .control .item.newfield { box-shadow: .125em .125em .25em; }
191 form .control .item.newfield select { margin-right: -1pt; }
192 form .control .item.newfield button { box-shadow: none; }
195 /* HACK: Delete Checkbox before delete Button */
196 form .control .item.delete {
198 bottom: .375em; left: .25em; width: auto;
199 padding-bottom: calc(2.25em + 2pt);
202 form .control .item.delete input + label + button {
205 bottom: 0; width: 100%;
207 background-color: #FEE;
210 form .control .item.delete:after {
211 content: attr(label);
214 bottom: 0; width: 100%;
219 box-shadow: .125em .125em .25em;
221 form .control .item.delete input:checked + label + button { display: block; }
224 @media(min-width: 80em) {
225 form .control { padding: .25em; min-height: 16em; }
226 form .control .item { width: 100%; }
227 form .control .item.newfield select { width: calc(100% - 2.5em); }
228 form .control .item.delete { bottom: .125em; right: .25em; }
231 /* ======= LIST ITEMS, Clients ======= */
233 div.card .therapies a.therapy.button { padding: .25em; line-height: .75em; }
235 form.card .insurance #hi_select_list:checked ~ .tab[name=hi_company] {display: block; }
236 form.card .insurance #hi_other:checked ~ .tab[name=hi_other] {display: block; }
238 /* ======= LIST ITEMS, Courses ======= */
240 form.course .dtstart input[name=DTS_YEAR],
241 form.course .dtstart select[name=DTS_MONTH] { width: calc(50% - 1.25em); }
242 form.course .dtstart input[name=DTS_YEAR] { margin-right: -.375em; }
243 form.course .dtstart table { width: 100%; margin: 1em 0; }
244 form.course .dtstart table td { text-align: right; -border: .5pt solid; }
245 form.course .dtstart table input[type=radio] { display: none; }
246 form.course .dtstart table input[type=radio] + label {
249 margin: 0; padding: 0 3pt;
251 form.course .dtstart table input[type=radio]:checked + label {
254 box-shadow: .125em .125em .25em;
257 form.course .dtstart label.DTSTIME {
258 display: inline-block;
261 width: calc(100% - 7.875em);
263 form.course .dtstart input[name=DTS_HOUR],
264 form.course .dtstart input[name=DTS_MINUTE] {
265 vertical-align: baseline;
270 form.course .recur .item { white-space: nowrap; }
271 form.course .recur .item > * { margin-bottom: 0; vertical-align: baseline; }
272 form.course .recur input[name=RRULE_INTERVAL],
273 form.course .recur input[name=RRULE_COUNT],
274 form.course .recur input[name=RRULE_UMONTH],
275 form.course .recur input[name=RRULE_UDAY] { width: 3.5em; }
276 form.course .recur input[name=RRULE_UYEAR] { width: 4.5em; }
277 form.course .recur input[name=RRULE_UYEAR],
278 form.course .recur input[name=RRULE_UMONTH],
279 form.course .recur input[name=RRULE_UDAY] {
280 margin-right: -.375em;
283 form.course .attendance div.attendance {
287 form.course .attendance label {
288 display: inline-block;
289 max-width: calc(100% - 2em);
293 form.course .attendance input { margin-top: .375em; }
295 /* ======== Categories Page ======== */
297 body.categories form ul { list-style: none; margin: 0; }
300 display: inline-block;
301 background-color: #EEE;
302 margin-right: .5em; margin-bottom: .5em;
304 box-shadow: .125em .125em .25em;
306 form.categories li button[name=remove] {
309 background-color: #FBB;
313 form.categories li button[name=remove]:before {
318 form.categories li:last-child { padding-left: 0 }
320 body.categories form.namelist ul.namelist > li:nth-of-type(2n + 1) { background-color: #EEE; }
321 body.categories form.namelist ul.namelist > li h2,
322 body.categories form.namelist ul.namelist > li ul {
323 display: inline-block;
325 body.categories form.namelist ul.namelist > li h2 {
329 body.categories form.namelist ul.namelist > li ul li {
330 display: inline-block;