/* Typography CSS Definitions:
======================================================================================================================== */

/* Import Fonts:
======================================================================================================================== */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);

/* Base Styles:
======================================================================================================================== */

.typography
{
   color: #000;

   font: 16px/1.8 'Open Sans', Arial, Helvetica, sans-serif;
}

.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6
{
   font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.typography pre
{
   font-family: 'Droid Sans Mono', Courier, monospace;
}

/* Link Styles:
======================================================================================================================== */

.typography a
{
   color: #139FDA;

   text-decoration: underline;
}

.typography a:hover
{
   text-decoration: underline;
}

.typography a.more,
div.utility span.item a
{
   font-size: 14px;
   font-weight: 600;

   padding: 4px 14px;

   color: #FFF !important;

   display: inline-block;

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

   letter-spacing: 1px;

   text-transform: uppercase;
}

.typography a.more:hover,
div.utility span.item a:hover
{
   text-decoration: none !important;
}

/* Formatting Styles:
======================================================================================================================== */

.typography i, .typography em
{
   font-style: italic;
}

.typography b, .typography strong
{
   font-weight: bold;
}

/* Alignment Styles:
======================================================================================================================== */

.typography .left
{
   text-align: left;
}

.typography .center
{
   text-align: center;
}

.typography .right
{
   text-align: right;
}

/* Horizontal Rule Styles:
======================================================================================================================== */

.typography hr
{
   clear: both;

   height: 0;

   border-color: #DDD;
   border-style: solid;
   border-width: 1px 0 0;

   margin: 10px 0 30px;

   -moz-border-top-colors: none;
   -moz-border-left-colors: none;
   -moz-border-right-colors: none;
   -moz-border-bottom-colors: none;
}

/* Heading Styles:
======================================================================================================================== */

.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6
{
   color: #000;

   font-weight: 400;

   margin-bottom: 20px;
}

.typography h1
{
   font-size: 34px;
   line-height: 1.6;
   margin-bottom: 12px;
}

.typography h2
{
   font-size: 28px;
   line-height: 1.6;
   margin-bottom: 10px;
}

.typography h3
{
   font-size: 24px;
   line-height: 1.6;
   margin-bottom: 8px; 
}

.typography h4
{
   font-size: 20px;
   line-height: 1.6;
   margin-bottom: 6px;
}

.typography h5
{
   font-size: 18px;
   line-height: 1.6;
   margin-bottom: 6px;
}

.typography h6
{
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: 6px;
}

/* Paragraph Styles:
======================================================================================================================== */

.typography p
{
   margin-bottom: 1em;
}

/* Blockquote Styles:
======================================================================================================================== */

.typography blockquote
{
   clear: both;

   margin: 0 10px 20px;

   padding: 0 10px;

   border-left: 1px solid #DDD;
}

/* List Styles:
======================================================================================================================== */

.typography ul, 
.typography ol,
.typography dl
{
   margin: 0 0 20px 25px;

   padding: 0 0 0 15px;
}

.typography li
{
   line-height: 26px;

   margin-bottom: 0;
}

.typography ul li
{
   list-style-type: disc;
}

/* Preformatted Text Styles:
======================================================================================================================== */

.typography pre
{
   clear: both;

   margin: 0 0 20px;

   padding: 5px 10px;

   background: #F8F8F8;

   border: 1px solid #DDD;
}

/* Address Styles:
======================================================================================================================== */

.typography address
{
   display: block;

   margin: 0 0 20px;

   font-style: italic;
}

/* Table Styles:
======================================================================================================================== */

.typography table
{
   text-align: left;

   margin: 0 0 20px;

   border: 1px solid #CCC;

   border-spacing: 0;
   border-collapse: collapse;
}

.typography thead td, .typography table tr.even, .typography table tr:nth-child(even)
{
   background-color: #F8F8F8;
}

.typography table td,
.typography table th
{
   padding: 2px 5px;

   border: 1px solid #CCC;

   vertical-align: top;
}

.typography table th
{
   font-weight: bold;

   background-color: #EEE;
}

.typography table caption
{
   color: #888;

   font-style: italic;

   margin-bottom: 5px;
}

/* Abbreviation Styles:
======================================================================================================================== */

.typography abbr[title]
{
   cursor: help;

   border-bottom: 1px dotted #444;
}

/* Image Styles:
======================================================================================================================== */

.typography img
{
   border: none;

   height: auto;

   max-width: 100%;

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.typography img.left
{
   float: left;

   max-width: 50%;

   margin: 5px 20px 10px 0;
}

.typography img.leftAlone
{
   float: left;

   clear: both;

   margin-right: 100%;
   margin-bottom: 20px;
}

.typography img.right
{
   float: right;

   max-width: 50%;

   margin: 5px 0 10px 20px;
}

.typography img.center
{
   float: none;

   clear: both;

   display: block;

   max-width: 100%;

   margin-left: auto;
   margin-right: auto;
}

/*
.typography img.left, .typography img.leftAlone, .typography img.right, .typography img.center
{
   padding: 8px;

   border: 1px solid #E4E4E4;
}
*/

.typography .captionImage
{
   max-width: 100%;

   margin-top: 5px;
}

.typography .captionImage img
{
   margin: 0;

   display: block;
}

.typography .captionImage.left
{
   float: left;

   margin: 5px 30px 20px 0;      
}

.typography .captionImage.right
{
   float: right;
 
   margin: 5px 0 20px 30px;
}

.typography .captionImage.left[style],
.typography .captionImage.right[style]
{
   max-width: 50%;
}

.typography .captionImage.left img,
.typography .captionImage.right img
{
   float: none;

   width: 100%;

   max-width: none;
}

.typography .captionImage.left img
{
   margin-right: -10px;
}

.typography .captionImage.right img
{
   margin-left: -10px;
}

.typography .captionImage.right p
{
   text-align: left;

   margin-left: -10px;
}

.typography .captionImage.leftAlone
{
   float: none;

   margin: 10px 20px 10px 0px;
}

.typography .captionImage.leftAlone img.leftAlone
{
   float: none;
}

.typography .captionImage.center
{
   margin: 10px auto;
}

.typography .captionImage p
{
   clear: both;

   color: #888;

   margin: 5px 0;

   font-style: italic;
}

/* Video Styles:
======================================================================================================================== */

.typography .videoContainer
{
   height: 0;

   display: block;

   overflow: hidden;

   position: relative;

   padding-bottom: 56.25%;
}

.typography .videoContainer iframe,
.typography .videoContainer object,
.typography .videoContainer embed
{
   top: 0;
   left: 0;

   width: 100%;
   height: 100%;

   position: absolute;
}