Memory-first Calculator

index.html

<div id="container">
  <div id="the-calculator">
    <div id="the-display">
      <form name="calculator">
        <span id="total">0</span>
      </form>
    </div>
    <div id="the-buttons">
      <div class="button-row clearfix">
        <button id="calc_clear" value="C/E" >C/E</button>
        <button id="calc_back" value="&larr;" >&larr;</button>
        <button id="calc_neg" value="-/+" >-/+</button>
        <button class="calc_op" value="/" >&divide;</button>
      </div>
      <div class="button-row clearfix">
        <button class="calc_int" value="7" >7</button>
        <button class="calc_int" value="8" >8</button>
        <button class="calc_int" value="9" >9</button>
        <button class="calc_op" value="*" >&times;</button>
      </div>
      <div class="button-row clearfix">
        <button class="calc_int" value="4" >4</button>
        <button class="calc_int" value="5" >5</button>
        <button class="calc_int" value="6" >6</button>
        <button class="calc_op" value="-" >-</button>
      </div>
      <div class="button-row clearfix">
        <button class="calc_int" value="1" >1</button>
        <button class="calc_int" value="2" >2</button>
        <button class="calc_int" value="3" >3</button>
        <button class="calc_op" value="+" >+</button>
      </div>
      <div class="button-row clearfix">
        <button id="calc_zero" class="calc_int" value="0" >0</button>
        <button id="calc_decimal" value="." >.</button>
        <button id="calc_eval" value="=" >=</button>
      </div>
      <div id="extra-buttons" class="button-row">
        <button id="calc_denom" value="1/x" ><span class="denominator"><span class="denom-top">1</span><span class="denom-slash">/</span><span class="denom-btm">x</span></span></button>
        <button id="calc_sqrt" value="&radic;" >&radic;</button>
        <button id="calc_square" value="x2" >x<span class="exponent">2</span></button>
        <button id="calc_powerof" class="calc_op" value="^" >y<span class="exponent">x</span></button>
      </div>
    </div>
  </div>
  <div id="the-results">
    <ul id="results_list"><li id="result_default">Memory is Empty</li></ul>
    <a id="result_clear" href="#">Wipe</a>
  </div>
</div>

Memory-first Calculator.markdown

Memory-first Calculator

Visual memory for a calculator.

A Pen by Jake Albaugh on CodePen.

License.

script.js

/*
** global vars
*/

var a = 0,
  b = 0,
  is_a = true,
  is_b = false,
  o = 'nil',
  answer = 0,
  first_a = true,
  first_b = true,
  is_submission = false,
  soft_sub = false,
  display = jQuery('#total');



/*
** tool functions
*/

// console.log
function write(x) {
  console.log(x);
}
// add int to current display value
function changeDisplayVal(i) {
  display.text(display.text() + i);
}
// make * into ×
function  visOps(x) {
  if ( x === '*' ) {
    // return 'u00D7';
    return '×';
  } else if ( x === '/' ) {
    // return 'u00F7';
    return '÷';
  } else {
    return x;
  }
}
// set display value
function setDisplayVal(x) {
  display.text( visOps(x));
}
// make touch animation
function animateButton(obj) {
  var button = obj.addClass('hovering');
  setTimeout(function() {
      button.removeClass('hovering');
  }, 100);
}



/*
** operation functions
*/

// setting a
function set_a(i) {
  if ( is_a ) {
    // nothing if a duplicate decimal
    if ( i === '.' && a.toString().indexOf('.') !== -1 ) {
      write('Duplicate Decimal');
      i = '';
    } else if ( i === '.' && first_a ) {
      i = '0.';
    }
    // first_a time, we need to clear the display
    if ( first_a === true ) {
      if ( i === '0' ) {
        i = '';
      } else {
        // set display value
        setDisplayVal(i);
        // no longer first_a
        first_a = false;
      }
    } else {
      // add int to current display value
      changeDisplayVal(i);
    }

    a = display.text();

    write('Set "a" to ' + a);
  }
}

// setting b
function set_b(i) {
  if ( !is_a ) {
    // nothing if a duplicate decimal
    if ( i === '.' && b.toString().indexOf('.') !== -1 ) {
      write('Duplicate Decimal!');
      i = '';
    } else if ( i === '.' && first_b ) {
      i = '0.';
    }
    // first_b time, we need to clear the display
    if ( first_b === true ) {
      if ( i === '0' ) {
        i = '';
      } else {
        // set display value
        setDisplayVal(i);
        // no longer first_b
        first_b = false;
      }
    } else {
      // add int to current display value
      changeDisplayVal(i);
    }
    // set b to current display Value
    b = display.text();

    write('Set "b" to ' + b);
  }
}

// looping calculator
function loop_calc(answer) {
  write('Loop Calculator');

  a = answer;
  b = 0;
  answer = 0;
  // set display value
  setDisplayVal(a);
}

// setting operator
function set_o(op) {
  // if answer, loop the calculator to prepare for b
  if ( is_submission ) {
    loop_calc(display.text());
    is_submission = false;
  }
  // if new op is submitting calc
  if ( !first_b ) {
    softsubmit_calc();
  }

  // replace or set operator in display
  setDisplayVal(op);
  // replace or set global operator
  o = op;

  if ( is_a ) { is_a = false; }
  if ( !is_b ) { is_b = true; }

  write('Set "o" to ' + o);
}

// soft submit calc
function softsubmit_calc() {
  // evaluate equation
  var preCalc = eval(a + '' + o + '' + b);
  // parse float to 12
  answer = parseFloat(preCalc.toPrecision(12));

  // submit answer to display
  display.text(answer);

  // reset first_b to true
  first_b = true;

  // post result
  newResult(a,o,b,answer);

  write(a + ' ' + o + ' ' + b + ' = ' + answer);

  a = answer;
  b = 0;
  o = o;
  // set display value
  setDisplayVal(o);
  is_a = false;
  is_b = true;

  first_b = true;

  soft_sub = true;

  write('Soft Submission');
}

// submit calculator
function submit_calc() {
  write('Submission');
  if ( first_b === false ) {
    var preCalc = 0;
    if ( o === "^" ) {
        // evaluate equation
        preCalc = Math.pow(a,b);
    } else {
        // evaluate equation
        preCalc = eval(a + '' + o + '' + b);
    }
    // parse float to 12
    answer = parseFloat(preCalc.toPrecision(12));

    // submit answer to display
    display.text(answer);
    // display is now the answer
    is_submission = true;
    // reset first_b to true
    first_b = true;

    // post result
    newResult(a,o,b,answer);

    write(a + ' ' + o + ' ' + b + ' = ' + answer);
  } else {
    write("You can't do that yet");
  }
}

// negging value
function neg() {
  display.text(display.text() * -1);
  if ( is_submission ) {
    a = a * -1;
  } else {
    if ( is_a ) {
      a = a * -1;
      setDisplayVal(a);
    } else {
      b = b * -1;
      setDisplayVal(b);
    }
  }
}

// resetting calculator
function reset_calc() {
  a = 0;
  b = 0;
  o = 'nil';
  answer = 0;
  is_a = true;
  is_b = false;
  first_a = true;
  first_b = true;
  is_submission = false;
  soft_sub = false;
  display.text(0);

  // reset display value
  setDisplayVal(0);

  write('Calculator Reset');
}

// backspacing value
function backspace() {
  if ( display.text() !== '' && display.text() !== '0' ) {
    display.text( display.text().substring(0, display.text().length - 1) );
    if ( is_a === true ) {
        a = parseFloat(a.toString().substring(0, a.toString().length - 1 ));
    } else {
        b = parseFloat(b.toString().substring(0, b.toString().length - 1 ));
    }
  } else {
    write('Nothing Left to Backspace');
  }
}

// set value to memory value
function memory(i) {
  if ( is_submission ) {
    loop_calc(i);
  } else if ( is_a ) {
    loop_calc(i);
  } else {
    set_b(i);
  }
  answer = a;
}



/*
** logging to memory console
*/

function newResult(a,o,b,answer) {
  var results = jQuery('#results_list');
  var result = '' +
  '<li class="result"><span class="equation">' + a + ' ' +  visOps(o) + ' ' + b + ' </span>' +
  '<span class="answer">' + answer + '</span> <span class="use"><a class="calc_use" href="#">Use</a></span></li>';
  results.prepend(result).children('li').fadeIn(200);
  if ( jQuery('#result_default') ) {
    jQuery('#result_default').remove();
  }
  // click use
  jQuery('.calc_use').off('click').on('click', function() {
    var i = jQuery(this).parent('.use').siblings('.answer').text();
    jQuery(this).parents('.result').animate({'opacity': '0.5'},200).animate({'opacity': '1'},200);
    jQuery('#total').animate({'opacity': '0.5'},200).animate({'opacity': '1'},200);
    memory(i);
    return false;
  });
}



/*
** complex functions
*/

function sqrt(i) {
  write('Square Root');
  var s = Math.sqrt(i);
  answer = s;
  write('u221A' + i + ' = ' + s);
  loop_calc(s);
  newResult('','√',i,s);
  // submit answer to display
  display.text(answer);
  // display is now the answer
  is_submission = true;
  // reset first_b to true
  first_b = true;
}

function square(i) {
  write('Square');
  var s = i * i;
  answer = s;
  write(i + ' u005E 2 = ' + s );
  loop_calc(s);
  newResult(i,' &#94; 2','',s);
  // submit answer to display
  display.text(answer);
  // display is now the answer
  is_submission = true;
  // reset first_b to true
  first_b = true;
}

function denom(i) {
  write('Denominator');
  var s = 1 / i;
  answer = s;
  write('1 / ' + i + ' = ' + s );
  loop_calc(s);
  newResult(1,' / ',i,s);
  // submit answer to display
  display.text(answer);
  // display is now the answer
  is_submission = true;
  // reset first_b to true
  first_b = true;
}



/*
** Usage - Click Events
*/

// click integers
jQuery('.calc_int, #calc_decimal').each(function() {
  jQuery(this).click(function() {
    var value = jQuery(this).val();
    if ( is_submission === false ) {
      if ( is_a === true ) {
        set_a(value);
      } else {
        set_b(value);
      }
    } else {
      reset_calc();
      set_a(value);
    }
  });
});

// click operators
jQuery('.calc_op').each(function() {
  jQuery(this).click(function() {
    var value = jQuery(this).val();
    set_o(value);
  });
});

// click equals
jQuery('#calc_eval').click(function() {
  submit_calc();
});

// click clear
jQuery('#calc_clear').click(function() {
  reset_calc();
});

// click neg
jQuery('#calc_neg').click(function() {
  neg();
});

// click backspace
jQuery('#calc_back').click(function() {
  backspace();
});

// click square root
jQuery('#calc_sqrt').click(function() {
  if ( display.text() !== '0' ) {
    if ( is_submission ) {
      sqrt(answer);
    } else if ( is_a ) {
      sqrt(a);
    }
  }
  return false;
});

// click square
jQuery('#calc_square').click(function() {
  if ( display.text() !== '0' ) {
    if ( is_submission ) {
      square(answer);
    } else if ( is_a ) {
      square(a);
    }
  }
  return false;
});

// click denominator
jQuery('#calc_denom').click(function() {
  if ( display.text() !== '0' ) {
    if ( is_submission ) {
      denom(answer);
    } else if ( is_a ) {
      denom(a);
    }
  }
  return false;
});


// reset console
jQuery('#result_clear').click(function() {
  jQuery('#results_list').children('li').fadeOut(200, function() {
    jQuery(this).remove();
  });
  jQuery('#results_list').prepend('<li id="result_default">Memory is Empty</li>');
  return false;
});


/*
** Key Events
*/

// key press for integers and operators
jQuery(document).keypress(function (e) {
  // the character code
  var charCode = e.which;
  // the key
  var key = String.fromCharCode(charCode);

  // key integers & decimal
  if ( charCode >= 46 && charCode <= 58 && charCode !== 47 ) {
    if ( !is_submission ) {
      if ( is_a ) {
        set_a(key);
      } else {
        set_b(key);
      }
    } else if ( soft_sub ) {
      set_b(key);
    } else {
      reset_calc();
      set_a(key);
    }
  }

  // key operators
  if ( charCode >= 42 && charCode <= 45 && charCode !== 44 || charCode === 47 ) {
    set_o(key);
  }

  // key equals
  if ( charCode === 61 ) {
    submit_calc();
  }

  // animate the corrosponding button
  jQuery('button').each(function() {
    var value = jQuery(this).val();
    if ( value === key ) {
      animateButton(jQuery(this));
    }
  });

});

// keydown for backspace and return
jQuery(document).keydown(function (e) {

  // the character code
  var charCode = e.which;

  // backspace
  if ( charCode === 8 ) {
    backspace();
    animateButton(jQuery('#calc_back'));
    return false;
  }

  // clear
  if ( charCode === 12 ) {
    reset_calc();
    animateButton(jQuery('#calc_clear'));
    return false;
  }

  // return
  if ( charCode === 13 ) {
    submit_calc();
    animateButton(jQuery('#calc_eval'));
    return false;
  }

});

style.css

body {
  background: #f0f0f0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#container {
  width: 620px;
  margin: 0 auto;
  font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;
}

a {
  text-decoration: none;
  color: black;
}

#the-calculator {
  font-size: 1.2em;
  display: block;
  /*width: 400px;*/
  width: 49%;
  float: left;
  margin: 0;
  padding: 20px;
  border: 2px solid rgba(0,0,0,0.125);
  background: #00544b;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #003b34), color-stop(1, #00544b));
  background: -ms-linear-gradient(bottom, #003b34, #00544b);
  background: -moz-linear-gradient(center bottom, #003b34 0%, #00544b 100%);
  background: -o-linear-gradient(#00544b, #003b34);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00544b', endColorstr='#003b34', GradientType=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#the-calculator button,
#the-calculator input,
#the-calculator #total {
  font-size: 1em;
  display: inline-block;
  position: relative;
  padding: 12px;
  font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;

}
#the-calculator button .exponent,
#the-calculator input .exponent,
#the-calculator #total .exponent {
  font-size: 0.6em;
  position: absolute;
}
#the-calculator button .denominator,
#the-calculator input .denominator,
#the-calculator #total .denominator {
  position: relative;
}
#the-calculator button .denominator .denom-top,
#the-calculator input .denominator .denom-top,
#the-calculator #total .denominator .denom-top {
  font-size: 0.75em;
  position: absolute;
  left: -8px;
}
#the-calculator button .denominator .denom-slash,
#the-calculator input .denominator .denom-slash,
#the-calculator #total .denominator .denom-slash {
  padding: 0px 2px;
}
#the-calculator button .denominator .denom-btm,
#the-calculator input .denominator .denom-btm,
#the-calculator #total .denominator .denom-btm {
  font-size: 0.75em;
  position: absolute;
  bottom: 0px;
}
#the-calculator #the-display {
  width: 100%;
}
#the-calculator #the-display #total {
  width: 98%;
  margin: 0 auto 8px;
  display: block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  font-size: 1.2em;
  color: #2f2f2f;
  text-shadow: 1px 1px 0px #fff;
  background: #fff;
  text-align: right;
}
#the-calculator #the-buttons {
  width: 100%;
}
#the-calculator #the-buttons #extra-buttons {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #00544b;
}
#the-calculator #the-buttons .button-row {
  width: 100%;
  zoom: 1;
}
#the-calculator #the-buttons .button-row:before,
#the-calculator #the-buttons .button-row:after {
  content: "";
  display: table;
}
#the-calculator #the-buttons .button-row:after {
  clear: both;
}
#the-calculator #the-buttons .button-row:before,
#the-calculator #the-buttons .button-row:after {
  content: "";
  display: table;
}
#the-calculator #the-buttons .button-row:after {
  clear: both;
}
#the-calculator #the-buttons .button-row button {
  width: 22.7%;
  margin: 1.25%;
  float: left;
  border: none;
  background: #006e62;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00544b), color-stop(1, #006e62));
  background: -ms-linear-gradient(bottom, #00544b, #006e62);
  background: -moz-linear-gradient(center bottom, #00544b 0%, #006e62 100%);
  background: -o-linear-gradient(#006e62, #00544b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006e62', endColorstr='#00544b', GradientType=0);
  border-style: solid;
  border-color: #333;
  border-width: 0px 1px 1px 0px;
  color: #f0f0f0;
  cursor: pointer;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#the-calculator #the-buttons .button-row button:last-child {
  margin-right: 0;
  float: right;
}
#the-calculator #the-buttons .button-row button:hover,
#the-calculator #the-buttons .button-row button.hovering {
  border-width: 1px 0px 0px 1px;
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70);
}
#the-calculator #the-buttons #calc_zero {
  width: 48%;
}
#the-calculator #the-buttons #calc_clear {
  background: #103f3a;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
  background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
  background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
  background: -o-linear-gradient(#103f3a, #0d332f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-calculator #the-buttons #calc_back {
  background: #103f3a;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
  background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
  background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
  background: -o-linear-gradient(#103f3a, #0d332f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-calculator #the-buttons #calc_eval {
  background: #dfdfdf;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cdcdcd), color-stop(1, #dfdfdf));
  background: -ms-linear-gradient(bottom, #cdcdcd, #dfdfdf);
  background: -moz-linear-gradient(center bottom, #cdcdcd 0%, #dfdfdf 100%);
  background: -o-linear-gradient(#dfdfdf, #cdcdcd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#cdcdcd', GradientType=0);
  color: #00544b;
  text-shadow: 1px 1px 0px #fff;
}
#the-results {
  width: 49%;
  float: right;
  /*min-width: 400px;*/
  margin: 0;
  /*padding: 20px;*/
  border: 2px solid rgba(0,0,0,0.125);
  background: #00544b;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #003b34), color-stop(1, #00544b));
  background: -ms-linear-gradient(bottom, #003b34, #00544b);
  background: -moz-linear-gradient(center bottom, #003b34 0%, #00544b 100%);
  background: -o-linear-gradient(#00544b, #003b34);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00544b', endColorstr='#003b34', GradientType=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
#the-results #result_clear {
  position: absolute;
  right: 0;
  top: 105%;
}
#the-results ul {
  height: 440px;
  overflow-y: scroll;
  list-style: none;
  padding: 0;
  margin: 0 ;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
}
#the-results ul li {
  font-size: 0.8em;
  width: 100%;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
}
#the-results ul li#result_default {
  /*padding-left: 24px;*/
  text-align: center;
  color: #a9a9a9;
  font-style: italic;
  font-weight: 200;
}
#the-results ul li.result {
  display: none;
  font-size: 0.8em;
  color: #f9f9f9;
  background: rgba(255, 255, 255, 0.05);
  zoom: 1;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#the-results ul li.result:before,
#the-results ul li.result:after {
  content: "";
  display: table;
}
#the-results ul li.result:after {
  clear: both;
}
#the-results ul li.result:before,
#the-results ul li.result:after {
  content: "";
  display: table;
}
#the-results ul li.result:after {
  clear: both;
}
#the-results ul li.result:nth-child(even) {
  background: rgba(255, 255, 255, 0.15);
}
#the-results ul li.result:nth-child(even) .answer {
  background: #103f3a;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
  background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
  background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
  background: -o-linear-gradient(#103f3a, #0d332f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-results ul li.result .equation,
#the-results ul li.result .answer {
  display: inline-block;
  padding: 0px 12px;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 60px;
  line-height: 40px;
}
#the-results ul li.result .equation {
  float: left;
  height: 100%;
  font-style: italic;
}
#the-results ul li.result .answer {
  position: absolute;
  right: 52px;
  top: 0;
  height: 100%;
  background: #0e3733;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0b2b27), color-stop(1, #0e3733));
  background: -ms-linear-gradient(bottom, #0b2b27, #0e3733);
  background: -moz-linear-gradient(center bottom, #0b2b27 0%, #0e3733 100%);
  background: -o-linear-gradient(#0e3733, #0b2b27);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e3733', endColorstr='#0b2b27', GradientType=0);
}
#the-results ul li.result .use {
  height: 100%;
}
#the-results ul li.result .use a {
  background: #008779;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #006359), color-stop(1, #008779));
  background: -ms-linear-gradient(bottom, #006359, #008779);
  background: -moz-linear-gradient(center bottom, #006359 0%, #008779 100%);
  background: -o-linear-gradient(#008779, #006359);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008779', endColorstr='#006359', GradientType=0);
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: block;
  padding: 0px 8px;
  width: 52px;
  text-align: center;
  text-decoration: none;
  margin: 0;
  font-size: 0.9em;
  cursor: pointer;
  border: none;
  color: #f9f9f9;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
}
#the-results ul li.result .use a:hover,
#the-results ul li.result .use aactive {
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70);
}