/* IE PNG Fix */
img, div, span, a, h1, h2, li
{ behavior: url(/static/iepngfix.htc) }

body
{
    background: black url('repeatingback.png') repeat-x 723px 0px;
    height: 189px;
    margin: 0;
    padding: 0;
}

a:link, a:visited
{
    color: #801C00;
}

a img
{
    border: none;
}

.clear
{
    clear: both;
}

.info
{
    font-size: 80%;
}

#header
{
    background: black url('topbackground.png') no-repeat;
    height: 168px;
    width: 723px;
    margin: 0;
    padding: 0;
    position: relative;
}

h1
{
    margin: 0;
    background: url('ssglogo.png') no-repeat;
    height: 147px;
    width: 188px;
    position: absolute;
    top: 4px;
    left: 10px;
    text-indent: -9000px;
}

h1 a
{
    display: block;
    width: 100%;
    height: 147px;
}

.nav
{
    margin: 0;
    padding: 0;
    position: absolute;
    left: 300px;
    list-style: none;
    width: 550px;
}

#nav1
{
    top: 5px;
}

#nav2
{
    top: 45px;
}

.nav li
{
    float: left;
    width: 105px;
    margin-right: 20px;
    padding: 0;
}

.nav li a
{
    margin: 0;
    display: block;
    width: 100%;
    height: 19px;
    text-indent: -9000px;
    background-position: center top;
    background-repeat: no-repeat;
}

#nav1 li a
{
    background-position: top right;
}

#nav2 li a
{
    background-position: top left;
}

.nav li a:hover
{
    background-position: bottom right !important;
}

.nav #about a { background-image: url("buttons/about.png"); width: 73px;}
.nav #archive a { background-image: url("buttons/archive.png"); width: 90px;}
.nav #gallery a { background-image: url("buttons/gallery.png"); width: 100px; }
.nav #world a { background-image: url("buttons/world.png"); width: 81px; }
.nav #links a { background-image: url("buttons/links.png"); width: 63px; }
.nav #extras a { background-image: url("buttons/extras.png"); width:83px; }

#sidebar
{
    position: absolute;
    top: 55px;
    left: 870px;
}


#content
{
    margin: 10px;
    margin-top: 0;
}

.comic
{
    width: 850px;
}

.comic img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.arrows
{
    margin-left: 460px;
    height: 19px;
}

.arrows li
{
    float: left;
    height: 19px;
    width: 20px;
    margin-right: 20px;
    list-style: none;
}

.arrows li.chapter
{
    width: 170px;
}

.arrows a
{
    display: block;
    height: 19px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    text-indent: -9000px;
}

.arrows a:hover
{
    background-position: bottom right !important;
}


.arrows .chapter a
{
    background-position: bottom left;
}

.arrows .first a
{ 
    background-image: url('buttons/arrow-first.png');
    background-position: top left;
    width: 19px;
}

.arrows .prev a
{
    background-image: url('buttons/arrow-back.png');
    background-position: top right;
    width: 12px;
}
.arrows .next a
{
    background-image: url('buttons/arrow-next.png');
    background-position: top right;
    width: 12px;
}
.arrows .latest a
{
    background-image: url('buttons/arrow-current.png');
    background-position: top left;
    width: 19px;
}

.arrows .prologue a, h2.prologue { background-image: url('buttons/prologue.png'); width: 114px; }

.arrows .chapter-1 a, h2.chapter-1 { background-image: url('buttons/chapter01.png'); width: 114px; }
.arrows .chapter-2 a, h2.chapter-2 { background-image: url('buttons/chapter02.png'); width: 119px; }
.arrows .chapter-3 a, h2.chapter-3 { background-image: url('buttons/chapter03.png'); width: 116px; }
.arrows .chapter-4 a, h2.chapter-4 { background-image: url('buttons/chapter04.png'); width: 117px; }
.arrows .chapter-5 a, h2.chapter-5 { background-image: url('buttons/chapter05.png'); width: 117px; }
.arrows .chapter-6 a, h2.chapter-6 { background-image: url('buttons/chapter06.png'); width: 119px; }
.arrows .chapter-7 a, h2.chapter-7 { background-image: url('buttons/chapter07.png'); width: 116px; }
.arrows .chapter-8 a, h2.chapter-8 { background-image: url('buttons/chapter08.png'); width: 117px; }
.arrows .chapter-9 a, h2.chapter-9 { background-image: url('buttons/chapter09.png'); width: 116px; }
.arrows .chapter-10 a, h2.chapter-10 { background-image: url('buttons/chapter10.png'); width: 125px; }
.arrows .chapter-11 a, h2.chapter-11 { background-image: url('buttons/chapter11.png'); width: 122px; }
.arrows .chapter-12 a, h2.chapter-12 { background-image: url('buttons/chapter12.png'); width: 125px; }

.arrows .intermission-1 a, h2.intermission-1 { background-image: url('buttons/intermission01.png'); width: 160px; }
.arrows .intermission-2 a, h2.intermission-2 { background-image: url('buttons/intermission02.png'); width: 162px; }
.arrows .intermission-3 a, h2.intermission-3 { background-image: url('buttons/intermission03.png'); width: 162px; }
.arrows .intermission-4 a, h2.intermission-4 { background-image: url('buttons/intermission04.png'); width: 162px; }
.arrows .intermission-5 a, h2.intermission-5 { background-image: url('buttons/intermission05.png'); width: 163px; }
.arrows .intermission-6 a, h2.intermission-6 { background-image: url('buttons/intermission06.png'); width: 162px; }
.arrows .intermission-7 a, h2.intermission-7 { background-image: url('buttons/intermission07.png'); width: 162px; }
.arrows .intermission-8 a, h2.intermission-8 { background-image: url('buttons/intermission08.png'); width: 162px; }
.arrows .intermission-9 a, h2.intermission-9 { background-image: url('buttons/intermission09.png'); width: 162px; }
.arrows .intermission-10 a, h2.intermission-10 { background-image: url('buttons/intermission10.png'); width: 168px; }
.arrows .intermission-11 a, h2.intermission-11 { background-image: url('buttons/intermission11.png'); width: 168px; }

.arrows .epilogue a, h2.epilogue { background-image: url('buttons/epilogue.png'); width: 100px; }

.arrows .chapter-gallery a { background-image: url('buttons/gallery.png'); width: 100px;}

.archive h2
{
    text-indent: -9000px;
    background-position: bottom left;
    height: 19px;
}

.archive .thumbnail
{
    float: left;
    margin-top: 0px;
}

.archive hr
{
    clear: both;
    border: 1px solid #918D4A;
}

.tanbox hr
{
    clear: both;
    border: 1px solid #524C24;
}

.news h2
{
    margin: 5px 20px;
    height: 19px;
    width: 62px;
    text-indent: -9000px;
    background: url("buttons/news.png");
}

h2.ssg
{
    height: 19px;
    width: 275px;
    text-indent: -9000px;
    background: url("buttons/sweetandsourgrapes.png");
}

h2.characters
{
    height: 19px;
    width: 141px;
    text-indent: -9000px;
    background: url("buttons/characters.png");
}

h2.extras
{
    height: 19px;
    width: 83px;
    text-indent: -9000px;
    background: url("buttons/extras.png");
    background-position: bottom left;
}

h2.papercraft
{
    height: 19px;
    width: 140px;
    text-indent: -9000px;
    background: url("buttons/papercraft.png");
}

h2.downloads
{
    height: 19px;
    width: 137px;
    text-indent: -9000px;
    background: url("buttons/downloads.png");
}

h2.banners
{
    height: 19px;
    width: 98px;
    text-indent: -9000px;
    background: url("buttons/banners.png");
    background-position: top right;
}

h2.favorites
{
    height: 19px;
    width: 117px;
    text-indent: -9000px;
    background: url("buttons/favorites.png");
    background-position: bottom left;
}

h2.friends
{
    height: 19px;
    width: 88px;
    text-indent: -9000px;
    background: url("buttons/friends.png");
}

h2.author
{
    height: 19px;
    width: 87px;
    text-indent: -9000px;
    background: url("buttons/author.png");
}

h2.feedback
{
    height: 19px;
    width: 112px;
    text-indent: -9000px;
    background: url("buttons/feedback.png");
    background-position: bottom right;
}

h2.tutorials
{
    height: 19px;
    width: 121px;
    text-indent: -9000px;
    background: url("buttons/tutorials.png");
    background-position: bottom left;
}

h2.locations
{
    height: 19px;
    width: 113px;
    text-indent: -9000px;
    background: url("buttons/locations.png");
}

.gallery.sketches h2, .gallery a.sketches
{
    height: 19px;
    width: 109px;
    text-indent: -9000px;
    background: url("buttons/sketches.png");
}

.gallery.fanart h2, .gallery a.fanart
{
    height: 19px;
    width: 89px;
    text-indent: -9000px;
    background: url("buttons/fanart.png");
}

.gallery.ssgart h2, .gallery a.ssgart
{
    height: 19px;
    width: 94px;
    text-indent: -9000px;
    background: url("buttons/ssgart.png");
}

.gallery a.sketches, .gallery a.fanart, .gallery a.ssgart
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.gallery a.sketches:hover, .gallery a.fanart:hover, .gallery a.ssgart:hover
{
    background-position: bottom right;
}

.gallery.image > img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.gallery .prev-next .up
{
    width: 450px;
    text-align: center;
}

.gallery .prev-next .previous, .gallery .prev-next .next
{
    width: 150px;
    text-align: center;
}

.gallery .prev-next .previous img, .gallery .prev-next .next img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.gallery ul.pictures li
{
    list-style: none;
    display: inline;
    margin: 20px;
}

.comment_link
{
    margin-left: 10px;
}

.comment .poster
{
    font-weight: bold;
}

.comment .date
{
    margin-left: 50px;
    margin-right: 20px;
}

#comments form
{
    margin-top: 3em;
}

#comments h2
{
    height: 19px;
    width: 117px;
    text-indent: -9000px;
    background-image: url("buttons/comments.png");
}

/**************/
/* Box common */
/**************/

.news, .gallery, .brownbox, .redbox, .palebox,
.tanbox,.aquabox, .maroonbox, .peachbox, .mossbox
{
    width: 850px;
    background-repeat: repeat-y;
}

.news:before, .gallery:before, .brownbox:before, .redbox:before, .palebox:before,
.tanbox:before, .aquabox:before, .maroonbox:before, .peachbox:before, .mossbox:before
{
    display: block;
    height: 10px;
    width: 850px;
    content: "";
    background: no-repeat black;
}

.news:after, .gallery:after, .brownbox:after, .redbox:after, .palebox:after,
.tanbox:after, .aquabox:after, .maroonbox:after, .peachbox:after, .mossbox:after
{
    display: block;
    height: 10px;
    width: 850px;
    content: "";
    background: no-repeat black;
}

.news > *, .gallery > *, .brownbox > *, .redbox > *, .palebox > *,
.tanbox > *, .aquabox > *, .maroonbox > *, .peachbox > *, .mossbox > *
{
    margin: 10px 20px;
}

/* Brown box */

.brownbox
{ background-image: url('brownbox-middle.png'); }

.brownbox:before
{ background-image: url("brownbox-top.png"); }

.brownbox:after
{ background-image: url("brownbox-bottom.png"); }


/* Red box */

.redbox
{ background-image: url('redbox-middle.png'); }

.redbox:before
{ background-image: url("redbox-top.png"); }

.redbox:after
{ background-image: url("redbox-bottom.png"); }


/* Pale box */

.palebox, .gallery.ssgart, .gallery.fanart, .news
{ background-image: url('palebox-middle.png'); }

.palebox:before, .gallery.ssgart:before, .gallery.fanart:before, .news:before
{ background-image: url("palebox-top.png"); }

.palebox:after, .gallery.ssgart:after, .gallery.fanart:after, .news:after
{ background-image: url("palebox-bottom.png"); }

.palebox h2, .gallery.ssgart h2, .gallery.fanart h2, .news h2
{ background-position: bottom left; }

/* Aqua box */

.aquabox
{ background-image: url('aquabox-middle.png'); }

.aquabox:before
{ background-image: url("aquabox-top.png"); }

.aquabox:after
{ background-image: url("aquabox-bottom.png"); }


/* Peach box */

.peachbox
{ background-image: url('peachbox-middle.png'); }

.peachbox:before
{ background-image: url("peachbox-top.png"); }

.peachbox:after
{ background-image: url("peachbox-bottom.png"); }


/* Moss box */

.mossbox
{ background-image: url('mossbox-middle.png'); }

.mossbox:before
{ background-image: url("mossbox-top.png"); }

.mossbox:after
{ background-image: url("mossbox-bottom.png"); }


/* Maroon box */

.maroonbox
{ background-image: url('maroonbox-middle.png'); }

.maroonbox:before
{ background-image: url("maroonbox-top.png"); }

.maroonbox:after
{ background-image: url("maroonbox-bottom.png"); }


/* Tan box */
.gallery.sketches, .news.even, .tanbox
{ background-image: url("tanbox-middle.png"); }

.gallery.sketches:before, .news.even:before, .tanbox:before
{ background-image: url("tanbox-top.png"); }

.gallery.sketches:after, .news.even:after, .tanbox:after
{ background-image: url("tanbox-bottom.png"); }

.gallery.sketches h2, .news.even h2, .tanbox h2
{ background-position: top left; }

/* Mini box common */
.brownboxmini, .tanboxmini, .mossboxmini
{
    width: 250px;
    background-repeat: repeat-y;
}

.brownboxmini:before, .tanboxmini:before, .mossboxmini:before
{
    display: block;
    height: 10px;
    width: 250px;
    content: "";
    background: no-repeat black;
}

.brownboxmini:after, .tanboxmini:after, .mossboxmini:after
{
    display: block;
    height: 10px;
    width: 250px;
    content: "";
    background: no-repeat black;
}

.brownboxmini > *, .tanboxmini > *, .mossboxmini > *
{
    margin: 5px 20px;
}

/* Brown box mini */
.brownboxmini
{
    background-image: url('brownboxmini-middle.png');
    color: #918d4a;
}

.brownboxmini:before
{background-image: url('brownboxmini-top.png');}

.brownboxmini:after
{background-image: url('brownboxmini-bottom.png');}

.brownboxmini a:link, .brownboxmini a:visited
{  color: #c7ed9a; }

.brownboxmini h2
{ background-position: top right; }

/* Tan box mini */
.tanboxmini
{background-image: url('tanboxmini-middle.png');}

.tanboxmini:before
{background-image: url('tanboxmini-top.png');}

.tanboxmini:after
{background-image: url('tanboxmini-bottom.png');}


/* Moss box mini */
.mossboxmini
{background-image: url('mossboxmini-middle.png');}

.mossboxmini:before
{background-image: url('mossboxmini-top.png');}

.mossboxmini:after
{background-image: url('mossboxmini-bottom.png');}

.mossboxmini h2
{ background-position: bottom left; }


#id_comments
{
    vertical-align: top;
}

#sidebar_ads
{
    margin: 0 auto 1em;
    width: 234px;
}

.sidebarnews h2
{
    height: 19px;
    width: 62px;
    text-indent: -9000px;
    background: url("buttons/news.png");
}

.sidebarnews p
{
    margin-top: 15px;
}

.sociallink
{
    display: block;
    margin: 20px 20px 5px;
}

.logo
{
    float: left;
}

.sociallink span
{
    height: 19px;
    display: block;
    float: left;
    margin-top: 2px;
    margin-left: 10px;
    text-indent: -9000px;
}

.mossboxmini .sociallink span
{
    background-position: bottom left;
}

.brownboxmini .sociallink span
{
    background-position: top right;
}

.sociallink:hover span
{
    background-position: bottom right;
}

#rss span
{
    width: 44px;
    background-image: url("buttons/rss.png");
}

#facebook span
{
    width: 118px;
    background-image: url("buttons/facebook.png");
}

#vote-twc span
{
    width: 118px;
    background-image: url("buttons/votetwc.png");
    
}

#twitter span
{
    width: 97px;
    background-image: url("buttons/twitter.png");
}

#twitter_update_list
{
    padding: 0;
}

#twitter_update_list li
{
    list-style: none;
    margin: 5px 15px 15px;
}

#twitter-link
{
    display: block;
    text-align: right;
    margin: 20px;
}

.boxcolumn
{
    width: 180px;
    float: left;
    margin: 20px 0 0 26px;
    overflow: hidden;
}

.boxcolumn .hoverimg
{
    display: block;
    margin: 0 auto 0 0;
}

.boxcolumn .hoverimg:hover
{
    margin: 0 0 0 -180px;
}