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

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    background-color: #ffffff;
    line-height: 1.5em;
    color: #666666;
    font-size: 13px;
    }
h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #34495e;
}

h2, h3 {
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 600;
    }

h4 {
    margin: 0;
    color: green;
    }

a {
    color: green;
    font-style: normal;
    text-decoration: none;
    }
a:link {
    color: green;
    font-style: normal;
    text-decoration: none;
    }
a:visited {
    color: green;
    text-decoration: underline;
    }
a:hover {
    color: orange;
    font-style: normal;
    text-decoration: underline;
    }
a:active {
    text-decoration:none;
    }

a.link {
    color: green;
    font-style: normal;
    text-decoration: underline;
    }
a:link.link {
    color: green;
    font-style: normal;
    text-decoration: underline;
    }
a:visited.link {
    color: green;
    text-decoration: underline;
    }
a:hover.link {
    color: orange;
    font-style: normal;
    text-decoration: underline;
    }
a:active.link {
    text-decoration:none;
    }

.titleline {
    box-shadow: -3px 3px #ccc;
    }

p {
    margin: 0 0 1em 0;
    line-height: 1.5em;
    }

.cl {
    clear:both;
    }

.what-m {
    margin-top: 0.8em;
    font-size: 1.4em;

    }

.inside {
    margin: 0 1em;
    padding: 0;
    }

.inside_mb1 {
    margin: 0 5px 2em 5px;
    padding: 0;
    }

.ls {
    letter-spacing: 0.2em;

    }

.border {
    border: medium solid #6666cc;
    }

.b {
    font-weight: bold;
    }

.large {
    font-size: larg;
    }

.small {
    font-size: small;
    }

.x-small {
    font-size:  x-small;
    }

.red {
    color: #dc143c;
    background: transparent;
    }

.blue {
    color: #0066cc;
    background: transparent;
    }

.green {
    color: #009900;
    background: transparent;
    }

.u_line {
    text-decoration: underline;
    text-underline-position: below;
    }

.f_right {
    float:right;
    }

.f_left {
    float:left;
    }

.radius {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
    }


.flow-table {
    max-width: 980px;
    margin: 0 auto;
    margin-bottom: 1em;
    margin-top: 1em;
    vertical-align:top;
    }

.flow-td {
    white-space: nowrap;
    }


/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
    padding: 1em;
}

.l-box-lrg {
    padding: 1em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

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


/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
    background: white;
    max-width: 980px;
    margin: 0 auto;
    margin-top: 50px; 
    }

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin: 2em 0 1em;
    }

/* This is a modifier class used when the content-head is inside a ribbon 
.content-head-ribbon {
    color: white;
}*/

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: green;
    }
.content-subhead i {
    margin-right: 7px;
    }

/* This is the class used for the dark-background areas. */
.ribbon {
    background: #aacc11;
    color: #ffffff;
    text-shadow: 1px 1px 1px #567656;
    font-weight: 600;
    }

/*
 * -- MENU STYLES --
 */


.home-menu {
    padding: 0.5em;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu {
    background: #fff;
}
.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: none;
}

.home-menu .pure-menu-heading {
    color: green;
    font-weight: 400;
    font-size: 120%;
}

.home-menu .pure-menu-selected a {
    color: green;
}

.home-menu a {
    color: green;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #e67e22;
}

.footer {
    padding: 10px 0;
    font-size: small;
    text-align: center;
    line-height: 1em;
    background: #aacc11;
    color: #ffffff;
    text-shadow: 1px 1px 1px #567656;
    font-weight: 600;
    }

.pfooter{
    margin: 0;
    padding: 0;
    }


/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }
    /* We want to give the content area some more padding */
    .content {
        padding: 1em;
    }

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: left;
    }
    .home-menu ul {
        float: right;
    }

}

@media print {
    .header { display: none; }
    .dn  { display: none; }
    body { line-height: 1.2; overflow: visible; 
           -webkit-print-color-adjust: exact;}
    h2,h3,h4 { margin: 0.2em 0 0.2em 0; }
    p,ul { margin: 0.2em 0 0.2em 0; line-height: 1.2em; }
    img.sm { width: 200px; height: 150px; }
    .pbb { page-break-before: always; }
    .pba { page-break-after: always; }
.what-m {
    margin-top: 0.4em; font-size: 1.2em; }
.l-box, 
.l-box-lrg { margin: 0; padding: 0.1em; }

.content-wrapper {
    margin-top: 0px; 
    }
.content-head {
    margin: 0.1em 0 0.1em;
    }

}