﻿#styleSwitcher .shake {
      animation-name: shake;
      animation-duration: 5s;
      animation-iteration-count: 2;
  }
#styleSwitcher .tooltip {
      font-size: 12px;
	  font-weight:600;
      line-height: 14px;
      display: inline-block;
      background: #4B5 url("../assets/happy.png") no-repeat scroll 135px 15px;
      color: #FFF;
      padding: 6px 20px 6px 20px;
      border-radius: 4px;
      position: relative;
      left: 55px;
	  top:-38px;
  }
#styleSwitcher .tooltip:before {
    content: '';
    display:inline-block;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #4B5;
    position: absolute;
    top: 50%;
    left: -5px;
    margin-top: -6px;
  }
#styleSwitcher.active{
	transform: translate3d(250px,0px, 0px);

}
.style-switcher {
	background: #FBFBFB;
    width: 250px;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: 1050;
    border-radius: 0;
    left: -250px;
    -webkit-box-shadow: 10px 0px 5px -2px rgba(136, 136, 136, 0.19);
    border-right: solid #0088cc;
	}
}
.style-switcher .style-switcher-wrap {
	height:100%;
	margin:0;
	overflow-y:auto;
	padding:15px;
	position:relative
}
.style-switcher h4 {
	background:#171717;
	color:#fff;
	font-size:15px;
	font-weight:600;
	line-height:30px;
	margin:0 0 7px;
	padding:0
}
.style-switcher .style-switcher-open {
	background-color:#0088cc;
	display:block;
	height:40px;
	position:absolute;
	right:-40px;
	top:102px;
	width:40px;
	font-size:17px;
	line-height:38px;
	color:#FFF;
	text-align:center;
	text-decoration:none;
	border-radius:0 6px 6px 0;
	cursor: pointer;
}
.style-switcher h5 {
	color: #08C;
	margin: 0px 0px 2px;
	padding: 0px;
	line-height: 30px;
	font-size: 13px;
	text-transform: none;
	font-weight: 600;
	padding-left: 10px;
}
.style-switcher .form-control {
	background-color:#fff!important;
	border:1px solid #ccc!important
}
.style-switcher .colorpicker-element {
	margin:-3px 0 7px
}
.style-switcher ul.options {
	list-style:none;
	margin:-3px 0 10px;
	padding:0;
	overflow:hidden
}
.style-switcher ul.options li {
	float:left;
	margin:2px
}
.style-switcher ul.options li a {
	display:block;
	width:15px;
	height:15px;
	cursor:pointer
}
.style-switcher ul.options li a.pattern {
	background-repeat:repeat;
	background-position:0 0;
	background-color:transparent
}
.style-switcher .color-picker {
	display:none;
	margin-bottom:15px
}
.style-switcher .options-links {
	padding:0 0 10px
}
.style-switcher .options-links a {
	background-color:#000;
	color:#ccc;
	font-size:12px;
	margin-bottom:0;
	margin-right:5px;
	padding:5px 12px;
	text-decoration:none;
	border-radius:4px
}
.style-switcher .options-links a:last-child {
	margin-right:0
}
.style-switcher .options-links a:hover {
	background-color:#262626
}
.style-switcher .options-links a.active {
	background:#FFF;
	color:#666
}
.style-switcher .style-switcher-buttons {
	border-top:1px solid #000;
	margin-top:15px;
	padding-top:15px;
	text-align:center
}
.style-switcher .style-switcher-buttons a {
	padding:8px;
	font-size:13px;
	display:inline-block
}
.style-switcher .style-switcher-buttons .reset {
	width:74px
}
.style-switcher .style-switcher-buttons .get-css {
	width:137px;
	font-weight:700
}
.style-switcher .style-switcher-buttons .get-css i {
	font-size:14px;
	margin-right:5px
}
textarea.get-css {
	height:325px;
	width:538px;
	resize:none;
	cursor:text
}
