2 font-family: sans-serif;
8 color: inherit; background: transparent;
14 color: #000; background-color: #FFF;
17 p { margin-bottom: 1em; }
20 text-decoration: underline;
25 i, em { font-style: italic; }
26 b, strong { font-weight: bolder; }
27 ul, ol { margin-left: 1.125em; }
35 h1:first-child, h2:first-child, h3:first-child,
36 p + h1, p + h2, p + h3 {
40 h4, h5, h6, form legend {
45 h1 { font-size: 1.5em; }
46 h2 { font-size: 1.125em; }
48 select, input, button, textarea,
50 display: inline-block;
51 background-color: #FFF;
54 vertical-align: text-bottom;
59 text-decoration: none;
62 select { padding: .375em 0; }
64 input[type=radio], input[type=checkbox] {
65 vertical-align: baseline;
68 button, input[type=button],
70 box-shadow: .125em .125em .25em;
73 label { margin-right: .75em; }
82 width: 98%; width: calc(100% - 2em);
83 margin-left: auto; margin-right: auto;
85 box-shadow: .125em .125em .25em;
89 /* HACK: put anchor point 10em above card and highlight target element */
90 div:target { box-shadow: none; z-index: 0; }
103 top: 10em; bottom: 0;
104 box-shadow: .125em .125em .25em;
105 animation: highlight 4s;
108 @keyframes highlight { from { background-color: #FF0; } to { background-color: transparent; } }
111 div .section, form .section {
116 word-break: break-word;
119 div .section :last-child, form .section :last-child {
123 div .section h2, form .section h2,
124 div .section h3, form .section h3 {
125 border-bottom: 1pt solid #EEE;
127 div .control, form .control {
128 background-color: #EEE;
133 @media(min-width: 60em) {
134 div .section, form .section {
136 width: calc(100% / 10);
138 div .section :last-child { margin-bottom: 0; }
139 div .control, form .control {
140 background-color: transparent;
142 div .section:nth-of-type(2n) {
143 background-color: #EEE;
146 @media(min-width: 80em) {
147 div .control, form .control {
149 width: calc(100% / 10);
151 div .control .item, form .control .item {
153 margin-bottom: .25em;
157 div .section .item, form .section .item,
158 form .section.attendance > label {
163 form .section .item {
164 margin-bottom: .25em;
167 form .section button[value^=addfield] {
169 margin-top: .5em; padding: 0 .375em;
172 form input.delete { display: none; }
173 form input.delete + label {
177 max-width: .75em; height: .875em; overflow: hidden;
178 color: #FBB; background-color: #444;
179 margin: 0; padding: .125em .5em 0 .5em;
180 border-radius: 4pt 4pt 0 0;
181 transition: max-width .3s;
183 form input.delete + label:before { content: '\274c '; margin-right: .5em; }
184 form input.delete + label:hover { max-width: 10em; }
185 -form input.delete + label:hover:before { content: ''; }
186 -form input.delete + label:hover:after { content: ' \274c'; }
187 form input.delete:checked + label,
188 form input.delete:checked + label + * {
197 form .control .item {
198 display: inline-block;
199 margin-bottom: .25em;
200 vertical-align: text-bottom;
203 form .control .item.newfield {
204 box-shadow: .125em .125em .25em;
206 form .control .item.newfield select {
209 form .control .item.newfield button {
213 form .control .item.delete {
215 bottom: .375em; left: .25em; width: auto;
216 padding-bottom: calc(2.25em + 2pt);
219 @media(min-width: 80em) {
220 form .control { padding: .25em; min-height: 16em; }
221 form .control .item { width: 100%; }
222 form .control .item.newfield select { width: calc(100% - 2.5em); }
223 form .control .item.delete { bottom: .125em; right: .25em; }
225 form .control .item.delete input + label + button {
228 bottom: 0; width: 100%;
230 background-color: #FEE;
233 form .control .item.delete:after {
234 content: attr(label);
237 bottom: 0; width: 100%;
242 box-shadow: .125em .125em .25em;
244 form .control .item.delete input:checked + label + button { display: block; }