signature.css

@font-face {
  font-family: 'Kristi';
  font-style: normal;
  font-weight: 400;
  src: local('Kristi'), url(http://themes.googleusercontent.com/static/fonts/kristi/v4/ilC_0_Z29-euzuGxRFaDlevvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}

.signature .container {
	border: 1px solid #B9B9B9;
	position: relative;
	width: 300px;
	height: 40px;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	background-color: #FEEFB3;
	border-color: #9F6000;
	color: #9F6000;

	transition: background-color .2s ease-in-out;
	-moz-transition: background-color .2s ease-in-out;
	-webkit-transition: background-color .2s ease-in-out;
	-o-transition: background-color .2s ease-in-out;
}

.signature .sig-container {
	margin-right: 40px;
	margin-left: 40px;
	height: 100%;
	width: 220px;
	position: relative;
	float: left;
}

.signature .signature-pretty {
	width: 0px;
	margin-left: 8px;
	position: absolute;
	font-family: 'Kristi', cursive;
	font-size: 32px;
	overflow: hidden;
	white-space:nowrap;
	color: black;
}

.signature .signature-input {
	background-color: transparent;
	border: 0;
	position: absolute;
	outline: 0;
	padding-left: 8px; padding-right: 8px;
	font-size: 16px;
	width: 220px;
	height: 100%;
}

.signature .container.success,
.signature .mask.success {
	background-color: #DFF2BF;
	border-color: #4F8A10;
	color: #4F8A10;
}

.signature .signature-input.placeholder {
	color: #9F6000;
}

.signature .mask {
	width: 0px;
	position: absolute;
	height: 100%;
	background-color: #FEEFB3;

	transition: background-color .2s ease-in-out;
	-moz-transition: background-color .2s ease-in-out;
	-webkit-transition: background-color .2s ease-in-out;
	-o-transition: background-color .2s ease-in-out;
}

.signature .scrubber {
	text-align: center;
	display: relative;
	height: 36px;
	margin: 1px;
	width: 36px;
	border: 1px solid #9E9E9E;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	background: #cccccc; /* Old browsers */
	background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

}