/**
 * 2008 New UI: Generic CSS Buttons
 */

/** for regular buttons */
a.buttonClass {
  background: transparent url('/n_images/small_button_orange_right.png') no-repeat scroll top right; 
  display: block;
  float: left;
  width: auto;
  height: 22px; /* image height */
  margin-right: 7px;
  padding-right: 7px; /* right image width */
}

a.buttonClass span {
  display: block;
  line-height: 22px;
  padding-top: 1px;
  padding-right: 10px;
  padding-left: 18px;
  background: transparent url(/n_images/small_button_orange_left.png) no-repeat;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
}

a.buttonClass:hover {
  background-position: right -23px;
}

a.buttonClass:hover span {
  background-position: 0px -23px;
}

/** for form submits */
span.buttonClass {
  margin: 0;
  border: 0 none;
  vertical-align: top;

  background: transparent url('/n_images/small_button_orange_right.png') no-repeat 100% 0%; 
  cursor: pointer;
  display: inline;
  height: 22px; /* image height */
  line-height: 22px;

  /* same font size for consistency */
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: left;
  color: #ffffff;
  text-decoration: none;

  /* Gecko, Opera: position the right image vertically */
  position: relative;
  padding-right: 7px; /* right image width */
  padding-top: 10px;
  bottom: -11px;
}

span.buttonClass input {
  margin: 0;
  border: 0 none;
  vertical-align: top;

  background: transparent url(/n_images/small_button_orange_left.png) no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 22px;
  line-height: 22px;

  /* font */
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: left;
  color: #ffffff;
  text-decoration: none;

  /* Gecko, Opera: position the right image vertically */
  position: relative;
  padding: 1px 0px 3px 10px;
  bottom: 6px;
}

span.buttonClass:hover {
  background-position: 100% -23px;
}

span.buttonClass:hover input {
  background-position: 0% -23px;
}

/* Safari 3.0 and Chrome rules here */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  span.buttonClass {
    bottom: -11px;
  }

  span.buttonClass input {
    bottom: 6px;
  }
}
  */
/** end definition of generic css buttons */