.spinBox{
  position      : relative;
  display       : inline-block;
  width			: 98%;
  border-radius : 0.25em;
  box-shadow    : 0 0.0625em 0 rgba(255,255,255,0.5);
}

.spinBox input{
  display                   : block;
  height                    : 2em;
  border-right              : none; 
}

.spinBox input[disabled]{
  background : rgb(240,240,240);
}

.spinBoxUp,
.spinBoxDown{
  position         : absolute;
  right            : 0;
  display          : block;
  width            : 0.75em;
  height           : 0.75em;
  border           : 0.0625em solid rgb(224,224,224);
  background       : rgb(248,248,248);
  background-image : -webkit-linear-gradient(rgb(248,248,248),rgb(240,240,240));
  background-image :         linear-gradient(rgb(248,248,248),rgb(240,240,240));
  cursor           : pointer;
}

.spinBox input[disabled] + span,
.spinBox input[disabled] + span + span{
  background : rgb(240,240,240);
  cursor     : auto;
}

.spinBoxUp span,
.spinBoxDown span{
  display : block;
  width   : 0.75em;
  height  : 0.75em;
}

.spinBoxUp{
  top                     : 0;
  border-top-right-radius : 0.25em;
}

.spinBoxUp span{
  background : url('arrow-up.png') no-repeat center center;
}

.spinBoxDown{
  bottom                     : 0;
  border-bottom-right-radius : 0.25em;
}

.spinBoxDown span{
  background : url('arrow-down.png') no-repeat center center;
}

.spinbox-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, .9);
    z-index: 500;
    display: none;
    cursor: pointer;
}
.spinbox-lightbox img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 90%;
    max-height: 90%;
    border: 2px solid #fff;
}