/**
 * 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: 293px;
	top: 143px;
	/*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/icons.png) -2px -582px no-repeat;
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;
margin-right: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;
white-space: normal;
text-align: left;
}

.demotool-content .box .content .row .label {
padding:14px 0 8px;
display:inline-block
}

.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;
font: 12px Tahoma,Arial,Helvetica,sans-serif;
}

.demotool-content .box .content .col-1 .input input {
width:100px;
}

@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:304px;
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:20px;
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;
}

.demotool-content .box .content .col .input input#wide_full {
border:0;
float:left;
width:auto;
height:auto;
margin:2px 5px 0 0;
}

#bg_fade_color {
background-color:#000;
left:0px;
margin:0px;
padding:0px;
position:fixed;
top:0px;
width:100%;
z-index:998;
height:1000px;
}

.demotool-content .btn-primary{ margin-left:15px; margin-top:10px}