.demo-style {
	position: fixed;
	top: 210px;
	z-index: 10000;
}

.ie8 .demo-style { display: none; }

.demo-style .selector {
	background: #19232d;
	border-radius: 0px;
	width: 190px;
	margin-left: -5px;
	padding-left: 5px;
	color: #dadada;
	box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.3);
}

.demo-style a { color: #dadada; }

.demo-style .style-heading {
	background: #19232d;
	padding: 10px;
	margin-bottom: 0px;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
}

.demo-style .ele {
	padding: 0 10px;
	margin-bottom: 10px;
	text-align: center;
	font-size: 0.9em;
}

.demo-style .heading {
	background: #1e2935;
	padding: 8px;
	margin: 0 -10px 10px -10px;
}

.demo-style .content { text-align: center; }

.demo-style select, .demo-style input {
	border-color: #efefef;
	background: #dadada;
	padding: 1px 3px;
	min-width: 60%;
	outline: none;
	color: #000;
}

.switch-toggle a { 
	color: #dadada;
	display: inline-block;
	padding: 3px 8px;
	border: 1px solid #424d61;
	margin-right: 5px; 
}

.switch-toggle a:hover { text-decoration: none; }

.switch-toggle a.active {
	border: 1px solid #dadada;
}

.sample-colors { margin-bottom: -5px; padding: 0 10px; }

.sample-color {
	width: 20px;
	height: 20px;
	display: inline-block;
	border-radius: 1px;
	box-shadow: 0 0 5px 0 rgba(0,0,0, 0.3);
	margin-right: 5px;
	margin-bottom: 5px;
}

.sample-color.active {
	-webkit-box-shadow: 0 0 5px 0 rgba(255,255,255,0.5), inset 0 0 2px 0 rgba(255,255,255,0.5);
	-moz-box-shadow: 0 0 5px 0 rgba(255,255,255,0.5), inset 0 0 2px 0 rgba(255,255,255,0.5);
	box-shadow: 0 0 5px 0 rgba(255,255,255,0.5), inset 0 0 2px 0 rgba(255,255,255,0.5);
}


.sample-color.turquoise { background: #16a085; }
.sample-color.red { background: #e74c3c; }
.sample-color.sunflower { background: #f39c12; }
.sample-color.green { background: #32742C; }
.sample-color.tomato { background: #FF6347; }
.sample-color.chocolate { background: chocolate; }
.sample-color.steelblue { background: steelblue; }
.sample-color.purple { background: #D70060; }
.sample-color.pomegranate { background: #c0392b; }


.demo-style .toggle {
	background: #19232d url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWklEQVQ4T6VTwW2DQBD0ScCbdGAewNNOBYEO0oHdQZQKQjpwCaaDdBBSQcgTeEAJzheQyMzpDp0Jp1gKks2xtzc7M7crNpanaZpkmqZ3tX0fRVG5lip0sG1bH2s/CIKOsbquz3gd1H4OgKOK713X7ZB34bcE4OFhGFhtj18hhChQPTMrIpYh9qhySoCkBJEAqMaDnzY5a3EA4HzQzRKqqipRZXcjyAckJbMELgCQAeBFAXyTsuM49MHv+/5o7G0g5TWOYylRKPpPWEuTZFCI5zAMTyabRQFunZGXE2Ba0oa+O+2y3oPRWxjdLnP/D6AahvT1nd8qIceZk3kLpolskgxSmOSP43gw++LKRK0JXhRYPyw1Wr4LXGMqDeefzaA/wOR8zK2Mu2YL70DvCwffzHsnEGkjlpAlczzPS+ZWViw4D1s9dbZhIlvkX66GaY2qOR+onKKx6NGv5wdN3La6dRryJgAAAABJRU5ErkJggg==) no-repeat;
	background-position: 40% 50%;
	border-radius: 0 5px 5px 0;
	width: 35px;
	height: 41px;
	position: absolute;
	left: 170px;
	/*box-shadow: -5px 0 0 #333, 0px 0px 0px 0px rgba(0,0,0, 0.3);*/
	cursor: pointer;
}

.demo-style .toggle.closed { left: 0; }

.demo-style .reset-style {
	cursor: pointer;
	color: #19232d;
}


@media only screen and (max-width: 1366px) {
	.demo-style .toggle {
		left: 155px;
	}
}

@media only screen and (max-width: 768px) {
	.demo-style {
		display: none;
	}
}

@media only screen and (max-height: 768px) {
	.demo-style { top: 122px; }
}