/* generic CSS reset 
 * ================= */
* { padding: 0; margin: 0; text-indent: 0; border: none; list-style: none; }
img, input {display: block; }
input[type=hidden] { display: none; }
a:focus, a:hover, a:active { outline: none; }

/* font declarations 
 * ================= */

@font-face { 
    /* Blackout made by Tyler Finck http://www.theleagueofmoveabletype.com/fonts/5-blackout */ 
    font-family: Blackout; src: url("Blackout-Midnight.ttf"); format("truetype"); 
}

/* page layout and style 
 * ===================== */
html, body {
  background: rgb(102,136,85);
}

#container {
  position: relative;
  width: 975px;
  margin: 0px auto 0px auto;
}

/* header
 * ====== */
h1 {
  margin: 0px 0 18px 0;
  width: 765px;
  font: small-caps bold 30px/54px Georgia, serif;
  text-align: center;
  background: rgb(44,68,44);
}
h1 a { text-decoration: none; color: rgb(204,255,136); }
h1 a:hover { text-decoration: none; color: rgb(221,255,204); }

/* search form
 * =========== */
#search {
  position: absolute; top: 18px; right: 15px;
  height: 36px; width: 180px;
  background: rgb(204,255,136);
}
#search label { 
  text-align: center; color: rgb(44,68,44);
  font: small-caps bold 14px/18px Georgia, serif;  
  display: block;
}
#search input#ss {
  margin: 1px 0px 0px 2px;
  padding: 0px 4px;
  height: 15px;
  width: 168px;
  background: rgb(221,255,204);
  color: rgb(44,68,44);
}

/* navigation menu
 * =============== */
 
#nav { overflow: hidden; margin: 0 0 36px 0; }
#nav li { 
  background: rgb(204,255,136);
  float: left;
  width: 180px;
  margin: 0 15px 0 0;
}
#nav li a { 
  font: small-caps bold 14px/18px Georgia, serif;
  color: rgb(44,68,44);
  display: block; 
  text-align: center;
}
#nav li a:hover { color: #000; }

/* kwotes
 * ====== */

.kwote { 
  overflow: hidden; 
  position: relative;
  width: 930px;
  background: rgb(221, 255, 204);  
  margin: 18px 0;
  padding: 18px 15px 36px 15px;
  border-bottom: 1px solid rgb(44,68,44);
}
 
.kwote blockquote {
  width: 735px;
  font: bold 24px/36px Blackout, "Arial Black", Arial, sans-serif;
  color: rgb(44,68,44);
}

.kwote-info .rating { display: none; }

.kwote-info .kwoteid {
  position: absolute; top: 9px; right: 15px;
  display: block; text-align: center;
  font: bold 18px/18px Blackout, "Arial Black", Arial, sans-serif;
  color: rgb(102,136,85);
}

.vote-up {
  position: absolute; bottom: 9px; right: 15px;
  height: 18px;
  width: 15px;
  text-indent: -5000px;
  background: url('vote-buttons.gif') -15px 1px no-repeat;
}

.vote-down {
  position: absolute; bottom: 9px; right: 45px;
  height: 18px;
  width: 15px;
  text-indent: -5000px;
  background: url('vote-buttons.gif') -0px 1px no-repeat;
}

.voted-up .vote-down,
.voted-down .vote-up { visibility: hidden; }

#nav-supp { display: none; } /* prev/next links -- not designed yet */

/* footer 
 * ====== */

#site-info {
  background: rgb(44,68,44);  
  overflow: hidden;
  margin: 45px 0px 0px 195px;
  padding: 36px 15px;
  width: 540px;
  position: relative;
}
#site-info p {
  color: rgb(102,136,85);
  font: bold 14px/18px Georgia, serif;
  margin: 0px 0px 18px 0px;
}
#site-info a { color: #000; }

/* index page
 * ========== */
#content {
  width: 570px;
  padding: 0 0 0 195px;
  position: relative;
}
#content p {
  font: bold 14px/18px Georgia, serif;
  margin: 0px 0px 18px 0px;
  color: rgb(221,255,204);
}
#content p a { color: rgb(204,255,136); text-decoration: none; }
#content p a:hover { color: rgb(204,255,136); text-decoration: underline; }

#content img {
  position: absolute;
  left: 0px;
  width: 180px;
} 
#content img.right { left: 780px; }

/* add quote form
 * ============== */

form#add-kwote {
  overflow: hidden; 
  position: relative;
  width: 960px;
  margin: 36px 0;
}

form#add-kwote label {
  display: block;
  font: bold 14px/18px Georgia, serif;
  text-transform: uppercase;
  margin: 0px 0px 18px 15px;
  color: rgb(221,255,204);
}

form#add-kwote textarea {
  background: rgb(221, 255, 204);  
  width: 735px;
  padding: 18px 15px;
  height: 144px;
  font: bold 24px/36px Blackout, "Arial Black", Arial, sans-serif;
  color: rgb(44,68,44);
  border: 1px solid rgb(44,68,44);
  overflow: hidden;
}

form#add-kwote #CAPTCHA {
  position: absolute;
  top: 0px; right: 0px;
  overflow: hidden;
  width: 180px;
  height: 180px;
}

form#add-kwote #CAPTCHA img {
  width: 180px;
  background: rgb(221,255,204);
  padding: 18px 0px;
}

form#add-kwote input#phrase {
  font: bold 14px/18px Georgia, serif;
  height: 18px;
  background: rgb(44,68,44);
  color: rgb(221,255,204);
  border: 2px solid rgb(221,255,204);
  padding: 9px 15px;
  width: 146px;
}

form#add-kwote input[type="submit"] {
  position: absolute;
  top: 180px; right: 0px;
  background: rgb(204,255,136);
  width: 180px;
  height: 36px;
  text-decoration: underline;
  font: small-caps bold 14px/36px Georgia, serif;
  color: rgb(44,68,44);
  display: block; 
  text-align: center;
}