Work Text:
/* Comments and non-CSS text are automatically removed by AO3 when uploading skins. To keep a comment, remove the prefix / suffix and add a rule such as { color: #000; } at the end to trick it into thinking it’s a CSS rule. */
/* 1. CORE */
body, .toggled form, .dynamic form, .secondary, .dropdown {
background-color: #f9fbfd;
font-family: Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont';
}
li.blurb, fieldset, form dl {
border: none;
padding: 1em;
overflow: hidden;
}
.blurb li, .actions>*, .stats>*, .meta ul li {
margin-block: 0;
}
/* 2. ELEMENTS */
a, a:link, a:visited:hover, a:visited {
border-bottom: none;
}
a:active, a:focus, button:focus, a:focus img {
outline: none;
}
h1, h2, h3, h4, h5, h6, .heading {
font-family: 'Trebuchet MS', 'Book Antiqua', Palatino, Georgia, Verdana, Roboto, serif, 'GNU Unifont';
}
blockquote, pre {
font-family: Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont';
}
/* 3. HEADER */
#header a, #header fieldset, #header form, #header p, #header li, #header h1, #small_login dl {
border-radius: 0.25em;
}
#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a {
background-color: initial;
}
#header .actions a:hover {
background-color: #e8ebee;
}
#header .actions a:active {
background-color: #e3e3e3;
}
/* 3.1. Site title and logo, including header dimensions under “sup” */
#header .heading {
padding: 0.375em 0 0 0.375em;
margin-bottom: -1.6em;
}
#header .heading a {
color: #111;
font-size: 1.375em;
font-family: Roboto, Verdana, Tahoma, Helvetica, Arial, sans-serif;
text-transform: lowercase;
}
#header .heading a span {
top: 0.75em;
left: 60px;
position: fixed;
z-index: 51;
line-height: 1.2em;
padding-inline: 6px;
}
#header .heading sup {
position: fixed;
top: -0.25em;
left: -0.25em;
z-index: 50;
width: 100%;
background: #f9fbfd;
border-bottom: 1px solid #c7c7c7;
padding: 2em 0 4.5em 14.5rem;
} /* cheaty background and shape for header because of z-index fighting */
#header .heading a span:hover {
border-radius: 3px;
box-shadow: 0 0 0 1px gray;
cursor: text;
} /* dumb edit box when you hover over the title */
#header .logo {
width: 34.9px;
height: 24px;
position: fixed;
z-index: 52;
overflow: visible;
padding: 12px 6.5px;
margin: 4px;
border-radius: 48px;
}
#header .logo:hover, #header .logo:focus {
background-color: #e8ebee;
}
#header .logo:active {
background-color: #e3e3e3;
}
/* 3.2. Dropdown menu rules */
#header .menu, #small_login {
background: #fff;
padding: 0.375rem 0;
border-radius: 4px;
box-shadow: 0 0 10px #00000030;
background-image: none;
filter: none;
}
#header .menu li {
border: none;
margin: 0 0.125rem;
}
#header .dropdown .menu a:hover, #header .dropdown .menu a:focus {
background-color: #e8ebee; /* extra light gray hover */
}
#header .dropdown .menu a:active {
background-color: #e3e3e3; /* kinda light gray active */
}
/* 3.3. Right side menus */
#login, #greeting {
display: flex;
margin-top: 0.65em;
z-index: 52;
position: fixed;
right: 0;
}
#header .user {
padding: 0;
}
#header .user a:hover, #header .user a:focus {
color: inherit;
border-radius: 0;
background-color: #e8ebee;
}
#header .user a:active {
background-color: #e3e3e3;
}
#greeting .user > li {
margin: 0 0.5em;
}
/* overspecify for overriding reasons */
#greeting .user > li > a, #greeting .user > li > a:hover, #greeting .user > .dropdown:hover > a, #greeting .user > li > a:focus, #greeting .user > li > a:active {
padding: 1.25rem;
border-radius: 1.25rem;
font-size: 0;
background-size: 1.25rem;
background-position: center;
background-repeat: no-repeat;
}
#greeting .menu {
box-shadow: 0 0 10px #00000030;
}
#greeting .open a, #greeting .dropdown:hover a {
border-radius: initial;
}
#greeting .dropdown:first-child { /* hi, name */
order: 3;
}
#greeting .dropdown:first-child > a, #greeting .dropdown:first-child > a:hover, #greeting .dropdown:first-child:hover > a, #greeting .dropdown:first-child > a:focus, #greeting .dropdown:first-child > a:active {
font-size: inherit;
padding-block: 0.7rem;
border-radius: 1.25rem;
}
#greeting .dropdown:first-child > a {
background-color: #c3e7ff;
color: #004A77;
}
#greeting .dropdown:first-child > a:hover, #greeting .dropdown:first-child > a:focus, #greeting .dropdown:first-child > a:active {
background-color: #b2d7ef;
outline: none;
}
#greeting .dropdown-toggle[href="/works/new"], #greeting .dropdown-toggle[href="/works/new"]:hover, #greeting .dropdown-toggle[href="/works/new"]:focus, #greeting .dropdown:hover a.dropdown-toggle[href="/works/new"] {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/image/edit/materialiconsoutlined/48dp/2x/outline_edit_black_48dp.png");
}
#greeting a[href^="/users/logout"], #greeting a[href^="/users/logout"]:hover, #greeting a[href^="/users/logout"]:focus { /* url is a bit different for remember me */
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/action/exit_to_app/materialiconsoutlined/48dp/2x/outline_exit_to_app_black_48dp.png");
}
#greeting p.icon {
order: 2;
border-radius: 50%;
margin: 0 0.625rem;
height: 2.25rem;
padding: 0.25rem;
line-height: 0; /* screwed with the element size */
width: 2.25rem;
}
#greeting p.icon a {
width: 2.25rem;
height: 2.25rem;
}
#greeting p.icon:hover, #greeting p.icon:focus {
background-color: #e8ebee;
}
#greeting p.icon:active {
background-color: #e3e3e3;
}
#greeting img.icon {
height: 2.25rem;
width: 2.25rem;
border-radius: 50%;
outline: 1px solid #dcdee1;
}
/* 3.4. Primary navigation menus and search */
#header .primary {
background: none;
box-shadow: none;
z-index: 51;
position: fixed;
top: 2.5em;
justify-content: start;
padding-bottom: 0.25em;
}
#header .primary>li:first-of-type {
margin-left: 60px;
}
#header .primary a {
padding: 0.25em 0.5em;
border-radius: 0.25em;
color: #111;
}
#header .search {
float: left;
}
#header #search input:focus {
outline: none;
}
#header #search .text {
background: #e9eef6;
border-radius: 1em;
}
#header #search .text:focus {
background: #fff;
}
#header #search .button {
font-size: 0;
width: 2.5rem;
height: 1.5rem;
background-size: 1.5rem;
background-position: center;
background-repeat: no-repeat;
border-radius: 1rem;
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/action/search/materialicons/48dp/2x/baseline_search_black_48dp.png");
background-color: #f4a82f;
filter: invert(1);
}
#header #search .button:hover, #header #search .button:focus {
background-color: #e19b2b;
}
#header #search .button:active {
background-color: #ca8b27;
}
/* 3.5. Context: when viewing a work, add extra space to the header for a toolbar */
#outer:has(#workskin) #header .heading sup {
padding-bottom: 10em;
}
/* 4. DASHBOARD */
#dashboard {
width: 15.5em;
padding: 0 1em;
margin-top: 4.5em;
}
#dashboard a, #dashboard span {
color: #444;
border-radius: 1.3em;
padding: 0.3em 1.3em;
}
#dashboard a:hover {
background: #f0f0f0;
color: #041e49;
}
#dashboard a:active {
background: #e9e9e9;
}
#dashboard ul {
text-align: left;
padding: 0.75em 0;
border-top: 1px solid #c7c7c7;
}
#dashboard .current {
background: #d3e3fd;
}
#dashboard .current:hover {
background: #c2d3ef; /* unnecessary flavor */
}
#dashboard.own {
border: none;
}
.own { /* to be moved */
background: transparent;
}
/* 5. MAIN */
#main {
background-color: white; /*the paper*/
margin: auto 10%;
/* making the work area style */
border-style: solid; /* paper border */
border-width: 1px; /* paper border */
border-color: #c7c7c7; /* paper border */
border-bottom: none; /* connects page to footer */
padding: 1in;
top: 5em;
}
/* Contexts for works, dashboards, and error pages */
#main:has(#workskin) {
top: 9.5em;
margin-bottom: 5em;
}
#main.dashboard {
padding: 1in;
margin: auto 1in auto 17.5rem;
}
#main.errors, #main.error-502, #main.error-503-maintenance, #main.session {
background-color: #fff;
}
/* 6. FOOTER */
#footer {
background-color: #f9fbfd;
background-image: none;
border-top: none;
color: black;
font-size: inherit;
display: flex;
}
#footer ul {
background-color: #fff;
border: solid 1px #c7c7c7;
border-top: none;
margin: 0 10% 2em 10%;
padding: 1in;
padding-top: 0;
width: 100%;
align-items: start;
}
/* Context: change positioning when there are dashboard tabs */
#outer:has(#dashboard) #footer ul {
margin-left: 17.5rem;
margin-right: 1in;
}
#outer:has(#dashboard) #footer .menu {
margin: 0;
}
#footer li {
margin: 0.5em 0 0;
}
#footer a, #footer button {
color: black;
text-decoration: none;
word-wrap: break-word;
}
#footer a:hover, #footer button:hover,
#footer a:focus, #footer button:focus {
text-decoration: underline;
}
#footer a:focus, #footer button:focus {
outline: none;
}
#footer .module {
border: 1px solid #000;
margin-left: -1px;
padding: 0.75em;
max-width: none;
height: -webkit-fill-available;
}
#footer .menu {
border: none;
display: inline;
} /* overrides earlier */
#footer .heading {
color: #000;
}
/* 7. INTERACTIONS */
/* Big boy #1, very likely to have problems and very complicated. Fieldsets are evil */
/* 7.1. Forms and input fields */
fieldset, form > dl {
border-radius: 1em;
}
fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff {
background: #f0f4f9;
border: none;
margin: 0.643em 0;
box-shadow: none;
}
fieldset fieldset, fieldset dl dl, form blockquote.userstuff {
border-radius: 0.5em;
}
input, textarea {
font-family: Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont';
width: -webkit-fill-available;
box-shadow: none;
border-radius: 0.5em;
}
input:hover, select:hover, textarea:hover,
input:focus, select:focus, textarea:focus,
input:active, select:active, textarea:active {
background: #fff;
border: 1px solid #000;
}
input[type="radio"] + label, input[type="checkbox"] + label {
padding-left: 0;
padding-right: 1em;
}
select {
min-width: 10.5em;
width: 90%;
max-width: 35em;
}
input[type="checkbox"], input[type="file"], input[type="radio"], input.number, p input, p select, .heading select, li select {
border-color: transparent;
border-radius: 0;
}
form dt {
border-bottom: 1px solid #bbb;
}
/* 7.2. User-input-related error messages */
.LV_validation_message {
display: block;
}
.LV_invalid {
background: #fdeded;
border: 1px solid #c00;
color: #c00;
box-shadow: none;
border-radius: 0.5em;
}
.LV_invalid:before {
border-color: #c00 transparent;
}
.autocomplete .notice {
margin-block: 0 !important;
}
/* 7.3. Info boxes that look like a pop-up covering the screen */
#modal-bg {
background: rgba(0, 0, 0, 0.32);
}
#modal {
border: none;
border-radius: 1.5em;
padding-bottom: 4.5em;
}
#modal .content {
max-height: 720px;
}
#modal.tall .content {
bottom: 4.5em;
}
#modal.img {
margin: 0 0 4.5em;
}
#modal .footer {
height: auto;
line-height: normal;
padding: 1.5em;
display: flex;
align-items: center;
justify-content: space-between;
}
#modal .footer .action.modal-closer {
bottom: 0;
position: relative;
right: 0;
}
/* 7.4. various types of forms */
form.verbose legend, .verbose form legend {
border: 4px solid #f0f4f9;
border-radius: 1em;
box-shadow: none;
}
.toggled form, .dynamic form {
padding: 1em;
box-shadow: none;
border-radius: 1em;
}
.toggled form {
margin-block: 1em;
border: 1px solid #ccc;
}
/* 8. ACTIONS */
/* Big boy #2, also very likely to have problems and very complicated. Buttons in my nightmares */
/* 8.1. Buttons! */
ul.actions, p.actions, li.actions, span.actions, fieldset.actions, dd.actions {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: end;
}
.actions a, .actions a:link, .action, .action:link, .actions button, .actions input, input[type="submit"], button, .current, .actions label {
background: none;
border: none;
}
button {
font-family: Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont';
}
input[type="submit"], .action.modal-closer {
color: #fff;
padding: 0.3em 1.3em;
border-radius: 1.3em;
background: #0b57d0;
}
.actions a:hover, .actions button:hover, .actions input:hover, .actions a:focus, .actions button:focus, .actions input:focus, label.action:hover, .action:hover, .action:focus {
color: initial;
border: none;
box-shadow: none;
background-color: #e8ebee;
}
input[type="submit"]:hover, input[type="submit"]:focus, .action.modal-closer:hover, .action.modal-closer:focus {
color: #fff;
background-color: #1e64d4;
}
input[type="submit"]:hover, .action.modal-closer:hover {
box-shadow: 0 2px 5px #00000030;
}
/* TODO: change hover behavior of buttons in blue areas and doc page areas */
.actions a:active, .current, a.current, a:link.current, .current a:visited {
background: #e3e3e3;
border: none;
box-shadow: none;
}
input[type="submit"]:active, .action.modal-closer:active {
background-color: #3574d8;
box-shadow: none;
}
.delete a, span.delete {
box-shadow: none;
}
.secondary {
border: none;
box-shadow: 0 0 10px #00000030;
border-radius: 0.25em;
}
.heading .actions, .heading .action, .heading span.actions {
font-family: Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont';
}
/* 8.2. Work navigation, aka. the thing that looks like the google docs toolbar */
.work.navigation {
position: fixed;
top: 5em;
left: 1em;
right: 1em;
float: left;
z-index: 50;
justify-content: start;
background: #f0f4f9;
border-radius: 2em;
padding-inline: 1em;
}
.work.navigation > li {
padding-left: 0.3em;
}
.work.navigation > li > a:hover, .work.navigation > li > button:hover, .work.navigation > li > form > button:hover {
background-color: #e2e7ea;
}
.work.navigation > li > a:active, .work.navigation > li > button:active, .work.navigation > li > form > button:active {
background-color: #d8dfe4;
}
.work.navigation .add:not(:first-child):before, .work.navigation .chapter.entire:not(:first-child):before, .chapter.bychapter:not(:first-child):before, .work.navigation .bookmark:not(:first-child):before, .work.navigation .comments:not(:first-child):before {
content: ' ';
border-left: 1px solid #c7c7c7;
padding: 0.1em 0.15em;
}
.work.navigation .add a, .work.navigation .edit:not(.tag) a, .work.navigation .chapter:not(.entire):not(.bychapter) > a, .work.navigation .chapter button, .work.navigation .bookmark a, .work.navigation .comments a, .work.navigation .share a, .work.navigation .download button {
font-size: 0;
width: 1.25rem;
height: 1.25rem;
background-size: 1.25rem;
background-position: center;
background-repeat: no-repeat;
padding: 0.25rem;
border-radius: 0.2rem;
}
.work.navigation .bookmark .hidden {
border: 0.65rem solid transparent;
}
.work.navigation .chapter button, .work.navigation .download button {
width: 2.25rem;
background-position-x: 0.25rem;
}
.work.navigation .chapter button:after, .work.navigation .download button:after {
padding: 0 0 0 1rem;
font-size: 0.875rem;
}
.work.navigation .add a {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/content/add/materialiconsoutlined/48dp/2x/outline_add_black_48dp.png");
}
.work.navigation .edit:not(.tag) a {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/image/edit/materialiconsoutlined/48dp/2x/outline_edit_black_48dp.png");
}
.work.navigation .chapter.previous a {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/navigation/chevron_left/materialiconsoutlined/48dp/2x/outline_chevron_left_black_48dp.png");
}
.work.navigation .chapter.next a {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/navigation/chevron_right/materialiconsoutlined/48dp/2x/outline_chevron_right_black_48dp.png");
}
.work.navigation .chapter button {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/editor/format_list_numbered/materialiconsoutlined/48dp/2x/outline_format_list_numbered_black_48dp.png");
}
.work.navigation .bookmark a.bookmark_form_placement_open { /* bookmark add / edit */
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/action/bookmark_add/materialiconsoutlined/48dp/2x/outline_bookmark_add_black_48dp.png");
}
.work.navigation .bookmark a.hidden {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/action/bookmark_remove/materialiconsoutlined/48dp/2x/outline_bookmark_remove_black_48dp.png");
}
.work.navigation .comments a {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/communication/comment/materialiconsoutlined/48dp/2x/outline_comment_black_48dp.png");
}
.work.navigation .share a {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/social/share/materialiconsoutlined/48dp/2x/outline_share_black_48dp.png");
}
.work.navigation .download button {
background-image: url("https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/png/file/file_download/materialiconsoutlined/48dp/2x/outline_file_download_black_48dp.png");
}
.work.navigation .download, .javascript .work.navigation .download .secondary {
border: none;
box-shadow: 0 0 10px #00000030;
}
.javascript .work.navigation .secondary {
right: auto;
}
.chapter.actions {
float: none;
}
/* 9. ROLES, STATES */
.own, .draft, .draft .wrapper, .unread, .child, .unwrangled, .unreviewed {
background: #e9eef6;
}
span.unread, .replied, span.claimed, .actions span.defaulted {
background: #cfd3d9;
font-family: Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont';
border: none;
}
.collapsed:after {
content: " \23f7"; /* ⏷ */
}
.expanded:after {
content: " \23f6"; /* ⏶ */
}
/* Types and groups of data */
/* 10. TYPES, GROUPS */
/* includes many assorted kinds of work tags and stats */
a.tag {
color: #444;
border: none;
}
a.tag:hover, .listbox .heading a.tag:visited:hover {
background: inherit;
color: inherit;
text-decoration: underline;
text-underline-offset: 0.25em;
}
a.tag {
color: #444;
border: none;
}
a.tag:hover, .listbox .heading a.tag:visited:hover {
background: inherit;
color: inherit;
text-decoration: underline;
text-underline-offset: 0.25em;
}
.wrapper {
box-shadow: none;
}
dl.index dd {
background: #e9eef6;
}
a.work {
font-family: 'Trebuchet MS', 'Book Antiqua', Palatino, Georgia, Verdana, Roboto, serif, 'GNU Unifont';
}
.warnings a, li.relationships a {
background: none;
color: #111;
text-decoration: underline;
text-underline-offset: 0.25em;
}
.warnings a:hover, li.relationships a:hover {
color: #666;
}
.icon {
border-radius: 1em;
}
dl.stats {
margin-top: 0.5em;
}
.statistics .index li, .statistics .index dd, .statistics .index .stats {
margin: 0;
}
.statistics .index li > dl {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.statistics .index li:nth-of-type(even) {
background: #e9eef6;
}
/* 11. LISTBOX */
.listbox, fieldset fieldset.listbox {
background: none;
border: 1px solid #000;
padding: 0.25em;
margin: 0 -1px -1px 0;
box-shadow: none;
}
.listbox .heading {
display: block;
}
.listbox .index {
padding: 0.375em;
background: none;
box-shadow: none;
display: block;
}
.listbox li.blurb {
width: auto;
padding: 0.75em;
}
.alphabet .listbox li, .media .listbox {
margin-right: -1em;
}
/* 12. META */
dl.meta {
border: none;
padding: 0;
display: grid;
grid-template-columns: max-content auto;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
margin-bottom: 0.5em;
}
.meta dt { /* left column */
min-width: 0;
width: auto;
margin: 0 -1px -1px 0;
padding: 0.5em;
border: 1px solid #000;
}
.meta dd { /* right column */
width: auto;
margin: 0 -1px -1px 0;
padding: 0.5em;
border: 1px solid #000;
}
.meta .stats dl {
display: grid;
grid-template-columns: auto auto;
}
.meta .stats dl dt, .meta .stats dl dd {
border: none;
text-align: left;
margin: 0;
padding: 0 0.75em 0 0.125em;
width: 100%;
}
.post .meta dl {
padding: 0;
display: grid;
grid-template-columns: max-content auto;
}
.post .meta dt, .post .meta dd {
border: none;
margin: 0.25em 0;
}
/* 13. BLURB */
li.blurb, .blurb .blurb {
padding: 0.5em;
width: -webkit-fill-available;
border: 1px solid #000;
margin: 0 -1px -1px 0;
}
.blurb .module {
float: none;
display: block;
}
.blurb .header .heading, .blurb .header ul {
margin: 0 6.5em 0 65px;
}
.blurb h4 a:link, .blurb h4 img {
color: #0b57d0;
}
.blurb h4 a:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.blurb:has(.viewed.heading) dl.stats {
float: none;
}
.blurb .actions a {
margin-bottom: 0;
}
.blurb .actions a:hover, .blurb .actions a:focus, .blurb .actions a:active {
text-decoration: underline;
text-underline-offset: 0.25em;
background: none;
}
.blurb .header ul.required-tags { /* make it a bit stronger for overriding */
margin: 0;
}
/* 13.1. Bookmarks */
.bookmark p.status {
margin-top: 0;
}
.bookmark .datetime {
top: 36px;
}
.bookmark .user {
padding: 0 0.5em;
}
.bookmark .user .meta {
font-family: 'Trebuchet MS', 'Book Antiqua', Palatino, Georgia, Verdana, Roboto, serif, 'GNU Unifont';
line-height: auto;
}
.reading h4.viewed {
background: transparent;
color: #0b57d0;
float: left;
margin: 0;
}
.prompt .blurb h6 {
font-family: Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif;
}
/* 14. PREFACE */
div.preface .module {
display: block;
}
.preface h3 {
padding-bottom: 0.1em;
}
/* 15. COMMENTS */
div.comment, li.comment {
border: none;
border-radius: 1em;
}
.comment div.icon {
margin: -2.145em 0.5625em 0.5625em 0;
border-bottom: 5px solid #cfd3d9;
}
.comment h4.byline {
background: #cfd3d9;
padding: 0.5em 1em 0.5em 108px;
border-radius: 0.75em 0.75em 0 0;
}
.thread .even {
background: #e9eef6;
}
.comment .userstuff {
margin: 1em;
}
.comment .actions {
padding: 0.125em 0.5em;
}
.comment.group .actions a:hover, .comment.group .actions a:focus, .comment.group .actions a:active,
.comment.group .actions button:hover, .comment.group .actions button:focus, .comment.group .actions button:active {
text-decoration: underline;
text-underline-offset: 0.25em;
background: none;
}
/* Zones */
/* 16. SYSTEM */
.splash .module h3 {
color: #0b57d0;
padding-bottom: 0.1em;
}
.splash .browse li a:before {
color: #0b57d0;
}
.splash .favorite li:nth-of-type(odd) a {
background: #e9eef6;
}
.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus {
background: #cfd3d9;
}
.splash .module div.account {
background: #e9eef6;
border: none;
border-radius: 1em;
padding-bottom: 1em;
}
.splash .account .actions a {
color: #fff;
padding: 0.3em 1.3em;
border-radius: 1.3em;
background: #0b57d0;
}
.splash .account .actions a:hover, i.splash .account .actions a:focus {
background-color: #1e64d4;
}
.splash .account .actions a:hover {
box-shadow: 0 2px 5px #00000030;
}
.faq .categories h3 {
padding-block: 0.25em;
}
.faq .categories h3 li {
position: relative;
top: -0.75em;
}
/* 17. HOME */
.home .header h2 {
padding-bottom: 0.1em;
}
.primary .icon {
border-radius: 0;
}
/* 18. SEARCH/BROWSE */
.media-index > .index {
display: flex;
flex-wrap: wrap;
}
.media-index .listbox {
min-height: 8em;
flex-grow: 1;
}
form.search input[type="text"] {
border: none;
padding: 0.25em 0.75em;
border-radius: 0.5em;
}
.search [role="tooltip"] {
background: #e3e3e3;
border: none;
padding: 0.5em;
border-radius: 0.3em;
}
.search input:focus + [role="tooltip"] {
right: auto;
top: 2.25em;
}
.filters dt, .filters dd, .filters input[type="submit"], .filters .expander {
outline: none;
}
.filters fieldset, .filters dl {
margin: 0;
}
.filters .expander:focus {
outline: none;
}
.filters .group dt.bookmarker {
border-top: 1px solid #bbb;
}
.filters .indicator:before {
background: none;
color: #bbb;
border: 1px solid #888;
background-image: none;
}
.filters input:focus + .indicator + span {
outline: none;
}
.filters input:hover + .indicator:before {
border-color: #2a2a2a;
}
.filters input:checked + .indicator:before {
font-weight: 700;
}
.filters [type="checkbox"]:checked + .indicator:before {
background: #fff;
background-image: none;
}
.filters [type="radio"] + .indicator:before {
vertical-align: -0.25em;
}
.filters [type="radio"]:checked + .indicator:before {
background-image: none;
content: " \25CF";
color: #2a2a2a;
font-size: 50%;
line-height: 1.9;
vertical-align: 0.4em;
margin-right: 0.5em;
width: 2em;
height: 2em;
border-radius: 2em;
}
.filters .exclude [type="checkbox"]:checked + .indicator:before {
background: #fff;
background-image: none;
}
/* 21. USERSTUFF (no change to 19-20) */
#workskin #chapters .userstuff {
font-family: Calibri, Arial, Tahoma, Verdana, Helvetica, sans-serif;
font-size: 1.2em;
} /* change to taste; will be too big if Calibri doesn't load */
/* 22. SYSTEM MESSAGES */
.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash {
background: #d3e3fd;
border: none;
box-shadow: none;
}
.error, .comment_error, .kudos_error, .alert.flash {
background: #fdd3d3;
box-shadow: none;
}
form .notice, form ul.notes {
box-shadow: none;
}
.announcement .userstuff {
background: #d3e3fd;
border: none;
}
span.symbol {
color: #004a77;
}
span.symbol span {
padding: 0.325em;
}
span.question {
background: #c2e7ff;
border-color: #004a77;
}
a.question, .heading a.question {
font-size: 0.75rem;
}
#symbols-key dl {
border: none;
margin: 0;
padding: 0;
}
/* and that’s it for now! accessibility and small screen size stuff will go down here */