+++ /dev/null
-/* Client-specific Styles & Reset */
-#outlook a {
- padding: 0; }
-
-body {
- width: 100% !important;
- min-width: 100%;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- margin: 0;
- padding: 0; }
-
-/* .ExternalClass applies to Outlook.com (the artist formerly known as Hotmail) */
-.ExternalClass {
- width: 100%; }
- .ExternalClass,
- .ExternalClass p,
- .ExternalClass span,
- .ExternalClass font,
- .ExternalClass td,
- .ExternalClass div {
- line-height: 100%; }
-
-#backgroundTable {
- margin: 0;
- padding: 0;
- width: 100% !important;
- line-height: 100% !important; }
-
-img {
- outline: none;
- text-decoration: none;
- -ms-interpolation-mode: bicubic;
- width: auto;
- max-width: 100%;
- float: left;
- clear: both;
- display: block; }
-
-center {
- width: 100%;
- min-width: 580px; }
-
-a img {
- border: none; }
-
-p {
- margin: 0 0 0 10px; }
-
-table {
- border-spacing: 0;
- border-collapse: collapse; }
-
-td {
- word-break: break-word;
- -webkit-hyphens: auto;
- -moz-hyphens: auto;
- hyphens: auto;
- border-collapse: collapse !important; }
-
-table, tr, td {
- padding: 0;
- vertical-align: top;
- text-align: left; }
-
-hr {
- color: #d9d9d9;
- background-color: #d9d9d9;
- height: 1px;
- border: none; }
-
-/* Responsive Grid */
-table.body {
- height: 100%;
- width: 100%; }
-
-table.container {
- width: 580px;
- margin: 0 auto;
- text-align: inherit; }
-
-table.row {
- padding: 0px;
- width: 100%;
- position: relative; }
-
-table.container table.row {
- display: block; }
-
-td.wrapper {
- padding: 10px 20px 0px 0px;
- position: relative; }
-
-table.columns,
-table.column {
- margin: 0 auto; }
-
-table.columns td,
-table.column td {
- padding: 0px 0px 10px; }
-
-table.row td.last,
-table.container td.last {
- padding-right: 0px; }
-
-table.large-1 {
- width: 30px; }
-
-table.large-2 {
- width: 80px; }
-
-table.large-3 {
- width: 130px; }
-
-table.large-4 {
- width: 180px; }
-
-table.large-5 {
- width: 230px; }
-
-table.large-6 {
- width: 280px; }
-
-table.large-7 {
- width: 330px; }
-
-table.large-8 {
- width: 380px; }
-
-table.large-9 {
- width: 430px; }
-
-table.large-10 {
- width: 480px; }
-
-table.large-11 {
- width: 530px; }
-
-table.large-12 {
- width: 580px; }
-
-table.large-1 center {
- min-width: 30px; }
-
-table.large-2 center {
- min-width: 80px; }
-
-table.large-3 center {
- min-width: 130px; }
-
-table.large-4 center {
- min-width: 180px; }
-
-table.large-5 center {
- min-width: 230px; }
-
-table.large-6 center {
- min-width: 280px; }
-
-table.large-7 center {
- min-width: 330px; }
-
-table.large-8 center {
- min-width: 380px; }
-
-table.large-9 center {
- min-width: 430px; }
-
-table.large-10 center {
- min-width: 480px; }
-
-table.large-11 center {
- min-width: 530px; }
-
-table.large-12 center {
- min-width: 580px; }
-
-table.large-1 .panel center {
- min-width: 10px; }
-
-table.large-2 .panel center {
- min-width: 60px; }
-
-table.large-3 .panel center {
- min-width: 110px; }
-
-table.large-4 .panel center {
- min-width: 160px; }
-
-table.large-5 .panel center {
- min-width: 210px; }
-
-table.large-6 .panel center {
- min-width: 260px; }
-
-table.large-7 .panel center {
- min-width: 310px; }
-
-table.large-8 .panel center {
- min-width: 360px; }
-
-table.large-9 .panel center {
- min-width: 410px; }
-
-table.large-10 .panel center {
- min-width: 460px; }
-
-table.large-11 .panel center {
- min-width: 510px; }
-
-table.large-12 .panel center {
- min-width: 560px; }
-
-.body .columns td.large-1,
-.body .column td.large-1 {
- width: 8.33333%; }
-
-.body .columns td.large-2,
-.body .column td.large-2 {
- width: 16.66667%; }
-
-.body .columns td.large-3,
-.body .column td.large-3 {
- width: 25%; }
-
-.body .columns td.large-4,
-.body .column td.large-4 {
- width: 33.33333%; }
-
-.body .columns td.large-5,
-.body .column td.large-5 {
- width: 41.66667%; }
-
-.body .columns td.large-6,
-.body .column td.large-6 {
- width: 50%; }
-
-.body .columns td.large-7,
-.body .column td.large-7 {
- width: 58.33333%; }
-
-.body .columns td.large-8,
-.body .column td.large-8 {
- width: 66.66667%; }
-
-.body .columns td.large-9,
-.body .column td.large-9 {
- width: 75%; }
-
-.body .columns td.large-10,
-.body .column td.large-10 {
- width: 83.33333%; }
-
-.body .columns td.large-11,
-.body .column td.large-11 {
- width: 91.66667%; }
-
-.body .columns td.large-12,
-.body .column td.large-12 {
- width: 100%; }
-
-td.offset-by-1 {
- padding-left: 50px; }
-
-td.offset-by-2 {
- padding-left: 100px; }
-
-td.offset-by-3 {
- padding-left: 150px; }
-
-td.offset-by-4 {
- padding-left: 200px; }
-
-td.offset-by-5 {
- padding-left: 250px; }
-
-td.offset-by-6 {
- padding-left: 300px; }
-
-td.offset-by-7 {
- padding-left: 350px; }
-
-td.offset-by-8 {
- padding-left: 400px; }
-
-td.offset-by-9 {
- padding-left: 450px; }
-
-td.offset-by-10 {
- padding-left: 500px; }
-
-td.offset-by-11 {
- padding-left: 550px; }
-
-td.expander {
- visibility: hidden;
- width: 0px;
- padding: 0 !important; }
-
-table.columns .text-pad,
-table.column .text-pad {
- padding-left: 10px;
- padding-right: 10px; }
-
-table.columns .left-text-pad,
-table.columns .text-pad-left,
-table.column .left-text-pad,
-table.column .text-pad-left {
- padding-left: 10px; }
-
-table.columns .right-text-pad,
-table.columns .text-pad-right,
-table.column .right-text-pad,
-table.column .text-pad-right {
- padding-right: 10px; }
-
-.block-grid {
- width: 100%;
- max-width: 580px; }
- .block-grid td {
- display: inline-block;
- padding: 10px; }
-
-.up-2 td {
- width: 270px !important; }
-
-.up-3 td {
- width: 173px !important; }
-
-.up-4 td {
- width: 125px !important; }
-
-.up-5 td {
- width: 96px !important; }
-
-.up-6 td {
- width: 76px !important; }
-
-.up-7 td {
- width: 62px !important; }
-
-.up-8 td {
- width: 52px !important; }
-
-table.center,
-td.center,
-h1.center,
-h2.center,
-h3.center,
-h4.center,
-h5.center,
-h6.center,
-p.center,
-span.center {
- text-align: center; }
-
-span.center {
- display: block;
- width: 100%; }
-
-img.center {
- margin: 0 auto;
- float: none; }
-
-.show-for-small,
-.hide-for-desktop {
- display: none; }
-
-/* Typography */
-body, table.body, h1, h2, h3, h4, h5, h6, p, td {
- color: #222222;
- font-family: Helvetica, Arial, sans-serif;
- font-weight: normal;
- padding: 0;
- margin: 0;
- text-align: left;
- line-height: 1.3; }
-
-h1, h2, h3, h4, h5, h6 {
- word-break: normal; }
-
-h1 {
- font-size: 40px; }
-
-h2 {
- font-size: 36px; }
-
-h3 {
- font-size: 32px; }
-
-h4 {
- font-size: 28px; }
-
-h5 {
- font-size: 24px; }
-
-h6 {
- font-size: 20px; }
-
-body, table.body, p, td {
- font-size: 14px;
- line-height: 19px; }
-
-p.lead, p.lede, p.leed {
- font-size: 18px;
- line-height: 21px; }
-
-p {
- margin-bottom: 10px; }
-
-small {
- font-size: 10px; }
-
-a {
- color: #2ba6cb;
- text-decoration: none; }
-
-a:hover {
- color: #2795b6 !important; }
-
-a:active {
- color: #2795b6 !important; }
-
-a:visited {
- color: c #2ba6cb !important; }
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
- color: #2ba6cb; }
-
-h1 a:active,
-h2 a:active,
-h3 a:active,
-h4 a:active,
-h5 a:active,
-h6 a:active {
- color: #2ba6cb !important; }
-
-h1 a:visited,
-h2 a:visited,
-h3 a:visited,
-h4 a:visited,
-h5 a:visited,
-h6 a:visited {
- color: #2ba6cb !important; }
-
-/* Buttons */
-table.button {
- width: 100%;
- overflow: visible; }
-
-table.button td {
- display: block;
- width: auto !important;
- text-align: center;
- background: #2ba6cb;
- border: 1px solid #2284a1;
- color: #ffffff;
- padding: 0px 0; }
-
-table.button td a, table.button.tiny td a {
- padding: 5px 0; }
-
-table.button.small td a {
- padding: 8px 0; }
-
-table.button.medium td a {
- padding: 12px 0; }
-
-table.button.large td a {
- padding: 21px 0; }
-
-table.button td a {
- font-weight: bold;
- text-decoration: none;
- font-family: Helvetica, Arial, sans-serif;
- color: #ffffff;
- font-size: 16px;
- display: block;
- height: 100%;
- width: 100%; }
-
-table.button.tiny td a {
- font-size: 12px;
- font-weight: normal; }
-
-table.button.small td a {
- font-size: 16px; }
-
-table.button.medium td a {
- font-size: 20px; }
-
-table.button.large td a {
- font-size: 24px; }
-
-table.button:hover td,
-table.button:visited td,
-table.button:active td {
- background: #2795b6 !important; }
-
-table.button:hover td a,
-table.button:visited td a,
-table.button:active td a {
- color: #ffffff !important; }
-
-table.button:hover td
- {
- background: #2284a1; }
-
-table.button:hover td a,
-table.button:active td a,
-table.button td a:visited
- {
- color: #ffffff !important; }
-
-table.button.secondary td {
- background: #e9e9e9;
- border-color: #d0d0d0;
- color: #555555; }
-
-table.button.secondary td a {
- color: #555555; }
-
-table.button.secondary:hover td {
- background: #d0d0d0 !important;
- color: #555555; }
-
-table.button.secondary:hover td a,
-table.button.secondary td a:visited,
-table.button.secondary:active td a {
- color: #555555 !important; }
-
-table.button.success td {
- background: #5da423;
- border-color: #457a1a; }
-
-table.button.success:hover td {
- background: #457a1a !important; }
-
-table.button.alert td {
- background: #c60f13;
- border-color: #970b0e; }
-
-table.button.alert:hover td {
- background: #970b0e !important; }
-
-table.button.radius td {
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px; }
-
-table.button.round td {
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- border-radius: 500px; }
-
-td.callout {
- width: 100%;
- border: 1px solid #bfbfbf;
- padding: 10px !important;
- background: #f2f2f2; }
-
-td.callout.success {
- background: #43AC6A !important;
- border: 1px solid #26633d !important;
- color: #FFFFFF !important; }
-
-td.wrapper table tr td.callout.warning {
- background: #f08a24 !important;
- border: 1px solid #a3570b !important;
- color: #FFFFFF; }
-
-td.callout.alert {
- background: #f04124 !important;
- border: 1px solid #a3210b !important;
- color: #FFFFFF; }
-
-td.callout.round {
- border-radius: 50px !important; }
-
-.sub-grid table {
- width: 100%; }
-
-.sub-grid td.sub-columns {
- padding-bottom: 0; }
-
-.thumbnail {
- display: inline-block;
- border-collapse: separate; }
- .thumbnail img {
- background-color: #ff0000;
- border-collapse: separate; }
- .thumbnail:hover, .thumbnail:focus {
- box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5); }
-
-table.inline-list {
- width: 100% !important; }
-
-td.vertical {
- padding-top: 10px !important; }
-
-table[class="body"] table.inline-list td.vertical {
- display: block !important; }
-
-/* Outlook First */
-body.outlook p {
- display: inline !important; }
-
-/* Media Queries */
-@media only screen and (max-width: 600px) {
- table[class="body"] img {
- width: auto !important;
- height: auto !important; }
-
- table[class="body"] center {
- min-width: 0 !important; }
-
- table[class="body"] .container {
- width: 95% !important; }
-
- table[class="body"] .row {
- width: 100% !important;
- display: block !important; }
-
- table[class="body"] .wrapper {
- display: block !important;
- padding-right: 0 !important; }
-
- table[class="body"] .columns,
- table[class="body"] .column {
- table-layout: fixed !important;
- float: none !important;
- width: 100% !important;
- padding-right: 0px !important;
- padding-left: 0px !important;
- display: inline-block !important;
- margin: 0 !important; }
-
- table[class="body"] .wrapper.first .columns,
- table[class="body"] .wrapper.first .column {
- display: table !important; }
-
- table[class="body"] table.columns td,
- table[class="body"] table.column td {
- width: 100% !important; }
-
- .wrapper > table.small-1 {
- width: 8.33333% !important; }
-
- .wrapper > table.small-2 {
- width: 16.66667% !important; }
-
- .wrapper > table.small-3 {
- width: 25% !important; }
-
- .wrapper > table.small-4 {
- width: 33.33333% !important; }
-
- .wrapper > table.small-5 {
- width: 41.66667% !important; }
-
- .wrapper > table.small-6 {
- width: 50% !important; }
-
- .wrapper > table.small-7 {
- width: 58.33333% !important; }
-
- .wrapper > table.small-8 {
- width: 66.66667% !important; }
-
- .wrapper > table.small-9 {
- width: 75% !important; }
-
- .wrapper > table.small-10 {
- width: 83.33333% !important; }
-
- .wrapper > table.small-11 {
- width: 91.66667% !important; }
-
- .wrapper > table.small-12 {
- width: 100% !important; }
-
- .wrapper > table.small-12 {
- display: block !important; }
-
- .body .columns td.small-1,
- .body .column td.small-1,
- table.small-1 center {
- width: 8.33333% !important; }
-
- .body .columns td.small-2,
- .body .column td.small-2,
- table.small-2 center {
- width: 16.66667% !important; }
-
- .body .columns td.small-3,
- .body .column td.small-3,
- table.small-3 center {
- width: 25% !important; }
-
- .body .columns td.small-4,
- .body .column td.small-4,
- table.small-4 center {
- width: 33.33333% !important; }
-
- .body .columns td.small-5,
- .body .column td.small-5,
- table.small-5 center {
- width: 41.66667% !important; }
-
- .body .columns td.small-6,
- .body .column td.small-6,
- table.small-6 center {
- width: 50% !important; }
-
- .body .columns td.small-7,
- .body .column td.small-7,
- table.small-7 center {
- width: 58.33333% !important; }
-
- .body .columns td.small-8,
- .body .column td.small-8,
- table.small-8 center {
- width: 66.66667% !important; }
-
- .body .columns td.small-9,
- .body .column td.small-9,
- table.small-9 center {
- width: 75% !important; }
-
- .body .columns td.small-10,
- .body .column td.small-10,
- table.small-10 center {
- width: 83.33333% !important; }
-
- .body .columns td.small-11,
- .body .column td.small-11,
- table.small-11 center {
- width: 91.66667% !important; }
-
- .body .columns td.small-12,
- .body .column td.small-12,
- table.small-12 center {
- width: 100% !important; }
-
- table[class="body"] .columns td.small-1,
- table[class="body"] .column td.small-1 {
- width: 8.33333% !important; }
-
- table[class="body"] .columns td.small-2,
- table[class="body"] .column td.small-2 {
- width: 16.66667% !important; }
-
- table[class="body"] .columns td.small-3,
- table[class="body"] .column td.small-3 {
- width: 25% !important; }
-
- table[class="body"] .columns td.small-4,
- table[class="body"] .column td.small-4 {
- width: 33.33333% !important; }
-
- table[class="body"] .columns td.small-5,
- table[class="body"] .column td.small-5 {
- width: 41.66667% !important; }
-
- table[class="body"] .columns td.small-6,
- table[class="body"] .column td.small-6 {
- width: 50% !important; }
-
- table[class="body"] .columns td.small-7,
- table[class="body"] .column td.small-7 {
- width: 58.33333% !important; }
-
- table[class="body"] .columns td.small-8,
- table[class="body"] .column td.small-8 {
- width: 66.66667% !important; }
-
- table[class="body"] .columns td.small-9,
- table[class="body"] .column td.small-9 {
- width: 75% !important; }
-
- table[class="body"] .columns td.small-10,
- table[class="body"] .column td.small-10 {
- width: 83.33333% !important; }
-
- table[class="body"] .columns td.small-11,
- table[class="body"] .column td.small-11 {
- width: 91.66667% !important; }
-
- table[class="body"] .columns td.small-12,
- table[class="body"] .column td.small-12 {
- width: 100% !important; }
-
- table[class="body"] td.offset-by-1 {
- padding-left: 0 !important; }
-
- table[class="body"] td.offset-by-2 {
- padding-left: 0 !important; }
-
- table[class="body"] td.offset-by-3 {
- padding-left: 0 !important; }
-
- table[class="body"] td.offset-by-4 {
- padding-left: 0 !important; }
-
- table[class="body"] td.offset-by-5 {
- padding-left: 0 !important; }
-
- table[class="body"] td.offset-by-6 {
- padding-left: 0 !important; }
-
- table[class="body"] td.offset-by-7 {
- padding-left: 0 !important; }
-
- table[class="body"] td.offset-by-8 {
- padding-left: 0 !important; }
-
- table[class="body"] td.offset-by-9 {
- padding-left: 0 !important; }
-
- table[class="body"] td.offset-by-10 {
- padding-left: 0 !important; }
-
- table[class="body"] td.offset-by-11 {
- padding-left: 0 !important; }
-
- table[class="body"] table.columns td.expander {
- width: 1px !important; }
-
- table[class="body"] .right-text-pad,
- table[class="body"] .text-pad-right {
- padding-left: 10px !important; }
-
- table[class="body"] .left-text-pad,
- table[class="body"] .text-pad-left {
- padding-right: 10px !important; }
-
- table[class="body"] .hide-for-small,
- table[class="body"] .show-for-desktop {
- display: none !important; }
-
- table[class="body"] .show-for-small,
- table[class="body"] .hide-for-desktop {
- display: inherit !important; } }
-table[class="body"] table.inline-list td {
- width: auto !important;
- display: inline-block !important; }
-
-table[class="body"] table.inline-list.vertical td {
- display: block !important; }
-
-/*Styles and overrides*/
-h1.main {
- margin-bottom: 0; }
-
-.feature h2 {
- margin: 0 0 30px; }
-
-p.metadata {
- font-weight: 700;
- font-size: 11px;
- margin-bottom: 0px;
- text-transform: uppercase;
- letter-spacing: 1px;
- color: #999; }
-
-p.lead.gray {
- color: #999; }
-
-p.lead.dark-gray {
- color: #777; }
-
-img.thumbnail {
- border: 1px solid #d9d9d9;
- margin: 20px 0; }
-
-img.thumbnail.sm {
- margin: 0 0 20px 0; }
-
-h5 {
- margin-bottom: 10px;
- font-size: 12px;
- font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 1px; }
-
-h5 a {
- color: #222 !important; }
-
-.copyright p {
- margin-bottom: 0px;
- font-size: 11px;
- color: #999; }
-
-.copyright a {
- color: #999;
- font-weight: bold; }
-
-.copyright p.dark, .copyright p.dark a {
- color: #222; }
-
-ul.steps {
- list-style: none;
- padding-left: 0px; }
-
-ul.steps li, ul.steps p {
- margin-bottom: 0; }
-
-.flush {
- margin: 0 !important; }
-
-p.comment {
- background: #f5f5f5;
- padding: 16px 20px;
- margin-bottom: 0;
- padding-left: 80px; }
-
-p.next.comment {
- border-top: 2px solid #fff; }
-
-div.triangle {
- margin-left: 12px;
- border-left: 10px transparent solid;
- border-right: 10px transparent solid;
- border-bottom: 10px solid #f5f5f5;
- width: 0px; }
-
-.cite {
- font-size: 12px;
- color: #999;
- font-weight: bold;
- margin: 8px 0 0 0;
- display: block; }
-
-img.avatar {
- margin: 20px auto 0;
- border-radius: 50%;
- height: 80px;
- width: 80px; }
-
-p.comment.note {
- padding-left: 80px; }
-
-.note-pip {
- width: 22px;
- height: 22px;
- border-radius: 50%;
- background: #333;
- color: white;
- font-size: 10px;
- font-weight: bold;
- text-align: center;
- line-height: 22px;
- float: left; }
-
-.post-note {
- padding-left: 40px; }
-
-.post-note a, .post-note a:hover {
- color: #222 !important; }
-
-table.button.influence td {
- background: #2badbe; }
-
-table.button.influence:hover td {
- background: #27a1aa !important; }
-
-table.button.verify td {
- background: #b6d133; }
-
-table.button.verify:hover td {
- background: #b0c130 !important; }
-
-table.button.solidify td {
- background: #c71d5e; }
-
-table.button.solidify:hover td {
- background: #ba1c5d !important; }
-
-table.button.hosted td {
- background: #078cba; }
-
-table.button.hosted:hover td {
- background: #0786a8 !important; }
-
-table.button.university td {
- background: #ff6908; }
-
-table.button.university:hover td {
- background: #e55e07 !important; }
-
-table.set-thumbs td.wrapper {
- padding: 10px 5px; }
-
-table.set-thumbs td img {
- margin: 0; }
-
-table.set-thumbs .cite {
- float: right; }
-
-table.share-news p {
- margin: 0; }
-
-table.share-news .button {
- margin: 0; }
-
-table.share-news .button td {
- padding: 0; }
-
-table.share-news .button a {
- padding: 12px 0;
- display: block; }
-
-.panel.light-gray {
- background: #f9f9f9;
- padding: 20px 30px !important; }
-
-.panel.light-gray p {
- padding: 0 20px; }
-
-pre {
- background: #f9f9f9;
- margin: 30px 0; }
-
-pre code {
- color: #777; }
-
-pre code span.callout {
- color: #555;
- font-weight: bold; }
-
-pre code span.callout-strong {
- color: #ff6908;
- font-weight: bold; }
-
-hr {
- color: #efefef;
- background-color: #efefef; }
-
-td.wrapper-small-left {
- padding-left: 0 !important; }
-
-/* Tweets Yo */
-td.tweet-pad {
- padding-top: 5px !important;
- padding-bottom: 0px !important; }
-
-td.tweet-head {
- padding-top: 30px !important;
- padding-bottom: 10px !important; }
-
-td.tweet-foot {
- padding-top: 0 !important;
- padding-bottom: 10px !important; }
-
-td.tweet-foot p {
- margin-bottom: 0 !important;
- padding-bottom: 15px !important; }
-
-.tweet-date, .tweet-handle {
- color: #999999;
- font-size: 16px !important; }
-
-.tweet-pad h3 {
- margin-bottom: 0; }
-
-.tweet-pad h3, .tweet-pad h6 {
- margin-left: 60px !important; }
-
-.panel a .tweet-avatar {
- width: 50px !important;
- height: auto !important; }
-
-.panel {
- padding: 25px !important;
- padding-top: 25px !important; }
-
-table[class="body"] .thumb-caption {
- margin-top: 110px !important; }
-
-@media only screen and (max-width: 600px) {
- td.wrapper {
- padding-left: 0; }
-
- table[class="body"] .columns.stay-4 {
- width: 180px !important; }
-
- table[class="body"] .thin-row {
- width: 180px !important;
- margin: 0 auto !important; } }
<center>
<table class="container"><tbody><tr><td>
<table class="row"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr><td><p class="lead">Hi John,</p></td><td class="expander"></td></tr><tr><td><p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet.</p></td><td class="expander"></td></tr></table></td>
+ <td class="wrapper last"><table class="small-12 large-12 columns"><tr></tr><tr><td><p class="lead">Hi John,</p></td></tr><tr><td><p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet.</p></td></tr><td class="expander"></td></table></td>
</tr></tbody></table>
<table class="row"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><img width="580" height="300" src="http://placehold.it/580x300"><td class="expander"></td></table></td>
+ <td class="wrapper last"><table class="small-12 large-12 columns"><tr><img width="580" height="300" src="http://placehold.it/580x300"><td class="expander"></td></tr></table></td>
</tr></tbody></table>
<table class="row"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p></td><td class="expander"></td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p></td><td class="expander"></td></tr><tr><td><p>Cheers,<br>Bryan</p></td><td class="expander"></td></tr></table></td>
+ <td class="wrapper last"><table class="small-12 large-12 columns"><tr></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p></td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p></td></tr><tr><td><p>Cheers,<br>Bryan</p></td></tr><td class="expander"></td></table></td>
</tr></tbody></table>
<hr>
<table class="row"><tbody><tr>
- <td class="wrapper"><table class="small-12 large-6 columns"><tr>
+ <td class="wrapper"><table class="small-12 large-6 columns"><tr></tr><tr>
<td class="tweet-pad panel tweet-head">
<a href="https://twitter.com/ZURB/status/541043140933582848">
<img align="left" class="tweet-avatar" src="http://placehold.it/50x50">
</a>
</td>
<td class="expander"></td>
- </tr><td class="expander"></td><tr>
+ </tr><tr>
<td class="tweet-pad panel">
<p>Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. <a href="http://t.co/ufBR1IalT5">zurb.us/1yjUnj6</a></p>
</td>
<td class="expander"></td>
- </tr><td class="expander"></td><tr>
+ </tr><tr>
<td class="tweet-pad tweet-foot panel">
<a href="https://twitter.com/ZURB/status/541043140933582848">
<p class="tweet-date">8:35 PM - 5 Dec 2014</p>
<td class="expander"></td>
</tr><td class="expander"></td></table></td>
- <td class="wrapper last"><table class="small-12 large-6 columns"><tr>
+ <td class="wrapper last"><table class="small-12 large-6 columns"><tr></tr><tr>
<td align="left" class="tweet-pad panel tweet-head">
<a href="https://twitter.com/ZURB/status/541043140933582848">
<img align="left" class="tweet-avatar" src="http://placehold.it/50x50">
</a>
</td>
<td class="expander"></td>
- </tr><td class="expander"></td><tr>
+ </tr><tr>
<td class="tweet-pad panel">
<p>Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. <a href="http://t.co/ufBR1IalT5">zurb.us/1yjUnj6</a></p>
</td>
<td class="expander"></td>
- </tr><td class="expander"></td><tr>
+ </tr><tr>
<td class="tweet-pad tweet-foot panel">
<a href="https://twitter.com/ZURB/status/541043140933582848">
<p class="tweet-date">8:35 PM - 5 Dec 2014</p>
<table class="row copyright"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr><td><h5 class="center">Sharing is caring</h5></td><td class="expander"></td></tr><tr><td><p class="center">Share ZURBnews and keep the good vibes going.</p></td><td class="expander"></td></tr></table></td>
+ <td class="wrapper last"><table class="small-12 large-12 columns"><tr></tr><tr><td><h5 class="center">Sharing is caring</h5></td></tr><tr><td><p class="center">Share ZURBnews and keep the good vibes going.</p></td></tr><td class="expander"></td></table></td>
</tr></tbody></table>
<!-- ^^^^^Expander not working^^^^^ -->
<!-- ^^^Not sure how to best implement the offset class.^^^^
It is applied to a td.wrapper that is automatically generated.
This might be a proposed option -->
- <td class="wrapper"><table class="small-12 large-1 columns"></table></td>
- <td class="wrapper"><table class="small-12 large-5 columns"><td><table class="button facebook"><tbody><tr><td>
+ <td class="wrapper"><table class="small-12 large-1 columns"><tr><td class="expander"></td></tr></table></td>
+ <td class="wrapper"><table class="small-12 large-5 columns"><t
r><td><table class="button facebook"><tbody><tr><td>
<a href="#">Share on facebook</a>
- </td></tr></tbody></table></td><td class="expander"></td></table></td>
- <td class="wrapper last"><table class="small-12 large-5 columns"><td><table class="button facebook"><tbody><tr><td>
+ </td></tr></tbody></table></td><td class="expander"></td></tr></table></td>
+ <td class="wrapper last"><table class="small-12 large-5 columns"><t
r><td><table class="button facebook"><tbody><tr><td>
<a href="#">Share on facebook</a>
- </td></tr></tbody></table></td><td class="expander"></td></table></td>
+ </td></tr></tbody></table></td><td class="expander"></td></tr></table></td>
</tr></tbody></table>
<hr>
</td></tr></tbody></table>
// zurb.com/ink/
// Licensed under MIT Open Source
-@import "global";
+@import 'global';
////
/// @group button
////
-$include-html-button-classes: $include-html-classes !default;
-
-// We use these to build padding for buttons.
-$button-dft: 0px 0 !default;
-$button-tny: 5px !default;
-$button-sml: 8px !default;
-$button-med: 12px !default;
-$button-lrg: 21px !default;
-
-// We use these to control button text styles.
-$button-font-family: $base-font-family !default;
-$button-font-color: #ffffff !default;
-$button-font-color-alt: #555555 !default;
-$button-font-tny: 12px !default;
-$button-font-sml: 16px !default;
-$button-font-med: 20px !default;
-$button-font-lrg: 24px !default;
-
-// We use these to control button border styles.
-$button-border-width: 1px !default;
-$button-border-style: solid !default;
-$button-bg: #2ba6cb !default;
-$button-border-color: darken($button-bg, 10%);
-
-// We use these as default colors throughout
-$primary-color: #2795b6 !default;
-$secondary-color: #e9e9e9 !default;
-$alert-color: #c60f13 !default;
-$success-color: #5da423 !default;
-$secondary-border-color: #d0d0d0 !default;
-$alert-border-color: #457a1a !default;
-$success-border-color: #970b0e !default;
-
-// We use this to set the default radius used throughout the core.
-$button-radius: $global-radius !default;
-$button-round: $global-rounded !default;
-
-@include exports("buttons") {
- @if $include-html-button-classes {
- /* Buttons */
-
- table.button {
- width: 100%;
- overflow: visible;
- }
+/// Defualt padding for button.
+/// @type List
+$button-padding: 12px 0 !default;
- table.button td {
- display: block;
- width: auto !important;
- text-align: center;
- background: $button-bg;
- border: $button-border-width $button-border-style $button-border-color;
- color: $button-font-color;
- padding: $button-dft;
- }
+/// Defualt padding for a tiny button.
+/// @type List
+$button-padding-tiny: 5px 0 4px !default;
- table.button td a, table.button.tiny td a {
- padding: $button-tny 0;
- }
+/// Defualt padding for a small button.
+/// @type List
+$button-padding-small: 8px 0 7px !default;
- table.button.small td a {
- padding: $button-sml 0;
- }
+/// Defualt padding for a large button.
+/// @type List
+$button-padding-large: 21px 0 18px !default;
- table.button.medium td a {
- padding: $button-med 0;
- }
+/// Defualt color of the font in a button.
+/// @type Color
+$button-font-color: $white !default;
- table.button.large td a {
- padding: $button-lrg 0;
- }
+/// Defualt color of the font in an alternate button.
+/// @type Color
+$button-font-color-alt: $medium-gray !default;
- table.button td a {
- font-weight: bold;
- text-decoration: none;
- font-family: $button-font-family;
- color: $button-font-color;
- font-size: $button-font-sml;
- display: block;
- height: 100%;
- width: 100%;
- }
+/// Defualt font size for a button.
+/// @type Number
+$button-font-size: 20px !default;
- table.button.tiny td a {
- font-size: $button-font-tny;
- font-weight: normal;
- }
+/// Defualt font size for a tiny button.
+/// @type Number
+$button-font-size-tiny: 12px !default;
- table.button.small td a {
- font-size: $button-font-sml;
- }
+/// Defualt font size for a small button.
+/// @type Number
+$button-font-size-small: 16px !default;
- table.button.medium td a {
- font-size: $button-font-med;
- }
+/// Defualt font size for a large button.
+/// @type Number
+$button-font-size-large: 24px !default;
- table.button.large td a {
- font-size: $button-font-lrg;
- }
+/// Defualt backgrounnd color for a button.
+/// @type Color
+$button-background-color: $primary-color !default;
- table.button:hover td,
- table.button:visited td,
- table.button:active td {
- background: $primary-color !important;
- }
+/// Defualt border color for a button.
+/// @type Color
+$button-border: 1px solid darken($button-background-color, 10%);
- table.button:hover td a,
- table.button:visited td a,
- table.button:active td a {
- color: $button-font-color !important;
- }
+table.button {
+ width: 100%;
+ overflow: visible;
- table.button:hover td
- // table.tiny-button:hover td,
- // table.small-button:hover td,
- // table.medium-button:hover td,
- // table.large-button:hover td
- {
- background: darken($button-bg, 10%);
+ td {
+ display: block;
+ width: auto !important;
+ text-align: center;
+ background: $button-background-color;
+ border: $button-border;
+ color: $button-font-color;
+ padding: $button-padding;
}
- table.button:hover td a,
- table.button:active td a,
- table.button td a:visited
- // table.tiny-button:hover td a,
- // table.tiny-button:active td a,
- // table.tiny-button td a:visited,
- // table.small-button:hover td a,
- // table.small-button:active td a,
- // table.small-button td a:visited,
- // table.medium-button:hover td a,
- // table.medium-button:active td a,
- // table.medium-button td a:visited,
- // table.large-button:hover td a,
- // table.large-button:active td a,
- // table.large-button td a:visited
- {
- color: $button-font-color !important;
- }
- table.button.secondary td {
- background: $secondary-color;
- border-color: $secondary-border-color;
- color: $button-font-color-alt;
- }
+ td a {
+ font-weight: bold;
+ text-decoration: none;
+ font-family: $base-font-family;
+ color: $button-font-color;
+ font-size: $button-font-size;
+ display: block;
+ height: 100%;
+ width: 100%;
+ padding: $button-padding;
+ font-size: $button-font-size;
+ }
- table.button.secondary td a {
- color: $button-font-color-alt;
- }
+ &.tiny td a {
+ padding: $button-padding-tiny;
+ font-size: $button-font-size-tiny;
+ font-weight: normal;
+ }
- table.button.secondary:hover td {
- background: $secondary-border-color !important;
- color: $button-font-color-alt;
- }
+ &.small td a {
+ padding: $button-padding-small;
+ font-size: $button-font-size-small;
+ }
- table.button.secondary:hover td a,
- table.button.secondary td a:visited,
- table.button.secondary:active td a {
- color: $button-font-color-alt !important;
- }
+ &.large td a {
+ padding: $button-padding-large 0;
+ font-size: $button-font-size-large;
+ }
- table.button.success td {
- background: $success-color;
- border-color: $alert-border-color;
- }
+ &:hover td,
+ &:visited td,
+ &:active td {
+ background: $button-background-color !important;
+ color: $button-font-color !important;
+ }
- table.button.success:hover td {
- background: $alert-border-color !important;
- }
+ &:hover td
+ &.tiny:hover td,
+ &.small:hover td,
+ &.large:hover td
+ {
+ background: darken($button-background-color, 10%);
+ }
- table.button.alert td {
- background: $alert-color;
- border-color: $success-border-color;
- }
+ &:hover td a,
+ &:active td a,
+ & td a:visited,
+ &.tiny:hover td a,
+ &.tiny:active td a,
+ &.tiny td a:visited,
+ &.small:hover td a,
+ &.small:active td a,
+ &.small td a:visited,
+ &.large:hover td a,
+ &.large:active td a,
+ &.large td a:visited
+ {
+ color: $button-font-color !important;
+ }
- table.button.alert:hover td {
- background: $success-border-color !important;
+ &.secondary td {
+ background: $secondary-color;
+ border: darken($secondary-color, -10%);
+ color: $button-font-color-alt;
+ a {
+ color: $button-font-color-alt;
}
+ }
- table.button.radius td {
- -webkit-border-radius: $global-radius;
- -moz-border-radius: $global-radius;
- border-radius: $global-radius;
- }
+ &.secondary:hover td {
+ background: darken($secondary-color, -10%)!important;
+ color: $button-font-color-alt;
+ }
- table.button.round td {
- -webkit-border-radius: $global-rounded;
- -moz-border-radius: $global-rounded;
- border-radius: $global-rounded;
- }
+ &.secondary:hover td a,
+ &.secondary td a:visited,
+ &.secondary:active td a {
+ color: $button-font-color-alt !important;
+ }
+
+ &.success td {
+ background: $success-color;
+ border-color: 1px solid darken($success-color, 10%);
+ }
+
+ &.success:hover td {
+ background: darken($success-color, 10%) !important;
+ }
+
+ &.alert td {
+ background: $alert-color;
+ border-color: 1px solid darken($alert-color, 10%);
+ }
+
+ &.alert:hover td {
+ background: darken($alert-color, 10%) !important;
}
-}
\ No newline at end of file
+}
projects / thirdparty / foundation / foundation-emails.git / commitdiff
