openfoodnetwork/app/assets/stylesheets/mail/email.css.sass

/* -------------------------------------
 *		GLOBAL
 *-------------------------------------

*
  margin: 0
  padding: 0
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif

img
  max-width: 100%

.collapse
  margin: 0
  padding: 0

body
  -webkit-font-smoothing: antialiased
  -webkit-text-size-adjust: none
  width: 100%!important
  height: 100%

/* -------------------------------------
 *		ELEMENTS
 *-------------------------------------

a
  color: #0096ad

.btn
  text-decoration: none
  color: #FFF
  background-color: #666
  padding: 10px 16px
  font-weight: bold
  margin-right: 10px
  text-align: center
  cursor: pointer
  display: inline-block

p.callout
  padding: 15px
  background-color: #e1f0f5
  margin-bottom: 15px

.callout a
  font-weight: bold
  color: #0096ad

table.social
  background-color: #ebebeb
  &.white-bg
    background-color: white!important
    border: 1px solid  #ebebeb

table.order-summary
  border-collapse: separate
  border-spacing: 0px 10px
  tbody tr td
    padding-left: 5px
    padding-right: 5px
  thead tr th
    background-color: #f2f2f2
    border-bottom: 1px solid black
    padding-left: 5px
    padding-right: 5px
    h4
      margin-top: 15px
  tfoot 
    tr:first-child td
      border-top: 1px solid black
      padding-top: 5px
    tr td
      padding-left: 5px
      padding-right: 5px

.social .soc-btn
  padding: 3px 7px
  font-size: 12px
  margin-bottom: 10px
  text-decoration: none
  color: #FFF
  font-weight: bold
  display: block
  text-align: center

a
  &.fb
    background-color: #3B5998!important
  &.tw
    background-color: #1daced!important
  &.gp
    background-color: #DB4A39!important
  &.li
    background-color: #0073b2!important
  &.ms
    background-color: #000!important

.sidebar .soc-btn
  display: block
  width: 100%

img.float-right
  float: right
  display: block

/* -------------------------------------
 *		HEADER
 *-------------------------------------

table.head-wrap
  width: 100%

.header.container table td
  &.logo
    padding: 15px
  &.label
    padding: 15px
    padding-left: 0px

/* -------------------------------------
 *		BODY
 *-------------------------------------

table
  &.body-wrap
    width: 100%
  &.footer-wrap
    width: 100%
    clear: both!important

/* -------------------------------------
 *		FOOTER
 *-------------------------------------

.footer-wrap .container td.content p
  border-top: 1px solid rgb(215, 215, 215)
  padding-top: 15px
  font-size: 10px
  font-weight: bold

/* -------------------------------------
 *		TYPOGRAPHY
 *-------------------------------------

h1, h2, h3, h4, h5, h6
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
  line-height: 1.1
  margin-bottom: 15px
  color: #000

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small
  font-size: 60%
  color: #6f6f6f
  line-height: 0
  text-transform: none

h1
  font-weight: 200
  font-size: 44px

h2
  font-weight: 200
  font-size: 37px

h3
  font-weight: 500
  font-size: 27px

h4
  font-weight: 500
  font-size: 23px

h5
  font-weight: 900
  font-size: 17px

h6
  font-weight: 900
  font-size: 14px
  text-transform: uppercase
  color: #999

.collapse
  margin: 0!important

p, ul
  margin-bottom: 10px
  font-weight: normal
  font-size: 14px
  line-height: 1.6

p
  &.lead
    font-size: 17px
  &.last
    margin-bottom: 0px

ul
  li
    margin-left: 5px
    list-style-position: inside
  &.sidebar
    background: #ebebeb
    display: block
    list-style-type: none
    li
      display: block
      margin: 0
      a
        text-decoration: none
        color: #666
        padding: 10px 16px
        /* 	font-weight:bold;
        margin-right: 10px
        /* 	text-align:center;
        cursor: pointer
        border-bottom: 1px solid #777777
        border-top: 1px solid #FFFFFF
        display: block
        margin: 0
        &.last
          border-bottom-width: 0px
        h1, h2, h3, h4, h5, h6, p
          margin-bottom: 0!important

/* -------------------------------------
 *		SIDEBAR
 *-------------------------------------

/* ---------------------------------------------------
 *		RESPONSIVENESS
 *		Nuke it from orbit. It's the only way to be sure.
 *------------------------------------------------------

/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something

.container
  display: block!important
  max-width: 600px!important
  margin: 0 auto!important
  /* makes it centered
  clear: both!important

/* This should also be a block element, so that it will fill 100% of the .container

.content
  padding: 15px
  max-width: 600px
  margin: 0 auto
  display: block
  table
    width: 100%

/* Let's make sure tables in the content area are 100% wide

/* Odds and ends

.column
  width: 300px
  float: left
  tr td
    padding: 15px

.pad
  tr td
    padding: 15px

.column-wrap
  padding: 0!important
  margin: 0 auto
  max-width: 600px!important

.column table
  width: 100%

.social .column
  width: 280px
  min-width: 279px
  float: left

/* Be sure to place a .clear element after each set of columns, just to be safe

.clear
  display: block
  clear: both

/* -------------------------------------------
 *		PHONE
 *		For clients that support media queries.
 *		Nothing fancy.
 *--------------------------------------------
@media only screen and (max-width: 600px)
  a[class="btn"]
    display: block!important
    margin-bottom: 10px!important
    background-image: none!important
    margin-right: 0!important
  div[class="column"]
    width: auto!important
    float: none!important
  table.social div[class="column"]
    width: auto!important
  img.float-right
    float: none!important