input[type="checkbox"] {
  display:none;
}

input[type="checkbox"] + label span {
  display:inline-block;
  width:19px;
  height:19px;
  margin:-1px 4px 0 0;
  vertical-align:middle;
  background:url('images/check_radio_sheet.png') left top no-repeat;
  cursor:pointer;
}

input[type="checkbox"]:checked + label span {
  background:url('images/check_radio_sheet.png') -19px top no-repeat;
}

.inputComponent {
  margin: 1px auto;
}

.inputComponent .nameLeft {
  float:left;
  color: #ffffff;
  padding: 4px;
  font-size: 0.75em;
  text-shadow: 0px -1px #333333;
  text-align: center;
  box-shadow: inset 0px 1px #ffffff;
/*  background-color: #555555; */
  background-color: #1d9fdb;
  border-radius: 5px 0px 0px 5px;
  cursor: ew-resize;
}

.inputComponent input {
  clear: right;
  padding: 4px;
  font-size: 0.75em;
/*  background-color: #9BC5D8; */
  background-color: #333333;
  color: white;
  text-align: center;
  box-shadow: inset 0px 1px #ffffff;
  border: 0;
  border-radius: 0 5px 5px 0;
}

.twoInputComponent {
  margin: 1px;
}

.twoInputComponent table {
  border-spacing: 0;
  border-collapse: collapse;
  margin: 0 auto;
}

.twoInputComponent table tr td {
  padding: 0 1px;
}

.twoInputComponent .nameTop {
  color: #ffffff;
  padding: 2px 4px;
  font-size: 0.75em;
  text-shadow: 0px -1px #333333;
  text-align: center;
  box-shadow: inset 0px 1px #ffffff;
/*  background-color: #555555; */
  background-color: #1d9fdb;
  border-radius: 5px 5px 0px 0px;
  cursor: ew-resize;
}

.twoInputComponent input {
  width: 100px;
  padding: 4px;
/*  background-color: #9BC5D8; */
  background-color: #333333;
  color: white;
  text-align: center;
  box-shadow: inset 0px -1px #333333;
  border: 0;
  border-radius: 0 0 5px 5px;
}

.checkboxComponent {
/*  width: 130px;*/
  margin: 1px;
  color: #ffffff;
  font-size: 0.75em;
  text-shadow: 0px -1px #333333;
  text-align: center;
  box-shadow: inset 0px 1px #ffffff, inset 0px -1px #333333;
  background-color: #1d9fdb;
  border-radius: 5px;
  cursor: default;
}

.checkboxComponent label {
}

.checkboxComponent input[type=checkbox] {
  /*
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  padding: 10px;
*/
}

.scrollbarComponent {
  background-color: #555555;
  width: 248px;
  height: 24px;
}

.scrollbarComponent .arrowLeft, .scrollbarComponent .arrowRight {
  color: #1d9fdb;
  width: 24px;
  height: 24px;
  text-align: center;
}

.scrollbarComponent .arrowLeft:hover, .scrollbarComponent .arrowRight:hover {
  color: white;
}

.scrollbarComponent .arrowLeft {
  float: left;
}

.scrollbarComponent .arrowRight {
  float: right;
}

.scrollbarComponent .arrowLeft > span, .scrollbarComponent .arrowRight > span {
  vertical-align: middle;
}

.scrollbarComponent .center {
  float: left;
  width: 200px;
  height: 24px;
}

.scrollbarComponent .slider {
  background-color: #1d9fdb;
  width: 40px;
  height: 20px;
  margin-top: 2px;
  margin-bottom: 2px;
  position: relative;
}

.scrollbarComponent .slider:hover {
  background-color: white;
}

.colorPickerComponent {
  clear: none;
  width: 16px;
  height: 16px;
  border: 1px solid black;
}

.colorComponent {
  width: 130px;
  display: inline-table;
}

.colorComponent input {
  width: 32px;
  margin: 0 auto;
}

.colorComponent label {
  margin-left: 5px;
}

.colorComponent table {
  width: 100%;
  border-spacing: 0;
/*  border-collapse: collapse; */
  margin: 0 auto;
  border: 1px solid white;
  border-radius: 5px;
}

.colorComponent table tr td {
  padding: 1px;
}

.colorComponent .nameTop {
  color: #ffffff;
  padding: 2px 4px;
  font-size: 0.75em;
  text-shadow: 0px -1px #333333;
  text-align: center;
  box-shadow: inset 0px 1px #ffffff;
/*  background-color: #555555; */
  background-color: #1d9fdb;
  border-radius: 5px 5px 0px 0px;
}

.switchComponent {

}

.btn-align {
  width: 32px;
  height: 32px;
  border: none;
}

.btn-align-top-left {
  background: url('images/aligns.png') 0 0;
}

.btn-align-top-center {
  background: url('images/aligns.png') -32px 0;
}

.btn-align-top-right {
  background: url('images/aligns.png') -64px 0;
}

.btn-align-middle-left {
  background: url('images/aligns.png') 0 -32px;
}

.btn-align-middle-center {
  background: url('images/aligns.png') -32px -32px;
}

.btn-align-middle-right {
  background: url('images/aligns.png') -64px -32px;
}

.btn-align-bottom-left {
  background: url('images/aligns.png') 0 -64px;
}

.btn-align-bottom-center {
  background: url('images/aligns.png') -32px -64px;
}

.btn-align-bottom-right {
  background: url('images/aligns.png') -64px -64px;
}