.b-settings-panel {
	width: 200px;

	position: fixed;
	top: 140px;    left: -200px;
	z-index: 1000000;

	padding: 20px;

	background: #fbfbfb;
	border-right: none;
	box-shadow: 0 10px 10px rgba(0,0,0,0.1);

	color: #676767;

	-webkit-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}


.b-settings-panel:after {
	content: '';
	display: block;

	width: 2px;
	position: absolute;
	top: -1px;    right: 0;
	bottom: -1px;

	background: #404347;
}

.b-settings-panel.active {
	left: 0px;
}

.btn-settings {
	width: 40px;
	height: 40px;

	position: absolute;
	top: -1px;    left: 100%;

	background: #404347;
	border-radius: 0 3px 3px 0;
	cursor: pointer;

	text-align: center;
	font: 24px/40px 'FontAwesome';
	color: #fff;
}

.btn-settings:before {
	content: "\f013";
}

.settings-section {
	padding: 0px;
}

.b-settings-panel span {
	vertical-align: top;
	text-align: left;
}

.b-switch {
	display: inline-block;

	width: 40px;
	height: 24px;

	position: relative;
	margin: 0 9px;
	padding: 1px;

	border-radius: 14px;
	border: 1px solid #ddd;

	background: #fff;
	box-shadow: inset 0 1px 3px #f3f3f3;
}

.switch-handle {
	width: 24px;
	height: 24px;

	position: absolute;
	top: 1px;    right: 26px;

	margin-right: -25px;

	border-radius: 50%;
	box-shadow: 0 1px 2px #c4c4c4;

	background: #ff855f url(../images/btn-bg.png) repeat-x top;

	cursor: pointer;

	-webkit-transition: right 0.2s ease-in-out;
	transition: right 0.2s ease-in-out;
}

.switch-handle:before {
	content: '';

	display: block;
	margin: 9px auto;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: #fff;
}

.switch-handle.active {
	right: 100%;
}

.bg-list, .color-list {
	padding-bottom: 0;

	font-size: 0;
	letter-spacing: -.31em;
	word-spacing: -.43em;
}

.bg-list div, .color-list div {
	display: inline-block;

	width: 30px;
	height: 30px;

	margin: 0 4px 10px;
	padding: 1px;

	border-radius: 3px;
	border: 1px solid #ddd;

	background-clip: content-box;
	cursor: pointer;

	-webkit-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
}

.bg-list div.active, .color-list div.active {
	opacity: 1;

	border: 1px solid #ed4534;
	box-shadow: inset 0 0 0 2px #ed4534;
}


.color-list div {
	box-shadow: inset 0 0 0 1px #fff;
}

.color-list div.active {
	box-shadow: inset 0 0 0 2px #ed4534, inset 0 0 0 3px #fff;
}

.b-settings-panel h5 {
	margin-left: 3px;
	margin-bottom: 13px;
	text-align: left;
	font-size: 13px;
}

.bg-wood_pattern {
	background: #fff url(../images/pattern/wood_pattern.png);
}

.bg-shattered {
	background: #fff url(../images/pattern/shattered.png);
}

.bg-vichy {
	background: #fff url(../images/pattern/vichy.png);
}

.bg-random-grey-variations {
	background: #fff url(../images/pattern/random_grey_variations.png);
}

.bg-irongrip {
	background: #fff url(../images/pattern/irongrip.png);
}

.bg-gplaypattern {
	background: #fff url(../images/pattern/gplaypattern.png);
}

.bg-diamond_upholstery {
	background: #fff url(../images/pattern/diamond_upholstery.png);
}

.bg-denim {
	background: #fff url(../images/pattern/denim.png);
}

.bg-crissXcross {
	background: #fff url(../images/pattern/crissXcross.png);
}

.bg-climpek {
	background: #fff url(../images/pattern/climpek.png);
}