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

I really like the look of this! It does do some odd things in Opera, especially lists of things, but the appearance of the story pages is really nice. I took the mobile one as well - thank you!

Oh no, I hope it doesn't bother you too much. I'm afraid I don't use Opera enough to spot all the bugs.

Great skin! I'm having fun customizing it and making it my own. Thanks for making it easy to do so. Would you object if I turned it into a stylish skin (with proper credit of course)? This is only so I wouldn't lose the code.

No objection! Please feel free :)

Cool! Thanks a lot!

That's more than a little brilliant! I may have to abscond with it and see if I can make a reverse contrast for my use.

oh pretty. i may have to cheat on my current skin with this.

Oh, this is lovely. It's perfect for my mobile viewing. May have to do some futzing so I can get my colors and fonts and tweaks all in there, but it is a delightfully clean, readable skin. Very, very nice! Thank you for sharing it.

I love this!

BLESS YOU! right now there is not a single public skin on AO3 that I can stand looking at. but yours is gorgeous!

not to abuse your genius, but can you tell me how to set up a mobile skin -- like so the site displays normally on my computer but defaults to the mobile skin on my phone? I can't easily find any information about this.

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!

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!

this is beautiful!

This is absolutely beautiful, and so readable! Thank you so much for the wonderful work. The dashboard is a model of functionality, and everything is a model of style.

I would like to make the body font a little smaller if possible, and I can't figure out quite what to change after inspecting the elements of the live skin. What should I search for to tweak?

Thank you again!

Happy you like it! :)

There's no body font size set in the base skin. I think the easiest thing would be to add something like

#main { font-size: 14px; }

which would size down everything except for the header, footer and the dashboard sidebar. Or add a font size to body if you want to scale those down too.

That explains why I couldn't figure out what number to adjust. :) That worked perfectly, thank you!

Really, this is such a huge usability improvement over the base style (not to mention the visual improvements). Thanks again.

Thanks a LOT for this skin! I've been having issues with the regular AO3 skin forever and this fixed it right up. ^^

I really love this skin and want to use it but I found a few issues with it. The category and warning icons replaced with colour-coded text are viewing weirdly. I can send you some screenshots if you'd like. When I click on my dashboard, it highlights the dashboard link on the left side and the box is slightly covering my user icon.

I also wanted to change the main font size in the body (where you read the stories) and I read the "#main { font-size: 14px; }" comment but it didn't work for me. Can you tell me where to put the code and what it should say? Sorry, I'm new to CSS.

Hey, ya, can you screenshot the problems? Btw what browser do you use?

To change the font size for the story, do it under here:

#workskin .userstuff[role="article"], 
#workskin div[role="article"] .userstuff {
    font-size: 1.3em;
    ...
}

I use Chrome. I use a Mac if that matters. I'm not sure how to upload screenshots here so I'll give you a link to them.

http://postimg.org/image/s7tdcfey9/

http://postimg.org/image/45cjhjyb5/

Hmmm looks like the default skin is still being loaded.

When you're in the Edit Skin page, check if the the "replace archive skin entirely" option is selected? Like this:

http://postimg.org/image/fqpabpugd/

That's the problem! I had it set to 'add on to archive skin'. Wow, that was kind of stupid of me. It works fine now! Yay! I have one last question. If I want the margins on the story to be larger (like there's more blank space on the sides of the story) where/what would I edit?

Thanks for all your help!

Change the max-width or margin values (e.g. margin: 0 30px).

Glad to be of help!

I gotta say, I really love this skin. It's a first I've seen for ao3 genuinely like in its entirety. Thank you for sharing it.

Flat Squares skin

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

There's a few issues

Re: There's a few issues

Re: There's a few issues

Re: There's a few issues

Re: There's a few issues

Re: There's a few issues

no subject