anthonybrown/index.html

## index.html
<html>
<link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<head>
  <title>Calculator App</title>
</head>

<body>


  <center>
    <div>
    <div class="tableWrap">
      <table border=1>

        <tr>
          <td colspan="4" id="display"></td>
        </tr>
        <tr>
          <td class="c"><button class="buttonC" id="clear">C</button></td>
          <td class="act"><button class="buttonAct" id="div">÷</button></td>
          <td class="act"><button class="buttonAct" id="mult">×</button></td>
          <td class="del"><button class="buttonAct" id="delete"><i class="fa fa-arrow-left" aria-hidden="true"></i></button></td>
        </tr>
        <tr>
          <td class="num"><button class="buttonNum" id="1">1</button></td>
          <td class="num"><button class="buttonNum" id="2">2</button></td>
          <td class="num"><button class="buttonNum" id="3">3</button></td>
          <td class="act"><button class="buttonAct" id="plus">+</button></td>

        </tr>
        <tr>
          <td class="num"><button class="buttonNum" id="4">4</button></td>
          <td class="num"><button class="buttonNum" id="5">5</button></td>
          <td class="num"><button class="buttonNum" id="6">6</button></td>
          <td class="act"><button class="buttonAct" id="minus">-</button></td>
        </tr>
        <tr>
          <td class="num"><button class="buttonNum" id="7">7</button></td>
          <td class="num"><button class="buttonNum" id="8">8</button></td>
          <td class="num"><button class="buttonNum" id="9">9</button></td>
          <td rowspan="2"><button class="buttonAct" id="equal">=</button></td>
        </tr>
        <tr>
          <td colspan="2" class="num"><button class="buttonNum" id="0">0</button></td>
          <td class="num"><button class="buttonNum" id="dot">.</button></td>

        </tr>

      </table>
    </div></div>
  </center>


</body>

</html>

## my-calculator-app.markdown

      
    Raw
  

              my-calculator-app.markdown
            
          
    My Calculator App

A Pen by Rada on CodePen.
License.

  
## script.js
var expression = "";
var curNum = "";

document.getElementById("1").onclick = function() {
  if (curNum == "0") {
    curNum = "1";
    expression = expression.substr(0, expression.length - 1);
  } else {
    curNum = curNum.concat("1");
  }
  expression = expression.concat("1");
  console.log(expression);
  $("#display").html(expression.slice(-15, expression.length));
}

document.getElementById("2").onclick = function() {
  if (curNum == "0") {
    curNum = "2";
    expression = expression.substr(0, expression.length - 1);
  } else {
    curNum = curNum.concat("2");
  }
  expression = expression.concat("2");
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("3").onclick = function() {
  if (curNum == "0") {
    curNum = "3";
    expression = expression.substr(0, expression.length - 1);
  } else {
    curNum = curNum.concat("3");
  }
  expression = expression.concat("3");
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("4").onclick = function() {
  if (curNum == "0") {
    curNum = "4";
    expression = expression.substr(0, expression.length - 1);
  } else {
    curNum = curNum.concat("4");
  }
  expression = expression.concat("4");
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("5").onclick = function() {
  if (curNum == "0") {
    curNum = "5";
    expression = expression.substr(0, expression.length - 1);
  } else {
    curNum = curNum.concat("5");
  }
  expression = expression.concat("5");
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("6").onclick = function() {
  if (curNum == "0") {
    curNum = "6";
    expression = expression.substr(0, expression.length - 1);
  } else {
    curNum = curNum.concat("6");
  }
  expression = expression.concat("6");
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("7").onclick = function() {
  if (curNum == "0") {
    curNum = "7";
    expression = expression.substr(0, expression.length - 1);
  } else {
    curNum = curNum.concat("7");
  }
  expression = expression.concat("7");
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("8").onclick = function() {
  if (curNum == "0") {
    curNum = "8";
    expression = expression.substr(0, expression.length - 1);
  } else {
    curNum = curNum.concat("8");
  }
  expression = expression.concat("8");
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("9").onclick = function() {
  if (curNum == "0") {
    curNum = "9";
    expression = expression.substr(0, expression.length - 1);
  } else {
    curNum = curNum.concat("9");
  }
  expression = expression.concat("9");
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("0").onclick = function() {
  if (curNum == "0") {
    curNum = "0";
    expression = expression.substr(0, expression.length - 1);
  } else {
    curNum = curNum.concat("0");
  }
  expression = expression.concat("0");
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("dot").onclick = function() {
  if (/\./g.test(curNum)) {} else {
    expression = expression.concat(".");
    curNum = curNum.concat(".");
    console.log(expression);
    $("#display").html(expression.slice(-14, expression.length));
  }
}

document.getElementById("clear").onclick = function() {
  expression = "";
  curNum = "";
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("div").onclick = function() {
  curNum = "";
  if (/\d/.test(expression[expression.length - 1])) {
    expression = expression.concat("/");
    console.log(expression);
    $("#display").html(expression.slice(-14, expression.length));
  }
}

document.getElementById("mult").onclick = function() {
  curNum = "";
  if (/\d/.test(expression[expression.length - 1])) {
    expression = expression.concat("*");
    console.log(expression);
    $("#display").html(expression.slice(-14, expression.length));
  }
}

document.getElementById("delete").onclick = function() {
  if (/\d/.test(expression[expression.length])) {
    curNum.slice(0, curNum.length - 1);
  }
  expression = expression.slice(0, expression.length - 1);
  console.log(expression);
  $("#display").html(expression.slice(-14, expression.length));
}

document.getElementById("plus").onclick = function() {
  curNum = "";
  if (/\d/.test(expression[expression.length - 1])) {
    expression = expression.concat("+");
    console.log(expression);
    $("#display").html(expression.slice(-14, expression.length));
  }
}

document.getElementById("minus").onclick = function() {
  curNum = "";
  if (/\d/.test(expression[expression.length - 1])) {
    expression = expression.concat("-");
    console.log(expression);
    $("#display").html(expression.slice(-14, expression.length));
  }
}

document.getElementById("equal").onclick = function() {
  curNum = "";
  var result = eval(expression);
  result = parseFloat(result.toFixed(14));
  ans = result.toString();
  expression = ans;
  console.log(result);
  $("#display").html(ans.slice(0, 14));
}

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

## style.css
body
{
  background-image: url(http://farm5.staticflickr.com/4032/4333761231_53f5ff5dd0_b.jpg);
}

.buttonC,
.buttonAct,
.buttonNum {
  height: 100%;
  width: 100%;
  border: 0.1em;
  border-radius: 1em;
  outline: none;
  font-weight: bold;
  font-size: 22px;
  color: #FFF;
  text-decoration:none;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 3px #000;
  user-select: none;
}

.tableWrap{
  padding-top: 25px;
  padding: 20px;
}

table {
  table-layout: fixed;
  width: 300px;
  height: 400px;
  border-spacing: 4px;
  border-radius: 10px;
  border: 1px solid #222;
  background-image:none;
  border-collapse: separate;
  padding-top: 20px !important;
  padding: 17px;
  border-rasius: 10em;
  background-image: -webkit-linear-gradient(top, #AAB, #AAB);
  background-image: -moz-linear-gradient(top, #AAB, #AAB);
  background-image: -o-linear-gradient(top, #AAB, #AAB);
  background-image: -ms-linear-gradient(top, #AAB, #AAB);
  background-image: linear-gradient(top, #AAB, #AAB);
  box-shadow: 3px 3px 3px #000;
}

td {
  border: 0.1em;
  border-radius: 1em;
}

#display {
  text-align: right;
  padding-right: 10px;
  padding-left: 10px;
  height: 55px;
  border-radius: 0;
  border: 0.05em solid black;
  font-family: 'Electrolize', sans-serif;
  font-size: 24px;
  font-weight: bold;
  background-color: #C1D4CB;
}

.buttonNum{
   background-color: #3A6EC7; background-image: -webkit-gradient(linear, left top, left bottom, from(#3A6EC7), to(#183D6B));
 background-image: -webkit-linear-gradient(top, #3A6EC7, #183D6B);
 background-image: -moz-linear-gradient(top, #3A6EC7, #183D6B);
 background-image: -ms-linear-gradient(top, #3A6EC7, #183D6B);
 background-image: -o-linear-gradient(top, #3A6EC7, #183D6B);
 background-image: linear-gradient(to bottom, #3A6EC7, #183D6B);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3A6EC7, endColorstr=#183D6B);
}
.buttonNum:hover{
  background-color: #2e58a0; background-image: -webkit-gradient(linear, left top, left bottom, from(#2e58a0), to(#0f2541));
 background-image: -webkit-linear-gradient(top, #2e58a0, #0f2541);
 background-image: -moz-linear-gradient(top, #2e58a0, #0f2541);
 background-image: -ms-linear-gradient(top, #2e58a0, #0f2541);
 background-image: -o-linear-gradient(top, #2e58a0, #0f2541);
 background-image: linear-gradient(to bottom, #2e58a0, #0f2541);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#2e58a0, endColorstr=#0f2541);
}

#delete{
  background-color: #E34780; background-image: -webkit-gradient(linear, left top, left bottom, from(#E34780), to(#5E2A38));
 background-image: -webkit-linear-gradient(top, #E34780, #5E2A38);
 background-image: -moz-linear-gradient(top, #E34780, #5E2A38);
 background-image: -ms-linear-gradient(top, #E34780, #5E2A38);
 background-image: -o-linear-gradient(top, #E34780, #5E2A38);
 background-image: linear-gradient(to bottom, #E34780, #5E2A38);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#E34780, endColorstr=#5E2A38);

}
#delete:hover{
   background-color: #d62163; background-image: -webkit-gradient(linear, left top, left bottom, from(#d62163), to(#3b1a23));
 background-image: -webkit-linear-gradient(top, #d62163, #3b1a23);
 background-image: -moz-linear-gradient(top, #d62163, #3b1a23);
 background-image: -ms-linear-gradient(top, #d62163, #3b1a23);
 background-image: -o-linear-gradient(top, #d62163, #3b1a23);
 background-image: linear-gradient(to bottom, #d62163, #3b1a23);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d62163, endColorstr=#3b1a23);
}


.buttonC{
  background-color: #E34780; background-image: -webkit-gradient(linear, left top, left bottom, from(#E34780), to(#5E2A38));
 background-image: -webkit-linear-gradient(top, #E34780, #5E2A38);
 background-image: -moz-linear-gradient(top, #E34780, #5E2A38);
 background-image: -ms-linear-gradient(top, #E34780, #5E2A38);
 background-image: -o-linear-gradient(top, #E34780, #5E2A38);
 background-image: linear-gradient(to bottom, #E34780, #5E2A38);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#E34780, endColorstr=#5E2A38);
}
.buttonC:hover{
   background-color: #d62163; background-image: -webkit-gradient(linear, left top, left bottom, from(#d62163), to(#3b1a23));
 background-image: -webkit-linear-gradient(top, #d62163, #3b1a23);
 background-image: -moz-linear-gradient(top, #d62163, #3b1a23);
 background-image: -ms-linear-gradient(top, #d62163, #3b1a23);
 background-image: -o-linear-gradient(top, #d62163, #3b1a23);
 background-image: linear-gradient(to bottom, #d62163, #3b1a23);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d62163, endColorstr=#3b1a23);
}

.buttonAct{
  background-color: #6FAD6F; background-image: -webkit-gradient(linear, left top, left bottom, from(#6FAD6F), to(#2C4730));
 background-image: -webkit-linear-gradient(top, #6FAD6F, #2C4730);
 background-image: -moz-linear-gradient(top, #6FAD6F, #2C4730);
 background-image: -ms-linear-gradient(top, #6FAD6F, #2C4730);
 background-image: -o-linear-gradient(top, #6FAD6F, #2C4730);
 background-image: linear-gradient(to bottom, #6FAD6F, #2C4730);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#6FAD6F, endColorstr=#2C4730);
}

.buttonAct:hover{
  background-color: #559455; background-image: -webkit-gradient(linear, left top, left bottom, from(#559455), to(#18281b));
 background-image: -webkit-linear-gradient(top, #559455, #18281b);
 background-image: -moz-linear-gradient(top, #559455, #18281b);
 background-image: -ms-linear-gradient(top, #559455, #18281b);
 background-image: -o-linear-gradient(top, #559455, #18281b);
 background-image: linear-gradient(to bottom, #559455, #18281b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#559455, endColorstr=#18281b);
}
	<html>
	<link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

	<head>
	<title>Calculator App</title>
	</head>

	<body>


	<center>
	<div>
	<div class="tableWrap">
	<table border=1>

	<tr>
	<td colspan="4" id="display"></td>
	</tr>
	<tr>
	<td class="c"><button class="buttonC" id="clear">C</button></td>
	<td class="act"><button class="buttonAct" id="div">÷</button></td>
	<td class="act"><button class="buttonAct" id="mult">×</button></td>
	<td class="del"><button class="buttonAct" id="delete"><i class="fa fa-arrow-left" aria-hidden="true"></i></button></td>
	</tr>
	<tr>
	<td class="num"><button class="buttonNum" id="1">1</button></td>
	<td class="num"><button class="buttonNum" id="2">2</button></td>
	<td class="num"><button class="buttonNum" id="3">3</button></td>
	<td class="act"><button class="buttonAct" id="plus">+</button></td>

	</tr>
	<tr>
	<td class="num"><button class="buttonNum" id="4">4</button></td>
	<td class="num"><button class="buttonNum" id="5">5</button></td>
	<td class="num"><button class="buttonNum" id="6">6</button></td>
	<td class="act"><button class="buttonAct" id="minus">-</button></td>
	</tr>
	<tr>
	<td class="num"><button class="buttonNum" id="7">7</button></td>
	<td class="num"><button class="buttonNum" id="8">8</button></td>
	<td class="num"><button class="buttonNum" id="9">9</button></td>
	<td rowspan="2"><button class="buttonAct" id="equal">=</button></td>
	</tr>
	<tr>
	<td colspan="2" class="num"><button class="buttonNum" id="0">0</button></td>
	<td class="num"><button class="buttonNum" id="dot">.</button></td>

	</tr>

	</table>
	</div></div>
	</center>


	</body>

	</html>
	var expression = "";
	var curNum = "";

	document.getElementById("1").onclick = function() {
	if (curNum == "0") {
	curNum = "1";
	expression = expression.substr(0, expression.length - 1);
	} else {
	curNum = curNum.concat("1");
	}
	expression = expression.concat("1");
	console.log(expression);
	$("#display").html(expression.slice(-15, expression.length));
	}

	document.getElementById("2").onclick = function() {
	if (curNum == "0") {
	curNum = "2";
	expression = expression.substr(0, expression.length - 1);
	} else {
	curNum = curNum.concat("2");
	}
	expression = expression.concat("2");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("3").onclick = function() {
	if (curNum == "0") {
	curNum = "3";
	expression = expression.substr(0, expression.length - 1);
	} else {
	curNum = curNum.concat("3");
	}
	expression = expression.concat("3");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("4").onclick = function() {
	if (curNum == "0") {
	curNum = "4";
	expression = expression.substr(0, expression.length - 1);
	} else {
	curNum = curNum.concat("4");
	}
	expression = expression.concat("4");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("5").onclick = function() {
	if (curNum == "0") {
	curNum = "5";
	expression = expression.substr(0, expression.length - 1);
	} else {
	curNum = curNum.concat("5");
	}
	expression = expression.concat("5");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("6").onclick = function() {
	if (curNum == "0") {
	curNum = "6";
	expression = expression.substr(0, expression.length - 1);
	} else {
	curNum = curNum.concat("6");
	}
	expression = expression.concat("6");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("7").onclick = function() {
	if (curNum == "0") {
	curNum = "7";
	expression = expression.substr(0, expression.length - 1);
	} else {
	curNum = curNum.concat("7");
	}
	expression = expression.concat("7");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("8").onclick = function() {
	if (curNum == "0") {
	curNum = "8";
	expression = expression.substr(0, expression.length - 1);
	} else {
	curNum = curNum.concat("8");
	}
	expression = expression.concat("8");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("9").onclick = function() {
	if (curNum == "0") {
	curNum = "9";
	expression = expression.substr(0, expression.length - 1);
	} else {
	curNum = curNum.concat("9");
	}
	expression = expression.concat("9");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("0").onclick = function() {
	if (curNum == "0") {
	curNum = "0";
	expression = expression.substr(0, expression.length - 1);
	} else {
	curNum = curNum.concat("0");
	}
	expression = expression.concat("0");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("dot").onclick = function() {
	if (/\./g.test(curNum)) {} else {
	expression = expression.concat(".");
	curNum = curNum.concat(".");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}
	}

	document.getElementById("clear").onclick = function() {
	expression = "";
	curNum = "";
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("div").onclick = function() {
	curNum = "";
	if (/\d/.test(expression[expression.length - 1])) {
	expression = expression.concat("/");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}
	}

	document.getElementById("mult").onclick = function() {
	curNum = "";
	if (/\d/.test(expression[expression.length - 1])) {
	expression = expression.concat("*");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}
	}

	document.getElementById("delete").onclick = function() {
	if (/\d/.test(expression[expression.length])) {
	curNum.slice(0, curNum.length - 1);
	}
	expression = expression.slice(0, expression.length - 1);
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}

	document.getElementById("plus").onclick = function() {
	curNum = "";
	if (/\d/.test(expression[expression.length - 1])) {
	expression = expression.concat("+");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}
	}

	document.getElementById("minus").onclick = function() {
	curNum = "";
	if (/\d/.test(expression[expression.length - 1])) {
	expression = expression.concat("-");
	console.log(expression);
	$("#display").html(expression.slice(-14, expression.length));
	}
	}

	document.getElementById("equal").onclick = function() {
	curNum = "";
	var result = eval(expression);
	result = parseFloat(result.toFixed(14));
	ans = result.toString();
	expression = ans;
	console.log(result);
	$("#display").html(ans.slice(0, 14));
	}
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	body
	{
	background-image: url(http://farm5.staticflickr.com/4032/4333761231_53f5ff5dd0_b.jpg);
	}

	.buttonC,
	.buttonAct,
	.buttonNum {
	height: 100%;
	width: 100%;
	border: 0.1em;
	border-radius: 1em;
	outline: none;
	font-weight: bold;
	font-size: 22px;
	color: #FFF;
	text-decoration:none;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	box-shadow: 3px 3px 3px #000;
	user-select: none;
	}

	.tableWrap{
	padding-top: 25px;
	padding: 20px;
	}

	table {
	table-layout: fixed;
	width: 300px;
	height: 400px;
	border-spacing: 4px;
	border-radius: 10px;
	border: 1px solid #222;
	background-image:none;
	border-collapse: separate;
	padding-top: 20px !important;
	padding: 17px;
	border-rasius: 10em;
	background-image: -webkit-linear-gradient(top, #AAB, #AAB);
	background-image: -moz-linear-gradient(top, #AAB, #AAB);
	background-image: -o-linear-gradient(top, #AAB, #AAB);
	background-image: -ms-linear-gradient(top, #AAB, #AAB);
	background-image: linear-gradient(top, #AAB, #AAB);
	box-shadow: 3px 3px 3px #000;
	}

	td {
	border: 0.1em;
	border-radius: 1em;
	}

	#display {
	text-align: right;
	padding-right: 10px;
	padding-left: 10px;
	height: 55px;
	border-radius: 0;
	border: 0.05em solid black;
	font-family: 'Electrolize', sans-serif;
	font-size: 24px;
	font-weight: bold;
	background-color: #C1D4CB;
	}

	.buttonNum{
	background-color: #3A6EC7; background-image: -webkit-gradient(linear, left top, left bottom, from(#3A6EC7), to(#183D6B));
	background-image: -webkit-linear-gradient(top, #3A6EC7, #183D6B);
	background-image: -moz-linear-gradient(top, #3A6EC7, #183D6B);
	background-image: -ms-linear-gradient(top, #3A6EC7, #183D6B);
	background-image: -o-linear-gradient(top, #3A6EC7, #183D6B);
	background-image: linear-gradient(to bottom, #3A6EC7, #183D6B);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3A6EC7, endColorstr=#183D6B);
	}
	.buttonNum:hover{
	background-color: #2e58a0; background-image: -webkit-gradient(linear, left top, left bottom, from(#2e58a0), to(#0f2541));
	background-image: -webkit-linear-gradient(top, #2e58a0, #0f2541);
	background-image: -moz-linear-gradient(top, #2e58a0, #0f2541);
	background-image: -ms-linear-gradient(top, #2e58a0, #0f2541);
	background-image: -o-linear-gradient(top, #2e58a0, #0f2541);
	background-image: linear-gradient(to bottom, #2e58a0, #0f2541);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#2e58a0, endColorstr=#0f2541);
	}

	#delete{
	background-color: #E34780; background-image: -webkit-gradient(linear, left top, left bottom, from(#E34780), to(#5E2A38));
	background-image: -webkit-linear-gradient(top, #E34780, #5E2A38);
	background-image: -moz-linear-gradient(top, #E34780, #5E2A38);
	background-image: -ms-linear-gradient(top, #E34780, #5E2A38);
	background-image: -o-linear-gradient(top, #E34780, #5E2A38);
	background-image: linear-gradient(to bottom, #E34780, #5E2A38);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#E34780, endColorstr=#5E2A38);

	}
	#delete:hover{
	background-color: #d62163; background-image: -webkit-gradient(linear, left top, left bottom, from(#d62163), to(#3b1a23));
	background-image: -webkit-linear-gradient(top, #d62163, #3b1a23);
	background-image: -moz-linear-gradient(top, #d62163, #3b1a23);
	background-image: -ms-linear-gradient(top, #d62163, #3b1a23);
	background-image: -o-linear-gradient(top, #d62163, #3b1a23);
	background-image: linear-gradient(to bottom, #d62163, #3b1a23);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d62163, endColorstr=#3b1a23);
	}


	.buttonC{
	background-color: #E34780; background-image: -webkit-gradient(linear, left top, left bottom, from(#E34780), to(#5E2A38));
	background-image: -webkit-linear-gradient(top, #E34780, #5E2A38);
	background-image: -moz-linear-gradient(top, #E34780, #5E2A38);
	background-image: -ms-linear-gradient(top, #E34780, #5E2A38);
	background-image: -o-linear-gradient(top, #E34780, #5E2A38);
	background-image: linear-gradient(to bottom, #E34780, #5E2A38);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#E34780, endColorstr=#5E2A38);
	}
	.buttonC:hover{
	background-color: #d62163; background-image: -webkit-gradient(linear, left top, left bottom, from(#d62163), to(#3b1a23));
	background-image: -webkit-linear-gradient(top, #d62163, #3b1a23);
	background-image: -moz-linear-gradient(top, #d62163, #3b1a23);
	background-image: -ms-linear-gradient(top, #d62163, #3b1a23);
	background-image: -o-linear-gradient(top, #d62163, #3b1a23);
	background-image: linear-gradient(to bottom, #d62163, #3b1a23);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d62163, endColorstr=#3b1a23);
	}

	.buttonAct{
	background-color: #6FAD6F; background-image: -webkit-gradient(linear, left top, left bottom, from(#6FAD6F), to(#2C4730));
	background-image: -webkit-linear-gradient(top, #6FAD6F, #2C4730);
	background-image: -moz-linear-gradient(top, #6FAD6F, #2C4730);
	background-image: -ms-linear-gradient(top, #6FAD6F, #2C4730);
	background-image: -o-linear-gradient(top, #6FAD6F, #2C4730);
	background-image: linear-gradient(to bottom, #6FAD6F, #2C4730);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#6FAD6F, endColorstr=#2C4730);
	}

	.buttonAct:hover{
	background-color: #559455; background-image: -webkit-gradient(linear, left top, left bottom, from(#559455), to(#18281b));
	background-image: -webkit-linear-gradient(top, #559455, #18281b);
	background-image: -moz-linear-gradient(top, #559455, #18281b);
	background-image: -ms-linear-gradient(top, #559455, #18281b);
	background-image: -o-linear-gradient(top, #559455, #18281b);
	background-image: linear-gradient(to bottom, #559455, #18281b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#559455, endColorstr=#18281b);
	}