diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6d6571d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+this is basically ao3 but it's in html form and extremely tedious to maintain. have fun! i am not affiliated with the otw
+ it doesn't function to make new works obviously, rather it has a template for each work, which you will then link to from the tags and/or profile page. 
diff --git a/ao3templateworks.css b/ao3templateworks.css
new file mode 100644
index 0000000..3799588
--- /dev/null
+++ b/ao3templateworks.css
@@ -0,0 +1,4032 @@
+  /*==CORE:basic functional layout
+http://otwcode.github.com/docs/front_end_coding/css-shorthand*/
+
+body, .toggled form, .dynamic form, .secondary, .dropdown {
+  background:#fff;
+  color: #000;
+  font: 100%/1.125 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.heading {
+  font-family: Georgia, serif;
+}
+
+a, a:link {
+  color: #8B7446;
+  text-decoration: none;
+}
+
+#header, #footer, #main, #dashboard {
+  padding: 1em 3em;
+}
+
+.landmark {
+  font-size: 0;
+  opacity: 0;
+}
+
+.hidden {
+  display: none;
+}
+
+li.blurb, fieldset, form dl {
+  border: 1px solid#ff7ab8;
+  padding: 1em;
+  overflow: hidden;
+}
+
+.blurb li, .actions>*, .stats>*, .meta ul li {
+  list-style: none;
+  display: inline;
+  padding-left: 0.25em;
+}
+
+.actions form {
+  display: inline;
+}
+
+.actions input[type="submit"] {
+  margin: 0;
+}
+
+/*END== */
+/*==ELEMENTS/*
+/*MEYERS RESET.***********************************************do not edit */
+
+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, 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;
+}
+
+/************************************************end of uneditable rules */
+
+/* The global rules for normal elements */
+
+body {
+  font: 100%/1.125 'Lucida Grande', 'Lucida Sans Unicode', 'Arial', Verdana, Helvetica, sans-serif;
+}
+
+a, a:link, a:visited:hover {
+  color: #111;
+  text-decoration: none;
+  border-bottom: 1px solid;
+  cursor: pointer;
+}
+
+a:visited {
+  color: #666;
+  text-decoration: none;
+  border-bottom: 1px dashed;
+}
+
+a:hover {
+  color: #999;
+}
+
+a:active, a:focus, button:focus {
+  outline: 1px dotted;
+}
+
+a img {
+  border: 0;
+}
+
+a:focus img {
+  outline: 1px dotted;
+}
+
+h1, h2, h3, h4, h5, h6, .heading {
+  font-family: Georgia, serif;
+  font-weight: 400;
+}
+
+h1 {
+  font-size: 2.5em;
+  line-height: 1;
+  margin: 0.5em 0;
+}
+
+h2 {
+  font-size: 2.143em;
+  line-height: 1;
+  margin: 0.429em 0;
+  display: inline;
+}
+
+/*24px skipped: font-size: 1.714em; line-height: 1; margin: 0.429em 0*/
+
+h3 {
+  font-size: 1.286em;
+  line-height: 1;
+  margin: 0.5375em 0;
+}
+
+h4 {
+  font-size: 1.143em;
+  line-height: 1.125;
+  margin: 0.5em 0;
+}
+
+h5 {
+  font-size: 1em;
+  line-height: 1.286;
+  margin: 0.643em 0;
+}
+
+h6 {
+  font-size: 0.875em;
+  font-weight: 900;
+  line-height: 1.5;
+  margin: 1.5em 0;
+}
+
+p, li, dd, hr {
+  margin: 0.643em 0;
+}
+
+hr {
+  border: 0;
+  border-bottom: 3px double;
+}
+
+.clear {
+  clear: both;
+  height: 0;
+  border: 0;
+  margin: 0;
+  background: transparent;
+  opacity: 0;
+}
+
+blockquote, pre {
+  font: 1em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif;
+  margin: 0.643em;
+}
+
+blockquote p:first-child {
+  margin-top: 0;
+}
+
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+kbd, tt, code, var, pre, samp {
+  font: normal 0.857em 'Monaco', 'Consolas', Courier, monospace;
+  margin: auto;
+}
+
+pre {
+  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 {
+  cursor: help;
+}
+
+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;
+}
+
+/*http://otwcode.github.com/docs/front_end_coding/accessible-tables*/
+
+table {
+  background:#ff7ab8;
+  border-collapse: collapse;
+  margin: auto;
+  width: 100%;
+  clear: right;
+}
+
+caption {
+  height: 0;
+  width: 0;
+  font-size: 0;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+}
+
+thead, tfoot {
+  border-bottom: 2px solid #bbb;
+  padding: 0.643em;
+  vertical-align: top;
+}
+
+tfoot td {
+  border-top: 1px solid #bbb;
+}
+
+td th {
+  padding-right: 1em;
+}
+
+tbody tr {
+  border-bottom: 1px solid #ebfff5;
+}
+
+td {
+  padding: 0.25em;
+  vertical-align: top;
+}
+
+th {
+  text-align: start;
+}
+
+thead td {
+  background:#ff7ab8;
+  border-bottom: 1px solid #ebfff5;
+}
+
+th, tr:hover, col.name {
+  background: #ebfff5;
+  border: 1px solid #bbb;
+  padding: 0.15em 0.5em 0.25em;
+  vertical-align: top;
+}
+
+th a, th a:visited, th a:link {
+  text-decoration: none;
+}
+
+tbody tr th {
+  text-align: start;
+}
+
+/*END== */
+/*==REGION: HEADER is #1 of the 4 regions shown on every page
+http://otwcode.github.com/docs/front_end_coding/patterns/supertypes
+notice that CSS3 declarations sit are indented twice (four spaces) and always come last*/
+
+#header input, #header #search>*, #header #search .submit {
+  display: inline;
+  float: none;
+}
+
+#header .landmark {
+  clear: none;
+  font-size: 0;
+  border: none;
+}
+
+/* check login and greeting; was a quick fix to remove bg */
+#header a, #header .current, #header fieldset, #header form, #header p, #header li, #header h1, #small_login dl {
+  background: transparent;
+  font-size: 100%;
+  border: none;
+  padding: 0;
+  margin: 0;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+#header {
+  font-size: 0.875em;
+  margin: 0 0 1em;
+  padding: 0;
+  position: relative;
+}
+
+#header li {
+  display: block;
+  float: left;
+  position: relative;
+}
+
+#header a, #header a:visited, #header .current, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus {
+  color: #000;
+}
+
+#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a {
+  background: #ffabd9;
+}
+
+#header .current {
+  background: #ccc;
+}
+
+/*BRANDING: logo and title */
+
+#header .heading {
+  float: left;
+  padding: 0.375em;
+}
+
+/* 1.714em x 14px = 24px */
+#header .heading a {
+  color: #A00D04;
+  font-size: 1.714em;
+  line-height: 1.75em;
+}
+
+/* 0.583em x 24px = 14px */
+#header .heading sup {
+  font-size: 0.583em;
+  font-style: italic;
+}
+
+#header .logo {
+  float: left;
+  height: 42px;
+}
+
+/*ACTION: dropdown*/
+
+#header .menu, #small_login, #header .dropdown:hover .current + .menu {
+  background: #ffabd9;
+  display: none;
+  padding: 0.25em 0;
+  position: absolute;
+  width: 20em;
+  z-index: 55;
+    box-shadow: 1px 1px 3px -1px #444;
+    background-image: -moz-linear-gradient(top, rgba(221, 221, 221, 0.98) 0%, rgba(204, 204, 204, 0.98) 100%);
+    background-image: -webkit-linear-gradient(top, rgba(221, 221, 221, 0.98) 0%, rgba(204, 204, 204, 0.98) 100%);
+    background-image: -o-linear-gradient(top, rgba(221, 221, 221, 0.98) 0%, rgba(204, 204, 204, 0.98) 100%);
+    background-image: linear-gradient(to bottom, rgba(221, 221, 221, 0.98) 0%, rgba(204, 204, 204, 0.98) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fadddddd', endColorstr='#facccccc',GradientType=0);
+}
+
+#header .open .menu, #header .dropdown:hover .menu, .open + #small_login, #header .menu li {
+  display: block;
+  float: none;
+}
+
+#header .menu li {
+  border-bottom: 1px solid #888;
+  margin: 0 0.25em;
+  text-align: left;
+}
+
+#header .menu li:last-child {
+  border-bottom: none;
+}
+
+#header .dropdown .menu a, #header .dropdown .menu .current {
+  background: transparent;
+  display: block;
+  padding: 0.75em 0.5em 0.5em;
+}
+
+#header .dropdown .menu a:hover, #header .dropdown .menu a:focus {
+  background: #ffabd9;
+}
+
+#header .menu .current {
+  color: #111;
+  font-weight: 800;
+}
+
+/* login and greeting */
+
+#login, #greeting {
+  float: right;
+  margin-right: 0.375em;
+}
+
+#header .user {
+  padding: 0.429em 0 0;
+  position: relative;
+  z-index: 20;
+}
+
+#header .user a, #header .user .current, #small_login .action {
+  padding: 0.25em 0.75em;
+}
+
+#header .user a:hover, #header .user a:focus, #header .user .current {
+  color: #ff7ab8;
+    border-radius: 0.25em;
+}
+
+#login .open a:hover, #login .open a:focus {
+  background: #eee;
+}
+
+#greeting .user > li {
+  margin: 0 0.125em;
+}
+
+#greeting .menu {
+  right: 0;
+    box-shadow: -1px 1px 3px -1px #444;
+}
+
+/* square off bottom corners when the dropdown is visible */
+#greeting .open a, #greeting .dropdown:hover a {
+    border-radius: 0.25em 0.25em 0 0;
+}
+
+#greeting .dropdown .menu a {
+    border-radius: 0;
+}
+
+#greeting p.icon {
+  float: right;
+  height: auto;
+  padding: 0.429em 0.125em 0;
+  line-height: 1;
+  width: auto;
+}
+
+#greeting p.icon a {
+  display: block;
+  padding: 0;
+}
+
+#greeting img.icon {
+  height: 1.786em;
+  width: 1.786em;
+    background-size: 100%;
+}
+
+/*FORM: login */
+
+#small_login {
+  border: 2px solid #ebfff5;
+  padding: 0.375em;
+  right: 0;
+  z-index: 10;
+    box-shadow: none;
+}
+
+#small_login form {
+  margin-top: 1.286em;
+}
+
+#small_login dt, #small_login dd {
+  margin: 0;
+  width: 99%;
+}
+
+#small_login dt, #small_login .submit {
+  border-bottom: none;
+  padding: 0.375em 0 0;
+}
+
+#small_login .actions {
+  float: none;
+  text-align: left;
+}
+
+#small_login .footnote {
+  float: left;
+  font-size: 0.857em;
+  padding: 0.375em 0;
+}
+
+#small_login .footnote li {
+  padding: 0 0.25em;
+}
+
+.dropdown #small_login .footnote a {
+  background: transparent;
+  border-bottom: 1px solid;
+}
+
+/* primary navigation */
+
+#header .primary {
+  background: #A00D04 ;
+  padding: 0 0;
+  width: 100%;
+    box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.35),
+    1px 1px 3px -1px rgba(0, 0, 0, 0.25),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.85); /* instead of a bottom border to keep the container the same height as its contents */
+}
+
+#header .primary > li:first-of-type {
+  margin-left: 2em;
+}
+
+#header .primary a {
+  padding: 0.429em 0.75em;
+}
+
+#header .primary a {
+  color: #ebfff5;
+}
+
+#header .primary .menu a, #header .primary .menu .current {
+  color: #111;
+  padding: 0.75em 0.5em 0.5em;
+}
+
+/* search */
+
+#header .search {
+  float: right;
+  color: #2a2a2a;
+  margin-right: 0.25em;
+}
+
+#header #search input:focus {
+  color: #2a2a2a;
+  outline: 1px dotted;
+}
+
+#header #search .text, #header #search .button {
+  border: none;
+}
+
+/* 0.2857em x 14px = 4px because the input has a padding of 0.15em x 14px = 2px and it needs to match 0.429em x 14px = 6px */
+#header #search .text {
+  margin: 0.2857em 0.429em;
+}
+
+#header #search .button {
+  margin: 0;
+}
+
+/*CONTEXT: collections*/
+
+#header h2 {
+  border-top: 1px solid;
+  clear: both;
+  color: #ebfff5;
+  display: block;
+  font-size: 1.714em;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0 0.375em;
+    text-shadow: none;
+}
+
+/*END== */
+/*==REGION: DASHBOARD is #2 of the 4 regions shown on every page
+http://otwcode.github.com/docs/front_end_coding/patterns/supertypes
+*/
+
+#dashboard {
+  width: 11.25em;
+  float: left;
+  padding: 0.5em;
+}
+
+#dashboard li {
+  padding: 0;
+}
+
+#dashboard a, #dashboard span {
+  color: #111;
+  display: block;
+  white-space: normal;
+  height: auto;
+  line-height: 2;
+  padding: 0 0.5625em;
+  margin: 0;
+  border: none;
+  background: transparent;
+  vertical-align: middle;
+    word-wrap: break-word;
+    box-shadow: none;
+}
+
+#dashboard a:hover {
+  background:#ff7ab8;
+  color: #ff7ab8;
+}
+
+#dashboard ul {
+  float: none;
+  display: block;
+  padding: 1.286em 0;
+  text-align: right;
+  border-top: 2px solid#ff7ab8;
+  position: relative;
+}
+
+#dashboard .current {
+  background: #ccc;
+}
+
+#dashboard .secondary {
+  right: auto;
+}
+
+#dashboard.own {
+  background: transparent;
+  border-top: 15px solid #ff7ab8;
+  border-bottom: 15px solid #ff7ab8;
+    opacity: 1.0;
+    border-radius: 0.25em;
+}
+
+/*END== */
+/*==REGION: MAIN is #3 of the 4 regions shown on every page
+http://otwcode.github.com/docs/front_end_coding/patterns/supertypes
+*/
+
+#main {
+  font-size: 0.875em;
+  line-height: 1.286;
+  margin: auto;
+  padding: 0.5em 2.5em 3.5em;
+  position: relative;
+  min-height: 450px;
+}
+
+#main:after {
+  content: " ";
+  display: block;
+  height: 0;
+  font-size: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+#main.dashboard {
+  padding-left: 2em;
+  margin: 0.5em auto 1em 14em;
+}
+
+#main.home {
+  padding: 2em 7.5em 3.5em;
+}
+
+#main.errors {
+  background: url("/images/ao3_logos/sadface.png") top right no-repeat;
+}
+
+#main.error-502 {
+  background: url("/images/ao3_logos/ao3-502.png") top right no-repeat;
+}
+
+#main.error-503-maintenance {
+  background: url("/images/ao3_logos/logo-ruby.png") top right no-repeat;
+}
+
+#main.session {
+  background: url("/images/logo.png") 0.5em 3em no-repeat;
+}
+
+#main.errors h2 {
+  display: block;
+  margin-top: 0;
+}
+
+#main.errors p, #main.errors .heading {
+  margin-right: 325px;
+}
+
+/*END== */
+/*==REGION: FOOTER is #4 of the 4 regions shown on every page
+http://otwcode.github.com/docs/front_end_coding/patterns/supertypes
+*/
+
+#footer {
+  background: #A00D04 ;
+  border-top: 2px solid;
+  color: #ebfff5;
+  float: left;
+  font-size: 0.75em;
+  position: relative;
+  padding: 0;
+  width: 100%;
+}
+
+#footer ul {
+  border: 0;
+  clear: both;
+  margin: 1.5em 0;
+  padding: 1em 5%;
+  float: left;
+  text-align: left;
+  width: 90%;
+}
+
+#footer li {
+  position: relative;
+  display: block;
+}
+
+#footer a, #footer .secondary {
+  background: transparent;
+  border: 0;
+  font-weight: 400;
+  margin: auto;
+  outline: 0;
+  padding: 0;
+  vertical-align: baseline;
+    box-shadow: none;
+    border-radius: 0;
+}
+
+#footer a {
+  color: #ebfff5;
+  display: inline;
+  border-bottom: 1px solid;
+  line-height: 1.5;
+  white-space: normal;
+}
+
+#footer a:focus {
+  outline: 1px dotted;
+}
+
+#footer .module {
+  max-width: 20%;
+  padding: 0 2%;
+}
+
+#footer .menu {
+  margin: 0;
+  padding: 0;
+}
+
+#footer .heading {
+  display: block;
+  color: #ebfff5;
+}
+
+#footer .secondary {
+  position: static;
+    box-shadow: none;
+}
+
+#footer .secondary li {
+  display: block;
+}
+
+/*END== */
+/*==INTERACTIONS: global form rules
+http://otwcode.github.com/docs/front_end_coding/patterns/interactions
+(submit button styling is in actions.css with the other buttons)
+General rules for all form elements, and nearly ALL our forms use just these.
+Forms are normally in definition lists <dt label: dd input>
+with some un/ordered lists, normally of checkbox options <li checkbox:label>
+and some paragraphs, normally forms with a single <p label:input> .
+
+We might develop three MODES: .simple .verbose and .dynamic -- .sim and ver in early draft in sandbox
+We also have some jS WIDGETS, which are custom form interactions, like autocomplete
+and a few variations for INTERACTION TYPES, which are, roughly:
+.post, .login, make .associations, set .preferences, [.search, .filter] => in searchbrowse
+*/
+
+form {
+  clear: right;
+}
+
+/* wrap long text in Opera, Safari, and Chrome */
+fieldset {
+  min-width: 0;
+}
+
+/*Guideline: Forms are written by lots of people, and, this is beta, change a LOT.
+I've written a load of possible different nests to give a reasonably/broadly consistent view whatever goes in,
+but it's probably not complete. */
+
+fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff {
+  display: block;
+  background:#ff7ab8;
+  border: 2px solid #f3efec;
+  margin: 0.643em;
+  padding: 0.643em;
+    box-shadow: inset 1px 0 5px #999;
+}
+
+fieldset dl, fieldset.actions, fieldset dl fieldset dl {
+  background: transparent;
+  border: none;
+  clear: right;
+    box-shadow: none;
+}
+
+fieldset fieldset, fieldset dl dl, form blockquote.userstuff {
+  background: #ebfff5;
+  clear: right;
+}
+
+fieldset dd dl, form .meta dd, fieldset dl fieldset dl, dd fieldset {
+  margin: 0.643em 0;
+}
+
+/*end nesting */
+
+legend, input[type="hidden"] {
+  height: 0;
+  width: 0;
+  font-size: 0;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+}
+
+label {
+  cursor: pointer;
+  margin-right: 0.375em;
+}
+
+input, textarea {
+  font: 100% 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
+  width: 100%;
+  border: 1px solid #bbb;
+    box-shadow: inset 0 1px 2px #ccc;
+}
+
+textarea {
+  min-height: 12em;
+}
+
+textarea.large {
+  height: 36em;
+}
+
+input:focus, select:focus, textarea:focus {
+  background: #f3efec;
+}
+
+input[type="radio"] + label, input[type="checkbox"] + label {
+  padding-left: 1em;
+}
+
+select {
+  vertical-align: text-top;
+  width: 100%;
+  min-width: 10.5em;
+}
+
+.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;
+}
+
+input.number {
+  width: 4em;
+}
+
+option, .actions option, form code {
+  display: block;
+}
+
+form p {
+  clear: right;
+  margin: auto;
+  padding: 0.643em;
+}
+
+form dt {
+  float: left;
+  clear: left;
+  min-width: 10.5em;
+  width: 25%;
+  padding: 0.25em 0.5625em 0 0;
+  border-bottom: 1px solid #f3efec;
+}
+
+form dd, form dd.any {
+  float: left;
+  width: 72.5%;
+}
+
+form dd.any {
+  margin-left: 25%;
+}
+
+form dd + dd {
+  width: 97.5%;
+  margin-left: 0.5625em;
+}
+
+form dd.required {
+  color: #2a2a2a;
+}
+
+form .footnote code {
+  display: inline;
+}
+
+/* when we display information that cannot be edited,
+like the current username on the change username form */
+form dd p.informational {
+  padding-top: 0;
+}
+
+/*END FORM RULES*/
+
+/* WIDGET: DEPENDENT OPTIONS */
+.toggle_formfield ~ ul.dependent {
+  margin-left: 2.625em;
+}
+
+/* WIDGET: CHARACTER COUNTER (todo: ARIA live region POLITE)*/
+
+p.character_counter {
+  font-size: 87.5%;
+  text-align: right;
+}
+
+.comment .character_counter {
+  float: left;
+}
+
+/* WIDGET: LIVE VALIDATION (todo: ARIA live region)
+We only use error messages for LiveValidation. Style spoofs the system error message. If we ever set a default success message, this will need updating. */
+
+.LV_validation_message {
+  font-weight: 900;
+  position: absolute;
+}
+
+.LV_invalid {
+  background: #efd1d1;
+  border: 1px solid #ff7ab8;
+  color: #ff7ab8;
+  margin: 0.643em auto;
+  padding: 0.25em 0.375em;
+    box-shadow: 1px 1px 2px;
+    border-radius: 0.25em;
+}
+
+.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active {
+  border: 1px solid #c00;
+}
+
+.LV_invalid:before {
+  border-color: #ff7ab8 transparent;
+  border-style: solid;
+  border-width: 0 0.643em 0.643em;
+  content: "";
+  left: 0.875em;
+  position: absolute;
+  top: -0.643em;
+}
+
+/* WIDGET: AUTO COMPLETE */
+
+.autocomplete div.dropdown ul {
+  background: #ebfff5;
+  border: 1px solid #eee;
+  padding: 0.125em;
+  line-height: 1.286;
+  color: #000;
+  display: block;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
+}
+
+.autocomplete ul li {
+  padding: 0.125em;
+  margin: 0.25em auto auto;
+}
+
+.autocomplete input, .autocomplete .dropdown ul li {
+  display: block;
+  min-width: 10em;
+}
+
+.autocomplete .dropdown ul li {
+  margin: 0.25em 0 0;
+}
+
+form li ul.autocomplete li.input {
+  border: 0;
+}
+
+.autocomplete .dropdown ul li:hover, li.selected {
+  background: #ff7ab8;
+  color: #ebfff5;
+}
+
+.required .autocomplete, .autocomplete .notice {
+  color: #2a2a2a;
+}
+
+.autocomplete .notice {
+  margin-top: 0 !important;
+}
+
+.autocomplete li.added, .post .meta dd ul li.added {
+  display: inline-block;
+}
+
+/* WIDGET: SORTABLE LIST (note: hope to merge with .sortable and .draggable etc)*/
+
+.ui-sortable li {
+  background: #eee;
+  border: 2px solid#ff7ab8;
+  float: left;
+  width: 100%;
+  clear: both;
+    box-shadow: 1px 1px 3px transparent;
+}
+
+.ui-sortable li:hover {
+  background:#ff7ab8;
+  border: 2px solid #999;
+  cursor: move;
+    box-shadow: 1px 1px 3px #bbb;
+}
+
+.ui-sortable input {
+  margin: 0.429em 0 0.25em 0.25em;
+}
+
+.ui-sortable .heading {
+  display: inline-block;
+}
+
+.ui-sortable ul.actions li {
+  float: none;
+  background: transparent;
+  border: none;
+}
+
+.ui-draggable form {
+  cursor: move;
+    box-shadow: 0 0 3px #555;
+}
+
+/* WIDGET: DATEPICKER, TIMEPICKER (todo, requires ARIA managed focus) */
+
+#ui-datepicker-div {
+  background: #ebfff5;
+  display: none;
+  overflow: hidden;
+  padding: 0.643em;
+  font-size: 87.5%;
+    box-shadow: 3px 3px 5px;
+}
+
+.ui-datepicker dt, .ui-datepicker dd, .ui-datepicker-buttonpane, .ui-timepicker-div, a.ui-datepicker-prev {
+  float: left;
+}
+
+.ui-datepicker button {
+  height: 2em;
+}
+
+.ui-datepicker dt {
+  clear: left;
+  width: 5em;
+  margin: 0.25em 0;
+}
+
+.ui-datepicker dd {
+  margin: 0.25em 0;
+}
+
+.ui-datepicker table {
+  background: #eee;
+}
+
+.ui-datepicker td {
+  border: 1px solid #aaa;
+}
+
+.ui-datepicker tr:hover {
+  background:#ff7ab8;
+}
+
+.ui-datepicker td:hover {
+  background: #ebfff5;
+}
+
+.ui-datepicker td a {
+  border-bottom: none;
+}
+
+a.ui-datepicker-next {
+  float: right;
+}
+
+.ui-datepicker-title {
+  clear: both;
+  text-align: center;
+}
+
+.ui-datepicker-buttonpane {
+  clear: left;
+}
+
+.ui-timepicker-div dl {
+  float: left;
+  margin: 0.643em 0;
+}
+
+.ui_tpicker_hour_label, .ui_tpicker_minute_label {
+  padding-top: 0.25em;
+  height: 1.45em;
+}
+
+
+/*WIDGET: TOOLTIP (todo, requires graceful degradation testing, can't see any reason for this jS)
+qTip2 Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com*/
+
+.qtip {
+  position: absolute;
+  left: -28000px;
+  top: -28000px;
+  display: none;
+  max-width: 22em;
+  min-width: 6em;
+  font-size: 0.625em;
+  z-index: 15000;
+}
+
+.qtip-content {
+  position: relative;
+  padding: 0.15em 0.25em;
+  background: #d1e1ef;
+  border: 1px solid #c2d2df;
+  overflow: hidden;
+    word-wrap: break-word;
+}
+
+/* WIDGET: MODAL DIALOGS (called by help links) */
+
+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.7);
+  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 {
+  background: #ebfff5;
+  border: 10px solid #eee;
+  margin: 3% 0;
+  max-width: 800px;
+  min-width: 200px;
+  padding-bottom: 44px;
+  position: relative;
+  text-align: left;
+  width: 80%;
+  z-index: 501;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+}
+
+#modal .content {
+  border-bottom: 1px solid #ccc;
+  font-size: 0.875em;
+  overflow: auto;
+  padding: 1.5em;
+}
+
+#modal.tall {
+  height: 80%;
+  max-height: 720px;
+}
+
+#modal.tall.img {
+  min-width: 0;
+  width: auto;
+}
+
+#modal.tall .content {
+  bottom: 44px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+#modal.img {
+  background: transparent;
+  border: 0;
+  margin: 0 0 44px;
+  max-height: none;
+  max-width: 90%;
+  min-width: 0;
+  padding: 0;
+  width: auto;
+    box-shadow: none;
+}
+
+#modal.img a {
+  border: 0;
+  color: #ebfff5;
+}
+
+#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);
+  max-height: 100%;
+  max-width: 100%;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+}
+
+#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);
+  color: #ebfff5;
+  position: fixed;
+  text-align: center;
+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
+}
+
+#modal .footer .action.modal-closer {
+  bottom: 8px;
+  position: absolute;
+  right: 8px;
+}
+
+#modal .content > h1:first-child, #modal .content > h2:first-child, #modal .content > .heading:first-child {
+  margin-top: 0.5em;
+}
+
+/*MODE: DYNAMIC is in early dev and so currently sharing styles with toggled */
+
+div.dynamic {
+  background: #ebfff5;
+  position: absolute;
+  z-index: 500;
+}
+
+/*MODE: VERBOSE for forms with more than three fieldsets
+TO DO: Make VERBOSE a class on FORM across the site; it is a surrounding DIV
+in some areas, hence .verbose form */
+
+form.verbose legend, .verbose form legend {
+  height: auto;
+  width: auto;
+  font-size: 100%;
+  background: #ebfff5;
+  border: 2px solid#ff7ab8;
+  padding: 0.5em;
+    box-shadow: 1px 2px 3px #999;
+    opacity: 1;
+}
+
+/*MODE: SIMPLE for forms with three or fewer fieldsets (default) */
+
+form.simple span.actions {
+  float: none;
+}
+
+.simple input[type="submit"] {
+  margin: 0;
+}
+
+/* WIDGET: TOGGLED FORMS (SHOW/HIDE bookmark and collection - hidden with jS) */
+
+.toggled form dd, .dynamic form dd {
+  width: 99%;
+}
+
+.toggled form p.footnote, .dynamic form p.footnote {
+  float: none;
+  margin: auto;
+  padding: 0;
+  line-height: 0.5;
+}
+
+.toggled form, .dynamic form {
+  padding: 0.5em;
+  border: 2px solid #ccc;
+  background: #ebfff5;
+    box-shadow: 1px 2px 5px;
+}
+
+.dynamic form fieldset, .toggled form fieldset, .toggled form dl, .secondary .toggled form, .secondary form {
+  border: none;
+  background: transparent;
+  margin: 0;
+  padding: 0;
+    box-shadow: none;
+}
+
+.toggled .bookmark form p.footnote {
+  padding-bottom: 0.643em;
+}
+
+/*INTERACTION: LOGIN SIGNUP*/
+
+/*INTERACTION: POST (work, chapter, comment, news, feedback, challenge etc) */
+
+.post .required .warnings, dd.required {
+  font-weight: normal;
+  color: #2a2a2a;
+}
+
+.post .text textarea {
+  clear: right;
+}
+
+/* CONTEXT: dashboard*/
+
+.dashboard > form {
+  float: left;
+  width: 100%;
+}
+
+.dashboard fieldset {
+  clear: right;
+}
+
+/*END== */
+/*==ACTIONS: buttons!
+http://otwcode.github.com/docs/front_end_coding/patterns/actions
+subtypes:
+.action, .navigation, .sorting, .submit, .cancel, .close, .delete, .pagination, .current, .landmark, #skiplinks
+input[type="submit"], button
+*/
+
+.actions * {
+  display: inline;
+}
+
+ul.actions, p.actions, li.actions, span.actions, fieldset.actions, dd.actions {
+  padding: 0.429em 0.25em 0.25em 0;
+  float: right;
+  text-align: center;
+}
+
+ul.actions {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+
+.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label {
+  background: #eee;
+  color: #444;
+  width: auto;
+  font-size: 100%;
+  line-height: 1.286;
+  height: 1.286em;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0.25em 0.75em;
+  white-space: nowrap;
+  overflow: visible;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  border: 1px solid #bbb;
+  border-bottom: 1px solid #aaa;
+    background-image: -moz-linear-gradient(#ebfff5 2%,#a5b075 95%, #bbb 100%);
+    background-image: -webkit-linear-gradient(#ebfff5 2%,#a5b075 95%, #bbb 100%);
+    background-image: -o-linear-gradient(#ebfff5 2%,#a5b075 95%, #bbb 100%);
+    background-image: -ms-linear-gradient(#ebfff5 2%,#a5b075 95%, #bbb 100%);
+    background-image: linear-gradient(#ebfff5 2%,#a5b075 95%, #bbb 100%);
+    border-radius: 0.25em;
+    box-shadow: none;
+}
+
+button {
+  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
+  box-sizing: content-box;
+}
+
+label.action {
+  padding: 0.15em 0.375em;
+}
+
+input[type="submit"] {
+  height: auto;
+  white-space: normal;
+}
+
+p.submit, input.submit, dd.submit {
+  text-align: right;
+}
+
+.actions input.text, .actions input[type="text"] {
+  cursor: text;
+}
+
+.actions input[type="checkbox"] {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+/*subtypes and modes
+test note: this pagination clear needs to be kept an eye on*/
+
+ol.pagination, div.pagination, ol.year {
+  text-align: center;
+  clear: right;
+  margin: 0.643em auto;
+}
+
+.actions a:visited, .action:visited, .action a:link, .action a:visited {
+  color: #111;
+}
+
+.actions a:hover, .actions input:hover, .actions a:focus, .actions input:focus, label.action:hover, .action:hover, .action:focus {
+  color: #ff7ab8;
+  border-top: 1px solid #999;
+  border-left: 1px solid #999;
+    box-shadow: inset 2px 2px 2px #bbb;
+}
+
+.actions a:active, .current, a.current, a:link.current, .current a:visited {
+  color: #111;
+  background: #ccc;
+  border-color: #ebfff5;
+    box-shadow: inset 1px 1px 3px #333;
+}
+
+.actions label.disabled {
+  background: #ccc;
+}
+
+.actions li a, .actions li input, .actions li input[type="submit"], .actions li .current, .actions li label {
+  margin: 0.375em auto;
+}
+
+.delete a, span.delete {
+  border: 0;
+  color: #ff7ab8;
+  font-weight: 900;
+  margin-right: 0.375em;
+  padding: 0 0.1em 0.15em;
+  cursor: pointer;
+    box-shadow: -1px -1px 2px rgba(0,0,0,0.75);
+    border-radius: 0.875em;
+}
+
+span.delete a {
+  margin: 0 0.2em;
+    box-shadow: none;
+}
+
+ul#skiplinks, .landmark, .landmark a, .index .heading.landmark {
+  font-size: 0;
+  line-height: 0;
+  height: 0;
+  margin: 0;
+  clear: both;
+  color: transparent;
+    opacity: 0;
+}
+
+.secondary {
+  background: #ebfff5;
+  position: absolute;
+  z-index: 99;
+  border: 2px solid #bbb;
+  margin: auto;
+  padding: 0 0.375em;
+  overflow: hidden;
+  right: 2.5em;
+    box-shadow: 2px 2px 5px #bbb;
+    border-radius: 0.15em;
+}
+
+/* CONTEXTS */
+
+legend .action:link {
+  position: static;
+}
+
+.heading .actions, .heading .action, .heading span.actions {
+  height: auto;
+  font: 100 75%/1.286 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
+  padding: 0.15em 0.375em;
+}
+
+th .actions, td .actions {
+  float: none;
+}
+
+dl.stats + .landmark + .actions {
+  clear: none;
+  float: left;
+  margin: 0 auto;
+}
+
+.actions .secondary .submit, .nomination .actions {
+  float: none;
+}
+
+.chapter .secondary, .download .secondary {
+  top: 3.5em;
+}
+
+.dashboard .landmark {
+  clear: right;
+}
+
+.actions .landmark {
+  clear: none;
+}
+
+.actions a.symbol, .action a {
+  border: 0;
+  background: none;
+  padding: 0 0 0.15em 0;
+}
+
+.many p.actions {
+  float: none;
+  text-align: right;
+}
+
+.concise label.action {
+  float: left;
+}
+
+dd.any label.action {
+  margin-left: 0.5625em;
+}
+
+dl.index p.actions {
+  margin: 0;
+}
+
+/*END== */
+/*==ROLES AND STATES
+http://otwcode.github.com/docs/front_end_coding/patterns/modifiers
+*/
+
+.own, .draft, .draft .wrapper, .unread, .child, .unwrangled, .unreviewed {
+  background: #ededed;
+    opacity: 0.95;
+}
+
+.draft {
+  border: 2px dashed #aaa;
+  padding: 0.643em;
+    border-radius: 0.5em;
+}
+
+/*(these states spoof the ".navigation .current" style)*/
+
+span.unread, .replied, span.claimed, .actions span.defaulted {
+  background: #ccc;
+  color: #ff7ab8;
+  width: auto;
+  font: 100 100%/1.286 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
+  height: 1.286em;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0.25em 0.75em;
+  white-space: nowrap;
+  overflow: visible;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  border: 1px solid #bbb;
+  border-bottom: 1px solid #aaa;
+    border-radius: 0.25em;
+}
+
+.actions span.defaulted {
+  color: #111;
+}
+
+.canonical, li.requested {
+  font-weight: 700;
+}
+
+.hidden, body .hidden, .actions .hidden, .actions a.hidden, #dashboard .hidden {
+  display: none;
+}
+
+.draggable, .droppable, span.requested, .nominations .rejected {
+  color: #ff7ab8;
+}
+
+span.offered, .replied, .nominations .approved {
+  color: #008000;
+}
+
+.nominations .approved {
+  background: #d1f0d1;
+}
+
+.nominations .rejected {
+  background: #efd1d1;
+}
+
+span.offered.requested {
+  color: #876714;
+}
+
+/* Arrows for the accordion widget */
+
+.collapsed:after {
+  content: " \2193";
+}
+
+.expanded:after {
+  content: " \2191";
+}
+
+/*This is a helper for Back End and can be overridden contextually anywhere*/
+
+.commas li:after {
+  content: ", ";
+}
+
+.commas li {
+  display: inline;
+}
+
+.commas li:last-child:after, .commas li:only-child:after {
+  content: none;
+}
+
+/* CONTEXTS */
+
+.dashboard .own, .comment span.unreviewed {
+  background: transparent;
+    opacity: 1.0;
+}
+
+/*END== */
+/*==TYPES OF DATA, GROUPS OF DATA
+http://otwcode.github.com/docs/front_end_coding/patterns/supertypes
+*/
+
+/*TYPE: TAGS */
+
+a.tag {
+  color: #111;
+  line-height: 1.5;
+  text-decoration: none;
+  padding: 0;
+  border-bottom: 1px dotted;
+}
+
+a.tag:hover, .listbox .heading a.tag:visited:hover {
+  background: #ff7ab8;
+  color: #ebfff5;
+}
+
+.tags li {
+  display: inline;
+  padding-left: 0;
+  padding-right: 0.25em;
+}
+
+.filters .tags li, .review .tags {
+  display: block;
+}
+
+/*GROUP CLOUD */
+
+ul.cloud {
+  margin: 2em auto;
+  text-align: center;
+  line-height: 2;
+}
+
+a.cloud1 {
+  color: #200;
+  font-size: 0.625em;
+  font-weight: 100;
+}
+
+a.cloud2 {
+  color: #300;
+  font-size: 0.75em;
+  font-weight: 200;
+}
+
+a.cloud3 {
+  color: #400;
+  font-size: 0.875em;
+  font-weight: 300;
+}
+
+a.cloud4 {
+  color: #500;
+  font-size: 1em;
+  font-weight: 400;
+}
+
+a.cloud5 {
+  color: #600;
+  font-size: 1.125em;
+  font-weight: 500;
+}
+
+a.cloud6 {
+  color: #700;
+  font-size: 1.5em;
+  font-weight: 600;
+}
+
+a.cloud7 {
+  color: #800;
+  font-size: 1.875em;
+  font-weight: 700;
+}
+
+a.cloud8 {
+  color: #ff7ab8;
+  font-size: 2.25em;
+  font-weight: 800;
+}
+
+/* GROUPS: WRAPPER, MODULE, INDEX  (#outer and #inner .wrapper have no style by default, but wrap the regions on every page for your skins convenience)*/
+
+.wrapper {
+    box-shadow: 1px 1px 5px #aaa;
+}
+
+#outer.wrapper {
+  float: left;
+  width: 100%;
+}
+
+#outer.wrapper, #inner.wrapper {
+    box-shadow: none;
+}
+
+.module, .index, .index .index {
+  position: relative;
+  width: auto;
+}
+
+.module, .dashboard .index {
+  float: left;
+  width: 100%;
+}
+
+/*http://otwcode.github.com/docs/front_end_coding/patterns/pattern-index*/
+
+dl.index {
+  margin: 0.643em 0;
+  border: none;
+    box-shadow: none;
+}
+
+dl.index dt {
+  width: auto;
+  float: none;
+  border: none;
+}
+
+dl.index dd {
+  width: auto;
+  float: none;
+  clear: right;
+  margin: 0 0.25em 0.643em 2.5em;
+  padding: 0.375em 0.15em 0.15em;
+  overflow: visible;
+  background: #ededed;
+}
+
+dl.index > dd:after {
+   content: " ";
+   display: block;
+   height: 0;
+   font-size: 0;
+   clear: both;
+   visibility: hidden;
+ }
+
+dl.index dd .userstuff p {
+  display: block;
+}
+
+/*TYPES*/
+
+a.rss span {
+  background: url("/images/imageset.png") no-repeat -150px -275px;
+  padding-left: 16px;
+}
+
+a.work {
+  font: 100 1.143em/1.125 Georgia, serif;
+  margin: 0.5em 0;
+  color: #ff7ab8;
+}
+
+.warning, .warnings, span.byline, a.user {
+  font-weight: bold;
+}
+
+li.relationships a {
+  background: #eee;
+}
+
+.actions .reindex a {
+  border-bottom: 3px solid #ff7ab8;
+}
+
+.series.footnote {
+  font-size: 100%;
+  float: none;
+}
+
+/* circle dividers for series navigation on works */
+
+span.series .divider {
+  color: #777;
+}
+
+span.series .previous + .divider:before {
+  content: "\0020\25CF";
+}
+
+span.series .position + .divider:after {
+  content: "\25CF\0020";
+}
+
+p.kudos {
+  background: url("/images/imageset.png") no-repeat -110px -580px;
+  padding: 0.5em 0.5em 0.5em 60px;
+  margin: 2em 0;
+  min-height: 50px;
+}
+
+.icon {
+  height: 100px;
+  width: 100px;
+  margin: 0;
+}
+
+.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 {
+  text-align: right;
+  background: none;
+  margin-top: 0.643em;
+    box-shadow: none;
+}
+
+dl.stats dd {
+  white-space: nowrap;
+  padding-right: 0.5em;
+}
+
+.statistics .index li {
+ padding: 0.643em 0.375em;
+}
+
+.statistics .index li:nth-of-type(even) {
+  background: #eee;
+}
+
+.concise li {
+  width: 45%;
+  float: left;
+  clear: none;
+  margin-right: 1.5em
+}
+
+/*END== */
+/*==GROUP: LISTBOX
+http://otwcode.github.com/docs/front_end_coding/patterns/listbox
+*/
+
+.listbox, fieldset fieldset.listbox {
+  clear: right;
+  background:#ff7ab8;
+  border: 2px solid #ccc;
+  padding: 0;
+  margin: 0.643em auto;
+  overflow: hidden;
+    box-shadow: 0 0 0 1px #ebfff5;
+}
+
+.listbox .heading {
+  display: inline-block;
+}
+
+.listbox li.blurb, .listbox .landmark.heading, .listbox .tags .listbox, .listbox .lots li, .listbox .all li {
+  display: block;
+}
+
+.listbox > .heading, .listbox .heading a:visited {
+  margin: 0;
+  color: #2a2a2a;
+  padding: 0.25em;
+}
+
+.listbox .index {
+  width: auto;
+  padding: 0.643em;
+  float: none;
+  clear: right;
+  background: #ebfff5;
+    box-shadow: inset 1px 1px 3px #bbb;
+}
+
+.listbox .index:after {
+  content: " ";
+  display: block;
+  height: 0;
+  font-size: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.commas li.listbox:after {
+  content: none;
+}
+
+.listbox li.blurb {
+    box-shadow: none;
+}
+
+/* mods: alphabet, medium */
+
+.alphabet .listbox li, .media .listbox {
+  width: 45%;
+  float: left;
+  clear: none;
+  margin-right: 1.5em;
+}
+
+/*Contexts */
+
+.review .listbox {
+  overflow: visible;
+  position: static;
+}
+
+/*INTERACTION context (show many/more/lots)*/
+
+.listbox .options {
+  overflow: auto;
+}
+
+.listbox .all {
+  height: auto;
+}
+
+.listbox .many {
+  max-height: 12em;
+}
+
+/*END== */
+/*==GROUP: META
+http://otwcode.github.com/docs/front_end_coding/patterns/meta
+*/
+
+dl.meta {
+  border: 1px solid #ccc;
+  clear: right;
+  padding: 1.286em 0.75em;
+  position: relative;
+  overflow: hidden;
+}
+
+.meta dt {
+  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 {
+  float: left;
+  margin-top: 0;
+}
+
+.meta .stats dl dd, .meta .stats dl dt {
+  margin: 0 0.375em auto 0;
+  width: auto;
+  min-width: 0;
+  clear: none;
+  float: left;
+}
+
+.meta .stats dl, .meta .stats dl dt:first-child, dl.meta dd ul li:first-child {
+  padding-left: 0;
+}
+
+.meta p {
+  display: block;
+  margin-top: 0;
+}
+
+.meta dd ul li {
+  display: inline;
+  margin: auto;
+}
+
+.meta dd blockquote {
+  margin: 0;
+}
+
+/* CONTEXTS */
+
+.dashboard .meta .clear {
+  clear: none;
+  clear: right;
+}
+
+.news .wrapper {
+    box-shadow: none;
+}
+
+.news dl.meta {
+  border: none;
+  padding: 0;
+}
+
+.news .meta dt, .news .meta dd, .news .meta ul {
+  display: inline;
+  float: none;
+  margin-left: 0;
+}
+
+.news .meta dd:after {
+  content: " ";
+  display: block;
+  height: 0.643em;
+}
+
+/* TODO the post new work form needs its classes changed so these overrides are no longer needed */
+.post .meta dd ul li {
+  display: block;
+}
+
+.post .meta dd ul li:after {
+  content: none;
+}
+
+/*END== *//*==GROUP: BLURB
+http://otwcode.github.com/docs/front_end_coding/patterns/blurb
+The blurb class is used wherever we show a list of works, collections, bookmarks, etc; each list item is a blurb
+it shows all the tags, stats and other associations we hold on that object, and sometimes it shows short user notes too, like a summary, bookmark notes, or collection description.
+
+Intrepid skinsers:
+Probably 40% of this sheet deals with icon block rules, but it's not very complicated,
+just the same thing repeated for each icon.
+The positioning and sizing is for 25px icons;
+there is a full set available at 50px, in /default_large.
+You can use your own icon set, or choose to show the text instead,
+by overriding the rules in the marked off section.
+Perhaps we can make a wizard for this specific task.
+*/
+
+.blurb ul li, .blurb dd ul li {
+  display: inline;
+}
+
+li.blurb, .blurb .blurb {
+  display: block;
+  position: relative;
+  clear: left;
+  padding: 0.429em 0.75em;
+  overflow: visible;
+}
+
+li.blurb:after, .blurb .blurb:after {
+  content: " ";
+  display: block;
+  height: 0;
+  font-size: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.blurb .module {
+  float: none;
+}
+
+.blurb .header {
+  min-height: 55px;
+  margin-bottom: 0.375em;
+}
+
+.blurb .header .heading, .blurb .header ul {
+  display: block;
+  background: transparent;
+  margin: 0.375em 5.25em 0 65px;
+}
+
+.blurb .header img {
+  position: relative;
+  margin: 0;
+}
+
+.blurb h4 a:link, .blurb h4 img {
+  color: #ff7ab8;
+  vertical-align: bottom;
+}
+
+.blurb .header p.notice, .blurb ul.series {
+  margin: 1.25em 0 0;
+}
+
+.blurb ul.series {
+  margin-bottom: 0.875em;
+}
+
+.blurb .heading {
+  display: block;
+}
+
+.blurb dl.stats {
+  float: right;
+  line-height: 1.5;
+}
+
+.blurb .fandoms .landmark {
+  position: absolute;
+}
+
+.blurb dl.stats + .heading.landmark {
+  display: inline;
+}
+
+/* ==START icon block rules*/
+
+.blurb ul.required-tags {
+  position: absolute;
+  top: 0;
+  width: 60px;
+  margin: 0;
+}
+
+.blurb ul.required-tags li, .blurb ul.required-tags li a, .blurb ul.required-tags li span {
+  display: block;
+  width: 25px;
+  height: 25px;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.blurb ul.required-tags li {
+  margin-bottom: 3px;
+}
+
+.blurb ul.required-tags li+li+li, .blurb ul.required-tags li+li+li+li {
+  position: absolute;
+  left: 28px;
+}
+
+.blurb ul.required-tags li+li+li {
+  top: 0;
+}
+
+.blurb ul.required-tags li+li+li+li {
+  top: 28px;
+}
+
+/* keeps the outline to the proper size in Firefox and Opera */
+.blurb ul.required-tags li a:focus {
+  overflow: hidden;
+}
+
+.blurb span.text {
+  height: 0;
+  width: 0;
+  font-size: 0.001em;
+  color: transparent;
+}
+
+.blurb ul.required-tags li span {
+  background-repeat: no-repeat;
+}
+
+/*icon image replacement*/
+
+.required-tags .rating-general-audience {
+  background: url("/images/imageset.png") -50px -25px;
+}
+
+.required-tags .rating-explicit {
+  background: url("/images/imageset.png") -25px -25px;
+}
+
+.required-tags .rating-mature {
+  background: url("/images/imageset.png") -75px -25px;
+}
+
+.required-tags .rating-notrated, .required-tags .category-none, .required-tags .warning-no, .status .count {
+  background: url("/images/imageset.png") -150px 0px;
+}
+
+.required-tags .rating-teen {
+  background: url("/images/imageset.png") 0px -25px;
+}
+
+.required-tags .category-femslash {
+  background: url("/images/imageset.png") -25px 0px;
+}
+
+.required-tags .category-gen {
+  background: url("/images/imageset.png") -50px 0px;
+}
+
+.required-tags .category-qpr {
+  background: url("/images/imageset.png") -165px -275px;
+}
+
+.required-tags .category-slash {
+  background: url("/images/imageset.png") 0px 0px;
+}
+
+.required-tags .category-het {
+  background: url("/images/imageset.png") -75px 0px;
+}
+
+.required-tags .category-multi {
+  background: url("/images/imageset.png") -100px -0px;
+}
+
+.required-tags .category-other {
+  background: url("/images/imageset.png") -125px 0px;
+}
+
+.required-tags .complete-no {
+  background: url("/images/imageset.png") -100px -25px;
+}
+
+.required-tags .complete-yes {
+  background: url("/images/imageset.png") -175px -25px;
+}
+
+.required-tags .warning-yes {
+  background: url("/images/imageset.png") -150px -25px;
+}
+
+.required-tags .warning-choosenotto {
+  background: url("/images/imageset.png") -125px -25px;
+}
+
+.required-tags .external-work {
+  background: url("/images/imageset.png") -75px -50px;
+}
+
+.status .private .text {
+  background: url("/images/imageset.png") -175px -50px;
+}
+
+.status .public {
+  background: url("/images/imageset.png") -125px -50px;
+}
+
+.status .hidden {
+  background: url("/images/imageset.png") -150px -50px;
+}
+
+.status .rec {
+  background: url("/images/imageset.png") -100px -50px;
+}
+
+/*==END icon block rules==*/
+
+.blurb .datetime {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+}
+
+.claim .datetime {
+  margin-left: 65px;
+  position: static;
+}
+
+.blurb blockquote {
+  clear: none;
+  margin: 0.643em auto;
+  text-align: justify;
+}
+
+/*modification: PICTURE
+use this along with "index" and "blurb" for indices where we have icon pictures,
+eg collections, users, skins, instead of the 4-icon list
+*/
+
+.picture .header {
+  border-bottom: 1px solid #ccc;
+}
+
+.index .skins .icon {
+  background: url("/images/imageset.png") 0px -580px;
+}
+
+.index .mystery .icon {
+  background: url("/images/imageset.png") -110px -525px;
+}
+
+.index .tag .icon, .index .tagset .icon {
+  background: url("/images/imageset.png") -55px -580px;
+}
+
+.picture .icon img, .index .picture .icon {
+  position: absolute;
+  top: 0;
+  height: 55px;
+  width: 55px;
+  background-repeat: no-repeat;
+}
+
+/*various little mods*/
+
+.collection .name {
+    word-wrap: break-word;
+}
+
+/* mod: ITEM
+blurbs on the manage collection items pages, mostly reseting styles inherited from interactions (forms)
+*/
+
+.item .blurb blockquote, .item dl.stats {
+  margin: 0.643em auto;
+  padding: 0;
+  border: none;
+  background: transparent;
+    box-shadow: none;
+}
+
+.item .blurb .header, .item dl.stats dt {
+  border: none;
+}
+
+.item dl.visibility {
+  background: #eee;
+}
+
+/* mod: BOOKMARK */
+
+.bookmark p.status {
+  position: absolute;
+  right: 0.25em;
+  width: 60px;
+  margin-top: 0.429em;
+  z-index: 1;
+}
+
+.bookmark .status span, .bookmark .status a {
+  display: block;
+  width: 25px;
+  height: 25px;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.bookmark .status a:focus {
+  overflow: hidden;
+}
+
+.bookmark span.count {
+  line-height: 1.875em;
+  position: absolute;
+  top: 0;
+  left: 28px;
+  text-align: center;
+}
+
+.bookmark .count a {
+  border-bottom: none;
+  color: #069;
+}
+
+.bookmark .count a:hover, .bookmark .count a:focus {
+  color: #111;
+}
+
+.bookmark .datetime {
+	top: 28px;
+}
+
+.bookmark div.user, .bookmark div.recent {
+  clear: right;
+}
+
+.bookmark .user {
+  border: 1px solid #ccc;
+  margin-top: 0.643em;
+  overflow: hidden;
+}
+
+.bookmark .user .meta {
+	display: inline;
+	font-family: Georgia, serif;
+	font-size: 0.875em;
+	line-height: 2;
+}
+
+.bookmark .actions {
+  clear: both;
+}
+
+.bookmark dl.stats {
+  margin-bottom: 0.643em;
+}
+
+/* line break between types of meta */
+.bookmark .user ul.meta:after {
+	content: '\A';
+	white-space: pre;
+}
+
+.bookmark .short .header {
+	min-height: 30px;
+}
+
+.bookmark .user .datetime, .bookmark .work .datetime {
+  top: 0;
+}
+
+.bookmark .short .status {
+	left: 0;
+	margin-top: 0;
+	top: 0;
+	width: 25px;
+}
+
+.bookmark .short .header h5 {
+  margin-left: 35px;
+}
+
+.bookmark .dynamic {
+	position: static;
+}
+
+.bookmark .recent .index {
+  float: none;
+  width: 100%;
+}
+
+/* mod: READING */
+
+.reading .user {
+  float: left;
+}
+
+.reading h4.viewed {
+  background:#ff7ab8;
+}
+
+.reading .deleted h4.viewed {
+  background: transparent;
+}
+
+/* mod: SKIN */
+
+.skin .blurb .header p {
+  margin-left: 65px;
+}
+
+/* mod: PROMPT */
+
+.prompt .blurb h6 {
+  display: inline-block;
+  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif;
+  font-size: 1em;
+  margin: 0.643em 0 0;
+}
+
+.prompt .blurb ul.optional {
+  display: inline;
+}
+
+/*END== */
+/*==GROUP: PREFACE
+http://otwcode.github.com/docs/front_end_coding/patterns/preface
+blockquote contents (the user-written notes) are styled in userstuff.css like all other user content
+.preface appears within #workskin on a work page
+*/
+
+div.preface {
+  margin: 1.5em 3em;
+  padding: 0.643em 0.643em 0;
+  float: none;
+}
+
+div.preface .module {
+  float: none;
+  margin: 0;
+  padding: 0 0 0.643em;
+  width: auto;
+}
+
+.chapter .preface {
+  border-top: 1px solid;
+}
+
+.preface h3 {
+  background: transparent;
+  border-bottom: 1px solid;
+}
+
+.preface h2.title {
+  display: block;
+  border-bottom: 0;
+  clear: right;
+}
+
+div.preface .title, div.preface .byline, div.preface .byline a {
+  border: 0;
+  text-align: center;
+  text-decoration: none;
+}
+
+.preface a:hover {
+  text-decoration: underline;
+}
+
+.preface blockquote {
+  border: 0;
+}
+
+div.preface .notes, div.preface .summary, div.preface .series, div.preface .children {
+  min-height: 5em;
+}
+
+div.preface .series ul, div.preface .children ul {
+  padding: 0 0.643em;
+}
+
+div.preface .associations {
+  margin-bottom: 1.5em;
+}
+
+div.preface .jump {
+  margin-top: 1.5em;
+}
+
+/* mod: afterword
+the preface that appears at the bottom of a work page */
+
+div.afterword {
+  margin-bottom: 2.5em;
+}
+
+div.afterword .series h3, div.afterword .children h3 {
+  border-bottom: none;
+}
+
+/*END== *//*==GROUP: COMMENTS
+http://otwcode.github.com/docs/front_end_coding/patterns/comments
+
+Comments are shown in #feedback at the end of a chapter or work, at the end of news posts, and can also be shown on their own page as a threaded list.
+The comment form generally belongs to the class "post".
+Comments are also shown in user home: inbox and that containing view is styled in zone-home.
+Wrangler discussion boards are not grouped with comments and they only show up in the Tag Zone.
+test note: have put clearfixes on listbox, blurb and comments here, to allow for dynamic content and for skins robustness, but it's an eleventh hour change and needs testing in ie7*/
+
+#feedback {
+  margin: 0 0 auto;
+}
+
+div.comment, li.comment {
+  position: relative;
+  border: 1px solid#ff7ab8;
+  overflow: visible;
+}
+
+.comment:after,
+.comment h4.byline:after {
+  content: " ";
+  display: block;
+  height: 0;
+  font-size: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.comment div.icon {
+  float: left;
+  margin: -1.5625em 0.5625em 0.5625em 0;
+  border-bottom: 5px solid#ff7ab8;
+}
+
+.comment .icon .anonymous {
+  background: url("/images/imageset.png") no-repeat 0px -635px;
+  display: block;
+}
+
+.comment .icon .visitor {
+  background: url("/images/imageset.png") no-repeat 0px -75px;
+  display: block;
+}
+
+.comment h4.byline {
+  background:#ff7ab8;
+  padding: 0.25em 0.25em 0.25em 108px;
+  margin: 0 auto -0.25em;
+}
+
+.thread .thread {
+  margin-left: 3%;
+}
+
+.thread .even {
+  background: #eee;
+  margin: 0;
+}
+
+fieldset.comments, .comment .userstuff {
+  background: transparent;
+  border: none;
+    box-shadow: none;
+}
+
+.comment .userstuff {
+  margin-bottom: 1em;
+  margin-top: 1em;
+  min-height: 3.3em;
+}
+
+.comment fieldset {
+  margin: 0;
+}
+
+.comment .posted {
+  float: right;
+}
+
+.comment .edited {
+  margin: 1.286em 0.643em 0.25em;
+}
+
+/* mods */
+
+.abbreviated .icon {
+  height: 75px;
+  width: 75px;
+}
+
+.abbreviated .icon .anonymous {
+  background: url("/images/imageset.png") no-repeat 0px -450px;
+}
+
+.abbreviated .icon .visitor {
+  background: url("/images/imageset.png") no-repeat 0px -375px;
+}
+
+.abbreviated h4.byline {
+  padding-left: 83px;
+}
+
+/*END== */
+/*==ZONE: SYSTEM
+SUBSECTIONS:
+  1. SPLASH, 2. SESSIONS, 3. DOCS, 4. COMMS, 5. SUPPORT, 6. FAQ, 7. TOS POPUP,
+  8. PROXY NOTICE
+*/
+
+.system p {
+  line-height: 1.5;
+}
+
+.system .userstuff {
+  max-width: 72em;
+  margin: auto;
+}
+
+.system .userstuff h3 {
+  margin-top: 3em;
+}
+
+/*1. ZONE: SYSTEM: SPLASH PAGE*/
+
+.splash {
+  margin: auto;
+  max-width: 78em;
+}
+
+.splash .module h3 {
+  border-bottom: 1px solid #c8c8c8;
+  color: #ff7ab8;
+  font-size: 1.714em;
+}
+
+.splash span.link {
+  float: right;
+}
+
+.splash .link a {
+  font-size: 0.583em;
+}
+
+.splash .browse, .splash div.news {
+  width: 36%;
+}
+
+.splash .intro, .splash .tweets {
+  float: right;
+  width: 60%;
+}
+
+.splash .browse ul, .splash .browse li {
+  float: left;
+  width: 100%;
+    box-sizing: border-box;
+}
+
+.splash .browse li a, .splash .favorite a {
+  border-bottom: none;
+  display: block;
+}
+
+/* module: browse */
+
+.splash .browse li {
+  margin: 0.375em 0;
+  padding: 0.375em 0;
+  width: 50%;
+}
+
+.splash .browse li a:before {
+  color: #ff7ab8;
+  content: "\00BB";
+  padding: 0 0.25em 0 0;
+}
+
+.splash .browse li:nth-of-type(1), .splash .browse li:nth-of-type(2) {
+  margin-top: 0;
+}
+
+.splash .browse li:nth-of-type(odd) {
+  padding-right: 0.375em;
+}
+
+/* module: favorite tags */
+
+.splash .favorite li {
+  margin: 0;
+}
+
+.splash .favorite a {
+  padding: 0.25em 0.375em;
+}
+
+.splash .favorite li:nth-of-type(odd) a {
+  background: #eee;
+}
+
+.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus {
+  background: #ff7ab8;
+}
+
+/* module: intro */
+
+.splash .intro {
+  padding: 1em 0 2em;
+}
+
+.splash .intro h2 {
+  font-size: 2em;
+  line-height: 1.375;
+}
+
+.splash .intro .stats, .splash .parent {
+  text-align: center;
+}
+
+.splash .count {
+  font-weight: 700;
+}
+
+.splash .module div.account {
+  background: #eaeaea;
+  border: 1px solid #ccc;
+    border-radius: 0.5em;
+    box-sizing: border-box;
+}
+
+.splash .account .heading {
+  margin: 1em;
+}
+
+.splash .account p {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+.splash .account ul {
+  margin-left: 4em;
+  margin-right: 1em;
+}
+
+.splash .account li {
+  list-style-type: disc;
+}
+
+.splash .account .actions {
+  float: none;
+  font-size: 1.143em;
+}
+
+/* module: news */
+
+.splash .news li {
+  border-bottom: 1px solid #eee;
+}
+
+.splash .news li:last-of-type {
+  border-bottom: none;
+}
+
+.splash .news .meta {
+  font: normal 0.857em 'Monaco', 'Consolas', Courier, monospace;
+}
+
+.splash .news blockquote {
+  float: left;
+}
+
+.splash .jump {
+  text-align: right;
+}
+
+.splash .placeholder {
+  font-style: italic;
+}
+
+/* module: marked for later */
+
+.splash .blurb blockquote {
+  margin: 0.643em auto;
+}
+
+/* module: unread messages */
+
+.splash .comment .userstuff {
+  margin: 1em;
+}
+
+/* module: twitter */
+
+.tweets iframe {
+  display: block !important;
+  margin: 0 auto;
+}
+
+/* mod: logged-in */
+
+.logged-in .splash .module {
+  float: left;
+  margin: 0 1% 1.571em 1%;
+  width: 48%;
+}
+
+.logged-in .splash > div:nth-of-type(odd) {
+  clear: left;
+}
+
+/* misc */
+
+.splash .module .module, .splash .dynamic, .splash .news blockquote {
+  margin: 0;
+  width: 100%;
+}
+
+/* 2. ZONE: SYSTEM: SESSIONS (login and signup)*/
+
+.session #signin {
+  margin-left: 48%;
+  width: 48%;
+}
+
+.sessions-new .new_admin {
+  width: 75%;
+  margin: auto;
+}
+
+.session dt {
+  min-width: 0;
+}
+
+#tos-partial .tos {
+  height: 36em;
+  overflow: auto;
+}
+
+/*3. ZONE: SYSTEM: DOCS
+For practicality, /home .docs have been given the .userstuff class as well, to save doubling up that sheet or confusing end users. We will just cope with the inconsistency.*/
+
+.docs .userstuff ul, .docs .userstuff ol {
+  margin: 0.643em auto;
+  padding: 0;
+}
+
+.docs .userstuff li {
+  padding: 0 1.5em;
+}
+
+.docs .userstuff .toc li {
+  list-style-type: upper-roman;
+}
+
+.docs .userstuff .toc {
+  margin: 3.215em auto;
+}
+
+/*4. ZONE: SYSTEM: ADMIN COMMS
+admin comms, user facing, are a type of Home Zone, look in zone-home.css
+admin zone, admin facing, has no special rules atm
+admin role is only admin facing, and changes normal views in role-admin.css*/
+
+/*5. ZONE: SYSTEM: SUPPORT*/
+
+.feedbacks h3 {
+  clear: right;
+  padding-top: 1.929em;
+}
+
+.feedbacks form {
+  margin-top: 1.929em;
+}
+
+.feedbacks form .notice {
+  margin: 0.643em;
+}
+
+/* 6. ZONE: SYSTEM: FAQS
+For practicality, /archive_faqs are also .docs and .support and have the .userstuff class on category pages */
+
+.faq .categories {
+  margin: 0 auto;
+  max-width: 72em;
+  float: none;
+}
+
+.faq .categories h3 {
+  border-bottom: 0.25em double #333;
+  margin-top: 1.929em;
+}
+
+.faq .categories li {
+  padding: 0;
+}
+
+.faq .categories .questions li, .faq .userstuff .toc li {
+  list-style-type: circle;
+}
+
+.faq .categories .userstuff {
+  clear: both;
+}
+
+.faq .screencast .label {
+  font-weight: 700;
+}
+
+.faq .userstuff .notice, .faq .userstuff .caution, .faq .example, .guideline .userstuff .notice, .guideline .userstuff .caution, .guideline .example  {
+  margin: 0.643em 3.858em;
+  padding: 0.643em;
+}
+
+.faq .example, .guideline .example {
+  border: 1px solid #c2d2df;
+}
+
+/* 7. ZONE: SYSTEM: TOS POPUP */
+
+#tos_prompt {
+  background: #ebfff5;
+  margin: 0;
+  min-height: 100vh;
+  /* put it on top of the other content so it fades in nicely */
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 999
+}
+
+#tos_prompt .heading {
+  background: #ff7ab8;
+  color: #ebfff5;
+  display: block;
+  margin: 0;
+  padding: 0.125em 0;
+}
+
+#tos_prompt .heading span {
+  display: block;
+	margin: auto;
+  width: 40rem;
+  max-width: 80%;
+}
+
+#tos_prompt .agreement {
+  margin: auto;
+  overflow: hidden;
+  width: 40rem;
+	max-width: 80%;
+}
+
+#tos_prompt .summary {
+  margin: 2em 0 0.643em 0;
+  line-height: 1.4;
+}
+
+#tos_prompt .confirmation {
+  margin: 2em 0 1em;
+}
+
+#tos_prompt p.submit {
+	margin-bottom: 2em;
+}
+
+#tos_prompt .submit input, #tos_prompt .submit button {
+  white-space: normal;
+  height: 100%;
+}
+
+#tos_prompt [disabled] {
+  background: #ccc;
+    box-shadow: none;
+}
+
+/* 8. ZONE: SYSTEM: PROXY NOTICE */
+#proxy-notice {
+  background: #efd1d1;
+  border-bottom: 1px solid #ff7ab8;
+  font-size: 0.875em;
+}
+
+#proxy-notice .userstuff {
+  padding: 0.643em 0.875em;
+}
+
+#proxy-notice .submit {
+  margin-bottom: 0;
+}
+/*==ZONE: HOME
+user home, collections and challenges home, tag home, admin comms home
+--this zone always shows a dashboard styled in region-dashboard and its parent is #main.dashboard */
+
+.home p, .home .header {
+  clear: right;
+}
+
+.home .header h2 {
+  text-align: right;
+  border-bottom: 2px solid;
+  display: block;
+  margin-left: 100px;
+}
+
+.home .header .userstuff, .home .header dl.stats, .home .header .type {
+  clear: right;
+  margin-left: 120px;
+}
+
+.home .header ul.actions {
+  margin-bottom: 0.643em;
+  padding-top: 0;
+}
+
+.admin .header h3 {
+  font-size: 2.143em;
+  text-align: center;
+}
+
+.home .primary {
+  margin: 0 0 0.643em;
+  min-height: 100px;
+}
+
+/*primary header icons */
+
+.primary .icon {
+  position: absolute;
+  top: 0;
+}
+
+.skins .primary .icon {
+  background: url("/images/imageset.png") 0px -175px;
+}
+
+.admin .primary .icon {
+  background: url("/images/imageset.png") 100px -75px;
+}
+
+.tag .primary .icon, .tagset .primary .icon {
+  background: url("/images/imageset.png") 0px -275px;
+}
+
+.wrangler .primary .icon {
+  background: none;
+}
+
+/*contexts*/
+
+.profile .primary {
+  float: none;
+}
+
+/*(no filters)*/
+
+.dashboard.collections-index .index {
+  width: 100%;
+}
+
+.dashboard.works-index h4.landmark, .dashboard.works-index ol.pagination {
+	float: left;
+	width: 100%;
+}
+
+#dynamic-bookmark + h4.landmark {
+  clear: both;
+}
+
+/*(with filters)*/
+
+/* wrap long text in Firefox (applied to inbox only to avoid weirdness on all forms in IE) */
+form.inbox {
+  overflow-x: auto;
+  width: 75%;
+}
+
+form.inbox fieldset {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.dashboard form.filters + h4.landmark {
+  clear: left;
+}
+
+/*END== *//*==ZONE: SEARCH/BROWSE (currently header linked index pages)
+The search and browse zone is in development and has no parent class yet
+Arguably filter and search could be styled in interactions but I've put them here in case we change those page areas a lot
+.search and .browse may turn out to be separate but interrelated */
+
+/* INDEX PAGES (with filters)*/
+
+.filtered .index {
+  width: 75%;
+  float: left;
+}
+
+.people-index ol + div.pagination, .index + h4.landmark {
+  clear: both;
+}
+
+.media-index .listbox {
+  min-height: 17.5em;
+}
+
+/* INTERACTION: SEARCH */
+
+form.search input[type="text"] {
+  border-top-color: #999;
+  padding: 0.15em 0.25em;
+    border-radius: 1em;
+}
+
+.search p, li.search form p {
+  position: relative;
+}
+
+.search [role="tooltip"] {
+  background:#ff7ab8;
+  border: 1px solid #ebfff5;
+  padding: 0.15em;
+  position: absolute;
+  left: -999em;
+  font-size: 0.75em;
+  z-index: 1;
+}
+
+.search input:focus + [role="tooltip"] {
+  left: 1em;
+  right: 1em;
+  top: 2.75em;
+}
+
+li.search fieldset {
+  margin: auto;
+  padding: 0.15em;
+  font-size: 87.5%;
+  overflow: visible;
+  width: auto;
+}
+
+.search .tags dd.submit {
+  margin: -3em 0.643em 0;
+}
+
+/* INTERACTION: FILTER */
+
+form.filters {
+  width: 23%;
+  float: right;
+}
+
+.filters h4 {
+  display: inline;
+  font-weight: 700;
+}
+
+.filters dl, .filters dt {
+  padding: 0;
+}
+
+.filters dt, .filters dd, .filters input[type="submit"], .filters .expander {
+  width: 100%;
+}
+
+.filters input + label {
+  padding-left: 0;
+}
+
+.filters dl dl {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  background: none;
+    box-shadow: none;
+}
+
+.filters .submit, .filters .group {
+  margin: 0;
+  padding: 0;
+}
+
+.filters .submit input {
+  height: 100%;
+  margin: 1em 0;
+  min-height: 1.286em;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+  white-space: normal;
+}
+
+.filters dt.heading {
+  margin-top: 1.929em;
+}
+
+.filters .expander {
+  background: url("/images/arrow-right.gif") left center no-repeat;
+  border: none;
+  color: #2a2a2a;
+  height: 100%;
+  min-height: 1.786em; /* default button height plus 0.25 vertical padding */
+  outline: none;
+  padding: 0.25em 0 0.25em 14px;
+  text-align: left;
+  white-space: normal;
+    border-radius: 0;
+    box-sizing: border-box;
+}
+
+.filters .expander:focus {
+  outline: 1px dotted;
+}
+
+.filters .expanded .expander {
+  background-image: url("/images/arrow-down.gif");
+}
+
+.filters .expandable, .filters .group dd.autocomplete {
+  margin: 0;
+}
+
+.filters .group dt.search, .filters .range dt {
+  border-bottom: none;
+  padding: 0.25em 0;
+}
+
+.filters .group dt.bookmarker {
+  border-top: 1px solid #f3efec;
+  margin-top: 0.643em;
+  padding-top: 0.643em;
+}
+
+.filters .more dd.search, .filters .more dt.search, .filters .range dd {
+  margin-top: 0;
+}
+
+.filters .warning {
+  font-weight: 500;
+}
+
+.filters .collapsed:after, .filters .expanded:after {
+  content: none;
+}
+
+.filters .sort + .heading {
+  margin-top: 1.286em; /* heading top margin minus sort bottom margin */
+}
+
+.filters [type="checkbox"], .filters [type="radio"] {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  left: auto; /* fix for VoiceOver outline position in iOS 10.3.1 */
+}
+
+/* AO3-5370: Style changes to fix a bug unique to Safari 9. Hack courtesy of
+https://browserstrangeness.github.io/css_hacks.html */
+@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
+  .filters [type="checkbox"], .filters [type="radio"] {
+    left: -2em;
+    position: relative;
+  }
+}
+
+.filters .indicator:before {
+  background: #eee;
+  color: #aaa;
+  display: inline-block;
+  border: 1px solid;
+  margin-right: 0.25em;
+  text-align: center;
+    background-image: -moz-linear-gradient(top, #ebfff5 2%,#ff7ab8 95%, #bbb 100%);
+    background-image: -webkit-linear-gradient(top, #ebfff5 2%,#ff7ab8 95%, #bbb 100%);
+    background-image: linear-gradient(#ebfff5 2%,#ff7ab8 95%, #bbb 100%);
+}
+
+.filters input:focus + .indicator + span {
+  outline: 1px dotted;
+}
+
+.filters input:checked + .indicator:before {
+  border-color: #2a2a2a;
+}
+
+.filters input:checked + .indicator + span {
+  font-weight: 700;
+}
+
+.filters [type="checkbox"] + .indicator:before {
+  content: " \2713";
+  padding: 0 0.25em;
+    border-radius: 0.25em;
+}
+
+.filters [type="checkbox"]:checked + .indicator:before {
+  background: #deffde;
+  color: #008000;
+    background-image: -moz-linear-gradient(top, #ebfff5 2%, #d1f0d1 95%, #b3ccb3 100%);
+    background-image: -webkit-linear-gradient(top, #ebfff5 2%, #d1f0d1 95%, #b3ccb3 100%);
+    background-image: linear-gradient(#ebfff5 2%, #d1f0d1 95%, #b3ccb3 100%);
+}
+
+.filters [type="radio"] + .indicator:before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+    border-radius: 1em;
+}
+
+.filters [type="radio"]:checked + .indicator:before {
+  background: #ebfff5;
+    background-image: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 11%, rgba(0, 0, 0, 0) 23%),
+                      -moz-linear-gradient(top, #bbb 0%,#ff7ab8 5%, #ebfff5 100%);
+    background-image: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 11%, rgba(0, 0, 0, 0) 23%),
+                      -webkit-linear-gradient(top, #bbb 0%,#ff7ab8 5%, #ebfff5 100%);
+    background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 11%, rgba(0, 0, 0, 0) 23%),
+                      linear-gradient(to bottom, #bbb 0%,#ff7ab8 5%, #ebfff5 100%);
+}
+
+.filters .exclude [type="checkbox"] + .indicator:before {
+  content: " \2715";
+}
+
+.filters .exclude [type="checkbox"]:checked + .indicator:before {
+  background: #fedede;
+  color: #f00;
+    background-image: -moz-linear-gradient(top, #ebfff5 2%, #efd1d1 95%, #d8bebe 100%);
+    background-image: -webkit-linear-gradient(top, #ebfff5 2%, #efd1d1 95%, #d8bebe 100%);
+    background-image: linear-gradient(#ebfff5 2%, #efd1d1 95%, #d8bebe 100%);
+}
+
+/*END== */
+/*==ZONE: TAGS, TAGSETS, and TAG WRANGLING
+tag wrangling is a type of Home Zone
+individual tags are shown in many contexts across the site and are styled in types-groups.css
+tags also have various states in roles-states.css (arguably a nomination is an embyronic tag)/
+
+/*TAGS SHOW */
+
+ul.tree, ul.tree li {
+  display: block;
+}
+
+.tag_wranglers-index #tag_wranglers {
+  width: 75%;
+  float: left;
+}
+
+/*TAGSETS
+tagsets are new and homeless; they don't really fit into the site pattern yet
+so they might change their pattern a lot before 1.0*/
+
+/*reviewing nominations*/
+
+dl.nomination {
+  border: 0;
+  margin: 0;
+  padding: 0;
+    box-shadow: none;
+}
+
+.nomination dt, .nomination dd {
+  float: none;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  width: auto;
+}
+
+.nomination dt {
+  background: #ebfff5;
+  width: 50%;
+}
+
+.nomination dd.autocomplete ul, .nomination dd.autocomplete li {
+  margin-bottom: -0.375em;
+}
+
+dd.autocomplete li.input {
+  margin: 0;
+  padding: 0;
+}
+
+/*END== */
+/*==ZONE: TRANSLATION
+The translation zone is in development 01/09/11.
+It may follow the "home" (user home, tag home, collection home) pattern
+or it may have no views and be entirely inline
+or summat
+in which cases this zone will be uneccessary and can be removed. */
+
+/*END== */
+ /* ==USERSTUFF: displaying content inputted by a user into a textarea.*/
+
+.userstuff {
+    word-wrap: break-word;
+}
+
+.userstuff p {
+  margin: 1.286em auto;
+  padding: 0;
+  line-height: 1.5;
+}
+
+/*lists */
+
+.userstuff dl {
+  margin: 1.5em 0;
+  border: 0;
+}
+
+.userstuff dl dl {
+  width: 90%;
+  margin: auto;
+}
+
+.userstuff dt {
+  display: block;
+  font-weight: bold;
+}
+
+.userstuff dd {
+  display: block;
+  line-height: 1.5;
+  margin: 1.25em auto 1.25em 3em;
+}
+
+.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.75em 0 0.75em 1.75em;
+}
+
+.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;
+}
+
+/* headings */
+
+.userstuff h1 {
+  text-align: center;
+}
+
+.userstuff h2 {
+  color: #333;
+  margin: 1.5em 0;
+  display: block;
+}
+
+.userstuff h3 {
+  font-weight: 500;
+  padding: 0.125em;
+  border-bottom: 0.25em double #333;
+}
+
+.userstuff h4 {
+  font-weight: 700;
+}
+
+.userstuff h5 {
+  font-weight: 600;
+  font-size: 1em;
+}
+
+.userstuff h6 {
+  font-size: 0.975em;
+  border-bottom: 1px solid;
+}
+
+.userstuff h3 a, .userstuff h3 a:link, .userstuff h3 a:visited {
+  font-weight: 500;
+  border-bottom: 0;
+  text-decoration: none;
+}
+
+/*tables */
+
+.userstuff caption {
+  font-size: 1em;
+  height: auto;
+  opacity: 1.0;
+  width: auto;
+}
+
+.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 {
+  background: transparent;
+  border: none;
+}
+
+/* quotes and stresses */
+
+.userstuff blockquote {
+  margin-inline-start: 1.5em;
+  padding: 0.75em;
+  border-inline-start: 2px solid #999;
+}
+
+.userstuff blockquote blockquote {
+  padding: 0.25em;
+  border: 0;
+}
+
+.userstuff hr {
+  width: 33%;
+  margin: 0.875em auto 1.2525em auto;
+  border: 1px solid;
+}
+
+/* media */
+
+.userstuff video {
+  max-width: 100%;
+}
+
+/*expected behaviours, exceptioning*/
+
+/* WORK MARGINS */
+
+#workskin {
+  font-size: 1.08em;
+  margin: auto;
+  padding: 0 0.25em;
+  max-width: 72em;
+  overflow-x: auto;
+  overflow-y: hidden;
+  position: relative;
+}
+
+#workskin .module {
+  float: none;
+}
+
+/* contexts */
+
+.bookmark .user .userstuff {
+	line-height: 1.5;
+}
+
+.bookmark .user .userstuff blockquote {
+	margin-bottom: 1.286em;
+}
+
+.news .userstuff img {
+  max-width: 100%;
+}
+
+/*END== */
+/* ==SYSTEM MESSAGES
+System messages use the following colours:
+* notice => blue: success, messages, additional information, no action needed, can proceed
+* caution => yellow: user may wish to change their mind, action optional, can proceed
+* error => red: mistake, go back and fix this problem, action needed before you can proceed
+*/
+
+.important {
+  font-weight: 900;
+}
+
+/* We don't generally chain class selectors, but Devise's non-customizable alert class conflicts with ours, making it necessary here */
+.required, .error, .alert.flash {
+  color: #ff7ab8;
+}
+
+.footnote {
+  font-size: 0.75em;
+  float: right;
+}
+
+.datetime {
+  font-family: monospace;
+}
+
+div.error {
+  margin: 0.643em auto;
+  padding: 0.25em 0.375em;
+    border-radius: 0.25em;
+}
+
+.notice, .comment_notice, ul.notes, .caution, .error, .comment_error, .alert.flash {
+  background: #d1e1ef;
+  border: 1px solid #c2d2df;
+  margin: 0.643em auto;
+  padding: 0.25em 0.375em;
+  clear: right;
+    box-shadow: inset 1px 1px 2px;
+    border-radius: 0.25em;
+}
+
+.caution {
+  background: #ffe34e;
+  color: #000;
+  border-color: #d89e36;
+}
+
+.error, .comment_error, .alert.flash {
+  background: #efd1d1;
+  border-color: #b8860b;
+    box-shadow: 1px 1px 2px;
+}
+
+.notes {
+  clear: right;
+}
+
+form .notice, form ul.notes {
+    box-shadow: 0px 0 3px #ebfff5;
+}
+
+ul.notes, .error ul, .alert.flash ul {
+  position: static;
+  margin: auto 0.643em;
+  padding: 0.25em 2.5em;
+}
+
+ul.notes li, .error ul li, .alert.flash ul li {
+  list-style-type: disc;
+  padding-left: 1.5em;
+}
+
+span.error {
+  display: block;
+}
+
+/* contexts */
+
+.actions + .footnote {
+ clear: both;
+}
+
+/* ADMIN ANNOUNCEMENT BANNERS
+Set by an admin, these banners appear on every page until the user dismisses them or the admin deletes it
+default (no additional class) => blue like other notice messages
+event => red gradient with white text for fundraising, celebrations, other happy Org events
+alert => yellow-orange to alert users of problems or planned downtime
+*/
+
+.announcement {
+  clear: both;
+  position: relative;
+}
+
+.announcement .userstuff {
+  background: #d1e1ef;
+  border: 1px solid #c2d2df;
+  color: #333;
+  margin: 0 2em;
+  padding: 0.375em 0.75em;
+  text-align: left;
+}
+
+.announcement .userstuff p {
+  margin: 0.375em auto;
+}
+
+.announcement p.submit {
+  bottom: -0.25em;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 1em;
+}
+
+.announcement input[type="submit"], .announcement .action {
+  background: #ebfff5 none;
+  border: 1px solid #bbb;
+  font-size: 0.875em;
+  padding: 0.25em 0.5em;
+    border-radius: 2em;
+}
+
+.announcement h1, .announcement h2, .announcement h3, .announcement h4, .announcement h5, .announcement h6 {
+  border: none;
+  color: inherit;
+  margin: 0;
+  text-align: center;
+    text-shadow: none;
+}
+
+.event .userstuff {
+  background: #700;
+  border-color: #600;
+  color: #ebfff5;
+    background-image: -moz-linear-gradient(top, #700 0%, #a00 100%);
+    background-image: -webkit-linear-gradient(top, #700 0%, #a00 100%);
+    background-image: -o-linear-gradient(top, #700 0%, #a00 100%);
+    background-image: linear-gradient(to bottom, #700 0%, #a00 100%);
+}
+
+.event .userstuff a {
+  color: #eee;
+}
+
+.alert .userstuff {
+  background: #fece3f;
+  border-color: #edb202;
+  color: #333;
+}
+
+/* thermometer JavaScript widget for fundraising drives
+progress indicator colors are set in application.js */
+
+.announcement .thermometer-content {
+  height: 2.6em;
+  margin: auto;
+  width: 50%;
+}
+
+.announcement .thermometer {
+  position: relative;
+}
+
+.announcement .thermometer .track {
+  background: #ebfff5;
+  border: 1px solid #aaa;
+  height: 1.25em;
+  margin: 0 auto;
+  position: relative;
+    background-image: linear-gradient(to bottom, #ebfff5 0%, #f3f3f3 50%, #ededed 51%, #ebfff5 100%);
+}
+
+.announcement .thermometer .progress {
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+}
+
+.announcement .thermometer .goal {
+  position: absolute;
+  right: 0;
+}
+
+.announcement .thermometer .amount {
+  font-weight: 700;
+  line-height: 1.25em;
+  position: absolute;
+}
+
+.announcement .thermometer .goal .amount {
+  left: 0;
+  padding-left: 0.25em;
+  top: 0;
+}
+
+.announcement .thermometer .progress .amount {
+  top: 1.35em;
+  right: 0;
+}
+
+/* SYMBOLS (mostly help button, arguably an action but hey ho);
+IN REVIEW: this block is very old (2008), a bit wonky and has an unexpected effect on blurb that needs detangling so it might change a lot*/
+
+span.symbol {
+  color: #2a547c;
+  font-family: Georgia, serif;
+  border: 1px solid;
+  vertical-align: super;
+    border-radius: 0.75em;
+}
+
+span.symbol span {
+  padding: 0.425em;
+}
+
+.symbols a, .symbol a {
+  text-decoration: none;
+  border: none;
+}
+
+.question a:hover {
+  background: #2a547c;
+  border-color: #d1e1ef;
+  color: #ebfff5;
+  cursor: help;
+}
+
+span.question {
+  background: #d1e1ef;
+  border-color: #2a547c;
+    box-shadow: -1px -1px 2px rgba(0,0,0,0.25);
+}
+
+a.question {
+  border: 0;
+  font-weight: bold;
+}
+
+.heading a.question {
+  font-size: 0.75em;
+}
+
+/*SYMBOLS KEY (help content) */
+
+dl#symbols-key dt {
+  width: 100px;
+}
+
+dl#symbols-key dd {
+  margin: -55px auto auto 100px;
+}
+
+#symbols-key dl {
+  border: 1px solid#ff7ab8;
+  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;
+}
+
+
diff --git a/profile.html b/profile.html
new file mode 100644
index 0000000..d663362
--- /dev/null
+++ b/profile.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The web site of viverrid</title>
+    <!-- The style.css file allows you to change the look of your web pages.
+         If you include the next line in all your web pages, they will all share the same look.
+         This makes it easier to make new pages for your site. -->
+        <link href="/works.css" rel="stylesheet" type="text/css" media="all">
+
+  </head>
+  <body>
+      <body class="logged-in" >
+    <div id="outer" class="wrapper">
+      <ul id="skiplinks"><li><a href="#main">Main Content</a></li></ul>
+      <!-- BEGIN BETA CAVEATS! -->
+<noscript>
+  <p id="javascript-warning">
+    While we&#39;ve done our best to make the core functionality of this site accessible without javascript, it will work better with it enabled. Please consider turning it on!
+  </p>
+</noscript>
+<!-- END BETA CAVEATS! -->
+
+<!-- BEGIN header -->
+
+<div id="header" class="region">
+
+  <h1 class="heading">
+    <a href="/fics/profile"><span>Archive</span></a>
+  </h1>
+
+    <div id="greeting">
+    <h3 class="landmark heading">User Navigation</h3>
+    <ul class="user navigation actions" role="navigation">
+      <li class="dropdown">
+        <a href="/fics/profile">Hi, username!</a>
+        <ul class="menu" role="menu">
+          <li><a href="/fics/profile">My Dashboard</a></li>
+            <li><a href="/fics/profile">My Works</a></li>
+            <li><a href="/fics/profile">My Collections</a></li>
+            <li><a href="/fics/profile">My History</a></li>
+          <li><a href="/fics/profile">My Preferences</a></li>
+        </ul>
+      </li>
+      <li class="dropdown">
+      	<a href="/fics/profile">Post</a>
+      	<ul class="menu" role="menu">
+          <li><a href="/fics/profile">New Work</a></li>
+          <li><a href="/fics/profile">Import Work</a></li>
+      	</ul>
+      </li>
+      <li><a rel="nofollow" data-method="delete" href="/fics/profile">Log Out</a></li>
+    </ul>
+
+  <p class="icon"><img src="/"></p>
+</div>
+
+
+  <h3 class="landmark heading">Site Navigation</h3>
+  <ul class="primary navigation actions" role="navigation">
+    <li class="dropdown">
+      <a href="/fics/profile">Fandoms</a>
+      <ul class="menu" role="menu">
+  <li><a href="/fics/profile">All Fandoms</a></li>
+  <!-- repeat each <li> as many times as needed -->
+         <li><a href="/fics/profile">Fandom 1</a></li>
+</ul>
+
+    </li>
+ 
+
+    <li class="dropdown">
+      <a href="/fics/profile">About</a>
+      <ul class="menu" role="menu">
+  <li><a href="/fics/profile">About Us</a></li>
+
+</ul>
+
+    </li>
+
+
+    </li>
+	  <li class="search"><form class="search" id="search" action="/profile/search" accept-charset="UTF-8" method="get">
+  <fieldset>
+    <legend>Search Works</legend>
+    <p>
+      <label class="landmark" for="site_search">Work Search:</label>
+      <input class="text" id="site_search" aria-describedby="site_search_tooltip" type="text" name="work_search[query]" />
+      <span class="tip" role="tooltip" id="site_search_tooltip">tip: morden/anna (mature OR explicit)</span>
+      <span class="submit actions"><input type="submit" value="Search" class="button" /></span>
+    </p>
+  </fieldset>
+</form></li>
+  </ul>
+
+
+
+  <div class="clear"></div>
+
+</div>
+
+
+
+<!-- END header -->
+
+      <div id="inner" class="wrapper">
+        <!-- BEGIN sidebar -->
+          <div id="dashboard" class="region own" role="navigation region">
+<h4 class="landmark heading">Choices</h4>
+<ul class="navigation actions">
+  <li><span class="current">Dashboard</span></li>
+  <li><a href="/fics/profile">Profile</a></li>
+
+    <li><a href="/fics/profile">Preferences</a></li>
+    <li><a href="/fics/profile">Skins</a></li>
+</ul>
+
+
+<h4 class="landmark heading">Pitch</h4>
+<ul class="navigation actions">
+	<li><a href="/fics/profile">Works (3)</a></li>
+</ul>
+
+  <h4 class="landmark heading">Catch</h4>
+  <ul class="navigation actions">
+	  <li><a href="/fics/profile">Inbox (0)</a></li>
+  </ul>
+
+<h4 class="landmark heading">Switch</h4>
+<ul class="navigation actions">
+  <li><a href="/fics/profile">Gifts (0)</a></li>
+</ul>
+
+</div>
+
+        <!-- END sidebar -->
+
+        <!-- BEGIN main -->
+        <div id="main" class="users-show dashboard region" role="main">
+
+          <div class="flash"></div>
+
+<div class="user home">
+  <!--Descriptive page name, messages and instructions-->
+<div class="primary header module">
+  <h2 class="heading">
+    viverrid
+  </h2>
+  <p class="icon"><a href="/fics/profile"><img src="/"></a></p>
+<!--/descriptions-->
+
+  <!--subnav-->
+  <ul class="navigation actions" role="navigation">
+    <li><a href="">Post New</a></li>
+    <li><a href="">Edit Works</a></li>
+    <li>
+      <form class="ajax-create-destroy" id="new_subscription" data-create-value="Subscribe" data-destroy-value="Unsubscribe" action="/users/viverrid/subscriptions" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="ng/40Rq8zf5Va0F1vfCcsBx5wS+gPIiMT3GDtqCSPkr/shbUEYiuAZa/Pj3remBYfydGufGMJ3hUMsEoUsbXbg==" autocomplete="off" />
+  <input autocomplete="off" type="hidden" value="16656" name="subscription[subscribable_id]" id="subscription_subscribable_id" />
+  <input autocomplete="off" type="hidden" value="User" name="subscription[subscribable_type]" id="subscription_subscribable_type" />
+  <input type="submit" name="commit" value="Subscribe" />
+</form>
+    </li>
+    <li><a href="">Invitations</a></li>
+</ul>
+
+  <!--/subnav-->
+
+</div>
+
+  <!--main content-->
+<!-- expects @fandoms, @works, @series, @bookmarks -->
+
+  <div class="work listbox group" id="user-works">
+    <h3 class="heading">Recent works</h3>
+    <ul class="index group">
+      <li id="work_56063" class="own work blurb group work-56063 user-16656" role="article">
+
+
+  <!--title, author, fandom-->
+  <div class="header module">
+
+    <h4 class="heading">
+      <a href="/fics/givingtree">bla blah blah blah</a>
+      by
+
+      <!-- do not cache -->
+      <a rel="author" href="">author</a>
+
+
+
+
+
+    </h4>
+
+    <h5 class="fandoms heading">
+      <span class="landmark">Fandoms:</span>
+      <a class="tag" href="/fics/fandoms/dp">Fandom</a>
+      &nbsp;
+    </h5>
+
+    <!--required tags-->
+
+    <p class="datetime">06 July 2023</p>
+  </div>
+
+  <!--warnings again, cast, freeform tags-->
+  <h6 class="landmark heading">Tags</h6>
+  <ul class="tags commas">
+    <li class='warnings'><strong><a class="tag" href="works">Other</a></strong></li><li class='relationships'><a class="tag" href="/xyz">Bert/Ernie</a></li><li class='characters'><a class="tag" href="/xyz">Bert</a></li> <li class='characters'><a class="tag" href="/xyz">Ernie</a></li>
+  </ul>
+
+  <!--summary-->
+    <h6 class="landmark heading">Summary</h6>
+    <blockquote class="userstuff summary">
+description  </blockquote>
+
+
+  <!--stats-->
+
+  <dl class="stats">
+      <dt class="language">Language:</dt>
+      <dd class="language" lang="en">English</dd>
+    <dt class="words">Words:</dt>
+    <dd class="words">225</dd>
+    <dt class="chapters">Chapters:</dt>
+    <dd class="chapters">1/1</dd>
+
+
+
+
+    <dt class="kudos">Kudos:</dt>
+    <dd class="kudos"><a href="/fics/profile">0</a></dd>
+
+
+  <dt class="hits">Hits:</dt>
+  <dd class="hits">0</dd>
+
+  </dl>
+
+
+    <h6 class="landmark heading">Author Actions</h6>
+  	<ul class="actions" role="navigation">
+      <li><a href="/fics/profile">Edit</a></li>
+  	  <li><a href="/profile/">Edit Tags</a></li>
+    </ul>
+</li>
+<!--each new work begins here, copy and paste as many times as needed -->
+<li id="work_56014" class="own work blurb group work-56014 user-16656" role="article">
+
+
+  <!--title, author, fandom-->
+  <div class="header module">
+
+    <h4 class="heading">
+      <a href="/fics/tenfeetdown">title
+</a>
+      by
+
+      <!-- do not cache -->
+      <a rel="author" href="/fics/profile">author</a>
+
+
+
+
+
+    </h4>
+
+    <h5 class="fandoms heading">
+      <span class="landmark">Fandoms:</span>
+      <a class="tag" href="/fics/fandoms/b5">Fandommm</a>
+      &nbsp;
+    </h5>
+
+    <p class="datetime">16 July 2023</p>
+  </div>
+
+  <!--warnings again, cast, freeform tags-->
+  <h6 class="landmark heading">Tags</h6>
+  <ul class="tags commas">
+    <li class='warnings'><strong><a class="tag" href="/profile">General</a></strong></li><li class='relationships'><a class="tag" href="/xyz">Draculaura/Clawdeen Wolf</a></li> <li class='characters'><a class="tag" href="/fics/characters/morden">Draculaura</a></a></li> <li class='characters'><a class="tag" href="/fics/characters/annasheridan">Clawdeen Wolf</a></li>
+  </ul>
+
+  <!--summary-->
+    <h6 class="landmark heading">Summary</h6>
+    <blockquote class="userstuff summary">
+lesbianism
+    </blockquote>
+
+
+  <!--stats-->
+
+  <dl class="stats">
+      <dt class="language">Language:</dt>
+      <dd class="language" lang="en">English</dd>
+    <dt class="words">Words:</dt>
+    <dd class="words">1,668</dd>
+    <dt class="chapters">Chapters:</dt>
+    <dd class="chapters">1/1</dd>
+
+
+
+
+    <dt class="kudos">Kudos:</dt>
+    <dd class="kudos"><a href="/profile">0</a></dd>
+
+
+  <dt class="hits">Hits:</dt>
+  <dd class="hits">0</dd>
+
+  </dl>
+
+
+    <h6 class="landmark heading">Author Actions</h6>
+  	<ul class="actions" role="navigation">
+      <li><a href="/profile/">Edit</a></li>
+  	  <li><a href="/profile">Edit Tags</a></li>
+    </ul>
+</li>
+<!-- end of work -->
+
+
+          <div class="clear"><!--presentational--></div>
+        </div>
+        <!-- END main -->
+      </div>
+      <!-- BEGIN footer -->
+<div id="footer" role="contentinfo" class="region">
+	<h3 class="landmark heading">Footer</h3>
+  <ul class="navigation actions" role="navigation">
+          <li class="module group">
+            <h4 class="heading">Customize</h4>
+            <ul class="menu">
+              <li><a href="/skins/unset">Default</a></li>
+
+            </ul>
+          </li>
+    <li class="module group">
+      <h4 class="heading">About the Archive</h4>
+      <ul class="menu">
+        <li><a href="/site_map">Site Map</a></li>
+        <li><a href="/diversity">Diversity Statement</a></li>
+        <li><a href="/tos">Terms of Service</a></li>
+        <li><a href="/dmca">DMCA Policy</a> </li>
+      </ul>
+    </li>
+    <li class="module group">
+      <h4 class="heading">Contact Us</h4>
+      <ul class="menu">
+        <li><a href="/abuse_reports/new">Policy Questions &amp; Abuse Reports</a></li>
+        <li><a href="/support">Technical Support &amp; Feedback</a></li>
+      </ul>
+    </li>
+    <li class="module group">
+      <h4 class="heading">Development</h4>
+      <ul class="menu">
+        <li>Original code released via the inspect element tool.</li>
+	<li><b>Please remember example archive is not affiliated with AO3 or the OTW.</b></li>
+
+      </ul>
+    </li>
+  </ul>
+</div>
+<!-- END footer -->
+
+    </div>
+    
+
+  </body>
+ 
+</html>
+