dojo-templater/compiled/3.0 examples/custom.css

Easy HTML emails with variables

/* CUSTOM FONTS */

@import url('http://www.classdojo.com/webfonts/LitteraText.css');

.LitteraTextMedium { font-family: LitteraTextMedium; }
.LitteraTextLight { font-family: LitteraTextLight; }
.LitteraTextBold { font-family: LitteraTextBold; }
.LitteraTextRegular { font-family: LitteraTextRegular; }
.LitteraTextBook { font-family: LitteraTextBook; }
/*
.LitteraPlainRegular { font-family: LitteraPlainRegular; }
.LitteraPlainBold { font-family: LitteraPlainBold; }
.LitteraPlainLight { font-family: LitteraPlainLight; }
.LitteraPlainBook { font-family: LitteraPlainBook; }
.LitteraPlainMedium { font-family: LitteraPlainMedium; }
*/

/* END CUSTOM FONTS */


/* TABLES, PAPER SHEET */

table#paper {

  /* Fun CSS3 stuff for nice clients :) */

  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);

  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

table#paper td.paper-padding {
  padding-top: 30px;

}

table.columns .text-pad,
table.column .text-pad {
  padding-left: 40px;
  padding-right: 40px;
}

table.columns .left-text-pad,
table.columns .text-pad-left,
table.column .left-text-pad,
table.column .text-pad-left {
padding-left: 40px;
}

table.columns .right-text-pad,
table.columns .text-pad-right,
table.column .right-text-pad,
table.column .text-pad-right {
padding-right: 40px;
}

/* END TABLES, PAPER SHEET */


h1, h2, h3, h4, h5, h6 {
  margin-bottom: 20px;
  margin-top: 10px;
  font-family: LitteraTextBook;
  letter-spacing: -1px;
  text-align: center;
}

p, p.lead {
  line-height: 1.6;
  font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
}
p.lead {
  font-size: 16px;
}

td.panel p {
  margin-bottom: 0px;
}

table.row {
  margin-bottom: 20px;
}

.template-label {
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
}

.callout .panel {
  background: #ECF8FF;
  border-color: #b9e5ff;
}

.header { /*background: #FFFFFF;*/ }

.footer .wrapper { /* background: #ebebeb; */ }

.footer-links {
  margin-top: 40px;
  margin-bottom: 0 !important;
}

.footer-links table.links a {
  padding-left: 8px;
  padding-right: 8px;

  color: #787878;
  text-decoration: none;
  font-weight: 400;
}

.footer-links table.links a:hover {
  text-decoration: underline;
}

.footer-address {
  margin-bottom: 0 !important;
}

.footer h5 {
  padding-bottom: 10px;
}


a, a:link, a:visited, a:hover, a:active {
  color: #1fb5fc;
  font-weight: 500;
  text-decoration: underline;

  /*color: inherit;*/
}

/* BIG CTA */

#orange-button {
  background-color: #fcb030;
  background-image: url('http://c.classdojo.com/img/email/template3/orange-btn-reg.png');
  /*background-size: 1px 60px;*/
  background-repeat: repeat-x;


  border: 1px solid #cc832d;

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

  display: inline-block;
  width: 300px;

  color: #ffffff !important;
  font-family: LitteraTextMedium, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 28px;
  font-weight: bold;
  line-height: 60px;
  text-align: center;
  text-decoration: none;

  text-shadow: 0 0 2px #713214; /* drop shadow */
  -webkit-text-size-adjust: none;

  /* Hide in all MS Office rendering engines— replaced with MSO XML coded button */
  mso-hide: all;
}

/* END BIG CTA */