* { margin: 0; padding: 0; }
* { behavior: url(iepngfix.htc); }

html { background: #fff url(images/layout/hills.jpg) fixed center; color: #666; }
body { font: 62.5% 'trebuchet ms',arial; }


h2 { font: normal 2.4em georgia; color: #a276a1; margin: 1em 0 0 0; }
h3 { font: normal 1.8em georgia; margin: 1em 0 0 0; }


ul { margin: 0 0 0 1em; }
li { font-size: 1.3em; }

p { font-size: 1.3em; margin: 0 0 1em 0; }

.date { text-transform: uppercase; font-size: 1em; margin: 0; color: #999; }

a { color: #999; padding: 0 2px; margin: 0 -2px; }
a:focus { outline: 1px dotted #999; }
a:focus,
a:hover { text-decoration: none; background: #e4dae5; color: #666; }
a:hover { outline: none; }
a:active { background: #efe9ef; outline: none; }

form { font-size: 1.2em; margin: 1em 0; }
textarea { font-size: 0.8em; width: 100%; color: #666; font-family: 'trebuchet ms',arial; height: 3em; }



#wrapper { width: 930px; position: relative; margin: 3% auto 1% auto; background: #fff; }



#comic { position: absolute; top: 0; left: 15px; }
#comic img { border: none; }
#comic .page { height: 600px; width: 400px; margin: 0 25px; }

#comic a.nav { padding: 60px 10px 50px 10px; text-decoration: none; }
#comic a.nav span { font: 1.2em/1em 'trebuchet ms'; text-align: center; display: none; position: absolute; width: 60px; }
#comic a:focus span,
#comic a:hover span { display: block; }
#comic a:active span { color: #ccc; }

#prev { position: absolute; top: 200px; left: -20px; background: url(images/layout/sparrow_backchat.png) top right no-repeat; }
#prev:focus,
#prev:hover { background-position: top left; }
#prev span { top: 1.2em; left: 0; }
#prev img { height: 42px; width: 50px; }

#next { position: absolute; top: 190px; right: -20px; background: url(images/layout/sparrow_chat.png) bottom left no-repeat; }
#next:focus,
#next:hover { background-position: bottom right; }
#next span { bottom: 1.2em; right: 0; }
#next img { height: 42px; width: 50px; }





#about_panel { position: absolute; top: 0; left: 40px; background: rgba(255,255,255,0.4); width: 360px; padding: 0 20px; height: 600px; }
#about_panel img { float: right; }
#about_panel p { margin: 0 0 1em 0; }





#archive_panel { position: absolute; top: 0; left: 40px; width: 400px; padding: 0; height: 600px; }
#archive_panel img { float: right; }
#archive_panel p { margin: 0 0 1em 0; }

#archive_list { list-style: none; width: 426px; margin: 0; padding: 0; }
#archive_list a { background: none; margin: 0; padding: 0; }
#archive_list a img { border: none; }
#archive_list li { font-size: 1em; position: relative; display: inline-block; margin: 0 5px 5px 0; padding: 0; }
#archive_list li { *display: inline; }
#archive_list li .thumb { height: 50px; width: 50px; }
#archive_list li span { position: absolute; top: 40px; left: 40px; z-index: 1; display: none; width: 300px; padding: 2px 5px; }
#archive_list li span.title { font: normal 2.4em georgia; color: #a276a1; background: rgba(255,255,255,0.7); padding-bottom: 20px; }
#archive_list li span.date { top: 69px; }

#archive_list li a:focus span,
#archive_list li a:hover span { display: block; }





#info { position: absolute; top: 0; right: 40px; width: 360px; height: 600px; background: rgba(255,255,255,0.4); padding: 0 20px; }

#info h1 { text-align: center; font-size: 2em; margin: -1em 0 1em 0; }
#info h1 a { text-decoration: none; background: transparent; }
#info h1 img { border: none; height: 310px; height: 165px; }

#info #archive_list { margin: 1em 0 0 0; width: 400px; }
#info #archive_list li span { left: -300px; }

#menu { margin: 2em auto; text-align: center; font-size: 0.8em; }
#menu li { display: inline-block; height: 70px; width: 70px; margin: 3px; }
#menu li { *display: inline; }
#menu li.first { margin-left: 0; }
#menu li.last { margin-right: 0; }
#menu li a { display: block; height: 70px; width: 70px; text-transform: uppercase; text-decoration: none; color: #777; position: relative; margin: 0; padding: 0; }
#menu span { display: block; width: 70px; position: absolute; bottom: 5px; left: 0; }

#menu #home a { background: url(images/layout/home.png) 0 0 no-repeat; }
#menu #about a { background: url(images/layout/about.png) 0 0 no-repeat; }
#menu #archive a { background: url(images/layout/archive.png) 0 0 no-repeat; }
#menu #vote a { background: url(images/layout/vote.png) 0 0 no-repeat; }

#menu li a:focus,
#menu li a:hover { background-position: 0 -70px !important; }
#menu li a:active { background-position: 0 -140px !important; }

#actions { margin: 0; }
#actions li { list-style: none; padding: 0 1em 0.1em 1.4em; background: url(images/layout/icons.png) 1px 2px no-repeat; }
#actions li a { text-decoration: none; }
#actions #print { background-position: 1px -37px; }
#actions #blog { background-position: 1px -17px; }





#footer { position: absolute; left: 37px; top: 650px; }
#footer p { margin: 0 0 1em 3px; width: 300px; }
#footer a { background: none; text-decoration: none; }