#stampPageOverlay {
  position:absolute;
  z-index:900;
  width:100%;
  min-height: 100%;
  top:0; bottom:0; left:0; right:0;
  background-color:rgba(0,0,0,0.5);
  display:none;
}

#stampingFormContainer {
  width:100%;
  max-width: 1200px;
  margin:20px auto;
  border:solid;
  background-color:#fff;
  clear:both;
  border-radius:0px;
  //box-shadow:6px 12px 6px #333;
  border:solid 0px #000;

}

@media (min-width: 1200px) {
    #stampingFormContainer {
        border-radius:4px;
        border:solid 1px #000;
      }
}


#topRowBx {
  width:95%;
  clear:both;
  margin:auto;
  border-bottom:solid 1px #999;
}

#topRowRight {
  width:100%;
  padding:10px 0px;
}

#stampUIContainer{
  width:100%;
  float:none;
  vertical-align:top;

}

#stampCanvasBx {
  clear:both;
  width:100%;
  background-color: #FFF;
  float:none;

}
@media (min-width: 768px) {
    #stampCanvasBx {
        clear:right;
        width:39%;
        float:left;
      }
}

#uiBoxesBx {
  clear:both;
  width:100%;
  background-color: #FFF;
  float:none;
}
@media (min-width: 768px) {
    #uiBoxesBx {
        clear:right;
        width:59%;
        float:left;
      }
}


#stampUIFooter{
  width:100%;
  height:10px;
  clear: both;
}

.stampform-topRow-templateLbl {
 width:100%;
  text-align: center;
  padding:8px 0px;
}

#stamp-save-btn, #stamp-cancel-btn, #stamp-clear-btn {
  display:inline-block;
  padding:8px 0;
  text-transform:uppercase;
  letter-spacing:4px;
  font-weight:bold;
  border-radius:4px;
  cursor:pointer;
  font-size:16px;
  width:31%;
  margin:0 1%;
  text-align: center;
  transition: background-color 0.4s;
}

#stamp-save-btn {
  background-color:#00a35e;
  color:#EEE;
}
#stamp-save-btn:hover{
  color:#FFF;
  background-color: #00f38b;
}

#stamp-cancel-btn {
  background-color:#d61e30;
  color:#EEE;
  text-transform:uppercase;
}
#stamp-cancel-btn:hover{
  color:#FFF;
  background-color: #ff3143;
}

#stamp-clear-btn {
  background-color:#de8400;
  color:#EEE;
}
#stamp-clear-btn:hover{
  color:#FFF;
  background-color: #ffa829;
}

#rowsBx {
  width:95%;
  margin:auto;
  vertical-align: center
}


#centOpBx {
  width:95%;
  margin:auto;
  text-align: right;
  vertical-align: top;
}
#rowBx-centops {  text-align: left}

#rowsBx input {
  display:block;
  width:92%;
  margin:0px auto 8px auto;
  padding:3px;
  border:solid 1px #999;
  text-align: center;
}
#rowsBx input:active, #rowsBx input:focus {
  border:solid 1px #f77b24;
  outline: 1px solid #f77b24;
  outline-offset:0;
}

#rowsBx input:first-of-type {margin-top:8px;}

.rowBx {
  margin-bottom:10px;
  border-radius:4px;
  background-color: #EEE;
  padding-bottom:4px;
}

.rowLblBx {width:100%;
  padding:4px 0px;
  font-size:13px;
  text-indent:6px;
  border-radius:4px 4px 0px 0px;
  overflow: auto;
}

.boxLbl { float: left; margin-top: 2px;}
.spaceInfo { float:right; margin: 3px 12px 0px 0px; font-size:12px;}

/*.rowOpBx { width:100%; height:25px; background-color:#DDD;} */
.rowOpBx {
  width:192px;
  height:18px;
  float:left;
  margin-left: 20px;
  margin-bottom:10px;
}
.rowOp-ButtonBx {
  width:200px;
  display:inline-block;
}

.rowOp-Std, .rowOp-Cnd {
  display: inline-block;
  width:88px;
  margin:0;
  padding:2px;
  font-size:12px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  text-indent:0;
  background-color: #444;
  transition: all 0.4s;
}
.rowOp-Std {
  margin:0 2px;
}
.rowOp-Std:hover, .rowOp-Cnd:hover {
  text-decoration: underline;
  color: #CCC;
  border: solid 1px #AAA;
  background-color: #545454;
}




.rowTxtLblBx { text-indent:4px; margin:4px 0px 0px 0px;}
.txtspaces {float:right; margin-right:6px; text-align:right;}

.rowErrorMsg { padding:4px; background-color:#D00; color:#FFF; display:none;}



.centOpRotRow, .tplSelectRow {
    padding: 8px;
    cursor: pointer;
    background-color: #dddddd;
    text-align: center;
  margin-bottom: 4px;
}
.centOpRow{
    padding: 8px;
    cursor: pointer;
    border: solid 1px #b5b5b5;
    margin: 1px;
    border-radius: 4px;
    background-color: #f0f0f0;
    text-align: center;
}

.centOpRow {
  float:none;
  width:98%;
  transition: all 0.4s;
}
@media (min-width: 600px) {
    .centOpRow {
        float:left;
        width:47%;
        margin-left:1%;
      }
}

.centOpRow:hover {
  background-color: #f7e9d4;
    color: #f77b24;
  border-color: #f77b24;
}

.activeOpRow, .rowOp-active {
  background-color:#369;
  color:#DEF;
  border-color: #369;
}
.activeOpRow:hover, .rowOp-active:hover {
  background-color: #369;
    color: #FFF;
  border-color: #DEF;
}

.centRows {width:100%; clear:both; background-color:#BBB;}
.centOpRotRow {
  width:208px;
  margin:auto;
  clear:both;
  background-color: #dddddd;
  cursor: default;
  overflow: auto;
}
.centOpRotRowLbl {float:left; margin-right: 5px; margin-top: 2px;}
.centOpRotWidget { float:left;}
.centOpRotRow input {width:40px; float:left; margin: 0px; text-align: center;}
.centOpSubLbl {margin-left:6px; float:left; margin-top: 2px;}

.centOpFtr {
  clear:both;
  height:4px;
  /*height:8px; */
  /*background-color:#000;*/
  /*padding:4px;*/
  /*border-radius:0px 0px 4px 4px;*/
}


.menuBx {float:left;}


.tplBx { width:200px; padding:3px; overflow: auto;
  font-size:13px; background-color:#666; color:#FFF;
  text-indent:6px;
  border-radius:4px; border-bottom:solid 2px #BBB;  }

#curTemplateBtn { display:block; float:left; width:120px; padding:4px 0px 4px 0px;
  border:solid 1px #999; cursor: pointer;
  border-radius: 4px; background-color:#777;}
#curTemplateLbl { display: block; float: left; margin-right: 6px; padding:4px 0px 4px 0px;}

.tplSelectorBx { width:200px; padding:4px; background-color: #EEE;
  position: relative; z-index: 20; top:-20px; left:20px;
  border: solid 1px #333; border-radius: 4px; box-shadow: 5px 5px 10px #666;}

.tplSelectRow:hover { background-color:#369; color:#DEF; }

#saveBtn { display:block; float:left; width:120px; padding:4px 0px 4px 0px;
  border:solid 1px #999; cursor: pointer;
  border-radius: 4px; background-color:#777;}


#fileLoadInput { width:200px;}

.spacerOptionsBx { width:100%; height:26px; clear:both;
  border-radius: 0px 0px 4px 4px;
  padding-top:2px;}
.spacerOptionSelectBx, .spacerInputBx { float:left;}
.spacerOptionSelectBx { margin-left:4px;}
.spacerOptionSelectBx label {font-size:10px; font-style:italic; margin-right:4px;}
.spacerOptionSelectBx select {padding:1px;}
.spacerInputBx {margin:0px;}

.spacerInputWidget { float:left; width: 56px; padding:2px; margin:0px 0px 0px 2px;}
.spacerWidgetLbl {display:block; float:left; width:15px; height:20px; margin-left:1px;
  font-size:8px; font-weight: normal; vertical-align: middle;}
.spinnerContainer { float:left;}

.spinnerBtn {
  font-size:10px;
  width:14px;
  height:14px;
  margin-left: 1px;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  line-height: 12px;
}


#rowsBx .opInput { width:20px; float:left; margin: 0px; padding:2px; text-align:center;}
#rowsBx .spacerInputBx input:first-of-type { margin-top:0px; float:left }

/* colors */


.rowBx {
  background-color: #DDD;
}
.rowLblBx  {
  background-color: #4b4b4b;
  color:#c2c2c2;
  border-bottom:solid 2px #f77b24;
}
.boxLbl{
  color:#c2c2c2;
      text-shadow: 0px -1px 0px #333;
    font-weight: normal;
  font-size: 14px;
    line-height: 26px;
}

.spacerOptionsBx { background-color: #BCBCBC; color:#333; border-top:solid 1px #AAA;}
.spacerOptionSelectBx { }
.rowOp-Std, .rowOp-Cnd { background-color: #444; color:#AAA; border:solid 1px #666;
  border-radius: 4px; }

.rowOp-active {
      border: solid 1px #58B;
    background-color: #336698;
    color: #b6dcf8;
}
.spacerInputWidget { border-left: solid 1px #AAA;}

.spinnerBtn {background-color: #DDD; color:#333; border:solid 1px #000;}
.spinnerBtn:hover {background-color:#CDF; color:#369; border:solid 1px #369;}