/**
 * Specifies how "buttons" look.  This stylesheet is akin to the late XML-based Button Generator.
 * The Button Generator has a set of XML files for each locale that specify the styles for each
 * class of button and generates static image files.  This stylesheet is a replacement for those
 * XML files.
 */

/* To style a submit button, we use a fake button (A tag) and style that, then
   wrap it in an invisible <button> tag to retain form submission functionality. */
button.buttonTag {
   background: transparent;
   border: 0;
   outline: none;
   cursor: pointer;
   padding: 0;
   margin: 0;
   width: 0;  /* Trick for IE */
   height: auto;
   overflow: visible;  /* visible for LTR text - auto for RTL */
   text-transform: uppercase;  /* Only needed for IE */
   vertical-align: middle;
}
button.buttonTag[class] {
   width: auto;  /* All other browsers use auto */
}
.buttonTag {
   position: relative;
   display: inline-block;  /* Only needed for IE */
}

/*
 * IE insists on pushing up buttons that are wrapped in a <button> tag.  Thus, force them down
 * for IE only.
*/
button.buttonTag .buttonLarge {
   *padding: 3px 7px 3px 7px;
   *top: 1px;
   *line-height: 1;
}

button.buttonTag .buttonRegular, button.buttonTag .buttonSmall {
   *padding: 2px 7px 6px 7px;
   *top: 0.3mm;
   *line-height: 1;
}

/* A separate class because not all buttons have gradients.  CSS3 pie does not accept over-rides,
 * so the best way to control who does and does not have a gradient background is to factor out
 * the gradient properties and require each button class to reference this if applicable. */
.buttonEnabled {
   background-image: url(../images/buttons/buttonRegular_background.png); /* for Firefox 3.5 and earlier */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.19, rgb(240,241,251)), color-stop(0.49, rgb(204,205,221)), color-stop(0.98, rgb(240,241,251)), color-stop(1, rgb(189,189,198)));
   background: -moz-linear-gradient(center top, rgb(240,241,251) 19%, rgb(204,205,221) 49%, rgb(240,241,251) 98%, rgb(189,189,198) 100%);
   background: linear-gradient(center top, rgb(240,241,251) 19%, rgb(204,205,221) 49%, rgb(240,241,251) 98%, rgb(189,189,198) 100%);
   -pie-background: linear-gradient(center top, rgb(240,241,251) 19%, rgb(204,205,221) 49%, rgb(240,241,251) 98%, rgb(189,189,198) 100%);
   behavior: url(/includes/PIE.htc);
   background-color:white;
}

.buttonLarge {
   padding: 5px 18px;;
   margin: 0px;
   text-transform: uppercase;
   white-space: nowrap;
   position: relative;  /* Only needed for PIE */
   display: inline-block;
   height: 14px;
   *height: 22px;
   text-align: center;
   font-family: Tahoma, Arial, sans-serif;
   font-weight: bold;
   font-size: 11px;
   vertical-align: middle;
   border: 1px solid #969696;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: #969696 0px 0.5px 0.5px;
   -moz-box-shadow: #969696 0px 0.5px 0.5px;
   box-shadow: #969696 0px 1px 1px;
   behavior: url(/includes/PIE.htc);
   -pie-poll: true;
   background: #7843b6;
   color: #fff !important;
}
a.buttonLarge,
a:link.buttonLarge,
a:visited.buttonLarge,
a:hover.buttonLarge,
a:focus.buttonLarge,
a:active.buttonLarge,
span.buttonLarge {
   color: #666666;
   text-decoration: none;
}
img.buttonLarge {
   cursor: pointer;
}

/* Default button class - most buttons use these styles */
.buttonRegular {
   padding: 2px 7px 4px 7px;
   margin: 0px;
   text-transform: uppercase;
   white-space: nowrap;
   position: relative;
   display: inline-block;
   height: 10px;
   *height: 10px;
   text-align: center;
   font-family: Tahoma, Arial, sans-serif;
   font-weight: bold;
   font-size: 10px;
   vertical-align: middle;
   border: 1px solid #969696;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: #969696 0px 0.5px 0.5px;
   -moz-box-shadow: #969696 0px 0.5px 0.5px;
   box-shadow: #969696 0px 0.7px 0.7px;
   behavior: url(/includes/PIE.htc);
   -pie-poll: true;
}
a.buttonRegular,
a:link.buttonRegular,
a:visited.buttonRegular,
a:hover.buttonRegular,
a:focus.buttonRegular,
a:active.buttonRegular,
span.buttonRegular  {
   color: #666666;
   text-decoration: none;
}
img.buttonRegular {
   cursor: pointer;
}

/* Small buttons - used within tables mainly.  Almost everything is the
   same as above, just smaller font and bounding box. */
.buttonSmall {
   padding: 2px 7px 4px 7px;
   margin: 0px;
   text-transform: uppercase;
   white-space: nowrap;
   position: relative;
   display: inline-block;
   height: 9px;
   text-align: center;
   font-family: Tahoma, Arial, sans-serif;
   font-weight: bold;
   font-size: 8px;
   vertical-align: middle;
   border: 1px solid #969696;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: #969696 0px 0.5px 0.5px;
   -moz-box-shadow: #969696 0px 0.5px 0.5px;
   box-shadow: #969696 0px 0.5px 0.5px;
   behavior: url(/includes/PIE.htc);
   -pie-poll: true;
}
a.buttonSmall,
a:link.buttonSmall,
a:visited.buttonSmall,
a:hover.buttonSmall,
a:focus.buttonSmall,
a:active.buttonSmall,
span.buttonSmall  {
   color: #666666;
   text-decoration: none;
}
img.buttonSmall {
   cursor: pointer;
}

/* A button that can not be activated - why would you want this, you ask?
   To indicate something is "greyed out".  We usually swap these in when
   the user clicks a regular button */
.buttonDisabled {
   vertical-align: middle;
   background: #FFFFFF;
   cursor: default;
}
a.buttonDisabled,
a:link.buttonDisabled,
a:visited.buttonDisabled,
a:hover.buttonDisabled,
a:focus.buttonDisabled,
a:active.buttonDisabled,
span.buttonDisabled {
   color: #B2B2B2;
   text-decoration: none;
}