body {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    color: black;
    background: #eef url(layout/papertexture.png);
    padding: 0px;
    margin: 0px;
    text-transform: lowercase;
}

a {
    color: white;
    text-shadow:
    -1px -1px 0px black,
    -1px  0px 0px black,
    -1px  1px 0px black,
    0px -1px 0px black,
    0px  0px 2px black,
    0px  1px 0px black,
    1px -1px 0px black,
    1px  0px 0px black,
    1px  1px 0px black,
    0px 0px 4px black,
    0px 0px 5px black
    ;
}
a:visited { color: #eee; }
a:hover { color: #fcf; font-weight: bold; }
a:active { color: #f77; }

h1 {
    text-align: center;
    font-size: 250%;
    margin: 32px 32px 0px;
    padding: 32px;
    background: white;
    border: solid black 1px;
    border-radius: 1em;
    box-shadow: 0px 10px 15px rgba(0,0,0,0.5);
}
h1 span {
    background-image: url(layout/favicon-big.png);
    background-size: 1em 1em;
    padding-left: 1.2em;
    background-repeat: no-repeat;
    height: 1em;
    font-weight: normal;
}

h2 {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

#container {
    padding-bottom: 32px;
}

@media {
    #container {
	position: absolute;
	left: 50%;
    }
}

/* one column: 258 + 32*2 = 322 */
@media (max-width: 611px) {
    #container { width: 322px; margin-left: -161px; }
}
/* two columns: 258*2 + 32*3 = 612 */
@media (min-width:612px) {
    #container { width: 612px; margin-left: -306px; }
}
/* three columns: 258*3 + 32*4 = 902 */
@media (min-width:902px) {
    #container { width: 902px; margin-left: -451px; }
}
/* four columns: 258*4 + 32*5 = 1192 */
@media (min-width:1192px) {
    #container { width: 1192px; margin-left: -596px; }
}

.panel {
    display: block;
    margin: 32px 0px 0px 32px;
    border: solid black 1px;
    float: left;
    width: 256px;
    box-shadow: 0px 10px 15px rgba(0,0,0,0.5);
}

.panel:hover {
    box-shadow: 0px 20px 25px rgba(1,1,1,0.5);
}

.panel a { position: relative; z-index: 1; }
.panel .foot a { z-index: 3; }

.panel a:hover {
    /*background-color: rgba(1,1,0,0.5);
      box-shadow: 0px 0px 15px #000, 0px 0px 10px rgba(1,1,0.5,0.5);*/
    z-index: 2;
}
.panel .foot a:hover { z-index: 4; }

#topgrid .panel {
    height: 540px;
}

#bottomgrid .panel {
    height: 190px;
}

#metainfo .panel {
    height: 92px;
}

.panel { background: white; }
.panel .foot span { display: none; }

.panel ul { list-style-type: none; margin: 0px; padding: 0px; }
.panel ul li { margin: 0px; padding: 0px; }

.panel a { }
.panel a:hover { background-position: -256px 0px; }

.panel a { display: block; width: 256px; text-decoration: none; }
.panel h2 { padding-top: 32px; position: relative; top: -.5em; }
.panel span { position: relative; top: 0.5ex; left: 0.5ex; }

#topgrid .full a { height: 540px; }
#bottomgrid .full a { height: 190px; }

.head { height: 64px; }
.head a { height: 64px; }

.foot { position: absolute; width: 256px; }
#topgrid .foot { margin-top: 412px; }
/*#bottomgrid .foot { margin-top: 126px; }*/
.foot li { width: 64px; height: 64px; }
.foot li a { width: 64px; height: 64px; }
.foot li a:hover { background-position: -64px 0px; }

#comics a { background-image: url(layout/comics.jpg); }

#music .body a { height: 476px; } /* 540 - 64 */
#music .head a { background-image: url(layout/music-header.png); }
#music .sockpuppet { background-image: url(layout/sockpuppet.jpg); }
#music .lastfm { background-image: url(layout/lastfm-icon.png); }
#music .soundcloud { background-image: url(layout/soundcloud.png); }
#music .ccmixter { background-image: url(layout/ccmixter.png); }
#music .foot { margin-top: 284px; }
#music .foot li { float: right; clear: right; }

#art { background-image: url(layout/couch-fabric.jpg); }
#art .body li a { height: 103px; } /* (540 - 2*64)/4 */
#art .head a { background-image: url(layout/art.png); }
#art a.photography { background-image: url(layout/photography.jpg); }
#art a.drawings { background-image: url(layout/drawings.jpg); }
#art a.writing { background-image: url(layout/words.jpg); }
#art a.code { background-image: url(layout/code.png); }
#art a.weasyl { background-image: url(layout/weasyl.png); }
#art a.flickr { background-image: url(layout/flickr.png); }
#art a.git { background-image: url(layout/git.png); }
#art .foot li { float: left; }

#blather .body li { float: left; }
#blather .body li a { width: 128px; height: 63px; } /* (190 - 64)/2 */
#blather .body li a:hover { background-position: -128px 0px; }
#blather .head a { background-image: url(layout/blather.png); }
/*#blather:hover .head { background-position: -256px 0px; }*/

#blather a.blog { background-image: url(layout/plaidophile.png); }
#blather a.tumblr { background-image: url(layout/tumblr.png); }
#blather a.twitter { background-image: url(layout/twitter.png); }
#blather a.lj { background-image: url(layout/livejournal.png); }

#store a { background-image: url(layout/store.jpg); }

#metainfo li { float: left; }
#metainfo li a { width: 128px; height: 92px; }
#metainfo li a:hover { background-position: -128px 0px; }

#metainfo a.sitemap { background-image: url(layout/sitemap.png); }
#metainfo a.legal { background-image: url(layout/legal.png); }