/* SPACING - Margins, borders and padding helper classes
   ------------------------------------------------------------------ */
/* add spacing using dimensions from vertical rhythm and grid 
   1em = 12px but rhythm is based on line-height which is 1.5 or 12px x 1.5 = 18px
   Margins, paddings, and possibly borders should be in multiples or fractions of 18px */

/* margins
   ---------------------------------------------------- */
   .margin          { margin:        18px; margin:        1rem; }
   .margin-t        { margin-top:    18px; margin-top:    1rem; }
   .margin-r        { margin-right:  18px; margin-right:  1rem; }
   .margin-b        { margin-bottom: 18px; margin-bottom: 1rem; }
   .margin-l        { margin-left:   18px; margin-left:   1rem; }

   .margin-small    { margin:        9px;  margin:        .75rem; } /* .5 x line-height = 12px(base font-size) x .75 = 9px = .5 x 18px (base line-height) */
   .margin-t-small  { margin-top:    9px;  margin-top:    .75rem; }
   .margin-r-small  { margin-right:  9px;  margin-right:  .75rem; }
   .margin-b-small  { margin-bottom: 9px;  margin-bottom: .75rem; }
   .margin-l-small  { margin-left:   9px;  margin-left:   .75rem; }

   .margin-medium   { margin:        27px; margin:        2.25rem; } /* 1.5 x line-height = 1.5 x 18px = 12px x 2.25 = 27px */
   .margin-t-medium { margin-top:    27px; margin-top:    2.25rem; }
   .margin-r-medium { margin-right:  27px; margin-right:  2.25rem; }
   .margin-b-medium { margin-bottom: 27px; margin-bottom: 2.25rem; }
   .margin-l-medium { margin-left:   27px; margin-left:   2.25rem; }

   .margin-large    { margin:        36px; margin:        3rem; } /* 2 x line-height = 3rem = 2 x 18px = 3 x 12px */
   .margin-t-large  { margin-top:    36px; margin-top:    3rem; }
   .margin-r-large  { margin-right:  36px; margin-right:  3rem; }
   .margin-b-large  { margin-bottom: 36px; margin-bottom: 3rem; }
   .margin-l-large  { margin-left:   36px; margin-left:   3rem; }

   .no-margin       { margin: 0        !important; }
   .no-margin-t     { margin-top: 0    !important; }
   .no-margin-r     { margin-right: 0  !important; }
   .no-margin-b     { margin-bottom: 0 !important; }
   .no-margin-l     { margin-left: 0   !important; }

/* borders
   ---------------------------------------------------- */
   .no-border    { border: 0        !important; }

/* padding
   ---------------------------------------------------- */
   .pad      { padding:        18px; padding:        1rem; }
   .pad-t    { padding-top:    18px; padding-top:    1rem; }
   .pad-r    { padding-right:  18px; padding-right:  1rem; }
   .pad-b    { padding-bottom: 18px; padding-bottom: 1rem; }
   .pad-l    { padding-left:   18px; padding-left:   1rem; }

   .pad-xs   { padding:        4px;  padding:        .33rem; } /* .5 x line-height = 12px(base font-size) x .75 = 9px = .5 x 18px (base line-height) */
   .pad-t-xs { padding-top:    4px;  padding-top:    .33rem; }
   .pad-r-xs { padding-right:  4px;  padding-right:  .33rem; }
   .pad-b-xs { padding-bottom: 4px;  padding-bottom: .33rem; }
   .pad-l-xs { padding-left:   4px;  padding-left:   .33rem; }

   .pad-s    { padding:        9px;  padding:        .75rem; } /* .5 x line-height = 12px(base font-size) x .75 = 9px = .5 x 18px (base line-height) */
  X.pad-v-s  { padding-top:    9px;  padding-top:    .75rem; padding-bottom: 9px; padding-bottom: .75rem; } /* don't use relative em unit since it's based on font-size and may result in undesired spacing */
  X.pad-h-s  { padding-left:   9px;  padding-left:   .75rem; padding-right: 9px; padding-right: .75rem; }
   .pad-t-s  { padding-top:    9px;  padding-top:    .75rem; }
   .pad-r-s  { padding-right:  9px;  padding-right:  .75rem; }
   .pad-b-s  { padding-bottom: 9px;  padding-bottom: .75rem; }
   .pad-l-s  { padding-left:   9px;  padding-left:   .75rem; }

   .pad-m    { padding:        27px; padding:        2.25rem; } /* 1.5 x line-height = 1.5 x 18px = 12px x 2.25 = 27px */
   .pad-t-m  { padding-top:    27px; padding-top:    2.25rem; }
   .pad-r-m  { padding-right:  27px; padding-right:  2.25rem; }
   .pad-b-m  { padding-bottom: 27px; padding-bottom: 2.25rem; }
   .pad-l-m  { padding-left:   27px; padding-left:   2.25rem; }

   .pad-l    { padding:        36px; padding:        3rem; } /* 2 x line-height = 3rem = 2 x 18px = 3 x 12px */
   .pad-t-l  { padding-top:    36px; padding-top:    3rem; }
   .pad-r-l  { padding-right:  36px; padding-right:  3rem; }
   .pad-b-l  { padding-bottom: 36px; padding-bottom: 3rem; }
   .pad-l-l  { padding-left:   36px; padding-left:   3rem; }

   .no-pad       { padding:        0   !important; }
   .no-pad-t     { padding-top:    0   !important; }
   .no-pad-r     { padding-right:  0   !important; }
   .no-pad-b     { padding-bottom: 0   !important; }
   .no-pad-l     { padding-left:   0   !important; }

   .no-space     { margin:         0   !important; padding: 0 !important; }