/* =============================================================================
 *
 * Theme Name:     Bays Foundation Theme
 * Description:    WordPress theme for the Bays Foundation website — Sidebar Removed & Centered Layout.
 * Author:         Reed Hewitt Media
 * Author URI:     http://reedhewitt.com
 * Template:       rhm-framework
 * Version:        1.1
 *
   ========================================================================== */

/* =============================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-family: 'Colaborate';
    src: url('fonts/ColabLig-webfont.eot');
    src: url('fonts/ColabLig-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ColabLig-webfont.woff') format('woff'),
         url('fonts/ColabLig-webfont.ttf') format('truetype'),
         url('fonts/ColabLig-webfont.svg#ColaborateLightRegular') format('svg');
    font-weight: 200;
}

@font-face {
    font-family: 'Colaborate';
    src: url('fonts/ColabReg-webfont.eot');
    src: url('fonts/ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ColabReg-webfont.woff') format('woff'),
         url('fonts/ColabReg-webfont.ttf') format('truetype'),
         url('fonts/ColabReg-webfont.svg#ColaborateRegular') format('svg');
    font-weight: 400;
}

@font-face {
    font-family: 'Colaborate';
    src: url('fonts/ColabMed-webfont.eot');
    src: url('fonts/ColabMed-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ColabMed-webfont.woff') format('woff'),
         url('fonts/ColabMed-webfont.ttf') format('truetype'),
         url('fonts/ColabMed-webfont.svg#ColaborateMediumRegular') format('svg');
    font-weight: 700;
}

/* =============================================================================
   Base
   ========================================================================== */

html {
    height: 100%;
    font-family: 'Colaborate', sans-serif;
    color: #333333;
    background: #003866;
}

body {
    height: 100%;
    background: none;
}

/* =============================================================================
   Links
   ========================================================================== */

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

a:hover {
    color: #0a528e;
    text-decoration: underline;
}

/* =============================================================================
   Typography
   ========================================================================== */

p { margin: 0 0 1em; line-height: 1.6; }
strong, b { font-weight: 700; }
hr {
    margin: 30px 0;
    border: none;
    border-top: 1px #cccccc solid;
}

/* =============================================================================
   Forms & Buttons
   ========================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea {
    padding: 6px;
    border: 1px #0e6dbd solid;
    border-radius: 4px;
    background: #ffffff;
}

.button,
button,
input[type="submit"] {
    display: inline-block;
    padding: 6px 12px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    border: 1px #ffffff solid;
    background: linear-gradient(to bottom, #0e6dbd 0%, #0a528e 100%);
    transition: background .3s ease-in-out;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
    background: linear-gradient(to bottom, #1a7ad8 0%, #09497c 100%);
}

/* =============================================================================
   Header
   ========================================================================== */

#page-header > .container {
    height: auto;
    padding-bottom: 50px;
    background: linear-gradient(to bottom, #f7fbff 0%, #e2f2ff 50%, #6a9fca 100%);
}

#page-header #slogan { display: none; }
#page-header #slogan-mobile { display: block; margin: 10px auto; max-width: 75%; }
#page-header #logo { display: none; }
#page-header #logo-mobile { display: block; }
#page-header #logo-mobile img { margin: 20px auto; max-width: 50%; }

#page-header #social-icons {
    margin: 10px auto;
    text-align: center;
}

#page-header #social-icons a {
    margin-left: 10px;
    opacity: .75;
    transition: opacity .5s ease-in-out;
}

#page-header #social-icons a:hover { opacity: 1; }

#nav-main {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    box-shadow: 0 3px 4px rgba(0,0,0,.5);
    background: linear-gradient(to bottom, #0e6dbd 0%, #0a528e 100%);
    z-index: 150;
}

#nav-main a {
    color: #ffffff;
    text-shadow: -1px -1px 0 rgba(0,0,0,.5);
    padding: 17px 15px;
}

/* =============================================================================
   Content (Centered, Full-Width)
   ========================================================================== */

#content-wrapper > .container {
    margin-top: -20px;
    padding: 40px 0;
    box-shadow: 0 10px 20px #000000;
    background: url('img/bg-light-noise.png');
}

#content {
    font-weight: 300;
    width: 100%;
    max-width: 980px;   /* Centers and limits text width for readability */
    margin: 0 auto;
    float: none;
    padding: 0 40px;
    text-align: left;
}

#content > .container { padding: 0; }

#content h1 {
    font-size: 180%;
    margin-bottom: 20px;
    text-align: center;
    color: #0a528e;
}

#content h2, #content h3 {
    color: #0e6dbd;
    margin-top: 20px;
}

/* =============================================================================
   Footer
   ========================================================================== */

#page-footer > .container {
    padding-top: 25px;
    text-align: center;
    color: #5295cc;
    background: none;
}

#page-footer > .container a {
    color: #5295cc;
    text-decoration: none;
}

#page-footer > .container a:hover {
    color: #ffffff;
}

/* =============================================================================
   Responsive
   ========================================================================== */

@media only screen and (min-width: 768px) {
    html { background: #003866 url('img/bg-html.png') repeat-x center top; }
    body { background: url('img/bg-body.jpg') no-repeat center top; }

    #page-header > .container { height: 210px; padding-bottom: 0; background: none; }
    #page-header #slogan { display: block; position: absolute; top: 50px; left: 290px; }
    #page-header #logo { display: block; position: absolute; bottom: 50px; width: 300px; height: 140px; }
    #page-header #logo img { width: 300px; height: 140px; }

    #page-header #social-icons { position: absolute; top: 25px; right: 0; }
    #content { max-width: 960px; }
}

@media only screen and (min-width: 1024px) {
    #page-header > .container,
    #content-wrapper > .container,
    #page-footer > .container {
        width: 980px;
    }
}