/* ========================================
 * Reset all styles
 * Courtesy of: */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal; }

ol, ul {
  list-style: none; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

q:before, q:after {
  content: ''; }

abbr, acronym {
  border: 0; }

/* ========================================
 * Baseline Rhythm */
body {
  font-size: 1em;
  line-height: 1.5; }

h1 {
  font-size: 1.5em;
  line-height: 1; }

h2 {
  font-size: 1.375em;
  line-height: 1.091; }

h3 {
  font-size: 1.25em;
  line-height: 1.2; }

h4 {
  font-size: 1em;
  line-height: 1.5; }

p, ul, blockquote, pre, td, th {
  font-size: 1em;
  line-height: 1.5; }

p.small {
  font-size: 0.875em;
  line-height: 1.714; }

/* ========================================
 * Clearfix */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both; }

.clearfix.left:after {
  clear: left; }

.clearfix.right:after {
  clear: right; }

.clearfix {
  display: inline-block; }

.clearfix {
  display: block; }

/* ========================================
 * Colors */
/* ========================================
 * Core elements */
body {
  background-color: #111111;
  color: white;
  font-family: "Lucida Sans", helvetica, sans-serif; }

hr {
  display: none; }

strong {
  font-weight: bold; }

a, a:visited {
  padding: 1px;
  color: #0099ee; }
  a:hover,   a:visited:hover {
    background-color: #0099ee;
    color: black;
    text-decoration: none; }

#header {
  margin-top: 10px;
  background-color: black;
  border: solid #113344;
  border-width: 1px 0; }
  #header .inner {
    width: 620px;
    margin: 9px auto; }
  #header h1 a {
    display: block;
    width: 220px;
    height: 120px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url("../images/logo.png");
    text-indent: -9999px;
    overflow: hidden; }
    #header h1 a:hover {
      background-color: transparent;
      text-decoration: none; }
  #header #messages {
    width: 380px;
    float: right;
    margin: 10px 0; }
    #header #messages .top, #header #messages bottom {
      height: 10px;
      background-position: 0 0;
      background-repeat: no-repeat; }
    #header #messages.default {
      text-align: right; }
      #header #messages.default p {
        font-size: 1em;
        color: #999999;
        line-height: 1.714;
        margin-top: 1.714em;
        text-align: right;
        font-style: italic; }
        #header #messages.default p a {
          background-color: black; }
          #header #messages.default p a:hover {
            background-color: #0099ee; }

#footer {
  line-height: 1.714;
  font-size: 0.875em;
  margin-bottom: 2em;
  color: #999999;
  text-align: center; }

/* ========================================
 * Main Content */
#main {
  width: 660px;
  margin: 10px auto; }
  #main .top, #main .bottom {
    height: 10px;
    background-position: 0 0;
    background-repeat: no-repeat; }
  #main .top {
    background-image: url("../images/main-top.png"); }
  #main .bottom {
    background-image: url("../images/main-bottom.png"); }
  #main #content {
    margin: 0 10px;
    padding: 20px 30px;
    background-color: black; }
    #main #content h1 {
      margin-bottom: 1em;
      color: #0099ee; }
    #main #content p {
      margin-bottom: 1.5em; }

/* ========================================
 * Sidebar, Sessionbar Content */
#sidebar, #sessionbar {
  width: 150px;
  margin: 10px auto;
  float: left; }
  #sidebar .top, #sidebar .bottom,   #sessionbar .top, #sessionbar .bottom {
    height: 20px;
    background-position: 0 0;
    background-repeat: no-repeat; }
  #sidebar .top,   #sessionbar .top {
    background-image: url("../images/left-sidebar-top.png"); }
  #sidebar .bottom,   #sessionbar .bottom {
    background-image: url("../images/left-sidebar-bottom.png"); }
  #sidebar .content,   #sessionbar .content {
    background-position: 0 0;
    background-repeat: repeat-y;
    background-image: url("../images/left-sidebar.png");
    padding: 10px 20px 10px 10px; }
  #sidebar h2,   #sessionbar h2 {
    font-size: 1em;
    margin-top: 1.5em; }
  #sidebar h2.first,   #sessionbar h2.first {
    margin-top: 0; }
  #sidebar li a,   #sessionbar li a {
    white-space: nowrap;
    overflow: hidden;
    margin: 0 -9px;
    padding: 0 9px;
    display: block; }

#sidebar #yarplet_history a, #facebox #yarplet_history_all a {
  font-size: 0.875em;
  line-height: 1.714;
  color: #0099ee;
  text-decoration: none; }
  #sidebar #yarplet_history a.mine,   #facebox #yarplet_history_all a.mine {
    color: #ff6611; }
  #sidebar #yarplet_history a:hover,   #facebox #yarplet_history_all a:hover {
    color: black;
    background-color: #0099ee; }
  #sidebar #yarplet_history a.mine:hover,   #facebox #yarplet_history_all a.mine:hover {
    background-color: #ff6611; }
#sidebar #yarplet_history #all_yarplets, #facebox #yarplet_history_all #all_yarplets {
  color: #999999; }
  #sidebar #yarplet_history #all_yarplets:hover,   #facebox #yarplet_history_all #all_yarplets:hover {
    color: black;
    background-color: #999999; }

#sessionbar {
  float: right; }
  #sessionbar .top {
    background-image: url("../images/right-sidebar-top.png"); }
  #sessionbar .bottom {
    background-image: url("../images/right-sidebar-bottom.png"); }
  #sessionbar .content {
    background-image: url("../images/right-sidebar.png");
    padding: 10px 10px 10px 20px; }
  #sessionbar li {
    text-align: right; }

/* ========================================
 * Flash messages */
.flash {
  padding: 0 1.5em; }
  .flash ul {
    margin: 0.5em 2em 0; }
    .flash ul li {
      list-style: square; }

.notice {
  background-color: #efe;
  color: #080;
  border-top: 3px solid #080;
  border-bottom: 3px solid #080; }

.warning {
  font-size: 1.5em;
  text-align: center;
  background-color: red;
  border-top: 3px solid #113344;
  border-bottom: 3px solid #113344; }
  .warning .note {
    font-size: 0.875em; }
  .warning a {
    color: white; }
    .warning a:hover {
      background-color: white;
      color: red; }

.error {
  background-color: #fdd;
  color: #900;
  border-top: 3px solid #900;
  border-bottom: 3px solid #900; }
  .error a {
    color: #000; }
    .error a:hover {
      color: #fff; }

/* ========================================
 * Forms */
.input {
  font-size: 1.25em; }

form .field label {
  font-size: 1.5em;
  line-height: 1;
  color: #0099ee;
  display: block;
  margin-bottom: 1em; }

input, textarea {
  font-family: arial, helvetica, sans-serif;
  margin-bottom: 1.5em; }

input[type=text], textarea, select {
  border: 1px solid #113344;
  background-color: #111111;
  color: white;
  overflow: auto; }
  input[type=text].example, input[type=text].dynamic_example,   textarea.example, textarea.dynamic_example,   select.example, select.dynamic_example {
    color: #444444; }

input {
  font-size: 1.5em; }
  input#yarplet_title {
    width: 578px; }
  input#yarplet_affirmative, input#yarplet_negative {
    width: 250px;
    text-align: center; }
  input#yarplet_affirmative {
    float: left; }
  input#yarplet_negative {
    float: right; }
  input#response_name {
    width: 350px; }
    input#response_name.example, input#response_name.dynamic_example {
      border: 1px solid #ff6611; }

#yarplet_or {
  display: block;
  text-align: center; }
  #yarplet_or.button {
    line-height: 40px; }

form .field label.radio {
  margin: 0px 6px 1.2em;
  padding: 0;
  font-size: 1.25em;
  color: #444444;
  width: 275px;
  height: 60px;
  line-height: 60px;
  display: block;
  display: inline-block;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/option-button-off.png");
  cursor: pointer;
  text-align: center;
  text-decoration: none; }
  form .field label.radio.checked {
    color: #999999;
    background-image: url("../images/option-button-on.png"); }

textarea {
  font-size: 1em; }
  textarea#yarplet_description {
    width: 578px;
    height: 6em; }
  textarea#comment_body {
    width: 520px;
    height: 5em; }

input#response_affirmative, input#response_negative {
  font-size: 1.5em;
  margin-bottom: 1.5em;
  width: 250px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  border: 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/response-button.png"); }

input#response_affirmative {
  margin-left: 20px;
  float: left; }

input#response_negative {
  margin-right: 20px;
  float: right; }

.erred input, .erred select {
  background-color: #fdd;
  border-color: #900 #cc8080 #cc8080 #900 !important; }

.submit {
  text-align: center; }
  .submit input[type=submit] {
    color: black;
    border: 0;
    width: 320px;
    height: 40px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url("../images/yarplet-submit.png");
    cursor: pointer;
    margin-bottom: 10px; }
  .submit input {
    text-align: center; }

/* ========================================
 * Help/Edit Links */
.help, #comments .edit {
  color: #999999; }

.help a, a.help, #comments .edit a {
  color: #999999; }
  .help a:hover,   a.help:hover,   #comments .edit a:hover {
    color: black;
    background-color: #999999; }

span.help {
  font-size: 0.7em; }

div.help {
  float: right; }

.helpbox {
  clear: right;
  margin-bottom: 1.5em; }

/* ========================================
 * Table */
table.responses, table.help, #facebox table.help {
  margin: 0 auto;
  width: 576px; }
  table.responses th, table.responses td,   table.help th, table.help td,   #facebox table.help th, #facebox table.help td {
    width: 288px;
    padding: .25em 0;
    text-align: center;
    vertical-align: top; }
    table.responses th.affirmative, table.responses th.left,     table.responses td.affirmative, table.responses td.left,     table.help th.affirmative, table.help th.left,     table.help td.affirmative, table.help td.left,     #facebox table.help th.affirmative, #facebox table.help th.left,     #facebox table.help td.affirmative, #facebox table.help td.left {
      border-right: 1px solid #444444; }
    table.responses th #affirmative_count, table.responses th #negative_count,     table.responses td #affirmative_count, table.responses td #negative_count,     table.help th #affirmative_count, table.help th #negative_count,     table.help td #affirmative_count, table.help td #negative_count,     #facebox table.help th #affirmative_count, #facebox table.help th #negative_count,     #facebox table.help td #affirmative_count, #facebox table.help td #negative_count {
      background: black; }
  table.responses th,   table.help th,   #facebox table.help th {
    color: #0099ee;
    font-weight: bold;
    border-bottom: 1px solid #444444; }
    table.responses th.affirmative,     table.help th.affirmative,     #facebox table.help th.affirmative {
      width: 212px;
      padding-right: 76px; }
    table.responses th.negative,     table.help th.negative,     #facebox table.help th.negative {
      width: 260px;
      padding-left: 28px; }
  table.responses table,   table.help table,   #facebox table.help table {
    margin: 0 .25em; }
    table.responses table td,     table.help table td,     #facebox table.help table td {
      padding: 0;
      height: 24px; }
    table.responses table td.control,     table.help table td.control,     #facebox table.help table td.control {
      width: 24px; }
      table.responses table td.control a,       table.help table td.control a,       #facebox table.help table td.control a {
        padding: 0; }
        table.responses table td.control a img,         table.help table td.control a img,         #facebox table.help table td.control a img {
          vertical-align: middle; }
    table.responses table td.name,     table.help table td.name,     #facebox table.help table td.name {
      background: black; }
      table.responses table td.name a,       table.help table td.name a,       #facebox table.help table td.name a {
        color: white;
        text-decoration: none;
        border-bottom: 1px dotted #999999; }
        table.responses table td.name a:hover,         table.help table td.name a:hover,         #facebox table.help table td.name a:hover {
          color: #111111;
          background-color: white; }

table.help th, table.help td, #facebox table.help th, #facebox table.help td {
  text-align: left;
  color: #999999; }
  table.help th.left, table.help th.right,   table.help td.left, table.help td.right,   #facebox table.help th.left, #facebox table.help th.right,   #facebox table.help td.left, #facebox table.help td.right {
    width: 260px;
    padding-left: 28px;
    vertical-align: middle; }
  table.help th.left,   table.help td.left,   #facebox table.help th.left,   #facebox table.help td.left {
    border-right-width: 2px; }
table.help td, #facebox table.help td {
  color: white;
  border-top: 1px solid #444444; }
  table.help td ul,   #facebox table.help td ul {
    margin-left: 2em; }
    table.help td ul li,     #facebox table.help td ul li {
      list-style: disc; }
  table.help td.right,   #facebox table.help td.right {
    font-family: monaco, monospace;
    font-size: 12px; }
  table.help td a,   #facebox table.help td a {
    color: #0099ee; }
table.help th, #facebox table.help th {
  border-bottom: 2px solid #444444; }

#facebox table.help {
  width: 520px; }
  #facebox table.help.left, #facebox table.help.right {
    width: 204px; }

/* ========================================
 * User Content, Comments */
#yarplet .description img, #comments .comment .body img {
  max-width: 578px; }
#yarplet .description ul, #comments .comment .body ul {
  margin-left: 2em;
  margin-bottom: 1em;
  list-style: disc; }
#yarplet .description em, #comments .comment .body em {
  font-style: italic; }

#comments {
  margin-top: 1.5em; }
  #comments .comment {
    background-color: black;
    margin-top: 24px; }
    #comments .comment h3.name {
      margin-top: 1.2em;
      color: #0099ee; }
      #comments .comment h3.name.author {
        color: #ff6611; }
    #comments .comment span.time {
      font-size: 0.7em;
      font-weight: normal;
      color: #999999; }
    #comments .comment .edit {
      line-height: 1.714;
      font-size: 0.875em;
      float: right; }

/* ========================================
 * Facebox */
#facebox .body {
  background-color: black; }
#facebox .footer {
  border-top: 1px solid #444444; }
  #facebox .footer a {
    padding: 0; }
    #facebox .footer a:hover {
      background-color: #ff6611; }
    #facebox .footer a img {
      vertical-align: middle; }
#facebox h1 {
  color: #ff6611; }
#facebox p {
  margin-top: 1.5em; }
#facebox ul {
  margin-left: 1.5em; }
  #facebox ul li {
    list-style: disc; }
#facebox dl {
  width: 25em; }
#facebox dt, #facebox dd {
  display: block;
  float: left;
  width: 12em; }
#facebox dt {
  text-align: right;
  padding-right: .5em; }
#facebox #privacy_policy, #facebox #yarplet_history_all {
  width: 500px; }
#facebox #yarplet_history_all h1 {
  color: white; }
#facebox #yarplet_history_all span.time {
  color: #999999;
  font-size: 0.7em; }
#facebox #yarplet_history_all ul {
  margin-left: 0; }
  #facebox #yarplet_history_all ul li {
    list-style: none; }

/* ========================================
 * Definition */
.definition {
  font-family: georgia, serif; }
  .definition .pronounce {
    letter-spacing: 0.05em;
    font-family: helvetica, sans-serif; }
  .definition .classification {
    color: #999999;
    font-size: 0.875em;
    font-family: helvetica, sans-serif; }
  .definition p {
    margin: 0 !important; }

/* ========================================
 * Copyable */
input.copyable, textarea.copyable {
  font-size: 0.875em;
  display: block;
  margin: .125em auto;
  padding: .125em;
  width: 98%; }

textarea.copyable {
  height: 5em;
  overflow: hidden; }

/* ========================================
 * Pagination */
.pagination {
  font-size: 0.875em; }
  .pagination a, .pagination span {
    padding: .2em .5em;
    display: block;
    float: left;
    margin-right: 5px; }
  .pagination span.disabled {
    color: #444444;
    border: 1px solid #444444; }
  .pagination span.current {
    font-weight: bold;
    color: white;
    border: 1px solid white; }
  .pagination a {
    text-decoration: none;
    color: #999999;
    border: 1px solid #999999; }
    .pagination a:hover, .pagination a:focus {
      color: #111111;
      background-color: #999999; }
  .pagination:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  * html .pagination {
    height: 1%; }
  *:first-child+html .pagination {
    overflow: hidden; }

/* ========================================
 * Miscellaneous */
#skip {
  position: absolute;
  overflow: hidden;
  width: 0; }

.hide_far_away {
  position: absolute;
  left: -9999px; }