* { position: relative; box-sizing: border-box; font-family: sans-serif; font-weight: normal; font-size: initial; font-style: normal; text-decoration: none; line-height: 1.5em; color: inherit; background: transparent; padding: 0; margin: 0; border: none; } body { color: #000; background-color: #FFF; } /* ======= GENERIC HTML STYLES =======*/ p { margin-bottom: 1em; } a { text-decoration: underline; font-style: italic; color: #068; } i, em { font-style: italic; } b, strong { font-weight: bolder; } ul, ol { margin-left: 1.125em; } table th { font-weight: bold; } h1, h2, h3 { font-weight: bold; margin-top: 1em; margin-bottom: .5em; } h1:first-child, h2:first-child, h3:first-child, p + h1, p + h2, p + h3 { margin-top: 0; } h4, h5, h6, form legend { font-weight: bolder; margin-bottom: .25em; } h1 { font-size: 1.5em; } h2 { font-size: 1.125em; } select, input, button, textarea, .control a { display: inline-block; background-color: #FFF; border: 1pt solid; padding: .25em .75em; vertical-align: text-bottom; } .control a { color: inherit; font-style: normal; text-decoration: none; } select { padding: .375em 0; } input[type=radio], input[type=checkbox] { vertical-align: baseline; } input[type=number] { text-align: right; padding-right: 0; } button, input[type=button], .control a { box-shadow: .125em .125em .25em; cursor: pointer; } input[type=radio], input[type=checkbox], input[type=radio] + label, input[type=checkbox] + label { cursor: pointer; } label { margin-right: .75em; } input + label { margin-left: .375em; } /* ====== COMMON ELEMENTS ======*/ body > ul.menu { display: block; height: 1.75em; margin: 0; -padding: 0 .5em; list-style: none; color: #CCC; background-color: #444; box-shadow: inset 0 -.25em .25em #000; overflow: hidden; z-index: 3; } body > .menu li { display: inline-block; } body > .menu a { color: inherit; padding: .5em 3em; box-shadow: inset 0 0 .5em #000; } body.cards > .menu a[href="/cards/"], body.courses > .menu a[href="/courses/"] { color: #000; background-color: #FFF; box-shadow: none; } /* =========== FILTER AND SEARCH Headers ========= */ form.search, form.sort, form.filter, form.newcard, form.newcourses { margin-top: 1em; padding: 0 1em; z-index: 1; } form.filter > h1 { display: none; } form.filter fieldset { margin-top: .5em; } form.filter fieldset.item + fieldset.item legend { display: none; } form.filter fieldset.item input[type=radio] { display: none; } form.filter fieldset.item input[type=radio] + label { display: table-cell; padding: .5em 1em; background-color: #EEE; border-style: solid; border-width: .5pt .25pt 0 .25pt; } form.filter fieldset.item input[type=radio] + label:first-of-type { border-left: 1pt solid; } form.filter fieldset.item input[type=radio]:checked + label { position: relative; background-color: #FFF; box-shadow: .125em -.125em .125em #888; z-index: 1; } form.filter fieldset.item input[type=text], form.filter fieldset.item fieldset.categories { position: relative; display: block; width: 100%; margin-top: -1pt; padding: .25em .75em; border: 1pt solid; box-shadow: .125em .125em .25em #888; } form.filter fieldset.item fieldset.categories { display: none; } form.filter fieldset.item input[value=CATEGORIES]:checked + label + input[type=text] { display: none; } form.filter fieldset.item input[value=CATEGORIES]:checked + label + input[type=text] + fieldset.categories { display: block; } form.filter fieldset.order legend { float: left; margin-right: 1em; } form.filter fieldset label, form.filter fieldset a { white-space: pre;} form.filter button[type=submit] { margin-top: .5em; margin-bottom: .5em; } body.courses form .order { display: inline-block; margin-right: 2em;} /* ============ LIST ITEMS, Generic ============= */ body > form, div.card, div.course { position: relative; width: 98%; width: calc(100% - 2em); margin-left: auto; margin-right: auto; margin-bottom: 1em; box-shadow: .125em .125em .25em; z-index: 1; } /* HACK: put anchor point 10em above card and highlight target element */ div:target { box-shadow: none; z-index: 0; } div:target:before { content: ''; display: block; margin-top: -10em; height: 10em; visibility: hidden; } div:target:after { content: ''; display: block; position: absolute; left: 0; right: 0; top: 10em; bottom: 0; box-shadow: .125em .125em .25em; animation: highlight 4s; z-index: -1; } @keyframes highlight { from { background-color: #FF0; } to { background-color: transparent; } } /**/ div .section, form .section { display: block; vertical-align: top; padding: 0 1em; overflow: hidden; word-break: break-word; } div .section :last-child, form .section :last-child { margin-bottom: 1em; } div .section h2, form .section h2, div .section h3, form .section h3 { border-bottom: 1pt solid #EEE; } div .control, form .control { background-color: #EEE; padding: .25em; text-align: right; } @media(min-width: 60em) { div .section, form .section { display: table-cell; width: calc(100% / 10); } div .section :last-child { margin-bottom: 0; } div .control, form .control { background-color: transparent; } div .section:nth-of-type(2n) { background-color: #EEE; } } @media(min-width: 80em) { div .control, form .control { display: table-cell; width: calc(100% / 10); } div .control .item, form .control .item { display: block; margin-bottom: .25em; } } div .section .item, form .section .item, form .section.attendance > label { display: block; width: 100%; } div .section .item.NOTE { white-space: pre; } form .section .item { margin-bottom: .25em; } form .section button[value^=addfield] { font-size: .75em; margin-top: .5em; padding: 0 .375em; } /* HACK: "responsive" Delete Button above each field */ form input.delete { display: none; } form input.delete + label { float: right; font-size: .75em; line-height: 1; max-width: 1.75em; height: 1.125em; overflow: hidden; color: #FBB; background-color: #444; margin: 0; padding: .125em .5em 0 .5em; border-radius: 4pt 4pt 0 0; transition: max-width .3s; } form input.delete + label:before { content: '\274c '; margin-right: .5em; } form input.delete + label:hover { max-width: 10em; } -form input.delete + label:hover:before { content: ''; } -form input.delete + label:hover:after { content: ' \274c'; } form input.delete:checked + label, form input.delete:checked + label + * { display: none; } /**/ /* ====== right hand Control Buttons on list items ====== */ form .control { position: relative; padding-left: 11em; padding-top: 1.5em; } form .control .item { display: inline-block; margin-bottom: .25em; vertical-align: text-bottom; } /* Combined Select/Submit Box */ form .control .item.newfield { box-shadow: .125em .125em .25em; } form .control .item.newfield select { margin-right: -1pt; } form .control .item.newfield button { box-shadow: none; } /**/ /* HACK: Delete Checkbox before delete Button */ form .control .item.delete { position: absolute; bottom: .375em; left: .25em; width: auto; padding-bottom: calc(2.25em + 2pt); } form .control .item.delete input + label + button { display: none; position: absolute; bottom: 0; width: 100%; color: #800; background-color: #FEE; z-index: 1; } form .control .item.delete:after { content: attr(label); display: block; position: absolute; bottom: 0; width: 100%; text-align: center; color: #BAA; padding: .25em 0; border: 1pt solid; box-shadow: .125em .125em .25em; } form .control .item.delete input:checked + label + button { display: block; } /**/ @media(min-width: 80em) { form .control { padding: .25em; min-height: 16em; } form .control .item { width: 100%; } form .control .item.newfield select { width: calc(100% - 2.5em); } form .control .item.delete { bottom: .125em; right: .25em; } } /* ======= LIST ITEMS, Courses ======= */ form.course .dtstart input[name=DTS_YEAR], form.course .dtstart select[name=DTS_MONTH] { width: calc(50% - 1.25em); } form.course .dtstart input[name=DTS_YEAR] { margin-right: -.375em; } form.course .dtstart table { width: 100%; margin: 1em 0; } form.course .dtstart table td { text-align: right; -border: .5pt solid; } form.course .dtstart table input[type=radio] { display: none; } form.course .dtstart table input[type=radio] + label { display: block; width: 100%; margin: 0; padding: 0 3pt; } form.course .dtstart table input[type=radio]:checked + label { font-weight: bold; padding: 0 2pt; box-shadow: .125em .125em .25em; } form.course .dtstart label.DTSTIME { display: inline-block; font-weight: bold; margin: 0; width: calc(100% - 7.875em); } form.course .dtstart input[name=DTS_HOUR], form.course .dtstart input[name=DTS_MINUTE] { vertical-align: baseline; width: 3.5em; margin-bottom: 0; } form.course .recur .item { white-space: nowrap; } form.course .recur .item > * { margin-bottom: 0; vertical-align: baseline; } form.course .recur input[name=RRULE_INTERVAL], form.course .recur input[name=RRULE_COUNT], form.course .recur input[name=RRULE_UMONTH], form.course .recur input[name=RRULE_UDAY] { width: 3.5em; } form.course .recur input[name=RRULE_UYEAR] { width: 4.5em; } form.course .recur input[name=RRULE_UYEAR], form.course .recur input[name=RRULE_UMONTH], form.course .recur input[name=RRULE_UDAY] { margin-right: -.375em; } form.course .attendance div.attendance { max-height: 16em; overflow-y: scroll; } form.course .attendance label { display: inline-block; max-width: calc(100% - 2em); vertical-align: top; margin-bottom: 0; } form.course .attendance input { margin-top: .375em; }