/* FOR ANYONE STUPID ENOUGH TO BE TRYING TO USE MY CSS AS A GUIDE:
 * This is still a draft version. It makes my site look the way I want it to,
 * and seems to do so on a wide variety of browsers. However, I'm still
 * trying to figure out how to put this into an easily maintainable form. So
 * don't count on it to make sense. Not yet, at least.
 */

/* hb0001.css
 * Initial CSS design for the hyperblazer.net website.
 * (c)2006 David W.H. Swenson.
 */

/* BEGIN STRUCTURE **********************************************************/
/* Structure contains the overall structure of the document */

/* 
 * Structure largely thanks to Matthew Levine's excellent article:
 * http://www.allistapart.com/articles/holygrail
 *
 * Abbreviations used herein : 
 * LCW = 11em = left column width (including padding)
 * RCW = 0em = right column width (including padding)
 * CCP = 1em = padding between columns
 * MBP = 1em = padding between viewport margin and main section
 * VP = 1em = vertical padding
 * X = 2000em = some large number
 */

body {
    position : absolute;
    min-height : 98%;
    min-width : 98%;
}

#header {
    position : relative;
    left : -1px;
    top : 0px;
    padding-left : 1em;
    padding-right : 1em;
    padding-bottom : 5px;
}

#main {
    position : relative;
    left : -2px;
    margin-bottom : 0;
    margin-right : 0em; /* for some reason */
    padding-left : 12em;  /* LCW */
    padding-right : 4em;  /* RCW + CCP + MBP + MBP ==== no */
    min-width : 33em;     /* 3 LCW -- design choice */
    overflow : hidden;
}

#content {
    position : relative;
    left : 1em; /* MBP */
    float : left;
    width : 100%;
    margin-left : 1em; /* MBP */
    padding-left: 1em; /* CCP */
    padding-bottom: 2000em; /* X + VP */
    margin-bottom : -2000em; /* -X */
}

#section_nav {
    position : relative;
    float : left;
    width : 12em; /* LCW */
    padding : 1em; /* CCP */
    right : 14em; /* LCW + CCP + MBP */
    margin-left : -100%; /* pulls across center column (content) */
    padding-bottom: 2000em; /* X + padding */
    margin-bottom : -2000em; /* -X */
}

#etc {
    position : relative;
    float : left;
    width : 0; /* right column width */
    margin-right : -0px; /* - right column width */
    padding-bottom: 2000em; /* X + padding */
    margin-bottom : -2000em; /* -X */
}

#footer {
    clear : both;
    position : relative;
    margin : 1em;
}

/* IE6 Hacks (I hate IE) */
* html #section_nav { /* column structure */
/*  left : 0; /* right column width */
}

* html body { /* equal columns */
    overflow : hidden;
}

* html #footer_wrap { /* equal columns */
    float : left;
    position : relative;
    width : 100%;
    padding-bottom : 10010px;
    margin-bottom : -10000px;
}
/* END STRUCTURE */


/* BEGIN LAYOUT *************************************************************/
/* Layout adds details like borders to the structure */
#main {
}

#borderdiv {
    padding : 0;
    margin : 1em;
    margin-top : 0;
    border : 1px dashed #bbbbff;
}

#section_nav {
    border : 0px dashed #ffffff;
    border-right : 1px dashed #bbbbff;
}


/* END LAYOUT */

/* BEGIN TYPOGRAPHY *********************************************************/
/* Typography contains details of fonts and colors */

/* END TYPOGRAPHY */

body { 
    background-color : #000000;
    color : #bbbbff ;
}

* html #footer_wrap { /* part of IE Hack, equal columns */
    background : #000000; /* body background color */
}

a:link            { color : #3333ff }
a:visited         { color : #4422bb }
a img             { border : none; }

#header           { 
    z-index : 1;
}


#footer           {
    z-index : 1;
    padding-left : 1em;
    padding-right : 1em;
    padding-top : 2px;
    padding-bottom : 2px;
    margin : 1em;
    border:1px dashed #bbbbff;
}