/**
 * EMThemes
 *
 * @license commercial software
 * @copyright (c) 2012 Codespot Software JSC - EMThemes.com. (http://www.emthemes.com)
 */

.colorpicker {
	width: 356px;
	height: 176px;
	overflow: hidden;
	position: absolute;
	background: url(../images/variation/colorpicker_background.png);
	font-family: Arial, Helvetica, sans-serif;
	display: none;
    z-index:999;
}
.colorpicker_color {
	width: 150px;
	height: 150px;
	left: 14px;
	top: 13px;
	position: absolute;
	background: #f00;
	overflow: hidden;
	cursor: crosshair;
}
.colorpicker_color div {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	background: url(../images/variation/colorpicker_overlay.png);
}
.colorpicker_color div div {
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	overflow: hidden;
	background: url(../images/variation/colorpicker_select.gif);
	margin: -5px 0 0 -5px;
}
.colorpicker_hue {
	position: absolute;
	top: 13px;
	left: 171px;
	width: 35px;
	height: 150px;
	cursor: n-resize;
}
.colorpicker_hue div {
	position: absolute;
	width: 35px;
	height: 9px;
	overflow: hidden;
	background: url(../images/variation/colorpicker_indic.gif) left top;
	margin: -4px 0 0 0;
	left: 0px;
}
.colorpicker_new_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 213px;
	top: 13px;
	background: #f00;
}
.colorpicker_current_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 283px;
	top: 13px;
	background: #f00;
}
.colorpicker input {
	background-color: transparent;
	border: 1px solid transparent;
	position: absolute;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #898989;
	top: 4px;
	right: 11px;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 11px;
}
.colorpicker_hex {
	position: absolute;
	width: 72px;
	height: 22px;
	background: url(../images/variation/colorpicker_hex.png) top;
	left: 212px;
	top: 142px;
}
.colorpicker_hex input {
	right: 6px;
}
.colorpicker_field {
	height: 22px;
	width: 62px;
	background-position: top;
	position: absolute;
}
.colorpicker_field span {
	position: absolute;
	width: 12px;
	height: 22px;
	overflow: hidden;
	top: 0;
	right: 0;
	cursor: n-resize;
}
.colorpicker_rgb_r {
	background-image: url(../images/variation/colorpicker_rgb_r.png);
	top: 52px;
	left: 212px;
}
.colorpicker_rgb_g {
	background-image: url(../images/variation/colorpicker_rgb_g.png);
	top: 82px;
	left: 212px;
}
.colorpicker_rgb_b {
	background-image: url(../images/variation/colorpicker_rgb_b.png);
	top: 112px;
	left: 212px;
}
.colorpicker_hsb_h {
	background-image: url(../images/variation/colorpicker_hsb_h.png);
	top: 52px;
	left: 282px;
}
.colorpicker_hsb_s {
	background-image: url(../images/variation/colorpicker_hsb_s.png);
	top: 82px;
	left: 282px;
}
.colorpicker_hsb_b {
	background-image: url(../images/variation/colorpicker_hsb_b.png);
	top: 112px;
	left: 282px;
}
.colorpicker_submit {
	position: absolute;
	width: 22px;
	height: 22px;
	background: url(../images/variation/colorpicker_submit.png) top;
	left: 322px;
	top: 142px;
	overflow: hidden;
}
.colorpicker_focus {
	background-position: center;
}
.colorpicker_hex.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_slider {
	background-position: bottom;
}
#demotool_variation{left:-391px;}

#demotool_variation .btn-toggle {
  background: url("../images/variation/close-open.png") no-repeat scroll 0 0 transparent;
  display: block;
  position: fixed;
  left: 0;
  text-indent: -999px;
  top: 258px;
  width:47px;height:47px;display:block;text-indent:-99999px;
  border:#cecece 1px solid;
  border-left:none; 
}

#demotool_variation{border:#cecece 1px solid;background:#fff;width:390px; z-index:2; position:absolute;top:0;left:-100%}
#demotool_variation  .copyright {background:#e5e5e5;padding:8px 15px;color:#7F7F7F;font:12px Tahoma,Arial,Helvetica,sans-serif;clear:both;float:left;margin:15px 0 0 0;width:360px;}
#demotool_variation  .copyright a{font-weight:bold; color:#878686}
.demotool-title{background: url("../images/variation/bg_var.png") repeat-x;height:31px;font:bold 12px Tahoma,Arial,Helvetica,sans-serif;color:#fff;
line-height:30px;padding:0 15px;margin-bottom:6px;}
.content-title{background: url("../images/variation/bg_bottom_title.png") repeat-x bottom center #fff;padding-bottom:8px;cursor:pointer;}
.content-title span{color:#ba0014;font:bold 12px Tahoma,Arial,Helvetica,sans-serif;padding:2px 15px 8px;display:block;}
.demotool-content .desc{ padding:5px 0 5px 9px; background:url(../images/icons.png) 0 -631px no-repeat; color:#878686; font:italic 10px/1.35 Arial, Helvetica, sans-serif;}
.demotool-content #em_variation_google_font_preview{  margin-bottom:0; }
.demotool-content .col-1 .desc{ min-height:55px; padding-bottom:0; color:#878686; margin-right:12px;}
.demotool-content .box{border:#e0e0e0 1px solid; border-width:0 0 1px 0; margin:0 10px;float:left;clear:both;width:370px;padding:0 0 20px;}
.demotool-content .box.last{border-bottom:none;background:#fff;}
.demotool-content .box.first{padding:9px 0 14px 0;}
.demotool-content .box .title {font:bold 11px Tahoma,Arial,Helvetica,sans-serif;color:#000;text-transform:uppercase;cursor:default;}
.demotool-content .box .title .name_title{float:left;margin-top:2px;}
.demotool-content .box .title .box-tgl {float:right;background: url("../images/variation/var_close.png") no-repeat scroll 0 0 transparent;width:19px;height:19px;text-indent:-99999px;cursor:pointer; margin-right:10px;}
.demotool-content .box.close .title .box-tgl{ background: url("../images/variation/var_show.png") no-repeat scroll 0 0 transparent; }
.demotool-content .box .content{clear:both;}
.demotool-content a.btn-reset,
.demotool-content a.btn-apply  {display: block;height: 32px;margin: 15px 0 0 15px;text-indent: -999px;float:left;}
.demotool-content a.btn-reset{background: url("../images/variation/btn_reset.png") no-repeat scroll 0 0 transparent;width: 78px;}
.demotool-content a.btn-apply {background: url("../images/variation/btn_apply.png") no-repeat scroll 0 0 transparent;width: 97px;}
.demotool-content .box .content .col-1:first-child{ /*margin-left:0;*/}
.demotool-content .box .content .col a:hover{ text-decoration:none;}
.demotool-content .box .content .input{ overflow:hidden;}
.demotool-content .box .content .input a{ display:inline-block; float:left;}
.demotool-content .box .content .input a:hover img{ border:2px solid #000000}
.demotool-content .box .content .input a.selected img{ border:2px solid #000000}
.demotool-content .box .content .input a img{ border:2px solid #ffffff}
.demotool-content .box .content .col{ float:left;margin-left:12px;}
.demotool-content .box .content .col-1{width:111px; margin-left:12px;}
.demotool-content .box .content .col .input.input_font{border: 0 none;float: left;margin: 0;padding: 6px 2px;min-height:21px;background: url("../images/variation/bg_select_font.png") no-repeat scroll 0 0 transparent;width:360px;}
.demotool-content .box .content .col .input select{ width:352px; padding:0; border:1px solid #DDDDDD; height:auto}
.demotool-content .box .content .col .input select#em_variation_google_font option { border-top: 1px solid #f0e7e7; padding: 3px 4px; }
.demotool-content .box .content .col .input select#em_variation_google_font option:first-child { border-top:none; }
.demotool-content .box .content .row .label,
.demotool-content .box .content .col select{font:12px Tahoma,Arial,Helvetica,sans-serif;color:#000; padding:0;border:none;background:none;background-color: transparent;-webkit-appearance:none;}
.demotool-content .box .content .row .label{padding:14px 0 8px;}
.demotool-content .box .content  select option{ padding-right:0;}
.demotool-content .box .content .col .input input{ height:30px;border:#e1e1e1 1px solid; background:#fff; padding:0 5px;color:#000; font-size:11px;line-height:30px; width:350px;}
.demotool-content .box .content .col-1 .input input{ width:75px;}

@media screen and (-webkit-min-device-pixel-ratio:0){
.demotool-content .box .content .col-1 .input.input_font{background: url("../images/variation/bg_select_font_1.png") no-repeat scroll 0 0 transparent;width:165px;}
}

.qrcode {position:fixed;top:306px;left:0;z-index:99}
.qrcode  li{width:49px;}
.qrcode li a span{display:block;width:47px;height:47px;background: url("../images/i_mobile.png") no-repeat scroll 0 0 transparent;text-indent: -999px;top: 307px;
 width:47px;height:47px;text-indent:-99999px;border:#cecece 1px solid;}
.qrcode li a img{border:1px solid #CECECE;padding:20px;background:#fff; z-index:99;}



.btn-toggle {
  background: url("../images/variation/close-open.png") no-repeat scroll 0 0 transparent;
  display: block;
  position: fixed;
  left: 0;
  text-indent: -999px;
  top: 258px;
  width:47px;height:47px;display:block;text-indent:-99999px;
  border: #CECECE 1px solid;
  border-bottom:none

}

.color_variation .btn_color_variation {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("../images/skin-picker.png") no-repeat scroll 0 0 transparent;
    border-color: #CECECE #CECECE #CECECE -moz-use-text-color;
    border-image: none;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px medium;
    display: block;
    height: 47px;
    left: 0;
    position: fixed;
    text-indent: -999px;
    top: 210px;
    width: 47px;
    z-index: 14;
}
.color_variation .colordiv {
    background: none repeat scroll 0 0 #F6F6F6;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    left: 23%;
    position: absolute;
    top: 10%;
    z-index: 999;
}

.color_variation .colordiv {
    background: none repeat scroll 0 0 #F6F6F6;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    left: 23%;
    position: absolute;
    top: 10%;
    z-index: 999;
}
.adapt-2.color_variation .colordiv {
    left: 16%;
}
.adapt-1 .color_variation .colordiv {
    left: 11%;
}
.color_variation .colordiv .btn_color_close {
    background: url("../images/btn_popup-close.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 38px;
    position: absolute;
    right: -18px;
    text-align: left;
    text-indent: -99999px;
    top: -20px;
    width: 38px;
}
#bg_fade_color {
    background-color: #000000;
    height: 1500px;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 998;
}