/* Start custom button CSS here http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
    ---------------------------------------- */
.btn {
  display: inline-block;
  background: none;
  margin: 0;
  padding: 0px 0;
  border-width: 0;
  overflow: visible;
  font-size: 11px !important;
  line-height: 20px !important;
  text-decoration: none !important;
  color: #333;
}
    * html button.btn {
      padding-bottom: 1px;
    }
    /* Immediately below is a temporary hack to serve the 
       following margin values only to Gecko browsers
       Gecko browsers add an extra 3px of left/right 
       padding to button elements which can't be overriden.
       Thus, we use -3px of left/right margin to overcome this. */
    html:not([lang*=""]) button.btn {
      margin:0 -3px;
    }
    .btn span {
      background:#ddd url('/neo/graphics/neo/btn-bg.gif') repeat-x 0 0;
      margin:0;
      padding:2px 0;
      border-left: 1px solid #333;
      border-right: 1px solid #222;
    }
    * html .btn span {
      padding-top:0;
    }
    .btn span span {
      position:relative;
      padding:2px .4em;
      border-width:0;
      border-top:1px solid #333;
      border-bottom:1px solid #222;
    }
    
    /* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
    button.pill-l span {
      border-right-width:0;
      }
    button.pill-l span span {
      border-right:1px solid #333;
      }
    button.pill-c span {
      border-right-style:none;
      border-left-color:#fff;
      }
    button.pill-c span span {
      border-right:1px solid #333;
      }
    button.pill-r span {
      border-left-color:#fff;
      }
    
/* only needed if implementing separate hover/focus/active state for buttons */
.btn:hover span,
.btn:hover span span,
.btn:focus span,
.btn:focus span span {
  cursor:pointer; /* important for any clickable/pressable element */
  text-decoration: none !important;
  /* border-color: #0597F5 !important; */
  /* color: #0597F5; */
}
.btn:active span {
  background-position: 0 -400px;
  outline: none;
}
.btn:focus, .btn:active {
  outline: none; /* doesn't seem to be respected for <button>, only <a> */
}

    /* use if one button should be the 'primary' button */
    .primary {
      color: #000 !important;
    }
    .primary span {
      background-position: 0 -400px !important;
    }

a.btn:hover,
a.btn:active,
a.btn:focus {
  color: #999;
}
a.btn:link,
a.btn:visited {
  color: #FFF;
}