/* Style Switcher */

#style-switcher {
	display: block;
	width: 260px;
	position:fixed;
	top: 50%;
	margin-top: -220px;
	left: -220px;
	z-index: 9999;
	@extend .transition;
	@include translateZ(0);
	@media only screen and (max-width: $break-small) {
		display: none;	
	}
	&.active {
		left: 0;
	}
	.style-toggle {
		float: right;
		width: 40px;
		height: 40px;
		border-top: 1px solid $color3;
		border-right: 1px solid $color3;
		border-bottom: 1px solid $color3;
		color: #fff;
		line-height: 40px;
		background: $color3;
		text-align: center;
		font-size: 20px;
		cursor: pointer;
		@include single-transition(all, 0.3s, ease-in-out);
		@include border-radius(0 3px 3px 0);
		&.active {
			background: $color3;
			border-color: $color3;
			color: #fff;
		}
		i {
			vertical-align: middle;	
		}
	}
	h2 {
		display: block;
		float: left;
		width: 220px;
		padding: 0 20px;
		height: 40px;
		line-height: 42px;
		margin: 0;
		font-size: 13px;
		font-weight: 700;
		color: #fff;
		background: $color3;
	}
	.style-content {
		float: left;
		background: $color1;
		padding: 0;
		width: 220px;
		
		h3 {
			font-size: 14px;
			font-weight: 300;
			margin: 0 0 13px;
			float: left;
			color: #fff;
		}
		.section {
			padding: 15px 20px;
			border-bottom: 1px solid #3e3e3e;
			float: left;
			width: 100%;
		}
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			float: left;
			width: 100%;
			li {
				border: 0;
				display: block;
				float: left;
				&.block {
					clear: left;
					margin-bottom: 3px;
					
					a {
						margin-left: 0;
					}
				}
				a {
					display: block;
					float: left;
					font-size: 12px;
					color: #a9a9a9;
					border: 1px solid #5d5d5d;
					text-align: center;
					height: 30px;
					line-height: 30px;
					margin-left:4px;
					padding: 0 10px;
					@include border-radius(3px);
					&.active {
						border-color: $color2;
						color: #fff;
					}
					&:hover {
						border-color: #fff;	
					}
				}
				
				&:first-child {
					a {
						margin-left:0;
					}
				}
			}
		}
	}
}