@font-face {
font-family: 'Journal';
src: url('journal.eot');
src: url('journal.eot?#iefix') format('embedded-opentype'),
url('journal.woff') format('woff'),
url('journal.ttf') format('truetype'),
url('journal.svg#JournalRegular') format('svg');
font-weight: normal;
font-style: normal;
}

.sigPad {
margin: 0;
padding: 0;
width: 402px;
max-width: 100%;
margin: auto;
}

.sigPad label {
display: block;
margin: 0 0 0.515em;
padding: 0;

color: #000;
}

.sigPad label.error {
color: #f33;
}

.sigPad input {
margin: 0;
padding: 0.2em 0;
width: 400px;
max-width: 100%;
border: 1px solid #666;

font-size: 1em;
}

.sigPad input.error {
border-color: #f33;
}

.sigPad button {
margin: 1em 0 0.6em 0;
padding: 0.6em 0.6em 0.7em;
}

.sig {
display: none;
}

.sigNav {
display: none;
height: 2.25em;
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}

.sigNav li {
display: inline;
float: left;
margin: 0;
padding: 0;
}

.sigNav a,
.sigNav a:link,
.sigNav a:visited {
display: block;
margin: 0;
padding: 0 0.6em;

border: 0;

color: #333;
}

.sigNav a.current,
.sigNav a.current:link,
.sigNav a.current:visited {
background-color: #666;

color: #fff;
text-decoration: none;
}

.sigNav .typeIt a.current,
.sigNav .typeIt a.current:link,
.sigNav .typeIt a.current:visited {

color: #555;
}

.sigNav .clearButton {
bottom: 0.3em;
display: none;
position: absolute;
right: 0;

text-decoration: underline;
}

.sigWrapper {
clear: both;

border: 1px solid #ccc;
}

.sigWrapper.current {
border-color: #666;
}

.signed .sigWrapper {
border: 0;
}

.pad {
position: relative;

/**
* For cross browser compatibility, this should be an absolute URL
* In IE the cursor is relative to the HTML document
* In all other browsers the cursor is relative to the CSS file
*
* http://www.useragentman.com/blog/2011/12/21/cross-browser-css-cursor-images-in-depth/
*/
cursor: url("../images/pen.cur"), crosshair;
/**
* IE will ignore this line because of the hotspot position
* Unfortunately we need this twice, because some browsers ignore the hotspot inside the .cur
*/
cursor: url("../images/pen.cur") 16 16, crosshair;

-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

width: 400px;
height: 150px;
max-width: 100%;
}

.typed {
height: 150px;
padding: 0 5px;
position: absolute;
z-index: 90;
left: 50%;
transform: translateX(-50%);
cursor: default;

color: #145394;
font: normal 60px/150px "Journal",Georgia,Times,serif;
}

.typeItDesc,
.drawItDesc {
display: none;
margin: 0.75em 0 0.515em;
padding: 0.515em 0 0;
color: #000;
}

p.error {
display: block;
margin: 0.5em 0;

color: red;
font-weight: bold;
}