/* * @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,#bline { position:relative; float:left; } * html #primary,* html #secondary,* html #tertiary,* html #bline { display:inline; } #footer { clear:both; float:left; width:100%; position:relative; } body.l5 #primary { width:45em; margin-left:16em; } body.l5 #secondary { width:12em; margin-left:-61em; } body.l5 #bline { width:.2em; /*margin-left:13.7em;*/ background:transparent url(/img/menu-border.jpg) repeat-y scroll right top; height:0; position:absolute; left: 15.5em; top:18.9em; } 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,body.wide #bline .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,body.equal #bline { margin-bottom:-32767px; padding-bottom:32767px; } * html body.equal #container { padding-bottom:0; } /* */ body.l5 #tertiary { float:right; width:13em; margin-top:.1em; margin-right:1.2em; } @media all and (min-width: 0px) { body.equal #primary,body.equal #secondary,body.equal #tertiary,body.equal #bline { 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,body.equal #bline[id^="bline"]:before { content:'Q'; display:block; background:inherit; padding-top:32767px!important; margin-bottom:-32767px!important; height:0; } }