/kai/public/css/grids.css

https://bitbucket.org/bbangert/kai/ · CSS · 283 lines · 168 code · 55 blank · 60 comment · 0 complexity · f5b65731d129c47ad226d77e32e298b9 MD5 · raw file 

    

  1. /*
    2. 

  2. Copyright (c) 2008, Yahoo! Inc. All rights reserved.
    3. 

  3. Code licensed under the BSD License:
    4. 

  4. http://developer.yahoo.net/yui/license.txt
    5. 

  5. version: 2.5.2
    6. 

  6. */
    7. 

  7. /*
    8. 

  8. 	Note: Throughout this file, the *property filter is used to 
    9. 

  9. 	      give a value to IE that other browsers do not see.	
    10. 

  10. */
    11. 

  11. 

  12. /*
    13. 

  13. 	Section: General Rules
    14. 

  14. */
    15. 

  15. 

  16. 	body {
    17. 

  17. 		text-align:center;
    18. 

  18. 	}
    19. 

  19. 	
    20. 

  20. 	#ft {
    21. 

  21. 		clear:both;
    22. 

  22. 	}
    23. 

  23. 

  24. /*
    25. 

  25. 	Section: Page Width Rules (#doc, #doc2, #doc3, #doc4)
    26. 

  26. */
    27. 

  27. 

  28. 	/* 
    29. 

  29. 		Subsection: General 
    30. 

  30. 	*/ 	
    31. 

  31. 

  32. 	#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 {
    33. 

  33. 		margin:auto;
    34. 

  34. 		text-align:left;
    35. 

  35. 		width:57.69em;*width:56.25em;
    36. 

  36. 		min-width:750px;
    37. 

  37. 	}
    38. 

  38. 	/* 
    39. 

  39. 		Subsection: 950 Centered (doc2) 
    40. 

  40. 	*/
    41. 

  41. 	#doc2 {
    42. 

  42. 		width:73.076em;*width:71.25em;
    43. 

  43. 	}
    44. 

  44. 

  45. 	/* 
    46. 

  46. 		Subsection: 100% (doc3) 
    47. 

  47. 	*/
    48. 

  48. 	#doc3 {
    49. 

  49. 		/* Left and Right margins are not a structural part of Grids. Without them Grids
    50. 

  50. 		   works fine, but content bleeds to the very edge of the document, which often
    51. 

  51. 		   impairs readability and usability. They are 
    52. 

  52. 		   provided because they prevent the content from "bleeding" into the browser's chrome.*/
    53. 

  53. 		margin:auto 10px; 
    54. 

  54. 		width:auto;
    55. 

  55. 	}
    56. 

  56. 	
    57. 

  57. 	/* 
    58. 

  58. 		Subsection: 974 Centered (doc4) 
    59. 

  59. 	*/
    60. 

  60. 	#doc4 {
    61. 

  61. 		width:74.923em;*width:73.05em;
    62. 

  62. 	}	
    63. 

  63. 	
    64. 

  64. /*
    65. 

  65. 	Section: Preset Template Rules (.yui-t[1-6])
    66. 

  66. */
    67. 

  67. 	
    68. 

  68. 	/* 
    69. 

  69. 		Subsection: General
    70. 

  70. 	*/
    71. 

  71. 

  72. 	/* to preserve source-order independence for Gecko */
    73. 

  73. 	.yui-b{position:relative;}
    74. 

  74. 	.yui-b{_position:static;}
    75. 

  75. 	#yui-main .yui-b{position:static;}
    76. 

  76. 

  77. 	#yui-main {width:100%;}
    78. 

  78. 		
    79. 

  79. 	.yui-t1 #yui-main,
    80. 

  80. 	.yui-t2 #yui-main,
    81. 

  81. 	.yui-t3 #yui-main{float:right;margin-left:-25em;/* IE: preserve layout at narrow widths */}
    82. 

  82. 

  83. 	.yui-t4 #yui-main,
    84. 

  84. 	.yui-t5 #yui-main,
    85. 

  85. 	.yui-t6 #yui-main{float:left;margin-right:-25em;/* IE: preserve layout at narrow widths */}
    86. 

  86. 

  87. 	/* 
    88. 

  88. 		Subsection: For Specific Template Presets
    89. 

  89. 	*/
    90. 

  90. 

  91. 	.yui-t1 .yui-b {float:left;width:12.30769em;*width:12.00em;}
    92. 

  92. 	.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}
    93. 

  93. 

  94. 	.yui-t2 .yui-b {float:left;width:13.8461em;*width:13.50em;}
    95. 

  95. 	.yui-t2 #yui-main .yui-b {margin-left:14.8461em;*margin-left:14.55em;}
    96. 

  96. 

  97. 	.yui-t3 .yui-b {float:left;width:23.0769em;*width:22.50em;}
    98. 

  98. 	.yui-t3 #yui-main .yui-b {margin-left:24.0769em;*margin-left:23.62em;}
    99. 

  99. 

  100. 	.yui-t4 .yui-b {float:right;width:13.8456em;*width:13.50em;}
    101. 

  101. 	.yui-t4 #yui-main .yui-b {margin-right:14.8456em;*margin-right:14.55em;}
    102. 

  102. 

  103. 	.yui-t5 .yui-b {float:right;width:18.4615em;*width:18.00em;}
    104. 

  104. 	.yui-t5 #yui-main .yui-b {margin-right:19.4615em;*margin-right:19.125em;}
    105. 

  105. 

  106. 	.yui-t6 .yui-b {float:right;width:23.0769em;*width:22.50em;}
    107. 

  107. 	.yui-t6 #yui-main .yui-b {margin-right:24.0769em;*margin-right:23.62em;}
    108. 

  108. 

  109. 	.yui-t7 #yui-main .yui-b {
    110. 

  110. 		display:block;margin:0 0 1em 0;
    111. 

  111. 	}
    112. 

  112. 	#yui-main .yui-b {float:none;width:auto;}
    113. 

  113. 

  114. /*
    115. 

  115. 	Section: Grids and Nesting Grids
    116. 

  116. */
    117. 

  117. 

  118. 	/*
    119. 

  119. 		Subsection: Children generally take half the available space
    120. 

  120. 	*/
    121. 

  121. 

  122. 	.yui-gb .yui-u,
    123. 

  123. 	.yui-g .yui-gb .yui-u,
    124. 

  124. 	.yui-gb .yui-g,
    125. 

  125. 	.yui-gb .yui-gb,
    126. 

  126. 	.yui-gb .yui-gc,
    127. 

  127. 	.yui-gb .yui-gd,
    128. 

  128. 	.yui-gb .yui-ge,
    129. 

  129. 	.yui-gb .yui-gf,
    130. 

  130. 	.yui-gc .yui-u, 
    131. 

  131. 	.yui-gc .yui-g,
    132. 

  132. 	.yui-gd .yui-u {float:left;}
    133. 

  133. 

  134. 	/*Float units (and sub grids) to the right */
    135. 

  135. 	.yui-g .yui-u,
    136. 

  136. 	.yui-g .yui-g,
    137. 

  137. 	.yui-g .yui-gb, 
    138. 

  138. 	.yui-g .yui-gc, 
    139. 

  139. 	.yui-g .yui-gd, 
    140. 

  140. 	.yui-g .yui-ge, 
    141. 

  141. 	.yui-g .yui-gf, 
    142. 

  142. 	.yui-gc .yui-u, 
    143. 

  143. 	.yui-gd .yui-g,
    144. 

  144. 	.yui-g .yui-gc .yui-u,
    145. 

  145. 	.yui-ge .yui-u, 
    146. 

  146. 	.yui-ge .yui-g, 
    147. 

  147. 	.yui-gf .yui-g,
    148. 

  148. 	.yui-gf .yui-u{float:right;}
    149. 

  149. 

  150. 	/*Float units (and sub grids) to the left */
    151. 

  151. 	.yui-g div.first, 
    152. 

  152. 	.yui-gb div.first,
    153. 

  153. 	.yui-gc div.first,
    154. 

  154. 	.yui-gd div.first, 
    155. 

  155. 	.yui-ge div.first, 
    156. 

  156. 	.yui-gf div.first,
    157. 

  157. 	.yui-g .yui-gc div.first,
    158. 

  158. 	.yui-g .yui-ge div.first,
    159. 

  159. 	.yui-gc div.first div.first {float:left;}
    160. 

  160. 

  161. 	.yui-g .yui-u,
    162. 

  162. 	.yui-g .yui-g,
    163. 

  163. 	.yui-g .yui-gb,
    164. 

  164. 	.yui-g .yui-gc,
    165. 

  165. 	.yui-g .yui-gd,
    166. 

  166. 	.yui-g .yui-ge,
    167. 

  167. 	.yui-g .yui-gf {width:49.1%;}
    168. 

  168. 

  169. 	.yui-gb .yui-u,
    170. 

  170. 	.yui-g .yui-gb .yui-u,
    171. 

  171. 	.yui-gb .yui-g,
    172. 

  172. 	.yui-gb .yui-gb,
    173. 

  173. 	.yui-gb .yui-gc,
    174. 

  174. 	.yui-gb .yui-gd,
    175. 

  175. 	.yui-gb .yui-ge,
    176. 

  176. 	.yui-gb .yui-gf,
    177. 

  177. 	.yui-gc .yui-u, 
    178. 

  178. 	.yui-gc .yui-g,
    179. 

  179. 	.yui-gd .yui-u {width:32%;margin-left:1.99%;}
    180. 

  180. 

  181. 		/* Give IE some extra breathing room for 1/3-based rounding issues */
    182. 

  182. 		.yui-gb .yui-u {*margin-left:1.9%;*width:31.9%;}
    183. 

  183. 

  184. 	.yui-gc div.first, 
    185. 

  185. 	.yui-gd .yui-u {width:66%;}
    186. 

  186. 	.yui-gd div.first {width:32%;}
    187. 

  187. 

  188. 	.yui-ge div.first, 
    189. 

  189. 	.yui-gf .yui-u{width:74.2%;}
    190. 

  190. 

  191. 	.yui-ge .yui-u,
    192. 

  192. 	.yui-gf div.first {width:24%;}
    193. 

  193. 

  194. 	.yui-g .yui-gb div.first,
    195. 

  195. 	.yui-gb div.first, 
    196. 

  196. 	.yui-gc div.first, 
    197. 

  197. 	.yui-gd div.first {margin-left:0;}
    198. 

  198. 	   
    199. 

  199. 	/*
    200. 

  200. 		Section: Deep Nesting 
    201. 

  201. 	*/
    202. 

  202. 	.yui-g .yui-g .yui-u,
    203. 

  203. 	.yui-gb .yui-g .yui-u,
    204. 

  204. 	.yui-gc .yui-g .yui-u,
    205. 

  205. 	.yui-gd .yui-g .yui-u,
    206. 

  206. 	.yui-ge .yui-g .yui-u,
    207. 

  207. 	.yui-gf .yui-g .yui-u {width:49%;*width:48.1%;*margin-left:0;}
    208. 

  208. 

  209. 	.yui-g .yui-gb div.first,
    210. 

  210. 	.yui-gb .yui-gb div.first {*margin-right:0;*width:32%;_width:31.7%;}
    211. 

  211. 

  212. 	.yui-g .yui-gc div.first, 
    213. 

  213. 	.yui-gd .yui-g  {width:66%;}
    214. 

  214. 

  215. 	.yui-gb .yui-g div.first {*margin-right:4%;_margin-right:1.3%;}
    216. 

  216. 

  217. 	.yui-gb .yui-gc div.first, 
    218. 

  218. 	.yui-gb .yui-gd div.first  {*margin-right:0;}
    219. 

  219. 

  220. 	.yui-gb .yui-gb .yui-u,
    221. 

  221. 	.yui-gb .yui-gc .yui-u {*margin-left:1.8%;_margin-left:4%;}
    222. 

  222. 

  223. 	.yui-g .yui-gb .yui-u {_margin-left:1.0%;}
    224. 

  224. 

  225. 	.yui-gb .yui-gd .yui-u {*width:66%;_width:61.2%;} 
    226. 

  226. 	.yui-gb .yui-gd div.first {*width:31%;_width:29.5%;}
    227. 

  227. 

  228. 	.yui-g .yui-gc .yui-u, 
    229. 

  229. 	.yui-gb .yui-gc .yui-u {width:32%;_float:right;margin-right:0;_margin-left:0;}
    230. 

  230. 	.yui-gb .yui-gc div.first {width:66%;*float:left;*margin-left:0;}
    231. 

  231. 

  232. 	.yui-gb .yui-ge .yui-u, 
    233. 

  233. 	.yui-gb .yui-gf .yui-u {margin:0;}
    234. 

  234. 

  235. 	.yui-gb .yui-gb .yui-u {_margin-left:.7%;}
    236. 

  236. 

  237. 	.yui-gb .yui-g div.first, 
    238. 

  238. 	.yui-gb .yui-gb div.first {*margin-left:0;}
    239. 

  239. 

  240. 	.yui-gc .yui-g .yui-u,
    241. 

  241. 	.yui-gd .yui-g .yui-u {*width:48.1%;*margin-left:0;}s
    242. 

  242. 

  243. 	.yui-gb .yui-gd div.first {width:32%;}
    244. 

  244. 	.yui-g .yui-gd div.first {_width:29.9%;}
    245. 

  245. 

  246. 	.yui-ge .yui-g {width:24%;}
    247. 

  247. 	.yui-gf .yui-g {width:74.2%;}
    248. 

  248. 

  249. 	.yui-gb .yui-ge div.yui-u,
    250. 

  250. 	.yui-gb .yui-gf div.yui-u {float:right;}
    251. 

  251. 	.yui-gb .yui-ge div.first,
    252. 

  252. 	.yui-gb .yui-gf div.first  {float:left;}
    253. 

  253. 

  254. 	/* Width Accommodation for Nested Contexts */
    255. 

  255. 	.yui-gb .yui-ge .yui-u,
    256. 

  256. 	.yui-gb .yui-gf div.first {*width:24%;_width:20%;}
    257. 

  257. 

  258. 	/* Width Accommodation for Nested Contexts */
    259. 

  259. 	.yui-gb .yui-ge div.first, 
    260. 

  260. 	.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}
    261. 

  261. 

  262. 	/* Patch for GD within GE */
    263. 

  263. 	.yui-ge div.first .yui-gd .yui-u {width:65%;}
    264. 

  264. 	.yui-ge div.first .yui-gd div.first {width:32%;}
    265. 

  265. 

  266. /*
    267. 

  267. 	Section: Clearing 
    268. 

  268. */
    269. 

  269. 

  270. #bd:after,
    271. 

  271. .yui-g:after, 
    272. 

  272. .yui-gb:after, 
    273. 

  273. .yui-gc:after, 
    274. 

  274. .yui-gd:after, 
    275. 

  275. .yui-ge:after, 
    276. 

  276. .yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
    277. 

  277. #bd,
    278. 

  278. .yui-g, 
    279. 

  279. .yui-gb, 
    280. 

  280. .yui-gc, 
    281. 

  281. .yui-gd, 
    282. 

  282. .yui-ge, 
    283. 

  283. .yui-gf{zoom:1;}
    284.