KXStudio Website https://kx.studio/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

498 lines
6.6KB

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