An open source, stand-alone, customisable public spending data web app.
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.
 
 
 
 

338 lines
4.6 KiB

  1. /*
  2. Variable Grid System.
  3. Learn more ~ http://www.spry-soft.com/grids/
  4. Based on 960 Grid System - http://960.gs/
  5. Licensed under GPL and MIT.
  6. */
  7. /* Containers
  8. ----------------------------------------------------------------------------------------------------*/
  9. .container_12 {
  10. margin-left: auto;
  11. margin-right: auto;
  12. width: 960px;
  13. }
  14. /* Grid >> Global
  15. ----------------------------------------------------------------------------------------------------*/
  16. .grid_1,
  17. .grid_2,
  18. .grid_3,
  19. .grid_4,
  20. .grid_5,
  21. .grid_6,
  22. .grid_7,
  23. .grid_8,
  24. .grid_9,
  25. .grid_10,
  26. .grid_11,
  27. .grid_12 {
  28. display:inline;
  29. float: left;
  30. position: relative;
  31. margin-left: 15px;
  32. margin-right: 15px;
  33. }
  34. /* Grid >> Children (Alpha ~ First, Omega ~ Last)
  35. ----------------------------------------------------------------------------------------------------*/
  36. .alpha {
  37. margin-left: 0;
  38. }
  39. .omega {
  40. margin-right: 0;
  41. }
  42. /* Grid >> 12 Columns
  43. ----------------------------------------------------------------------------------------------------*/
  44. .container_12 .grid_1 {
  45. width:50px;
  46. }
  47. .container_12 .grid_2 {
  48. width:130px;
  49. }
  50. .container_12 .grid_3 {
  51. width:210px;
  52. }
  53. .container_12 .grid_4 {
  54. width:290px;
  55. }
  56. .container_12 .grid_5 {
  57. width:370px;
  58. }
  59. .container_12 .grid_6 {
  60. width:450px;
  61. }
  62. .container_12 .grid_7 {
  63. width:530px;
  64. }
  65. .container_12 .grid_8 {
  66. width:610px;
  67. }
  68. .container_12 .grid_9 {
  69. width:690px;
  70. }
  71. .container_12 .grid_10 {
  72. width:770px;
  73. }
  74. .container_12 .grid_11 {
  75. width:850px;
  76. }
  77. .container_12 .grid_12 {
  78. width:930px;
  79. }
  80. /* Prefix Extra Space >> 12 Columns
  81. ----------------------------------------------------------------------------------------------------*/
  82. .container_12 .prefix_1 {
  83. padding-left:80px;
  84. }
  85. .container_12 .prefix_2 {
  86. padding-left:160px;
  87. }
  88. .container_12 .prefix_3 {
  89. padding-left:240px;
  90. }
  91. .container_12 .prefix_4 {
  92. padding-left:320px;
  93. }
  94. .container_12 .prefix_5 {
  95. padding-left:400px;
  96. }
  97. .container_12 .prefix_6 {
  98. padding-left:480px;
  99. }
  100. .container_12 .prefix_7 {
  101. padding-left:560px;
  102. }
  103. .container_12 .prefix_8 {
  104. padding-left:640px;
  105. }
  106. .container_12 .prefix_9 {
  107. padding-left:720px;
  108. }
  109. .container_12 .prefix_10 {
  110. padding-left:800px;
  111. }
  112. .container_12 .prefix_11 {
  113. padding-left:880px;
  114. }
  115. /* Suffix Extra Space >> 12 Columns
  116. ----------------------------------------------------------------------------------------------------*/
  117. .container_12 .suffix_1 {
  118. padding-right:80px;
  119. }
  120. .container_12 .suffix_2 {
  121. padding-right:160px;
  122. }
  123. .container_12 .suffix_3 {
  124. padding-right:240px;
  125. }
  126. .container_12 .suffix_4 {
  127. padding-right:320px;
  128. }
  129. .container_12 .suffix_5 {
  130. padding-right:400px;
  131. }
  132. .container_12 .suffix_6 {
  133. padding-right:480px;
  134. }
  135. .container_12 .suffix_7 {
  136. padding-right:560px;
  137. }
  138. .container_12 .suffix_8 {
  139. padding-right:640px;
  140. }
  141. .container_12 .suffix_9 {
  142. padding-right:720px;
  143. }
  144. .container_12 .suffix_10 {
  145. padding-right:800px;
  146. }
  147. .container_12 .suffix_11 {
  148. padding-right:880px;
  149. }
  150. /* Push Space >> 12 Columns
  151. ----------------------------------------------------------------------------------------------------*/
  152. .container_12 .push_1 {
  153. left:80px;
  154. }
  155. .container_12 .push_2 {
  156. left:160px;
  157. }
  158. .container_12 .push_3 {
  159. left:240px;
  160. }
  161. .container_12 .push_4 {
  162. left:320px;
  163. }
  164. .container_12 .push_5 {
  165. left:400px;
  166. }
  167. .container_12 .push_6 {
  168. left:480px;
  169. }
  170. .container_12 .push_7 {
  171. left:560px;
  172. }
  173. .container_12 .push_8 {
  174. left:640px;
  175. }
  176. .container_12 .push_9 {
  177. left:720px;
  178. }
  179. .container_12 .push_10 {
  180. left:800px;
  181. }
  182. .container_12 .push_11 {
  183. left:880px;
  184. }
  185. /* Pull Space >> 12 Columns
  186. ----------------------------------------------------------------------------------------------------*/
  187. .container_12 .pull_1 {
  188. left:-80px;
  189. }
  190. .container_12 .pull_2 {
  191. left:-160px;
  192. }
  193. .container_12 .pull_3 {
  194. left:-240px;
  195. }
  196. .container_12 .pull_4 {
  197. left:-320px;
  198. }
  199. .container_12 .pull_5 {
  200. left:-400px;
  201. }
  202. .container_12 .pull_6 {
  203. left:-480px;
  204. }
  205. .container_12 .pull_7 {
  206. left:-560px;
  207. }
  208. .container_12 .pull_8 {
  209. left:-640px;
  210. }
  211. .container_12 .pull_9 {
  212. left:-720px;
  213. }
  214. .container_12 .pull_10 {
  215. left:-800px;
  216. }
  217. .container_12 .pull_11 {
  218. left:-880px;
  219. }
  220. /* Clear Floated Elements
  221. ----------------------------------------------------------------------------------------------------*/
  222. /* http://sonspring.com/journal/clearing-floats */
  223. .clear {
  224. clear: both;
  225. display: block;
  226. overflow: hidden;
  227. visibility: hidden;
  228. width: 0;
  229. height: 0;
  230. }
  231. /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
  232. .clearfix:after {
  233. clear: both;
  234. content: ' ';
  235. display: block;
  236. font-size: 0;
  237. line-height: 0;
  238. visibility: hidden;
  239. width: 0;
  240. height: 0;
  241. }
  242. .clearfix {
  243. display: inline-block;
  244. }
  245. * html .clearfix {
  246. height: 1%;
  247. }
  248. .clearfix {
  249. display: block;
  250. }