/* Style for Styleswitcher */

.styleswitcher {
	width: 200px;
	position: absolute;
	top: 200px;
	left: -200px;
	height: 591px;
	z-index: 99999;
	padding: 10px 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff url('styleswitcher-bg.png') no-repeat left top;
}

.styleswitcher-trigger {
	width: 54px;
	height: 202px;
	background: transparent url('pick-your-style.png') no-repeat left top;
	position: absolute;
	right: -54px;
	top: 0;
}

	.styleswitcher-trigger a {
		display: block;
		height: 100%;
		width: 100%;
	}

.setting-wrap ul li {
	border: 5px solid #f1f1f1;
	float: left;
	width: 37px;
	height: 41px;
	margin: 0 10px 10px 0;
	background-position: left top;
	background-color: transparent;
	background-repeat: no-repeat;
}

	.setting-wrap ul li a { 
		display: block;
		width: 100%;
		height: 100%;
	}

	.setting-active {
		background-position: left bottom;
	}

	.setting-boxed { background-image: url('template-layout-1.png'); }
	.setting-fullwidth { background-image: url('template-layout-2.png'); }
	.setting-small-background { background-image: url('background-layout-1.png'); }
	.setting-full-background { background-image: url('background-layout-2.png'); }

.setting-background ul {
	width: 180px;
}

.setting-background ul li, .setting-colors ul li {
	border: none;
	background-color: #f1f1f1;
	width: 30px;
	height: 30px;
}

.setting-color {
	display: block;
	border: 5px solid #f1f1f1;
	width: 37px;
	height: 41px;
	background: transparent url('theme-color-picker.png') no-repeat left top;
	float: left;
	margin: 0 10px 0 0;
	cursor: pointer;
}

.color-data {
	overflow: hidden;
	padding: 5px 0 0 0;
	font-family: 'Lato';
}




/* Landscape phone to portrait tablet */
@media (max-width: 979px) and (min-width: 768px) { 
	.styleswitcher {
		display: none;
	}
}

@media (max-width: 767px) {  
	.styleswitcher {
		display: none;
	}
}