ul.suggestion {width: 100%; float: left; margin: 0; border-bottom: 1px dotted #EAEAEA; padding: 10px 0;}
ul.suggestion li{width: 35px; height: 35px; float: left; margin: 0 2px; background: 0; padding: 0;}
ul.suggestion li a{width: 30px; height: 30px; float: left; border: 1px solid #dddddd; margin: 4px;}
ul.suggestion li a:hover, ul.suggestion li.active a{border: 5px solid #dddddd; margin: 0;}
ul.suggestion-item span{display: none;}
.groupitem{width: 100%; float: left; margin: 5px 0;}
#mooRainbow {font-size: 11px; color: #000;}
.moor-box {width: 262px; height: 166px; color: #FFF; font-size: 90%; background: url(../images/rainbow/box.png) no-repeat 0 0;}
.moor-overlayBox {width: 135px; height: 135px; margin-top: 15px; margin-left: 15px; border: 1px solid #000;}
.moor-slider {cursor: pointer; border: 1px solid #000; margin-top: 15px; margin-left: 165px; width: 10px; height: 135px;}
.moor-colorBox {border: 1px solid #000; width: 50px; height: 20px; margin-top: 15px; margin-left: 195px;}
.moor-currentColor {margin-top: 16px; margin-left: 221px; width: 25px; height: 20px;}
.moor-okButton {
  font-family: Tahoma;
  font-weight: bold;
  font-size: 11px;
  margin-top: 160px;
  margin-left: 15px;
  color: #FFF;
  height: 22px;
  line-height: 22px;
  border: 1px solid #d6d6d6;
  background: #000;
  border-left-color: #f5f5f5;
  border-top-color: #f5f5f5;
}
#mooRainbow label {font-family: mono;}
/* Following are just <label> */
.moor-rLabel {margin-top: 42px; margin-left: 195px;}
.moor-gLabel {margin-top: 67px; margin-left: 195px;}
.moor-bLabel {margin-top: 93px; margin-left: 195px;}
.moor-HueLabel {display: none; margin-top: 190px; margin-left: 315px;}
span.moor-ballino {/* Style hue ° (degree) !! */display: none; margin-top: 190px; margin-left: 370px;}
.moor-SatuLabel {display: none; margin-top: 215px; margin-left: 315px;}
.moor-BrighLabel {display: none; margin-top: 240px; margin-left: 315px;}
.moor-hexLabel {width: 55px; margin-top: 110px; margin-left: 195px;}
/* <input> */
.moor-rInput, .moor-gInput, .moor-bInput, .moor-HueInput, .moor-SatuInput, .moor-BrighInput {margin: 0 0 0 7px; width: 30px;}
.moor-hexInput {width: 50px;}
.moor-cursor {background-image: url(../images/rainbow/moor_cursor.gif); width: 12px; height: 12px;}
.moor-arrows {top: 9px; left: 157px; width: 28px; height: 9px; cursor: pointer; background-image: url(../images/rainbow/moor_arrows.gif);}
.moor-chooseColor {margin-top: 16px; margin-left: 196px; width: 25px; height: 20px;}
#option_btn {
  cursor: pointer;
  left: 0;
  position: fixed;
  top: 80px;
  z-index: 999;
  border-bottom: 1px solid #DBDDD8;
  border-right: 1px solid #DBDDD8;
  border-top: 1px solid #DBDDD8;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  -webkit-box-shadow: 0 0 3px #cecece;
  -moz-box-shadow: 0 0 3px #cecece;
  box-shadow: 0 0 3px #cecece;
  background: #fff;
  padding: 0;
}
#option_btn span{
  margin: 0 0 0 -5px;
  width: 45px;
  height: 138px;
  display: block;
  cursor: pointer;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  background: url(../images/icon-all.png) no-repeat 0 -744px #fff;
}
#option_btn.rb-actived span{
  margin: 0 0 0 -5px;
  width: 45px;
  height: 138px;
  display: block;
  cursor: pointer;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  background: url(../images/icon-all.png) no-repeat 0 -615px #fff;
}
#option_wrapper {
  color: #000;
  font-size: 90%;
  padding: 0;
  position: fixed;
  top: 5px;
  width: 350px;
  z-index: 999;
  left: -355px;
  border-bottom: 1px solid #DBDDD8;
  border-right: 1px solid #DBDDD8;
  border-top: 1px solid #DBDDD8;
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  -webkit-box-shadow: 0 0 3px #cecece;
  -moz-box-shadow: 0 0 3px #cecece;
  box-shadow: 0 0 3px #cecece;
  background: #fff;
}
#option_wrapper .inner {margin: 0; padding: 0;}
#option_wrapper .inner2 {margin: 0; padding: 0 10px;}
.moor-box input {
  border: solid 1px #000;
  text-transform: uppercase;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.rb-items {margin: 5px 0; width: 33%; float: left;}
.rb-pattern{width: 33%; float: left; margin: 5px 0; position: relative;}
.rb-item {cursor: pointer; position: relative;}
.rb-color {border: 1px solid #D7D7D8; cursor: pointer; height: 20px; line-height: 20px; width: 70px; padding: 0 5px;}
.rb-item:hover {background-position: -22px 0;}
.pt-select {width: 90px; border: none; text-indent: -9999em; background-color: #1E1E1E;}
.pt-select option {height: 25px; text-indent: -9999em; border-bottom: solid 1px #D7D7D8;}
.pt-select option:hover {cursor: pointer;}
.pattern-select {display: none;}
.pattern-active {display: block; width: 70px; height: 20px; cursor: pointer; border: 1px solid #D7D7D8;}
.pattern-popup {margin: 0; padding: 0; width: 100%; display: none;}
.lady_item {
  margin: 0 3px 5px 2px;
  cursor: pointer;
  float: left;
  width: 34px;
  height: 34px;
  border: solid 1px #dddddd;
  background-color: #ffffff;
}
.shead, .shead h5 {
  background-color: #F5F5F5;
  color: #1D1C1B;
  font-family: 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
  margin: 0;
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
}
.rb-items-botton {
  background-color: #F5F5F5;
  color: #1D1C1B;
  font-family: 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
  margin: 0;
  padding: 10px;
  text-align: right;
  text-transform: uppercase;
}
.rb-apply {
  cursor: pointer;
  padding: 5px 20px;
  color: #454545;
  background: #D5D5D5;
  font-size: 100%;
  margin: 0 10px;
  border: solid 1px #9A9A9A;
}
.rb-reset {
  cursor: pointer;
  padding: 5px 20px;
  color: #454545;
  margin: 0 10px;
  background: #D5D5D5;
  border: solid 1px #9A9A9A;
  font-size: 100%;
}
.cbitems h4 {
  padding: 0;
  color: #313131;
  font-size: 100%;
  line-height: 30px;
  height: 30px;
  margin: 10px 0 0;
  width: 100%;
  font-weight: normal;
  text-transform: uppercase;
  border-bottom: 1px dotted #eaeaea;
}
#color-box h3 {
  padding: 0;
  color: #313131;
  font-size: 100%;
  line-height: 30px;
  height: 30px;
  margin: 0;
  width: 100%;
  font-weight: normal;
  text-transform: uppercase;
  border-bottom: 1px dotted #eaeaea;
}
#color-box h3 a{color: #313131; width: 100%; float: left;}
#color-box h3 a:focus, #color-box h3 a:hover{text-decoration: none;}
#color-box .panel{width: 100%; clear: both; margin: 0;}
h3.pane-toggler{background: url('../images/rainbow/select.png') no-repeat right 11px;}
h3.pane-toggler-down{background: url('../images/rainbow/select.png') no-repeat right -30px;}
.rb-item select.inputbox {
  border: 1px solid #D9D9D9;
  color: #000000;
  margin: 0;
  padding: 2px;
  height: auto;
  width: 100px;
}
/*pattern background*/
.pattern1 {background-image: url(../images/patterns/pattern1.png);}
.pattern2 {background-image: url(../images/patterns/pattern2.png);}
.pattern3 {background-image: url(../images/patterns/pattern3.png);}
.pattern4 {background-image: url(../images/patterns/pattern4.png);}
.pattern5 {background-image: url(../images/patterns/pattern5.png);}
.pattern6 {background-image: url(../images/patterns/pattern6.png);}
.pattern7 {background-image: url(../images/patterns/pattern7.png);}
.pattern8 {background-image: url(../images/patterns/pattern8.png);}
.pattern9 {background-image: url(../images/patterns/pattern9.png);}
.pattern10 {background-image: url(../images/patterns/pattern10.png);}
.pattern11 {background-image: url(../images/patterns/pattern11.png);}
.pattern12 {background-image: url(../images/patterns/pattern12.png);}
.pattern13 {background-image: url(../images/patterns/pattern13.png);}
.pattern14 {background-image: url(../images/patterns/pattern14.png);}
.pattern15 {background-image: url(../images/patterns/pattern15.png);}
.pattern16 {background-image: url(../images/patterns/pattern16.png);}