styles.css 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. /* -------------------------------------
  2. GLOBAL
  3. A very basic CSS reset
  4. ------------------------------------- */
  5. * {
  6. margin: 0;
  7. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  8. box-sizing: border-box;
  9. font-size: 14px;
  10. }
  11. img {
  12. max-width: 100%;
  13. }
  14. body {
  15. -webkit-font-smoothing: antialiased;
  16. -webkit-text-size-adjust: none;
  17. width: 100% !important;
  18. height: 100%;
  19. line-height: 1.6em;
  20. /* 1.6em * 14px = 22.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
  21. /*line-height: 22px;*/
  22. }
  23. /* Let's make sure all tables have defaults */
  24. table td {
  25. vertical-align: top;
  26. }
  27. /* -------------------------------------
  28. BODY & CONTAINER
  29. ------------------------------------- */
  30. body {
  31. background-color: #f6f6f6;
  32. }
  33. .body-wrap {
  34. background-color: #f6f6f6;
  35. width: 100%;
  36. }
  37. .container {
  38. display: block !important;
  39. max-width: 600px !important;
  40. margin: 0 auto !important;
  41. /* makes it centered */
  42. clear: both !important;
  43. }
  44. .content {
  45. max-width: 600px;
  46. margin: 0 auto;
  47. display: block;
  48. padding: 20px;
  49. }
  50. /* -------------------------------------
  51. HEADER, FOOTER, MAIN
  52. ------------------------------------- */
  53. .main {
  54. background-color: #fff;
  55. border: 1px solid #DBE0E4;
  56. border-radius: 3px;
  57. }
  58. .content-wrap {
  59. padding: 20px;
  60. }
  61. .content-block {
  62. padding: 0 0 20px;
  63. }
  64. .header {
  65. width: 100%;
  66. margin-bottom: 20px;
  67. }
  68. .footer {
  69. width: 100%;
  70. clear: both;
  71. color: #7F8FA4;
  72. padding: 20px;
  73. }
  74. .footer p, .footer a, .footer td {
  75. color: #999;
  76. font-size: 12px;
  77. }
  78. /* -------------------------------------
  79. TYPOGRAPHY
  80. ------------------------------------- */
  81. h1, h2, h3 {
  82. font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  83. color: #1B2431;
  84. margin: 40px 0 0;
  85. line-height: 1.2em;
  86. font-weight: 400;
  87. }
  88. h1 {
  89. font-size: 32px;
  90. font-weight: 500;
  91. /* 1.2em * 32px = 38.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
  92. /*line-height: 38px;*/
  93. }
  94. h2 {
  95. font-size: 24px;
  96. /* 1.2em * 24px = 28.8px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
  97. /*line-height: 29px;*/
  98. }
  99. h3 {
  100. font-size: 18px;
  101. /* 1.2em * 18px = 21.6px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
  102. /*line-height: 22px;*/
  103. }
  104. h4 {
  105. font-size: 14px;
  106. font-weight: 600;
  107. }
  108. p, ul, ol {
  109. margin-bottom: 10px;
  110. font-weight: normal;
  111. }
  112. p li, ul li, ol li {
  113. margin-left: 5px;
  114. list-style-position: inside;
  115. }
  116. /* -------------------------------------
  117. LINKS & BUTTONS
  118. ------------------------------------- */
  119. a {
  120. color: #0F9DEA;
  121. text-decoration: underline;
  122. }
  123. .btn-primary {
  124. text-decoration: none;
  125. color: #FFF;
  126. background-color: #2D3349;
  127. border: solid #2D3349;
  128. border-width: 10px 20px;
  129. line-height: 2em;
  130. /* 2em * 14px = 28px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
  131. /*line-height: 28px;*/
  132. font-weight: bold;
  133. text-align: center;
  134. cursor: pointer;
  135. display: inline-block;
  136. border-radius: 5px;
  137. text-transform: capitalize;
  138. }
  139. /* -------------------------------------
  140. OTHER STYLES THAT MIGHT BE USEFUL
  141. ------------------------------------- */
  142. .last {
  143. margin-bottom: 0;
  144. }
  145. .first {
  146. margin-top: 0;
  147. }
  148. .aligncenter {
  149. text-align: center;
  150. }
  151. .alignright {
  152. text-align: right;
  153. }
  154. .alignleft {
  155. text-align: left;
  156. }
  157. .clear {
  158. clear: both;
  159. }
  160. .logo{
  161. background: #2D3349;
  162. text-align: center;
  163. border-radius: 3px 3px 0 0;
  164. padding: 40px 0px;
  165. }
  166. /* -------------------------------------
  167. ALERTS
  168. Change the class depending on warning email, good email or bad email
  169. ------------------------------------- */
  170. .alert {
  171. font-size: 14px;
  172. color: #fff;
  173. font-weight: 500;
  174. padding: 20px;
  175. text-align: center;
  176. }
  177. .alert a {
  178. color: #fff;
  179. text-decoration: none;
  180. font-weight: 500;
  181. font-size: 16px;
  182. }
  183. .alert.alert-warning {
  184. background-color: #e55701;
  185. }
  186. .alert.alert-bad {
  187. background-color: #D0021B;
  188. }
  189. .alert.alert-good {
  190. background-color: #68B90F;
  191. }
  192. /* -------------------------------------
  193. INVOICE
  194. Styles for the billing table
  195. ------------------------------------- */
  196. .invoice {
  197. margin: 40px auto;
  198. text-align: left;
  199. width: 80%;
  200. }
  201. .invoice td {
  202. padding: 5px 0;
  203. }
  204. .invoice .invoice-items {
  205. width: 100%;
  206. }
  207. .invoice .invoice-items td {
  208. border-top: #eee 1px solid;
  209. }
  210. .invoice .invoice-items .total td {
  211. border-top: 2px solid #333;
  212. border-bottom: 2px solid #333;
  213. font-weight: 700;
  214. }
  215. /* -------------------------------------
  216. RESPONSIVE AND MOBILE FRIENDLY STYLES
  217. ------------------------------------- */
  218. @media only screen and (max-width: 640px) {
  219. body {
  220. padding: 0 !important;
  221. }
  222. h1, h2, h3, h4 {
  223. font-weight: 800 !important;
  224. margin: 20px 0 5px !important;
  225. }
  226. h1 {
  227. font-size: 22px !important;
  228. }
  229. h2 {
  230. font-size: 18px !important;
  231. }
  232. h3 {
  233. font-size: 16px !important;
  234. }
  235. .container {
  236. padding: 0 !important;
  237. width: 100% !important;
  238. }
  239. .content {
  240. padding: 0 !important;
  241. }
  242. .content-wrap {
  243. padding: 10px !important;
  244. }
  245. .invoice {
  246. width: 100% !important;
  247. }
  248. }
  249. /*# sourceMappingURL=styles.css.map */