html { background: url(../images/bg.jpg) repeat top center; margin: 0; padding: 0 }

/* Micro reset */

ul { list-style-type: none; margin: 0; padding: 0; }
ul li { list-style-position: outside; margin: 0; padding: 0; }

a { outline: none; }

/* Page */

body { position: relative; width: 880px; margin: 0 auto; }

.header { width: 100%; height: 200px; }


a.logo { display: block; background: url(../images/logo.png) no-repeat; height: 147px; width: 356px; text-indent: -9999px; margin-top: 30px; margin-left: 100px; float: left;}

.header ul { display: block; background: url(../images/books.png) no-repeat; width: 260px; height: 188px; position: absolute; top: 0; right: 70px; }

.header ul li { float: left; }
li.joyofhate1 a { display: block; height:188px; width:94px; margin-left: 15px; text-indent: -9999px; }

li.joyofhate2 a { display: block; height:188px; width: 100px; margin-left: 5px; text-indent: -9999px; }


.article { position: relative; width: 702px; height: 900px; background: url(../images/canvas.png) no-repeat top center; margin: 0 auto; }

.figure { display: block; width: 640px; height:480px; margin: 0px 0 0 0px; padding-top: 25px; }

.nav { padding: 0 100px 0 100px; position: absolute; top: 0; left: 20px; width: 640px; }

a.rss { position:absolute; display: block; width: 104px; height: 27px; text-indent: -9999px; background-image: url(../images/rss.png); top: 10px; right: -10px; }

.nav li { }
.nav li a { display: block; width:310px; height: 500px; text-indent: -9999px;}

.nav li.newer {  }
.nav li.older { float: right; }

span.newer a, span.older a { display: block; background: url(../images/pointer.png) no-repeat; width: 144px; height: 62px; position: absolute; top: 380px; }

span.newer a { left: ; }
span.older a { right: 0px; background-position:top right; }


.older {}
.newer {}


.footer a { display: block; width: 300px; height: 51px; position: absolute; background: url(../images/cm.png); right: 0; bottom: 0; text-indent: -9999px; right: 90px; }