grid.css 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
  1. /*
  2. 960 Grid System ~ Core CSS.
  3. Learn more ~ http://960.gs/
  4. Licensed under GPL and MIT.
  5. */
  6. /* =Containers
  7. --------------------------------------------------------------------------------*/
  8. /* =Grid >> Global
  9. --------------------------------------------------------------------------------*/
  10. .grid_1,
  11. .grid_2,
  12. .grid_3,
  13. .grid_4,
  14. .grid_5,
  15. .grid_6,
  16. .grid_7,
  17. .grid_8,
  18. .grid_9,
  19. .grid_10,
  20. .grid_11,
  21. .grid_12,
  22. .grid_13,
  23. .grid_14,
  24. .grid_15,
  25. .grid_16
  26. {
  27. display: inline;
  28. float: left;
  29. margin-left: 1%;
  30. margin-right: 1%;
  31. }
  32. .container_12 .grid_3,
  33. .container_16 .grid_4
  34. {
  35. width: 23%;
  36. }
  37. .container_12 .grid_6,
  38. .container_16 .grid_8
  39. {
  40. width: 48%;
  41. }
  42. .container_12 .grid_9,
  43. .container_16 .grid_12
  44. {
  45. width: 73%;
  46. }
  47. .container_12 .grid_12,
  48. .container_16 .grid_16
  49. {
  50. width: 98%;
  51. }
  52. /* =Grid >> Children (Alpha ~ First, Omega ~ Last)
  53. --------------------------------------------------------------------------------*/
  54. .alpha
  55. {
  56. margin-left: 0;
  57. }
  58. .omega
  59. {
  60. margin-right: 0;
  61. }
  62. /* =Grid >> 12 Columns
  63. --------------------------------------------------------------------------------*/
  64. .container_12 .grid_1
  65. {
  66. width: 6.333%;
  67. }
  68. .container_12 .grid_2
  69. {
  70. width: 14.666%;
  71. }
  72. .container_12 .grid_4
  73. {
  74. width: 31.333%;
  75. }
  76. .container_12 .grid_5
  77. {
  78. width: 39.666%;
  79. }
  80. .container_12 .grid_7
  81. {
  82. width: 56.333%;
  83. }
  84. .container_12 .grid_8
  85. {
  86. width: 64.666%;
  87. }
  88. .container_12 .grid_10
  89. {
  90. width: 81.333%;
  91. }
  92. .container_12 .grid_11
  93. {
  94. width: 89.666%;
  95. }
  96. /* =Grid >> 16 Columns
  97. --------------------------------------------------------------------------------*/
  98. .container_16 .grid_1
  99. {
  100. width: 4.25%;
  101. }
  102. .container_16 .grid_2
  103. {
  104. width: 10.5%;
  105. }
  106. .container_16 .grid_3
  107. {
  108. width: 16.75%;
  109. }
  110. .container_16 .grid_5
  111. {
  112. width: 29.25%;
  113. }
  114. .container_16 .grid_6
  115. {
  116. width: 35.5%;
  117. }
  118. .container_16 .grid_7
  119. {
  120. width: 41.75%;
  121. }
  122. .container_16 .grid_9
  123. {
  124. width: 54.25%;
  125. }
  126. .container_16 .grid_10
  127. {
  128. width: 60.5%;
  129. }
  130. .container_16 .grid_11
  131. {
  132. width: 66.75%;
  133. }
  134. .container_16 .grid_13
  135. {
  136. width: 79.25%;
  137. }
  138. .container_16 .grid_14
  139. {
  140. width: 85.5%;
  141. }
  142. .container_16 .grid_15
  143. {
  144. width: 91.75%;
  145. }
  146. /* =Prefix Extra Space >> Global
  147. --------------------------------------------------------------------------------*/
  148. .container_12 .prefix_3,
  149. .container_16 .prefix_4
  150. {
  151. padding-left: 25%;
  152. }
  153. .container_12 .prefix_6,
  154. .container_16 .prefix_8
  155. {
  156. padding-left: 50%;
  157. }
  158. .container_12 .prefix_9,
  159. .container_16 .prefix_12
  160. {
  161. padding-left: 75%;
  162. }
  163. /* =Prefix Extra Space >> 12 Columns
  164. --------------------------------------------------------------------------------*/
  165. .container_12 .prefix_1
  166. {
  167. padding-left: 8.333%;
  168. }
  169. .container_12 .prefix_2
  170. {
  171. padding-left: 16.666%;
  172. }
  173. .container_12 .prefix_4
  174. {
  175. padding-left: 33.333%;
  176. }
  177. .container_12 .prefix_5
  178. {
  179. padding-left: 41.666%;
  180. }
  181. .container_12 .prefix_7
  182. {
  183. padding-left: 58.333%;
  184. }
  185. .container_12 .prefix_8
  186. {
  187. padding-left: 66.666%;
  188. }
  189. .container_12 .prefix_10
  190. {
  191. padding-left: 83.333%;
  192. }
  193. .container_12 .prefix_11
  194. {
  195. padding-left: 91.666%;
  196. }
  197. /* =Prefix Extra Space >> 16 Columns
  198. --------------------------------------------------------------------------------*/
  199. .container_16 .prefix_1
  200. {
  201. padding-left: 6.25%;
  202. }
  203. .container_16 .prefix_2
  204. {
  205. padding-left: 12.5%;
  206. }
  207. .container_16 .prefix_3
  208. {
  209. padding-left: 18.75%;
  210. }
  211. .container_16 .prefix_5
  212. {
  213. padding-left: 31.25%;
  214. }
  215. .container_16 .prefix_6
  216. {
  217. padding-left: 37.5%;
  218. }
  219. .container_16 .prefix_7
  220. {
  221. padding-left: 43.75%;
  222. }
  223. .container_16 .prefix_9
  224. {
  225. padding-left: 56.25%;
  226. }
  227. .container_16 .prefix_10
  228. {
  229. padding-left: 62.5%;
  230. }
  231. .container_16 .prefix_11
  232. {
  233. padding-left: 68.75%;
  234. }
  235. .container_16 .prefix_13
  236. {
  237. padding-left: 81.25%;
  238. }
  239. .container_16 .prefix_14
  240. {
  241. padding-left: 87.5%;
  242. }
  243. .container_16 .prefix_15
  244. {
  245. padding-left: 93.75%;
  246. }
  247. /* =Suffix Extra Space >> Global
  248. --------------------------------------------------------------------------------*/
  249. .container_12 .suffix_3,
  250. .container_16 .suffix_4
  251. {
  252. padding-right: 25%;
  253. }
  254. .container_12 .suffix_6,
  255. .container_16 .suffix_8
  256. {
  257. padding-right: 50%;
  258. }
  259. .container_12 .suffix_9,
  260. .container_16 .suffix_12
  261. {
  262. padding-right: 75%;
  263. }
  264. /* =Suffix Extra Space >> 12 Columns
  265. --------------------------------------------------------------------------------*/
  266. .container_12 .suffix_1
  267. {
  268. padding-right: 8.333%;
  269. }
  270. .container_12 .suffix_2
  271. {
  272. padding-right: 16.666%;
  273. }
  274. .container_12 .suffix_4
  275. {
  276. padding-right: 33.333%;
  277. }
  278. .container_12 .suffix_5
  279. {
  280. padding-right: 41.666%;
  281. }
  282. .container_12 .suffix_7
  283. {
  284. padding-right: 58.333%;
  285. }
  286. .container_12 .suffix_8
  287. {
  288. padding-right: 66.666%;
  289. }
  290. .container_12 .suffix_10
  291. {
  292. padding-right: 83.333%;
  293. }
  294. .container_12 .suffix_11
  295. {
  296. padding-right: 91.666%;
  297. }
  298. /* =Suffix Extra Space >> 16 Columns
  299. --------------------------------------------------------------------------------*/
  300. .container_16 .suffix_1
  301. {
  302. padding-right: 6.25%;
  303. }
  304. .container_16 .suffix_2
  305. {
  306. padding-right: 16.5%;
  307. }
  308. .container_16 .suffix_3
  309. {
  310. padding-right: 18.75%;
  311. }
  312. .container_16 .suffix_5
  313. {
  314. padding-right: 31.25%;
  315. }
  316. .container_16 .suffix_6
  317. {
  318. padding-right: 37.5%;
  319. }
  320. .container_16 .suffix_7
  321. {
  322. padding-right: 43.75%;
  323. }
  324. .container_16 .suffix_9
  325. {
  326. padding-right: 56.25%;
  327. }
  328. .container_16 .suffix_10
  329. {
  330. padding-right: 62.5%;
  331. }
  332. .container_16 .suffix_11
  333. {
  334. padding-right: 68.75%;
  335. }
  336. .container_16 .suffix_13
  337. {
  338. padding-right: 81.25%;
  339. }
  340. .container_16 .suffix_14
  341. {
  342. padding-right: 87.5%;
  343. }
  344. .container_16 .suffix_15
  345. {
  346. padding-right: 93.75%;
  347. }
  348. /* =Clear Floated Elements
  349. --------------------------------------------------------------------------------*/
  350. /* http://sonspring.com/journal/clearing-floats */
  351. html body * span.cl,
  352. html body * div.cl,
  353. html body * li.cl,
  354. html body * dd.cl,
  355. .cl
  356. {
  357. background: none;
  358. border: 0;
  359. clear: both;
  360. display: block;
  361. float: none;
  362. font-size: 0;
  363. list-style: none;
  364. margin: 0;
  365. padding: 0;
  366. overflow: hidden;
  367. visibility: hidden;
  368. width: 0;
  369. height: 0;
  370. }
  371. /* http://www.positioniseverything.net/easyclearing.html */
  372. .cl:after
  373. {
  374. clear: both;
  375. content: '.';
  376. display: block;
  377. visibility: hidden;
  378. height: 0;
  379. }
  380. .cl
  381. {
  382. display: inline-block;
  383. }
  384. * html .cl
  385. {
  386. height: 1%;
  387. }
  388. .cl
  389. {
  390. display: block;
  391. }