/*
IE8-specific styles for Harmony-style buttons
In IE8, all harmony buttons are flat instead of gradients
and use a slightly different color palette so they look OK
there's also a few more differences (hover style, etc)

You don't need to include this file directly; it should already be included
for you from harmonyButtons.css
*/

/* Lots of things buttons can't do in IE8 */
.IE8 .HarmonyButton,
.IE8 .HarmonyButton.ui-button {
    filter: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/*
Since IE8 can't do box-shadow for the lower border, we instead have to
use a pseudo-element to create the bottom shadow
*/
.IE8 .HarmonyButton:hover:before,
.IE8 .HarmonyButton:focus:before {
    /*use a pseudo-element to make the solid drop shadow*/
    position: absolute;
    content: "";
    background: #ddd;
    bottom: -3px;
    height: 3px;
    margin-bottom: -1px;
    left: -1px;
    right: -1px;
    border-radius: 0;
}

/* IE8 fake bottom shadow is done differently, have to remove it here too */
.IE8 .HarmonyButton[disabled]:before,
.IE8 .HarmonyButton.Disabled:before {
    display: none;
}


/*
Override theme colors to make things flat in IE8
We are using flat colors instead of IE8 filter: gradients for two reasons:
- Performance: filter: in IE8 is slow and terrible
- Visual: filter: gradients cause font antialiasing to get messed up and look bad
*/

.IE8 .HarmonyButton,
.IE8 .HarmonyButton.Secondary {
    background: #f2f2f2;
}
.IE8 .HarmonyButton:hover,
.IE8 .HarmonyButton:focus,
.IE8 .HarmonyButton.Secondary:hover,
.IE8 .HarmonyButton.Secondary:focus {
    background: #f8f8f8;
}
.IE8 .HarmonyButton[disabled],
.IE8 .HarmonyButton.Disabled,
.IE8 .HarmonyButton.Secondary[disabled],
.IE8 .HarmonyButton.Secondary.Disabled {
    color: #aaa !important;
    background: #f8f8f8;
    border-color: #e2e2e2;
}

.IE8 .HarmonyButton.Primary {
    background: #3965ce;
}
.IE8 .HarmonyButton.Primary:hover,
.IE8 .HarmonyButton.Primary:focus {
    background: #365ebf;
}
.IE8 .HarmonyButton.Primary[disabled],
.IE8 .HarmonyButton.Primary.Disabled {
    color: #eef8ff !important;
    background: #a3b7cc;
    border-color: #abc;
}

.IE8 .HarmonyButton.KO.Primary[disabled],
.IE8 .HarmonyButton.KO.Primary.Disabled {
    color: #96B3EB !important;
}

.IE8 .HarmonyButton.Success {
    background: #56b349;
}
.IE8 .HarmonyButton.Success:hover,
.IE8 .HarmonyButton.Success:focus {
    background: #50ac44;
    border-color: #368437;
}
.IE8 .HarmonyButton.Success[disabled],
.IE8 .HarmonyButton.Success.Disabled {
    color: #efe !important;
    background: #aca;
    border-color: #9b9;
}

.IE8 .HarmonyButton.KO.Success[disabled],
.IE8 .HarmonyButton.KO.Success.Disabled {
    color: #aca !important;
}

.IE8 .HarmonyButton.Danger {
    background: #e33d43;
}
.IE8 .HarmonyButton.Danger:hover,
.IE8 .HarmonyButton.Danger:focus {
    background: #da3b40;
    border-color: #bd0000;
}
.IE8 .HarmonyButton.Danger[disabled],
.IE8 .HarmonyButton.Danger.Disabled {
    color: #fee !important;
    background: #c88;
    border-color: #b77;
}

.IE8 .HarmonyButton.KO.Danger[disabled],
.IE8 .HarmonyButton.KO.Danger.Disabled {
    color: #daa !important;
}

/* these still need to come last */

.IE8 .HarmonyButton.KO {
    background: #f2f2f2;
}
.IE8 .HarmonyButton.KO:hover,
.IE8 .HarmonyButton.KO:focus {
    background: #f8f8f8;
    border-color: #ddd;
}
.IE8 .HarmonyButton.KO[disabled],
.IE8 .HarmonyButton.KO.Disabled {
    color: #aaa !important;
    background: #f8f8f8;
    border-color: #e2e2e2;
}


/*
icons inside disabled buttons get reduced opacity so that they look grayed out
IE8 mangles semitransparent PNG images with filter:alpha(opacity=50)
So instead of an opacity filter, we use a copy of the PNG image where
we have pre-reduced the opacity, which IE8 can render just fine.
We do this as a separate image so that we (1) don't have to load the sprites
in other browsers, and (2) don't have to have an entire set of disabled-state
icon sprite styles just for IE8
*/
.IE8 .HarmonyButton[disabled] .Icon,
.IE8 .HarmonyButton.Disabled  .Icon {
    background-image: url("images/icons/harmonyButtonIconsDisabled.png");
}