body
{
  background: black;
}

#articles
{
  position: absolute;
  top: 0;
  left: 0;
  width: 148px;
  height: 100%;
  background: black url( 'articleborder.png' ) 147px 0 repeat-y;
}

*>#articles
{
  position: fixed;
}

#articles ul
{
  padding: 198px 0 55px 0;
  background-image: url( 'articles.png' );
  background-repeat: no-repeat;
}

#articles li
{
  display: inline;
  background-repeat: no-repeat;
  padding: 0;
}

#articles a
{
  display: block;
  height: 18px;
  margin: 0 2px 0 1px;
  padding: 0;
  text-indent: -10000px;
  overflow: hidden;
}

#article3 a { height: 35px; }
#article9 a { height: 25px; }

#articles a:hover
{
  background-image: url( 'articles.png' );
}

#article1 a:hover { background-position: -149px -198px; }
#article2 a:hover { background-position: -149px -216px; }
#article19 a:hover { background-position: -149px -234px; }
#article3 a:hover { background-position: -149px -252px; } /* 35 */
#article4 a:hover { background-position: -149px -287px; }
#article18 a:hover { background-position: -149px -304px; }
#article5 a:hover { background-position: -149px -323px; }
#article6 a:hover { background-position: -149px -341px; }
#article7 a:hover { background-position: -149px -359px; }
#article8 a:hover { background-position: -149px -377px; }
#article9 a:hover { background-position: -149px -395px; } /* 25 */
#article10 a:hover { background-position: -149px -420px; }
#article11 a:hover { background-position: -149px -438px; }
#article12 a:hover { background-position: -149px -456px; }
#article13 a:hover { background-position: -149px -474px; }
#article14 a:hover { background-position: -149px -492px; }
#article15 a:hover { background-position: -149px -510px; }
#article16 a:hover { background-position: -149px -528px; }
#article17 a:hover { background-position: -149px -546px; }

#content
{
  margin-left: 148px;
}

h1 a
{
  display: block;
  width: 648px;
  height: 91px;
  margin: 0 auto;
  background: url( 'beheader.png' );
  text-indent: -10000px;
  overflow: hidden;
}

#navigation
{
  width: 670px;
  height: 24px;
  margin: 0 auto 16px;
  background: url( 'beheader.png' ) 13px -91px no-repeat;
  padding: 0 0 0 4px;
}

*>#navigation
{
  width: 648px;
  margin: 0 auto 16px;
  padding: 0 0 0 0;
  background-position: 0 -91px;
}

#navigation li
{
  display: inline;
  padding: 0;
  background: none;
}

#navigation a
{
  float: left;
  display: block;
  height: 24px;
  margin: 0 12px 0 11px;
  text-indent: -10000px;
  overflow: hidden;
}

#navigation #home { width: 50px; margin-left: 4px; }
#navigation #updates { width: 65px; }
#navigation #search-menu { width: 56px; }
#navigation #features { width: 76px; }
#navigation #shoppe { width: 66px; }
#navigation #links { width: 42px; }
#navigation #about { width: 52px; }
#navigation #babalon { width: 70px; margin-right: 0; }

#navigation a:hover
{
  background: url( 'beheader.png' );
}

#navigation #home:hover { background-position: -4px -115px; }
#navigation #updates:hover { background-position: -77px -115px; }
#navigation #search-menu:hover { background-position: -165px -115px; }
#navigation #features:hover { background-position: -244px -115px; }
#navigation #shoppe:hover { background-position: -343px -115px; }
#navigation #links:hover { background-position: -432px -115px; }
#navigation #about:hover { background-position: -497px -115px; }
#navigation #babalon:hover { background-position: -572px -115px; }

#page
{
  padding: 20px 30px;
}

#footer
{
  clear: both;
  margin: 0;
  padding: 10px;
}

#footer a
{
  display: block;
  margin: 40px auto 20px;
  width: 284px;
  height: 254px;
  background: url( 'home.png' ) no-repeat;
  text-indent: -10000px;
  overflow: hidden;
	border: 1px solid #ffffff;
}

#footer #copyright
{
  text-align: center;
}

/*
 * JAVASCRIPT HELPERS
 */

body.fixed
{
  overflow: hidden;
}

#content.fixed
{
  overflow: auto;
  height: 100%;
  position: absolute;
  right: 0;
  left: 148px;
  padding-left: 0;
}