columnal.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571
  1. /* HTML RESET
  2. ///////////////////////////////////////////// */
  3. /*
  4. http://meyerweb.com/eric/tools/css/reset/
  5. v2.0 | 20110126
  6. License: none (public domain)
  7. */
  8. html, body, div, span, applet, object, iframe,
  9. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  10. a, abbr, acronym, address, big, cite, code,
  11. del, dfn, em, img, ins, kbd, q, s, samp,
  12. small, strike, strong, sub, sup, tt, var,
  13. b, u, i, center,
  14. dl, dt, dd, ol, ul, li,
  15. fieldset, form, label, legend,
  16. table, caption, tbody, tfoot, thead, tr, th, td,
  17. article, aside, canvas, details, embed,
  18. figure, figcaption, footer, header, hgroup,
  19. menu, nav, output, ruby, section, summary,
  20. time, mark, audio, video {
  21. margin: 0;
  22. padding: 0;
  23. border: 0;
  24. font-size: 100%;
  25. font: inherit;
  26. vertical-align: baseline;
  27. }
  28. /* HTML5 display-role reset for older browsers */
  29. article, aside, details, figcaption, figure,
  30. footer, header, hgroup, menu, nav, section {display: block;}
  31. body {line-height: 1;}
  32. ol, ul {list-style: none;}
  33. blockquote, q {quotes: none;}
  34. blockquote:before, blockquote:after,
  35. q:before, q:after {
  36. content: '';
  37. content: none;
  38. }
  39. table {border-collapse: collapse;border-spacing: 0;}
  40. /* END HTML RESET
  41. ///////////////////////////////////////////// */
  42. /* TYPE PRESETS
  43. ///////////////////////////////////////////// */
  44. /*
  45. _______________________________
  46. Columnal - TYPE (basic settings to make type look nice) */
  47. body {
  48. font-family: Helvetica, Arial, sans-serif;
  49. font-size: 100%;
  50. color: #444;
  51. line-height: 1.6em; /* from cssgrid.net */
  52. -webkit-text-size-adjust: none; /* from cssgrid.net */ /* Stops the iPhone scalling type up - from cssgrid.net */
  53. }
  54. /* h1, h2, h3, h4, h5, h6 { letter-spacing: 1px; } */
  55. h1, h2, h3, h4, h5, h6, p, dl, hr, ol, ul, pre, table, address, fieldset {margin-bottom: 1.6em;}
  56. /* Add back in basic text markup (after removal by reset) */
  57. strong { font-weight: bold; }
  58. em { font-style:italic; }
  59. pre { font-family: "Courier New", Courier, monospace; font-size: 13px; font-weight:bold; }
  60. /* text colors, add custom colors here to match your site */
  61. .teal { color: #155f62; }
  62. /* link colors */
  63. a { color: #058; text-decoration:none; }
  64. a:visited { color:#c14b0d; text-decoration:none; }
  65. a:hover { color:#eb6721; text-decoration:underline; }
  66. a:focus { outline:1px dotted #79160d; }
  67. /* .row hr, .row p, .row ul, .row ol, .row dl, .row pre, .row address, .row table, .row form {margin-bottom: 1.6em;} */
  68. dt { font-weight: bold; }
  69. p { font-size: 1em; }
  70. p + p, p + ul {margin-top: -.8em;}
  71. h1 { font-size: 2em; line-height:1.2em; font-weight:normal; margin:1em 0 .5em; }
  72. p + h1 { margin-top:.5em; }
  73. h2, h3, h4, h5, h6 { font-weight: bold; }
  74. h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: 0;} /* fix for weird Chrome collapse bug */
  75. h2 { font-size:1.7em; line-height:1.3em; margin:1.07em 0 .535em; }
  76. h3 { font-size:1.3em; margin:1.14em 0 .57em 0; }
  77. h4 { font-size:1.25em; margin:1em 0 .5em; }
  78. h5, h6 { font-size: 1em; margin:1em 0 .25em 0; }
  79. ol { margin-left: 0; padding-left: 20px; text-indent: 0; }
  80. ul {list-style:disc outside;}
  81. li { font-size: 15px; margin-bottom: 2px; margin-left: 20px; }
  82. blockquote { font-family: Georgia, "Times New Roman", Times, sans-serif; font-size:18px; line-height: 24px; font-style:italic; padding-left:35px; color: #999; margin: .5em 0 .5em 0; }
  83. input, textarea { font: .75em Arial, "Helvetica Neue", Helvetica, sans-serif; }
  84. hr { background:black; border:none; color:black; display:block; height:1px; margin-top: 20px; width:100%;}
  85. /*
  86. _______________________________
  87. Columnal - reverse type presets (for text on dark backgrounds) */
  88. .reverse h1, .reverse h2, .reverse h3, .reverse h4, .reverse h5, .reverse h6 {color: white;}
  89. .reverse p, .reverse ul {color: #aaa;}
  90. /*
  91. _______________________________
  92. IMAGE basics */
  93. img, object, embed {margin-bottom: 20px;}
  94. img {
  95. -webkit-border-radius: 3px;
  96. -moz-border-radius: 3px;
  97. border-radius: 3px;
  98. margin-bottom: 20px;
  99. }
  100. a img {display: block; /* Stops image links getting text link styles */}
  101. /* END TYPE PRESETS
  102. ///////////////////////////////////////////// */
  103. /* COLUMNAL - CORE
  104. ///////////////////////////////////////////// */
  105. /* Column code based on work from cssgrid.net:
  106. The 1140px Grid by Andy Taylor – http://cssgrid.net – http://www.twitter.com/andytlr – http://www.catchingzebra.com */
  107. .container {padding-left: 20px; padding-right: 20px;}
  108. .row {clear: both; width: 100%; max-width: 1140px; margin: 0 auto; overflow: hidden;}
  109. .col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11 {float: left; margin-right: 3.8%; position: relative;}
  110. .col_1 {width: 4.85%;} /* ie - 4.7% */
  111. .col_2 {width: 13.5%;} /* ie - 13.2% */
  112. .col_3 {width: 22.15%;} /* ie - 22.05% */
  113. .col_4 {width: 30.8%;} /* ie - 30.6% */
  114. .col_5 {width: 39.45%;} /* ie - 39% */
  115. .col_6 {width: 48.1%;} /* ie - 48% */
  116. .col_7 {width: 56.75%;} /* ie - 56.75% */
  117. .col_8 {width: 65.4%;} /* ie - 61.6% */
  118. .col_9 {width: 74.05%;} /* ie - 74.05% */
  119. .col_10 {width: 82.7%;} /* ie - 82.7% */
  120. .col_11 {width: 91.35%;}/* ie - 91.35% */
  121. .col_12 {clear: both; width: 100%; float: left;}
  122. .last, .omega {margin-right: 0 !important;}
  123. img, object, embed {max-width: 100%;}
  124. /*
  125. _______________________________
  126. Columnal - sub-columns */
  127. .col_2 .col_1 {margin-right:28.62%; width:35.69%;}
  128. .col_2 .pre_1 {padding-left:35.69%;}
  129. .col_2 .suf_1 {padding-right:35.69%;}
  130. /* */
  131. .col_3 .col_2, .col_3 .col_1 {margin-right:17.45%;}
  132. .col_3 .col_1 {width:21.7%;}
  133. .col_3 .col_2 {width:60.86%;}
  134. .col_3 .pre_1 {padding-left:21.7%;}
  135. .col_3 .pre_2 {padding-left:60.86%;}
  136. .col_3 .suf_1 {padding-right:21.7%;}
  137. .col_3 .suf_2 {padding-right:60.86%;}
  138. /* */
  139. .col_4 .col_3, .col_4 .col_2, .col_4 .col_1 {margin-right:12.36%;}
  140. .col_4 .col_1 {width:15.73%;}
  141. .col_4 .col_2 {width:43.82%;}
  142. .col_4 .col_3 {width:71.91%;}
  143. .col_4 .pre_1 {padding-left:28.09%;}
  144. .col_4 .pre_2 {padding-left:56.18%;}
  145. .col_4 .pre_3 {padding-left:84.27%;}
  146. .col_4 .suf_1 {padding-right:28.09%;}
  147. .col_4 .suf_2 {padding-right:56.18%;}
  148. .col_4 .suf_3 {padding-right:84.27%;}
  149. /* */
  150. .col_5 .col_4, .col_5 .col_3, .col_5 .col_2, .col_5 .col_1 {margin-right:9.7%;}
  151. .col_5 .col_1 {width:12.24%;}
  152. .col_5 .col_2 {width:34%;}
  153. .col_5 .col_3 {width:56.28%;}
  154. .col_5 .col_4 {width:78%;}
  155. .col_5 .pre_1 {padding-left:21.94%;}
  156. .col_5 .pre_2 {padding-left:43.7%;}
  157. .col_5 .pre_3 {padding-left:65.98%;}
  158. .col_5 .pre_4 {padding-left:87.7%;}
  159. .col_5 .suf_1 {padding-right:21.94%;}
  160. .col_5 .suf_2 {padding-right:43.7%;}
  161. .col_5 .suf_3 {padding-right:65.98%;}
  162. .col_5 .suf_4 {padding-right:87.7%;}
  163. /* */
  164. .col_6 .col_5, .col_6 .col_4, .col_6 .col_3, .col_6 .col_2, .col_6 .col_1 {margin-right:7.77%}
  165. .col_6 .col_1 {width:10.19%;}
  166. .col_6 .col_2 {width: 28.13%;}
  167. .col_6 .col_3 {width: 46.11%;}
  168. .col_6 .col_4 {width: 64.1%;}
  169. .col_6 .col_5 {width: 82%;}
  170. .col_6 .pre_1 {padding-left:89.77%;}
  171. .col_6 .pre_2 {padding-left:71.87%;}
  172. .col_6 .pre_3 {padding-left:53.88%;}
  173. .col_6 .pre_4 {padding-left:35.9%;}
  174. .col_6 .pre_5 {padding-left:17.96%;}
  175. .col_6 .suf_1 {padding-right:89.77%;}
  176. .col_6 .suf_2 {padding-right:71.87%;}
  177. .col_6 .suf_3 {padding-right:53.88%;}
  178. .col_6 .suf_4 {padding-right:35.9%;}
  179. .col_6 .suf_5 {padding-right:17.96%;}
  180. /* */
  181. .col_7 .col_6, .col_7 .col_5, .col_7 .col_4, .col_7 .col_3, .col_7 .col_2, .col_7 .col_1 {margin-right: 6.56%;}
  182. .col_7 .col_1 {width:8.66%;}
  183. .col_7 .col_2 {width:23.88%;}
  184. .col_7 .col_3 {width:39.11%;}
  185. .col_7 .col_4 {width:54.33%;}
  186. .col_7 .col_5 {width:69.56%;}
  187. .col_7 .col_6 {width:84.78%;}
  188. .col_7 .pre_1 {padding-left:15.22%;}
  189. .col_7 .pre_2 {padding-left:30.44%;}
  190. .col_7 .pre_3 {padding-left:45.67%;}
  191. .col_7 .pre_4 {padding-left:60.89%;}
  192. .col_7 .pre_5 {padding-left:76.12%;}
  193. .col_7 .pre_6 {padding-left:91.34%;}
  194. .col_7 .suf_1 {padding-right:15.22%;}
  195. .col_7 .suf_2 {padding-right:30.44%;}
  196. .col_7 .suf_3 {padding-right:45.67%;}
  197. .col_7 .suf_4 {padding-right:60.89%;}
  198. .col_7 .suf_5 {padding-right:76.12%;}
  199. .col_7 .suf_6 {padding-right:91.34%;}
  200. /* */
  201. .col_8 .col_7, .col_8 .col_6, .col_8 .col_5, .col_8 .col_4, .col_8 .col_3, .col_8 .col_2, .col_8 .col_1 {margin-right:5.78%;}
  202. .col_8 .col_1 {width:7.44%;}
  203. .col_8 .col_2 {width:20.66%;}
  204. .col_8 .col_3 {width:33.89%;}
  205. .col_8 .col_4 {width:47.11%;}
  206. .col_8 .col_5 {width:60.33%;}
  207. .col_8 .col_6 {width:73.56%;}
  208. .col_8 .col_7 {width:86.78%;}
  209. .col_8 .pre_1 {padding-left:13.22%;}
  210. .col_8 .pre_2 {padding-left:26.44%;}
  211. .col_8 .pre_3 {padding-left:39.67%;}
  212. .col_8 .pre_4 {padding-left:52.89%;}
  213. .col_8 .pre_5 {padding-left:66.11%;}
  214. .col_8 .pre_6 {padding-left:79.34%;}
  215. .col_8 .pre_7 {padding-left:92.56%;}
  216. .col_8 .suf_1 {padding-right:13.22%;}
  217. .col_8 .suf_2 {padding-right:26.44%;}
  218. .col_8 .suf_3 {padding-right:39.67%;}
  219. .col_8 .suf_4 {padding-right:52.89%;}
  220. .col_8 .suf_5 {padding-right:66.11%;}
  221. .col_8 .suf_6 {padding-right:79.34%;}
  222. .col_8 .suf_7 {padding-right:92.56%;}
  223. /* */
  224. .col_9 .col_1, .col_9 .col_2, .col_9 .col_3, .col_9 .col_4, .col_9 .col_5, .col_9 .col_6, .col_9 .col_6, .col_9 .col_7, .col_9 .col_8 {margin-right:5.1%;}
  225. .col_9 .col_1 {width:6.57%;}
  226. .col_9 .col_2 {width:18.25%;}
  227. .col_9 .col_3 {width:29.93%;}
  228. .col_9 .col_4 {width:41.61%;}
  229. .col_9 .col_5 {width:53.25%}
  230. .col_9 .col_6 {width:64.97%;}
  231. .col_9 .col_7 {width:76.65%;}
  232. .col_9 .col_8 {width:88.33%;}
  233. .col_9 .pre_1 {padding-left:11.67%;}
  234. .col_9 .pre_2 {padding-left:23.35%;}
  235. .col_9 .pre_3 {padding-left:35.03%;}
  236. .col_9 .pre_4 {padding-left:46.71%;}
  237. .col_9 .pre_5 {padding-left:58.35%}
  238. .col_9 .pre_6 {padding-left:70.07%;}
  239. .col_9 .pre_7 {padding-left:81.75%;}
  240. .col_9 .pre_8 {padding-left:93.43%;}
  241. .col_9 .suf_1 {padding-right:11.67%;}
  242. .col_9 .suf_2 {padding-right:23.35%;}
  243. .col_9 .suf_3 {padding-right:35.03%;}
  244. .col_9 .suf_4 {padding-right:46.71%;}
  245. .col_9 .suf_5 {padding-right:58.35%}
  246. .col_9 .suf_6 {padding-right:70.07%;}
  247. .col_9 .suf_7 {padding-right:81.75%;}
  248. .col_9 .suf_8 {padding-right:93.43%;}
  249. /* */
  250. .col_10 .col_9, .col_10 .col_8, .col_10 .col_7, .col_10 .col_6, .col_10 .col_5, .col_10 .col_4, .col_10 .col_3, .col_10 .col_2, .col_10 .col_1 {margin-right:4.61%;}
  251. .col_10 .col_1 {width:5.85%;}
  252. .col_10 .col_2 {width:16.31%;}
  253. .col_10 .col_3 {width:26.77%;}
  254. .col_10 .col_4 {width:37.23%;}
  255. .col_10 .col_5 {width:47.69%;}
  256. .col_10 .col_6 {width:58.16%;}
  257. .col_10 .col_7 {width:68.62%;}
  258. .col_10 .col_8 {width:79.08%;}
  259. .col_10 .col_9 {width:89.54%;}
  260. .col_10 .pre_1 {padding-left:10.46%;}
  261. .col_10 .pre_2 {padding-left:20.92%;}
  262. .col_10 .pre_3 {padding-left:31.38%;}
  263. .col_10 .pre_4 {padding-left:41.84%;}
  264. .col_10 .pre_5 {padding-left:52.3%;}
  265. .col_10 .pre_6 {padding-left:62.77%;}
  266. .col_10 .pre_7 {padding-left:73.23%;}
  267. .col_10 .pre_8 {padding-left:83.69%;}
  268. .col_10 .pre_9 {padding-left:94.06%;}
  269. .col_10 .suf_1 {padding-right:10.46%;}
  270. .col_10 .suf_2 {padding-right:20.92%;}
  271. .col_10 .suf_3 {padding-right:31.38%;}
  272. .col_10 .suf_4 {padding-right:41.84%;}
  273. .col_10 .suf_5 {padding-right:52.3%;}
  274. .col_10 .suf_6 {padding-right:62.77%;}
  275. .col_10 .suf_7 {padding-right:73.23%;}
  276. .col_10 .suf_8 {padding-right:83.69%;}
  277. .col_10 .suf_9 {padding-right:94.06%;}
  278. /* */
  279. .col_11 .col_10, .col_11 .col_9, .col_11 .col_8, .col_11 .col_7, .col_11 .col_6, .col_11 .col_5, .col_11 .col_4, .col_11 .col_3, .col_11 .col_2, .col_11 .col_1 {margin-right:4.14%;}
  280. .col_11 .col_1 {width:5.32%;}
  281. .col_11 .col_2 {width:14.79%;}
  282. .col_11 .col_3 {width:24.26%;}
  283. .col_11 .col_4 {width:33.73%;}
  284. .col_11 .col_5 {width:43.2%;}
  285. .col_11 .col_6 {width:52.66%;}
  286. .col_11 .col_7 {width:62.1%;}
  287. .col_11 .col_8 {width:71.6%;}
  288. .col_11 .col_9 {width:81.07%;}
  289. .col_11 .col_10 {width:90.54%;}
  290. .col_11 .pre_1 {padding-left:9.46%;}
  291. .col_11 .pre_2 {padding-left:18.93%;}
  292. .col_11 .pre_3 {padding-left:28.4%;}
  293. .col_11 .pre_4 {padding-left:37.87%;}
  294. .col_11 .pre_5 {padding-left:47.34%;}
  295. .col_11 .pre_6 {padding-left:56.8%;}
  296. .col_11 .pre_7 {padding-left:66.24%;}
  297. .col_11 .pre_8 {padding-left:75.74%;}
  298. .col_11 .pre_9 {padding-left:85.21%;}
  299. .col_11 .pre_10 {padding-left:94.68%;}
  300. .col_11 .suf_1 {padding-right:9.46%;}
  301. .col_11 .suf_2 {padding-right:18.93%;}
  302. .col_11 .suf_3 {padding-right:28.4%;}
  303. .col_11 .suf_4 {padding-right:37.87%;}
  304. .col_11 .suf_5 {padding-right:47.34%;}
  305. .col_11 .suf_6 {padding-right:56.8%;}
  306. .col_11 .suf_7 {padding-right:66.24%;}
  307. .col_11 .suf_8 {padding-right:75.74%;}
  308. .col_11 .suf_9 {padding-right:85.21%;}
  309. .col_11 .suf_10 {padding-right:94.68%;}
  310. /*
  311. _______________________________
  312. Columnal - prefix and suffix columns for horizontal spacing options */
  313. /* spacing for before column */
  314. .pre_1 {padding-left: 8.65%;} /* 4.85 + 3.8 */
  315. .pre_2 {padding-left: 17.3%;} /* 13.5 + 3.8 */
  316. .pre_3 {padding-left: 25.95%;} /* 22.15 + 3.8 */
  317. .pre_4 {padding-left: 34.6%;} /* 30.8 + 3.8 */
  318. .pre_5 {padding-left: 43.25%;} /* 39.45 + 3.8 */
  319. .pre_6 {padding-left: 51.9%;} /* 48.1 + 3.8 */
  320. .pre_7 {padding-left: 60.55%;} /* 56.75 + 3.8 */
  321. .pre_8 {padding-left: 69.2%;} /* 65.4 + 3.8 */
  322. .pre_9 {padding-left: 77.85%;} /* 74.05 + 3.8 */
  323. .pre_10 {padding-left: 86.5%;} /* 82.7 + 3.8 */
  324. .pre_11 {padding-left: 95.15%;} /* 91.35 + 3.8 */
  325. /* spacing for after column */
  326. .suf_1 {padding-right: 8.65%;}
  327. .suf_2 {padding-right: 17.3%;}
  328. .suf_3 {padding-right: 25.95%}
  329. .suf_4 {padding-right: 34.6%;}
  330. .suf_5 {padding-right: 43.25%;}
  331. .suf_6 {padding-right: 51.9%;}
  332. .suf_7 {padding-right: 60.55%;}
  333. .suf_8 {padding-right: 69.2%;}
  334. .suf_9 {padding-right: 77.85%;}
  335. .suf_10 {padding-right: 86.5%;}
  336. .suf_11 {padding-right: 95.15%;}
  337. /*
  338. _______________________________
  339. Columnal - vertical spacing options */
  340. .margin_top_5 {margin-top: 5px !important;}
  341. .margin_top_15 {margin-top: 15px !important;}
  342. .margin_top_25 {margin-top: 25px !important;}
  343. .margin_top_30 {margin-top: 30px !important;}
  344. .margin_top_35 {margin-top: 35px !important;}
  345. .margin_top_45 {margin-top: 45px !important;}
  346. .margin_top_60 {margin-top: 60px !important;}
  347. .margin_top_90 {margin-top: 90px !important;}
  348. .margin_top_120 {margin-top: 120px !important;}
  349. .margin_bottom_5 {margin-bottom: 5px !important;}
  350. .margin_bottom_15 {margin-bottom: 15px !important;}
  351. .margin_bottom_25 {margin-bottom: 25px !important;}
  352. .margin_bottom_30 {margin-bottom: 30px !important;}
  353. .margin_bottom_35 {margin-bottom: 35px !important;}
  354. .margin_bottom_45 {margin-bottom: 45px !important;}
  355. .margin_bottom_60 {margin-bottom: 60px !important;}
  356. .margin_bottom_90 {margin-bottom: 90px !important;}
  357. .margin_bottom_120 {margin-bottom: 120px !important;}
  358. .padding_top_15 {padding-top:15px !important;}
  359. .padding_top_30 {padding-top:30px !important;}
  360. .padding_top_45 {padding-top:45px !important;}
  361. .padding_top_60 {padding-top:60px !important;}
  362. .padding_top_90 {padding-top:90px !important;}
  363. .padding_top_120 {padding-top:120px !important;}
  364. .padding_top_130 {padding-top:130px !important;}
  365. .padding_bottom_15 {padding-bottom:15px !important;}
  366. .padding_bottom_30 {padding-bottom:30px !important;}
  367. .padding_bottom_45 {padding-bottom:45px !important;}
  368. .padding_bottom_60 {padding-bottom:60px !important;}
  369. .padding_bottom_90 {padding-bottom:90px !important;}
  370. .padding_bottom_120 {padding-bottom:120px !important;}
  371. .padding_bottom_130 {padding-bottom:130px !important;}
  372. /*
  373. _______________________________
  374. Columnal - extras */
  375. .clear, .clearboth {clear:both !important;}
  376. .clearleft {clear:left !important;}
  377. .clearright {clear:right !important;}
  378. .textcenter {text-align:center;}
  379. .textright {text-align:right;}
  380. .textleft {text-align:left;}
  381. /* this will insert a pseduo element clears floats for an element containing floated content */
  382. .selfclear:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
  383. .mobile-only {display: none;}
  384. /* END COLUMNAL - CORE CODE
  385. ///////////////////////////////////////////// */
  386. /* COLUMNAL - MOBILE
  387. ///////////////////////////////////////////// */
  388. @media handheld, only screen and (max-width: 767px) {
  389. .row, .body, .container {
  390. width: 100%;
  391. margin-left:0;
  392. margin-right:0;
  393. padding-left:0;
  394. padding-right:0;
  395. }
  396. /* kill prefixes and suffixes, otherwise 1-column version breaks */
  397. .pre_1, .pre_2, .pre_3, .pre_4, .pre_5, .pre_6, .pre_7, .pre_8, .pre_9, .pre_10, .pre_11 {padding-left: 0;}
  398. .suf_1, .suf_2, .suf_3, .suf_4, .suf_5, .suf_6, .suf_7, .suf_8, .suf_9, .suf_10, .suf_11 {padding-right: 0;}
  399. /************************************************************************/
  400. /* cssgrid.net - mobile presets */
  401. .col_1, .col_2, .col_3, .col_4, .col_5, .col_6,
  402. .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 {
  403. clear: both;
  404. float: none;
  405. margin-left: 0;
  406. margin-right: 0;
  407. padding-left: 20px;
  408. padding-right: 20px;
  409. width: auto;
  410. width: -moz-available;
  411. }
  412. /* Columnal - sub columns */
  413. .col_2 .col_1,
  414. .col_3 .col_2, .col_3 .col_1,
  415. .col_4 .col_3, .col_4 .col_2, .col_4 .col_1,
  416. .col_5 .col_4, .col_5 .col_3, .col_5 .col_2, .col_5 .col_1,
  417. .col_6 .col_5, .col_6 .col_4, .col_6 .col_3, .col_6 .col_2, .col_6 .col_1,
  418. .col_7 .col_6, .col_7 .col_5, .col_7 .col_4, .col_7 .col_3, .col_7 .col_2, .col_7 .col_1,
  419. .col_8 .col_7, .col_8 .col_6, .col_8 .col_5, .col_8 .col_4, .col_8 .col_3, .col_8 .col_2, .col_8 .col_1,
  420. .col_9 .col_1, .col_9 .col_2, .col_9 .col_3, .col_9 .col_4, .col_9 .col_5, .col_9 .col_6, .col_9 .col_7, .col_9 .col_8,
  421. .col_10 .col_9, .col_10 .col_8, .col_10 .col_7, .col_10 .col_6, .col_10 .col_5, .col_10 .col_4, .col_10 .col_3, .col_10 .col_2, .col_10 .col_1,
  422. .col_11 .col_10, .col_11 .col_9, .col_11 .col_8, .col_11 .col_7, .col_11 .col_6, .col_11 .col_5, .col_11 .col_4, .col_11 .col_3, .col_11 .col_2, .col_11 .col_1,
  423. .col_12 .col_11, .col_12 .col_10, .col_12 .col_9, .col_12 .col_8, .col_12 .col_7, .col_12 .col_6, .col_12 .col_5, .col_12 .col_4, .col_12 .col_3, .col_12 .col_2, .col_12 .col_1 {
  424. padding-left: 0;
  425. padding-right: 0;
  426. width: 100%;
  427. }
  428. /* .row {width: 100%;} */
  429. /* Type presets */
  430. .container h1 {margin:.5em 0 .5em;}
  431. .container h2 {margin:.5em 0 .535em;}
  432. .container h3 {margin:.5em 0 .57em;}
  433. .container h4 {margin:.5em 0 .615em;}
  434. .container h5 {margin:.5em 0 .67em;}
  435. .container h6 {margin:.5em 0 .8em;}
  436. /* .reverse {padding-top: 1em; margin-bottom: 1em;} */
  437. /* Columnal content control - use on any elements to show/hide content on mobile */
  438. .mobile-hide {display: none;}
  439. .mobile-only {display: block;}
  440. /*****************************************
  441. CUSTOM ADDITIONS FOR MOBILE SITE LAYOUT
  442. *****************************************/
  443. }
  444. /* END COLUMNAL - MOBILE
  445. ///////////////////////////////////////////// */