/* Stylesheet for v5 of Boston ID */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

* {box-sizing: border-box;}

body {
    color:#333;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-weight: 300;
    line-height: 140%;
    font-size: 0.875em;
    background: #f0f1f3;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

img {max-width: 100%;}

.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

#page-header h1 {
    text-indent: -9999px;
    display: inline-block;
    margin-bottom: 0;
}

.mob-menu {
    display: block;
    float: right;
    width: 50px;
    height: 50px;
    margin-right: -1em;
}

h1 {
    font-size: 3em;
    margin-bottom: 1em;
    line-height: 120%;
}

h2 {
    font-size: 2em;
    margin-bottom: 1em;
    line-height: 120%;
}

h3, h4 {
    font-size: 2em;
    margin-bottom: 1em;
    line-height: 120%;
}

p {
    margin-bottom: 1em;
    line-height: 160%;
    font-size: 1.125em;
}

blockquote {
    margin-left: 1em;
    border-left: solid 0.25em #65ac0e;
    padding-left: 1em;
    margin-bottom: 1em;
    font-size: 2em;
    font-style: italic;
    line-height: 120%;
}

a {
    color: #0e65ac;
    text-decoration: none;
}

.big-text {
    font-size: 2.5em;
}

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

.no-margin-bottom {margin-bottom: 0;}

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

.clearfix {
    clear:both;
}

.inner-wrap {
    clear: both;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em;
}

.whitebg {
    background: #ffffff;
}

.darkbg {
    background: #333333;
    color:#fff;
}

.darkbg a {
    color: #65ac0e;
    text-decoration: none;
}

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

.lightgreybg {
    background: #eee;
}


img#top-logo {
    width: 165px;
    float: left;
}

.hero {
    border-top: solid 5px #ddd;
    border-bottom: solid 5px #ddd;
    background: #65ac0e;
    color: #fff;
}

nav#bottom-nav {
    padding: 1em;
    background: #000000;
    min-height: 640px;
}

nav#bottom-nav p a {
    color: #ffffff;
    text-decoration: none;
}

nav#bottom-nav p a:hover {
    color: #65ac0e;
}

nav#bottom-nav li {
    border-bottom: solid 1px #333333;
}

nav#bottom-nav li a {
    display: block;
    color:#ffffff;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.5em 1em;
}

nav#bottom-nav li a:hover {
    background:#65ac0e;
}

.icon-left {
    width: 60px;
    float: left;
}

.img60w {
    width: 60px;
    float: left;
    margin: 0 1em 1em 0;
}

.float-left {
    float: left;
    margin-right: 1em;
}

.outline {
    padding: 0.25em;
    border: solid 1px #dddddd;
    background: #ffffff;
}



a.button {
    background: #000000;
    color: #ffffff;
    text-decoration: none;
    display: block;
    width: 95%;
    margin: 0 auto 2em;
    padding: 1em 4em;
    border-radius: 0.5em;
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
}

a.button:hover {
    background: #65ac0e;
}

#page-footer {
    margin: 2em;
    text-align: center;
    font-size: 0.75em;
}

#social {
    text-align: right;
}

#social img {
    width: 30px;
    margin-right: 2em;
}

form {margin-bottom: 2em;}

label {
    display: block;
}

input, textarea {
    background: #eeeeee;
    border: solid 1px #cccccc;
    padding: 0.5em 1em;
    font-size: 1em;
    width: 15em;
}

input[type="radio"] {width: 1em;}
input#code {width: 5em;}
input[type="submit"] {
    background: #65ac0e;
    color: #ffffff;
}

input[type="submit"]:hover {
    background: #000000;
    cursor: pointer;
}

textarea {height: 10em;}

input:focus, textarea:focus {background: #ffffff;}

.divider {
    margin: 40px 0;
    border-top:solid 1px #dddddd;
}


/* ////////////////////// Start of media queries //////////////////////////// */
@media screen and (min-width: 800px) {

.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

nav#top-nav {
    float:right;
}

nav#top-nav li {
    display: inline-block;
    margin-left: 2em;
}

nav#top-nav li a {
    color:#333;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
}

nav#top-nav li a:hover {
    color:#65ac0e;
}

.col4 {
    width: 33.333%;
    padding-right: 5%;
    float: left;
}

.col4.last, .col8.last {padding-right: 0;}

.col6 {
    width: 50%;
    padding-right: 10%;
    float: left;
}

.col6.last {padding-right: 0;}

.col8 {
    width: 66.666%;
    padding-right: 5%;
    float: left;
}

.hero .big-text {
    font-size: 3.75em;
    font-weight: bold;
    text-shadow: 5px 5px 0px #000;
    text-transform: uppercase;
}

.front .hero {
    background: #65ac0e;
    min-height: 500px;
    padding-top: 70px;
}

.front .hero h2 {
    font-size: 4em;
    font-weight: bold;
    text-shadow: 5px 5px 0px #333;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.front .hero p.big-text {
    font-size: 3.5em;
    margin-left: 10px;
    text-shadow: none;
    font-weight: 300;
    text-transform: none;
}

blockquote.big-text {margin-bottom: 3em;}

.highlight {background: #65ac0e; color: #ffffff; padding: 0.25em;}

input, textarea {width: 25em;}

a.button {width: 30%;}

}

@media screen and (min-width: 1400px) {

.hero {margin-bottom: 4em;}

a.button {margin: 4em auto 6em;}

.darkbg {padding: 4em;}

}