/*
Nice buttons that mesh with the Intuit Harmony visual style
Part of an effort to homogenize button styles in our product in early 2014
For more detailed documentation on markup, check out ./harmonyButtons.html

IMPORTANT: This file is intended to be a reusable library, that we will use
across old and new stacks (and maybe even in the Marketing site)
If you are making tweaks to HarmonyButtons, I'd recommend working with
your visual designer to identify a reusable pattern, and implement and document
that pattern here so that more people can take advantage of it!
*/


/****************************************
There are so many IE8-specific tweaks that they are in their own file
This also makes it easier to remove them once we stop supporting IE8
****************************************/
@import url("harmonyButtonsIE8.css");


/****************************************
Base button styles (from which others inherit)
****************************************/
.HarmonyButton,
.HarmonyButton.ui-button {
    position: relative; /*so that absolute-positioned things inside buttons work as expected*/
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    /* basic text styles; button subclasses override this */
    cursor: pointer;
    color: #fff !important;
    padding: 0.5em 1.5em;
    margin:  0.5em;
    margin-right: 0;
    text-decoration: none !important;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    /* basic visual styles; other buttons should override this */
    color: #404040 !important;
    background: #fff;
    border: 1px solid #ccc;
    /* for gradients, to avoid retyping this every time */
    background-repeat: repeat-x;
    background-position: 0 0;
    /* smoothly transform certain properties on hover */
    -webkit-transition: 0.1s linear -webkit-box-shadow, 0.1s linear box-shadow;
    transition: 0.1s linear box-shadow;
}
/*
Hovering over a button subtly shifts the background position,
and shows a hard-edged unblurred drop shadow beneath the button.
Individual button styles need to override and specify appropriate border color
*/
.HarmonyButton:hover,
.HarmonyButton:focus {
    border-color: #aaa;
    background-position: 0 1.5em;
    /* use box-shadow to fake a border-bottom, without having to deal with
    vertical sizing changes that a thick border-bottom would cause */
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Base styles for disabled buttons */
/* .Disabled class is for a legacy button use-case; [disabled] is preferred mechanism to disable buttons */
.HarmonyButton[disabled],
.HarmonyButton.Disabled {
    /* no interactivity cues */
    cursor: default;
    background-position: 0 0;
    /* no fake border bottom on disabled button hover */
    -webkit-box-shadow: none;
    box-shadow: none;
    /* button subclasses should override these */
    color: #ccc !important;
    background: #fafafa;
    border-color: #eee;
}
/* Disabled buttons - Steamroll some jQuery UI styles */
.HarmonyButton.ui-button[disabled],
.HarmonyButton.ui-button.Disabled {
    opacity: 1;
}
/*
When a HarmonyButton is jQuery UI-ified (via $(elt).button();), we need to
steamroll the jQuery UI styles and make the button still look like ours
*/
.HarmonyButton.ui-button > .ui-button-text {
    /* required so that absolutely-positioned elements still work right */
    position: static;
    display: block;
    /* general overrides of jQuery UI's styles */
    white-space: inherit;
    padding: 0;
    margin: 0;
    font-weight: inherit;
    line-height: inherit;
    color: inherit !important;
    cursor: inherit;
}


/****************************************
A .Secondary button indicates the less emphasized option.  It can
also be used where a plain, not visually bold button is desired.
This is also the default visual style for buttons that have the
HarmonyButton class but no other button sub-type.
This is also the default visual style of .HarmonyButton buttons with no other subclass
****************************************/
.HarmonyButton,
.HarmonyButton.Secondary {
    color: #404040 !important;
    background: #E9E9E9;
    background-image: -webkit-linear-gradient(top, #E9E9E9 0%, #E9E9E9 100%);
    background-image: -moz-linear-gradient(top, #E9E9E9 0%, #E9E9E9 100%);
    background-image: linear-gradient(to bottom, #E9E9E9 0%, #E9E9E9 100%);
    border-radius: 4px;
    border: 1px solid #E9E9E9;
}
.HarmonyButton:hover,
.HarmonyButton:focus,
.HarmonyButton.Secondary:hover,
.HarmonyButton.Secondary:focus {
    background: #F3F3F3;
    border: 1px solid #F3F3F3;
}
/* disabled styles come after :hover styles so that hovering over a [disabled] element doesn't make it do anything */
.HarmonyButton[disabled],
.HarmonyButton.Disabled,
.HarmonyButton.Secondary[disabled],
.HarmonyButton.Secondary.Disabled {
    color: #aaa !important;
    background: #f8f8f8;
    border-color: #e2e2e2;
}

/****************************************
A .Primary button indicates the main action (e.g. "Continue to Step 2")
and is usually contrasted by a .Secondary button (e.g. "Cancel" or "Go Back") 
****************************************/

.HarmonyButton.Primary {
    color: #fff !important;
    background-color: #02B8F3;
    background-image: -webkit-linear-gradient(top, #02B8F3 0%, #02B8F3 100%);
    background-image: -moz-linear-gradient(top, #02B8F3 0%, #02B8F3 100%);
    background-image: linear-gradient(to bottom, #02B8F3 0%, #02B8F3 100%);
    border-color: #02B8F3;

}
.HarmonyButton.Primary:hover,
.HarmonyButton.Primary:focus {
    border-color: #02B8F3;
}
/* disabled styles come after :hover styles so that hovering over a [disabled] element doesn't make it do anything */
.HarmonyButton.Primary[disabled],
.HarmonyButton.Primary.Disabled {
    color: #eef8ff !important;
    background: #a3b7cc;
    border-color: #abc;
}

/* Every button has a "knockout" variant with colorful
border and text on light/white background */
.HarmonyButton.KO.Primary {
    color: #365ebf !important;
}
.HarmonyButton.KO.Primary[disabled],
.HarmonyButton.KO.Primary.Disabled {
    color: #96B3EB !important;
}

/****************************************
A .Success button is used for creating/confirming something
****************************************/

.HarmonyButton.Success {
    color: #fff !important;
    background: #02B8F3;
    background-image: -webkit-linear-gradient(top, #02B8F3 0%, #02B8F3 100%);
    background-image: -moz-linear-gradient(top, #02B8F3 0%, #02B8F3 100%);
    background-image: linear-gradient(to bottom, #02B8F3 0%, #02B8F3 100%);
    border-color: #02B8F3;
    border-radius: 4px;
    border: 1px solid #02B8F3;
}
.HarmonyButton.Success:hover,
.HarmonyButton.Success:focus {
    background: #36CEFF;
    border: 1px solid #36CEFF;
}
.HarmonyButton.Success[disabled],
.HarmonyButton.Success.Disabled {
    color: #efe !important;
    background: #02B8F3;
    opacity: 0.4;
    border-color: #02B8F3;
    border: 1px solid #02B8F3;
}

/* Every button has a "light" variant with colorful
border and text on light/white background */
.HarmonyButton.KO.Success {
    color: #02B8F3 !important;
}
.HarmonyButton.KO.Success[disabled],
.HarmonyButton.KO.Success.Disabled {
    color: #aca !important;
}


/****************************************
A .Danger button is used for deleting/removing something
****************************************/

.HarmonyButton.Danger {
    color: #fff !important;
    background-color: #ef777c;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmNzc3YyIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTMzZDQzIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+");
    background-image: -webkit-linear-gradient(top, #ef777c 0%, #e33d43 100%);
    background-image: -moz-linear-gradient(top, #ef777c 0%, #e33d43 100%);
    background-image: linear-gradient(to bottom, #ef777c 0%, #e33d43 100%);
    border-color: #e33d43;
    border-bottom-color: #bd0000;
}
.HarmonyButton.Danger:hover,
.HarmonyButton.Danger:focus {
    border-color: #bd0000;
}
.HarmonyButton.Danger[disabled],
.HarmonyButton.Danger.Disabled {
    color: #fee !important;
    background: #c88;
    border-color: #b77;
}

/* Every button has a "knockout" variant with colorful
border and text on light/white background */
.HarmonyButton.KO.Danger {
    color: #e33d43 !important;
}
.HarmonyButton.KO.Danger[disabled],
.HarmonyButton.KO.Danger.Disabled {
    color: #daa !important;
}



/****************************************
Every button has a "knockout" variant with colorful text
on light/white background.  It is imperative that these styles
come after the other .HarmonyButton.BUTTONTYPE styles
so that these rules take precedence for the .KO buttons
****************************************/
.HarmonyButton.KO {
    background-color: #fff;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjNmM2YzIiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+");
    background-image: -webkit-linear-gradient(top, #fff 0%, #f3f3f3 100%);
    background-image: -moz-linear-gradient(top, #fff 0%, #f3f3f3 100%);
    background-image: linear-gradient(to bottom, #fff 0%, #f3f3f3 100%);
    border-color: #ddd;
    border-bottom-color: #ccc;
}
.HarmonyButton.KO:hover,
.HarmonyButton.KO:focus {
    border-color: #ddd;
}
.HarmonyButton.KO[disabled],
.HarmonyButton.KO.Disabled {
    color: #aaa !important;
    background: #f8f8f8;
    border-color: #e2e2e2;
}



/****************************************
Some buttons contain icons of various types
****************************************/

/* required to override a {button>span} style in styles.css */
.HarmonyButton span {
    position: relative;
    display: inline-block;
    padding: 0;
	margin: 0;
    height: auto;
}
/* make this an icon */
.HarmonyButton .Icon {
    display: inline-block;
	width: 20px;
	height: 20px;
	position: absolute;
	/* left align */
	left: 1.5em; /* @depends(.HarmonyButton padding) */
	/* vertical center */
	top: 50%;
	margin-top: -11px; /* @depends(this height)*/
	margin-left: -6px;
}

/* icons inside disabled buttons get reduced opacity so that they look grayed out */
.HarmonyButton[disabled] .Icon,
.HarmonyButton.Disabled  .Icon {
    opacity: 0.5;
}

/* prevent buttons with long text from wrapping so that instead the button scales horizontally */
.HarmonyButton .Text.NoWrap {
    white-space: nowrap;
}

/* allow for proper spacing between the icon and the text that follows */
.HarmonyButton .Icon + .Text {
    margin-left: 20px; /* @depends(.HarmonyButton>.Icon width) */
}

/* Icons default to on left side of text; they could be on the right too */
.HarmonyButton .Icon.AlignRight {
    left: auto;
    right: 1.5em; /* @depends(.HarmonyButton padding) */
    margin-left: 0;
    margin-right: -6px;
}
.HarmonyButton .Icon.AlignRight + .Text {
    margin-left: 0;
    margin-right: 20px; /* @depends(.HarmonyButton>.Icon width) */
}

/* Icons default to vertically centered; can be top or bottom aligned to button's contents */
.HarmonyButton .Icon.AlignTop {
    margin-top: 0;
    top: 0.5em; /* @depends(.HarmonyButton padding) */
}

/* Icon without accompanying text */
.HarmonyButton.NoText {
    padding-left: 1em;
    padding-right: 1em;
}
/* Even narrower, useful for small icons like "dropdown" */
.HarmonyButton.Skinny {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/*
When the icon is the only thing in the button, we need to add in
a pseudo-element that will make the button still have the appropriate height.
We do it here with a :after pseudo-element, which creates a new element inside
of the button as its last child.  We make that element the appropriate size
so that there is plenty of space inside the button for the icon.
We are using the :after element because the :before element is used by
IE8 specific styles.  We can't use ::before or ::after because it won't work in IE8.
*/
.HarmonyButton.NoText .Icon {
    left: 50%;
    margin-left: -10px;
}
.HarmonyButton.NoText:after {
    content: "";
    display: inline-block;
	width: 20px;
}

/****************************************
Button capsules contain one or more buttons squeezed next to each other
You can place one or more .HarmonyButton elements into a .HarmonyButtonGroup and it will Just Work (TM)
****************************************/

.HarmonyButtonGroup {
    position: relative;
    padding: 0;
    /* same margin as .HarmonyButton has */
    margin: 0.5em 0 0.5em 0.5em;
    /* play nice with other things */
    display: inline-block;
	vertical-align: middle;
}

/*
Since this contains floats, we need to apply a clearfix hack
so that this element is as high as the floated elements inside of it.
This uses the micro-clearfix hack from
http://nicolasgallagher.com/micro-clearfix-hack/
*/
.HarmonyButtonGroup:before,
.HarmonyButtonGroup:after {
    content: " ";
    display: table;
}
.HarmonyButtonGroup:after {
    clear: both;
}

/*
float the interior buttons
*/
.HarmonyButtonGroup > .HarmonyButton {
    float: left;
    /* make left border of one button overlap with right border of next button */
    margin: 0 0 0 -1px;
    z-index: 0;
}
/*
For visually prominent buttons, up their z-index so that their
border will appear in front of the border of the less-visually-prominent
button immediately to its right
*/
.HarmonyButtonGroup > .HarmonyButton.Primary,
.HarmonyButtonGroup > .HarmonyButton.Danger,
.HarmonyButtonGRoup > .HarmonyButton.Sucess {
    z-index: 2;
}
/*
When hovering over a button, bump up its z-index so that the button's
border will be visible on top of the button to it's right.
*/
.HarmonyButtonGroup > .HarmonyButton:hover,
.HarmonyButtonGroup > .HarmonyButton:focus {
    z-index: 1;
}
/*
fix rounded corners; only first and last have rounded corners
and that's on the outer edge
*/
.HarmonyButtonGroup > .HarmonyButton {
    border-radius: 0;
}
.HarmonyButtonGroup > .HarmonyButton:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    /* first button doesn't have anything to its left, so no
    borders to overlap, so it doesn't need the negative margin */
    margin-left: 0;
}
.HarmonyButtonGroup > .HarmonyButton:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}


/****************************************
Different predefined button icon types
****************************************/

.HarmonyButton .Icon {
    background: url("images/icons/harmonyButtonIcons.png");
    background-repeat: no-repeat;
}

/* default for buttons is the black icon, for a light background */
.HarmonyButton .Icon.CaretRightBig   { background-position:    0px -20px; }
.HarmonyButton .Icon.CaretLeftBig    { background-position:  -20px -20px; }
.HarmonyButton .Icon.CaretRightSmall { background-position:  -40px -20px; }
.HarmonyButton .Icon.CaretLeftSmall  { background-position:  -60px -20px; }
.HarmonyButton .Icon.PlusBig         { background-position:  -80px -20px; }
.HarmonyButton .Icon.PlusMedium      { background-position: -100px -20px; }
.HarmonyButton .Icon.PlusSmall       { background-position: -120px -20px; }
.HarmonyButton .Icon.Dropdown        { background-position: -140px -20px; }
.HarmonyButton .Icon.Configure       { background-position: -160px -20px; }
.HarmonyButton .Icon.Return          { background-position: -180px -20px; }
.HarmonyButton .Icon.Search          { background-position: -200px -20px; }
.HarmonyButton .Icon.Help            { background-position: -220px -20px; }
.HarmonyButton .Icon.Info            { background-position: -240px -20px; }
.HarmonyButton .Icon.Alert           { background-position: -260px -20px; }
.HarmonyButton .Icon.TrashCan        { background-position: -280px -20px; }

/* some dark-colored buttons need a light colored icon */
.HarmonyButton.Primary .Icon.CaretRightBig   { background-position:    0px 0; }
.HarmonyButton.Primary .Icon.CaretLeftBig    { background-position:  -20px 0; }
.HarmonyButton.Primary .Icon.CaretRightSmall { background-position:  -40px 0; }
.HarmonyButton.Primary .Icon.CaretLeftSmall  { background-position:  -60px 0; }
.HarmonyButton.Primary .Icon.PlusBig         { background-position:  -80px 0; }
.HarmonyButton.Primary .Icon.PlusMedium      { background-position: -100px 0; }
.HarmonyButton.Primary .Icon.PlusSmall       { background-position: -120px 0; }
.HarmonyButton.Primary .Icon.Dropdown        { background-position: -140px 0; }
.HarmonyButton.Primary .Icon.Configure       { background-position: -160px 0; }
.HarmonyButton.Primary .Icon.Return          { background-position: -180px 0; }
.HarmonyButton.Primary .Icon.Search          { background-position: -200px 0; }
.HarmonyButton.Primary .Icon.Help            { background-position: -220px 0; }
.HarmonyButton.Primary .Icon.Info            { background-position: -240px 0; }
.HarmonyButton.Primary .Icon.Alert           { background-position: -260px 0; }
.HarmonyButton.Primary .Icon.TrashCan        { background-position: -280px 0; }

.HarmonyButton.Success .Icon.CaretRightBig   { background-position:    0px 0; }
.HarmonyButton.Success .Icon.CaretLeftBig    { background-position:  -20px 0; }
.HarmonyButton.Success .Icon.CaretRightSmall { background-position:  -40px 0; }
.HarmonyButton.Success .Icon.CaretLeftSmall  { background-position:  -60px 0; }
.HarmonyButton.Success .Icon.PlusBig         { background-position:  -80px 0; }
.HarmonyButton.Success .Icon.PlusMedium      { background-position: -100px 0; }
.HarmonyButton.Success .Icon.PlusSmall       { background-position: -120px 0; }
.HarmonyButton.Success .Icon.Dropdown        { background-position: -140px 0; }
.HarmonyButton.Success .Icon.Configure       { background-position: -160px 0; }
.HarmonyButton.Success .Icon.Return          { background-position: -180px 0; }
.HarmonyButton.Success .Icon.Search          { background-position: -200px 0; }
.HarmonyButton.Success .Icon.Help            { background-position: -220px 0; }
.HarmonyButton.Success .Icon.Info            { background-position: -240px 0; }
.HarmonyButton.Success .Icon.Alert           { background-position: -260px 0; }
.HarmonyButton.Success .Icon.TrashCan        { background-position: -280px 0; }

.HarmonyButton.Danger .Icon.CaretRightBig   { background-position:    0px 0; }
.HarmonyButton.Danger .Icon.CaretLeftBig    { background-position:  -20px 0; }
.HarmonyButton.Danger .Icon.CaretRightSmall { background-position:  -40px 0; }
.HarmonyButton.Danger .Icon.CaretLeftSmall  { background-position:  -60px 0; }
.HarmonyButton.Danger .Icon.PlusBig         { background-position:  -80px 0; }
.HarmonyButton.Danger .Icon.PlusMedium      { background-position: -100px 0; }
.HarmonyButton.Danger .Icon.PlusSmall       { background-position: -120px 0; }
.HarmonyButton.Danger .Icon.Dropdown        { background-position: -140px 0; }
.HarmonyButton.Danger .Icon.Configure       { background-position: -160px 0; }
.HarmonyButton.Danger .Icon.Return          { background-position: -180px 0; }
.HarmonyButton.Danger .Icon.Search          { background-position: -200px 0; }
.HarmonyButton.Danger .Icon.Help            { background-position: -220px 0; }
.HarmonyButton.Danger .Icon.Info            { background-position: -240px 0; }
.HarmonyButton.Danger .Icon.Alert           { background-position: -260px 0; }
.HarmonyButton.Danger .Icon.TrashCan        { background-position: -280px 0; }

/* knockout-style buttons get thematically colored icons */
.HarmonyButton.KO.Primary .Icon.CaretRightBig   { background-position:    0px -40px; }
.HarmonyButton.KO.Primary .Icon.CaretLeftBig    { background-position:  -20px -40px; }
.HarmonyButton.KO.Primary .Icon.CaretRightSmall { background-position:  -40px -40px; }
.HarmonyButton.KO.Primary .Icon.CaretLeftSmall  { background-position:  -60px -40px; }
.HarmonyButton.KO.Primary .Icon.PlusBig         { background-position:  -80px -40px; }
.HarmonyButton.KO.Primary .Icon.PlusMedium      { background-position: -100px -40px; }
.HarmonyButton.KO.Primary .Icon.PlusSmall       { background-position: -120px -40px; }
.HarmonyButton.KO.Primary .Icon.Dropdown        { background-position: -140px -40px; }
.HarmonyButton.KO.Primary .Icon.Configure       { background-position: -160px -40px; }
.HarmonyButton.KO.Primary .Icon.Return          { background-position: -180px -40px; }
.HarmonyButton.KO.Primary .Icon.Search          { background-position: -200px -40px; }
.HarmonyButton.KO.Primary .Icon.Help            { background-position: -220px -40px; }
.HarmonyButton.KO.Primary .Icon.Info            { background-position: -240px -40px; }
.HarmonyButton.KO.Primary .Icon.Alert           { background-position: -260px -40px; }
.HarmonyButton.KO.Primary .Icon.TrashCan        { background-position: -280px -40px; }

.HarmonyButton.KO.Success .Icon.CaretRightBig   { background-position:    0px -60px; }
.HarmonyButton.KO.Success .Icon.CaretLeftBig    { background-position:  -20px -60px; }
.HarmonyButton.KO.Success .Icon.CaretRightSmall { background-position:  -40px -60px; }
.HarmonyButton.KO.Success .Icon.CaretLeftSmall  { background-position:  -60px -60px; }
.HarmonyButton.KO.Success .Icon.PlusBig         { background-position:  -80px -60px; }
.HarmonyButton.KO.Success .Icon.PlusMedium      { background-position: -100px -60px; }
.HarmonyButton.KO.Success .Icon.PlusSmall       { background-position: -120px -60px; }
.HarmonyButton.KO.Success .Icon.Dropdown        { background-position: -140px -60px; }
.HarmonyButton.KO.Success .Icon.Configure       { background-position: -160px -60px; }
.HarmonyButton.KO.Success .Icon.Return          { background-position: -180px -60px; }
.HarmonyButton.KO.Success .Icon.Search          { background-position: -200px -60px; }
.HarmonyButton.KO.Success .Icon.Help            { background-position: -220px -60px; }
.HarmonyButton.KO.Success .Icon.Info            { background-position: -240px -60px; }
.HarmonyButton.KO.Success .Icon.Alert           { background-position: -260px -60px; }
.HarmonyButton.KO.Success .Icon.TrashCan        { background-position: -280px -60px; }

.HarmonyButton.KO.Danger .Icon.CaretRightBig   { background-position:    0px -120px; }
.HarmonyButton.KO.Danger .Icon.CaretLeftBig    { background-position:  -20px -120px; }
.HarmonyButton.KO.Danger .Icon.CaretRightSmall { background-position:  -40px -120px; }
.HarmonyButton.KO.Danger .Icon.CaretLeftSmall  { background-position:  -60px -120px; }
.HarmonyButton.KO.Danger .Icon.PlusBig         { background-position:  -80px -120px; }
.HarmonyButton.KO.Danger .Icon.PlusMedium      { background-position: -100px -120px; }
.HarmonyButton.KO.Danger .Icon.PlusSmall       { background-position: -120px -120px; }
.HarmonyButton.KO.Danger .Icon.Dropdown        { background-position: -140px -120px; }
.HarmonyButton.KO.Danger .Icon.Configure       { background-position: -160px -120px; }
.HarmonyButton.KO.Danger .Icon.Return          { background-position: -180px -120px; }
.HarmonyButton.KO.Danger .Icon.Search          { background-position: -200px -120px; }
.HarmonyButton.KO.Danger .Icon.Help            { background-position: -220px -120px; }
.HarmonyButton.KO.Danger .Icon.Info            { background-position: -240px -120px; }
.HarmonyButton.KO.Danger .Icon.Alert           { background-position: -260px -120px; }
.HarmonyButton.KO.Danger .Icon.TrashCan        { background-position: -280px -120px; }


/************************************************************
Make it easy to use the HarmonyButton icons... outside of a HarmonyButton
************************************************************/
.HarmonyButtonIcon {
    display: inline-block;
	width: 20px;
	height: 20px;
    background: url("images/icons/harmonyButtonIcons.png");
    background-repeat: no-repeat;
}

/* default for buttons is the black icon, for a light background */
.HarmonyButtonIcon.CaretRightBig   { background-position:    0px -20px; }
.HarmonyButtonIcon.CaretLeftBig    { background-position:  -20px -20px; }
.HarmonyButtonIcon.CaretRightSmall { background-position:  -40px -20px; }
.HarmonyButtonIcon.CaretLeftSmall  { background-position:  -60px -20px; }
.HarmonyButtonIcon.PlusBig         { background-position:  -80px -20px; }
.HarmonyButtonIcon.PlusMedium      { background-position: -100px -20px; }
.HarmonyButtonIcon.PlusSmall       { background-position: -120px -20px; }
.HarmonyButtonIcon.Dropdown        { background-position: -140px -20px; }
.HarmonyButtonIcon.Configure       { background-position: -160px -20px; }
.HarmonyButtonIcon.Return          { background-position: -180px -20px; }
.HarmonyButtonIcon.Search          { background-position: -200px -20px; }
.HarmonyButtonIcon.Help            { background-position: -220px -20px; }
.HarmonyButtonIcon.Info            { background-position: -240px -20px; }
.HarmonyButtonIcon.Alert           { background-position: -260px -20px; }
.HarmonyButtonIcon.TrashCan        { background-position: -280px -20px; }

.HarmonyButtonIcon.Success.CaretRightBig   { background-position:    0px -60px; }
.HarmonyButtonIcon.Success.CaretLeftBig    { background-position:  -20px -60px; }
.HarmonyButtonIcon.Success.CaretRightSmall { background-position:  -40px -60px; }
.HarmonyButtonIcon.Success.CaretLeftSmall  { background-position:  -60px -60px; }
.HarmonyButtonIcon.Success.PlusBig         { background-position:  -80px -60px; }
.HarmonyButtonIcon.Success.PlusMedium      { background-position: -100px -60px; }
.HarmonyButtonIcon.Success.PlusSmall       { background-position: -120px -60px; }
.HarmonyButtonIcon.Success.Dropdown        { background-position: -140px -60px; }
.HarmonyButtonIcon.Success.Configure       { background-position: -160px -60px; }
.HarmonyButtonIcon.Success.Return          { background-position: -180px -60px; }
.HarmonyButtonIcon.Success.Search          { background-position: -200px -60px; }
.HarmonyButtonIcon.Success.Help            { background-position: -220px -60px; }
.HarmonyButtonIcon.Success.Info            { background-position: -240px -60px; }
.HarmonyButtonIcon.Success.Alert           { background-position: -260px -60px; }
.HarmonyButtonIcon.Success.TrashCan        { background-position: -280px -60px; }

/* light icon, for a dark background */
.UseLightHBIcon .HarmonyButtonIcon.CaretRightBig   { background-position:    0px 0; }
.UseLightHBIcon .HarmonyButtonIcon.CaretLeftBig    { background-position:  -20px 0; }
.UseLightHBIcon .HarmonyButtonIcon.CaretRightSmall { background-position:  -40px 0; }
.UseLightHBIcon .HarmonyButtonIcon.CaretLeftSmall  { background-position:  -60px 0; }
.UseLightHBIcon .HarmonyButtonIcon.PlusBig         { background-position:  -80px 0; }
.UseLightHBIcon .HarmonyButtonIcon.PlusMedium      { background-position: -100px 0; }
.UseLightHBIcon .HarmonyButtonIcon.PlusSmall       { background-position: -120px 0; }
.UseLightHBIcon .HarmonyButtonIcon.Dropdown        { background-position: -140px 0; }
.UseLightHBIcon .HarmonyButtonIcon.Configure       { background-position: -160px 0; }
.UseLightHBIcon .HarmonyButtonIcon.Return          { background-position: -180px 0; }
.UseLightHBIcon .HarmonyButtonIcon.Search          { background-position: -200px 0; }
.UseLightHBIcon .HarmonyButtonIcon.Help            { background-position: -220px 0; }
.UseLightHBIcon .HarmonyButtonIcon.Info            { background-position: -240px 0; }
.UseLightHBIcon .HarmonyButtonIcon.Alert           { background-position: -260px 0; }
.UseLightHBIcon .HarmonyButtonIcon.TrashCan        { background-position: -280px 0; }