/* 
    I haven't provided any comments in my CSS, but if you'd like to learn about the techniques I used here are some resources,
    "jello mold" layout: http://www.positioniseverything.net/articles/jello-expo.html
    fixed positioning: http://www.gunlaug.no/contents/wd_additions_15.html
    clearing: http://positioniseverything.net/easyclearing
 */

body { margin: 0; padding: 0; font: 69%/1.8em verdana; word-spacing: .20em; letter-spacing: 0; }
#fauxBody { margin: 0; padding: 43px 260px 100px 260px; text-align: center; }
#sizer { margin: 0 auto; width: 36%; max-width: 200px; }
#expander { position: relative; margin: 0 -260px; min-width: 520px; }
#wrapper { width: 100%; }

#content { margin-right: 220px; text-align: left; }
#content .copy { padding: 26px 0 8px 0; border-width: 5px; border-style: solid; }
#content .copy * { margin-left: 35px; margin-right: 35px; }
#content .copy * * { margin-left: auto; margin-right: auto; }
#content .copy dt { font-weight: bold; }
#content .copy ul { margin-right: 0; }
#content .copy div { margin-bottom: 1.9em; font-size: 1em; }
#content h2 { position: relative; display: block; height: 46px; margin: 0; padding: 0; font: normal 3em georgia, serif; overflow: hidden; }
#content h2 span { position: absolute; display: block; height: 46px; margin: 0; padding: 0; background-repeat: no-repeat; }

#sidebar { float: right; display: inline; width: 180px; text-align: left; }
#sidebar .copy { padding: 14px 0 0 0; border-width: 0 5px 5px 5px; border-style: solid; line-height: 1.45; }
#sidebar .copy * { margin-left: 15px; margin-right: 15px; }
#sidebar .copy * * { margin-left: auto; margin-right: auto; }
#sidebar .copy ul { position: static; margin-top: -1.9em; padding: 0 0 0 1.5em; }
#sidebar .avatar { float: left; padding: 0 7px 0 0; }
#sidebar .avatar img { border-width: 1px; border-style: solid; }

#header, #footer { position: fixed; z-index: 100; width: 100%; color: #fff; background-color: #444; }
#header a:link, #header a:visited { font-size: 1em; color: #fff; }
#header a:hover, #header a:active { font-size: 1em; color: #ccc; }
#header #shadow { display: block; height: 23px; }

#footer { bottom: 0; height: 64px; }
#footer p { height: 32px; margin: 0; padding: 0; border-top: 32px solid #555; }
#footer a { position: relative; left: 50%; bottom: 32px; display: block; height: 32px; color: #fff; background-color: #555; font: 1.7em georgia, serif; text-decoration: none; }
#footer a span { position: absolute; display: block; height: 32px; margin: 0; padding: 0; background-color: #555; background-repeat: no-repeat; cursor: pointer; } 

#tocControl { display: block; font-weight: bold; text-align: center; }
#tocControl a { padding-right: 15px; background-position: bottom right; background-repeat: no-repeat; }
#tocControl a:link, #tocControl a:visited { background-image: url(/img/arrow_down.gif); }
#tocControl a:hover { color: #ccc; background-image: url(/img/arrow_down_on.gif); }
#tocControl a:active, #tocControl a.open:link, #tocControl a.open:visited { color: #fff; background-image: url(/img/arrow_up.gif); }
#tocControl a.open:link, #tocControl a.open:visited { background-image: url(/img/arrow_up.gif); }
#tocControl a.open:hover { color: #ccc; background-image: url(/img/arrow_up_on.gif); }

#toc { z-index: 600; position: fixed; top: 1.8em; left: 50%; height: 387px; overflow: auto; width: 613px; margin-left: -306px; color: #000; background-color: #444; border-color: #222 #000 #000 #222; border-width: 1px 2px 2px 2px; border-style: solid; }
#toc table { width: 583px; margin: 15px;  }
#toc table tr { vertical-align: top; }

#toc h2 { clear: left; height: 19px; overflow: hidden; margin: 1em 0 .5em 20px; padding: 0; color: #fff; font: normal 2em georgia, serif; text-indent: -1000em; text-align: left; }
#toc h2 span { display: block; height: 19px; width: 102px; margin: 0; padding: 0; text-indent: -1000em; }
#toc h2#tocPortfolio span { background: transparent url(/img/txt_invrtd_portfolio.gif) no-repeat; }
#toc h2#tocPersonal span { background: transparent url(/img/txt_invrtd_personal.gif) no-repeat; }
#toc h2#tocGames span { background: transparent url(/img/txt_invrtd_games.gif) no-repeat; }

#toc p { margin: -1.9em 0 0 20px; clear: left; }
#toc p, #toc strong { color: #fff; }
#toc ul { position: static; margin: 0; padding: 0 0 8px 20px; width: 575px; float: left; list-style-type: none; }
#toc ul li { float: left; margin: 0; padding: 0 12px 12px 0; }

#toc a:link, #toc a:visited { float: left; color: #fff; padding: 1px 7px 2px 7px; border: 1px solid #666; background-color: #111; text-decoration: none; white-space: nowrap; }
#toc a:hover, #toc a:active { color: #ccc; background-color: #000; }

#toc #portfolioLinks a:hover { color: #afd1e2; }
#toc #personalLinks a:hover { color: #cde0ca; }


#auxiliaryLinks { position: absolute; top: 0; right: 0; display: block; margin: 0 1em 0 0; white-space: nowrap; }

#totem { position: relative; display: block; height: 188px; width: 180px; margin: 17px 0 0 0; padding: 0; }
#totem span { position: absolute; display: block; height: 188px; width: 180px; margin: 0; padding: 0; background-repeat: no-repeat; }

h1 { position: absolute; margin: 0 0 0 .5em; padding: 0; font-size: 1em; font-weight: normal; line-height: 20px; }
h3, h4 { margin: 0; font: bold 1em/1.8em verdana; }
h3 { font-size: 1em; }

h4 { /* font-weight: normal; */ font-style: italic; margin-bottom: 0; }
p { margin: 0 0 1.9em 0; font-size: 1em; }
ul, ol { margin: 0 -2em 0 0; padding: .1em 0 1.9em 2em; position: relative; left: -2em; list-style-type: circle; }
li { margin: 0; padding: 0;}
a { font-size: 1em; }
a img { border: 0; }
code { font: 1.1em/1.2em "courier new",courier, monospace; }
blockquote { padding: 0 2em 0 1.5em; font-style: italic; }

.loading { height: 75px; background: #ccc url(/img/ajax-loader.gif) no-repeat center center; }
.loading * { display: none; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-table; }