/**
 * Micro-clearfix
 */

.group:after,
.media:after ,
.nav:after {
    content: " ";
    display: table;
    clear: both;
}

/**
 * IE box model > W3C box model
 */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    *behavior: url("../js/boxsizing.htc"); /* IE7 polyfill */
}

/**
 * 1. Remove any margins/padding that might affect the grid system
 * 2. Apply a negative left margin to negate the columns' gutters
 * 3. Allow the grid system to be used with list elements
 * 4. Remove white space caused by 'inline-block' elements
 */

.grid {
    margin: 0;            /* 1 */
    padding: 0;           /* 1 */
    margin-left: -24px;   /* 2 */
    list-style: none;     /* 3 */
    font-size: 0;         /* 4 */
}

/**
 * Remove the left margin when '.grid' has '.grid' children
 */

.grid > .grid {
    margin-left: 0;
}

/**
 * 1. Cause columns to stack side-by-side
 * 2. Add a fixed width gutter for spacing
 * 3. Full width columns unless told otherwise
 * 4. Align columns with the tops of each other
 * 5. Reinstate removed white space
 */

.grid__item {
    display: inline-block;              /* 1 */
    padding-left: 24px;                 /* 2 */
    width: 100%;                        /* 3 */
    vertical-align: top;                /* 4 */
    font-size: 14px;                    /* 5 */
    *zoom: 1;
    *display: inline;
}

/**
 * Reversed grid
 */

.grid--rev {
    direction: rtl;
    text-align: left;
}

.grid--rev > .grid__item {
    direction: ltr;
    text-align: left;
}

/**
 * 'Gutterless' grid
 */

.grid--full {
    margin-left: 0;
}

.grid--full > .grid__item {
    padding-left: 0;
}

/**
 * Narrow gutter grid
 */

.grid--narrow {
    margin-left: -12px;
}

.grid--narrow > .grid__item {
    padding-left: 12px;
}

/**
 * Wide gutter grid
 */

.grid--wide {
    margin-left: -48px;
}

.grid--wide > .grid__item {
    padding-left: 48px;
}

/**
 * An assortment of size classes in a human-readable format. 
 */

.one-twelfth {
	width: 8.333333%;
}

.one-tenth {
	width: 10%;
}

.one-eighth {
	width: 12.5%;
}

.one-sixth,
.two-twelfths {
	width: 16.666667%;
}

.one-fifth,
.two-tenths {
	width: 20%;
}

.one-fourth,
.two-eighths,
.three-twelfths {
	width: 25%;
}

.three-tenths {
	width: 30%;
}

.one-third,
.two-sixths,
.four-twelfths {
	width: 33.333333%;
}

.three-eighths {
	width: 37.5%;
}

.two-fifths,
.four-tenths {
	width: 40%;
}

.five-twelfths {
	width: 41.666667%;
}

.one-half,
.two-fourths,
.three-sixths,
.four-eighths,
.five-tenths,
.six-twelfths {
	width: 50%;
}

.seven-twelfths {
	width: 58.333333%;
}

.three-fifths,
.six-tenths {
	width: 60%;
}

.five-eighths {
	width: 62.5%;
}

.two-thirds,
.four-sixths,
.eight-twelfths {
	width: 66.666667%;
}

.seven-tenths {
	width: 70%;
}

.three-fourths,
.six-eighths,
.nine-twelfths {
	width: 75%;
}

.four-fifths,
.eight-tenths {
	width: 80%;
}

.five-sixths,
.ten-twelfths {
	width: 83.333333%;
}

.seven-eighths {
	width: 87.5%;
}

.nine-tenths {
	width: 90%;
}

.eleven-twelfths {
	width: 91.666667%;
}

.one-whole {
	width: 100%;
}

/**
 * Fonts and Typesetting
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 24px;
}

 /**
 * When each heading element is defined, a corresponding class is 
 * defined to go along with it (e.g. h1, .alpha {...}). These classes 
 * create a "double-stranded hierarchy" where a 'h3' can look like a 
 * 'h1' simply by applying the '.alpha' class to it.
 */
 
h1,
.alpha {
    font-size: 2.25rem;      /* 36px */
    font-size: 36px;
    line-height: 1.33333333;
}

h2,
.beta {
    font-size: 1.5rem;       /* 24px */
    font-size: 24px;
    line-height: 1.0;
}

h3,
.gamma {
    font-size: 1.3125rem;    /* 21px */
    font-size: 21px;
    line-height: 1.14285714;
}

h4,
.delta {
    font-size: 1.125rem;     /* 18px */
    font-size: 18px;
    line-height: 1.33333333;
}

h5,
.epsilon {
    font-size: 1.0rem;       /* 16px */
    font-size: 16px;
    line-height: 1.5;
}

h6,
.zeta {
    font-size: 0.875rem;     /* 14px */
    font-size: 14px;
    line-height: 1.71428571;
}

small,
.centi {
    font-size: 0.75rem;      /* 12px */
    font-size: 12px;
    line-height: 2.0;
}

.milli {
    font-size: 0.625rem;     /* 10px */
    font-size: 10px;
    line-height: 2.4;
}

/**
 * Utility classes
 */

.group:after {
    content: " ";
    display: table;
    clear: both;
}

.float--right {
    float: right;
}

.float--left {
    float: left;
}

.img--center {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

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

.text--caps {
    text-transform: uppercase;
}

.wrapper {
    margin-right: auto;
    margin-left: auto;
    padding-right: 24px;
    padding-left: 24px;
}

.wrapper--full {
    padding: 0;
}

b {
    font-weight: 700;
}

i {
    font-style: italic;
}

/**
 * Site Specific
 */

.page {
    width: 800px;
}

.backdrop {
    background-image: url(../img/bg.jpg);
}

.site-title,
.list-title,
.callout__link,
.callout--order-phone span {
    font-weight: 700;
}

.site-title {
    background-color: rgba(255, 255, 255, 0.8);
    color: #00698C;
    font-weight: 700;
    padding: 6px 12px;

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);       /* IE6 and 7 :P */
    zoom: 1;
}

.callout {
    margin-bottom: 48px;
}

.callout__link {
    color: #378332;
}

.callout__link:hover {
    color: #2b6727;
}

.callout--order-online {
    margin-top: 72px;
}

.callout--order-phone span {
    color: #00698C;
}
/*
.callout--download {
    margin-bottom: 112px;
}
*/
.list-title {
    background-color: rgba(0, 0, 0, 0.4);
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
    color: #F0F0F0;
    padding: 12px;

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);       /* IE6 and 7 :P */
    zoom: 1;
}

.guide-list {
    padding-right: 48px;
    padding-left: 48px;
}

.guide-list__item {
    background: url(../img/bullet.png) no-repeat left center;
    margin-bottom: 24px;
    padding-right: 18px;
    padding-left: 18px;
    float: left;
}

.footer {
    border-top: 8px solid #00698C;
    padding-top: 12px;
    text-align: center;
}