@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:200px;}

.sigPad label {display:block; margin:0 0 0.515em; padding:0; color: #000; font: italic normal 1em/1.375 Georgia,Times,serif;}
.sigPad label.error {color: #f33;}

.sigPad input {margin:0; padding:0.2em 0; width:198px; border:1px solid #666; font-size:1em;}
.sigPad input.error {border-color: #f33;}

.sigPad button {margin:1em 0 0 0; padding:0.6em 0.6em 0.7em; background-color:#ccc; border:0; border-radius:8px; cursor:pointer; color:#555; font:bold 1em/1.375 sans-serif; text-align:left;}
.sigPad button:hover,
.sigPad button:focus,
.sigPad button:active {background-color:#333; color:#fff;}

.sigNav {display:none; height:2.25em; margin:0 !important; padding:0 !important; 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 !important; color:#333 !important; font-weight:bold !important; line-height:2.25em; text-decoration:underline !important;}

.sigNav a.current,
.sigNav a.current:link,
.sigNav a.current:visited {background-color:#666; border-radius:8px 8px 0 0; color: #fff !important; text-decoration:none !important;}

.sigNav .typeIt a.current,
.sigNav .typeIt a.current:link,
.sigNav .typeIt a.current:visited {background-color:#ccc; color:#555 !important;}

.sigNav .clearButton {bottom:0.2em; display:none; position:absolute; right:0; font-size:0.75em; line-height:1.375;}

.sigWrapper {clear:both; padding:20px 20px 0; 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("../assets/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("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;
  margin: 0 auto;
  display: block;
    
  border-width: 1px;
  border-style: dotted;
  border-color: lightgray;
}

.sig .typed {height:50px; width:95%; margin:0; padding:0 5px; z-index:90; cursor:default; color:#145394; font:normal 2.5em/50px "Journal",Georgia,Times,serif;}

.typeItDesc,
.drawItDesc {display:none; margin:0.75em 0 0.515em; padding:0.515em 0 0; color:#000; font:italic normal 1em/1.375 Georgia,Times,serif;}

p.error {display:block; margin:0.5em 0; padding:0.4em; background-color:#f33; color:#fff; font-weight:bold;}