.colorskinpanel {
   position: fixed; top: 75px; left: -170px; z-index: 10000; width: 170px; height: 150px; }
.colorskinpanelinner {
   padding: 10px; background: #fff; border: 1px solid rgba(0,0,0,0.2); border-left: 0;
   -moz-box-shadow: 0 0 5px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
   box-shadow: 0 0 5px rgba(0,0,0,0.1); }
   
#colorbtn {
   display: block; padding: 8px 9px 8px 8px; border: 1px solid rgba(0,0,0,0.2); border-left: 0;
   position: absolute; top: 0; right: -30px; background: #fff; color: #333; font-size: 14px;
   -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
   box-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
#colorbtn:hover { text-decoration: none; color: #000; cursor: pointer; }
   
.colorskinpanel h4 {
   font-size: 12px; text-transform: uppercase; border-bottom: 2px solid #ddd;
   padding-bottom: 5px; margin-bottom: 5px; }
   
.colorskinpanel ul { list-style: none; padding: 0; }
.colorskinpanel ul li { display: inline-block; margin-right: 3px; }
.colorskinpanel ul li:last-child { margin-right: 0; }
.colorskinpanel ul li.title {
   text-transform: uppercase; font-size: 11px; color: #ccc; display: block;
   font-weight: bold; margin-bottom: 5px; }

.colorskin li a { display: inline-block; width: 15px; height: 15px; cursor: pointer; }
.colorskin li a:hover { text-decoration: none; }
.colorskin li a.default { background: #ed7703; }
.colorskin li a.blue { background: #2557bd; }
.colorskin li a.yellow { background: #fdaa35; }
.colorskin li a.green { background: #0ca917; }
.colorskin li a.red { background: #bd1318; }
.colorskin li a.bluegreen { background: #0bc4b9; }
.colorskin li a.purple { background: #b50bc4; }

.colorskin li a.wide,
.colorskin li a.boxed {
   border: 1px solid #ddd; padding: 2px 0; text-align: center; color: #333; display: block;
   width: 67px; height: auto; text-transform: uppercase; font-size: 11px; font-weight: bold; }
.colorskin li a.current { background: #333; color: #fff; border-color: #333; }