/************ 882 Screen Width required to show the flyout nav ***************/
@media screen and (max-width: 882px) {
    #popoutcontainer {
        display: none;
    }
}

@media screen and (max-width: 641px) {

    /**********************************************/
    /*             HOMEPAGE-SPECIFIC              */
    /**********************************************/
    #homepage #bannerimgcontainer {
        height: 180px !important;
    }

    #taglinecontainer {
        height: auto;
    }


    #tagline {
        width: 100%;
        left: 0;
        padding-bottom: 5px;
    }

        #tagline img {
            width: 100%;
        }

    #homepage #col_container {
        max-width: 1040px;
        width: 100%;
    }

        #homepage #col_container #col_one, #homepage #col_container #col_two, #homepage #col_container #col_three {
            padding: 15px;
            width: auto;
            padding-bottom: 0;
        }

        #homepage #col_container #col_two {
            padding-top: 0;
            padding-bottom: 20px !important;
        }

            #homepage #col_container #col_two h3 {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }

        #homepage #col_container #col_three {
            padding-bottom: 40px;
        }

        #homepage #col_container #col_one, #homepage #col_container #col_two, #homepage #col_container #col_three {
            border-right: none;
            height: auto !important;
        }

    #homepage #footer {
        width: auto;
        padding: 15px;
        left: 0;
    }

    /**********************************************/
    /*                   LOGO                     */
    /**********************************************/
    #header {
        height: 48px;
    }

        #header #piperpowerlogo {
            float: left;
            width: 112px;
            height: 24px;
            background-image: url('/images/logo_small.png');
            background-repeat: no-repeat;
            position: relative;
            top: 12px;
            left: 15px;
            background-size: cover;
        }

    /**********************************************/
    /*                   TOP NAV                  */
    /**********************************************/
    #pageheading {
        margin-top: 20px;
    }

    #header .pad {
        max-width: 1024px;
        width: 100%;
        z-index: 999;
    }

    #popoutcontainer {
        display: none;
    }

    #navwrapper {
        width: 100%;
        padding-top: 48px;
        display: none;
    }

    #nav_primary {
        position: inherit;
        min-height: inherit;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

        #nav_primary a {
            font-size: 14px;
            padding-top: 4px;
            padding-bottom: 4px;
        }

            #nav_primary a.active {
                background-color: inherit;
            }

        #nav_primary .mobile_level_2 a.active {
            background-color: #d1af22;
        }

        #nav_primary a.exactactive, #nav_primary a.hoveractive {
            background-color: #d1af22;
        }

    .mobile_subnav {
        display: block !important;
    }

    #nav_primary .mobile_subnav a {
        font-size: 11px;
        font-weight: normal;
        padding-left: 30px;
    }

    #nav_primary .mobile_level_2 a {
        font-size: 11px;
        font-style: italic;
        font-weight: normal;
        padding-left: 45px;
    }


    #header .utility {
        text-align: left;
        float: none;
        background-color: #4A4F55;
        margin-top: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        opacity: .9;
    }

        #header .utility a {
            font-size: 11px;
            display: block;
            padding-right: 5px;
            padding-left: 15px;
            padding-top: 3px;
            padding-bottom: 3px;
            margin-bottom: 2px;
        }

            #header .utility a:hover {
                background-color: #D1AF22;
            }

    #searchbox_q {
        margin-left: 15px;
        margin-top: 8px;
    }

    .SuggestBox {
        display: none !important;
    }

    /**********************************************/
    /*                   LEFT NAV                 */
    /**********************************************/
    .content_sidebar {
        width: 100%;
    }

        .content_sidebar .level1 {
            margin-left: 0px;
        }

            .content_sidebar .level1 a, .content_sidebar .level1 a.active, .content_sidebar .level1 a:hover {
                margin-left: 0px;
                padding-top: 6px;
                padding-left: 15px;
                padding-bottom: 6px;
            }

                .content_sidebar .level1 a, .content_sidebar .level1 a.active, .content_sidebar .level1 a:hover {
                    padding-top: 6px;
                    padding-bottom: 6px;
                }


        .content_sidebar .level2 {
            padding-left: 0px;
        }

            .content_sidebar .level2 a, .content_sidebar .level2 a.active, .content_sidebar .level2 a:hover {
                padding-top: 5px;
                padding-bottom: 5px;
                padding-left: 35px;
                margin-top: 0px;
                margin-bottom: 0px;
            }


    /*****************************/
    /*       HEADER              */
    /*****************************/
    #header .pad {
        height: 48px;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 999999;
    }

    #bannerimgcontainer {
        height: 120px !important;
        display: block;
        min-width: inherit;
        background-size: cover;
        background-color: #4a4f55;
    }

    #hamburgericon {
        background-image: url('/images/hamburger.gif');
        background-repeat: no-repeat;
        background-size: cover;
    }

    #hamburger {
        display: inline !important;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    #hamburgericon {
        background-image: url('/images/hamburger.gif');
    }

        #hamburgericon.active {
            background-image: url('/images/hamburger_close.gif');
        }

    /*****************************/
    /* Page Heading & Subheading */
    /*****************************/
    #pagesubheading {
        font-size: 24px;
    }

    .intro {
        font-size: 17px;
    }

    /*****************************/
    /*       CONTENT             */
    /*****************************/
    table {
        width: auto !important;
    }

    td {
        padding: 3px !important;
        white-space: normal !important;
    }

    .content_primary {
        float: none;
        padding: 0px 15px;
        margin: 0px;
        width: auto;
    }

        .content_primary table tr td h2, .content_primary table tr td h3, .content_primary table tr td h4, .content_primary table tr td p, .content_primary table tr td ul, .content_primary table tr td a, .content_primary table tr td {
            font-size: 14px !important;
        }

    .full_width .content_primary {
        width: auto;
    }

    select {
        max-width: 100% !important;
    }

    #content {
        width: 100%;
        padding: 0px;
    }

    .content_primary .pad {
        width: 100%;
    }

    div.highlight {
        width: auto !important;
    }

    .content_secondary {
        float: none;
        padding-left: 0px;
    }

    .callout {
        float: none;
        margin-left: 0px;
    }

    .msg {
        width: auto !important;
    }

    #content img {
        max-width: 100%;
        height: auto;
    }

    ul {
        width: auto !important;
    }

    /***************************/
    /*      FOOTER             */
    /***************************/
    #footer {
        width: auto;
        padding: 15px;
        clear: both;
    }

        #footer .f_social {
            float: none;
            width: 100%;
            text-align: right;
            position: inherit !important;
            padding-bottom: 5px;
        }

        #footer br {
            display: none;
        }

    .mobileonly {
        display: block;
    }

    /* JQUERY UI Overrides */
    .ui-dialog {
        width: 98% !important;
        left: 0px !important;
    }
}