/* * @name layout * @type tripoli plugin * * @desc Quick and ready-to-use CSS layout templates. * Full browser support from IE5/WIN and IE5/OSX. * Content first - same HTML markup in all layouts. * Two fixed widths using em (normal or wide). * Equal columns option (experimental - ignored by IE5/osx and Opera < 9. Buggy in IE5/win). * * @author David Hellsing * @version 1.0 * @cat plugins * * * @example layout: * @desc creates a layout with two columns (33%-66%) * * @example layout: * @desc creates a wide layout with three equal height columns (33%-33%-33%) * * @documentation layout body classes: * * .l1: 2-column 66% - 33% * .l2: 2-column 33% - 66% * .l3: 2-column 50% - 50% * .l4: 3-column 33% - 33% - 33% * .l5: 3-column 16% - 66% - 16% * .l6: 3-column 25% - 50% - 25% * .l7: 3-column 66% - 16% - 16% * .l8: 3-column 50% - 25% - 25% * .l9: 3-column 25% - 25% - 50% * * .wide: 125% width * .equal: equal columns * * @documentation html structure: *

**/ * html body { text-align:center; } #container { position:relative; width:76em; text-align:left; margin:0 auto; } #header { position:relative; } #primary,#secondary,#tertiary { position:relative; float:left; } * html #primary,* html #secondary,* html #tertiary { display:inline; } #footer { clear:both; float:left; width:100%; position:relative; } body.l1 #tertiary,body.l2 #tertiary,body.l3 #tertiary { display:none; } body.l1 #primary { width:49.5em; } body.l1 #secondary { width:24.5em; float:right; } body.l2 #primary { width:49.5em; margin-left:26.5em;; } body.l2 #secondary { width:24.5em; margin-left:-76em; } body.l3 #primary { width:37em; } body.l3 #secondary { width:37em; float:right; } body.l4 #primary { width:24em; margin-left:26em; } body.l4 #secondary { width:24em; margin-left:-50em; } body.l4 #tertiary { float:right; width:24em; } body.l5 #primary { width:48em; margin-left:14em; } body.l5 #secondary { width:12em; margin-left:-62em; } body.l6 #primary { width:36em; margin-left:20em; } body.l6 #secondary { width:18em; margin-left:-56em; } body.l7 #primary { width:48em; margin-right:2em; } body.l7 #secondary { width:12em; } body.l8 #primary { width:36em; margin-right:2em; } body.l8 #secondary { width:18em; margin-left:0; } body.l9 #primary { width:36em; float:right; } body.l9 #secondary { width:18em; } body.l9 #tertiary { float:right; width:18em; margin-right:2em; } body.wide #container { font-size:125%; } body.wide #header { font-size:80%; } body.wide #footer { font-size:81%; } body.wide #primary .content,body.wide #secondary .content,body.wide #tertiary .content { font-size:100%; line-height:1.54; } /* \*/ body.equal #container { overflow:hidden; padding-bottom:0; } body.equal #primary,body.equal #secondary,body.equal #tertiary { margin-bottom:-32767px; padding-bottom:32767px; } * html body.equal #container { padding-bottom:0; } /* */ body.l1 #footer,body.l2 #footer,body.l3 #footer { margin-bottom:0; } body.l5 #tertiary,body.l7 #tertiary { float:right; width:12em; } body.l6 #tertiary,body.l8 #tertiary { float:right; width:18em; } @media all and (min-width: 0px) { body.l2 #secondary { left:.5em; } body.equal #primary,body.equal #secondary,body.equal #tertiary { padding-bottom:0!important; margin-bottom:0!important; } body.equal #primary[id^="primary"]:before,body.equal #secondary[id^="secondary"]:before,body.equal #tertiary[id^="tertiary"]:before { content:'Q'; display:block; background:inherit; padding-top:32767px!important; margin-bottom:-32767px!important; height:0; } }