ao3_skins | Flat Squares skin (Reply)

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 Squares skin

Post a comment in response: