html, body {
  margin:      0;
  padding:     0;
  font-family: Helvetica,Arial,sans-serif;
}

.error {
  color:       red;
  font-weight: bold;
}

.mark {
  color: red;
}

#mainMSG {
  font-size:      13px;
  text-align:     center;
  padding-top:    5px;
  padding-bottom: 5px;
  display:        none; /* will be shown by js */
}

#gray {
  color: gray;
}

.hidden {
  display: none;
}

.white {
  color: white !important;
}

.debug {
  font-size: 10px;
  color:     lightgray;  
}

table.debug td a, table.debug td a:visited, .debug a, .debug a:visited {
  color: lightgray;	
}

tr.lh1 td, tr.lh1 th {
  line-height: 1em;	
}

tr.lh05 td, tr.lh05 th {
  line-height: 0.5em;	
}

tr.lh05 img {
  height: 0.5em;
  width:  auto;
}

tr.tm td, tr.tm th {
  vertical-align: middle;
}

tr.nb {
  border-bottom: none !important;
}

.center {
  text-align: center;
}

table.sitetable td {
  vertical-align: top;
}

.spacer {
  width:  100%;
  height: 10px;
}

.btn-icon {
  margin-right: 10px;
}

.smallheader {
  color: gray;
  font-size: 10px;
}

.gray {
  color: gray;
}

.homebutton {
  width: 140px;
}

.homebutton.mini img {
  height:       1em;
  margin-right: 10px;
}

#RightMenu {
  background-color: #333333;
}

img.btn_img {
  margin-right: 10px;
  position:     relative;
  top:          2px;
}

img.btn_img.nomargin {
	margin: 0 !important;
}

table.datatable.stack.stacktable tr {
  border-bottom: none !important;	
}

table.datatable.stack.stacktable.small-only {
  border:        1px solid #D8D8D8 !important;
  margin-bottom: 25px;
}

table.datatable.stack thead tr {
  background-color: #D8D8D8;
}

table.datatable.stack tr:nth-child(even) {
  background-color: #eeeeee;
}

table.datatable tr {
  border-bottom: 1px solid #D8D8D8;
}

font.gmap_address {
  color:       gray;
  font-size:   10px;
  line-height: 1em;
}

img.tableicon {
  padding-right: 10px;
}

.hourinput {
  width:      20px;
  height:     20px;
  margin-top: 15px !important;  
  display:    block;
  margin:     .5em 0;  
}

.hourinput_project_before_survey {
  background-color: gray;	
}

.hourinput_project_survey {
  background-color: yellow;
}

.hourinput_period_end {
  background-color: lightblue;
}

.hourinput_project_ready, .hourinput_subcode_ready {
  background-color: blue;
}

.hourinput_project_invoiced {
  background-color: purple;	
}

.hourinput_hours_invoiced {
  height:       0;
  width:        0;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: purple transparent transparent purple;
}

.hourinput_hours_okprojectmanager {
  height:       0;
  width:        0;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: blue transparent transparent blue;
}

.hourinput_hours_rejectedprojectmanager {
  height:       0;
  width:        0;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: red transparent transparent red;
}

a.grayminibuttonlink {
  color:           lightgray !important;
  text-decoration: none; 
  display:         inline-block;
  margin-left:     3px;
  padding-left:    3px;
  padding-right:   3px;
}

a.grayminibuttonlink:hover {
  color:           gray !important;
  text-decoration: none;  
}

div.signwrap {
  position: relative;
  font-size: 10px;
  width: 100%;
  height: 250px;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
  border-radius: 4px;
}

div.signwrap:before, .div.signwrap:after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 40%;
  height: 10px;
  left: 20px;
  bottom: 10px;
  background: transparent;
  -webkit-transform: skew(-3deg) rotate(-3deg);
  -moz-transform: skew(-3deg) rotate(-3deg);
  -ms-transform: skew(-3deg) rotate(-3deg);
  -o-transform: skew(-3deg) rotate(-3deg);
  transform: skew(-3deg) rotate(-3deg);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.div.signwrap:after {
  left: auto;
  right: 20px;
  -webkit-transform: skew(3deg) rotate(3deg);
  -moz-transform: skew(3deg) rotate(3deg);
  -ms-transform: skew(3deg) rotate(3deg);
  -o-transform: skew(3deg) rotate(3deg);
  transform: skew(3deg) rotate(3deg);
}

div.signbody {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  border: 1px solid #f4f4f4;
}

canvas.signcanvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}