g-fixed.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. /*
  2. * Copyright 2007 The Closure Library Authors. All Rights Reserved.
  3. *
  4. * Use of this source code is governed by the Apache License, Version 2.0.
  5. * See the COPYING file for details.
  6. */
  7. /**
  8. * CSS Inlay
  9. * Fixed templates
  10. * @author ddiaz@google.com (Dustin Diaz)
  11. * @author elsigh@google.com (Lindsey Simon)
  12. * @fileoverview
  13. * The nature of these templates is to have one unit be a fixed width
  14. * and the supplementary unit to take up the rest of the width
  15. * of its parents' container.
  16. *
  17. * Sample Usage:
  18. <div class="g-section g-tpl-180">
  19. <div class="g-unit g-first">
  20. <p>
  21. Lorem Ipsum...
  22. </p>
  23. </div>
  24. <div class="g-unit">
  25. <p>
  26. Lorem Ipsum...
  27. </p>
  28. </div>
  29. </div>
  30. */
  31. /* Document container designed for 1024x768 */
  32. /* TODO(ux-webdev): convert this to a straight px value - em assumes reset. */
  33. .g-doc-1024 {
  34. width: 73.074em;
  35. min-width: 950px; /* min-width doesn't work in IE6 */
  36. margin: 0 auto;
  37. text-align: left;
  38. }
  39. /* IE 6 */
  40. * html .g-doc-1024 {
  41. width: 71.313em;
  42. }
  43. /* IE 7 */
  44. *+html .g-doc-1024 {
  45. width: 71.313em;
  46. }
  47. /* Document container designed for 800x600 */
  48. /* TODO(ux-webdev): convert this to a straight px value - em assumes reset. */
  49. .g-doc-800 {
  50. width: 57.69em;
  51. min-width: 750px; /* min-width doesn't work in IE6 */
  52. margin: 0 auto;
  53. text-align: left;
  54. }
  55. /* IE 6 */
  56. * html .g-doc-800 {
  57. width: 56.3em;
  58. }
  59. /* IE 7 */
  60. *+html .g-doc-800 {
  61. width: 56.3em;
  62. }
  63. /* 160px */
  64. .g-tpl-160 .g-unit,
  65. .g-unit .g-tpl-160 .g-unit,
  66. .g-unit .g-unit .g-tpl-160 .g-unit,
  67. .g-unit .g-unit .g-unit .g-tpl-160 .g-unit {
  68. margin: 0 0 0 160px;
  69. width: auto;
  70. float: none;
  71. }
  72. .g-unit .g-unit .g-unit .g-tpl-160 .g-first,
  73. .g-unit .g-unit .g-tpl-160 .g-first,
  74. .g-unit .g-tpl-160 .g-first,
  75. .g-tpl-160 .g-first {
  76. margin: 0;
  77. width: 160px;
  78. float: left;
  79. }
  80. /* 160px alt */
  81. .g-tpl-160-alt .g-unit,
  82. .g-unit .g-tpl-160-alt .g-unit,
  83. .g-unit .g-unit .g-tpl-160-alt .g-unit,
  84. .g-unit .g-unit .g-unit .g-tpl-160-alt .g-unit {
  85. margin: 0 160px 0 0;
  86. width: auto;
  87. float: none;
  88. }
  89. .g-unit .g-unit .g-unit .g-tpl-160-alt .g-first,
  90. .g-unit .g-unit .g-tpl-160-alt .g-first,
  91. .g-unit .g-tpl-160-alt .g-first,
  92. .g-tpl-160-alt .g-first {
  93. margin: 0;
  94. width: 160px;
  95. float: right;
  96. }
  97. /* 180px */
  98. .g-tpl-180 .g-unit,
  99. .g-unit .g-tpl-180 .g-unit,
  100. .g-unit .g-unit .g-tpl-180 .g-unit,
  101. .g-unit .g-unit .g-unit .g-tpl-180 .g-unit {
  102. margin: 0 0 0 180px;
  103. width: auto;
  104. float: none;
  105. }
  106. .g-unit .g-unit .g-unit .g-tpl-180 .g-first,
  107. .g-unit .g-unit .g-tpl-180 .g-first,
  108. .g-unit .g-tpl-180 .g-first,
  109. .g-tpl-180 .g-first {
  110. margin: 0;
  111. width: 180px;
  112. float: left;
  113. }
  114. /* 180px alt */
  115. .g-tpl-180-alt .g-unit,
  116. .g-unit .g-tpl-180-alt .g-unit,
  117. .g-unit .g-unit .g-tpl-180-alt .g-unit,
  118. .g-unit .g-unit .g-unit .g-tpl-180-alt .g-unit {
  119. margin: 0 180px 0 0;
  120. width: auto;
  121. float: none;
  122. }
  123. .g-unit .g-unit .g-unit .g-tpl-180-alt .g-first,
  124. .g-unit .g-unit .g-tpl-180-alt .g-first,
  125. .g-unit .g-tpl-180-alt .g-first,
  126. .g-tpl-180-alt .g-first {
  127. margin: 0;
  128. width: 180px;
  129. float: right;
  130. }
  131. /* 300px */
  132. .g-tpl-300 .g-unit,
  133. .g-unit .g-tpl-300 .g-unit,
  134. .g-unit .g-unit .g-tpl-300 .g-unit,
  135. .g-unit .g-unit .g-unit .g-tpl-300 .g-unit {
  136. margin: 0 0 0 300px;
  137. width: auto;
  138. float: none;
  139. }
  140. .g-unit .g-unit .g-unit .g-tpl-300 .g-first,
  141. .g-unit .g-unit .g-tpl-300 .g-first,
  142. .g-unit .g-tpl-300 .g-first,
  143. .g-tpl-300 .g-first {
  144. margin: 0;
  145. width: 300px;
  146. float: left;
  147. }
  148. /* 300px alt */
  149. .g-tpl-300-alt .g-unit,
  150. .g-unit .g-tpl-300-alt .g-unit,
  151. .g-unit .g-unit .g-tpl-300-alt .g-unit,
  152. .g-unit .g-unit .g-unit .g-tpl-300-alt .g-unit {
  153. margin: 0 300px 0 0;
  154. width: auto;
  155. float: none;
  156. }
  157. .g-unit .g-unit .g-unit .g-tpl-300-alt .g-first,
  158. .g-unit .g-unit .g-tpl-300-alt .g-first,
  159. .g-unit .g-tpl-300-alt .g-first,
  160. .g-tpl-300-alt .g-first {
  161. margin: 0;
  162. width: 300px;
  163. float: right;
  164. }