/*.background-color-selector{position:relative;font-size: 0.82em;}*/
.background-color-selector { float:left;margin:30px 0 0 10px;font-variant: small-caps;clear:left;font-weight:600;}
.background-color-selector ul {margin:0 0 0 0;padding:0;}
.background-color-selector ul li {	display:inline;	margin:0 0 0 0}

/* wall color */
.background-color-box{	position:relative;width:42px;	height:28px;display:inline-block;	cursor:pointer}
.background-color-box:after{ content:" ";	display:block;	top:0;	left:0;	right:0;	bottom:0;	position:absolute;	border:1px solid transparent;	transition:border 300ms;}
.background-color-box.active:after{ border:2px solid #e90;}
.background-color-box+.background-color-box{ margin-left:9px}
.background-color-box-white{	background-color:#fff}
.background-color-box-white:after{	border:1px solid #7a7a7a}
.background-color-box-grey{	background-color:#999;}
.background-color-box-black{	background-color:#555;}
/*.background-color-box-black:before {content:"wall color";display:block;	top:30px;	left:0;	position:absolute;}*/
/* frame */
.background-color-box-frame, 
#lbFrame{	background: #fff url(img/framepic_42x28.jpg) no-repeat center;background-size: 80% 80%;border:2px ridge rgba(255,255,255,0.9);}
#lbFrame{background-size: 70% 90%;}
.background-color-box-frame.framethumb_noframe, 
#lbFrame.framethumb_noframe {border:1px solid #333;background-size: 100% 100%;}
.background-color-box-frame:before {content:"inFrame";display:block;	top:30px;	right:0;	position:absolute;}
.background-color-box-frame.framethumb_noframe:before {content:"noFrame";display:block;	top:30px;	right:0;	position:absolute;}
/* change */
.background-color-box-change{	background: #666 url(img/onebit_27.png) no-repeat center;background-size: 70% 90%;border:1px solid #000;}
.background-color-box-change:before {content:"change";display:block;	top:30px;	right:0;	position:absolute;}
/* zoom */
.background-color-box-zoom{	background: #666 url(img/ZoomIn_42x28.png) no-repeat center;background-size: 100% 100%;border:1px solid #000;}
.up {background-image: url(img/ZoomIn_42x28.png)}
.up:before {content:"focus";display:block;	top:30px;	right:6px;	position:absolute;}	/* zoomIn */
.down {background-image: url(img/ZoomOut_42x28.png)}
.down:before {content:"defocus";display:block;	top:30px;	right:0;	position:absolute;}	/* zoomOut */
/*.background-color-box-zoom:before {content:"zoom";display:block;	top:30px;	right:0;	position:absolute;}*/
/* hover */
.background-color-box-white:hover, .background-color-box-grey:hover, .background-color-box-black:hover, 
.background-color-box-zoom:hover, .background-color-box-frame:hover,.background-color-box-change:hover{	border:2px solid #e90;}	/* #e90 */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)  {
	.background-color-selector{font-size: 1.1em;}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
	/*.background-color-selector{right:50px;}*/
	.background-color-selector{right:50px;font-size: 0.9em;}
	.background-color-box+.background-color-box{ margin-left:24px}
	.background-color-box-black:before, .background-color-box-zoom:before, 
	.background-color-box-change:before, .background-color-box-frame:before, .background-color-box-frame.framethumb_noframe:before {top:60px;}
	.background-color-box-frame{	border:8px ridge rgba(255,255,255,0.9);}
	}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
	.background-color-selector{right:50px;font-size: 1.1em;}
	.background-color-box+.background-color-box{ margin-left:18px}
}