//******************************************************************************
//******************************************************************************
// Page Layout Styles
//******************************************************************************
//******************************************************************************
#page {

    //=========================================================================
    // Header Styles
    //=========================================================================
    header {
        color: #444;

        //---------------------------------------------------------------------
        // Header Logo
        //---------------------------------------------------------------------
        .header-logo {
            max-height: 35px;
        }

        //---------------------------------------------------------------------
        // Header Title
        //---------------------------------------------------------------------
        .header-title {
            background: #f8f8f8;
            .q-toolbar__title {
                font-size: 18px;
                img {
                    display: inline-block;
                    padding-right: 7px;
                }
                a {
                    display: inline-block;
                    vertical-align: top;
                    padding-top: 8px;
                }
            }
        }

        //---------------------------------------------------------------------
        // Nav Activators
        //---------------------------------------------------------------------
        .q-toolbar .q-btn,
        .side-logo .q-btn,
        .right-nav-activator {
            .q-icon {
                font-size: 1.715em;
                margin-right: 0;
            }
        }

    }

    //=========================================================================
    // Main Content Layout
    //=========================================================================
    main.q-page {
        background: white;
    }

    //=========================================================================
    // Nav Styles
    //=========================================================================
    aside {
        .left-nav,
        .right-nav {

            .scq-nav-header {
                background: #eeeeee;
                border-bottom: 1px #dedede solid;
                padding: 10px;
                flex-direction: inherit;
                justify-content: flex-start;
                align-items: baseline;
                .q-icon {
                    margin-right: 24px;
                    margin-left: 5px;
                }
                .avatar-header {
                    .avatar-header-title {
                        display: inline-block;
                        vertical-align: middle;
                        margin-left: 10px;
                    }
                }
            }
            .q-item__section--avatar {
                min-width: 0;
                //margin-right: 8px;
            }

            .q-item {
                min-height: 30px;

                .q-item-icon {
                    font-size: 16px;
                }
            }

            .q-expansion-item__content {
                padding-left: 10px;
            }
        }

        //=====================================================================
        // Left Nav
        //=====================================================================
        &.q-drawer--left {
            //background: #f3f3f3;
            .left-nav {}
        }

        //=====================================================================
        // Right Nav
        //=====================================================================
        &.q-drawer--right {
            //background: #f3f3f3;
            .right-nav {}
        }

    }


    //=========================================================================
    // Footer Styles
    //=========================================================================
    footer {
        .q-toolbar {
            background: #f8f8f8;
            color: #444;

            .q-toolbar__title {
                font-size: 14px;
            }
        }
    }

    //*************************************************************************
    //*************************************************************************
    // Responsive CSS Styles
    //*************************************************************************
    //*************************************************************************

    //=========================================================================
    // Large desktop
    //=========================================================================
    @media (min-width: 1200px) {

    }

    //=========================================================================
    // Small Desktop
    //=========================================================================
    @media (min-width: 980px) {

    }

    //=========================================================================
    // Portrait tablet to landscape and Desktop
    //=========================================================================
    @media (min-width: 768px) and (max-width: 979px) {

    }

    //=========================================================================
    // Tablet
    //=========================================================================
    @media (max-width: 1024px) {

    }

    //=========================================================================
    // Landscape phone to portrait tablet
    //=========================================================================
    @media (max-width: 767px) {
        .scq-page {
            //padding: 0px 10px 10px;
        }
    }

    //=========================================================================
    // Landscape phones
    //=========================================================================
    @media (max-width: 480px) {

    }

    //=========================================================================
    // Portrait phones and down
    //=========================================================================
    @media (max-width: 320px) {

    }

}