body {
  background: #96a8c8;
  margin: 0;
  text-align: center;
}

a {
  text-decoration: none;
}

div.main {
  background:#ffffff;
  border:1px solid #000000;
  margin-bottom:70px;
  margin-top:50px;
  width:766px;
  margin-right: auto;
  margin-left: auto;
  padding: 7px 7px 30px 7px;
}

h1 {
  font-size: 1.2em;
  font-variant:small-caps;
  font-family:Lucida,sans-serif;
  font-weight:800;
  margin-bottom:15px;
  margin-top:15px;
}

h2 {
  font-size: 0.8em;
  font-family:Lucida,sans-serif;
  font-weight:800;
}

/* Header Links */

ul.lnk {
  margin: auto;
  padding: 0px;
  list-style-type: none;
  width:560px;
}

ul.lnk li {
  display: block;
  width: 75px;
  float: left;
}

ul.lnk li a {
  color:black;
  text-decoration:underline;
  font-size:1.3em;
  font-variant:small-caps;
  font-family:Lucida,sans-serif;
  font-weight:800;
  text-transform:capitalize;
  white-space:nowrap;
}

/* Comics List (numbers) */

ul.list {
  list-style: none;
  padding: 0;
  margin-top: 2em;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  width: 40em;
  text-align: center;
}

li.real, li.fake, li.invisible {
  display: block;
  float: left;
  width: 3em;
  height: 1.7em;
  margin: 0.1em;
  line-height: 1.7em;
}

li.fake, li.fake a {
  color: #D0D0D0;
}
  
li.real a {
  color:#96A8C8;
  font-weight:bold;
}

li.invisible a {
  color:  #962020;
  font-weight:bold;
}

/* Comics Nav */

ul.nav {
  padding: 0;
  margin: 1em 0 1em 0;
  list-style-type:none;
  width:400px;
  text-align: center;
  height: 1.4em;
}

ul.nav li{
  display:block;
  float: left;
}

ul.nav li a{
  display: block;
  margin: 0px 4px 0px 4px;
  width:70px;
  height: 1.4em;
  border:1px solid black;
  background-color:#6E7B91;	
  color:#FFF;
  font-size:16px;
  font-variant:small-caps;	
  font-family:Lucida, sans-serif;
  font-weight:600;
}

ul.nav li a:hover{
	background-color:#FFF;
	color:#6E7B91;
}

/* Comics */

div.comics_text {
  margin-top: 1em;
  margin-bottom: 1em;
}

div.comment {
  border-top: 1px solid gray;
  padding-top: 15px;
  text-align: left;
  width: 60%;
}

div.comics_text a, div.comment a {
  text-decoration: underline;
}



/* Utility */

div.clearer {
  clear: left;
  height: 1px;
  line-height: 0;
}

/* Unpublished Comics */

ul.unpublished_list li, ul.transcriptions li {
  list-style: none;
  width: 30em;
  text-align: left;
  line-height: 50px;
}

ul.unpublished_list li img, ul.transcriptions li img {
  vertical-align: middle;
}

ul.unpublished_list li a, ul.transcriptions li a {
  color: black;
}

h2.unpublished {
  color: #962020;
}

img.thumb {
  padding: 1px;
}

img.invisible {
  border: 1px dashed #962020;
}

div.sys {
  background-color: white;
  border-bottom: 1px solid black;
  text-align: center;
  font-family: monospace;
  font-size:16px;
  color: #000000;
}

div.sys ul {
  margin: auto;
  padding: 0px;
  list-style-type: none;
  text-align: center;
}

div.sys ul li {
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}

div.sys a {
  color: black;
}

div.code {
  width: 40em;
  border: solid 1px black;
  font-family: monospace;
  margin: 10px;
  padding: 5px;
  text-align: left;
}

.me {
  font-weight:bold;
}

div.buttons {
  margin: 10px;
}

div.buttons form {
  display: inline;
}

form table {
  width: 90%;
  text-align: left;
  border-collapse: collapse;
}

form.inline {
  display: inline;
}

form.login table {
  width: auto;
}

form.login th, form.login td {
  border: none;
}

form table th {
  vertical-align: top;
}

form table th {
  border: 1px solid #CCC;
  border-right: 0;
  padding: 5px;
  font-size: 0.8em;
  width: 10em;
  font-weight: normal;
}

form table td {
  border: 1px solid #CCC;
  border-left: 0;
  padding: 5px;
}

form textarea {
  width: 100%;
  height: 8em;
}

td.save {
  text-align: right;
}

input,textarea {
  border: 1px solid #888;
  padding: 2px;
}

ul.errorlist {
  float: right;
  color: red;
  list-style: none;
  margin: 0;
}

#id_cid {
  width: 5em;
}

div.preview {
  border: 1px solid gray;
}

div.bookmark {
  padding: 1em;
}

img.unpub_thumb {
  margin-left: -48px;
}

/* transcriptions */
ul.unapproved {
  list-style-type: none;
  width: 400px;
  font-family: monospace;
}

ul.unapproved li {
  border: solid 1px #ccc;
  margin: 1em 0 1em 0;
  text-align: left;
}

form.clear {
  text-align: center;
}

div.sample {
  text-align: left;
  margin: 0.5em 0.5em 0.5em 0;
  float: right;
  display: inline-block;
  width: 32%;
  font-size: 0.8em;
  color: #444;
}

div.sample a {
 text-decoration: underline;
}

div.transcription {
  text-align: left;
  border: solid 1px grey;
}

form.transcription_edit {
  text-align: left;
}

form.transcription_edit table {
  width: 63%;
  margin: 1em 0 1em 1em;
  display: inline-block;
}

form.transcription_edit table td { 
  width:100%;
}

form.transcription_edit textarea {
  height: 20em;
}

/* Statistics */

div.stat {
  font-family: monospace;
}

div.stat table {
  text-align: left;
}

div.stat table th {
  font-weight: normal;
}

li.untranscribed a {
border-bottom: 2px solid #f8c479;
}

.ready {
color: green;
}

.not-ready {
color: red;
}

.mail {
  text-align: left;
  font-family: monospace;
  border-top: 1px solid gray;
  padding: 0 5em;
  margin: 1em;
}

.mail cite {
  color: grey;
}

.mail p, .mail.cite {
  margin-left: 1em;
}