@CHARSET "ISO-8859-1";

* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

body {
  background: black;
  color: white;
}
a { text-decoration: none;}
p a {
  color:#BBB;
}
p a:hover {
  color:#FFF;
}

form {
  padding: 8px 12px;
}
form p {
  margin: 6px 2px;
  text-align:center;
}
form input,
form textarea,
form select {
  border: solid 1px #888;
  background:#444;
  color:#AAA;  
  font-size:inherit;
}
form input:focus,
form textarea:focus,
form select:focus {
  border-color:#BBB;
  background:#666;
  color:#FFF;
}
form .text.size_64 { width: 256px;}
form .text.size_128 { width: 512px;}
form .text.size_255 { width: 512px;}

input.submit {
  padding: 2px 12px;
  font-weight:bold;
  margin-left:64px;
}

#container {
  background: black;
  text-align: left;
  position: relative;
  width: 980px;
  padding: 16px 0;
  margin: 0 auto;
}

#sidebar {
  float: left;
  width: 300px;
}
#welike ul {
  list-style:none;
  text-align:center;
}
#welike li img {
  border: solid 3px #444;
}

#menu ul {
  list-style: none;
  text-align: center;
  margin-bottom:36px;
}

#menu li a {
  display: block;
  width: 300px;
  height:65px;
  margin: 10px auto;
  color: white;
}

#menu li a:hover {
  background-position:0 -65px !important;
}
#menu li a.home { background-image: url('images/brain_menu/home.png'); }
#menu li a.archive { background-image: url('images/brain_menu/archive.png'); }
#menu li a.cast { background-image: url('images/brain_menu/cast.png'); }
#menu li a.contact { background-image: url('images/brain_menu/contact.png'); }
#menu li a.forum { background-image: url('images/brain_menu/forum.png'); }

#content {
  width: 680px;
  float: right;
}

h1,
h2,
h3,
h4 {
  margin: 0 auto;
  text-align: center;
}

#content li {
  text-align: center;
  list-style: none;
}

.left {
  float:left;  
}
.right {
  float:right;
}

div.comic {
  width: 655px;
  float: right;
  margin: 12px auto 24px auto;
  text-align:center;
}

div.comic .bar_wrapper td {
  background-image: url('images/nav_back.png');
}

div.comic .navigation .buffer {
  width: 9px !important;
  float:none;
}

div.comic .navigation td.buffer.left {
  background-image: url('images/navend_left.png');
}

div.comic .navigation td.buffer.right {
  background-image: url('images/navend_right.png');
}

div.comic .navigation .buttons {
  width: 637px;
  height: 36px;
  margin: 2px auto;
  vertical-align: middle;
}

div.comic .navigation .buttons td {
  width: 20%;
  text-align: center;
  background: none;
}

div.comic .navigation a,div.comic .navigation span.deadlink {
  display: block;
  width: 85px;
  height: 36px;
  margin: auto;
  text-decoration: none;
  background: url('images/nav_all.png') no-repeat;
}

div.comic .navigation a.first { background-position: 0 0; }
div.comic .navigation a.first:hover { background-position: 0 -36px; }
div.comic .navigation span.first.deadlink { background-position: 0 -72px; }
div.comic .navigation a.prev { background-position: -85px 0; }
div.comic .navigation a.prev:hover { background-position: -85px -36px; }
div.comic .navigation span.prev.deadlink { background-position: -85px -72px; }
div.comic .navigation a.home { background-position: -170px 0; }
div.comic .navigation a.home:hover { background-position: -170px -36px; }
div.comic .navigation span.home.deadlink { background-position: -170px -72px; }
div.comic .navigation a.next { background-position: -255px 0; }
div.comic .navigation a.next:hover { background-position: -255px -36px; }
div.comic .navigation span.next.deadlink { background-position: -255px -72px; }
div.comic .navigation a.last { background-position: -340px 0; }
div.comic .navigation a.last:hover { background-position: -340px -36px; }
div.comic .navigation span.last.deadlink { background-position: -340px -72px; }

div.comic .navigation.top { margin-bottom: 8px;}

div.comic .navigation.bottom {
  margin-top: 8px;
}

#blogs {
  clear: both;
  margin-top: 24px;
}
#blogs .blog {
  width: 450px;
}
#content .blog {
  width: 655px;
}
#left_blog {
  float: left;
}
#right_blog {
  float: right;
}

.blog .head,
.blog .head * {
  height: 183px;
}
.blog .head {
  background: url('images/blog/box/t.png') bottom repeat-x;
}
.blog .headshot {
  background-repeat:no-repeat;
  width:385px;
}

.blog .linecap {
  width:26px;
  background-repeat: no-repeat;
}
.blog .head .linecap {
  background-position: bottom center;
}
.blog .head .linecap.left { background-image: url('images/blog/box/tl.png');}
.blog .head .linecap.right { background-image: url('images/blog/box/tr.png');}
.blog .foot {
  height: 26px;
  clear:both;
  background: url('images/blog/box/b.png') bottom center repeat-x;
}
.blog .foot .linecap {
  height:26px;
}
.blog .foot .linecap.left { background-image: url('images/blog/box/bl.png');}
.blog .foot .linecap.right { background-image: url('images/blog/box/br.png');}

.blog .body {
  border: solid white;
  border-width: 0 8px;
  padding: 0 8px;
  background-repeat: no-repeat;
}
.blog.left .body {
  background-position: top left;
}
.blog.right .body {
  background-position: top right;
}
.blog .navigation {
  margin: 0 8px;
  width:100%;
}
.blog .navigation td {
  padding: 2px 12px;
}
.blog .navigation .prev {
   text-align:left;
}
.blog .navigation .next {
   text-align:right;
}
.blog .navigation a{
  color:#BBB;
}
.blog .navigation a:hover{
  color:#FFF;
}
.blog .body p {
  padding: 3px 0;
}

#footer {
  padding-top: 24px;
  clear: both;
  text-align: center;
}

.under_construction {
  margin:64px auto;
  display:block;
}


.chalkboard {
  margin:12px auto;
  width: 80%; 
}
.chalkboard {background-repeat: repeat;}
.chalkboard td.t.l {background-image:url('images/chalkboard/tl.gif');}
.chalkboard td.t.c {background-image:url('images/chalkboard/tc.gif');}
.chalkboard td.t.r {background-image:url('images/chalkboard/tr.gif');}
.chalkboard td.m.l {background-image:url('images/chalkboard/ml.gif');}
.chalkboard td.m.r {background-image:url('images/chalkboard/mr.gif');}
.chalkboard td.b.l {background-image:url('images/chalkboard/bl.gif');}
.chalkboard td.b.c {background-image:url('images/chalkboard/bc.gif');}
.chalkboard td.b.r {background-image:url('images/chalkboard/br.gif');}


.chalkboard td.l,
.chalkboard td.r{
  width:15px;
}
.chalkboard td.t,
.chalkboard td.b {
  height:15px;
  line-height:15px;
}

.chalkboard td.m.c {
  background:#030;
  padding: 3px 24px;
  height: 200px;
}
.chalkboard h2 {
  margin-bottom:8px !important;
}
.chalkboard td.m.c li {
  line-height:16px;
}

.chalkboard div {
  color:#252;  
  margin-top:12px;
  font-size:12px;
}

.adbox {
  background: url('images/ad_goes_here.gif') #C0C0C0 center no-repeat;
  border: solid 2px #008;
  display:block;
  margin: 12px auto;
}

.chalkboard a.generated {
  display:block;
  height:28px;
  margin:2px auto;
}  
.chalkboard a.generated:hover {
  background-position:0 -28px;
}

.castmember {
  display:block;
  height: 130px;
  width: 500px;
  margin: 12px auto;
  background-repeat:no-repeat;
  border: solid 2px grey;
  float:none;
}
.castmember.left {
  text-align:left;
  padding-left: 128px;
}
.castmember.right {
  text-align:right;
  padding-right: 128px;
  background-position:right;
}
.castmember.professor-damocles-injustice {
  padding-right: 200px;
  width: 428px;
}
.castmember.black {
  background-color: black;
  color: white;
}
.castmember.white {
  background-color: white;
  color: black;
}
.castmember h2 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 20pt;
}
.castmember.unlocked.left h2 {
  text-align:left;
}
.castmember.unlocked.right h2 {
  text-align:right;
}
.castmember.locked h2 {
  line-height:130px;
  font-size:1px;
}
.castmember.locked h2 img {
  vertical-align:middle !important;
}
.castmember.white a { color: #444; }
.castmember.white a:hover { color: #000; }

/* Until we can get on Project Wonderful */
.adbox {display:none;}
/*
 * Project Wonderful Ad Sizes 
 */
.adbox.button_ad { width:177px; height:30px; }
.adbox.square_ad { width:125px; height:125px; }
.adbox.half_banner_ad { width:234px; height:60px; }
.adbox.banner_ad { width:468px; height:60px; }
.adbox.rectangle_ad { width:300px; height:250px; }
.adbox.leaderboard_ad { width:728px; height:90px; }
.adbox.skyscraper_ad { width:160px; height:600px; }