grids.css 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. /*
  2. Copyright (c) 2009, Yahoo! Inc. All rights reserved.
  3. Code licensed under the BSD License:
  4. http://developer.yahoo.net/yui/license.txt
  5. version: 2.7.0
  6. */
  7. /**
  8. * YUI Grids
  9. * @module grids
  10. * @namespace yui-
  11. * @requires reset, fonts
  12. */
  13. /**
  14. * Note: Throughout this file, the *property (star-property) filter is used
  15. * to give a value to IE that other browsers do not see. _property is only seen
  16. * by IE7, so the combo of *prop and _prop can target between IE6 and IE7.
  17. *
  18. * More information on these filters and related validation errors:
  19. * http://tech.groups.yahoo.com/group/ydn-javascript/message/40059
  20. */
  21. /**
  22. * Section: General Rules
  23. */
  24. body {
  25. text-align: center;
  26. }
  27. /**
  28. * Section: Page Width Rules (#doc, #doc2, #doc3, #doc4)
  29. */
  30. #doc,#doc2,#doc3,#doc4,
  31. .yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 {
  32. margin: auto;
  33. text-align: left;
  34. width: 57.69em;
  35. *width: 56.25em;
  36. }
  37. /* 950 Centered (doc2) */
  38. #doc2 {
  39. width: 73.076em;
  40. *width: 71.25em;
  41. }
  42. /* 100% (doc3) */
  43. #doc3 {
  44. /**
  45. * Left and Right margins are not a structural part of Grids. Without them
  46. * Grids works fine, but content bleeds to the very edge of the document, which
  47. * often impairs readability and usability. They are provided because they
  48. * prevent the content from "bleeding" into the browser's chrome.
  49. */
  50. margin: auto 10px;
  51. width: auto;
  52. }
  53. /* 974 Centered (doc4) */
  54. #doc4 {
  55. width: 74.923em;
  56. *width: 73.05em;
  57. }
  58. /**
  59. * Section: Preset Template Rules (.yui-t[1-6])
  60. */
  61. .yui-b {
  62. /* to preserve source-order independence for Gecko */
  63. position: relative;
  64. }
  65. .yui-b {
  66. /* to preserve source-order independence for IE */
  67. _position: static;
  68. }
  69. #yui-main .yui-b {
  70. /* to preserve source-order independence for Gecko */
  71. position: static;
  72. }
  73. #yui-main,
  74. .yui-g .yui-u .yui-g {
  75. width: 100%;
  76. }
  77. .yui-t1 #yui-main,
  78. .yui-t2 #yui-main,
  79. .yui-t3 #yui-main {
  80. float: right;
  81. /* IE: preserve layout at narrow widths */
  82. margin-left: -25em;
  83. }
  84. .yui-t4 #yui-main,
  85. .yui-t5 #yui-main,
  86. .yui-t6 #yui-main {
  87. float: left;
  88. /* IE: preserve layout at narrow widths */
  89. margin-right: -25em;
  90. }
  91. /**
  92. * For Specific Template Presets
  93. */
  94. .yui-t1 .yui-b {
  95. float: left;
  96. width: 12.30769em;
  97. *width: 12.00em;
  98. }
  99. .yui-t1 #yui-main .yui-b {
  100. margin-left: 13.30769em;
  101. *margin-left: 13.05em;
  102. }
  103. .yui-t2 .yui-b {
  104. float: left;
  105. width: 13.8461em;
  106. *width: 13.50em;
  107. }
  108. .yui-t2 #yui-main .yui-b {
  109. margin-left: 14.8461em;
  110. *margin-left: 14.55em;
  111. }
  112. .yui-t3 .yui-b {
  113. float: left;
  114. width: 23.0769em;
  115. *width: 22.50em;
  116. }
  117. .yui-t3 #yui-main .yui-b {
  118. margin-left: 24.0769em;
  119. *margin-left: 23.62em;
  120. }
  121. .yui-t4 .yui-b {
  122. float: right;
  123. width: 13.8456em;
  124. *width: 13.50em;
  125. }
  126. .yui-t4 #yui-main .yui-b {
  127. margin-right: 14.8456em;
  128. *margin-right: 14.55em;
  129. }
  130. .yui-t5 .yui-b {
  131. float: right;
  132. width: 18.4615em;
  133. *width: 18.00em;
  134. }
  135. .yui-t5 #yui-main .yui-b {
  136. margin-right: 19.4615em;
  137. *margin-right: 19.125em;
  138. }
  139. .yui-t6 .yui-b {
  140. float: right;
  141. width: 23.0769em;
  142. *width: 22.50em;
  143. }
  144. .yui-t6 #yui-main .yui-b {
  145. margin-right: 24.0769em;
  146. *margin-right: 23.62em;
  147. }
  148. .yui-t7 #yui-main .yui-b {
  149. display: block;
  150. margin: 0 0 1em 0;
  151. }
  152. #yui-main .yui-b {
  153. float: none;
  154. width: auto;
  155. }
  156. /**
  157. * Section: Grids and Nesting Grids
  158. */
  159. /* Children generally take half the available space */
  160. .yui-gb .yui-u,
  161. .yui-g .yui-gb .yui-u,
  162. .yui-gb .yui-g,
  163. .yui-gb .yui-gb,
  164. .yui-gb .yui-gc,
  165. .yui-gb .yui-gd,
  166. .yui-gb .yui-ge,
  167. .yui-gb .yui-gf,
  168. .yui-gc .yui-u,
  169. .yui-gc .yui-g,
  170. .yui-gd .yui-u {
  171. float: left;
  172. }
  173. /* Float units (and sub grids) to the right */
  174. .yui-g .yui-u,
  175. .yui-g .yui-g,
  176. .yui-g .yui-gb,
  177. .yui-g .yui-gc,
  178. .yui-g .yui-gd,
  179. .yui-g .yui-ge,
  180. .yui-g .yui-gf,
  181. .yui-gc .yui-u,
  182. .yui-gd .yui-g,
  183. .yui-g .yui-gc .yui-u,
  184. .yui-ge .yui-u,
  185. .yui-ge .yui-g,
  186. .yui-gf .yui-g,
  187. .yui-gf .yui-u {
  188. float: right;
  189. }
  190. /*Float units (and sub grids) to the left */
  191. .yui-g div.first,
  192. .yui-gb div.first,
  193. .yui-gc div.first,
  194. .yui-gd div.first,
  195. .yui-ge div.first,
  196. .yui-gf div.first,
  197. .yui-g .yui-gc div.first,
  198. .yui-g .yui-ge div.first,
  199. .yui-gc div.first div.first {
  200. float: left;
  201. }
  202. .yui-g .yui-u,
  203. .yui-g .yui-g,
  204. .yui-g .yui-gb,
  205. .yui-g .yui-gc,
  206. .yui-g .yui-gd,
  207. .yui-g .yui-ge,
  208. .yui-g .yui-gf {
  209. width: 49.1%;
  210. }
  211. .yui-gb .yui-u,
  212. .yui-g .yui-gb .yui-u,
  213. .yui-gb .yui-g,
  214. .yui-gb .yui-gb,
  215. .yui-gb .yui-gc,
  216. .yui-gb .yui-gd,
  217. .yui-gb .yui-ge,
  218. .yui-gb .yui-gf,
  219. .yui-gc .yui-u,
  220. .yui-gc .yui-g,
  221. .yui-gd .yui-u {
  222. width: 32%;
  223. margin-left: 1.99%;
  224. }
  225. /* Give IE some extra breathing room for 1/3-based rounding issues */
  226. .yui-gb .yui-u {
  227. *margin-left: 1.9%;
  228. *width: 31.9%;
  229. }
  230. .yui-gc div.first,
  231. .yui-gd .yui-u {
  232. width: 66%;
  233. }
  234. .yui-gd div.first {
  235. width: 32%;
  236. }
  237. .yui-ge div.first,
  238. .yui-gf .yui-u {
  239. width: 74.2%;
  240. }
  241. .yui-ge .yui-u,
  242. .yui-gf div.first {
  243. width: 24%;
  244. }
  245. .yui-g .yui-gb div.first,
  246. .yui-gb div.first,
  247. .yui-gc div.first,
  248. .yui-gd div.first {
  249. margin-left: 0;
  250. }
  251. /**
  252. * Section: Deep Nesting
  253. */
  254. .yui-g .yui-g .yui-u,
  255. .yui-gb .yui-g .yui-u,
  256. .yui-gc .yui-g .yui-u,
  257. .yui-gd .yui-g .yui-u,
  258. .yui-ge .yui-g .yui-u,
  259. .yui-gf .yui-g .yui-u {
  260. width: 49%;
  261. *width: 48.1%;
  262. *margin-left: 0;
  263. }
  264. .yui-g .yui-g .yui-u {
  265. width: 48.1%;
  266. }
  267. /*SF 1927599 from 1.14 to 2.6.0*/
  268. .yui-g .yui-gb div.first,
  269. .yui-gb .yui-gb div.first {
  270. *margin-right: 0;
  271. *width: 32%;
  272. _width: 31.7%;
  273. }
  274. .yui-g .yui-gc div.first,
  275. .yui-gd .yui-g {
  276. width: 66%;
  277. }
  278. .yui-gb .yui-g div.first {
  279. *margin-right: 4%;
  280. _margin-right: 1.3%;
  281. }
  282. .yui-gb .yui-gc div.first,
  283. .yui-gb .yui-gd div.first {
  284. *margin-right: 0;
  285. }
  286. .yui-gb .yui-gb .yui-u,
  287. .yui-gb .yui-gc .yui-u {
  288. *margin-left: 1.8%;
  289. _margin-left: 4%;
  290. }
  291. .yui-g .yui-gb .yui-u {
  292. _margin-left: 1.0%;
  293. }
  294. .yui-gb .yui-gd .yui-u {
  295. *width: 66%;
  296. _width: 61.2%;
  297. }
  298. .yui-gb .yui-gd div.first {
  299. *width: 31%;
  300. _width: 29.5%;
  301. }
  302. .yui-g .yui-gc .yui-u,
  303. .yui-gb .yui-gc .yui-u {
  304. width: 32%;
  305. _float: right;
  306. margin-right: 0;
  307. _margin-left: 0;
  308. }
  309. .yui-gb .yui-gc div.first {
  310. width: 66%;
  311. *float: left;
  312. *margin-left: 0;
  313. }
  314. .yui-gb .yui-ge .yui-u,
  315. .yui-gb .yui-gf .yui-u {
  316. margin: 0;
  317. }
  318. .yui-gb .yui-gb .yui-u {
  319. _margin-left: .7%;
  320. }
  321. .yui-gb .yui-g div.first,
  322. .yui-gb .yui-gb div.first {
  323. *margin-left: 0;
  324. }
  325. .yui-gc .yui-g .yui-u,
  326. .yui-gd .yui-g .yui-u {
  327. *width: 48.1%;
  328. *margin-left: 0;
  329. }
  330. .yui-gb .yui-gd div.first {
  331. width: 32%;
  332. }
  333. .yui-g .yui-gd div.first {
  334. _width: 29.9%;
  335. }
  336. .yui-ge .yui-g {
  337. width: 24%;
  338. }
  339. .yui-gf .yui-g {
  340. width: 74.2%;
  341. }
  342. .yui-gb .yui-ge div.yui-u,
  343. .yui-gb .yui-gf div.yui-u {
  344. float: right;
  345. }
  346. .yui-gb .yui-ge div.first,
  347. .yui-gb .yui-gf div.first {
  348. float: left;
  349. }
  350. /* Width Accommodation for Nested Contexts */
  351. .yui-gb .yui-ge .yui-u,
  352. .yui-gb .yui-gf div.first {
  353. *width: 24%;
  354. _width: 20%;
  355. }
  356. /* Width Accommodation for Nested Contexts */
  357. .yui-gb .yui-ge div.first,
  358. .yui-gb .yui-gf .yui-u {
  359. *width: 73.5%;
  360. _width: 65.5%;
  361. }
  362. /* Patch for GD within GE */
  363. .yui-ge div.first .yui-gd .yui-u {
  364. width: 65%;
  365. }
  366. .yui-ge div.first .yui-gd div.first {
  367. width: 32%;
  368. }
  369. /* @group Clearing */
  370. #hd:after,
  371. #bd:after,
  372. #ft:after,
  373. .yui-g:after,
  374. .yui-gb:after,
  375. .yui-gc:after,
  376. .yui-gd:after,
  377. .yui-ge:after,
  378. .yui-gf:after {
  379. content: ".";
  380. display: block;
  381. height: 0;
  382. clear: both;
  383. visibility: hidden;
  384. }
  385. #hd,
  386. #bd,
  387. #ft,
  388. .yui-g,
  389. .yui-gb,
  390. .yui-gc,
  391. .yui-gd,
  392. .yui-ge,
  393. .yui-gf {
  394. zoom: 1;
  395. }