Advertisement
Guest User

Untitled

a guest
Feb 6th, 2016
52
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.17 KB | None | 0 0
  1. /**********************************************
  2. * Ink v1.0.5 - Copyright 2013 ZURB Inc *
  3. **********************************************/
  4.  
  5. /* Client-specific Styles & Reset */
  6.  
  7. #outlook a {
  8. padding: 0;
  9. }
  10.  
  11. body {
  12. width: 100% !important;
  13. min-width: 100%;
  14. -webkit-text-size-adjust: 100%;
  15. -ms-text-size-adjust: 100%;
  16. margin: 0;
  17. padding: 0;
  18. }
  19.  
  20. .ExternalClass {
  21. width: 100%;
  22. }
  23.  
  24. .ExternalClass,
  25. .ExternalClass p,
  26. .ExternalClass span,
  27. .ExternalClass font,
  28. .ExternalClass td,
  29. .ExternalClass div {
  30. line-height: 100%;
  31. }
  32.  
  33. #backgroundTable {
  34. margin: 0;
  35. padding: 0;
  36. width: 100% !important;
  37. line-height: 100% !important;
  38. }
  39.  
  40. img {
  41. outline: none;
  42. text-decoration: none;
  43. -ms-interpolation-mode: bicubic;
  44. width: auto;
  45. max-width: 100%;
  46. float: left;
  47. clear: both;
  48. display: block;
  49. }
  50.  
  51. center {
  52. width: 100%;
  53. min-width: 650px;
  54. }
  55.  
  56. a img {
  57. border: none;
  58. }
  59.  
  60. p {
  61. margin: 0 0 0 10px;
  62. }
  63.  
  64. table {
  65. border-spacing: 0;
  66. border-collapse: collapse;
  67. }
  68.  
  69. td {
  70. /*noinspection CssInvalidElement*/
  71. word-break: break-word;
  72. -webkit-hyphens: auto;
  73. -moz-hyphens: auto;
  74. hyphens: auto;
  75. border-collapse: collapse !important;
  76. }
  77.  
  78. table, tr, td {
  79. padding: 0;
  80. vertical-align: top;
  81. text-align: left;
  82. }
  83.  
  84. hr {
  85. color: #d9d9d9;
  86. background-color: #d9d9d9;
  87. height: 1px;
  88. border: none;
  89. }
  90.  
  91. /* Responsive Grid */
  92.  
  93. table.body {
  94. height: 100%;
  95. width: 100%;
  96. }
  97.  
  98. table.container {
  99. width: 650px;
  100. margin: 0 auto;
  101. text-align: inherit;
  102. }
  103.  
  104. table.row {
  105. padding: 0px;
  106. width: 100%;
  107. position: relative;
  108. }
  109.  
  110. table.container table.row {
  111. display: block;
  112. }
  113.  
  114. td.wrapper {
  115. padding: 10px 20px 0px 0px;
  116. position: relative;
  117. }
  118.  
  119. table.columns,
  120. table.column {
  121. margin: 0 auto;
  122. }
  123.  
  124. table.columns td,
  125. table.column td {
  126. padding: 0px 0px 10px;
  127. }
  128.  
  129. table.columns td.sub-columns,
  130. table.column td.sub-columns,
  131. table.columns td.sub-column,
  132. table.column td.sub-column {
  133. padding-right: 10px;
  134. }
  135.  
  136. td.sub-column, td.sub-columns {
  137. min-width: 0px;
  138. }
  139.  
  140. table.row td.last,
  141. table.container td.last {
  142. padding-right: 0px;
  143. }
  144.  
  145. table.one {
  146. width: 45px;
  147. }
  148.  
  149. table.two {
  150. width: 100px;
  151. }
  152.  
  153. table.three {
  154. width: 155px;
  155. }
  156.  
  157. table.four {
  158. width: 210px;
  159. }
  160.  
  161. table.five {
  162. width: 265px;
  163. }
  164.  
  165. table.six {
  166. width: 320px;
  167. }
  168.  
  169. table.seven {
  170. width: 375px;
  171. }
  172.  
  173. table.eight {
  174. width: 430px;
  175. }
  176.  
  177. table.nine {
  178. width: 485px;
  179. }
  180.  
  181. table.ten {
  182. width: 540px;
  183. }
  184.  
  185. table.eleven {
  186. width: 595px;
  187. }
  188.  
  189. table.twelve {
  190. width: 650px;
  191. }
  192.  
  193. table.one center {
  194. min-width: 45px;
  195. }
  196.  
  197. table.two center {
  198. min-width: 100px;
  199. }
  200.  
  201. table.three center {
  202. min-width: 155px;
  203. }
  204.  
  205. table.four center {
  206. min-width: 210px;
  207. }
  208.  
  209. table.five center {
  210. min-width: 265px;
  211. }
  212.  
  213. table.six center {
  214. min-width: 320px;
  215. }
  216.  
  217. table.seven center {
  218. min-width: 375px;
  219. }
  220.  
  221. table.eight center {
  222. min-width: 430px;
  223. }
  224.  
  225. table.nine center {
  226. min-width: 485px;
  227. }
  228.  
  229. table.ten center {
  230. min-width: 540px;
  231. }
  232.  
  233. table.eleven center {
  234. min-width: 595px;
  235. }
  236.  
  237. table.twelve center {
  238. min-width: 650px;
  239. }
  240.  
  241. table.one .panel center {
  242. min-width: 25px;
  243. }
  244.  
  245. table.two .panel center {
  246. min-width: 80px;
  247. }
  248.  
  249. table.three .panel center {
  250. min-width: 135px;
  251. }
  252.  
  253. table.four .panel center {
  254. min-width: 190px;
  255. }
  256.  
  257. table.five .panel center {
  258. min-width: 245px;
  259. }
  260.  
  261. table.six .panel center {
  262. min-width: 300px;
  263. }
  264.  
  265. table.seven .panel center {
  266. min-width: 355px;
  267. }
  268.  
  269. table.eight .panel center {
  270. min-width: 410px;
  271. }
  272.  
  273. table.nine .panel center {
  274. min-width: 465px;
  275. }
  276.  
  277. table.ten .panel center {
  278. min-width: 520px;
  279. }
  280.  
  281. table.eleven .panel center {
  282. min-width: 575px;
  283. }
  284.  
  285. table.twelve .panel center {
  286. min-width: 630px;
  287. }
  288.  
  289. .body .columns td.one,
  290. .body .column td.one {
  291. width: 8.333333%;
  292. }
  293.  
  294. .body .columns td.two,
  295. .body .column td.two {
  296. width: 16.666666%;
  297. }
  298.  
  299. .body .columns td.three,
  300. .body .column td.three {
  301. width: 25%;
  302. }
  303.  
  304. .body .columns td.four,
  305. .body .column td.four {
  306. width: 33.333333%;
  307. }
  308.  
  309. .body .columns td.five,
  310. .body .column td.five {
  311. width: 41.666666%;
  312. }
  313.  
  314. .body .columns td.six,
  315. .body .column td.six {
  316. width: 50%;
  317. }
  318.  
  319. .body .columns td.seven,
  320. .body .column td.seven {
  321. width: 58.333333%;
  322. }
  323.  
  324. .body .columns td.eight,
  325. .body .column td.eight {
  326. width: 66.666666%;
  327. }
  328.  
  329. .body .columns td.nine,
  330. .body .column td.nine {
  331. width: 75%;
  332. }
  333.  
  334. .body .columns td.ten,
  335. .body .column td.ten {
  336. width: 83.333333%;
  337. }
  338.  
  339. .body .columns td.eleven,
  340. .body .column td.eleven {
  341. width: 91.666666%;
  342. }
  343.  
  344. .body .columns td.twelve,
  345. .body .column td.twelve {
  346. width: 100%;
  347. }
  348.  
  349. td.offset-by-one {
  350. padding-left: 65px;
  351. }
  352.  
  353. td.offset-by-two {
  354. padding-left: 120px;
  355. }
  356.  
  357. td.offset-by-three {
  358. padding-left: 175px;
  359. }
  360.  
  361. td.offset-by-four {
  362. padding-left: 230px;
  363. }
  364.  
  365. td.offset-by-five {
  366. padding-left: 285px;
  367. }
  368.  
  369. td.offset-by-six {
  370. padding-left: 340px;
  371. }
  372.  
  373. td.offset-by-seven {
  374. padding-left: 395px;
  375. }
  376.  
  377. td.offset-by-eight {
  378. padding-left: 450px;
  379. }
  380.  
  381. td.offset-by-nine {
  382. padding-left: 505px;
  383. }
  384.  
  385. td.offset-by-ten {
  386. padding-left: 560px;
  387. }
  388.  
  389. td.offset-by-eleven {
  390. padding-left: 615px;
  391. }
  392.  
  393. td.expander {
  394. visibility: hidden;
  395. width: 0px;
  396. padding: 0 !important;
  397. }
  398.  
  399. table.columns .text-pad,
  400. table.column .text-pad {
  401. padding-left: 10px;
  402. padding-right: 10px;
  403. }
  404.  
  405. table.columns .left-text-pad,
  406. table.columns .text-pad-left,
  407. table.column .left-text-pad,
  408. table.column .text-pad-left {
  409. padding-left: 10px;
  410. }
  411.  
  412. table.columns .right-text-pad,
  413. table.columns .text-pad-right,
  414. table.column .right-text-pad,
  415. table.column .text-pad-right {
  416. padding-right: 10px;
  417. }
  418.  
  419. /* Block Grid */
  420.  
  421. .block-grid {
  422. width: 100%;
  423. max-width: 650px;
  424. }
  425.  
  426. .block-grid td {
  427. display: inline-block;
  428. padding: 10px;
  429. }
  430.  
  431. .two-up td {
  432. width: 305px;
  433. }
  434.  
  435. .three-up td {
  436. width: 196px;
  437. }
  438.  
  439. .four-up td {
  440. width: 142px;
  441. }
  442.  
  443. .five-up td {
  444. width: 110px;
  445. }
  446.  
  447. .six-up td {
  448. width: 88px;
  449. }
  450.  
  451. .seven-up td {
  452. width: 72px;
  453. }
  454.  
  455. .eight-up td {
  456. width: 61px;
  457. }
  458.  
  459. /* Alignment & Visibility Classes */
  460.  
  461. table.center, td.center {
  462. text-align: center;
  463. }
  464.  
  465. h1.center,
  466. h2.center,
  467. h3.center,
  468. h4.center,
  469. h5.center,
  470. h6.center {
  471. text-align: center;
  472. }
  473.  
  474. span.center {
  475. display: block;
  476. width: 100%;
  477. text-align: center;
  478. }
  479.  
  480. img.center {
  481. margin: 0 auto;
  482. float: none;
  483. }
  484.  
  485. img.right {
  486. float: right;
  487. }
  488.  
  489. .show-for-small,
  490. .hide-for-desktop {
  491. display: none;
  492. }
  493.  
  494. /* Typography */
  495.  
  496. body, table.body, h1, h2, h3, h4, h5, h6, p, td {
  497. color: #222222;
  498. font-family: "Helvetica", "Arial", sans-serif;
  499. font-weight: normal;
  500. padding: 0;
  501. margin: 0;
  502. text-align: left;
  503. line-height: 1.3;
  504. }
  505.  
  506. h1, h2, h3, h4, h5, h6 {
  507. word-break: normal;
  508. }
  509.  
  510. h1 {
  511. font-size: 40px;
  512. }
  513.  
  514. h2 {
  515. font-size: 36px;
  516. }
  517.  
  518. h3 {
  519. font-size: 32px;
  520. }
  521.  
  522. h4 {
  523. font-size: 28px;
  524. }
  525.  
  526. h5 {
  527. font-size: 24px;
  528. }
  529.  
  530. h6 {
  531. font-size: 20px;
  532. }
  533.  
  534. body, table.body, p, td {
  535. font-size: 14px;
  536. line-height: 19px;
  537. }
  538.  
  539. p.lead, p.lede, p.leed {
  540. font-size: 18px;
  541. line-height: 21px;
  542. }
  543.  
  544. p {
  545. margin-bottom: 10px;
  546. }
  547.  
  548. small {
  549. font-size: 10px;
  550. }
  551.  
  552. a {
  553. color: #a7cb40;
  554. text-decoration: none;
  555. }
  556.  
  557. a:hover {
  558. color: #8aaa2e !important;
  559. }
  560.  
  561. a:active {
  562. color: #8aaa2e !important;
  563. }
  564.  
  565. a:visited {
  566. color: #8aaa2e !important;
  567. }
  568.  
  569. h1 a,
  570. h2 a,
  571. h3 a,
  572. h4 a,
  573. h5 a,
  574. h6 a {
  575. color: #a7cb40;
  576. }
  577.  
  578. h1 a:active,
  579. h2 a:active,
  580. h3 a:active,
  581. h4 a:active,
  582. h5 a:active,
  583. h6 a:active {
  584. color: #8aaa2e !important;
  585. }
  586.  
  587. h1 a:visited,
  588. h2 a:visited,
  589. h3 a:visited,
  590. h4 a:visited,
  591. h5 a:visited,
  592. h6 a:visited {
  593. color: #8aaa2e !important;
  594. }
  595.  
  596. /* Panels */
  597.  
  598. .panel {
  599. background: #f2f2f2;
  600. border: 1px solid #d9d9d9;
  601. padding: 10px !important;
  602. }
  603.  
  604. .sub-grid table {
  605. width: 100%;
  606. }
  607.  
  608. .sub-grid td.sub-columns {
  609. padding-bottom: 0;
  610. }
  611.  
  612. /* Buttons */
  613.  
  614. table.button,
  615. table.tiny-button,
  616. table.small-button,
  617. table.medium-button,
  618. table.large-button {
  619. width: 100%;
  620. overflow: hidden;
  621. }
  622.  
  623. table.button td,
  624. table.tiny-button td,
  625. table.small-button td,
  626. table.medium-button td,
  627. table.large-button td {
  628. display: block;
  629. width: auto !important;
  630. text-align: center;
  631. background: white;
  632. border: 2px solid #a7cb40;
  633. color: black;
  634. padding: 8px 0;
  635. }
  636.  
  637. table.tiny-button td {
  638. padding: 5px 0 4px;
  639. }
  640.  
  641. table.small-button td {
  642. padding: 8px 0 7px;
  643. }
  644.  
  645. table.medium-button td {
  646. padding: 12px 0 10px;
  647. }
  648.  
  649. table.large-button td {
  650. padding: 21px 0 18px;
  651. }
  652.  
  653. table.button td a,
  654. table.tiny-button td a,
  655. table.small-button td a,
  656. table.medium-button td a,
  657. table.large-button td a {
  658. font-weight: normal;
  659. text-decoration: none;
  660. font-family: Helvetica, Arial, sans-serif;
  661. color: black;
  662. font-size: 16px;
  663. }
  664.  
  665. table.tiny-button td a {
  666. font-size: 12px;
  667. font-weight: normal;
  668. }
  669.  
  670. table.small-button td a {
  671. font-size: 16px;
  672. }
  673.  
  674. table.medium-button td a {
  675. font-size: 20px;
  676. }
  677.  
  678. table.large-button td a {
  679. font-size: 24px;
  680. }
  681.  
  682. table.button:hover td,
  683. table.button:visited td,
  684. table.button:active td {
  685. background: #3d3d3d !important;
  686. }
  687.  
  688. table.button:hover td a,
  689. table.button:visited td a,
  690. table.button:active td a {
  691. color: #3d3d3d !important;
  692. }
  693.  
  694. table.button:hover td,
  695. table.tiny-button:hover td,
  696. table.small-button:hover td,
  697. table.medium-button:hover td,
  698. table.large-button:hover td {
  699. background: #3d3d3d !important;
  700. }
  701.  
  702. table.button:hover td a,
  703. table.button:active td a,
  704. table.button td a:visited,
  705. table.tiny-button:hover td a,
  706. table.tiny-button:active td a,
  707. table.tiny-button td a:visited,
  708. table.small-button:hover td a,
  709. table.small-button:active td a,
  710. table.small-button td a:visited,
  711. table.medium-button:hover td a,
  712. table.medium-button:active td a,
  713. table.medium-button td a:visited,
  714. table.large-button:hover td a,
  715. table.large-button:active td a,
  716. table.large-button td a:visited {
  717. color: black !important;
  718. }
  719.  
  720. table.secondary td {
  721. background: #e9e9e9;
  722. border-color: #d0d0d0;
  723. color: #555;
  724. }
  725.  
  726. table.secondary td a {
  727. color: #555;
  728. }
  729.  
  730. table.secondary:hover td {
  731. background: #d0d0d0 !important;
  732. color: #555;
  733. }
  734.  
  735. table.secondary:hover td a,
  736. table.secondary td a:visited,
  737. table.secondary:active td a {
  738. color: #555 !important;
  739. }
  740.  
  741. table.success td {
  742. background: #5da423;
  743. border-color: #457a1a;
  744. }
  745.  
  746. table.success:hover td {
  747. background: #457a1a !important;
  748. }
  749.  
  750. table.alert td {
  751. background: #c60f13;
  752. border-color: #970b0e;
  753. }
  754.  
  755. table.alert:hover td {
  756. background: #970b0e !important;
  757. }
  758.  
  759. table.radius td {
  760. -webkit-border-radius: 3px;
  761. -moz-border-radius: 3px;
  762. border-radius: 3px;
  763. }
  764.  
  765. table.round td {
  766. -webkit-border-radius: 500px;
  767. -moz-border-radius: 500px;
  768. border-radius: 500px;
  769. }
  770.  
  771. /* Outlook First */
  772.  
  773. body.outlook p {
  774. display: inline !important;
  775. }
  776.  
  777. /* Media Queries */
  778.  
  779. @media only screen and (max-width: 600px) {
  780.  
  781. table[class="body"] img {
  782. width: auto !important;
  783. height: auto !important;
  784. }
  785.  
  786. table[class="body"] center {
  787. min-width: 0 !important;
  788. }
  789.  
  790. table[class="body"] .container {
  791. width: 95% !important;
  792. }
  793.  
  794. table[class="body"] .row {
  795. width: 100% !important;
  796. display: block !important;
  797. }
  798.  
  799. table[class="body"] .wrapper {
  800. display: block !important;
  801. padding-right: 0 !important;
  802. }
  803.  
  804. table[class="body"] .columns,
  805. table[class="body"] .column {
  806. table-layout: fixed !important;
  807. float: none !important;
  808. width: 100% !important;
  809. padding-right: 0px !important;
  810. padding-left: 0px !important;
  811. display: block !important;
  812. }
  813.  
  814. table[class="body"] .wrapper.first .columns,
  815. table[class="body"] .wrapper.first .column {
  816. display: table !important;
  817. }
  818.  
  819. table[class="body"] table.columns td,
  820. table[class="body"] table.column td {
  821. width: 100% !important;
  822. }
  823.  
  824. table[class="body"] .columns td.one,
  825. table[class="body"] .column td.one {
  826. width: 8.333333% !important;
  827. }
  828.  
  829. table[class="body"] .columns td.two,
  830. table[class="body"] .column td.two {
  831. width: 16.666666% !important;
  832. }
  833.  
  834. table[class="body"] .columns td.three,
  835. table[class="body"] .column td.three {
  836. width: 25% !important;
  837. }
  838.  
  839. table[class="body"] .columns td.four,
  840. table[class="body"] .column td.four {
  841. width: 33.333333% !important;
  842. }
  843.  
  844. table[class="body"] .columns td.five,
  845. table[class="body"] .column td.five {
  846. width: 41.666666% !important;
  847. }
  848.  
  849. table[class="body"] .columns td.six,
  850. table[class="body"] .column td.six {
  851. width: 50% !important;
  852. }
  853.  
  854. table[class="body"] .columns td.seven,
  855. table[class="body"] .column td.seven {
  856. width: 58.333333% !important;
  857. }
  858.  
  859. table[class="body"] .columns td.eight,
  860. table[class="body"] .column td.eight {
  861. width: 66.666666% !important;
  862. }
  863.  
  864. table[class="body"] .columns td.nine,
  865. table[class="body"] .column td.nine {
  866. width: 75% !important;
  867. }
  868.  
  869. table[class="body"] .columns td.ten,
  870. table[class="body"] .column td.ten {
  871. width: 83.333333% !important;
  872. }
  873.  
  874. table[class="body"] .columns td.eleven,
  875. table[class="body"] .column td.eleven {
  876. width: 91.666666% !important;
  877. }
  878.  
  879. table[class="body"] .columns td.twelve,
  880. table[class="body"] .column td.twelve {
  881. width: 100% !important;
  882. }
  883.  
  884. table[class="body"] td.offset-by-one,
  885. table[class="body"] td.offset-by-two,
  886. table[class="body"] td.offset-by-three,
  887. table[class="body"] td.offset-by-four,
  888. table[class="body"] td.offset-by-five,
  889. table[class="body"] td.offset-by-six,
  890. table[class="body"] td.offset-by-seven,
  891. table[class="body"] td.offset-by-eight,
  892. table[class="body"] td.offset-by-nine,
  893. table[class="body"] td.offset-by-ten,
  894. table[class="body"] td.offset-by-eleven {
  895. padding-left: 0 !important;
  896. }
  897.  
  898. table[class="body"] table.columns td.expander {
  899. width: 1px !important;
  900. }
  901.  
  902. table[class="body"] .right-text-pad,
  903. table[class="body"] .text-pad-right {
  904. padding-left: 10px !important;
  905. }
  906.  
  907. table[class="body"] .left-text-pad,
  908. table[class="body"] .text-pad-left {
  909. padding-right: 10px !important;
  910. }
  911.  
  912. table[class="body"] .hide-for-small,
  913. table[class="body"] .show-for-desktop {
  914. display: none !important;
  915. }
  916.  
  917. table[class="body"] .show-for-small,
  918. table[class="body"] .hide-for-desktop {
  919. display: inherit !important;
  920. }
  921. }
  922.  
  923. table.facebook td {
  924. background: #3b5998;
  925. border-color: #2d4473;
  926. }
  927.  
  928. table.facebook:hover td {
  929. background: #2d4473 !important;
  930. }
  931.  
  932. table.twitter td {
  933. background: #00acee;
  934. border-color: #0087bb;
  935. }
  936.  
  937. table.twitter:hover td {
  938. background: #0087bb !important;
  939. }
  940.  
  941. table.google-plus td {
  942. background-color: #DB4A39;
  943. border-color: #CC0000;
  944. }
  945.  
  946. table.google-plus:hover td {
  947. background: #CC0000 !important;
  948. }
  949.  
  950. .template-label {
  951. color: #ffffff;
  952. font-weight: bold;
  953. font-size: 11px;
  954. }
  955.  
  956. .callout .panel {
  957. background: #ECF8FF;
  958. border-color: #b9e5ff;
  959. }
  960.  
  961. .header {
  962. background: #FFFFFF;
  963. }
  964.  
  965. .footer .wrapper {
  966. background: #ebebeb;
  967. }
  968.  
  969. .footer h5 {
  970. padding-bottom: 10px;
  971. }
  972.  
  973. table.columns .text-pad {
  974. padding-left: 10px;
  975. padding-right: 10px;
  976. }
  977.  
  978. table.columns .left-text-pad {
  979. padding-left: 10px;
  980. }
  981.  
  982. table.columns .right-text-pad {
  983. padding-right: 10px;
  984. }
  985.  
  986. @media only screen and (max-width: 600px) {
  987.  
  988. table[class="body"] .right-text-pad {
  989. padding-left: 10px !important;
  990. }
  991.  
  992. table[class="body"] .left-text-pad {
  993. padding-right: 10px !important;
  994. }
  995. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement