@font-face {
  font-family: "Graublau Web";
  font-weight: bold;
  src: url("../fonts/GraublauWebBold.otf");
}

@font-face {
  font-family: "Graublau Web";
  font-weight: normal;
  src: url("../fonts/GraublauWeb.otf");
}

body {
  background: url("../images/bg-alpha.png") repeat-x;
  font-family: sans-serif;
  line-height: 1.2em;
  margin: 0;
}

h1, h2, h3 {
  font-family: "Graublau Web", sans-serif;
}

h3 {
  font-weight: normal;
}

a img {
  border: 0;
}

#body {
  position: relative;
  width   : 970px;
  margin  : 0 auto;
}

#logo {
  position: absolute;
  width : 199px;
  height: 166px;
  left  : -15px;
  z-index : 1;
  cursor  : pointer;
  background-image: url("../images/logo2.png");
}

#top-banner {
  position: relative;
  left    : 199px;
  width   : 728px;
  height  : 106px;
}

#layout-table {
  position      : absolute;
  top           : 103px;
  width         : 970px;
  height        : 500px;
  border-spacing: 0;
}

#left-banner {
  width           : 184px;
  padding-top     : 80px;
  text-align      : center;
  vertical-align  : top;
}

#gpod-banner > table {
  margin: 1em auto;
}

#menubar {
  height           : 35px;
  color            : white;
  font-family      : "Graublau Web", sans-serif;
  font-size        : 18px;
  line-height      : 35px;
  text-align       : center;
}

#menubar a {
  text-decoration: none;
  margin-left: 30px;
}

#content-top-border {
  height          : 35px;
  text-align      : center;
  background-color: white;
  border-right: 2px solid;
}

#navigation {
  font-family  : "Graublau Web", sans-serif;
  text-align   : center;
  margin-bottom: 1em
}

#navigation ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

#navigation li {
  display    : inline;
  margin-left: 30px;
  padding    : 0;
}

#content-cell {
  border-right    : 2px solid;
  background-color: white;
  vertical-align  : top;
  min-height      : 1072px;
}

#content {
  position   : relative;
  padding    : 1em;
  margin-top : -25px;
}

#theme-selector {
  position   : absolute;
  left       : 735px;
  top        : 20px;
  font-family: "Graublau Web", sans-serif;
  text-align : center;
}

.theme-selector-sample {
  display: block;
  width  : 16px;
  height : 16px;
  margin-bottom: 2px;
}

#login_logout_profile {
  position   : absolute;
  top        : 0;
  right      : 1em;
  font-family: "Graublau Web", sans-serif;
}

#login_logout_profile > * {
  display: block;
  float: left;
}

#login_logout_profile .login {
  margin-right: 0.5em;
}

#login_logout_profile img {
  margin-right: 2px;
}

#login_logout_profile.logged_in {
  font-size: small;
}

#comic_wrapper {
  text-align: center;
}

#footer {
  border: 2px solid;
  border-top-width: 0;
  font-family: "Graublau Web", sans-serif;
  font-size  : smaller;
  text-align : center;
  line-height: 1em;
}

#footer a {
  text-decoration: none;
}

/* rounded corners */
.box-tl, .box-tr, .box-bl, .box-br {
  background: url("../images/borders.png");
  width: 20px;
  height: 20px;
  font-size: 0;
}

.box-tl, .box-bl {
  float: left;
}

.box-tr, .box-br {
  float: right;
}

.box-content {
  height: 100%;
  width : 100%;
}

#menubar .box-tr {
  background-position: -60px 0;
}

#content-top-border .box-tr {
  background-position: -20px 0;
}

.comment {
  width           : 580px;
  padding         : 0.5em 1em;
  text-align      : justify;
  margin          : 1em auto;
  -moz-border-radius   : 10px;
  -webkit-border-radius: 10px;
}

.user_comment_body.mceContentBody {
  font-size: inherit;
  min-width: 0;
  background-image: none;
}

.comment_editor {
  width: 630px;
}

/* Navigation Links */
.nav {
  text-align: center;
  padding: 10px 5px;
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  display: inline;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none;
}

#nav_previous span, #nav_next span {
  position: absolute;
  width: 100px;
  background: url("../images/1x1t.gif") repeat;
}

#nav_previous a:hover span {
  background: url("../images/nav-left.png") repeat-y scroll left top;
}

#nav_next a:hover span {
  background: url("../images/nav-right.png") repeat-y scroll right top;
}

#notice {
  padding: 0.25em;
  font-family: "Graublau Web", Arial, sans-serif;
  text-align: center;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
}

#notice-more {
  position: absolute;
  width: 550px;
  z-index: 1;
  border: 3px solid;
  margin: 0 auto;
  font-family: "Graublau Web", Arial, sans-serif;
  text-align: justify;
  opacity: 0.9;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
}

#notice-more div {
  padding: 1em;
}

/* About */

#about-text {
  text-align: justify;
}

/* Archives */
#archives {
  padding-top: 1em;
}

.archives_month {
  font-family: "Graublau Web", sans-serif;
  font-size: x-large;
}

/* Session */
#login_form {
  text-align: center;
}

/* Comments */
#comic_comments {
  font-size: 10pt;
}

#comments_comic {
  margin-bottom: 1em;
}

#comic_comments_title {
  font-family: "Graublau Web", sans-serif;
  font-size: x-large;
  font-weight: bold;
  text-align: center;
  margin: 1em;
}

#photo_notes_controls {
  text-align: center;
  margin-bottom: 1em;
}

#user_comments_header {
  text-align: center;
  font-weight: bold;
}

#user_comments_header img {
  vertical-align: top;
}

#user_comments {
  height: 700px;
  width: 290px;
  padding: 0.5em;
  overflow-y: auto;
  margin: 0 -1em 0 auto;
}

.user_comment {
  position: relative;
  margin-bottom: 1em;
  width: 275px;
  overflow: hidden;
  word-wrap: break-word;
}

.user_name {
  font-weight: bold;
}

.user_identity_url {
  font-size: x-small;
}

.user_comment_datetime {
  font-size: x-small;
}

.user_comment_body {
  padding: 0.5em 1em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.logged_user_comment .user_comment_body {
  border: 2px solid;
}

#add_photo_note {
  text-align: center;
}

#comment_form_table {
  width: 100%;
}

#comment_form_textarea {
  height: 120px;
  width: 100%;
}

#comment_form_table_submit_col {
  text-align: right;
}

.user_comment_actions {
  position: absolute;
  top     : 1em;
  right   : 3px;
}

.user_comment_actions a {
  width  : 16px;
  height : 16px;
  display: none;
}

.user_comment:hover a {
  display:inline-block;
}

.action_edit {
  background-image: url("../images/icon_comment_edit.png");
}

.action_delete {
  background-image: url("../images/icon_comment_delete.png");
}

.action_reply {
  background-image: url("../images/icon_reply.gif");
}

.update_comment_textarea {
  width  : 290px;
  height : 60px;
  padding: 0.2em;
  border : 2px solid;
  -moz-border-radius   : 5px;
  -webkit-border-radius: 5px;
}

/* Grid table (used in various pages */

thead {
  font-family: "Graublau Web", sans-serif;
}

.grid_table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 100%;
}

.grid_table th {
  border     : 1px solid;
}

.grid_table td, .grid_table th {
  padding: 0.1em 0.5em;
  vertical-align: top;
}

.grid_table tbody tr {
  border-bottom: 1px solid;
}

/* Comment tables (used in user profile and comment administration */
#comments_table {
  font-size: small;
}

#comments_table .photo_note_column {
  width: 15px;
}

#comments_table .body_column {
  font-size: x-small;
  max-width: 350px;
  overflow : hidden;
  word-wrap: break-word;
}

#comments_table .created_at_column, #comments_table .comic_column {
  white-space: nowrap;
}

#comments_table .spam_column, #comments_table. spaminess_column {
  text-align: center;
}

/* form errors */
.fieldWithErrors input[type=text] {
    background: #ffffcc url("../images/silk/exclamation.png") no-repeat;
    padding-left: 18px;
}

.fieldWithErrors textarea {
    background-color: #ffffcc;
}

.formError {
    color: red;
    font-style: italic;
}

/* flash */
.flash_notice {
    background    : #ffffcc url("../images/silk/exclamation.png") no-repeat .25em center;
    text-align    : center;
    font-family   : "Graublau Web", sans-serif;
    padding       : .25em 0;
    margin-bottom : 1em;
}