!!! transitional
html(xmlns='http://www.w3.org/1999/xhtml', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
head(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')

  // If you delete this tag, the sky will fall on your head 
  meta(name='viewport', content='width=device-width', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
  meta(http-equiv='Content-Type', content='text/html; charset=UTF-8', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
  title(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;') ClassDojo Email Template

  body(bgcolor='#faf9f9', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; width: 100%;')
    // HEADER 
    table.head-wrap(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;')
      tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
        td.header.container(style='margin: 0 auto; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; display: block; max-width: 600px; clear: both;')
          .content(style='margin: 0 auto; padding: 15px; font-family: "Helvetica Neue", arial, sans-serif; max-width: 520px; display: block;')
            table(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;')
              tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                td(align='center', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                  img(src='http://c.classdojo.com/img/email/trigger-email-logo.png', width='300', alt='ClassDojo', style='margin: 0 auto; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; max-width: 100%; display: block;')
    // End HEADER 
    // BODY 
    table.body-wrap(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;')
      tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
        td(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
        td.container(bgcolor='#faf9f9', style='margin: 0 auto; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; display: block; max-width: 520px; clear: both;')
          .content.paper(style='margin: 0 auto; padding: 40px; font-family: "Helvetica Neue", arial, sans-serif; max-width: 520px; display: block; background-color: #ffffff; -webkit-box-shadow: 0px 0px 5px 2px #e0e0e0; box-shadow: 0px 0px 5px 2px #e0e0e0;')
            table.body-wrap.clear(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; display: block; clear: both; width: 100%;')
              tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                td(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                  h2(style='margin: 0; padding: 0; font-family: Georgia, "Lucida Grande", serif; font-weight: 200; text-align: center; line-height: 1.1; margin-bottom: 15px; color: #222; font-size: 37px;') Welcome, Elijah Baily
                  p.lead(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 17px; line-height: 1.6;')
                    | You're one small step away from being able to use ClassDojo to build positive behavior and save hours of instructional time this year!
                  p.lead(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 17px; line-height: 1.6;')
                    a(href='', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; color: #00b4ff; font-weight: bold; text-decoration: underline;') Add your students
                    | today and be ready for next week!

            // Left buffer, ensures button centering in nice clients 
            .buffer(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; width: 110px; height: 1px; display: table-cell; float: left;')  
            .buffer-container(style='margin: 30px 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; width: 300px; display: table-cell; float: left;')
              table.body-wrap(border='0', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;')
                tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                  // Left button cap 
                  td.btn-left(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; background-repeat: no-repeat; width: 5px; height: 64px; background-image: url(http://c.classdojo.com/img/email/btn-bg-left.gif);')
                  // Fluid, stretching center button section 
                  td.btn-center(width='260px', bgcolor='#FEA302', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; font-size: 28px; font-weight: bold; text-shadow: 0px -1px 2px #999999; color: white; vertical-align: middle; text-align: center; height: 64px; width: 260px; background-color: #FEA302; background-image: url(http://c.classdojo.com/img/email/btn-bg-mid.gif); background-repeat: repeat-x; border: 0;')
                    a.call-to-action(href='/', style='margin: 0; padding: 15px 0; font-family: "Helvetica Neue", arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none; display: block; width: 100%; height: 34px;') Add your students
                  // Right button cap 
                  td.btn-right(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; background-repeat: no-repeat; width: 5px; height: 64px; background-image: url(http://c.classdojo.com/img/email/btn-bg-right.gif);')
            // Right buffer, ensures button centering in nice clients 
            .buffer(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; width: 110px; height: 1px; display: table-cell; float: left;')  
            br.clear(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; display: block; clear: both;')
            table.body-wrap.clear(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; display: block; clear: both; width: 100%;')
              tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                td(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                  // <h3>Title Ipsum <small>This is a note.</small></h3> 
                  p(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;')
                    | Want us to upload your students for you? Just reply to this email with your class list and we'll get you all set up :)
                  p(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;')
                    img(src='http://c.classdojo.com/img/email/upload.png', width='100%', style='margin: 0 auto; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; max-width: 100%; display: block;')
                  p(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;')
                    | Again, welcome! And please let us know if there's ever anything we can do for you.
                  p(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;')
                  | Cheers,
                  br(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                  | The ClassDojo team
              tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                td(align='center', style='color: #db1259; margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;', colspan='3')
                  | ♥
        td(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
    // End BODY 
    // FOOTER 
    table.footer-wrap(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%; clear: both;')
      tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
        td.container(colspan='3', style='margin: 0 auto; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; display: block; max-width: 600px; clear: both;')
          // content 
          .content(style='margin: 0 auto; padding: 15px; font-family: "Helvetica Neue", arial, sans-serif; max-width: 520px; display: block;')
            table(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;')
              tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                td(align='center', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                  p.footer(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 14px; line-height: 1.6; text-decoration: none; margin-top: 30px;')
                    a(href='#', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;') About ClassDojo
                    span.dot(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; text-align: center; color: #ccc;')   •   
                    a(href='#', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;') Our Mission
                    span.dot(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; text-align: center; color: #ccc;')   •   
                    a(href='#', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;') Support
                    span.dot(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; text-align: center; color: #ccc;')   •   
                    a(href='#', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;') Unsubscribe
              tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                td.signout(align='center', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; text-align: center; font-size: 12px; color: #777;')
                  | Sent with love from ClassDojo HQ at:
                  br(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
                  | 322 Sixth Street • Suite 6 • San Francisco, CA 94103
          // End content 
    // End FOOTER 
