/*
=====================================================================
*   eInfoDev Default Stylesheet
*   url: 
*   author: Timothy Lux
*   author: eInfodev
=====================================================================

TOC:
1. Default
    a. Default
    b. Header
    c. Navigation
    d. Div#primary
    e. Image
    f. Footer
2. @Media (max-width: 480px)
    a. Default
    b. Header
    c. Navigation
3. @Media (min-width: 481px) and (max-width: 768px)
    a. Default
    b. Header
    c. Navigation
4. @Media (min-width: 480px)
    a. Default
    b. Header
    c. Navigation

=====================================================================  */
/* ------------------------------------------------------------------ */
/* 1. Default
 ------------------------------------------------------------------*/
/* ------------------------------------------------------------------ */
/*  a. Default
 ------------------------------------------------------------------*/
body {
    background-color: #303030;//#e2e2e2;
    color: #373737;
    font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ */
/* b. Header
 ------------------------------------------------------------------*/
header {
    margin-bottom: 2em;
}

/* ------------------------------------------------------------------ */
/* c. Navigation
 ------------------------------------------------------------------*/
nav {
    //background: -webkit-linear-gradient(#1982d1, #0e4d7c);
    background: linear-gradient(#1982d1, #0e4d7c);
    -webkit-background:  linear-gradient(#1982d1, #0e4d7c);
    -moz-background: linear-gradient(#1982d1, #0e4d7c);
    -o-background: linear-gradient(#1982d1, #0e4d7c);
    font-size: 1em;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* d. Div#primary
 ------------------------------------------------------------------*/
div#primary {
    clear: both;
    display: block;
    padding-top: 1em;
    margin-left: 5em;
}

div#primary h1 {
    color: #1e73be;
    font-size: 2.3em;
}
div#primary h2 {
    font-size: 1.3em;
}
div#primary h3 {
    font-size: 1em;
    letter-spacing: 0.1em;
    line-height: 2.6em;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: underline;
}
div#primary aside {
    width: 35em;
}

div#primary aside ul li {
    margin-left: -1em;
}

div#primary div#div_construction {
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* e. Image
 ------------------------------------------------------------------*/
img#img_construction {
    width: 10%;
    height: 10%;
}

/* ------------------------------------------------------------------ */
/* f. Footer
 ------------------------------------------------------------------*/
footer {
    width: 100%;
    height: 6.5em;
    text-align: center;
    clear: both;
    background: #177dc9;
    border-top: 1px solid #ddd;
    color: #eeeeee;
    font-size: 12px
        line-height: 2.2em;
    padding: 2.2em 0.5em;
    margin-bottom: 4em;
}

footer a {
    font-size: 1.2em;
    color: #eeeeee;
    font-weight: bold;
    //margin: auto;
}

footer a:hover {
    color: #eeeeee;
    font-weight: bold;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* 2. @Media (max-width: 480px)
 ------------------------------------------------------------------*/

@media (max-width: 480px){
    /* ------------------------------------------------------------------ */
    /*  a. Default
     ------------------------------------------------------------------*/
    #body {
        display: block;
        position: absolute;
        background-color: white;
        margin-top: 1em;
        margin-bottom: 1em;
        width: 100%;
        border-top: 2px #b3b3b3 solid;
    }

    /* ------------------------------------------------------------------ */
    /* b. Header
     ------------------------------------------------------------------*/
    header h1 {
        float: left;
        color: #1e73be;
        margin: 1.5em 0 0 .5em;
        font-size: 3.5em;
    }

    header h2 {
        visibility: hidden;
        position: absolute;
    }
    header h3 {
        clear: both;
        font-size: 1em;
        margin-left: 2.1em;
    }

    /* ------------------------------------------------------------------ */
    /* c. Navigation
     ------------------------------------------------------------------*/
    nav ul li {
        list-style: none;
        display: inline-block;
        float: left;
        clear: both;
        position: relative;
    }

    nav ul li a {
        color: #eee;
        display: block;
        line-height: 3.333em;
        padding: 0 1.2125em;
        text-decoration: none;
    }

    nav ul li a.active {
        color: #ff9b00;
    }

    nav ul li:hover > a{
        background: linear-gradient(#1982d1, #0e4d7c);
        -webkit-background:  linear-gradient(#1982d1, #0e4d7c);
        -moz-background: linear-gradient(#1982d1, #0e4d7c);
        -o-background: linear-gradient(#1982d1, #0e4d7c);
        color: #ff9b00;
        border-radius: 15px;
        text-decoration: none;
    }

    nav .icon-bar {
        background-color: #eee;
    }

    /* ------------------------------------------------------------------ */
    /* d. Div#primary
     ------------------------------------------------------------------*/
    div#primary {
        clear: both;
        display: block;
        padding-top: 1em;
        margin-left: 1em;
    }

    div#primary h1 {
        color: #1e73be;
        font-size: 2.3em;
    }
    div#primary h2 {
        font-size: 1.3em;
    }
    div#primary h3 {
        font-size: 1em;
        letter-spacing: 0.1em;
        line-height: 2.6em;
        text-transform: uppercase;
        font-weight: bold;
        text-decoration: underline;
    }
    div#primary aside {
        width: 100%;
    }

    div#primary aside ul li {
        margin-left: -1em;
    }

    div#primary div#div_construction {
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* 3. @Media (min-width: 481px) and (max-width: 768px)
 ------------------------------------------------------------------*/

@media (min-width: 481px) and (max-width: 768px){
    /* ------------------------------------------------------------------ */
    /*  a. Default
     ------------------------------------------------------------------*/
    #body {
        display: block;
        position: absolute;
        background-color: white;
        margin-top: 1em;
        margin-bottom: 1em;
        width: 100%;
        border-top: 2px #b3b3b3 solid;
    }

    /* ------------------------------------------------------------------ */
    /* b. Header
     ------------------------------------------------------------------*/
    header h1 {
        float: left;
        color: #1e73be;
        margin: 1.5em 0 0 .5em;
        font-size: 3.5em;
    }
    
    header h2 {
        position: absolute;
        font-size: 1.5em;
        margin: 4.75em 0 0 11.3em;
    }
    
    header h3 {
        clear: both;
        font-size: 1em;
        margin-left: 2.1em;
    }

    /* ------------------------------------------------------------------ */
    /* c. Navigation
     ------------------------------------------------------------------*/
    nav ul li {
        list-style: none;
        display: inline-block;
        float: left;
        clear: both;
        position: relative;
    }

    nav ul li a {
        color: #eee;
        display: block;
        line-height: 3.333em;
        padding: 0 1.2125em;
        text-decoration: none;
    }

    nav ul li a.active {
        color: #ff9b00;
    }

    nav ul li:hover > a{
        background: linear-gradient(#1982d1, #0e4d7c);
        -webkit-background:  linear-gradient(#1982d1, #0e4d7c);
        -moz-background: linear-gradient(#1982d1, #0e4d7c);
        -o-background: linear-gradient(#1982d1, #0e4d7c);
        color: #ff9b00;
        border-radius: 15px;
        text-decoration: none;
    }

    nav .icon-bar {
        background-color: #eee;
    }

    /* ------------------------------------------------------------------ */
    /* d. Div#primary
     ------------------------------------------------------------------*/
    div#primary {
        clear: both;
        display: block;
        padding-top: 1em;
        margin-left: 1em;
    }

    div#primary h1 {
        color: #1e73be;
        font-size: 2.3em;
    }
    div#primary h2 {
        font-size: 1.3em;
    }
    div#primary h3 {
        font-size: 1em;
        letter-spacing: 0.1em;
        line-height: 2.6em;
        text-transform: uppercase;
        font-weight: bold;
        text-decoration: underline;
    }
    div#primary aside {
        width: 100%;
    }

    div#primary aside ul li {
        margin-left: -1em;
    }

    div#primary div#div_construction {
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* 4. @Media (min-width: 480px)
 ------------------------------------------------------------------*/

@media (min-width: 769px){
    /* ------------------------------------------------------------------ */
    /*  a. Default
     ------------------------------------------------------------------*/
    #body {
        display: block;
        position: absolute;
        background-color: white;
        margin: 1em auto 1em 15%;
        //min-width: 45em;
        width: 65em;
        border-top: 2px #b3b3b3 solid;
    }
    /* ------------------------------------------------------------------ */
    /* b. Header
     ------------------------------------------------------------------*/
    header h1 {
        float: left;
        color: #1e73be;
        margin: 1.5em 0 0 1.5em;
        font-size: 3.5em;
    }

    header h2 {
        position: absolute;
        font-size: 1.5em;
        margin: 4.75em 0 0 13.3em;
    }
    header h3 {
        clear: both;
        font-size: 1em;
        margin-left: 5.33em;
    }
    /* ------------------------------------------------------------------ */
    /* c. Navigation
     ------------------------------------------------------------------*/
    nav ul li {
        list-style: none;
        display: inline-block;
        float: left;
        position: relative;
    }

    nav ul li:first-of-type {
        margin-left: 1em;
    }

    nav ul li a {
        color: #eee;
        display: block;
        line-height: 3.333em;
        padding: 0 1.2125em;
        text-decoration: none;
    }

    nav ul li a.active {
        color: #ff9b00;
    }

    nav ul li:hover > a{
        background: linear-gradient(#f9f9f9, #e5e5e5);
        -webkit-background: linear-gradient(#f9f9f9, #e5e5e5);
        -moz-background: linear-gradient(#f9f9f9, #e5e5e5);
        -o-background: linear-gradient(#f9f9f9, #e5e5e5);
        color: #373737;
        text-decoration: none;
    }
}