blob: 52ef5d160ac7e3db081421bc1fe2bbbd1828013d [file] [log] [blame]
/*
* Copyright 2007 The Closure Library Authors. All Rights Reserved.
*
* Use of this source code is governed by the Apache License, Version 2.0.
* See the COPYING file for details.
*/
/**
* CSS Inlay
* Fixed templates
* @author ddiaz@google.com (Dustin Diaz)
* @author elsigh@google.com (Lindsey Simon)
* @fileoverview
* The nature of these templates is to have one unit be a fixed width
* and the supplementary unit to take up the rest of the width
* of its parents' container.
*
* Sample Usage:
<div class="g-section g-tpl-180">
<div class="g-unit g-first">
<p>
Lorem Ipsum...
</p>
</div>
<div class="g-unit">
<p>
Lorem Ipsum...
</p>
</div>
</div>
*/
/* Document container designed for 1024x768 */
/* TODO(ux-webdev): convert this to a straight px value - em assumes reset. */
.g-doc-1024 {
width: 73.074em;
min-width: 950px; /* min-width doesn't work in IE6 */
margin: 0 auto;
text-align: left;
}
/* IE 6 */
* html .g-doc-1024 {
width: 71.313em;
}
/* IE 7 */
*+html .g-doc-1024 {
width: 71.313em;
}
/* Document container designed for 800x600 */
/* TODO(ux-webdev): convert this to a straight px value - em assumes reset. */
.g-doc-800 {
width: 57.69em;
min-width: 750px; /* min-width doesn't work in IE6 */
margin: 0 auto;
text-align: left;
}
/* IE 6 */
* html .g-doc-800 {
width: 56.3em;
}
/* IE 7 */
*+html .g-doc-800 {
width: 56.3em;
}
/* 160px */
.g-tpl-160 .g-unit,
.g-unit .g-tpl-160 .g-unit,
.g-unit .g-unit .g-tpl-160 .g-unit,
.g-unit .g-unit .g-unit .g-tpl-160 .g-unit {
margin: 0 0 0 160px;
width: auto;
float: none;
}
.g-unit .g-unit .g-unit .g-tpl-160 .g-first,
.g-unit .g-unit .g-tpl-160 .g-first,
.g-unit .g-tpl-160 .g-first,
.g-tpl-160 .g-first {
margin: 0;
width: 160px;
float: left;
}
/* 160px alt */
.g-tpl-160-alt .g-unit,
.g-unit .g-tpl-160-alt .g-unit,
.g-unit .g-unit .g-tpl-160-alt .g-unit,
.g-unit .g-unit .g-unit .g-tpl-160-alt .g-unit {
margin: 0 160px 0 0;
width: auto;
float: none;
}
.g-unit .g-unit .g-unit .g-tpl-160-alt .g-first,
.g-unit .g-unit .g-tpl-160-alt .g-first,
.g-unit .g-tpl-160-alt .g-first,
.g-tpl-160-alt .g-first {
margin: 0;
width: 160px;
float: right;
}
/* 180px */
.g-tpl-180 .g-unit,
.g-unit .g-tpl-180 .g-unit,
.g-unit .g-unit .g-tpl-180 .g-unit,
.g-unit .g-unit .g-unit .g-tpl-180 .g-unit {
margin: 0 0 0 180px;
width: auto;
float: none;
}
.g-unit .g-unit .g-unit .g-tpl-180 .g-first,
.g-unit .g-unit .g-tpl-180 .g-first,
.g-unit .g-tpl-180 .g-first,
.g-tpl-180 .g-first {
margin: 0;
width: 180px;
float: left;
}
/* 180px alt */
.g-tpl-180-alt .g-unit,
.g-unit .g-tpl-180-alt .g-unit,
.g-unit .g-unit .g-tpl-180-alt .g-unit,
.g-unit .g-unit .g-unit .g-tpl-180-alt .g-unit {
margin: 0 180px 0 0;
width: auto;
float: none;
}
.g-unit .g-unit .g-unit .g-tpl-180-alt .g-first,
.g-unit .g-unit .g-tpl-180-alt .g-first,
.g-unit .g-tpl-180-alt .g-first,
.g-tpl-180-alt .g-first {
margin: 0;
width: 180px;
float: right;
}
/* 300px */
.g-tpl-300 .g-unit,
.g-unit .g-tpl-300 .g-unit,
.g-unit .g-unit .g-tpl-300 .g-unit,
.g-unit .g-unit .g-unit .g-tpl-300 .g-unit {
margin: 0 0 0 300px;
width: auto;
float: none;
}
.g-unit .g-unit .g-unit .g-tpl-300 .g-first,
.g-unit .g-unit .g-tpl-300 .g-first,
.g-unit .g-tpl-300 .g-first,
.g-tpl-300 .g-first {
margin: 0;
width: 300px;
float: left;
}
/* 300px alt */
.g-tpl-300-alt .g-unit,
.g-unit .g-tpl-300-alt .g-unit,
.g-unit .g-unit .g-tpl-300-alt .g-unit,
.g-unit .g-unit .g-unit .g-tpl-300-alt .g-unit {
margin: 0 300px 0 0;
width: auto;
float: none;
}
.g-unit .g-unit .g-unit .g-tpl-300-alt .g-first,
.g-unit .g-unit .g-tpl-300-alt .g-first,
.g-unit .g-tpl-300-alt .g-first,
.g-tpl-300-alt .g-first {
margin: 0;
width: 300px;
float: right;
}