@charset "utf-8";
/* CSS Document */
.action-container{ float:left; width:350px; background-color:none;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;border-radius:0.5em;border:solid 1px #eee;}

.action-properties{ padding:10px;}
.action-properties input[type="text"]{font-size:0.8em;margin:0;width:3em;font-size:13px;}
.action-container h3,.action-properties h3{padding: 5px 0; margin:0; font-size:14px;}

.property-container{ text-align:right; padding:10px}
.action-container .theSlider {float:right;margin:0 0.5em;width:100px;}
.property-container .color{width:50px; margin-right:7px; border:1px solid #ABADB3}
label.label{ display:block; clear:both;}

#shadow-buttons{ padding:10px 27px 20px 20px; text-align:right;}
.ourButton {-moz-border-radius:0.5em 0.5em 0.5em 0.5em;-moz-box-shadow:2px 2px 2px #BBBBBB;-webkit-border-radius:0.5em 0.5em 0.5em 0.5em;-webkit-box-shadow:2px 2px 2px #BBBBBB;border-radius:0.5em 0.5em 0.5em 0.5em;box-shadow:2px 2px 2px #BBBBBB;background-color:#959595;border:1px solid #777777;color:#EFEFEF;cursor:pointer;font-size:14px;margin-left:5%;padding:0.4em 0.5em;text-align:center;text-shadow:1px 1px 1px #000000;display:inline-block;}
.Preview-container{ margin-left:360px; }
.action-container h2,.Preview-container h2{padding: 5px 10px; margin:0; font-size:16px;}



#demo {background-color:#FFFFFF;border:0 none;height:120px;margin:40px auto;padding:0.5em;width:80%;-moz-border-radius:1em;-webkit-border-radius:1em;border-radius:1em; line-height:2; font-size:18px}
#demo-stroke{background-color:#BBBF36;border:0 none;height:120px;margin:40px auto;padding:0.5em;width:80%;-moz-border-radius:1em;-webkit-border-radius:1em;border-radius:1em; line-height:2; font-size:38px; font-weight:700; text-shadow:none}
#demo-radius {background-color:#FFFFFF;height:220px;margin:40px auto;padding:0.5em;width:80%; line-height:2; font-size:18px}
#code{ padding:20px; cursor:default;height: 300px;background: none;}
#info-txt{padding:20px;}
img {width: 48px}

.support{ overflow:hidden}
.not-supported {opacity: .3}
.support span {display:block; width:8em;float:left;font-size: .9em;text-align: center; }
.support span span {margin:0 auto; display:block; width: 100%}
.info-txt{padding-top:20px}
.info-txt li{ line-height:1.5}
.has-shadow{-moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px 5px #333333;}
.has-border{ border:1px solid #F00;}

/* Unified qtool-page layout overrides */
.qtool-page--css .action-container{float:none;width:100%;margin:0;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;overflow:hidden}
.qtool-page--css .Preview-container{margin-left:0;width:100%;border:1px solid #e5e7eb;border-radius:12px;background:#fff;overflow:hidden}
.qtool-page--css .action-container h2,.qtool-page--css .Preview-container h2,.qtool-page--css .toptit{display:block;width:100%;float:none;padding:14px 18px;margin:0;font-size:15px;font-weight:700;background:#f3f4f6;border-bottom:1px solid #e5e7eb;box-sizing:border-box}
.qtool-page--css .property-container{display:block;text-align:left;padding:12px 0}
.qtool-page--css .property-container label{display:block;margin-bottom:8px;font-weight:600}
.qtool-page--css .property-container .fd-slider{display:block;width:100%;margin-top:10px;clear:both}
.qtool-page--css .action-container .theSlider{float:none;margin:0;width:100%;max-width:100%}
.qtool-page--css #code{height:auto;min-height:160px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px}
@media screen and (max-width:768px){
.qtool-page--css .action-container .theSlider{width:100%;margin-top:8px}
.qtool-page--css #demo,#demo-radius,#demo-stroke{width:100%;margin:16px auto}
}