/************************************************************************************
MAIN NAVIGATION
*************************************************************************************/

#nav {
    width: 100%;
    min-width: 319px;
    margin: 0;
    padding: 0;
    position: relative;
    left: 0;
    bottom: 0;
    z-index: 100;
    /* Real gross, fix this - AHD */
    height: 18px;
    background: -webkit-gradient(linear, left top, left bottom, from(#615AFF), to(#160CE8));
    background: -moz-linear-gradient(top,  #615AFF,  #160CE8);
    background: linear-gradient(180deg, #615AFF, #160CE8);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
#nav > a {
    display: none;
}
#nav li {
    color:#ffffff;
    list-style-type: none;
    font-size:1.1em;
    margin-left:10px;
    margin-right:0px;
}
#nav li a {
    position: relative;
    color:#FFFFFF;
    text-decoration: none;
    margin: 0 4px;
}
#nav li a:hover {
    color:#160CE8;
    background-color: #FFFFFF;
}
#nav li li {
    background-color: #160CE8;
    font-size: 1em;
    margin-left: 0;
}
#nav li li:hover a:hover {
    background-color: #FFFFFF;
    color: #160CE8;
}

/* first level */
#nav > ul {
    display: inline-block;
}
#nav > ul > li {
    height: 100%;
    float: left;
}

/* second level */

#nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    margin-left:0;
    font-size:.9em;
    border: 2px solid #160CE8;
    border-top:0;
}
#nav li:hover ul {
    display: block;
}

/******** smaller than 1200 ***********/
@media screen and (max-width: 1200px) {
    #pagewrap {
        max-width: 980px;
        width: 95%;
        height: auto;
    }
    #content {
        width: 72%;
        font-size: 90%;
    }

    #sidebar {
        width: 20%;
    }
}

/******** smaller than 1000 ***********/
@media screen and (max-width: 1000px) {
    #nav { 
        font-size:85%;
    }
    #pagewrap {
        max-width: 980px;
        width: 95%;
        height: auto;
    }
    #content {
        font-size: 90%;
    }
}
/************************************************************************************
 smaller than 950
 *************************************************************************************/
@media screen and (max-width: 950px) {
    #nav { 
        font-size:74%;
    }
    #content {
        font-size: 85%;
    }
}
/************************************************************************************
 smaller than 800
 *************************************************************************************/
@media screen and (max-width: 800px) {
    #nav { 
        font-size:70%;
    }  
    #pagewrap {
        width: 95%;
        height: auto;
    }

    /* header */
    #header {
        font-size: 85%;
    }
    #content {
        width: auto;
        float: none;
        margin: 10px 0;
    }
    #sidebar {
        width: 100%;
        margin: 0;
        float: none;
    }
}
/************************************************************************************
 smaller than 680
 *************************************************************************************/
@media only screen and ( max-width: 680px ) {

    #header {
        height: auto;
        margin:6px 0;
        font-size: 80%;
    }
    #site-logo {
        position: absolute;
        top:.4em;
        z-index: 200;
        width: 100%;
        font-size:1.4em;
    }
}

/************************************************************************************
 smaller than 540
 *************************************************************************************/
@media screen and (max-width: 540px) {
    #pagewrap {
        width: 95%;
        height: auto;
    }
    #header {
        height: auto;
        font-size: 75%;
    }
    #site-logo {
        top:.6em;
    }
    #content {
        width: auto;
        float: none;
        margin: 15px 0;
        font-size: 86%;
    }
    #sidebar {
        width: 100%;
        margin: 0;
        float: none;
    }
    table.form input {
        max-width: 60%;
    }
    table.form td > select {
        max-width: 60%;
    }
    table.form textarea {
        width: 60%;
        height: 4.0em;
    }
}

/******** smaller than 380 ***********/
@media screen and (max-width: 380px) {

    #pagewrap {
        width: 98%;
        height: auto;
    }
    #header {
        font-size: 70%;
    }
    #site-logo {
        position: absolute;
        margin: 4px auto 0 45px;
        text-align:left;
        z-index: 200;
        width: 100%;
    }
    #content {
        width: auto;
        float: none;
        margin: 10px 2px;
        font-size: 80%;
    }
    #sidebar {
        width: 100%;
        margin: 0;
        float: none;
    }
    table.form input {
        max-width: 50%;
    }
    table.form td > select {
        max-width: 50%;
    }
    table.form textarea {
        width: 50%;
        height: 4.0em;
    }
}