/*******************************************************************************
*  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
 *
 */
@import "visual_consistencies.css";

/*******************************************************************************
 * 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 #conteneurExterieur reserve the
 *     space where the left and right columns will live. all three columns are
 *     floated. since the columns are cleared contenu #conteneurInterieur,
 *     #conteneurInterieur (and #conteneurExterieur) 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. 
 *
 * #cadre
 *   - wraps the entire page. use this to set min/max widths and set any margins
 *     or border that wraps the whole layout.
 *
 * #conteneurExterieur
 *   - 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.
 *
 * #conteneurInterieur
 *   - provides the single-pixel black border between the middle column and
 *     its outside brothers.
 *
 * #conteneurSourceOrder
 *   - 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 #centre and #gauche elements.
 *
 * #centre, #gauche, #droite
 *   - containers for the each of the three columns in the layout
 *
 * #pied
 *   - bottom of your webpage. a place to put copyright and contact information
 *
 * .clear
 *   - this class is assigned to an empty div placed after the last (floating)
 *     column contenu 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
{
    clear: both;
}
#conteneurExterieur
{
    border-left: solid 200px transparent; /* left column's width and background color */
    border-right: solid 200px transparent; /* right column's width and background color */
}

#conteneurInterieur
{
    /* 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). */
    width: 100%;
}

#conteneurSourceOrder
{
    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 */
}
#gauche
{
    float: left; /* float left, where it'll live */
    margin-left: -200px; /* move it further left. the value here should 						   be the same value as the left border width 						   on #conteneurExterieur, but negative */
    width: 200px; /* need to set a definite width, should be the 						   same width as the left border width on 						   #conteneurExterieur */
}
#centre
{
    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,  						   #conteneurSourceOrder, wasn't also at 						   100% width */
}
#droite
{
    float: right; /* float on the right side of the layout */
    margin-right: -200px; /* move it further right. the value here should 							   be the same value as the right border width 							   on #conteneurExterieur, but negative */
    width: 200px; /* need to set a definite width, should be the 							   same width as the right border width on 							   #conteneurExterieur */
}

/*******************************************************************************
 * 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: 0; /* horizontal margins belong on 					   #cadre. vertical margins 					   are not there as well due to small 					   rendering issues in IE/Win 5 when 					   viewport is shorter than webpage */
}
#cadre
{
    width: 900px;
    /*background-color: #fff;*/ /* background for the middle column */ /*border: solid 0px #000;*/ /* border around the entire layout */
    min-width: 50em; /* limit how narrow the layout will 							   shrink before it stops. */
    margin: 0 auto; /* 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.) */
}
#entete
{
    /*border-bottom: solid 1px transparent;*/ /* three of the four sides of this block 									   will already have borders courtesy of 									   the #cadre element so we  									   only need to render the bottom. */
    padding-top: 0px; /* prevent margin collapse. would need 1px 									   bottom padding too if we didn't have the 									   1px bottom border. */
    padding-bottom: 0px;
}
#conteneurInterieur
{
    /*border: solid 1px #c2c2c2;
    border-width: 0 1px;
    margin: 0 0px;*/
     /* compensate for the borders because of 100% width declaration */
}
#pied
{
    /* same situation as the entete but this time we're rendering the top border. */
    /*border-top: solid 1px transparent;*/ /* prevent margin collapse. would need a top padding of 1px too if we didn't have that 1px border. */
    padding-bottom: 1px;
    padding-top: 1px;
}
.contenu
{
    /* margin, instead of padding, used to induce margin collapse if needed by child elements */
    margin: 10px;
}

/*				#conteneurExterieur, #conteneurInterieur { border-right-width: 0; }
				#droite {	display: none; }
				#conteneurSourceOrder { margin: 0; }
 */

/*******************************************************************************
 * HACKS
 *
 * Not all browsers are created equal. Many CSS engines behave differently
 * and can create discrepencies in the rendering of your layout across different
 * browsing platforms. These hacks are aimed to resolve those discrepencies
 * and provide a more consistent look to the layout.
 *
 * CSS hacks work by playing to a bug in the CSS engine or parser for a given 
 * browser. This forces the browser to either apply or ignore a rule that other
 * browsers wouldn't. This lets you apply rules to work around bugs in a specific
 * browser that would otherwise break the layout. 
 *
 * It's important that when you use a CSS hack you do so in a way that is as
 * specific in targeting the problem browser as possible. Some hacks might
 * work for two or three different platforms, but you only need to apply it on
 * one platform. You might find that this hack has no adverse effects on those
 * other two platforms right now, but in a later version the hack might create
 * problems. Save yourself the headache and do as much as you can to narrow
 * the target of a CSS hack as much as possible.
 *
 * COMMON HACKS USED HERE
 *
 * The star-html hack (* html) targets Internet Explorer, both Windows and Mac,
 * for versions 6 and earlier. There is no element higher up in the page
 * than the HTML element. IE seems to think otherwise. Rules applied to any
 * selector that begins with "* html" will be ignored by just about every
 * browser except Internet Explorer. So any selector given below that begins
 * with "* html" is targetted at Internet Explorer.
 *
 * The backslash-star comment hack targets IE/Mac. CSS comments end with an 
 * asterisk and forward slash. Anything after that closing comment mark will
 * be interpreted as as CSS rule. However if you prefix that closing comment
 * mark with a backslash, IE/Mac won't recognize that the comment has been
 * closed, but other browsers will. So any rules that come after the hacked
 * closing comment will be applied by any browser except IE/Mac until a 
 * non-hacked closing comment is found. 
 *
 * With the above two hacks outlined, it's possible to target IE on a specific
 * OS platform. This is important as the CSS and rendering engines for Mac and
 * Windows are completely different and have very different requirements in
 * terms of hacks.
 *
 * You may see other empty comments in wierd places, those are variations on
 * another comment hack to help target specific version of IE/Win (separating
 * IE 5 from IE6 typically). 
 *
 * One other you'll see is a height setting of 0.1%. This is to trigger
 * hasLayout (see reference section below). IE (at least pre-version 7) 
 * will automatically expand a box beyond it's set height if its content
 * is too tall. Setting height to 100% also works, but this can lead to
 * problems where an element that should only be a few pixels tall turns
 * out to be as tall as the rest of the page. By setting it to 0.1% you
 * minimize the chance of elements being set taller than they need to be.
 *
 * WHY USE HACKS?
 *
 * For compatibility sake. Specifics on what each hack does, and why its
 * used, is provided with the rule or ruleset in question. However, the 
 * majority of hacks used have to do with an internal property in IE
 * called hasLayout. The first item in the reference section below has
 * all you could ever want to know, and more, about hasLayout.
 *
 * REFERENCE
 *	http://www.satzansatz.de/cssd/onhavinglayout.html
 *	http://www.communis.co.uk/dithered/css_filters/css_only/index.html
 */
.clear
{
    /* hide from IE/Mac \*/
    padding-bottom: 1px;
    margin-bottom: -1px; /* this padding/margin hack is here for 							   older Mozilla engines (Netscape 7, 6, 							   FireFox pre 2.0) which will not allow  							   an element to clear unless it has some  							   effect on how the rest of the layout  							   renders (ie, it takes up space).  							   Hidden from IE/Mac as it triggers a  							   horizontal scrollbar. */
}
* html #cadre
{
    /* hide from IE/Mac \*/
    height: 0.1%; /* IE/Win 5 needs this to prevent rendering 						   issues if a minimum width is applied to 						   this element and the viewport is sized 						   narrower than it's minimum width. however 						   this breaks IE/Mac so a comment hack is 						   used to hide it. */
    /* IPK : position: relative pose un problème avec les popup extenders */
    position: relative; /* IE/Mac 5.0 seems to need this. without it 						   any child element with position: relative 						   isn't rendered. */
}
* html #centre, * html #gauche, * html #droite, * html #conteneurSourceOrder
{
    /* hide from IE/Mac \*/
    overflow: visible; /* a bug through IE/Win 6 causes the widths of 						   text boxes to be calculated narrower than 						   they render, causing overflow of their parent 						   elements. we need to explicitly handle this 						   overflow. IE/Win 5.0 does not handle visible 						   overflow correctly and so on some layouts, 						   at some viewport widths you'll get a  						   horizontal scroll bar. */ /* hide from IE/Mac \*/
    
    /* IPK : position: relative pose un problème avec les popup extenders */
    /*position: relative;*/ /* this resolves rendering bugs in IE/Win. 						   without this the columns don't render on 						   screen or text jog. */
    
}
* html #centre
{
    margin-right: -4px; /* fix 3-pixel text jog in IE/Win 5.0. 							   -4px because we also have to 							   compensate for the overlaps from 							   the left and right columns */
    margin-right: /* */ 0; /* reset value on 5.5 and later using 							   comment hack to hide this rule from 5.0 */
}
* html #centre .contenu
{
    margin-right: 14px; /* compensate for negative margin in 								   previous rule */
    margin-right: /* */ : 10px; /* reset margins for 5.5 and later */
}
* html #entete, * html #pied
{
    /* hide from IE/Mac \*/
    height: 0.1%; /* this is to fix an IE 5.0 bug. setting this 						   value forces these elements to contain their 						   child elements, meaning margins will no 						   longer collapse. */
    height: /**/ auto; /* reset for IE/Win 5.5 and later by hiding 						   this rule from 5.0 with the empty comment 						   hack. also hidden from IE/Mac for the same 						   reason. */
}
* html #entete .contenu, * html #pied .contenu
{
    margin-top: 0;
    margin-bottom: 0; /* since margins no longer collapse due to  						   previous rules we remove vertical margins 						   from the .contenu class */
    margin: /* */ 10px; /* reset for IE 5.5 and later */
}
* html .contenu
{
    margin: 10px 0.75em; /* i don't yet understand this bug in IE 5.0 							   which forces the right column down if the 							   side margins are at a very specific value. 							   if your side column widths are set in EMs, 							   0.75em seems to work fine. */
    margin: /* */ 10px; /* reset for IE 5.5 and later */
}
* html #conteneurInterieur
{
    display: block;
}
* html #conteneurSourceOrder
{
    margin-right: -100%; /* IE/Mac will force #conteneurSourceOrder 							   to the width of #gauche, even though 							   that element is no longer contenu it. this 							   negative margin will help IE/Mac keep the 							   three columns together under narrower  							   viewports than normal. 	/* \*/
    margin-right: -1px; /* reset the above hack for IE/Win */
}
#gauche, #droite
{
    /* IPK : position: relative pose un problème avec les popup extenders */
    /*position: relative;*/ /* resolve issues with links in left and right 						   columns not being clickable in Safari */
}

/*******************************************************************************
 * OVERSIZED SYSTEM FONT HACK
 *
 * Windows machines can have their screen DPI altered among other features 
 * to provide accessibility to those with vision impairments. One relatively
 * obscure feature increases font sizes in such a way that rounding errors
 * in calculating font sizes are triggered in IE. The result is floating boxes
 * start dropping or become misaligned. The fix is a negative 1 pixel margin 
 * to certain floated elements to resolve the issue. Below is a set of a rules
 * that targets this issue for all versions of IE up through IE7.
 */
*:first-child + html #centre
{
    margin-right: -1px;
}
*:first-child + html #conteneurSourceOrder
{
    margin-left: -1px;
}
* html #centre
{
    margin-right: -1px;
}
* html #conteneurSourceOrder
{
    margin-left: -1px;
}

/*******************************************************************************
 * OVERLAP HACK
 *
 * Some browsers, most notably older versions of Gecko (Netscape 7, FF 1.5
 * & earlier) have a problem with the negative margin approach used in this 
 * layout: the two side columns won't be cleared if they exist entirely outside 
 * the space of the parent element (#conteneurInterieur) where we clear the 
 * three columns. So they need to be made to overlap the area of the middle 
 * column by at least 1 pixels. This is why the outer columns have a 1 pixel 
 * margin on their inner edge and the middle column (and conteneurSourceOrder)
 * have negative margins (to make room for the 1px margin from the outer
 * columns).
 *
 * 
 */
#conteneurSourceOrder
{
    margin-right: -1px; /* make room for the droite's overlap. */
}
#gauche
{
    margin-right: 1px; /* overlap the middle column to help with 						   clearing. see general notes above. */
}
#centre
{
    margin-left: -1px; /* make room for the gauche's overflap */
}
#droite
{
    margin-left: 1px; /* overlap the middle column */
}
* html #gauche, * html #conteneurSourceOrder
{
    margin-right: 0; /* undo the overlap for IE */
}
* html #droite, * html #centre
{
    margin-left: 0; /* undo the overlap for IE */
}
*:first-child + html #gauche, *:first-child + html #conteneurSourceOrder
{
    margin-right: 0; /* undo the overlap for IE */
}
*:first-child + html #droite, *:first-child + html #centre
{
    margin-left: 0; /* undo the overlap for IE */
}

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