
 /*
  * Button
  */

  .Basis-Button
  {
    /* for border overlay when hover/active/focus */
    position: relative;
    z-index: 1;

    padding: 0;
    margin: 0;

    /* old IE padding fix */
    *overflow: visible;

    font-size: 85%;
    color: black;
    vertical-align: top;

    border: none;
    background: none;

    outline: none;
    cursor: pointer;
  }

 /*
  * Remove inner padding and border 
  * Fixes appearance displayed oddly in FF3/4
  * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
  */
  .Basis-Button::-moz-focus-inner
  {
    border: 0;
    padding: 0;
  }

  .Basis-Button-Caption
  {
    display: block;
    position: relative;
    padding: .4em 0 .45em;
    margin: 0 1.5ex;
  }

  .Basis-Button-Back
  {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    /* old browsers */
    background: #D7D7D7 url(res/button_transparent_bg.png) repeat-x left center; 

   /*
    * SVG fallback(Opera 11.10-, IE9)
    * padding-box here, to avoid using svg for IE8
    */
    background: padding-box #D7D7D7 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KPGxpbmVhckdyYWRpZW50IGlkPSJnNTYzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPg0KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIiBzdG9wLW9wYWNpdHk9IjAuNyIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMC41IiBzdG9wLW9wYWNpdHk9IjAuNSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMC41IiBzdG9wLW9wYWNpdHk9IjAuMiIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMSIgc3RvcC1vcGFjaXR5PSIwIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNTYzKSIgLz4NCjwvc3ZnPg==);

    /* old webkit */
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .7)), color-stop(50%, rgba(255, 255, 255, .5)), color-stop(50%, rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, 0)));

    /* modern browsers */
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
    background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));

    /* IE5.5 - IE7 */
    /*filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#F2F2F2,EndColorStr=#CFCFCF);*/

    /* IE8 */
    /*-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#F2F2F2,EndColorStr=#CFCFCF)";*/

    /* 1px inset border */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;

    border: 1px solid #C0C0C0;
    border-radius: 2px;

    /* animation */
      -moz-transition: .1s ease-in-out;
      -moz-transition-property: background-color, border-color, color, box-shadow, -moz-box-shadow;
      -webkit-transition: .1s ease-in-out;
      -webkit-transition-property: background-color, border-color, color, box-shadow, -webkit-box-shadow;
      -o-transition: .1s ease-in-out;
      -o-transition-property: background-color, border-color, box-shadow, color;
    transition: .1s ease-in-out;
    transition-property: background-color, border-color, box-shadow, color;
  }

  /* state & interaction */

  .Basis-Button:hover,
  .Basis-Button:focus,
  .Basis-Button:active
  {
    z-index: 2;
  }

  .Basis-Button:hover .Basis-Button-Back
  {
    background-color: #BCD7F2;
    border-color: #888;
  }

  .Basis-Button:focus .Basis-Button-Back
  {
    border-color: #888;
    box-shadow: 0 0 3px 1px #B7D9FE inset;
  }

  .Basis-Button:active .Basis-Button-Back
  {
    background-color: #BCD7F2;
    border-color: #888;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15) inset;
  }

  .Basis-Button.disabled
  {
    cursor: default;
    color: #888;
  }

  .Basis-Button.disabled .Basis-Button-Back
  {
    background-color: #F4F4F4;
    border-color: #C0C0C0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  }
