/* --------------------------------------------------------------

   typography.css
   * Sets up some sensible default typography.

-------------------------------------------------------------- */

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size:100.01%; }
body {
  font-size: 14px;
  line-height: 18px;
  color: #685c53;
  font-family: Arial, Helvetica, sans-serif;
}


/* Headings
-------------------------------------------------------------- */

.container h1,
.container h2,
.container h3,
.container h4,
#tinymce h1,
#tinymce h2,
#tinymce h3,
#tinymce h4{ font-family: "Open Sans", sans-serif; font-weight: normal; color: #6ba13c; }

.container h1, #tinymce h1 { font-size: 28px; margin-bottom: 14px; line-height: 32px; }
.container h2, #tinymce h2 { font-size: 18px; color: #c67e3e; margin-bottom: 5px; }
#tinymce h3, .container h3 { font-size: 18px; margin-bottom: 3px; }
.container h4, #tinymce h4 { font-size: 16px; color: #c67e3e; margin-bottom: 0; }

.container h1 img, .container h2 img, .container h3 img,
.container h4 img, .container h5 img, .container h6 img,
#tinymce h1 img, #tinymce h2 img, #tinymce h3 img,
#tinymce h4 img, #tinymce h5 img, #tinymce h6 img{
  margin: 0;
}

/* Text elements
-------------------------------------------------------------- */

.container p, #tinymce p           { 
    margin: 0 0 0.75em; 
    line-height: 21px;
}

/* 
	These can be used to pull an image at the start of a paragraph, so 
	that the text flows around it (usage: <p><img class="left">Text</p>) 
 */
.left  			{ float: left !important; }
.container p .left,
#tinymce p .left{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.right 			{ float: right !important; }
.container p .right,
#tinymce p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; }


.container a:hover,
.container a:active,
#tinymce a:hover,
#tinymce a:active{ color: #6ba13c !important;}
.container a, .container a:visited,
#tinymce a, #tinymce a:visited{ color: #c67e3e; text-decoration: none; }

.container blockquote,#tinymce blockquote   { margin: 1.5em; font-style: italic; }
.container strong,.container dfn,
#tinymce strong,#tinymce dfn{ font-weight: bold; }
.container em,.container dfn,
#tinymce em,#tinymce dfn{ font-style: italic; }
sup, sub    { line-height: 0; }

.container address,
#tinymce address{ margin: 0 0 1.5em; font-style: italic; }
.container del,
#tinymce del{ color:#666; }

.container pre,
#tinymce pre{ margin: 1.5em 0; white-space: pre; }
.container pre,.container code,.container tt,
#tinymce pre,#tinymce code,#tinymce tt{ font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

.container hr, #tinymce hr {
     border-bottom: 3px solid #685c53;
     margin: 10px 0 25px 0;
}
/* Lists
-------------------------------------------------------------- */

.container li ul,
.container li ol,
#tinymce li ul,
#tinymce li ol { margin: 0; }
.container ul,.container  ol,
#tinymce ul, ol{ margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

.container ul,
#tinymce ul{ list-style-type: none; padding-left: 0}
.container ul li,
#tinymce ul li{
     background: url('/themes/weight_and_wellness/images/brown_bullet.png') 0 9px no-repeat;
     padding-left: 10px;
     line-height: 21px;
     margin-bottom: 5px;
}
.container ol,#tinymce ol          { list-style-type: decimal; }

.container dl,#tinymce dl          { margin: 0 0 1.5em 0; }
.container dl dt,#tinymce dl dt       { font-weight: bold; }
.container dd,#tinymce dd           { margin-left: 1.5em;}

.abc-list,
.container .abc-list,
#tinymce .abc-list{ list-style-type: lower-alpha !important}

.orange {
     color: #c67e3e !important;
}
.green {
     color: #6bA13C !important;
}
.blue {
     color: #447485 !important;
}
.brown {
     color: #685C53 !important;
}

.container .orange li,
#tinymce .orange li,
.container li.orange,
#tinymce li.orange,
.container .bottom-columns li {
     background: url('/themes/weight_and_wellness/images/orange_bullet.png') 0 9px no-repeat !important;
}

.container .blue li,
#tinymce .blue li,
.container li.blue,
#tinymce li.blue {
     background: url('/themes/weight_and_wellness/images/blue_bullet.png') 0 9px no-repeat !important;
}

.container .green li,
#tinymce .green li,
.container li.green,
#tinymce li.green,
.container .bottom-columns li:hover,
.container .bottom-columns li:active {
     background: url('/themes/weight_and_wellness/images/green_bullet.png') 0 9px no-repeat !important;
}

.carat,
.carat:visited{
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    line-height: 16px; 
    display: inline;
    text-transform: uppercase;
     color: #c67e3e;
     background: url('/themes/weight_and_wellness/images/orange_carat.png') 100% 50% no-repeat;
     padding-right: 8px;
}
.carat:hover,
.carat:active {
     color: #685C53 !important;
     background: url('/themes/weight_and_wellness/images/brown_carat.png') 100% 50% no-repeat;
}
.footnote,
.container p.footnote,
#tinymce p.footnote{
     font-family: Arail, Helvetica, sans-serif;
     font-size: 11px;
     line-height: 15px !important;
     display: inline-block;
}