style.css 25 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078
  1. /*
  2. Theme Name: bml
  3. Theme URI: http://cantbuymelove.org
  4. Author: windhamdavid
  5. Author URI: http://davidawindham.com
  6. /* Thanks!
  7. https://github.com/dhg Dave Gamache
  8. https://github.com/Automattic/_s - Team Automattic
  9. https://github.com/Prinzhorn/skrollr - Alexander Prinzhorn
  10. https://plus.google.com/104610899646415406748/about - James Grieshaber
  11. */
  12. @import url(https://fonts.googleapis.com/css?family=Reenie+Beanie);
  13. /* =Reset
  14. -------------------------------------------------------------- */
  15. html, body, div, span, applet, object, iframe,
  16. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  17. a, abbr, acronym, address, big, cite, code,
  18. del, dfn, em, font, ins, kbd, q, s, samp,
  19. small, strike, strong, sub, sup, tt, var,
  20. dl, dt, dd, ol, ul, li,
  21. fieldset, form, label, legend,
  22. table, caption, tbody, tfoot, thead, tr, th, td {
  23. border: 0;
  24. font-family: inherit;
  25. font-size: 100%;
  26. font-style: inherit;
  27. font-weight: inherit;
  28. margin: 0;
  29. outline: 0;
  30. padding: 0;
  31. vertical-align: baseline;
  32. }
  33. html {
  34. font-size: 62.5%;
  35. overflow-y: scroll;
  36. -webkit-text-size-adjust: 100%;
  37. -ms-text-size-adjust: 100%;
  38. }
  39. body {
  40. background: #fff;
  41. }
  42. article,
  43. aside,
  44. details,
  45. figcaption,
  46. figure,
  47. footer,
  48. header,
  49. main,
  50. nav,
  51. section {
  52. display: block;
  53. }
  54. ol, ul {
  55. list-style: none;
  56. }
  57. table {
  58. border-collapse: separate;
  59. border-spacing: 0;
  60. }
  61. caption, th, td {
  62. font-weight: normal;
  63. text-align: left;
  64. }
  65. blockquote:before, blockquote:after,
  66. q:before, q:after {
  67. content: "";
  68. }
  69. blockquote, q {
  70. quotes: "" "";
  71. }
  72. a:focus {
  73. outline: thin dotted;
  74. }
  75. a:hover,
  76. a:active {
  77. outline: 0;
  78. }
  79. a img {
  80. border: 0;
  81. }
  82. #bml { width: 400px; height: 45px; margin: 90px 20px 5px;}
  83. .hasCountdown {
  84. background-color: #fff;
  85. }
  86. .countdown_rtl {
  87. direction: rtl;
  88. }
  89. .countdown_holding span {
  90. color: #000;
  91. }
  92. .countdown_row {
  93. clear: both;
  94. width: 100%;
  95. padding: 0px 2px;
  96. text-align: center;
  97. }
  98. .countdown_show1 .countdown_section {
  99. width: 98%;
  100. }
  101. .countdown_show2 .countdown_section {
  102. width: 48%;
  103. }
  104. .countdown_show3 .countdown_section {
  105. width: 32.5%;
  106. }
  107. .countdown_show4 .countdown_section {
  108. width: 24.5%;
  109. }
  110. .countdown_show5 .countdown_section {
  111. width: 19.5%;
  112. }
  113. .countdown_show6 .countdown_section {
  114. width: 16.25%;
  115. }
  116. .countdown_show7 .countdown_section {
  117. width: 14%;
  118. }
  119. .countdown_section {
  120. display: block;
  121. float: left;
  122. font-size: 120%;
  123. font-family:Reenie Beanie;
  124. text-align: left;
  125. }
  126. .countdown_amount {
  127. font-size: 300%;
  128. font-family:Reenie Beanie;
  129. }
  130. .countdown_descr {
  131. display: block;
  132. width: 100%;
  133. }
  134. body,
  135. button,
  136. input,
  137. select,
  138. textarea {
  139. color: #404040;
  140. font-size: 18px;
  141. font-size: 1.6rem;
  142. line-height: 1.5;
  143. }
  144. h1, h2, h3, h4, h5, h6 {
  145. clear: both;
  146. }
  147. hr {
  148. background-color: #ccc;
  149. border: 0;
  150. height: 1px;
  151. margin-bottom: 1.5em;
  152. }
  153. p {
  154. margin-bottom: 1.5em;
  155. }
  156. ul, ol {
  157. margin: 0 0 1.5em 3em;
  158. }
  159. ul {
  160. list-style: disc;
  161. }
  162. ol {
  163. list-style: decimal;
  164. }
  165. li > ul,
  166. li > ol {
  167. margin-bottom: 0;
  168. margin-left: 1.5em;
  169. }
  170. dt {
  171. font-weight: bold;
  172. }
  173. dd {
  174. margin: 0 1.5em 1.5em;
  175. }
  176. b, strong {
  177. font-weight: bold;
  178. }
  179. dfn, cite, em, i {
  180. font-style: italic;
  181. }
  182. blockquote {
  183. margin: 0 1.5em;
  184. }
  185. address {
  186. margin: 0 0 1.5em;
  187. }
  188. pre {
  189. background: #eee;
  190. font-family: "Courier 10 Pitch", Courier, monospace;
  191. font-size: 15px;
  192. font-size: 1.5rem;
  193. line-height: 1.6;
  194. margin-bottom: 1.6em;
  195. max-width: 100%;
  196. overflow: auto;
  197. padding: 1.6em;
  198. }
  199. code, kbd, tt, var {
  200. font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  201. }
  202. abbr, acronym {
  203. border-bottom: 1px dotted #666;
  204. cursor: help;
  205. }
  206. mark, ins {
  207. background: #fff9c0;
  208. text-decoration: none;
  209. }
  210. sup,
  211. sub {
  212. font-size: 75%;
  213. height: 0;
  214. line-height: 0;
  215. position: relative;
  216. vertical-align: baseline;
  217. }
  218. sup {
  219. bottom: 1ex;
  220. }
  221. sub {
  222. top: .5ex;
  223. }
  224. small {
  225. font-size: 75%;
  226. }
  227. big {
  228. font-size: 125%;
  229. }
  230. figure {
  231. margin: 0;
  232. }
  233. table {
  234. margin: 0 0 1.5em;
  235. width: 100%;
  236. }
  237. th {
  238. font-weight: bold;
  239. }
  240. img {
  241. height: auto;
  242. max-width: 100%;
  243. }
  244. textarea {
  245. overflow: auto;
  246. padding-left: 3px;
  247. vertical-align: top;
  248. width: 98%;
  249. }
  250. a {
  251. color: royalblue;
  252. }
  253. a:visited {
  254. color: purple;
  255. }
  256. a:hover,
  257. a:focus,
  258. a:active {
  259. color: midnightblue;
  260. }
  261. .alignleft {
  262. display: inline;
  263. float: left;
  264. margin-right: 1.5em;
  265. }
  266. .alignright {
  267. display: inline;
  268. float: right;
  269. margin-left: 1.5em;
  270. }
  271. .aligncenter {
  272. clear: both;
  273. display: block;
  274. margin: 0 auto;
  275. }
  276. .screen-reader-text {
  277. clip: rect(1px, 1px, 1px, 1px);
  278. position: absolute !important;
  279. }
  280. .screen-reader-text:hover,
  281. .screen-reader-text:active,
  282. .screen-reader-text:focus {
  283. background-color: #f1f1f1;
  284. border-radius: 3px;
  285. box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  286. clip: auto !important;
  287. color: #21759b;
  288. display: block;
  289. font-size: 14px;
  290. font-weight: bold;
  291. height: auto;
  292. left: 5px;
  293. line-height: normal;
  294. padding: 15px 23px 14px;
  295. text-decoration: none;
  296. top: 5px;
  297. width: auto;
  298. z-index: 100000;
  299. }
  300. .clear:before,
  301. .clear:after,
  302. .entry-content:before,
  303. .entry-content:after,
  304. .comment-content:before,
  305. .comment-content:after,
  306. .site-header:before,
  307. .site-header:after,
  308. .site-content:before,
  309. .site-content:after,
  310. .site-footer:before,
  311. .site-footer:after {
  312. content: '';
  313. display: table;
  314. }
  315. .clear:after,
  316. .entry-content:after,
  317. .comment-content:after,
  318. .site-header:after,
  319. .site-content:after,
  320. .site-footer:after {
  321. clear: both;
  322. }
  323. #inline button {
  324. font-family: Reenie Beanie;
  325. text-decoration: none !important;
  326. position:relative;
  327. margin:10px;
  328. padding: 8px 15px;
  329. font-weight: bold;
  330. font-size: 18px;
  331. background: #1275FF;
  332. border: 1px solid #155FB0;
  333. color: white;
  334. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  335. background-image: -webkit-gradient(linear, left top, left bottom, from(#77B7FF), to(#017AFF));
  336. background-image: -moz-linear-gradient(top, #77B7FF, #017AFF);
  337. background-image: -o-linear-gradient(top, #77B7FF, #017AFF);
  338. -webkit-box-shadow: inset 0 1px 0 #98c9ff;
  339. -moz-box-shadow: inset 0 1px 0 #98c9ff;
  340. box-shadow: inset 0 1px 0 #98c9ff;
  341. -o-border-radius: 4px;
  342. -moz-border-radius: 4px;
  343. -webkit-border-radius: 4px;
  344. border-radius: 4px;
  345. cursor: pointer; cursor: hand;
  346. }
  347. #inline a button {
  348. text-decoration: none !important;
  349. }
  350. #fancybox-loading {
  351. position: fixed;
  352. top: 50%;
  353. left: 50%;
  354. width: 40px;
  355. height: 40px;
  356. margin-top: -20px;
  357. margin-left: -20px;
  358. cursor: pointer;
  359. overflow: hidden;
  360. z-index: 1104;
  361. display: none;
  362. }
  363. #fancybox-loading div {
  364. position: absolute;
  365. top: 0;
  366. left: 0;
  367. width: 40px;
  368. height: 480px;
  369. background-image: url('img/fancybox.png');
  370. }
  371. #fancybox-overlay {
  372. position: absolute;
  373. top: 0;
  374. left: 0;
  375. width: 100%;
  376. z-index: 1100;
  377. display: none;
  378. }
  379. #fancybox-tmp {
  380. padding: 0;
  381. margin: 0;
  382. border: 0;
  383. overflow: auto;
  384. display: none;
  385. }
  386. #fancybox-wrap {
  387. position: absolute;
  388. top: 0;
  389. left: 0;
  390. padding: 20px;
  391. z-index: 1101;
  392. outline: none;
  393. display: none;
  394. }
  395. #fancybox-outer {
  396. position: relative;
  397. width: 100%;
  398. height: 100%;
  399. background: #fff;
  400. }
  401. #fancybox-content {
  402. width: 0;
  403. height: 0;
  404. padding: 0;
  405. outline: none;
  406. position: relative;
  407. overflow: hidden;
  408. z-index: 1102;
  409. border: 0px solid #fff;
  410. }
  411. #fancybox-hide-sel-frame {
  412. position: absolute;
  413. top: 0;
  414. left: 0;
  415. width: 100%;
  416. height: 100%;
  417. background: transparent;
  418. z-index: 1101;
  419. }
  420. #fancybox-close {
  421. position: absolute;
  422. top: -15px;
  423. right: -15px;
  424. width: 30px;
  425. height: 30px;
  426. background: transparent;
  427. cursor: pointer;
  428. z-index: 1103;
  429. display: none;
  430. }
  431. #fancybox-error {
  432. color: #444;
  433. font: normal 12px/20px Arial;
  434. padding: 14px;
  435. margin: 0;
  436. }
  437. #fancybox-img {
  438. width: 100%;
  439. height: 100%;
  440. padding: 0;
  441. margin: 0;
  442. border: none;
  443. outline: none;
  444. line-height: 0;
  445. vertical-align: top;
  446. }
  447. #fancybox-frame {
  448. width: 100%;
  449. height: 100%;
  450. border: none;
  451. display: block;
  452. }
  453. #fancybox-left, #fancybox-right {
  454. position: absolute;
  455. bottom: 0px;
  456. height: 100%;
  457. width: 35%;
  458. cursor: pointer;
  459. outline: none;
  460. background: transparent url('img/blank.gif');
  461. z-index: 1102;
  462. display: none;
  463. }
  464. #fancybox-left {
  465. left: 0px;
  466. }
  467. #fancybox-right {
  468. right: 0px;
  469. }
  470. #fancybox-left-ico, #fancybox-right-ico {
  471. position: absolute;
  472. top: 50%;
  473. left: -9999px;
  474. width: 30px;
  475. height: 30px;
  476. margin-top: -15px;
  477. cursor: pointer;
  478. z-index: 1102;
  479. display: block;
  480. }
  481. #fancybox-left-ico {
  482. background-image: url('img/fancybox.png');
  483. background-position: -40px -30px;
  484. }
  485. #fancybox-right-ico {
  486. background-image: url('img/fancybox.png');
  487. background-position: -40px -60px;
  488. }
  489. #fancybox-left:hover, #fancybox-right:hover {
  490. visibility: visible; /* IE6 */
  491. }
  492. #fancybox-left:hover span {
  493. left: 20px;
  494. }
  495. #fancybox-right:hover span {
  496. left: auto;
  497. right: 20px;
  498. }
  499. .fancybox-bg {
  500. position: absolute;
  501. padding: 0;
  502. margin: 0;
  503. border: 0;
  504. width: 20px;
  505. height: 20px;
  506. z-index: 1001;
  507. }
  508. #fancybox-bg-n {
  509. top: -20px;
  510. left: 0;
  511. width: 100%;
  512. background-image: url('img/fancybox-x.png');
  513. }
  514. #fancybox-bg-ne {
  515. top: -20px;
  516. right: -20px;
  517. background-image: url('img/fancybox.png');
  518. background-position: -40px -162px;
  519. }
  520. #fancybox-bg-e {
  521. top: 0;
  522. right: -20px;
  523. height: 100%;
  524. background-image: url('img/fancybox-y.png');
  525. background-position: -20px 0px;
  526. }
  527. #fancybox-bg-se {
  528. bottom: -20px;
  529. right: -20px;
  530. background-image: url('img/fancybox.png');
  531. background-position: -40px -182px;
  532. }
  533. #fancybox-bg-s {
  534. bottom: -20px;
  535. left: 0;
  536. width: 100%;
  537. background-image: url('img/fancybox-x.png');
  538. background-position: 0px -20px;
  539. }
  540. #fancybox-bg-sw {
  541. bottom: -20px;
  542. left: -20px;
  543. background-image: url('img/fancybox.png');
  544. background-position: -40px -142px;
  545. }
  546. #fancybox-bg-w {
  547. top: 0;
  548. left: -20px;
  549. height: 100%;
  550. background-image: url('img/fancybox-y.png');
  551. }
  552. #fancybox-bg-nw {
  553. top: -20px;
  554. left: -20px;
  555. background-image: url('img/fancybox.png');
  556. background-position: -40px -122px;
  557. }
  558. #fancybox-title {
  559. font-family: Helvetica;
  560. font-size: 12px;
  561. z-index: 1102;
  562. }
  563. .fancybox-title-inside {
  564. padding-bottom: 10px;
  565. text-align: center;
  566. color: #333;
  567. background: #fff;
  568. position: relative;
  569. }
  570. .fancybox-title-outside {
  571. padding-top: 10px;
  572. color: #fff;
  573. }
  574. .fancybox-title-over {
  575. position: absolute;
  576. bottom: 0;
  577. left: 0;
  578. color: #FFF;
  579. text-align: left;
  580. }
  581. #fancybox-title-over {
  582. padding: 10px;
  583. background-image: url('img/fancy_title_over.png');
  584. display: block;
  585. }
  586. .fancybox-title-float {
  587. position: absolute;
  588. left: 0;
  589. bottom: -20px;
  590. height: 32px;
  591. }
  592. #fancybox-title-float-wrap {
  593. border: none;
  594. border-collapse: collapse;
  595. width: auto;
  596. }
  597. #fancybox-title-float-wrap td {
  598. border: none;
  599. white-space: nowrap;
  600. }
  601. #fancybox-title-float-left {
  602. padding: 0 0 0 15px;
  603. background: url('img/fancybox.png') -40px -90px no-repeat;
  604. }
  605. #fancybox-title-float-main {
  606. color: #FFF;
  607. line-height: 29px;
  608. font-weight: bold;
  609. padding: 0 0 3px 0;
  610. background: url('img/fancybox-x.png') 0px -40px;
  611. }
  612. #fancybox-title-float-right {
  613. padding: 0 0 0 15px;
  614. background: url('img/fancybox.png') -55px -90px no-repeat;
  615. }
  616. /* IE6 */
  617. .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_close.png', sizingMethod='scale'); }
  618. .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_nav_left.png', sizingMethod='scale'); }
  619. .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_nav_right.png', sizingMethod='scale'); }
  620. .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
  621. .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_title_left.png', sizingMethod='scale'); }
  622. .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_title_main.png', sizingMethod='scale'); }
  623. .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_title_right.png', sizingMethod='scale'); }
  624. .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
  625. height: expression(this.parentNode.clientHeight + "px");
  626. }
  627. #fancybox-loading.fancybox-ie6 {
  628. position: absolute; margin-top: 0;
  629. top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
  630. }
  631. #fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_loading.png', sizingMethod='scale'); }
  632. /* IE6, IE7, IE8 */
  633. .fancybox-ie .fancybox-bg { background: transparent !important; }
  634. .fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_shadow_n.png', sizingMethod='scale'); }
  635. .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_shadow_ne.png', sizingMethod='scale'); }
  636. .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_shadow_e.png', sizingMethod='scale'); }
  637. .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_shadow_se.png', sizingMethod='scale'); }
  638. .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_shadow_s.png', sizingMethod='scale'); }
  639. .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_shadow_sw.png', sizingMethod='scale'); }
  640. .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_shadow_w.png', sizingMethod='scale'); }
  641. .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_shadow_nw.png', sizingMethod='scale'); }
  642. /*
  643. * Skeleton V1.2
  644. * Copyright 2011, Dave Gamache
  645. * www.getskeleton.com
  646. * Free to use under the MIT license.
  647. * http://www.opensource.org/licenses/mit-license.php
  648. * 6/20/2012
  649. */
  650. /* Table of Contents
  651. ==================================================
  652. #Base 960 Grid
  653. #Tablet (Portrait)
  654. #Mobile (Portrait)
  655. #Mobile (Landscape)
  656. #Clearing */
  657. /* #Base 960 Grid
  658. ================================================== */
  659. .container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
  660. .container .column,
  661. .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
  662. .row { margin-bottom: 20px; }
  663. /* Nested Column Classes */
  664. .column.alpha, .columns.alpha { margin-left: 0; }
  665. .column.omega, .columns.omega { margin-right: 0; }
  666. /* Base Grid */
  667. .container .one.column,
  668. .container .one.columns { width: 40px; }
  669. .container .two.columns { width: 100px; }
  670. .container .three.columns { width: 160px; }
  671. .container .four.columns { width: 220px; }
  672. .container .five.columns { width: 280px; }
  673. .container .six.columns { width: 340px; }
  674. .container .seven.columns { width: 400px; }
  675. .container .eight.columns { width: 460px; }
  676. .container .nine.columns { width: 520px; }
  677. .container .ten.columns { width: 580px; }
  678. .container .eleven.columns { width: 640px; }
  679. .container .twelve.columns { width: 700px; }
  680. .container .thirteen.columns { width: 760px; }
  681. .container .fourteen.columns { width: 820px; }
  682. .container .fifteen.columns { width: 880px; }
  683. .container .sixteen.columns { width: 940px; }
  684. .container .one-third.column { width: 300px; }
  685. .container .two-thirds.column { width: 620px; }
  686. /* Offsets */
  687. .container .offset-by-one { padding-left: 60px; }
  688. .container .offset-by-two { padding-left: 120px; }
  689. .container .offset-by-three { padding-left: 180px; }
  690. .container .offset-by-four { padding-left: 240px; }
  691. .container .offset-by-five { padding-left: 300px; }
  692. .container .offset-by-six { padding-left: 360px; }
  693. .container .offset-by-seven { padding-left: 420px; }
  694. .container .offset-by-eight { padding-left: 480px; }
  695. .container .offset-by-nine { padding-left: 540px; }
  696. .container .offset-by-ten { padding-left: 600px; }
  697. .container .offset-by-eleven { padding-left: 660px; }
  698. .container .offset-by-twelve { padding-left: 720px; }
  699. .container .offset-by-thirteen { padding-left: 780px; }
  700. .container .offset-by-fourteen { padding-left: 840px; }
  701. .container .offset-by-fifteen { padding-left: 900px; }
  702. /* #Tablet (Portrait)
  703. ================================================== */
  704. /* Note: Design for a width of 768px */
  705. @media only screen and (min-width: 768px) and (max-width: 959px) {
  706. .container { width: 768px; }
  707. .container .column,
  708. .container .columns { margin-left: 10px; margin-right: 10px; }
  709. .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
  710. .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
  711. .alpha.omega { margin-left: 0; margin-right: 0; }
  712. .container .one.column,
  713. .container .one.columns { width: 28px; }
  714. .container .two.columns { width: 76px; }
  715. .container .three.columns { width: 124px; }
  716. .container .four.columns { width: 172px; }
  717. .container .five.columns { width: 220px; }
  718. .container .six.columns { width: 268px; }
  719. .container .seven.columns { width: 316px; }
  720. .container .eight.columns { width: 364px; }
  721. .container .nine.columns { width: 412px; }
  722. .container .ten.columns { width: 460px; }
  723. .container .eleven.columns { width: 508px; }
  724. .container .twelve.columns { width: 556px; }
  725. .container .thirteen.columns { width: 604px; }
  726. .container .fourteen.columns { width: 652px; }
  727. .container .fifteen.columns { width: 700px; }
  728. .container .sixteen.columns { width: 748px; }
  729. .container .one-third.column { width: 236px; }
  730. .container .two-thirds.column { width: 492px; }
  731. /* Offsets */
  732. .container .offset-by-one { padding-left: 48px; }
  733. .container .offset-by-two { padding-left: 96px; }
  734. .container .offset-by-three { padding-left: 144px; }
  735. .container .offset-by-four { padding-left: 192px; }
  736. .container .offset-by-five { padding-left: 240px; }
  737. .container .offset-by-six { padding-left: 288px; }
  738. .container .offset-by-seven { padding-left: 336px; }
  739. .container .offset-by-eight { padding-left: 384px; }
  740. .container .offset-by-nine { padding-left: 432px; }
  741. .container .offset-by-ten { padding-left: 480px; }
  742. .container .offset-by-eleven { padding-left: 528px; }
  743. .container .offset-by-twelve { padding-left: 576px; }
  744. .container .offset-by-thirteen { padding-left: 624px; }
  745. .container .offset-by-fourteen { padding-left: 672px; }
  746. .container .offset-by-fifteen { padding-left: 720px; }
  747. }
  748. /* #Mobile (Portrait)
  749. ================================================== */
  750. /* Note: Design for a width of 320px */
  751. @media only screen and (max-width: 767px) {
  752. .container { width: 300px; }
  753. .container .columns,
  754. .container .column { margin: 0; }
  755. .container .one.column,
  756. .container .one.columns,
  757. .container .two.columns,
  758. .container .three.columns,
  759. .container .four.columns,
  760. .container .five.columns,
  761. .container .six.columns,
  762. .container .seven.columns,
  763. .container .eight.columns,
  764. .container .nine.columns,
  765. .container .ten.columns,
  766. .container .eleven.columns,
  767. .container .twelve.columns,
  768. .container .thirteen.columns,
  769. .container .fourteen.columns,
  770. .container .fifteen.columns,
  771. .container .sixteen.columns,
  772. .container .one-third.column,
  773. .container .two-thirds.column { width: 300px; }
  774. /* Offsets */
  775. .container .offset-by-one,
  776. .container .offset-by-two,
  777. .container .offset-by-three,
  778. .container .offset-by-four,
  779. .container .offset-by-five,
  780. .container .offset-by-six,
  781. .container .offset-by-seven,
  782. .container .offset-by-eight,
  783. .container .offset-by-nine,
  784. .container .offset-by-ten,
  785. .container .offset-by-eleven,
  786. .container .offset-by-twelve,
  787. .container .offset-by-thirteen,
  788. .container .offset-by-fourteen,
  789. .container .offset-by-fifteen { padding-left: 0; }
  790. }
  791. /* #Mobile (Landscape)
  792. ================================================== */
  793. /* Note: Design for a width of 480px */
  794. @media only screen and (min-width: 480px) and (max-width: 767px) {
  795. .container { width: 420px; }
  796. .container .columns,
  797. .container .column { margin: 0; }
  798. .container .one.column,
  799. .container .one.columns,
  800. .container .two.columns,
  801. .container .three.columns,
  802. .container .four.columns,
  803. .container .five.columns,
  804. .container .six.columns,
  805. .container .seven.columns,
  806. .container .eight.columns,
  807. .container .nine.columns,
  808. .container .ten.columns,
  809. .container .eleven.columns,
  810. .container .twelve.columns,
  811. .container .thirteen.columns,
  812. .container .fourteen.columns,
  813. .container .fifteen.columns,
  814. .container .sixteen.columns,
  815. .container .one-third.column,
  816. .container .two-thirds.column { width: 420px; }
  817. }
  818. /* #Clearing
  819. ================================================== */
  820. /* Self Clearing Goodness */
  821. .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
  822. /* Use clearfix class on parent to clear nested columns,
  823. or wrap each row of columns in a <div class="row"> */
  824. .clearfix:before,
  825. .clearfix:after,
  826. .row:before,
  827. .row:after {
  828. content: '\0020';
  829. display: block;
  830. overflow: hidden;
  831. visibility: hidden;
  832. width: 0;
  833. height: 0; }
  834. .row:after,
  835. .clearfix:after {
  836. clear: both; }
  837. .row,
  838. .clearfix {
  839. zoom: 1; }
  840. /* You can also use a <br class="clear" /> to clear columns */
  841. .clear {
  842. clear: both;
  843. display: block;
  844. overflow: hidden;
  845. visibility: hidden;
  846. width: 0;
  847. height: 0;
  848. }
  849. nav {
  850. background-color: rgba(255, 255, 255, 0.9);
  851. border: 1px solid red;
  852. height: 55px;
  853. top: 0;
  854. position: absolute;
  855. /* hold tight... */
  856. visibility: none;
  857. /* we'll override these shortly */
  858. z-index: 1000;
  859. width: 100%;
  860. }
  861. nav ul {
  862. list-style: none;
  863. }
  864. nav li {
  865. float: left;
  866. border-right: 1px solid red;
  867. padding: 0 10px;
  868. }
  869. nav li:last-child {
  870. border: 0;
  871. }
  872. .main-navigation {
  873. clear: both;
  874. display: block;
  875. float: left;
  876. width: 100%;
  877. }
  878. .main-navigation ul {
  879. list-style: none;
  880. margin: 0;
  881. padding-left: 0;
  882. }
  883. .main-navigation li {
  884. float: left;
  885. position: relative;
  886. }
  887. .main-navigation a {
  888. display: block;
  889. text-decoration: none;
  890. }
  891. .main-navigation ul ul {
  892. box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  893. display: none;
  894. float: left;
  895. left: 0;
  896. position: absolute;
  897. top: 1.5em;
  898. z-index: 99999;
  899. }
  900. .main-navigation ul ul ul {
  901. left: 100%;
  902. top: 0;
  903. }
  904. .main-navigation ul ul a {
  905. width: 200px;
  906. }
  907. .main-navigation ul ul li {
  908. }
  909. .main-navigation li:hover > a {
  910. }
  911. .main-navigation ul ul :hover > a {
  912. }
  913. .main-navigation ul ul a:hover {
  914. }
  915. .main-navigation ul li:hover > ul {
  916. display: block;
  917. }
  918. .main-navigation li.current_page_item a,
  919. .main-navigation li.current-menu-item a {
  920. }
  921. .menu-toggle {
  922. cursor: pointer;
  923. display: none;
  924. }
  925. /* Smaller than standard 960 (devices and browsers) */
  926. @media only screen and (max-width: 959px) {}
  927. /* Tablet Portrait size to standard 960 (devices and browsers) */
  928. @media only screen and (min-width: 768px) and (max-width: 959px) {}
  929. /* All Mobile Sizes (devices and browser) */
  930. @media only screen and (max-width: 767px) {}
  931. /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  932. @media only screen and (min-width: 480px) and (max-width: 767px) {}
  933. /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  934. @media only screen and (max-width: 479px) {}
  935. @media screen and (max-width: 600px) {
  936. .menu-toggle,
  937. .main-navigation.toggled .nav-menu {
  938. display: block;
  939. }
  940. .main-navigation ul {
  941. display: none;
  942. }
  943. }