body
{
  margin: 0;
  padding: 0;
  font: 12px/1.5 "Lucida Grande", "Bitstream Vera Sans", verdana, sans-serif;
  background: #222;
  color: #777;
}
h1, h2
{
  margin: 0;
  font-weight: normal;
}
h1
{
  font-size: 1em;
}
h2
{
  font-size: 10px;
  line-height: 12px;
}
p
{
  margin: 0 0 1em 0;
}
ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li
{
  margin: .5em 0;
  padding: 0;
}
a
{
  color: #aaa;
  text-decoration: none;
}
a:hover
{
  color: #222 !important;
  background-color: #aaa;
  outline: 1px solid #aaa;
}
a:active
{
  color: #000 !important;
  background-color: #777;
  outline: 1px solid #777;
}
#header .inner,
#main .inner,
#code .inner
{
  width: 640px;
}
.small #header .inner,
.small #main .inner,
.small #code .inner
{
  width: 480px;
}
#header,
#footer
{
  width: 100%;
  padding: 5px 0;
  text-align: center;
}
#header
{
  background: #333 url(images/lightbottombg.png) left bottom repeat-x;
}
#footer
{
  background: #222 url(images/darktopbg.png) left top repeat-x;
}
#header .inner
{
  position: relative;
  margin: 0 auto;
}
#header a
{
  color: #999;
}
#header a.previous,
#header a.next
{
  display: block;
  position: absolute;
  top: 50%;
  width: 16px;
  height: 15px;
  margin: -7px;
}
#header a.previous
{
  left: 2px;
  background: url(images/previous.png);
}
#header a.next
{
  right: 2px;
  background: url(images/next.png);
}
#header a.previous span,
#header a.next span
{
  display: none;
}
#header a.previous:hover,
#header a.next:hover
{
  background-position: 0 -15px;
  outline: none;
}
#header a.previous:active,
#header a.next:active
{
  background-position: 0 -30px;
}
#main
{
  background: #222 url(images/darkbottombg.png) left bottom repeat-x;
}
#main .inner
{
  margin: 0 auto;
  padding: 2em 0;
}
#main .inner p:first-child
{
  color: #333;
}
.published
{
  float: right;
  text-align: right;
}
#movie
{
  margin: 1em 0 2em 0;
  height: 376px;
}
.small #movie
{
  height: 286px;
}
.actions
{
  color: #333;
}
#code
{
  margin: 0;
  padding: 1em 0;
  background-color: #000;
}
#code .inner
{
  margin: 1em auto;
}
#code pre
{
  display: block;
  font: 11px/15px "Monaco", monospace;
  overflow: auto;
}
#code h2
{
  margin: 1em 0;
  border-bottom: 1px solid #222;
  color: #333;
}
#code pre + h2
{
  margin-top: 2em;
}
#home,
#home #footer
{
  background: #000;
}
#home #header h1
{
  margin: 2em auto;
  width: 100%;
  height: 70px;
  background: url(images/ruby_banter.gif) 50% 50% no-repeat;
}
#home #header h1 span
{
  display: none;
}
#home p.description
{
  font-size: 16px;
  text-shadow: 0 0 #000;
}
#home p.actions
{
  text-align: center;
}
#home ul
{
  font-size: 14px;
}