/****************************************************************
 *
 * CSS Percentage Circle
 * Based on CSS provided by Andre Firchow
 *
*****************************************************************/

.prog-circle .slice {
  position : absolute;
  width    : 1em;
  height   : 1em;
  clip     : rect(0em, 1em, 1em, 0.5em);
}
.prog-circle .slice.clipauto {
  clip : rect(auto, auto, auto, auto);
}
.prog-circle .fill, .prog-circle .bar {
  position              : absolute;
  border                : 0.08em solid #90c844;
  width                 : 0.84em;
  height                : 0.84em;
  clip                  : rect(0em, .5em, 1em, 0em);
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  -webkit-transform     : rotate(20deg);
  -moz-transform        : rotate(20deg);
  -ms-transform         : rotate(20deg);
  -o-transform          : rotate(20deg);
  transform             : rotate(20deg);
}
.prog-circle {
  position              : relative;
  font-size             : 120px;
  width                 : 1em;
  height                : 1em;
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  float                 : left;
  margin                : 0 0.1em 0.1em 0;
  background-color      : #e6f2b6;
  margin		: 50px 150px; 
}
.prog-circle .percenttext {
  position                           : absolute;
  width                              : 100%;
  height                             : 1em;
  z-index                            : 1;
  margin                             : auto;
  top                                : 0;
  left                               : 0;
  right                              : 0;
  bottom                             : 0;
  font-size                          : 0.3em;
  color                              : #90c844;
  display                            : block;
  text-align                         : center;
  white-space                        : nowrap;
  line-height                        : 100%;
  -webkit-transition-duration        : 0.2s;
  -moz-transition-duration           : 0.2s;
  -o-transition-duration             : 0.2s;
  transition-duration                : 0.2s;
  -webkit-transition-timing-function : ease-out;
  -moz-transition-timing-function    : ease-out;
  -o-transition-timing-function      : ease-out;
  transition-timing-function         : ease-out;
}
.prog-circle .after {
  position              : absolute;
  top                   : 0.08em;
  left                  : 0.08em;
  display               : block;
  content               : " ";
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  background-color      : #FFFFFF;
  width                 : 0.84em;
  height                : 0.84em;
}

.button_green {
	-moz-box-shadow: 0px 10px 14px -7px #3e7327;
	-webkit-box-shadow: 0px 10px 14px -7px #3e7327;
	box-shadow: 0px 10px 14px -7px #3e7327;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352));
	background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%);
	background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%);
	background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%);
	background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%);
	background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0);
	background-color:#77b55a;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #4b8f29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #5b8a3c;
}
.button_green:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a));
	background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%);
	background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%);
	background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%);
	background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%);
	background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0);
	background-color:#72b352;
}
.button_green:active {
	position:relative;
	top:1px;
}

.button_red {
	-moz-box-shadow:inset 0px 39px 0px -24px #e67a73;
	-webkit-box-shadow:inset 0px 39px 0px -24px #e67a73;
	box-shadow:inset 0px 39px 0px -24px #e67a73;
	background-color:#e4685d;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:6px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35;
}
.button_red:hover {
	background-color:#eb675e;
}
.button_red:active {
	position:relative;
	top:1px;
}