@charset "UTF-8";

/*******************************************************************************
*  skidoo_redux.css : 2008.09.30 : ruthsarian@gmail.com
* -----------------------------------------------------------------------------
*  Skidoo is a three-column, float-based layout utilizing negative margins to 
*  provide column placement and cross-browser compatibility. There have been
*  several incarnations of this layout: original skidoo, skidoo too, and now
*  skidoo redux. This is the latest, most compatble and up-to-date version of
*  the skidoo layout available. It is recommended you use this layout and not
*  an older version of skidoo.
*
*  This layout is not for the faint of heart. Beginners will have problems
*  understanding the nuances, but through a little experimentation of different
*  variables, should be able to gain an understanding of what does what. For
*  experienced developers this is best served as a reference tool, explaining
*  what bugs are experienced on what browsing platforms for this and similar
*  layouts. It could be used as a map in working your way through bugs that
*  exist in your own layout. 
*
*  DISCUSSION TOPICS
*    - why left/right margins need (semi-)static widths (ie. no percentages)
*    - setting width of left/right columns
*    - why columns drop
*    - a general overview of float-based layouts and why they're "funny"
*
* ------------------------------------------------------------------------------
*  This stylesheet is released into the public domain.
*******************************************************************************/

/*******************************************************************************
 * EXTERNAL STYLESHEETS
 *
 * visual_consistencies.css
 *   - sets margins and padding on generic HTML elements so that every browsers
 *     has the same values rather than relying on the default values which vary
 *     between browsers
 *
 * rmenu.css
 *   - menu system based on unordered lists. too much to explain here, see
 *     the referenced stylesheet for more information.
 */

/*******************************************************************************
 * BASIC LAYOUT MECHANICS
 *
 * GENERAL NOTES
 *   - yes, that's a lot of DIVs for a three-column layout. there is a reason
 *     it all. first, all the columns must be floated to prevent a 3-pixel text
 *     jog (a bug) that IE/Win 6 and earlier have. I can't use CSS hacks around
 *     this one and need the extra markup. But using all floats can have
 *     positive consequences, especially when using floated elements that need
 *     to be cleared, but without clearing the other columns of the layout.
 *   - NEGATIVE MARGINS is an approach to the three-column CSS layout that seems
 *     to have the most compatibility and potential. the real strength of this
 *     idea is to have the ability to provide different colors (or images) as
 *     the background for each column. traditional three-column layouts can't
 *     do this because the columns are only as tall as needed to fit their
 *     content. in other words they don't run the full height of the layout.
 *     negative margins gives us a means to fake this functionality. borders
 *     (or padding, or margins) applied on #outer-column-container reserve the
 *     space where the left and right columns will live. all three columns are
 *     floated. since the columns are cleared inside #inner-column-container,
 *     #inner-column-container (and #outer-column-container) will be as tall as
 *     the tallest of the three columns. this means the borders will also be 
 *     this tall, giving the visual appearance that all three columns are the
 *     same height. 
 *
 * #page-container
 *   - wraps the entire page. use this to set min/max widths and set any margins
 *     or border that wraps the whole layout.
 *
 * #outer-column-container
 *   - reserves space for the left and right columns. using borders allows you
 *     to use the border color to act as the background color for the left and
 *     right columns. background color could then act as the background of the
 *     middle column.
 *
 * #inner-column-container
 *   - provides the single-pixel black border between the middle column and
 *     its outside brothers.
 *
 * #source-order-container
 *   - source ordered layouts place the main content at the top of the page. to
 *     do this with CSS in a three-column layout you need to wrap two of the
 *     three columns in an element (DIV) to float them together as if it was a
 *     a single column.
 *   - this element contains both the #middle-column and #left-column elements.
 *
 * #middle-column, #left-column, #right-column
 *   - containers for the each of the three columns in the layout
 *
 * #footer
 *   - bottom of your webpage. a place to put copyright and contact information
 *
 * .clear-columns
 *   - this class is assigned to an empty div placed after the last (floating)
 *     column inside a block that contains two or more floating columns. it 
 *     clears the floats, forcing the element containing the columns to 
 *     visually contain all of its columns. there are alternative approaches
 *     to clearing which do not require this extra markup (see
 *     http://www.positioniseverything.net/easyclearing.html) however I find
 *     this method is much more effective and compatible for the task at hand.
 *     also, it should be evident by now that markup bloat is not a concern
 *     with this particular layout. 
 */
.clear-columns
{
  clear: both;
}
#outer-column-container
{
  border-left: solid 13em #fff;  /* left column's width and background
                     color */
  border-right: solid 13em #fff;  /* right column's width and background
                     color */
}
#inner-column-container
{
  width: 100%;  /* force this element to take the full width
             between the left and right columns. this is
             especially important as children of this
             element will have width:100%; set, and how
             that 100% value is interpreted depends on
             the width of it's parent (this element). */
}
#source-order-container
{
  float: left;    /* float left so the right column, which is
               outside this element, has a place to go. */
  width: 100%;    /* force this to go as wide as possible */
}
#left-column
{
  float: left;    /* float left, where it'll live */
  margin-left: -13em;  /* move it further left. the value here should
               be the same value as the left border width
               on #outer-column-container, but negative */
  width: 13em;    /* need to set a definite width, should be the
               same width as the left border width on
               #outer-column-container */
}
#middle-column
{
  float: right;    /* middle column goes right of the left column
               since the two share the same parent 
               element */
  width: 100%;    /* make the middle column as wide as possible
               for a fluid layout. this is not possible
               if it's parent element, 
               #source-order-container, wasn't also at
               100% width */
}
#right-column
{
  float: right;      /* float on the right side of the layout */
  margin-right: -13em;  /* move it further right. the value here should
                 be the same value as the right border width
                 on #outer-column-container, but negative */
  width: 13em;      /* need to set a definite width, should be the
                 same width as the right border width on
                 #outer-column-container */
}

/*******************************************************************************
 * BASE THEME
 *
 * Setup basic styling for the layout. This will set gutterspace and generate a
 * basic border structure for the layout. Real layout styling belongs in a 
 * separate "theme" stylesheet; leave this stylesheet untouched.
 */
body
{
  background-color: #ccc;
  color: #000;
  padding: 0;    /* padding on the body element when
             javascript min-width is in use will
             create problems in IE/Win 6. */
  margin: 14px 0;  /* horizontal margins belong on
             #page-container. vertical margins
             are not there as well due to small
             rendering issues in IE/Win 5 when
             viewport is shorter than webpage */
}
#page-container
{
  background-color: #fff;  /* background for the middle column */
  border: solid 1px #000;  /* border around the entire layout */
  min-width: 50em;    /* limit how narrow the layout will
                 shrink before it stops. */
  margin: 0 14px;      /* horizontal margins here instead of on 
                 the body because we're setting min-
                 width on this element. if margins set 
                 on body users will see an odd skip in 
                 the layout's rendering as it's 
                 resized below min-width. (JS-based 
                 min-width only.) */
}
#masthead
{
  border-bottom: solid 1px #000;  /* three of the four sides of this block
                     will already have borders courtesy of
                     the #page-container element so we 
                     only need to render the bottom. */
  padding-top: 1px;        /* prevent margin collapse. would need 1px
                     bottom padding too if we didn't have the
                     1px bottom border. */
}
#inner-column-container
{
  border: solid 1px #000;
  border-width: 0 1px;
  margin: 0 -1px;      /* compensate for the borders because of
                 100% width declaration */
}
#middle-column div.rMenu-center
{
  border-bottom: solid 1px #000;  /* border along the bottom of the 
                     horizontal menu at the top of
                     the middle column */
}
#footer
{
  border-top: solid 1px #000;  /* same situation as the masthead but
                   this time we're rendering the top
                   border. */
  padding-bottom: 1px;    /* prevent margin collapse. would need a top
                   padding of 1px too if we didn't have that
                   1px border. */
}
.inside
{
  margin: 10px;      /* margin, instead of padding, used to 
                 induce margin collapse if needed by 
                  child elements */
}


/******************************************************************************/