.color-switcher {
	width: 270px;
	position: fixed;
	top: 200px;
	left: -270px;
	background-color: #ffffff;
	border: 1px solid #c3c3c3;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    padding: 20px 26px;
	opacity: 0.9;
	z-index: 200;
}

.color-switcher:before {
    background-color: #5A5758;
    content: "";
    display: block;
    height: 6px;
    left: 0;
    position: absolute;
    top: -7px;
    width: 101%;
}

.color-switcher-toggle {
    background: url("../images/cog.png") no-repeat scroll 50% 50% #5A5758;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 30px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    right: -51px;
    text-align: center;
    top: -7px;
    vertical-align: middle;
    width: 50px;
}

.color-selection {
    overflow: hidden;
	padding: 10px 0 20px;
	margin-left: -5px;
}

.color-selection a {
    background-color: #CCCCCC;
    display: block;
    float: left;
    height: 34px;
    margin: 5px 6px;
    width: 34px;
	text-align: center;
}

.color-selection a.selected {
    border: 2px solid;
	margin: 3px 4px;
}

.color-selection a span:before {
    content: "";
    height: 100%;
    right: 17px;
    position: absolute;
    top: 0;
    width: 17px;
	background-color: #aa0000;
}

.color-selection a span:after {
    content: "";
    height: 100%;
    left: 17px;
    position: absolute;
    top: 0;
    width: 17px;
	background-color: #0000aa;
}

.color-selection a span {
    display: inline-block;
    height: 100%;
    position: relative;
    width: 100%;
}


.color-selection a span.theme-default:before {
	background-color: #ffffff;
	border: 1px solid #000000;
	border-right: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.color-selection a span.theme-default:after {
	background-color: #000000;
}

.color-selection a span.theme-dark:before {
	background-color: #000000;
}
.color-selection a span.theme-dark:after {
	background-color: #1E1E1E;	
}

.color-selection a span.theme-red:before {
	background-color: #E23434;
}
.color-selection a span.theme-red:after {
	background-color: #ffffff;
	border: 1px solid #E23434;
	border-left: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.color-selection a span.theme-blue:before {
	background-color: #3FA7F3;
}
.color-selection a span.theme-blue:after {
	background-color: #ffffff;
	border: 1px solid #3FA7F3;
	border-left: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.color-selection a span.theme-green:before {
	background-color: #7AC743;
}
.color-selection a span.theme-green:after {
	background-color: #ffffff;
	border: 1px solid #7AC743;
	border-left: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.switcher-title {
    color: #AFAFAF;
    font-size: 14px;
	margin-bottom: 5px;
}

.switcher-layout,
.switcher-typography-title {
    color: #AFAFAF;
    font-size: 14px;
    margin-bottom: 15px;
}


.color-switcher select {
    margin-bottom: 15px;
    /*margin-right: 5px;
    width: 150px;*/
}

#change-scheme {
    border: 1px solid #000000;
    border-radius: 3px;
    color: #000000;
    float: left;
    margin: 10px 0 15px;
    padding: 5px 10px;
}

.switcher-note {
    color: #555555;
    float: left;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.2;
}

.color-switcher .preview {
	cursor: pointer;
	display: none;
}

/* Logo fix */
.demostyle-dark #logo {
    background: url("../images/logo_white.png") no-repeat scroll 50% 50% transparent;
    text-indent: -9999px;
}