﻿/*
		Colors:
			
		Pantone 228 GSP Crimson:	#682145
		Process Black:				#000000
		Pantone Cool Grey 10:		#766A62 -- Dark
		Pantone Warm Gray 4:		#B7B1A9 -- Medium
									#CCB8AB -- Light	
									#FBFBFB -- Barely visible
		Pantone 320:				#009AA6 -- Dark blue		
		Pantone 5503:				#99BFC2 -- Light blue		
		Error						#FF0000
		Warning						#E1A358
		Information					#009AA6
	*/
html, body {
    overflow: hidden;
}

.AppBox {
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #BBBBBB;
    border-bottom: 1px solid #A0A0A0;
    border-left: 1px solid #BBBBBB;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
}

div#AppHeader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    color: #008C95;
    z-index: 999;
    /*-moz-box-shadow: 0 2px 5px #000000; -webkit-box-shadow: 0 2px 5px #000000; box-shadow: 0 2px 5px #000000;*/
}

    div#AppHeader div#Modules {
        width: 100%;
        min-width: 1000px;
        height: 52px;
    }

        div#AppHeader div#Modules a {
            color: #FFFFFF;
            padding: 18px 5px 16px 5px;
            line-height: 52px;
            margin-right: 2px;
            margin-top: 15px;
            font-weight: normal;
            font-size: 16px;
        }
            /*background: transparent url( ../images/down_white.gif ) center right no-repeat; } */
            div#AppHeader div#Modules a.off {
                color: #AAAAAA;
                cursor: default;
                text-decoration: none;
                background: transparent;
            }
            /* url( ../images/down_grey.gif ) center right no-repeat; } */
            div#AppHeader div#Modules a:hover {
                text-decoration: none;
                cursor: pointer;
            }

                div#AppHeader div#Modules a:hover.off {
                    color: #AAAAAA;
                    cursor: default;
                    text-decoration: none;
                    background-color: transparent;
                }

    div#AppHeader div#ActionItems a {
        background: transparent;
        padding: 6px;
        margin: 3px 4px;
        display: block;
        font-size: 16px;
    }

        div#AppHeader div#ActionItems a:hover {
            text-decoration: none;
            cursor: pointer;
            background: #fff;
        }

    div#AppHeader div#ActionItems {
        background: white;
        display: none;
        padding: 5px 0px 5px 0px;
        border: 3px solid #008C95;
        border-radius: 12px;
    }

    div#AppHeader div#Login,
    div#AppHeader a#lnkLogo {
        width: 56px;
        height: 30px;
        padding: 10px 24px !important;
        background-image: url('/Content/asset/logos/white/GSP-56X24.png');
        background-repeat: no-repeat;
        background-position: center;
    }

    div#AppHeader div#Modules a#lnkLogo {
        display: block;
        float: left;
        margin-top: 4px;
    }

    div#AppHeader div#Login {
        position: absolute;
        top: 4px;
        left: 3px;
    }

    div#AppHeader div#rightMenu {
        position: fixed;
        top: 0px;
        right: 0px;
        width: 200px;
    }

        div#AppHeader div#rightMenu > a {
        }

        div#AppHeader div#rightMenu #hamburgerButton {
            margin: 10px 6px 12px 12px;
            padding: 7px 6px;
            width: 22px;
            display: block;
            border-width: 2px;
            border-color: #f71919 !important;
            border-radius: 6px;
            /*background-color: #008C95 !important;*/
            text-decoration: none;
            cursor: pointer;
        }

        div#AppHeader div#rightMenu A#hamburgerButton {
            border-radius: 6px;
            margin-left:140px;
        }

            div#AppHeader div#rightMenu a#hamburgerButton:hover {
                background-color: #33C3CA !important;
            }

                div#AppHeader div#rightMenu a#hamburgerButton:hover > .gsp-icon-bar {
                    background-color: black !important;
                }

.gsp-icon-bar {
    background-color: #000;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

    .gsp-icon-bar + .gsp-icon-bar {
        margin-top: 4px;
    }

div#AppHeader div#ActionItems a#lnkMessages span {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    /*background-color: #666666;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #000000));
    background-image: -webkit-linear-gradient(top, #666666 0%,#000000 100%);
    background-image: -moz-linear-gradient(top, #666666 0%,#000000 100%);
    background-image: -o-linear-gradient(top, #666666 0%,#000000 100%);
    background-image: linear-gradient(top, #666666 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF666666', endColorstr='#FF000000');
    border-color: #EEEEEE;
    padding: 2px;*/
    background: #008C95;
    padding: 2px 4px 4px 4px;
    position: absolute;
    right: 90px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
}

div#AppHeader div#ActionItems a#lnkMessages:hover {
    text-decoration: none;
}

div#CompanyName {
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 999;
    text-align: center;
    width: 300px;
}

    div#CompanyName div {
        display: inline-block;
        color: #FFFFFF;
        padding: 3px 10px 3px 10px;
        font-size: 10px;
        -webkit-border-radius: 0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
        -moz-box-shadow: 1px 1px 5px #000000;
        -webkit-box-shadow: 1px 1px 5px #000000;
        box-shadow: 1px 1px 5px #000000;
    }


div.ModuleMenu {
    position: absolute;
    color: black;
    background-color: white;
    border: 3px solid #008C95;
    /*background: transparent url( https://share.gspretail.com/common/images/menu_sub_bg.png ) top left repeat;*/
    top: 50px;
    border-radius: 6px;
    z-index: 1500;
    display: none;
    max-height: 85%;
    overflow-y: auto;
    overflow-x: hidden;
}

    div.ModuleMenu table {
        margin: 3px;
    }

        div.ModuleMenu table tr td {
            color: #FFFFFF;
            padding: 3px;
            cursor: pointer;
        }

            div.ModuleMenu table tr td a {
                color: black;
                cursor: pointer;
                text-decoration: none;
                display: inline-block;
                width: 100%;
                padding: 2px 0;
                margin: 3px;
            }

            div.ModuleMenu table tr td.Add {
                width: 20px;
                background: transparent center center no-repeat;
            }

            div.ModuleMenu table tr td:hover {
                color: #000000;
                padding: 3px;
            }

            div.ModuleMenu table tr td a:hover {
                color: #008C95;
                text-decoration: none;
            }


div#UserMenu {
    position: absolute;
    z-index: 1500;
    /*padding: 10px 4px;
    border-radius: 6px 0px 6px 6px;
    background: rgba(0,0,0,0.7);*/
    background-color: white;
    padding: 5px 0px 5px 0px;
    border: 3px solid #008C95;
    border-radius: 12px;
}

    div#UserMenu section {
        margin: 12px;
    }

        div#UserMenu section h1 {
            font-size: 24px;
            color: #008C95;
        }

    div#UserMenu > a {
        position: absolute;
        top: 2px;
        right: 50px;
        z-index: 1001;
        display: inline-block;
        color: #000000;
        text-decoration: none;
        padding: 6px 7px 5px 7px;
        background: #FFFFFF;
        border-top: 1px solid #CCCCCC;
        border-right: 1px solid #BBBBBB;
        border-bottom: 0px solid #A0A0A0;
        border-left: 1px solid #BBBBBB;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }

    div#UserMenu > div {
        z-index: 1000;
        background: #FFFFFF;
        border-top: 1px solid #CCCCCC;
        border-right: 1px solid #BBBBBB;
        border-bottom: 1px solid #A0A0A0;
        border-left: 1px solid #BBBBBB;
        padding: 10px;
        width: 340px;
        border-radius: 5px;
    }

    div#UserMenu table {
        line-height: 2em;
        width: 100%;
    }

        div#UserMenu table th {
            margin: 0;
            padding: 1px;
            width: 100px;
            text-align: right;
        }

        div#UserMenu table td {
            margin: 0;
            padding: 1px;
        }

            div#UserMenu table td select {
                width: 100%;
            }

div#AppContent {
    position: absolute;
    top: 52px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

    div#AppContent iframe {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
    }

.BadLoginNote {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -180px;
    margin-top: -180px;
    width: 300px;
    background: #FBFBFB;
    padding: 20px 30px 10px 30px;
    border: 1px solid #766A62;
    border-radius: 5px;
}

    .BadLoginNote a {
        text-decoration: underline
    }

    .BadLoginNote .error {
        color: red;
        font-weight: bold;
    }

    .BadLoginNote div {
        padding: 5px;
    }

.AppLogin {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -180px;
    margin-left: -255px;
    width: 450px;
    background: #FBFBFB;
    padding: 20px 30px 10px 30px;
    border: 1px solid #766A62;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}

    .AppLogin.User {
        margin-left: -180px;
        width: 400px;
    }

    .AppLogin h4 {
        margin: 0;
        padding: 0;
        font-size: 16pt;
        font-weight: normal;
    }

    .AppLogin .Header label {
        display: block;
        font-size: 14px;
        font-weight: bold;
        text-align: right;
        margin-right: 12px;
    }

    .AppLogin table {
        width: 100%;
    }

    .AppLogin td.Checkbox {
        vertical-align: middle;
    }

    .AppLogin.User td.Header, .AppLogin.User th.Header {
        width: 75px;
    }

    .AppLogin.Company td.Header, .AppLogin.Company th.Header {
        width: 200px;
    }

    .AppLogin td {
        padding: 12px 0 0 0;
    }

.Error {
    color: #aa0000;
    font-weight: bold;
}

.AppLogin input[type=text], .AppLogin input[type=password] {
    width: 100%;
    font-size: 12px;
}

.AppLogin input[type=submit] {
    display: block;
    margin: 12px 0;
    font-size: 14px;
    padding: 8px 12px;
    float: right;
    background: #373737 !important;
    color: white;
    line-height: unset;
    height: auto;
    border-radius:0;
}
/*.AppLogin {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -180px;
    margin-top: -180px;
    width: 300px;
    background: #FBFBFB;
    padding: 20px 30px 10px 30px;
    border: 1px solid #766A62;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}

    .AppLogin label {
        display: inline;
        position: relative;
        top: -2px;
        font-weight: normal;
    }

    .AppLogin table {
        width: 100%;
        margin-top: 12px;
    }

    .AppLogin th, .AppLogin td {
        padding: 10px 2px;
    }

    .AppLogin th {
        text-align: right;
    }

    .AppLogin input[type=text], .AppLogin input[type=password], .AppLogin select {
        width: 230px;
    }

    .AppLogin a {
        text-decoration: underline
    }

    .AppLogin h6, .AppLogin h4 {
        padding: 0;
        margin: 0;
    }

    .AppLogin h4 {
        font-weight: normal;
    }

    .AppLogin h5 {
        padding: 12px 0 10px 0;
    }*/

.notifications {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 0;
    margin-top: -180px;
    width: 300px;
    background: #FBFBFB;
    padding: 15px;
    border: 1px solid #766A62;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    max-height: 434px;
}

    .notifications .notification-header {
        margin-bottom: 5px;
    }

        .notifications .notification-header h4 {
            font-weight: normal;
        }

.notification-content {
    overflow-y: auto;
    height: 100%;
    margin-right: -10px;
    padding-right: 2px;
    max-height: 400px;
}

.notifications .notification-date {
    font-weight: normal;
    margin-bottom: 2px;
}

.notifications .notification {
    border: 1px solid #766A62;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    padding: 2px 5px;
    margin-bottom: 5px;
}

.notification .title {
    font-weight: bold;
}

.notification .subtitle {
    font-weight: normal;
    padding-left: 15px;
    font-style: italic;
    margin-bottom: 5px;
}

.notification p {
    padding: 5px 2px 2px 15px;
}

.notification a {
    padding: 5px;
    margin: 2px;
    border: 1px solid #888;
    border-radius: 5px;
    background-color: #bbb;
    cursor: pointer;
    display: inline-block;
}

#ProgressForground {
    z-index: 2001;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160px;
    height: 24px;
    margin-left: 0;
    margin-top: -150px;
    background: transparent url( https://share.gspretail.com/common/images/progress_gray_on_transparent_dots_64x21.gif ) center center no-repeat;
}

.Quirks {
    /*position: absolute;
    top: 20px;
    left: 400px;
    right: 400px;*/
    color: #FF0000;
    /*background-color: white;*/
    padding: 12px;
    width: 600px;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.LegalTerms {
    position: absolute;
    top: 100px;
    left: 100px;
    bottom: 100px;
    right: 100px;
    border: 1px solid #000000;
    background: #FFFFFF;
    font-family: "proximanova", "Helvetica", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.2;
    color: #000000;
}

    .LegalTerms h1 {
        position: relative;
        left: 10px;
        top: 10px;
        font-size: 200%;
        font-weight: bold;
        margin: 2px;
        padding: 2px;
    }

    .LegalTerms p {
        font-size: 14px;
        padding: 0 0 10px 10px;
        margin: 0
    }

    .LegalTerms a {
        font-size: 14px;
    }

    .LegalTerms img {
        position: relative;
        top: 8px;
    }

    .LegalTerms ul li {
        padding: 0 20px;
        list-style: none
    }

    .LegalTerms .Content {
        position: absolute;
        top: 50px;
        left: 15px;
        bottom: 60px;
        right: 15px;
        overflow-y: auto;
    }

    .LegalTerms .Buttons {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }

    .LegalTerms .Recover {
        padding: 20px 20px;
    }

        .LegalTerms .Recover tr td {
            height: 30px;
        }

        .LegalTerms .Recover input[type=text], .LegalTerms .Recover input[type=password] {
            width: 200px;
            height: 24px;
            border-color: #CCCCCC #BBBBBB #A0A0A0;
            border-radius: 4px 4px 4px 4px;
            border-style: solid;
            border-width: 1px;
            padding: 2px 4px;
        }

#FeedbackLink {
    display: block;
    position: absolute;
    bottom: 90px;
    left: 0px;
    z-index: 997;
    width: 32px;
    height: 90px;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
}

    #FeedbackLink a {
        display: block;
        width: 32px;
        height: 90px;
        cursor: pointer;
        background: url( https://share.gspretail.com/common/images/feedback_tab_white.png ) center center no-repeat;
        padding: 2px;
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
        -moz-box-shadow: 1px 1px 5px #000000;
        -webkit-box-shadow: 1px 1px 5px #000000;
        box-shadow: 1px 1px 5px #000000;
    }

.FeedbackLinkStub {
    margin-left: -28px;
}

    .FeedbackLinkStub:hover {
        margin-left: 0px;
    }

#FeedbackMenu {
    position: absolute;
    bottom: 70px;
    left: 0px;
    z-index: 999;
    height: 270px;
    width: 395px;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    -moz-box-shadow: 1px 1px 5px #000000;
    -webkit-box-shadow: 1px 1px 5px #000000;
    box-shadow: 1px 1px 5px #000000;
}

    #FeedbackMenu > a {
        position: absolute;
        left: 395px;
        bottom: 15px;
        display: block;
        width: 32px;
        height: 90px;
        cursor: pointer;
        background: url( https://share.gspretail.com/common/images/feedback_tab_white.png ) center center no-repeat;
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
        -moz-box-shadow: 1px 1px 5px #000000;
        -webkit-box-shadow: 1px 1px 5px #000000;
        box-shadow: 1px 1px 5px #000000;
    }

    #FeedbackMenu select, #FeedbackMenu input, #FeedbackMenu textarea {
        width: 100%;
    }

    #FeedbackMenu > div {
        position: absolute;
        left: 0px;
        bottom: 0px;
        top: 0px;
        right: 0px;
        z-index: 9999;
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
        padding: 10px;
    }

        #FeedbackMenu > div > table {
            width: 100%;
        }

            #FeedbackMenu > div > table > tbody > tr > th {
                width: 75px;
                text-align: right;
                vertical-align: middle;
                color: #FFFFFF;
                font-weight: normal;
            }

            #FeedbackMenu > div > table > tbody > tr > td {
                padding: 2px;
            }

                #FeedbackMenu > div > table > tbody > tr > td input[type=button] {
                    width: 150px;
                    height: 30px;
                }

div#ModalBack {
    background: #000000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1500;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=00);
    filter: alpha(opacity=15);
    -moz-opacity: 0.15;
    -khtml-opacity: 0.15;
    opacity: 0.15;
}

div#HelpOverlay .Bubble {
    position: absolute;
    z-index: 1501;
    background: #000000;
    color: #FFFFFF;
    border-top: 2px solid #CCCCCC;
    border-right: 2px solid #BBBBBB;
    border-bottom: 2px solid #A0A0A0;
    border-left: 2px solid #BBBBBB;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: default;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .75);
    -moz-box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .75);
    box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .75);
}

    div#HelpOverlay .Bubble p {
        padding: 10px;
        color: #FFFFFF;
    }

    div#HelpOverlay .Bubble h2 {
        padding: 10px;
        color: #FFFFFF;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    div#HelpOverlay .Bubble img {
        padding: 0 10px 5px 0;
    }

div#HelpOverlay .ArrowTop:after, .ArrowTop:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

div#HelpOverlay .ArrowTop:after {
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #000000;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}

div#HelpOverlay .ArrowTop:before {
    border-color: rgba(204, 204, 204, 0);
    border-bottom-color: #CCCCCC;
    border-width: 13px;
    left: 50%;
    margin-left: -13px;
}

div#HelpOverlay .ArrowRight:after, .ArrowRight:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

div#HelpOverlay .ArrowRight:after {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: #000000;
    border-width: 10px;
    top: 50%;
    margin-top: -10px;
}

div#HelpOverlay .ArrowRight:before {
    border-color: rgba(204, 204, 204, 0);
    border-left-color: #CCCCCC;
    border-width: 13px;
    top: 50%;
    margin-top: -13px;
}

div#HelpOverlay .ArrowBottom:after, .ArrowBottom:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

div#HelpOverlay .ArrowBottom:after {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}

div#HelpOverlay .ArrowBottom:before {
    border-color: rgba(160, 160, 160, 0);
    border-top-color: #A0A0A0;
    border-width: 13px;
    left: 50%;
    margin-left: -13px;
}

div#HelpOverlay .ArrowLeft:after, .ArrowLeft:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

div#HelpOverlay .ArrowLeft:after {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000000;
    border-width: 10px;
    top: 50%;
    margin-top: -10px;
}

div#HelpOverlay .ArrowLeft:before {
    border-color: rgba(187, 187, 187, 0);
    border-right-color: #BBBBBB;
    border-width: 13px;
    top: 50%;
    margin-top: -13px;
}

.GSPLogo {
    position: absolute;
    top: 12px;
    left: 5px;
    z-index: 999;
}

.AppLogo {
    position: absolute;
    top: 12px;
    right: 5px;
    z-index: 999;
}

#ProgressOverlayMainMenu {
    z-index: 2000;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 52px;
    background-color: #666666;
    filter: alpha(opacity=10); /*IE8 and earlier*/
    opacity: 0.10; /*IE9, Firefox, Chrome, Opera, and Safari*/
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
    -moz-opacity: 0.10;
    -khtml-opacity: 0.10;
}

div#AppHeader div#ActionItems a.show-on-hover > img {
    visibility: hidden;
}

div#AppHeader div#ActionItems a.show-on-hover:hover > img {
    visibility: visible;
}

div#AppHeader div#Modules a.show-on-hover {
    visibility: hidden;
}

    div#AppHeader div#Modules a.show-on-hover:hover {
        visibility: visible;
    }

/* IE compatibility stupidity for overriding images
   1. "shrink" the actual image to 0x0
   2. pad the element to fit the space
   3. set the background of the element to be the actual image you want */
div#AppHeader div#ActionItems a:hover > img {
    width: 0;
    height: 0;
    padding: 16px;
}

    div#AppHeader div#ActionItems a:hover > img[src*="lock.png"] {
        background: url('../../Content/asset/icons/gray/32x32/lock.png');
    }

    div#AppHeader div#ActionItems a:hover > img[src*="home.png"] {
        background: url('../../Content/asset/icons/gray/32x32/home.png');
    }

    div#AppHeader div#ActionItems a:hover > img[src*="message.png"] {
        background: url('../../Content/asset/icons/gray/32x32/message.png');
    }

    div#AppHeader div#ActionItems a:hover > img[src*="gear.png"] {
        background: url('../../Content/asset/icons/gray/32x32/gear.png');
    }


    div#AppHeader div#ActionItems a:hover > img[src*="user.png"] {
        background: url('../../Content/asset/icons/gray/32x32/user.png');
    }

    div#AppHeader div#ActionItems a:hover > img[src*="help_solid.png"] {
        background: url('../../Content/asset/icons/gray/32x32/help_solid.png');
    }
