/*------------------------------------------------------------------------
* Copyright (c) 2008-2012 ZooTemplate. All Rights Reserved.
* @license - Copyrighted Commercial Software
* Author: ZooTemplate
* Websites:  http://www.zootemplate.com
-------------------------------------------------------------------------*/
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: 29px; 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; }
.rtl #color-box h3 {padding: 0 20px 0 0;}
#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; }
select[name="layouts"]{
	float:left;
    line-height:32px;
    margin:15px 0;
    padding:7px;
}
select[name="layouts"] option{
	padding-top: 5px;
	padding-bottom: 5px;
}

/*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/pattern17.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); }