| /* |
| * 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 |
| * Percentage based templates |
| * @author ddiaz@google.com (Dustin Diaz) |
| * @author elsigh@google.com (Lindsey Simon) |
| * @fileoverview |
| * The first ten templates are described using the following convention: |
| * tpl-LEFT%-RIGHT% and tpl-LEFT%-RIGHT%-alt, where alt switches render order. |
| * |
| * The rationale for the percentage values are pretty fascinating. |
| * Three nine's are needed for a miminal affordance in the gap between units |
| * for Opera, while two for IE 5.5 and down. |
| * Straight percentages seem to work fine otherwise, but the values here test |
| * well cross-browser. |
| * |
| * Sample Usage: |
| <div class="g-section g-tpl-50-50"> |
| <div class="g-unit g-first"> |
| <p> |
| Lorem Ipsum... |
| </p> |
| </div> |
| <div class="g-unit"> |
| <p> |
| Lorem Ipsum... |
| </p> |
| </div> |
| </div> |
| */ |
| |
| /* 25/75 */ |
| .g-tpl-25-75 .g-unit, |
| .g-unit .g-tpl-25-75 .g-unit, |
| .g-unit .g-unit .g-tpl-25-75 .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-25-75 .g-unit { |
| width: 74.999%; |
| float: right; |
| margin: 0; |
| } |
| .g-unit .g-unit .g-unit .g-tpl-25-75 .g-first, |
| .g-unit .g-unit .g-tpl-25-75 .g-first, |
| .g-unit .g-tpl-25-75 .g-first, |
| .g-tpl-25-75 .g-first { |
| width: 24.999%; |
| float: left; |
| margin: 0; |
| } |
| |
| /* 25/75-alt */ |
| .g-tpl-25-75-alt .g-unit, |
| .g-unit .g-tpl-25-75-alt .g-unit, |
| .g-unit .g-unit .g-tpl-25-75-alt .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-25-75-alt .g-unit { |
| width: 24.999%; |
| float: left; |
| margin: 0; |
| } |
| .g-unit .g-unit .g-unit .g-tpl-25-75-alt .g-first, |
| .g-unit .g-unit .g-tpl-25-75-alt .g-first, |
| .g-unit .g-tpl-25-75-alt .g-first, |
| .g-tpl-25-75-alt .g-first { |
| width: 74.999%; |
| float: right; |
| margin: 0; |
| } |
| |
| /* 75/25 */ |
| .g-tpl-75-25 .g-unit, |
| .g-unit .g-tpl-75-25 .g-unit, |
| .g-unit .g-unit .g-tpl-75-25 .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-75-25 .g-unit { |
| width: 24.999%; |
| float: right; |
| margin: 0; |
| } |
| .g-unit .g-unit .g-unit .g-tpl-75-25 .g-first, |
| .g-unit .g-unit .g-tpl-75-25 .g-first, |
| .g-unit .g-tpl-75-25 .g-first, |
| .g-tpl-75-25 .g-first { |
| width: 74.999%; |
| float: left; |
| margin: 0; |
| } |
| |
| /* 75/25-alt */ |
| .g-tpl-75-25-alt .g-unit, |
| .g-unit .g-tpl-75-25-alt .g-unit, |
| .g-unit .g-unit .g-tpl-75-25-alt .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-75-25-alt .g-unit { |
| width: 74.999%; |
| float: left; |
| margin: 0; |
| } |
| .g-unit .g-unit .g-unit .g-tpl-75-25-alt .g-first, |
| .g-unit .g-unit .g-tpl-75-25-alt .g-first, |
| .g-unit .g-tpl-75-25-alt .g-first, |
| .g-tpl-75-25-alt .g-first { |
| width: 24.999%; |
| float: right; |
| margin: 0; |
| } |
| |
| /* 33/67 */ |
| .g-tpl-33-67 .g-unit, |
| .g-unit .g-tpl-33-67 .g-unit, |
| .g-unit .g-unit .g-tpl-33-67 .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-33-67 .g-unit { |
| width: 66.999%; |
| float: right; |
| margin: 0; |
| } |
| .g-unit .g-unit .g-unit .g-tpl-33-67 .g-first, |
| .g-unit .g-unit .g-tpl-33-67 .g-first, |
| .g-unit .g-tpl-33-67 .g-first, |
| .g-tpl-33-67 .g-first { |
| width: 32.999%; |
| float: left; |
| margin: 0; |
| } |
| |
| /* 33/67-alt */ |
| .g-tpl-33-67-alt .g-unit, |
| .g-unit .g-tpl-33-67-alt .g-unit, |
| .g-unit .g-unit .g-tpl-33-67-alt .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-33-67-alt .g-unit { |
| width: 32.999%; |
| float: left; |
| margin: 0; |
| } |
| .g-unit .g-unit .g-unit .g-tpl-33-67-alt .g-first, |
| .g-unit .g-unit .g-tpl-33-67-alt .g-first, |
| .g-unit .g-tpl-33-67-alt .g-first, |
| .g-tpl-33-67-alt .g-first { |
| width: 66.999%; |
| float: right; |
| margin: 0; |
| } |
| /* 67/33 */ |
| .g-tpl-67-33 .g-unit, |
| .g-unit .g-tpl-67-33 .g-unit, |
| .g-unit .g-unit .g-tpl-67-33 .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-67-33 .g-unit { |
| width: 32.999%; |
| float: right; |
| margin: 0; |
| } |
| .g-unit .g-unit .g-unit .g-tpl-67-33 .g-first, |
| .g-unit .g-unit .g-tpl-67-33 .g-first, |
| .g-unit .g-tpl-67-33 .g-first, |
| .g-tpl-67-33 .g-first { |
| width: 66.999%; |
| float: left; |
| margin: 0; |
| } |
| |
| /* 67/33-alt */ |
| .g-tpl-67-33-alt .g-unit, |
| .g-unit .g-tpl-67-33-alt .g-unit, |
| .g-unit .g-unit .g-tpl-67-33-alt .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-67-33-alt .g-unit { |
| width: 66.999%; |
| float: left; |
| margin: 0; |
| } |
| .g-unit .g-unit .g-unit .g-tpl-67-33-alt .g-first, |
| .g-unit .g-unit .g-tpl-67-33-alt .g-first, |
| .g-unit .g-tpl-67-33-alt .g-first, |
| .g-tpl-67-33-alt .g-first { |
| width: 32.999%; |
| float: right; |
| margin: 0; |
| } |
| |
| /* 50/50 */ |
| .g-tpl-50-50 .g-unit, |
| .g-unit .g-tpl-50-50 .g-unit, |
| .g-unit .g-unit .g-tpl-50-50 .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-50-50 .g-unit { |
| width: 49.999%; |
| float: right; |
| margin: 0; |
| } |
| .g-unit .g-unit .g-unit .g-tpl-50-50 .g-first, |
| .g-unit .g-unit .g-tpl-50-50 .g-first, |
| .g-unit .g-tpl-50-50 .g-first, |
| .g-tpl-50-50 .g-first { |
| width: 49.999%; |
| float: left; |
| margin: 0; |
| } |
| |
| /* 50/50-alt */ |
| .g-tpl-50-50-alt .g-unit, |
| .g-unit .g-tpl-50-50-alt .g-unit, |
| .g-unit .g-unit .g-tpl-50-50-alt .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-50-50-alt .g-unit { |
| width: 49.999%; |
| float: left; |
| margin: 0; |
| } |
| .g-unit .g-unit .g-unit .g-tpl-50-50-alt .g-first, |
| .g-unit .g-unit .g-tpl-50-50-alt .g-first, |
| .g-unit .g-tpl-50-50-alt .g-first, |
| .g-tpl-50-50-alt .g-first { |
| width: 49.999%; |
| float: right; |
| margin: 0; |
| } |
| |
| /** |
| * Nest templates contain floating g-units. |
| * For these, width needs to be reset from the 100% for inline-block |
| * to auto. This fixes an issue with horizontal scrollbars. |
| */ |
| .g-tpl-nest { |
| width: auto; |
| } |
| /** |
| * Making any g-sections inside of g-tpl-nests display inline instead |
| * of display block solves an issue where inner sections add up incrementally |
| * their widths to set the width of the outer g-unit. This causes all kinds of |
| * problems with float-drops and display:inline fixes this. |
| */ |
| .g-tpl-nest .g-section { |
| display: inline; |
| } |
| |
| /* g-tpl-nest for multi unit nesting (float left), say for a menu. */ |
| .g-tpl-nest .g-unit, |
| .g-unit .g-tpl-nest .g-unit, |
| .g-unit .g-unit .g-tpl-nest .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-nest .g-unit { |
| float: left; |
| width: auto; |
| margin: 0; |
| } |
| |
| /* g-tpl-nest-alt for multi unit nesting (float right), say for a menu. */ |
| .g-tpl-nest-alt .g-unit, |
| .g-unit .g-tpl-nest-alt .g-unit, |
| .g-unit .g-unit .g-tpl-nest-alt .g-unit, |
| .g-unit .g-unit .g-unit .g-tpl-nest-alt .g-unit { |
| float: right; |
| width: auto; |
| margin: 0; |
| } |