/**
 * 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;}

.btn-toggle {
  background: url("../images/variation/close-open.png") no-repeat scroll 0 0 transparent!important;
  display: block;
  position: fixed;
  left: 0;
  z-index:22;
  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:22; 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{font:12px/1.35 Roboto,Arial,Helvetica,sans-serif;}
.demotool-content .desc{ padding:5px 0 5px 9px; background:url(../images/i_desc_arrow1.gif) no-repeat 0 7px; color:#878686; font:italic 10px/1.35 Arial, Helvetica, sans-serif;}
.demotool-content .desc em{font:italic 10px/1.35 Arial, Helvetica, sans-serif;}
.demotool-content #em_variation_google_font_preview{  margin-bottom:0; }
.demotool-content .col-1 .desc{ padding-bottom:0; color:#878686; }
.demotool-content .box{border:#e0e0e0 1px solid; border-width:0 0 1px 0; margin:0 15px;float:left;clear:both;width:360px;padding:0 0 20px;}
.demotool-content .box.last{border-bottom:none;}
.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 .box .content .row{margin-left:0}
.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;}
.demotool-content .box .content .col-1{width:112px;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:362px; border:1px solid #DDDDDD;height:auto; }
.demotool-content .box .content .col .input select#em_box_wide{-webkit-appearance:menulist}
.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; 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!important;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:307px;left:0;z-index:21}
.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;border-left:none; border-top:none;}
.qrcode li a img{max-width:none!important;border:1px solid #CECECE;padding:10px;background:#fff; z-index:99;}

/*Color*/
.color_variation .btn_color_variation{
background: url("../images/colorvariation/skin-picker.png") no-repeat scroll 0 0 transparent;
position: fixed;
left: 0;
text-indent: -999px;
top: 212px;
z-index:23;
width: 47px;
height: 47px;
display: block;
border: 1px solid #CECECE;box-shadow:0 0 10px #999999;
border-left: none;}

.color_variation .colordiv {position:absolute; left:23%; top:10%;z-index:999;background:#F6F6F6;
				  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* border radius */
				  -webkit-box-shadow: 0 0 15px rgba(0,0,0,.3); 
				  -moz-box-shadow: 0 0 15px rgba(0,0,0,.3); 
				  box-shadow: 0 0 15px rgba(0,0,0,.3); /* box shadow */
				  -webkit-background-clip: padding-box; 	/* smoother borders with webkit */
				  }
.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;
height: 38px;
width: 38px;
text-indent: -99999px;
display: block;
text-align: left;
position: absolute;
top: -20px;
right: -18px;}
.color_variation .slider_container { background-color:transparent; border:none; margin:0;}
.adapt-0 .color_variation{ display:none;}
.demotool-content .box .content .col .input input#wide_full{border:0;float:left;width:auto;height:auto;margin:2px 5px 0 0;}

/*fix*/
.demotool-content input.input-text, .demotool-content select, .demotool-content textarea{font:12px/1.35 Arial,Helvetica,sans-serif;}