ao3_skins | Flat Squares skin

A modern, 'flat' skin. Maybe someone other than me will find it useful *g*

Things of note: The category and warning icons on the blurbs have been replaced with colour-coded bits of text. The works font is set to a very large 20px.

Updated 2015-05-25.

Previews and code:

Mobile - Tested on iOS only

Parent CSS:

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
input,
textarea,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
}

body,
.dynamic form,
.secondary,
.dropdown {
  margin: 0;
  padding: 0;
}

#main,
#dashboard {
  padding: 1em 3em;
  margin: 0;
}

.landmark {
  font-size: 0;
  opacity: 0;
  height: 0;
  width: 0;
  padding: 0;
  position: absolute;
}

.hidden {
  display: none;
}

#login-block,
li.blurb,
fieldset,
form dl,
.css blockquote {
  padding: 1em;
  margin: 0.5em auto;
  overflow: auto;
}

.blurb li,
.actions,
.stats,
.meta ul li,
.actions form {
  list-style: none;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
}

#outer {
  position: relative;
  margin: auto auto;
}

#inner {
  margin: auto;
}

a,
a:link {
  font-weight: bold;
  text-decoration: none;
}

a img {
  border: 0;
}

h1 {
  font-size: 2.1em;
}

h2 {
  line-height: 1.2;
  font-size: 1.7em;
  text-transform: none;
  font-weight: normal;
}

h3 {
  line-height: 1.3;
  font-size: 1.3em;
  margin: .5375em 0;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 1em;
  line-height: 1.286;
  margin: 0.643em 0;
  font-weight: bold;
}

h6 {
  font-size: 0.875em;
  font-weight: bold;
  line-height: 1.5;
  margin: 1.5em 0;
}

p,
dd,
hr {
  margin: 0.643em 0;
}

hr {
  border: 0;
  border-bottom: 3px solid silver;
}

.clear {
  clear: both;
  height: 0;
  border: 0;
  margin: 0;
  background: transparent;
  opacity: 0;
}

blockquote,
pre {
  margin: 0.643em;
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

kbd,
tt,
code,
var,
pre {
  font-size: 0.75em;
  margin: auto;
}

pre {
  word-break: break-all;
  white-space: pre-wrap;
}

strong,
b {
  font-weight: bold;
}

em,
cite,
i {
  font-style: oblique;
}

cite em,
em cite,
cite i,
i cite,
i em,
em i,
em em,
i i,
cite cite {
  font-style: normal;
}

em cite,
i cite,
ins,
u {
  text-decoration: underline;
}

del,
strike {
  text-decoration: line-through;
}

dfn,
abbr,
acronym {
  font-variant: small-caps;
  cursor: help;
}

.published abbr {
  font-variant: normal;
}

big {
  font-size: 114%;
}

small,
sub,
sup {
  font-size: 87.5%;
}

small small small small {
  font-size: 100%;
}

sub {
  vertical-align: sub;
  line-height: 0;
}

sup {
  vertical-align: super;
  line-height: 0;
}

table {
  border-collapse: collapse;
  margin: 1em auto;
  clear: right;
}

caption {
  height: 0;
  width: 0;
  font-size: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

thead,
tfoot,
td,
th {
  text-align: left;
  vertical-align: top;
  padding: 0.5em;
  padding-right: 1em;
}

tr {
  border-bottom: 1px solid silver;
}

thead tr,
thead td,
th {
  font-weight: bold;
}

thead:hover,
tr:hover {
  background: white;
}

th a,
th a:visited,
th a:link {
  text-decoration: none;
  border: 0;
}

h3 + br,
ul br {
  display: none;
}

#header h3.landmark {
  position: absolute;
  height: 0;
  opacity: 0;
  display: inline-block;
}

#header li,
#header form,
#header input,
#header #search .submit {
  display: inline-block;
  float: none;
}

#header li {
  margin: 0;
}

#header {
  z-index: 3;
  position: relative;
}

#header #greeting {
  position: relative;
  padding: 0;
  float: right;
  margin: 0;
  display: block;
  border: none;
}

#header #login {
  z-index: 1;
}

#header ul.primary {
  float: none;
  position: relative;
  display: table;
  margin: 0px;
  text-align: left;
}

#header .navigation li {
  float: left;
  display: inline-block;
}

#header .navigation a,
#header .navigation input.button,
#header .navigation .current,
#greeting .navigation a {
  text-shadow: none;
  font-weight: normal;
  font-size: 14px;
  border: none;
  border-radius: 0;
  border-bottom: none;
  padding: 0 7px;
  margin: 0;
  background: none;
  text-transform: capitalize;
  overflow: visible;
  display: table-cell;
  vertical-align: middle;
  height: 40px;
}

#header .primary .search {
  display: inline-block;
  padding: 0;
  vertical-align: middle;
  margin-left: 7px;
}

#header .search input[type="text"] {
  font-weight: normal;
  width: 150px;
  text-decoration: none;
  text-transform: none;
  margin: 0;
  vertical-align: middle;
  padding: 0.1em 0.2em;
}

#header .navigation input.button {
  display: inline-block;
  z-index: 1;
}

#header h1 a,
#header fieldset,
#header form,
#header p {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

#header h1 img {
  display: none;
}

#header .menu li {
  margin-top: 0;
  float: none;
  height: auto;
  display: block;
}

#header .menu {
  display: none;
  position: absolute;
}

#header .dropdown:hover .menu,
#header .dropdown-toggle:focus + .menu,
#header .open .menu {
  display: block;
  float: none;
}

#header .primary .menu {
  min-width: 10em;
}

#header .menu {
  padding-top: 0;
}

#header h1 {
  height: 40px;
  margin: auto;
  position: relative;
  float: left;
  display: block;
}

#header h1 a {
  text-align: center;
  width: 60px;
  overflow: hidden;
  height: 40px;
  position: relative;
  display: block;
  z-index: 2;
}

#header h1 a::before {
  width: 60px;
  height: 40px;
  display: table-cell;
  font-weight: bold;
  font-style: normal;
  z-index: 2;
  text-transform: uppercase;
  content: "AO3";
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

#greeting img.icon {
  border-radius: 50%;
  background: none;
  box-shadow: none;
  border: none;
  height: 25px;
  width: 25px;
  vertical-align: middle;
}

#greeting li {
  display: inline-block;
}

#greeting p.icon {
  left: 0;
  top: 0;
  position: absolute;
  float: none;
  display: inline-block;
}

#greeting .icon a {
  height: 40px;
  width: 40px;
  text-align: center;
  overflow: auto;
  display: table-cell;
  vertical-align: middle;
}

#greeting .actions {
  text-align: right;
  position: relative;
  padding: 0;
  padding-left: 35px;
  margin: 0;
}

#header .collections {
  max-height: 220px;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  display: block;
  padding: 0;
  font-size: 1em;
  text-shadow: none;
  border-top: 0;
  line-height: 2;
  background-position: center;
  clear: both;
  background-size: auto 100%;
}

#dashboard {
  padding: 0;
  margin: 1em 0;
  text-align: left;
  float: left;
  width: 11em;
}

#dashboard li {
  display: block;
  padding: 0;
  text-align: left;
  margin: 0;
}

#dashboard a,
#dashboard span {
  font-size: 0.9em;
  background: none;
  display: block;
  white-space: normal;
  height: auto;
  padding: 0.35em 0.7em;
  margin: 0;
  border: none;
  border-left: 4px solid transparent;
  word-wrap: break-word;
  text-decoration: none;
  font-weight: normal;
  text-transform: none;
  border-radius: 0;
}

#dashboard ul.navigation {
  padding-bottom: 0.3em;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  margin-bottom: 0.3em;
  display: block;
  float: none;
}

#dashboard .navigation:last-child {
  border: none;
  padding-bottom: 0;
}

#dashboard ul li {
  display: block;
  text-align: left;
  position: relative;
}

#dashboard .current {
  color: inherit;
  text-decoration: none;
  text-shadow: none;
  border-radius: 0;
}

#dashboard .heading {
  border: none;
}

#main {
  line-height: 1.286;
  margin: auto;
  padding: 2em 1.5em 3.5em 1.5em;
  position: relative;
  min-height: 450px;
}

#main:after {
  content: " ";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

#main.dashboard {
  margin: 0 auto 0 11em;
}

#main.filtered .index {
  float: left;
  width: 75%;
}

#main.home {
  padding: 2em 7.5em 3.5em 0;
}

#main.error,
#main.slow,
#main.maintenance {
  background: url("/images/ao3_logos/sadface.png") top right no-repeat;
  border: 0;
}

#main.slow {
  background: url("/images/ao3_logos/ao3-502.png") top right no-repeat;
}

#main.maintenance {
  background: url("/images/ao3_logos/logo-ruby.png") top right no-repeat;
}

#main.error p {
  margin-right: 400px;
}

#footer {
  text-align: left;
  margin: 0;
  padding: 2em;
}

#footer a,
#footer li {
  text-shadow: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-weight: normal;
  vertical-align: baseline;
  font-size: 100%;
  text-transform: none;
  display: inline;
  text-align: left;
}

#footer li {
  display: block;
  list-style-type: none;
}

#footer .heading {
  font-size: 0.8em;
  font-weight: normal;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

#footer .module {
  vertical-align: top;
  margin-bottom: 2em;
  margin-right: 4em;
  float: none;
  width: auto;
  display: inline-block;
}

#footer .secondary {
  right: auto;
  display: block;
  position: relative;
  height: auto;
  margin: 0;
  box-shadow: none;
}

form {
  clear: right;
}

form.new_user_invite_request dl {
  overflow: auto;
}

fieldset,
dd fieldset,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff {
  overflow: visible;
  border: none;
  display: block;
  margin: 0.643em;
}

fieldset {
  margin: 0.5em 0;
}

fieldset .heading {
  margin: 0 0 0.5em 0;
}

fieldset dl,
fieldset.actions,
fieldset dl fieldset dl,
dd fieldset {
  padding: 0;
  background: transparent;
  border: none;
  clear: right;
}

fieldset fieldset,
fieldset dl dl,
form blockquote.userstuff {
  background: transparent;
  clear: right;
  margin: 0.643em 0;
}

fieldset dd dl,
form .meta dd,
fieldset dl fieldset dl,
dd fieldset {
  margin: 0.643em 0;
  background: transparent;
}

.dynamic form fieldset,
.toggled form dl,
.secondary .toggled form {
  margin: 0;
  padding: 0.5em;
}

.toggled form,
.dynamic form {
  margin-top: 1em;
}

.dynamic form dl {
  padding: 0;
}

.verbose legend {
  top: 2px;
  position: relative;
  height: auto;
  width: auto;
  font-size: 100%;
  padding: 0.5em;
  box-shadow: none !important;
  opacity: 1;
}

fieldset dl:first-of-type;fieldset fieldset:first-of-type {
  margin-top: 0;
}

legend,
input[type="hidden"] {
  height: 0;
  width: 0;
  font-size: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

label {
  cursor: pointer;
  margin-right: 0.375em;
}

textarea,
select,
input {
  border-radius: 0.1em;
  padding: 0.3em;
}

.input input,
fieldset .search input,
dd input {
  width: 90%;
}

textarea {
  width: 96%;
  min-height: 8em;
}

textarea.large {
  min-height: 25em;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
  padding-left: 0.1em;
}

select {
  vertical-align: top;
  width: auto;
  min-width: 10.5em;
}

select[attr*=language_id],
select[name="language_id"] {
  padding: 0;
}

.datetime select {
  width: 32.5%;
}

input[type="radio"],
input[type="checkbox"],
input[type="file"],
input.number,
p input,
p select,
.heading select,
li select {
  width: auto;
  margin-right: 0.375em;
}

.module li {
  margin: 0.2em 0;
}

.index li:not(.listbox,
.blurb) {
  padding: 0.3em 0;
}

input.number {
  width: 4em;
}

option,
.actions option,
form code {
  display: block;
}

form p {
  clear: right;
  margin: auto;
  padding: 0.2em;
}

form dt {
  float: left;
  clear: left;
  min-width: 10.5em;
  width: 25%;
  padding: 0.25em 0.5625em 0.25em 0;
}

form dd {
  float: left;
  width: 72.5%;
}

p.character_counter {
  font-size: 96%;
  text-align: right;
}

.character_counter span {
  display: inline-block;
  width: 3.75em;
}

.comment .character_counter {
  display: inline-block;
  float: right;
}

.LV_validation_message {
  font-weight: bold;
}

.autocomplete div.dropdown ul {
  padding: 0;
  line-height: 1.286;
  display: block;
  font-size: 0.86em;
}

.autocomplete ul li {
  padding: 0.4em;
  margin: auto auto;
}

.autocomplete input,
div.dropdown ul li {
  display: block;
  margin: 0;
  min-width: 10em;
}

form li ul.autocomplete li.input {
  border: 0;
}

.autocomplete .added,
.post .meta dd ul li.added {
  display: block;
  background: transparent;
}

.post .work ul.autocomplete {
  background: transparent;
  border: none;
}

.ui-sortable li {
  border: 1px solid blue;
}

.ui-sortable li:hover {
  cursor: move;
}

.ui-draggable form {
  cursor: move;
}

.ui-timepicker-div dl dd {
  margin: -1.286em 0 0.25em 6em;
}

#ui-datepicker-div {
  overflow: hidden;
  padding: 0.643em;
  font-size: 87.5%;
}

.ui-tooltip,
.qtip {
  position: absolute;
  left: -28000px;
  top: -28000px;
  display: none;
  max-width: 22em;
  min-width: 6em;
  font-size: 0.8em;
  z-index: 100;
}

.ui-tooltip-content {
  position: relative;
  padding: 0.15em 0.25em;
  overflow: hidden;
  word-wrap: break-word;
}

a.modal.help {
  cursor: help;
}

#modal-bg,
#modal-wrap {
  display: none;
  height: 100%;
  left: 0;
  top: 0;
}

#modal-bg {
  background: rgba(0,0,0,0.5);
  position: fixed;
  width: 100%;
  z-index: 499;
}

#modal-bg .loading {
  background: url(/images/indicator.gif) no-repeat center center;
  height: 124px;
  left: 50%;
  margin: -62px 0 0 -62px;
  position: absolute;
  top: 50%;
  width: 124px;
}

#modal-wrap {
  display: none;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 500;
}

#modal-wrap:before {
  content: '';
  height: 100%;
}

#modal-wrap:before,
#modal {
  display: inline-block;
  vertical-align: middle;
}

#modal {
  margin: 3% 0;
  max-width: 800px;
  min-width: 200px;
  padding-bottom: 44px;
  position: relative;
  text-align: left;
  width: 80%;
  z-index: 501;
}

#modal .content {
  overflow: auto;
  padding: 1em;
  margin: 0;
}

#modal #help {
  margin: 0;
}

#modal.tall {
  height: 80%;
  max-height: 720px;
}

#modal.tall.img {
  min-width: 0;
  width: auto;
}

#modal.tall .content {
  margin: 0;
  bottom: 44px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  padding: 1em;
}

#modal.img {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0 0 44px;
  max-height: none;
  max-width: 90%;
  min-width: 0;
  padding: 0;
  width: auto;
}

#modal.img a {
  border: 0;
}

#modal.img.tall {
  height: 90%;
  width: auto;
}

#modal.img .content {
  border: 0;
  overflow: visible;
  padding: 0;
  text-align: center;
}

#modal.img.tall .content {
  height: 100%;
  position: relative;
  width: auto;
}

#modal.img .content img {
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: none;
  max-height: 100%;
  max-width: 100%;
}

#modal .footer {
  bottom: 0;
  height: 44px;
  left: 0;
  line-height: 44px;
  padding: 0 0.6432em;
  right: 0;
  position: absolute;
}

#modal.img .footer {
  background: rgba(0, 0, 0, 0.6);
  box-shadow: none;
  position: fixed;
  text-align: center;
}

#modal .footer .action.modal-closer {
  bottom: 4px;
  position: absolute;
  right: 8px;
}

div.dynamic {
  max-width: 45em;
  position: absolute;
  z-index: 9;
}

.dynamic .status {
  top: 0;
}

.toggled form p.footnote,
.dynamic form p.footnote,
dd .footnote {
  float: none;
  margin: auto;
  padding: 0;
}

.chapter .secondary form {
  margin-top: 0;
}

.secondary select {
  margin: 0.3em;
  padding: 0;
}

.dynamic form dd {
  width: auto;
}

.post .required .warnings {
  font-weight: normal;
}

.post .text textarea {
  height: 36em;
  clear: right;
}

.dashboard fieldset {
  clear: right;
}

.dashboard .filters dt {
  width: auto;
}

.actions * {
  vertical-align: middle;
  display: inline-block;
}

p.actions,
li.actions,
span.actions,
fieldset.actions,
dd.actions {
  float: right;
  text-align: right;
}

.secondary span.actions {
  float: none;
}

#chapter_index .submit {
  width: 100%;
}

.actions a,
a.action,
.action a,
.tags .action a,
input[type="submit"],
.button,
.current,
.delete a,
.actions .gap,
.actions .disabled,
a.showme {
  font-size: 14px;
  display: inline-block;
  line-height: 1.4;
  height: 21px;
  vertical-align: bottom;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  padding: 2px 6px;
  margin: 0.2em AUTO;
  width: auto;
  z-index: 2;
  border: 1px solid transparent;
  font-weight: normal;
  cursor: pointer;
  text-transform: capitalize;
  border-radius: 0.2em;
}

input[type="submit"] {
  height: 27px;
  line-height: 1;
  padding-top: 0;
}

span.delete a {
  vertical-align: middle;
  margin: 0.4em !important;
}

.actions li {
  display: inline-block;
  padding: 0;
  margin: 0;
}

#main .actions li {
  position: relative;
}

#main a[style*="inline"] {
  display: inline-block !important;
  vertical-align: middle;
}

p.submit,
input.submit,
dd.submit {
  float: left;
  display: inline-block;
  height: auto;
  text-align: center;
}

#main ol.pagination {
  margin: 0.3em auto;
  float: left;
  width: 100%;
  text-align: center;
  display: block;
}

#main .listbox .pagination {
  float: none;
}

.pagination .current {
  font-weight: bold;
}

.actions a:active,
dl.index dd a:active,
input[type="submit"]:active,
a.action:active,
.action a:active,
a.showme:active {
  text-decoration: none;
}

.expander_parent .actions {
  font-size: 0.8em;
}

#main ul.navigation,
ul.sorting,
#main ul.actions {
  float: right;
  text-align: right;
  width: auto;
  margin: 0.5em 0;
}

#main ul.navigation {
  float: none;
}

#main div.module.navigation {
  width: auto;
  float: none;
}

#main ul.navigation +#main ul.navigation {
  margin-left: 4px;
}

#main .blurb .navigation {
  margin: 0;
  margin-right: 0.9em;
  margin-bottom: 0.5em;
  float: none;
  clear: both;
}

#main .blurb .user .actions {
  margin: 0;
}

#main .blurb .actions a,
#main .blurb .actions input,
#main .blurb .actions .current {
  float: none;
  width: auto;
}

#header h1 a span,
#header h1 a sup,
ul#skiplinks,
.landmark,
.landmark a,
.index .heading.landmark {
  font-size: 0 !important;
  line-height: 0;
  height: 0;
  margin: 0;
  clear: both;
  color: transparent;
  opacity: 0;
}

.secondary {
  position: absolute;
  z-index: 9;
  margin: auto;
  padding: 0;
  overflow: visible;
  right: 0;
}

.secondary form p {
  padding: 0;
}

.actions .secondary li {
  min-width: 6em;
  display: block !important;
}

#dashboard .secondary li {
  min-width: auto;
}

#dashboard .secondary {
  padding: 0;
  position: absolute;
  margin: 0 5% 0 auto;
  border-radius: 0.2em;
  width: 85%;
}

#dashboard .secondary[style*="inline-block"] {
  display: block !important;
}

.heading .actions,
.heading .action,
.heading span.actions {
  height: auto;
}

.tagset ul.actions li + li,
.heading span.action + span.action {
  margin-left: 4px;
}

dl.stats + h6 + .actions {
  float: left;
  padding: 2px;
}

dl.stats + h6 + .actions,
li.news .actions {
  margin: auto;
}

.chapter {
  overflow: visible;
}

.dashboard .landmark {
  clear: right;
}

.actions .landmark {
  clear: none;
}

.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
  background: transparent;
  opacity: 1;
}

.draft {
  padding: 0.643em;
}

.css blockquote {
  max-height: 25em;
}

span.unread,
.replied,
span.claimed {
  margin: 0.2em 0;
  width: auto;
  height: 1.286em;
  line-height: 1.4;
  vertical-align: top;
  display: inline-block;
  padding: 0.3em 0.5em 0.4em;
  white-space: nowrap;
  overflow: visible;
  position: relative;
  text-decoration: none;
  border: 1px solid;
  font-size: 0.86em;
  background: transparent;
  font-weight: bold;
  border-radius: 0.2em;
}

.canonical,
li.requested {
  font-weight: 700;
}

.hidden,
body .hidden,
#user-fandoms .hidden {
  display: none;
}

span.requested,
span.requested.offered,
.replied {
  font-weight: normal;
}

.collapsed:after {
  content: " \2191";
}

.expanded:after {
  content: " \2193";
}

.commas li:after,
.tagset .tags li:after {
  content: ", ";
}

.tagset .tags li:last-child:after,
.tagset .tags li:only-child:after,
.commas li:last-child:after,
.commas li:only-child:after {
  content: none;
}

a.tag,
.tags a {
  font-size: 0.9em;
  text-decoration: none;
  padding: 0 0.02em 0 0;
  font-weight: normal;
  line-height: 1.4;
  text-transform: none;
}

.tags li {
  display: inline;
}

.freeform .tags li,
.filters .tags li,
.review .tags {
  display: block;
}

li.search fieldset.search.tags .actions input,
li.search fieldset.search.tags .question,
li.search fieldset.search.tags input.text,
li.search fieldset.search.tags select,
li.search fieldset.search.tags label {
  vertical-align: middle;
}

.tags-index li.search {
  display: block;
}

.tags-index form.search span.submit {
  float: none;
}

ul.cloud {
  margin: 2em auto;
  text-align: center;
  line-height: auto;
}

.cloud a {
  padding: 0.3em;
  vertical-align: middle;
  display: inline-block;
  border-bottom: 0;
}

a.cloud1 {
  font-size: 0.7em;
}

a.cloud2 {
  font-size: 1em;
}

a.cloud3 {
  font-size: 1em;
  font-weight: bold;
}

a.cloud4 {
  font-size: 1.2em;
}

a.cloud5 {
  font-size: 1.4em;
}

a.cloud6 {
  font-size: 1.6em;
}

a.cloud7 {
  font-size: 1.8em;
}

a.cloud8 {
  font-size: 2em;
}

#outer.wrapper,
#inner.wrapper {
  box-shadow: none;
}

h2.heading + .index,
h3.heading + .index,
h2 + .landmark + .navigation,
h3 + .landmark + .index,
h4 + dl,
h3 + dl,
.listbox .heading,
.index .heading {
  margin-bottom: 0;
  margin-top: 1em;
}

.user.listbox h3.heading {
  padding: 0.5em;
  border: 0;
}

.skins .parents .heading,
.skins .parents .index {
  margin: 0;
}

.module .heading,
fieldset .heading,
.userstuff h2:first-child,
.userstuff h3:first-child,
.userstuff h4:first-child,
.listbox .heading:first-of-type,
.index .heading:first-of-type,
.listbox .heading + .index {
  margin-top: 0;
  display: block;
}

.module,
.index,
.index .index {
  position: relative;
  width: auto;
}

.module,
.dashboard .index {
  width: 97%;
  float: left;
}

.language.index {
  width: 100%;
}

dl.index {
  margin: 0.643em 0;
  border: none;
}

dl.index dt {
  width: auto;
  float: left;
  font-weight: normal;
}

dl.index dd {
  margin: 0;
}

dl.index dd a {
  width: auto;
  float: none;
  clear: right;
  margin: 0 1em;
  padding: 0;
}

dl.index dd:after {
  content: " ";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

dl.index dd p,
dl.index dd .heading,
dl.index ul {
  display: inline-block;
}

dl.subscription.index {
  overflow-x: hidden;
}

a.rss span {
  background: url("/images/feed-icon-14x14.png") no-repeat;
  padding-left: 16px;
  vertical-align: text-top;
  background-position: 0 0.2em;
}

a.work {
  font-size: 1.25em;
  margin: 0.5em 0;
}

.warning,
.warnings,
.byline.heading,
a.user {
  font-weight: bold;
}

.kudos {
  padding: 0.5em 0.5em 0.5em 0.5px;
  margin: 2em 0;
  font-size: 0.8em;
  clear: both;
}

.icon img,
.primary img.icon {
  padding: 0;
  z-index: 1;
  border-radius: 50%;
  box-shadow: 0 1px 0 #eee;
  height: 100px;
  width: 100px;
  margin: 0;
  position: relative;
}

div.icon {
  height: 100px;
  width: 100px;
  display: inline-block;
  content: " ";
  margin: 0;
  top: 0;
  position: absolute;
  left: 0;
  border-radius: 50%;
}

.icon a {
  border: 0;
}

.mods li,
dl.stats dt,
dl.stats dd {
  background: none;
  width: auto;
  min-width: 0;
  display: inline;
  clear: none;
  float: none;
  margin: auto;
}

dl.stats {
  display: block;
  text-align: left;
}

dl.stats dd {
  white-space: nowrap;
  padding-left: 0.1em;
  padding-right: 0.4em;
}

.listbox,
dd fieldset,
.tagset .index .listbox {
  clear: right;
  padding: 1em;
  margin: 0.5em;
  border: 1px solid transparent;
  overflow: visible;
}

.tagset .index .listbox {
  margin: 1em 0;
}

.tag .merger,
.tags-show .home .listbox {
  padding: 0;
  margin: 0;
  width: auto;
}

.index .listbox .listbox .heading {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 0;
}

.home .listbox {
  clear: right;
  padding: 0;
  margin: 0.5em auto;
  overflow: auto;
}

fieldset fieldset.listbox,
dd fieldset,
.removeme fieldset {
  margin-left: 0;
  margin-right: 0;
}

.home .listbox + .listbox,
.module + .module,
.listbox + .module {
  margin-top: 2em;
}

#user-fandoms .index:first-of-type {
  margin-bottom: 0;
}

.module h3.heading,
.listbox h3.heading,
.listbox h3.heading a {
  vertical-align: middle;
  font-weight: normal;
}

.skins .parents .heading,
.listbox h3.heading,
.listbox h4.heading {
  font-size: 1rem;
  padding: 0.5em 1em;
}

.collection.home .listbox h3.heading,
.user .listbox h3.heading {
  border-bottom: 0;
  font-size: 1.3rem;
  padding: 1.5em 0px 0.5em 0;
}

.listbox li.blurb,
.listbox .landmark.heading,
.listbox .tags .listbox,
.listbox .lots ul li,
.listbox .all ul li {
  display: block;
}

.listbox .index,
.dashboard  .listbox .index,
.skins .parents .index {
  margin-bottom: 0.2em;
  width: auto;
  float: none;
  clear: right;
  padding: 0.5em 1em;
}

.collection.home .listbox .index,
.user .listbox .index {
  padding: 0;
  margin: 0;
}

fieldset .listbox .index {
  overflow: visible;
}

.listbox .index:after {
  content: " ";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.commas li.listbox:after {
  content: none;
}

.system .module,
.media .listbox {
  display: block;
  clear: none;
}

.listbox .heading .action a {
  padding: 0.1em 0.5em;
  line-height: normal;
}

.fandom .index li {
  display: block;
}

.alphabet .letter .tags,
.tags .listbox .tags.index,
.freeform ol.tags {
  -ie-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}

.fandom .medium {
  display: inline-block;
  float: none;
  vertical-align: top;
  min-width: 17em;
  width: 42%;
  min-height: 15em;
  overflow: hidden;
  padding: 0;
  margin: 1% 4% 1% 0;
}

.medium .index li {
  display: block;
  vertical-align: middle;
}

.media .medium p {
  margin: 0 1em 0.5em 1em;
}

.medium .actions a {
  clear: both;
  float: none;
}

.tagset .fandom {
  margin: 0;
}

.tagset .listbox,
.tag .listbox .listbox {
  margin: 1em;
}

.review .listbox {
  overflow: visible;
  position: static;
}

.listbox .all {
  height: auto;
}

.listbox .many ul {
  overflow: auto;
}

dl.meta {
  margin: 1em 0;
  clear: right;
  padding: 0.75em;
  position: relative;
  overflow: hidden;
}

.meta dt {
  text-align: left;
  min-width: 10.5em;
  width: 25%;
  float: left;
  clear: left;
}

.meta dd {
  width: 72.5%;
  float: left;
  margin: 0 0 0.643em;
}

.meta .stats dl dd,
.meta .stats dl dt {
  font-size: 0.95em;
  margin: 0 0.375em auto 0;
  width: auto;
  min-width: 0;
  clear: none;
  float: left;
}

.meta p {
  display: block;
  margin-top: 0;
  text-align: left;
}

.meta dd ul li {
  display: inline;
  margin: auto;
}

.meta dd blockquote {
  margin: 0;
}

dl.meta .mods,
dd .mods {
  padding: 0;
  margin: 0;
}

.dashboard .meta .clear {
  clear: right;
}

.post .meta dd ul li {
  display: block;
}

.post .meta dd ul li:after {
  content: none;
}

.blurb ul li,
.blurb dd ul li,
.blurb ul.type {
  display: inline;
}

li.blurb,
.blurb .blurb {
  display: block;
  position: relative;
  clear: left;
  padding: 0;
  padding-top: 0.7em;
  overflow: visible;
  margin-top: 0;
  margin-bottom: 1em;
}

li.pseud {
  padding-bottom: 0.4em;
}

.blurb .tags {
  font-size: 0.95em;
}

.blurb .user {
  font-size: 100%;
}

.blurb .viewed {
  font-size: 0.8rem;
}

.meta .userstuff p,
.blurb .userstuff p {
  line-height: normal !important;
  font-size: 0.95em !important;
}

li.blurb:after {
  content: " ";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.blurb .header {
  float: none;
  padding: 0;
  min-height: 45px;
  margin-bottom: 0;
  width: auto;
}

.blurb .header .heading {
  margin-right: 5em;
}

.blurb .user .tags {
  padding: 0 0.2em;
}

.blurb .header h5 {
  padding-top: 0;
  display: block;
}

.blurb .header h5 a {
  font-weight: bold;
  border-bottom: none;
}

.blurb .header h5,
.blurb .header .fandoms {
  margin-bottom: 0.25em;
  border: 0;
  font-size: 1.15em;
}

.blurb .header .required-tags,
.blurb .header p.status {
  display: block;
}

.blurb .header img {
  position: relative;
  margin: 0;
}

.blurb h4 a,
.blurb h4 {
  text-transform: none;
  font-weight: normal;
  border: 0;
}

.blurb .header h4.heading {
  line-height: 1.15;
  margin-bottom: 0.25em;
  border: none;
  padding: 0;
}

li.blurb h4 a:first-child {
  font-size: 1.2rem;
  font-weight: bold;
}

.blurb .header p.notice,
.blurb ul.series,
.blurb .type {
  font-style: oblique;
}

.blurb .notice,
.blurb .caution {
  font-size: 90%;
  margin-bottom: 0.4em;
  padding: 0.2em;
  display: block;
  width: auto;
  font-weight: normal;
  clear: both;
}

.blurb .type,
.blurb ul.series li {
  margin-top: 0;
  font-size: 0.9em;
}

.blurb ul.series a {
  border-bottom: none;
}

.blurb .heading {
  display: block;
}

.collection .heading span {
  word-wrap: break-word;
}

.item .blurb .header {
  display: none;
}

.picture .header .heading,
.blurb .picture .heading,
.collection .header .mods,
.pseud .pseud .header .heading,
.picture .header .mods,
.blurb .mystery h5,
.picture .header h5 {
  padding-left: 0;
  margin: 0 55px;
}

.blurb ul.required-tags li,
.blurb ul.required-tags li a {
  display: inline;
  margin: 0;
  font-size: 0.9em;
}

.blurb span.text {
  height: 0;
  width: 0;
  font-size: 0;
  color: transparent;
  border: 0;
}

.blurb .rating:before {
  left: 3px;
  height: 16px;
  padding: 2px 4px;
  font-weight: bold;
  line-height: 15px;
  text-align: center;
  color: white;
  border-radius: 2px;
  border: 1px solid transparent;
}

.blurb .rating-general-audience:before {
  content: "Gen Audiences";
  background: #0a4;
}

.blurb .rating-explicit:before {
  content: "Explicit";
  background: #f00;
}

.blurb .rating-mature::before {
  content: "Mature";
  background: #800;
}

.blurb .rating-notrated::before {
  content: "Not Rated";
  background: #DB7093;
}

.blurb .rating-teen::before {
  content: "Teen";
  background: darkSlateBlue;
}

.blurb .category-femslash:before,
.blurb .category-gen:before,
.blurb .category-slash:before,
.blurb .category-het:before,
.blurb .category-multi:before,
.blurb .category-other:before,
.blurb .category-none:before {
  padding: 2px 4px;
  height: 16px;
  margin-top: -8px;
  font-weight: bold;
  line-height: 15px;
  text-align: center;
  color: black;
  border: 1px dotted;
  border-radius: 2px;
}

.blurb .category-femslash:before {
  content: "F/F";
}

.blurb .category-gen:before {
  content: "Gen";
}

.blurb .category-slash:before {
  content: "M/M";
}

.blurb .category-het:before {
  content: "F/M";
}

.blurb .category-multi:before {
  content: "Multi";
}

.blurb .category-other:before {
  content: "Other";
}

.blurb .category-none:before {
  content: "None";
}

.blurb .iswip:before {
  padding: 2px 0.4em;
  height: 16px;
  margin-top: -8px;
  font-weight: bold;
  line-height: 15px;
  text-align: center;
  color: white;
  border: 1px solid transparent;
  border-radius: 2px;
}

.blurb .complete-no:before {
  content: "WIP";
  background: mediumVioletRed;
}

.blurb .complete-yes::before {
  content: "FIN";
  background: limegreen;
}

.blurb .warning-yes::before {
  content: "!!";
  position: relative;
  left: 0em;
  padding: 2px 0.5em;
  color: black;
  border: 1px solid transparent;
  line-height: 15px;
  text-align: center;
  background: gold;
  border-radius: 2px;
}

.blurb .warning-no::after {
  content: "No warnings";
  color: white;
  position: relative;
  padding: 2px 0.4em;
  height: 16px;
  margin-top: -8px;
  line-height: 15px;
  text-align: center;
  background: dodgerblue;
  border: 1px solid transparent;
  border-radius: 2px;
}

.blurb .warning-choosenotto:after {
  border: 1px solid transparent;
  content: "CNTW";
  position: relative;
  color: white;
  padding: 2px 0.4em;
  height: 16px;
  margin-top: -8px;
  font-weight: bold;
  line-height: normal;
  text-align: center;
  background: burlywood;
  border-radius: 2px;
}

.blurb .external-work::before {
  color: dimgray;
  border: 1px solid dimgray;
  padding: 1px 3px;
  content: "External work";
  border-radius: 2px;
}

.blurb .rec::before {
  border-radius: 0;
  padding: 3px 0.45em;
  padding-right: 2.75em;
  content: "Rec";
  color: white;
  display: block;
  position: absolute;
  right: 0;
  background: salmon;
}

.blurb .public::before {
  border-radius: 0;
  padding: 3px 0.45em;
  padding-right: 2.75em;
  content: "Bookmark";
  color: white;
  display: block;
  position: absolute;
  right: 0;
  background: cornflowerblue;
}

.blurb .private:before {
  border-radius: 0;
  padding: 3px 0.45em;
  padding-right: 2.75em;
  content: "Private";
  color: white;
  display: block;
  position: absolute;
  right: 0;
  background: #111;
}

.blurb .datetime {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-size: 0.8em;
}

.claim .datetime {
  position: static;
}

.blurb blockquote,
.blurb blockquote + p,
.blurb ul + p {
  margin-top: 0;
  clear: both;
  text-align: left;
}

.blurb.group .userstuff:last-child,
.blurb.group ul:last-child {
  margin-bottom: 0.9em;
}

.blurb dl.stats,
.prompt.blurb blockquote + p,
.prompt.blurb ul + p {
  margin-left: 0.9em;
  margin-right: 0.9em;
  margin-bottom: 0.9em;
}

.prompt h5:empty {
  font-size: 0;
  margin-top: 0.4rem;
}

.blurb dl.stats {
  font-size: 0.95em;
}

dl.stats dd {
  font-weight: bold;
}

.blurb .header,
.blurb .tags,
.blurb blockquote.userstuff,
.blurb .series,
.blurb .type,
.blurb .message,
.prompt h6.heading,
.prompt .userstuff + p,
.prompt ul + p,
#main .blurb ul.actions {
  margin-left: 0.9em;
  margin-right: 0.9em;
  margin-bottom: 0.4em;
  margin-top: 0;
}

.blurb .user .byline,
.blurb .user .userstuff {
  margin: 0;
}

.picture img.icon,
.index .picture img.icon {
  position: absolute;
  top: 0;
  height: 40px;
  width: 40px;
}

.pseud .icon,
.picture .icon {
  background: whiteSmoke;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}

.pseud .picture.blurb .icon,
.index .picture.blurb .icon {
  border-radius: 50%;
  box-shadow: 0 0 0 1px gainsboro;
}

.prompt .listbox {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

.bookmark .status {
  display: inline-block;
  margin: 0.5em 0;
  right: 0;
  position: absolute;
  z-index: 5;
  width: auto;
  top: 1.5em;
}

.bookmark.blurb dl.stats {
  margin-bottom: 0;
}

.bookmark .status .icon {
  left: -50px;
  top: 0;
}

.bookmark .status span {
  border: none;
  display: block;
  margin: 0;
  font-size: 0.8em;
  width: auto;
}

.bookmark .status .public,
.bookmark .status .rec,
.bookmark .status .private {
  position: relative;
  right: 0;
  background: none;
  font-weight: normal;
}

.status .count a {
  color: white;
  text-align: center;
  position: relative;
}

.bookmark .short .status {
  overflow: visible;
  position: absolute;
  top: -0.4em;
  right: -0.4em;
  margin: 0;
}

.bookmark .user .header {
  margin: 0;
  margin-bottom: 0.2em;
  min-height: auto;
}

.bookmark .user .header .heading,
.bookmark .user .header.module:last-child,
.bookmark .user .userstuff:last-child,
.bookmark .user .meta:last-child,
.bookmark .user ul:last-child {
  margin-bottom: 0;
}

.bookmark .user .heading {
  font-weight: normal;
}

.bookmark .user .meta {
  margin: 0;
}

.user .meta.heading {
  clear: left;
  display: inline-block;
  margin-right: 0;
}

.bookmark .status .count {
  text-align: center;
  width: 1.35em;
  padding: 3px;
  padding-right: 1em;
  right: 0;
  top: 0;
  position: absolute;
}

.bookmark .user,
.reading .user,
.prompt .claims {
  padding: 0.4em;
  width: auto;
  clear: right;
  margin-top: 0.5em;
  overflow: auto;
  float: none;
}

.bookmark .user.module,
.reading .user.module,
.prompt .claims {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bookmark .user .heading,
.bookmark .user .userstuff,
.bookmark .user .meta,
.reading .user,
.prompt .claims {
  font-size: 90%;
}

.bookmark .short {
  overflow: hidden;
}

#main .recent .index {
  float: none;
  width: auto;
}

.bookmark .recent .short {
  margin: 0.5em;
  overflow: visible;
}

.bookmark .short {
  margin-bottom: 0.5em;
}

.bookmark .recent.dynamic {
  position: relative;
  padding: 0.4em 0;
  max-width: none;
}

.bookmark .recent a.action:first-of-type {
  margin-left: 0.9em;
}

.short .module .heading,
.short blockquote.userstuff {
  margin: 0;
}

.bookmark .user .meta {
  font-size: 90%;
  display: inline;
}

.user.module .datetime {
  margin: 0.4em;
}

.short .header {
  min-height: 0;
}

.short .status .text {
  background: none;
}

.short .status .public,
.short .status .rec,
.short .status .private {
  position: absolute;
  top: 0;
  right: 0;
}

.short .status .public::before,
.short .status .rec::before,
.short .status .private::before {
  padding: 0.4em;
  background: transparent;
  border-right: 4px solid transparent;
}

.short .status .public::before {
  content: "B";
  color: cornflowerblue;
  border-color: cornflowerblue;
}

.short .status .rec::before {
  content: "R";
  color: salmon;
  border-color: salmon;
}

.short .datetime {
  margin-right: 2em;
}

.mods {
  margin: 0 65px 2px 65px;
}

#workskin .preface {
  border: none;
  overflow: visible;
  margin: 1em 0;
  float: none;
}

.preface .module {
  overflow: visible;
  clear: both;
  float: none;
  margin: 1.5em 2em;
  padding: 0;
  width: auto;
}

.preface .module .heading,
.preface .series li {
  padding: 0.4em 0;
  font-style: normal;
}

.chapter .chapter {
  margin-top: 1em;
}

#workskin .preface .title {
  font-size: 2.2em;
  text-align: center;
  padding: 0;
  margin-top: 1em;
  display: block;
  text-transform: none;
}

#workskin .chapter.preface .title {
  text-align: center;
  display: block;
  width: auto;
  padding: 0;
  margin: 3em 0 0;
  font-weight: normal;
  font-size: 1.5em;
}

#workskin .preface .byline {
  text-align: center;
  margin: 0.5em 0 2em 0;
  padding: 0;
  float: none;
  font-size: 1.1em;
}

#workskin .byline a.author {
  font-style: normal;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#feedback {
  margin: auto;
}

#add_comment {
  margin: 1em 0;
}

#add_comment fieldset {
  margin: 1em 0;
}

#feedback ol.pagination {
  clear: both;
  float: none;
}

li.comment {
  position: relative;
  overflow: visible;
  padding: 0.5em;
  padding-bottom: 0;
  margin: 0.5em;
}

.inbox-show .comment {
  margin: 1em 0;
}

.comment:after {
  content: " ";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.comment div.icon {
  left: 0;
  top: 0;
  position: absolute;
  margin: 0.5em;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  box-shadow: 0 0 0 1px gainsboro;
}

.comment .icon img {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  box-shadow: none;
}

.comment h4.byline {
  font-weight: bold;
  text-transform: none;
  border: none;
  padding: 0;
  margin: 0 auto auto 66px;
}

.comment h4.byline a {
  font-weight: bold;
}

.comment .userstuff {
  clear: none;
  margin: 0.5em 1em 0.5em 66px;
}

.comment .userstuff p {
  font-size: 1em !important;
}

li .thread .comment:not(.group) {
  margin-left: 82px;
  margin-right: 1em;
  padding: 0.5em 1.5em !important;
}

.comment ul {
  margin-left: 50px;
  background: none;
}

.thread .thread {
  margin-left: 2em;
}

li .thread .comment {
  border: 0;
}

.comment fieldset .heading {
  margin: 0;
  float: left;
  font-weight: normal;
}

fieldset.comments,
.comment blockquote.userstuff {
  background: transparent;
  border: none;
}

fieldset.comments {
  padding: 0;
}

.comments .comment.index {
  width: auto;
  float: none;
}

.thread fieldset .actions {
  margin-top: -1.8em;
  float: left;
}

.comment .datetime {
  z-index: 1;
  position: relative;
  display: block;
  margin: 0.4em 0;
  font-weight: normal;
}

.comment .edited {
  margin-left: 66px;
  margin-top: 0;
}

#feedback .comment .actions {
  float: none;
  margin: 0;
  font-size: 0.9em;
}

.splash .jump,
.splash .tweets.module {
  display: none;
}

.splash h3.heading {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.splash .heading .link {
  float: right;
  font-size: 1rem;
}

.splash .news .meta,
.splash .post .heading {
  text-transform: none;
  margin-bottom: 0.2em;
}

.splash .news .meta,
.splash .post .userstuff {
  margin: 0;
}

.splash .comments {
  display: inline-block;
}

.splash .comments::before {
  content: "\2022";
  margin: 0 0.5em;
}

.splash .post {
  margin-bottom: 1em;
}

.splash .module {
  float: none;
}

.splash .favorite {
  float: left;
  width: 250px;
}

.splash .latest.news.module {
  margin-left: 280px;
  margin-top: 0;
  clear: right;
  width: auto;
}

.splash .news.index {
  float: left;
  margin-top: 0;
}

.splash .random.readings {
  clear: both;
  width: auto;
}

.session #logo,
.session #signin {
  display: block;
  float: left;
  margin-bottom: 1.5em;
  width: 48%;
}

.admin_sessions-new form {
  margin: auto;
}

.session dt {
  min-width: 0;
}

.docs {
  margin: auto 3.5em;
}

.docs .userstuff ul,
.docs .userstuff ol {
  margin: 0.643em auto;
  padding: 0;
}

.docs .userstuff li {
  padding: 0;
}

.docs .userstuff .toc li {
  list-style-type: circle;
}

.docs .userstuff .toc {
  margin: 3.215em auto;
}

.home p,
.home .header {
  clear: right;
}

.home .header h2 {
  margin-left: 120px;
  margin-bottom: 0.5em;
  text-align: left;
  display: block;
}

.home .header .userstuff,
.home .header dl.stats,
.header .type {
  margin-left: 120px;
}

#main .primary .actions {
  float: none;
  text-align: left;
  margin-left: 120px;
}

.admin h3 + p {
  margin-top: 0.2em;
}

.admin .header h3 {
  font-weight: bold;
}

.home .primary {
  margin: 1em 0 2em 0;
  min-height: 100px;
  float: none;
}

.primary p.icon {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  margin: auto;
}

.home div.icon {
  border-radius: 50%;
  border: none;
}

.dashboard.collections-index .index {
  width: 99%;
}

#inbox-form {
  float: left;
  width: 75%;
}

.readings-index h3 {
  margin: 0.4em 0 -0.25em 0;
  padding: 0.25em;
  font-size: 0.8em;
  float: left;
  border: none;
  font-weight: normal;
}

#main .history .heading + .actions {
  margin-top: -1.5em;
  margin-bottom: 1.5em;
}

.works-index .index,
.collections-index .index {
  width: 75%;
  float: left;
}

.works-index ol.pagination,
.index + h4.landmark {
  float: left;
}

.search p,
li.search form p {
  position: relative;
}

.search span.tip {
  padding: 0.4em 0.75em;
  position: absolute;
  left: -999em;
  width: auto;
  z-index: 99999999;
  text-align: left;
  line-height: 1.3;
  font-size: 0.86em;
}

#header .search p:hover .tip,
#header .search p:focus .tip {
  left: 0;
  top: 40px;
  position: absolute;
}

#main .search:hover .tip,
#main .search:focus .tip {
  display: block;
  left: 0px;
  top: 1.8em;
  position: absolute;
}

#header li.search fieldset {
  box-shadow: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

.search .tags dd.submit {
  margin: -3em 0.643em 0;
}

.search select {
  vertical-align: middle;
}

#work_search_language_id {
  padding: 0;
}

form.filters {
  margin: 1em auto;
  width: 22.5%;
  float: left;
}

.filters fieldset {
  margin-top: 0;
  margin-left: 1em;
}

.filters .tags {
  display: block;
}

.filters .added {
  padding: 0 0 0 0.4em;
  border: 0;
}

.filters li.input {
  width: 99%;
}

.filters input.text {
  padding: 0.2em 0 0.2em 0.2em;
  margin: 0;
}

form.filters dl {
  border: none;
  margin: 0;
  padding: 0;
}

.filters dt {
  width: auto;
  border: none;
}

.filters dt label {
  font-weight: bold;
}

.filters dd {
  width: 100%;
  margin: 0.25em 0;
}

ul.tree {
  display: block;
}

.tag_wranglers-index #tag_wranglers {
  width: 75%;
  float: left;
}

dl.nomination {
  border: 0;
  margin: 0;
  padding: 0;
}

.nomination dt,
.nomination dd {
  float: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  width: auto;
}

.nomination dt {
  width: 50%;
}

.nomination dd.autocomplete ul,
.nomination dd.autocomplete li {
  margin-bottom: -0.375em;
}

dd.autocomplete li.input {
  margin: 0px;
  padding: 0px;
  border: 0;
}

.filters li.highlighted,
.filters .selected {
  background: transparent;
  border: 0;
}

.userstuff {
  font-size: 1em;
  clear: right;
  margin: 1em auto;
  padding: 0;
  line-height: 1.3;
  word-wrap: break-word;
}

.userstuff img {
  max-width: 100% !important;
  height: auto !important;
}

.userstuff dl {
  overflow: auto;
  border: 0;
}

.userstuff dl dl {
  width: auto;
  margin: auto;
}

.userstuff dt {
  display: block;
  font-weight: bold;
}

.userstuff dd {
  display: block;
  margin-top: 0em;
}

.userstuff dd p {
  margin: 0;
  padding: 0;
}

.userstuff ul {
  margin: 1.125em auto;
  padding: 0 1em;
}

.userstuff li,
.userstuff ol ul li {
  font-weight: normal;
  display: list-item;
  list-style-type: disc;
  margin: 0.25em 0 0.25em 1.25em;
}

.userstuff ol {
  margin: 0.75em auto;
  padding: 0 1.5em;
}

.userstuff ol li {
  list-style-type: decimal;
  margin: 0.75em 0 0.75em 1.75em;
}

.userstuff ol li ol li {
  list-style-type: lower-alpha;
}

.userstuff ol li ol li ol li {
  list-style-type: lower-roman;
}

.heading {
  line-height: 1.1;
}

.heading + h3.heading,
.heading + h4,
.preface .series li {
  font-weight: normal;
  margin-top: 0.3em;
  font-style: normal;
}

.userstuff h1 {
  text-align: center;
}

.userstuff h2 {
  margin: 2em 0 0.5em 0;
  display: inline-block;
  text-align: left;
}

.userstuff h3 {
  font-size: 1.3em;
  padding: 0.3em 0;
  margin: 1em 0 0.5em 0;
  text-align: left;
  font-weight: normal;
  text-transform: none;
}

.userstuff h4 {
  margin-top: 1em;
}

.userstuff h5 {
  font-weight: bolder;
}

.userstuff h6 {
  font-weight: bolder;
}

.userstuff h3 a,
.userstuff h3 a:link,
.userstuff h3 a:visited {
  font-weight: 400;
  border-bottom: none;
  text-decoration: none;
}

.userstuff caption {
  height: auto;
  font-size: 1em;
}

.userstuff table,
.userstuff td,
.userstuff col,
.userstuff tr,
.userstuff thead,
.userstuff tfoot,
.userstuff tbody,
.userstuff th,
.userstuff thead td,
.userstuff th a,
.userstuff th a:link {
  font-size: 95%;
}

.userstuff blockquote {
  margin: auto auto auto 1.5em;
  padding: 0 0.75em;
  border-left: 0.25em solid rgba(0,0,0,0.12);
}

.userstuff blockquote blockquote {
  padding: 0.25em;
  border: 0;
}

.userstuff hr {
  width: 50%;
  margin: 0.875em auto 1.2525em auto;
  border: 1px solid;
}

#workskin {
  margin: auto;
  max-width: 55em;
}

#workskin .userstuff[role="article"],
#workskin div[role="article"] .userstuff {
  font-size: 1.3em;
  float: none;
  line-height: 1.5;
  margin: auto auto 1em auto;
}

#workskin .preface .module .userstuff p {
  font-size: 0.95rem !important;
}

#workskin .chapter .preface .userstuff {
  line-height: 1.3;
  margin: auto;
  font-size: 1rem;
}

#workskin [role="article"] p {
  margin: 1em 0;
}

#workskin .module .userstuff,
#workskin .module li,
#workskin .preface .end .userstuff,
#workskin img {
  max-width: 100%;
}

.important {
  font-weight: 900;
}

.footnote {
  font-size: 0.8em;
  float: right;
}

.datetime {
  text-transform: uppercase;
}

.blurb .datetime,
.comment .datetime,
.claim .datetime {
  font-size: 0.8em;
}

#notice-banner {
  margin: 0;
  border-radius: 0 !important;
}

#notice-banner img {
  max-width: 100%;
  height: auto;
}

#notice-banner form {
  display: block;
  overflow: auto;
}

#admin-banner .submit,
#notice-banner .submit {
  float: right;
}

.flash,
div.error {
  margin: 0.643em auto;
}

.flash.notice {
  margin: 0 0 2em 0;
}

.notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error,
li .thread .comment:not(.group) {
  background: inherit;
  padding: 1em;
  display: block;
  clear: right;
  font-size: 0.95em;
}

.user .notice,
.externalwork .notice {
  padding: 0.3em;
  text-align: left;
  font-size: 0.8em;
}

.notes {
  clear: right;
}

ul.notes,
.error ul {
  position: static;
  margin: auto 0.643em;
  padding: 0.25em 2.5em;
}

ul.notes li,
.error ul li {
  list-style-type: disc;
}

span.error {
  display: inline-block;
}

span.symbol {
  border: 1px solid;
  vertical-align: text-top;
  border-radius: 0;
}

span.delete a,
span.symbol span {
  padding: 0 0.425em !important;
}

.symbols a,
.symbol a {
  text-decoration: none;
  border: none;
}

span.question {
  border: 0;
  font-size: 0.9em;
  vertical-align: text-top;
}

#main a.question,
#main a.question:hover {
  text-decoration: none;
  font-weight: bold;
  background: none;
  border: 0;
}

.heading a.question {
  font-size: 0.75em;
}

#user-fandoms .index {
  margin-top: 0.5em;
  padding: 0.6em;
}

#user-fandoms .index,
#fandom_full_list .index {
  column-count: 2;
  -ie-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -o-column-count: 2;
}

#user-fandoms li,
#fandom_full_list li {
  padding: 0.25em;
  margin: 0;
  display: block;
}

dl#symbols-key dt {
  width: 100px;
}

dl#symbols-key dd {
  margin: -55px auto auto 100px;
}

#symbols-key dl {
  border: 1px solid #ddd;
  margin-bottom: 1.286em;
  padding: 0.15em;
}

#symbols-key dl dt img,
#bookmark-symbols-key dt img,
#symbols-key dl dt,
#bookmark-symbols-key dt {
  height: 25px;
  width: 25px;
}

#symbols-key dl dd,
#bookmark-symbols-key dd {
  margin: -25px auto 20px 35px;
}

dl.subscription dt {
  text-align: left;
  min-width: 10.5em;
  width: auto;
  float: none;
  clear: left;
  padding: 0.5em;
}

dl.subscription dd {
  width: auto;
  padding: 0.5em;
  float: none;
  padding-top: 0;
}

dl.subscription dd:last-child {
  border-bottom: none;
}

.subscription input {
  max-width: 100%;
}

.tree .tree {
  padding: 0;
}

.tags.tree li {
  display: block;
}

.tree ul {
  margin-left: 2em;
}

li.empty.blurb {
  background: lightyellow;
  padding: 0.8em;
}

.empty .caution {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.announcement .thermometer-content {
  height: auto;
  margin: auto;
  width: 60%;
}

.announcement .thermometer {
  position: relative;
}

.announcement .thermometer .track {
  background: #fff;
  border: 1px solid #aaa;
  height: auto;
  margin: 0 auto;
  position: relative;
  background-image: linear-gradient(to bottom,#fff 0%,#f3f3f3 50%,#ededed 51%,#fff 100%);
}

.announcement .thermometer .goal {
  position: absolute;
  right: 0;
}

.announcement .thermometer .goal .amount {
  left: 0;
  padding: 0.5em;
  top: 0;
}

.announcement .thermometer .amount {
  font-weight: 700;
  position: absolute;
}

.announcement .thermometer .progress {
  bottom: 0;
  left: 0;
  height: 100%;
  position: relative;
  padding: 0.5em;
}

.announcement .thermometer .progress .amount {
  padding: 0.5em;
  position: relative;
}

body,
input,
textarea,
select,
.blurb .header h5 a,
#workskin .preface .userstuff,
#workskin .preface .module .userstuff,
#workskin .byline .author {
  font-family: segoe ui,helvetica neue,arial,sans-serif;
}

a.tag,
.tags a {
  font-family: verdana,sans-serif;
}

#header a,
.dropdown a,
.secondary a,
#footer a,
.datetime,
.notice,
.tip,
ul.notes,
.caution,
.error,
.comment_error,
.autocomplete,
.dropdown.tip {
  font-family: avenir,segoe ui,helvetica neue,arial,sans-serif;
}

kbd,
tt,
code,
var,
pre,
textarea,
textarea.large {
  font-family: menlo,consolas,monospace;
}

#workskin .preface h2.title,
#workskin .byline::before {
  font-family: hoefler text,georgia,serif;
  font-style: italic;
}

#workskin .chapter .title {
  font-style: normal;
}

#workskin [role="article"] .userstuff,
#workskin .userstuff[role="article"] {
  font-family: georgia,serif;
}

body,
#footer {
  border: none;
  background: #222;
}

#outer,
#main {
  background: #f6f8f6;
}

#inner {
  background: #3B413E;
}

#header,
#modal .footer {
  margin: 0;
  background: white;
  color: #375;
}

#header,
dl.subscription dd,
.listbox h3.heading,
.listbox h4.heading,
.skins .parents .heading {
  border-bottom: 1px solid gainsboro;
}

#modal .footer {
  border-top: 1px solid gainsboro;
}

body {
  color: #183526;
}

#footer {
  color: darkseagreen;
}

#dashboard a,
#footer a {
  color: #BDC7BE;
}

#header a,
#greeting a,
#header .submit input,
#header h1 a::before {
  color: black;
}

.heading,
h1,
h1,
h3,
h4,
li.blurb h4 a:first-child,
.module h3.heading,
.listbox h3.heading,
.listbox h3.heading a {
  color: black;
}

a,
a:link,
li.added,
.filters .added,
.blurb .header h5 a {
  color: #0E865B;
  text-shadow: none;
}

.cloud .tag,
.blurb h5.fandoms .tag,
.blurb h5.fandoms .tag:hover {
  border-bottom: none;
}

#footer .heading {
  color: white;
}

a:visited {
  color: darkslategray;
}

a:hover,
a:active,
li.blurb h4 a:hover,
a.tag:hover,
.tags a:hover,
.blurb .header h5 a:hover {
  color: darkslategray;
}

div[role="main"] a:hover,
div[role="main"] a:active {
  text-decoration: underline;
}

div[role="main"] .cloud .tag:hover,
.blurb h5.heading .tag:hover {
  border-bottom: none;
  text-decoration: underline;
}

.splash .news .meta,
.datetime {
  color: #7A8C82;
}

a.tag,
.tags a {
  color: dimgray;
  border-bottom: 1px dotted;
}

div[role="main"] a.tag:hover,
div[role="main"] .tags a:hover,
div[role="main"] a.tag:active,
div[role="main"] .tags a:active {
  text-decoration: none;
  border-bottom: 1px solid;
}

li.relationships a {
  color: black;
}

.heading + h3.heading,
.heading + h4,
.preface .series li {
  background: transparent;
}

#header .search input[type="text"] {
  color: #111;
  background: white;
  border: 1px solid lightgray;
  box-shadow: none;
}

.actions a:not(.question),
a[role="button"],
a.action,
.action a,
.delete a,
.showme a,
a.showme,
#main .actions input[type="submit"],
input[type="submit"],
input.button,
.button,
.submit input,
.current {
  background: white;
  color: #737373;
  border: 1px solid silver;
}

#main .secondary a,
#main .secondary input,
#chapter_index  .actions input[type="submit"] {
  background: transparent;
  border-radius: 0;
}

#chapter_index input {
  width: 100%;
}

.actions .gap,
.actions .disabled {
  color: gray;
}

#main .actions a:not(.question):hover,
#main .actions a:not(.question):focus,
dl.index dd a:hover,
#main .actions input[type="submit"]:hover,
#main .actions input[type="submit"]:focus,
input[type="submit"]:hover,
a.action:hover,
a.action:focus,
.action a:hover,
.action a:focus,
.listbox .heading .action a:hover,
.footer .action:hover,
span.delete a:hover,
span.delete a:focus {
  color: seagreen;
  background-color: #e3ebe9;
  border-color: darkseagreen;
  text-decoration: none;
}

#main .actions a:not(.question):active,
dl.index dd a:active,
#main .actions input[type="submit"]:active,
input[type="submit"]:active,
#main a.action:active,
#main .action a:active,
#main a.showme:active {
  box-shadow: inset 0 12px 0 rgba(209, 228, 214, 1);
}

a.showme:hover,
a.showme:focus,
span.question:hover,
span.question:focus,
span.symbol:hover,
span.symbol:focus {
  background: #112;
  text-decoration: none;
}

#dashboard a:hover,
#dashboard a:focus {
  background: seagreen;
  color: white;
  text-shadow: none;
  border-radius: 0;
  outline: none;
}

span.question:active,
span.symbol:active,
span.delete a:active {
  background: silver;
  color: #333;
  text-shadow: none;
}

#main .secondary .current,
#dashboard .secondary .current,
#dashboard .current {
  background: #242D29;
  color: whitesmoke;
  border-color: seagreen;
}

.current {
  background: transparent;
  border: 1px solid #C5C5C5;
  color: gray;
}

span.symbol,
span.question {
  border-radius: 50%;
  color: white;
  font-size: 1rem;
  background: lightsalmon;
}

#header .collections {
  font-weight: bold;
  background-color: white;
  border-top: 1px solid gainsboro;
  color: black !important;
  letter-spacing: 1px;
}

fieldset,
form fieldset fieldset fieldset,
fieldset fieldset fieldset.listbox,
.prompt .listbox,
.tag .listbox,
.tagset .listbox,
li.selected,
.dynamic form fieldset fieldset,
.toggled form fieldset fieldset,
.ui-sortable li:hover,
.filters fieldset,
.inbox-show li.comment,
.css blockquote,
.fandom .medium,
.fandom .letter,
.skins .parents.module,
dl.subscription.index {
  background: white;
  box-shadow: none;
  border: 1px solid gainsboro;
  border-radius: 0.2em;
}

.blurb .user,
.bookmark .short,
.reading .short,
.bookmark .recent .short {
  background: #E9ECE4;
  box-shadow: none;
  border: none;
  border-radius: 0.2em;
}

li.blurb,
.blurb .blurb,
.prompt .work,
#user-fandoms .index {
  background: white;
  border: 1px solid gainsboro;
  box-shadow: none;
  border-radius: 0.2em;
}

textarea,
select,
input[type="text"],
input.text,
#tag_search {
  background: white;
  border: 1px solid silver;
  border-radius: 0.2em;
}

.verbose legend {
  border-radius: 0.2em;
  background: white;
  border: 1px solid silver !important;
}

.dynamic form fieldset,
.toggled form fieldset,
.secondary,
#modal,
.ui-tooltip-content {
  background: #fff;
  border: 1px solid silver;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 0.2em;
}

#modal {
  overflow: hidden;
}

.search span.tip,
.secondary,
.dropdown ul,
.dropdown .notice {
  z-index: 4;
  color: white;
  text-shadow: none;
  border: none;
  box-shadow: none;
  border-radius: 0.2em;
  background: rgba(20,20,20,0.95);
}

.autocomplete ul li,
#header .menu a,
#header .navigation .menu span,
#main .secondary a,
#chapter_index .actions input[type="submit"],
#dashboard .secondary a,
#dashboard .secondary span {
  text-transform: none;
  padding: 0.5em 0.7em;
  padding-right: 0.9em;
  text-align: left;
  display: block !important;
  margin: 0;
  color: white;
  font-weight: normal;
  border-radius: 0;
  height: auto;
  border: none;
}

#header .open .dropdown-toggle,
#header .dropdown-toggle:hover,
#header .dropdown-toggle:active,
#header .dropdown-toggle:focus,
#header a[href*=logout]:hover,
#header a[href*=logout]:focus {
  z-index: 1;
  background: #f5f7f7;
}

#header .menu a,
#header .menu span {
  color: dimgray;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

#header .dropdown .menu {
  background: white;
}

#header .dropdown .dropdown-menu {
  border: 1px solid silver;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  padding-top: 3px;
  padding-bottom: 3px;
  z-index: 10;
}

#header .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 15px;
  z-index: 10;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid silver;
}

#header .dropdown-menu::after {
  content: "";
  position: absolute;
  top: -9px;
  border: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid white;
  z-index: 20;
  left: 15px;
}

#header .menu a:focus,
#header .menu a:hover {
  text-shadow: none;
  text-decoration: none;
  outline: none;
  background: mediumseagreen;
  color: white;
}

#header h1 a:hover,
#greeting .icon a:hover,
#header h1 a:focus,
#greeting .icon a:focus {
  background: transparent;
}

#main .navigation .secondary:before,
#dashboard .navigation .secondary:before {
  display: block;
  border-bottom: 10px solid rgba(20,20,20,0.95);
  content: "";
  width: 0px;
  border-left: 9px solid transparent;
  position: absolute;
  border-right: 9px solid transparent;
  margin-top: -10px;
  right: 20px;
}

#dashboard .navigation .secondary:before {
  left: 20px;
  right: auto;
}

.secondary {
  margin-top: 0.5em;
}

#dashboard .secondary a.close,
#main .secondary a.close {
  text-align: right;
}

#dashboard .secondary a:hover,
#main .autocomplete li.odd:hover,
#main .autocomplete li.even:hover,
#main .secondary a:hover,
#main .actions .secondary a:hover,
#main .actions .secondary a:not(.question):hover,
#main .actions .secondary a:not(.question):focus,
#chapter_index .actions input[type="submit"]:hover,
#dashboard .actions .secondary a:hover {
  background: seagreen;
  color: white;
  border-radius: 0;
  text-shadow: none;
}

.dropdown {
  border-radius: 0.2em;
}

#outer #inner .secondary li:first-of-type,
#outer #inner .secondary li:first-of-type a,
#outer #inner .secondary li:first-of-type .current,
#outer #inner .dropdown li:first-of-type a {
  border-radius: 0.2em 0.2em 0 0;
}

#outer #inner .dropdown li:last-of-type,
#outer #inner .dropdown li:last-of-type a,
#outer #inner .secondary li:last-of-type a,
#outer #inner .secondary li:last-of-type .current {
  border-radius: 0 0 0.2em 0.2em;
}

#header .navigation .menu .current {
  background: whitesmoke;
  color: #112;
  display: block;
}

.dropdown .notice {
  font-size: 0.9em;
  padding: 0.6em;
}

#skin_chooser {
  background: transparent;
  border: none;
}

#footer a:hover,
#footer .secondary a:hover {
  color: white;
  background: transparent;
}

.tag .child .listbox,
.listbox .tags .listbox,
.tag .merger,
.tagset .fandom .index .listbox,
form fieldset fieldset.listbox,
form fieldset fieldset {
  background: #FAFaFa;
  border: 1px solid gainsboro;
  border-radius: 0.2em;
}

.splash h3.heading,
form dt {
  border-bottom: 1px solid lightgray;
}

dl.meta {
  border-top: 3px solid gainsboro;
  border-bottom: 1px solid gainsboro;
}

.preface .module h3.heading {
  border-bottom: 1px solid gainsboro;
  font-weight: bold;
  font-size: 1em;
}

.fandom .letter {
  padding: 0;
}

div.icon {
  box-shadow: 0 0 0 1px #ddd;
}

.primary div.icon:empty {
  box-shadow: none;
}

.admin .primary .icon,
.tag .primary div.icon {
  background: #ddd;
}

.filters input.text:focus,
input[type="text"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border: 1px solid black !important;
}

.notice,
.comment_notice,
ul.notes,
.notice.required {
  border-radius: 0px;
  background-color: #D1F6DC;
  color: seagreen;
  border-left: 4px solid mediumseagreen;
}

#admin-banner,
#notice-banner {
  display: block;
  clear: both;
  overflow: auto;
  padding: 1em;
  margin: 0;
  background: lemonchiffon;
  border-left: 4px solid palegoldenrod;
}

.deleted,
.caution {
  color: #AF752B;
  background: #FFF59D;
}

span.unread,
span.claimed,
.LV_invalid,
span.requested,
.required {
  color: tomato;
  background: transparent;
}

.LV_valid,
span.offered,
.replied,
.draggable,
.droppable {
  color: dodgerblue;
}

.error,
.comment_error {
  color: darkred;
  background: lightsalmon;
}

.draft,
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
  outline: 1px solid salmon;
}

.blurb .fold {
  padding: 0 0.7rem 0.7rem;
  margin: 0;
}

Mobile CSS:

#outer {
  min-width: 100%;
  font-size: 15px;
}

#inner {
  margin-top: 0;
}

#main {
  margin: 0;
  padding: 1em 0.4em 2em;
  width: auto;
  font-size: 15px;
}

#footer {
  padding: 1em;
  font-size: 15px;
}

#footer .module {
  display: block;
  margin: 1em 0;
  float: none;
}

#modal {
  width: 90%;
}

#modal .content {
  padding: 0.75em;
}

h1.heading,
h2.heading,
h3.heading,
#header,
#dashboard,
#footer,
#header .button {
  font-family: avenir,segoe ui,helvetica,arial,sans-serif;
}

h2 {
  font-size: 1.55em;
}

h3,
.userstuff h3 {
  line-height: 1;
  font-size: 1em;
}

h4,
.userstuff h4 {
  line-height: 1;
  font-size: 1em;
}

.userstuff h3 {
  font-weight: bold;
  margin: 1em 0 0.5em 0;
  text-align: left;
}

#header h1 .landmark {
  font-size: 0px;
  color: transparent;
}

#header {
  font-size: 14px;
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
}

#header h1 {
  display: none;
  position: relative;
  width: 100%;
  text-align: center;
  line-height: 1;
}

#header h1 a {
  line-height: normal;
  width: auto;
  text-align: center;
  height: auto;
}

#header h1 a::before {
  z-index: 2;
  content: "";
}

#header ul.primary {
  border-top: 1px solid gainsboro;
  height: auto;
  line-height: normal;
  margin: 0;
  padding: 0;
  float: none;
  clear: both;
  display: block;
}

#header .primary li:not(.search) {
  margin-bottom: 0;
}

.primary label[for="site_search"] {
  padding: 0;
}

#header .primary input.button {
  height: auto;
  display: inline-block;
  margin: 0;
}

#header li,
#header form,
#header input,
#header #search .submit {
  height: auto;
  display: inline-block;
  float: none;
}

#header .dropdown:hover .menu,
#header ul.menu::before,
#header ul.menu::after,
#header ul.menu:hover:before,
#header ul.menu:hover:after {
  display: none;
}

#header .open .dropdown-toggle::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 15px;
  z-index: 30;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid silver;
}

#header .open .dropdown-toggle::after {
  content: "";
  position: absolute;
  bottom: -1px;
  border: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid white;
  z-index: 40;
  left: 15px;
}

#header .open .dropdown-toggle {
  z-index: 15;
  position: relative;
  overflow: visible;
}

#header .navigation li {
  float: none;
}

#header a,
#header .open a,
#header .open a:active,
#header .dropdown .menu,
#header .open a:focus {
  outline: none;
}

#header .navigation a,
#header .navigation input.button,
#header .navigation .current,
#greeting .navigation a,
#header a.dropdown-toggle:hover {
  margin: 0.4em 0.2em;
}

#header .menu a {
  margin: 0;
  font-size: 14px;
}

#header li.dropdown.open:hover .menu {
  display: block;
}

#header .dropdown ul {
  left: 0;
  right: 0;
  padding-top: 10px;
}

#header .primary li.search {
  left: 0;
  position: relative;
  width: auto;
  display: block;
  border-top: 1px solid gainsboro;
  vertical-align: baseline;
  margin-left: 0;
}

#header fieldset p {
  height: 40px;
  display: table-cell;
  vertical-align: middle;
}

#header #site_search {
  padding: 0.2em 0.3em;
  height: auto;
  width: 170px;
  box-shadow: none;
  margin-top: 0;
  background: white;
}

#outer #header .navigation a,
#outer #header .navigation input.button,
#outer #header .navigation .current,
#outer #greeting .navigation a {
  font-size: 14px;
}

#header .search p:hover .tip {
  top: 2.6em;
  left: 0.4em;
}

#header .collections {
  max-height: 4em;
  background-size: cover;
  font-size: 1.25em;
  padding: 0.2em;
  border-bottom: none;
  line-height: 1.5;
  overflow: hidden;
}

#header #greeting {
  float: none;
  width: auto;
  display: block;
  margin: 0;
  height: auto;
  position: relative;
}

#greeting p.icon {
  display: inline-block;
  left: 0;
  border-radius: 0;
  margin: 0;
  top: 0;
  z-index: 99;
  position: absolute;
}

#greeting img.icon {
  right: 0;
  position: relative;
  margin: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
}

#greeting .actions {
  text-align: left;
  right: auto;
  padding: 0;
  padding-left: 3em;
  display: block;
}

#greeting a {
  font-weight: normal;
  text-transform: none;
  box-shadow: none;
  margin: 0;
  text-shadow: none;
}

#greeting .user a:focus,
#greeting .navigation a:hover,
#greeting .user .dropdown:hover a {
  outline: none;
}

#greeting .user li:last-child {
  float: right;
}

#greeting .menu li:last-child {
  float: none;
}

#greeting .user .dropdown:first-child .dropdown-toggle {
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: visible;
}

#notice-banner img {
  max-width: 100%;
  height: auto;
}

.Css Code {
  border: 1px solid silver;
  max-height: 20em;
  overflow-y: auto;
}

#main .userstuff,
.heading {
  word-wrap: break-word;
}

.userstuff ul {
  padding: 0;
}

.module {
  width: 100%;
}

.icon,
.icon img {
  height: 40px;
  width: 40px;
}

.splash .news.module,
.splash .random.module,
.splash .favorite.module {
  float: none;
  width: auto;
  margin-top: 2em;
}

.splash .latest.news.module {
  margin-left: 0;
  margin-top: 2em;
}

.splash .module .heading {
  padding-left: 0;
  padding-right: 0;
}

.splash .news.index {
  float: none;
  margin-top: 0;
}

.home .primary {
  margin-bottom: 0;
}

#user-fandoms li {
  display: block;
}

#user-fandoms .index {
  column-count: 1;
  -ie-column-count: 1;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  -o-column-count: 1;
}

#fandom_full_list,
#user-fandoms .index {
  margin-top: 0;
  padding: 0;
}

#user-fandoms .index {
  padding: 0.4em;
  padding-top: 0.3em;
}

.skins .parents .index,
.listbox .index {
  overflow: visible;
  padding: 0.5rem;
}

.dashboard .listbox .index {
  padding: 0;
}

#main.inbox-show,
.works-index .index,
.collections-index .index {
  width: auto;
}

.home .listbox + .listbox,
.module + .module,
.listbox + .module {
  margin-top: 1em;
}

dl.subscription dt {
  margin: auto;
  width: auto;
  float: none;
  border: none;
}

dl.subscription dd {
  width: auto;
  padding: 0.5em;
  padding-top: 0;
  margin: 0;
}

#main.dashboard {
  float: none;
  min-height: 10em;
}

#dashboard {
  width: auto;
  float: none;
  margin: 0;
  display: block;
  background: transparent;
  font-size: 1em;
  padding-bottom: 0;
}

#dashboard li {
  padding: 0;
  margin: 0.2em 0;
  display: inline-block;
}

#main.dashboard .index,
.dashboard form.filters,
#main .filters,
.works-index .index,
.collections-index index,
#inner form dd,
#inner form dt,
#main.filtered .index {
  display: block;
  width: auto;
  float: none;
}

.filters fieldset {
  margin-left: 0;
}

.navigation .narrow-shown {
  display: inline-block;
}

#main.dashboard,
#inbox-form {
  margin: 0;
  float: none;
  width: auto;
  max-width: 100%;
  clear: both;
}

#main .navigation,
ul.sorting {
  position: relative;
}

#dashboard ul.navigation {
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
  padding-bottom: 0;
}

#dashboard .navigation,
#dashboard .navigation li,
#dashboard .navigation li a,
#dashboard .navigation .current {
  text-align: left;
  display: inline-block;
  border-radius: 0.2em;
  border-left: 0;
}

#dashboard.admin .actions li,
#dashboard.admin .actions a,
#dashboard .secondary li,
#dashboard .secondary a,
#dashboard.admin .current {
  display: block;
}

#dashboard .secondary {
  position: absolute;
}

#dashboard .secondary[style*="inline-block"] {
  display: inline-block !important;
}

#dashboard a,
#dashboard span {
  padding: 0.3em 0.5em;
  margin: 0;
  margin-bottom: 0;
}

#dashboard a:hover {
  border-radius: 0.2em;
}

.module h3.heading,
.listbox h3.heading,
.listbox h3.heading a {
  vertical-align: baseline;
  display: inline-block;
}

.skins .parents .heading,
.module h3.heading,
.listbox h3.heading,
.listbox h4.heading {
  font-weight: normal;
  position: relative;
  padding: 0.5rem;
}

.skins .parents .heading {
  display: block;
}

.home .primary,
.dashboard .home .primary {
  text-align: center;
  padding-top: 120px;
  min-height: auto;
}

#main.error h2,
#main.slow h2,
#main.maintenance h2 {
  padding-top: 120px;
}

.home .primary .userstuff {
  font-size: 90%;
}

.home .primary .type {
  font-size: 90%;
  font-weight: bold;
}

#main.error p {
  margin-right: 0;
}

#main ol.pagination {
  float: none;
}

#main .primary .actions {
  float: none;
  text-align: center;
  margin: 0.5em;
}

#main .skins .primary .actions {
  text-align: right;
}

.home .primary p.icon,
.home .primary div.icon {
  border: none;
  background: transparent;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  margin: auto;
  text-align: center;
}

#main.error,
#main.slow,
#main.maintenance {
  background: url('/images/ao3_logos/sadface.png');
  background-size: auto 100px;
  background-position: center top;
  background-repeat: no-repeat;
}

.collection .primary .icon {
  box-shadow: none;
}

.home .primary .icon img {
  height: 100px;
  width: 100px;
}

#workskin .userstuff img,
.admin .userstuff img {
  max-width: 100%;
  height: auto;
}

form dt,
dl.subscription dt {
  border-bottom: 0;
}

fieldset input,
fieldset textarea {
  max-width: 95%;
}

Fieldset {
  padding: 0.5em;
  margin: 0.5em 0;
}

fieldset dl {
  padding: 0;
  margin: 0;
}

.filters .submit input,
.filters .input.text {
  width: 90%;
}

.filters .added {
  display: block;
  clear: both;
}

li.blurb,
.blurb .blurb,
.bookmarks.listbox,
.comments .index .group,
#user-fandoms .index {
  clear: both;
  margin: 0.5em 0;
  min-height: auto;
  overflow: visible;
  box-shadow: none;
  padding-top: 0.5em;
}

li.blurb h4 a:first-child {
  font-weight: bold;
  font-size: 1.1em;
}

.blurb .header h5,
.blurb .header .fandoms {
  margin-bottom: 0.4em;
  border: 0px none;
  font-size: 1.05em;
}

.pseud .pseud {
  padding-bottom: 0.4em;
}

.pseud.picture .header {
  padding-top: 0;
  margin-bottom: 0;
  min-height: 45px;
}

.pseud.picture blockquote.userstuff {
  margin-left: auto;
  margin-right: auto;
}

.collection .heading span {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 15em;
}

.blurb .header .required-tags,
.blurb .header p.status {
  display: inline-block;
}

.blurb .rating-general-audience:before {
  content: "G";
}

.blurb .rating-explicit:before {
  content: "E";
}

.blurb .rating-mature:before {
  content: "M";
}

.blurb .rating-notrated::before {
  content: "NR";
}

.blurb .rating-teen::before {
  content: "T";
}

.blurb .datetime {
  display: inline-block;
  font-style: italic;
  position: absolute;
  bottom: 0.1em;
  top: auto;
  float: right;
  margin: 0.25em;
}

#main .blurb .stats {
  margin-bottom: 0.6em;
}

.skins .header .heading,
.picture .header .heading,
.picture .header .mods,
.blurb.picture .heading,
.index .picture .heading {
  margin: 0 0 0 50px;
}

.home .primary .heading {
  text-transform: none;
  margin: 0;
  margin-bottom: 0.5em;
}

.picture img.icon,
.index .picture img.icon {
  margin: 0;
  position: absolute;
  top: 0;
  height: 40px;
  width: 40px;
}

.home .header h2 {
  text-align: center;
  display: block;
  font-weight: normal;
  margin: 0;
}

.home .header .userstuff,
.home .header dl.stats,
.header .type {
  margin-left: 0px;
}

.blurb .header h4.heading,
.blurb .header .heading {
  margin-right: 0;
}

.bookmark .header h4.heading {
  margin-right: 2em;
}

.index .blurb h5.heading {
  margin-right: 0;
}

.user.module .datetime {
  position: absolute;
  left: auto;
  right: 0;
  top: 0;
}

.bookmark .status {
  margin: 0;
  text-align: right;
  top: 0;
  right: 0;
  line-height: 1;
  padding: 0;
}

.bookmark .status .count {
  color: white;
  padding: 0.25em 0px;
  position: relative;
  text-align: left;
}

.bookmark .status .public,
.bookmark .status .rec,
.bookmark .status .private {
  left: auto;
  width: auto;
  display: inline-block;
  position: absolute;
}

.blurb:not(.short) .public::before,
.blurb:not(.short) .rec::before,
.blurb .private::before {
  font-size: 1em;
  padding: 0.25em 0.5em 0.3em 2em;
  font-weight: normal;
  right: 0;
  border-top-right-radius: 0.2em;
}

.blurb:not(.short) .public::before {
  content: "B";
}

.blurb:not(.short) .rec::before {
  content: "R";
}

.blurb .private::before {
  content: "P";
}

.status .count a {
  color: white;
  text-align: center;
  position: absolute;
  right: 1.3em;
  width: 1.5em;
}

.bookmark .status .text {
  display: none;
}

.bookmarks-index .user,
.reading .user,
.bookmark .user {
  margin: 0;
  overflow: hidden;
  float: none;
  border: none;
}

.bookmark .short {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  box-shadow: none;
}

.bookmark .short .status {
  width: 1.2em;
  position: absolute;
  left: auto;
  border: none;
}

.short .header {
  min-height: auto;
  height: auto;
  padding-top: 0;
}

.short .datetime {
  position: absolute;
  right: 1.6em;
  padding: 0;
  margin: 0;
  top: 0;
  bottom: auto;
}

.short .status .public::before,
.short .status .rec::before {
  padding: 0.4em;
  border: none;
  width: 0.7em;
}

.blurb dt.tags dt,
blurb dl.tags dd,
dl.meta dt,
dl.meta dd,
.media .listbox {
  margin: 0.5em 0;
  width: auto;
  float: none;
}

.blurb dl.tags dd,
dl.meta dd {
  margin-left: 1em;
}

.meta dt.stats {
  width: 100%;
  float: left;
  padding: 0;
}

.blurb .header,
.blurb .tags,
.blurb blockquote.userstuff,
.blurb .series,
.blurb .type,
.blurb .message,
.prompt h6.heading,
.prompt .userstuff + p,
.prompt ul + p,
#main .blurb ul.actions,
.blurb dl.stats,
.prompt.blurb blockquote + p,
.prompt.blurb ul + p {
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.4em;
  margin-top: 0;
}

.blurb dl.stats,
.prompt.blurb blockquote + p,
.prompt.blurb ul + p {
  margin-bottom: 0.9em;
}

#main .blurb .stats {
  font-size: 0.9em;
  text-align: left;
  display: inline-block;
  margin-bottom: 0.6em;
}

.blurb a.tag,
.bookmark a.tag {
  font-size: 90%;
}

a.tag,
.tags a {
  margin-bottom: 0;
  line-height: 1;
}

.blurb .fandoms a.tag {
  font-weight: bold;
}

.fandom .medium {
  margin: 1em auto;
  height: auto;
  min-height: auto;
  display: block;
}

.fandom .letter {
  padding: 0;
  font-size: 0.9em;
  margin: 0.5em 0;
}

.tags-show .tag .listbox,
.media .medium {
  font-size: 90%;
}

.medium .index li {
  max-width: none;
  white-space: normal;
}

.tree ul {
  margin-left: 1em;
}

li .tags.tree {
  padding: 0;
}

.tagset .listbox,
.tag .listbox .listbox {
  margin: 0.5rem;
}

.alphabet .letter .top {
  position: absolute;
  right: 0.3em;
  top: 0.1em;
}

.alphabet .listbox li {
  padding: 0.3em 0;
  margin: 0;
  display: block;
}

.alphabet .letter .tags {
  -ie-column-count: 1;
  -o-column-count: 1;
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
}

#main .actions a,
.actions input,
.actions .next,
.actions .previous,
.actions .gap,
.current {
  vertical-align: middle;
}

#main .actions li {
  position: static;
}

#main .secondary a {
  margin: 0;
}

#main .blurb .navigation {
  margin-right: 0.4em;
  margin-bottom: 0.2em;
}

.comment .actions a {
  font-size: 0.8em;
  padding: 0.2em 0.5em;
  height: auto;
}

#feedback .comment .actions {
  margin-left: 0;
}

.actions a:not(.question),
a[role="button"],
.action a,
.delete,
.showme a,
#main .actions input[type="submit"],
input[type="submit"],
input.button,
.button,
.actions .current,
.actions .disabled,
.submit input {
  text-transform: capitalize;
}

.medium .actions {
  float: none;
}

fieldset .submit {
  display: block;
  float: none;
}

dl.meta {
  font-size: 0.9em;
}

.preface .module {
  margin: 1em 0;
  width: auto;
  padding: 0 1em;
  font-size: 0.9em;
}

.preface .title {
  padding-bottom: 0;
}

.preface .byline {
  font-size: 1.1em;
  margin: 0;
}

.preface .module .heading {
  margin: 0.3em 0;
  padding: 0.3em 0;
  display: block;
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: bold;
}

.landmark#work {
  display: none;
}

#workskin .preface {
  text-align: left;
  margin: 0;
  margin-top: 1em;
}

.chapter .title {
  text-transform: none;
  font-weight: bold;
}

.chapter .secondary {
  right: 0.5em;
  max-width: 90%;
}

#workskin {
  margin: auto;
}

#workskin .userstuff[role="article"],
#workskin div[role="article"] .userstuff {
  width: auto;
  margin: auto 0.35em;
  font-size: 1.05em;
  line-height: 1.4;
  font-family: helvetica neue,sans-serif;
}

#workskin .preface .module .userstuff p {
  font-size: 0.9rem !important;
}

.comment .datetime {
  right: auto;
  left: 0;
  top: auto;
  margin: 0.25em 0px;
  bottom: 0;
}

fieldset.comments,
.comment blockquote.userstuff {
  padding: 0;
}

.comment ul {
  margin-top: 0em;
}

.comment .userstuff {
  margin: 0.5em 0 0.25em 0px;
}

li .thread .comment:not(.group) {
  padding: 0.1em 1em !important;
  margin-left: 0;
}

.timezone,
span.time,
abbr.day {
  display: none;
}

li.comment {
  padding: 0px;
  margin: 1em 0;
}

.thread .thread {
  margin-left: 1em;
}

.comment div.icon,
li .thread .comment div.icon {
  right: auto;
  height: 30px;
  width: 30px;
  left: 0;
  margin: 0;
}

.comment .icon img {
  border: 0;
  width: 30px;
  height: 30px;
  float: left;
}

.comment h4.byline {
  font-size: 1em;
  position: relative;
  word-wrap: break-word;
  display: table-cell;
  padding-left: 40px;
  height: auto;
  vertical-align: middle;
}

.inbox-show .comment h4.byline {
  margin-left: 45px;
  margin-top: 0.25em;
}

.inbox-show .comment .icon {
  margin: 0.25em;
}

Flat | Top-Level Comments Only

From:

milkfatzero

sure, I assume you've already created a new skin with the "Parent" css portion?
This is what you do after that.

1. Create a new skin for the mobile version - I called it Flat Squares (mobile).

2. Paste in mobile CSS.

3. Under the "Advanced" box, select
a. "replace archive skin entirely" and
b. under "Media", check the box for "only screen and (max-width: 480px)"

4. Under the "Parents" box, click "Add parent skin". Type in whatever you called the regular view skin.

5. Submit

And then use the new mobile skin.

Hope that works for you!

cyborganize

Thanks so much for the help!

I think I've successfully created the mobile skin as a child of Flat Squares ("only screen and (max-width: 480px)" threw me -- I wish there were better documentation of this system). What I can't figure out now is how to activate BOTH the parent and child skins. If I click "use" for the mobile skin it turns off the Flat Squares skin, and vice versa.

Hm, the child skin by definition loads up the parent skin too. If it's set up correctly you should see the regular sized skin on a large screen even when the mobile skin is activated.

Try resizing the width of your browser window and see if it shifts into mobile view? If it does you're set.

I checked and unchecked a bunch of things, and I'm not quite sure what fixed it, but it seems to be working now! When I added a parent the site made a blank box for a second parent - maybe I had to delete that before it would work properly?

Thanks so much!

AO3 Skins

Flat Squares skin

Flat Squares skin

no subject

no subject

no subject

no subject

Profile

December 2024

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags