span.ssOuterBtn {
    -x-system-font:none;
    background:transparent url(graphics/Controls/Button/bg_button_a.gif) no-repeat scroll right top;
    color:#444444;
    display:block;
    float:left;
    font-family:arial,sans-serif;
    font-size:12px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    height:24px;
    line-height:normal;
    margin-right:6px;
    opacity:0.6;
    padding-right:18px;
    text-decoration:none;
}

a.ssInnerBtn:active {
    background-position:right bottom;
    color:#000000;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}
span a.ssInnerBtn:active {
    background-position:left bottom;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
    padding:6px 0 4px 18px;
}
span.ssOuterBtn:active {
    background-position:right bottom;
    color:#000000;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}
a.ssInnerBtn:hover {
    color:#000000;
}
span.ssOuterBtn:hover {
    opacity:1;
}

a.ssInnerBtn {
    background:transparent url(graphics/Controls/Button/bg_button_span.gif) no-repeat scroll 0 0;
    color:#222222;
    display:block;
    line-height:14px;
    padding:5px 0 5px 18px;
    text-decoration:none;
}

/*********
* SSGoogleButton Styling
***********/

/* Start custom button CSS here
    ---------------------------------------- */
    .ssBtn {
      display:inline-block;
      background:none;
      margin:0;
      padding:3px 0;
      border-width:0;
      overflow:visible;
      font:100%/1.2 Arial,Sans-serif;
      text-decoration:none;
      color:#333;
      }
    * html button.ssBtn {
      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.ssBtn {
      margin:0 -3px;
      }
    .ssBtn span {
      background:#ddd url(graphics/Controls/Button/bg-button.gif) repeat-x 0 0;
      margin:0;
      padding:3px 0;
      border-left:1px solid #bbb;
      border-right:1px solid #aaa;
      }
    * html .ssBtn span {
      padding-top:0;
      }
    .ssBtn span span {
      position:relative;
      padding:3px .4em;
      border-width:0;
      border-top:1px solid #bbb;
      border-bottom:1px solid #aaa;
      }


/* only needed if implementing separate hover/focus/active state for buttons */
    .ssBtn:hover span, .ssBtn:hover span span, .ssBtn:focus span, .ssBtn:focus span span {
      cursor:pointer; /* important for any clickable/pressable element */
      border-color:#9cf !important;
      color:#000;
      }
    .ssBtn:active span {
      background-position:0 -400px;
      outline:none;
      }
    .ssBtn:focus, .ssBtn:active {
      outline:none; /* doesn't seem to be respected for <button>, only <a> */
      }