Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="mediaDisplayArea" style="margin-top: 2px;">
               <div id="ambienceContainer">
                  <div id="ambience"></div>
               </div>
               <!-- copy and paste. Modify height and width if desired. --> <a href="http://content.screencast.com/users/DLavin23/folders/Snagit/media/d8a32c55-7540-4474-8778-890649550a4a/2014-08-15_15-01-44.png"><img style="width: 457px; height: 38px;" class="embeddedObject" src="http://content.screencast.com/users/DLavin23/folders/Snagit/media/d8a32c55-7540-4474-8778-890649550a4a/2014-08-15_15-01-44.png" border="0" height="38" width="457"></a>   
            </div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

SassMeister-output.css

.button {
  display: block;
  padding: 0.2em 0 0.2em 0;
  width: 100%;
  border: 1px solid #ccc;
  font-size: 1.0em;
  color: #fff !important;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
  background-repeat: repeat-x;
  background-image: url(../../img/common/buttondarkorangebackground.png);
  background-color: #f7941d;
  line-height: 1.4em;
}

button {
  min-width: 80px;
}

.button:hover {
  color: #fff !important;
  cursor: pointer;
  background-repeat: repeat-x;
  background-image: url(../../img/common/buttonorangebackground.png);
  background-color: #f7941d;
}

.style1 {
  background-image: none;
  background-color: #838383;
}

.style1:hover {
  background-repeat: repeat-x;
  background-image: url(../../img/common/buttondarkorangebackground.png);
  background-color: #f7941d;
  color: #fff !important;
}

.disabledButton {
  background-color: #838383;
  color: #CCCCCC !important;
  background-image: none;
}

.disabledButton:hover {
  background-color: #838383 !important;
  color: #CCCCCC !important;
  background-image: none !important;
}

.style2 {
  border: 1px solid #e45311;
}

.style3 {
  color: #f47b20 !important;
  background: #f5d7b4;
  border: solid 1px #e45311;
}

.style3:hover {
  color: #fff !important;
  background-repeat: repeat-x;
  background-image: url(../../img/common/buttonorangebackground.png);
  background-color: #f7941d;
}

.tablink {
  color: #F7671D;
}

img {
  -ms-interpolation-mode: bicubic;
}

textarea {
  resize: none;
}

a.tooltip {
  color: #F47B20;
  text-decoration: none;
}

.button-special {
  display: block;
  padding: 0.2em 0 0.2em 0;
  width: 100%;
  border: 1px solid #9ab15d;
  font-size: 13px !important;
  color: #fff !important;
  cursor: pointer;
  height: 30px;
  text-align: center;
  text-decoration: none !important;
  font-weight: bold !important;
  background-color: #a5ba66;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  line-height: 2.3em;
}

.button-special:hover {
  background: #a9b867 url(../../img/tools/dl-button-hv-bg.png) repeat-x bottom left !important;
  /*width: 150px;
  height: 30px;
  display: block;*/
  background-image: none;
}

SassMeister-rendered.html

<div id="mediaDisplayArea" style="margin-top: 2px;">
               <div id="ambienceContainer">
                  <div id="ambience"></div>
               </div>
               <!-- copy and paste. Modify height and width if desired. --> <a href="http://content.screencast.com/users/DLavin23/folders/Snagit/media/d8a32c55-7540-4474-8778-890649550a4a/2014-08-15_15-01-44.png"><img style="width: 457px; height: 38px;" class="embeddedObject" src="http://content.screencast.com/users/DLavin23/folders/Snagit/media/d8a32c55-7540-4474-8778-890649550a4a/2014-08-15_15-01-44.png" border="0" height="38" width="457"></a>   
            </div>

I can dig it.

• !important is the AIDS of css. Avoid at all costs unless it's some shitty IE only hack.
• Not sure what the background images are doing
• Sass variables and the extends feature would have been dope to use I think.