@charset "iso-8859-1"; /******************************************************************************* * skidoo_too.css : 2005.08.29 * ----------------------------------------------------------------------------- * from http://webhost.bridgew.edu/etribou/layouts/skidoo%5Ftoo/ * A remake of the skidoo layout with the middle column appearing * before the left/right columns in source ordering. *******************************************************************************/ /* begin with generic selectors so that they can be overridden if needed * by classes deeper in the stylesheet */ .clear /* appears to have no purpose */ { clear: both; /* no left or right floating elements */ padding-bottom: 1px; /* for Gecko-based browsers */ margin-bottom: -1px; /* for Gecko-based browsers */ } .hide /* elements of class "hide" are for non-css usability */ { display: none !important; } .inside { /* glitch in IE caused by vertical padding in this class, so 0 padding is * set here and those blocks that need the vertical padding must be * applied to the parent element. the purpose of this class is to provide * horizontal padding without using hacks to get around IE's broken box * model. so it's okay to apply vertical padding to the parent element, * just not horizontal padding. */ padding: 0 1em; } /* now we craft the core layout of the page. this includes positioning and * gutter space. colors and fonts should not come into play at this point. * when defining a border, default its color to white which is probably * the safest thing to do. */ body { /* FIXME: "gutter" on whole thing: was 25px 4% */ margin: 0px 0%; /* margin instead of padding for the gutterspace around the layout because IE breaks the layout when horizontal padding is applied to the body element. % over pixels for that horizontal gutterspace so that it automatically goes below 20px on low-res browsers to create more space for the content. */ } body { font-size: 100.1%; /* resolve some font size issues in some layouts for some browsers. (in other words, i got no clue.) */ } #pageWrapper /* a div around everything inside */ { /* a (bottom) border is often appropriate */ min-width: 40em; /* The body is min 40em wide */ /* IE doens't understand this property. EMs are used so that as the font size increases, the proportional limitations (min-width) increase with it, rather than creating a middle column that can only fit 3 or 4 characters in it. */ width: auto; } * html #pageWrapper { /* \*/ word-wrap: break-word; /* invalid CSS but keeps IE from breaking horribly under narrow viewports */ } #masthead /* the header area, first div in body */ { /* a (top) border is often appropriate */ padding: 0.5em; } #masthead > *:first-child, #masthead > *:first-child > *:first-child { /* Attempts to prevent first element from padding/margin */ padding-top : 0; margin-top: 0; } #masthead h1 /* Assume last line is h1 in the masthead. Too specific, but css can't say "last element in masthead" */ { padding-bottom: 0; margin-bottom: 0; } #outerColumnContainer { /* reserves space for the left and right columns. you can use either * padding, margins, or borders, depending on your needs. however you * can use the border method to create a background color for both left * and right columns */ /* FIXME: this is the left & right column width */ border-left: solid 14em #fff; /* Color not relevant */ } #innerColumnContainer /* central column, wrapped in about 4 divs (why?) */ { border-style: solid; border-width: 0 1px; margin: 0 -1px; /* compensate for the borders because of 100% width declaration */ width: 100%; z-index: 1; } #leftColumn, #middleColumn, #rightColumn, * html #SOWrap { overflow: visible; /* fix for IE italics bug */ position: relative; /* fix some rendering issues */ } #SOWrap { float: left; margin: 0 -1px 0 0; width: 100%; z-index: 3; } #middleColumn /* middle content (inside a .inside) */ { float: right; margin: 0 0 0 -1px; width: 100%; z-index: 5; } #leftColumn { float: left; margin: 0 1px 0 -14em; width: 14em; z-index: 4; } #rightColumn { float: right; width: 14em; margin: 0 -14em 0 1px; z-index: 2; } #footer > *:first-child, #footer > *:first-child > *:first-child { /* Attempts to prevent first element from padding/margin */ padding-top : 0; margin-top: 0; } #footer { /* border appropriate */ padding: 0.5em; } * html .vnav ul li a/* hide from IE5.0/Win & IE5/Mac */ { height: 0.01%; } * html .vnav ul { position: relative; /* IE needs this to fix a rendering problem */ } img.paragraph_image_pcenter { margin-left: auto; margin-right: auto; display: block; } img.paragraph_image_top_left { float: left; margin-right: 1em; margin-top: .5em; } img.paragraph_image_bottom_right { float: right margin-left: 1em; margin-top: .5em; vertical-align: top; clear:right; } img.paragraph_image_center_right { float: right; margin-top: .5em; margin-left: 1em; } img.paragraph_image_center_left { float: left; margin-right: 1em; margin-top: .5em; }