.AlloyClipWapper{
    border: 1px solid rgba(177, 172, 172, 0.43);
    box-shadow: 0 0 3px 2px rgba(213, 213, 213, 0.74);
    border-radius: 4px;
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: -webkit-box;
    display: box;
}
.AlloyClipLeftWrapper{
    box-flex: 1;
    -webkit-box-flex: 3;
    min-width: 200px;
    display: -webkit-flex;
    display: flex;
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;
    flex-direction:column;
    -webkit-flex-direction:column;
    text-align:center;
    position: relative;
    border-right: 1px solid #ccc;
    overflow: hidden;
    box-shadow: 3px 0 10px -5px rgb(126, 126, 126);
}
.AlloyClipLeft{
    flex: 4;
    -webkit-flex: 4;
    min-width: 200px;
    display: -webkit-box;
    display: box;
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;
    text-align:center;
    position: relative;
    overflow: hidden;
}
.AlloyClipOptionWrapper{
    border-bottom-left-radius: 4px;
}
.AlloyClipRight{
    width: 200px;
    text-align:center;
    padding-top: 20px;
    position: relative;
    height: 100%;
}
.AlloyClipRight canvas{
    box-shadow: 0 0 3px 0 rgb(125, 125, 125);
}
.AlloyClipButton{
    border-radius: 4px;
    margin: 10px;
    text-decoration: none;
    font: bold 1.5em 'Trebuchet MS',Arial, Helvetica;
    display: inline-block;
    text-align: center;
    color: #fff;
    border: 1px solid #9c9c9c;
    border: 1px solid rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    padding: 0;
    cursor: pointer;
    background: #f09c15;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8c939), to(#f09c15) );
    background: -moz-linear-gradient(-90deg, #f8c939, #f09c15);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f8c939', EndColorStr='#f09c15');
}
.AlloyClipButton:before{
    content: "上传";
    min-width: 90px;
    border-top: 1px solid #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 10px;
    font-size: 22px;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
    -moz-background-size: 3px 3px;
    -webkit-background-size: 3px 3px;
    font-family: Microsoft Yahei;
    font-weight: 100;
}
.AlloyClipButton:hover{
    background: #D4A922;
    background: -moz-linear-gradient(40% 51% 90deg,#D4A922, #EBC41F, #EDD670 100%);
    background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#EDD670), to(#D4A922), color-stop(.2,#EBC41F));
}
.AlloyClipButtonTop{
    -webkit-box-flex: 1;
}
.AlloyCanvasWrapper{
    padding: 0;
}
.AlloyCanvasWrapper img{
    margin: 0;
}
.AlloyClipOptionWrapper{
    -webkit-flex: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 200px;
    min-height: 100px;
}
.AlloyClipRect{
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    z-index: 10;
    border:1px dashed rgb(172, 172, 73);
}
.AlloyBgImgWrapper{
    height: 100%;
    position: relative;
    overflow: hidden;
}
.AlloyBgImg{
    position: absolute;
}
.AlloyClipControl{
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgb(238, 229, 166);
    border-radius: 10px;
}
.AlloyClipMask{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: 9;
    display: none;
    border-top-left-radius: 4px;
}
.AlloyClipRightTitle{
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: rgb(92, 92, 92);
    font-family: Microsoft Yahei;
}
.AlloyClipRightInfo{
    color: rgb(92, 92, 92);
    font-family: Microsoft Yahei;
}
.AlloyClipConfim{
    position: absolute;
    bottom: 20px;
    line-height: 35px;
    left: 0;
    background: rgb(87, 189, 214);
    text-align: center;
    width: 100%;
    height: 35px;
    color: white;
    font-size: 16px;
    font-family: Microsoft Yahei;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    display: none;
}
.AlloyClipConfim:hover{
    background: rgb(85, 134, 221);
}
.AlloyClipSwitchPic{
    position: absolute;
    bottom: 70px;
    text-align:center;
    width: 100%;
    color: rgb(102, 102, 112);
    font-size: 14px;
    cursor: pointer;
    display: none;
}
.AlloyClipOptionBar{
    margin: 0;
    height: 30px;
    background: rgb(197, 197, 197);
    line-height: 30px;
    position: relative;
}
.AlloyClipOptionBar ul{
    list-style: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align:center;
}

.AlloyClipOptionBar ul li{
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 16px;
    cursor: pointer;
}
.AlloyClipOptionController{
    position: absolute;
    right: 20px;
    top: 0px;
}
.AlloyClipCItem{
    font-size: 28px;
    font-weight: bold;
    color: rgb(10, 71, 128);
    padding: 3px;
    cursor: pointer;
}
.AlloyClipOptionBar .AlloyClipSwitchPic{
    bottom: auto;
    left: 0;
    top: 0;
    text-align:left;
    padding-left: 10px;
    width: auto;
}
.AlloyClipOptionPW{
    height: 70px;
    flex: 1;
    margin: 0;
    overflow: auto;
    overflow-y: hidden;
}
.AlloyClipFilter{
    list-style: none;
    text-align: left;
    padding: 0;
    padding-left: 10px;
    padding-top: 10px;
    white-space: nowrap;
    overflow: visible;
    margin: 0;
}
.AlloyClipFilter li{
    display: inline-block;
    margin-right: 10px;
    border: 1px solid transparent;
    cursor: pointer;
}
.AlloyClipFilter li:hover{
    box-shadow: 0 0 4px 2px #ccc;
}

.AlloyClipAlter li{
    border: 0px;
    cursor: default;
}
.AlloyClipAlter li:hover{
    box-shadow: none;
}

/* apscrollBar */
.apScrollBarWrapper{
    padding-top: 10px;
    height: 40px;
    display: inline-block;
}
.apBarTitle{
    float: left;
    margin-left: 8px;
    height: 30px;
    line-height: 30px;
}
.apBarContent{
    position: relative;
    float: left;
    margin-left: 22px;
}
.apBarLineLeft, .apBarLineRight{
    display: inline-block;
    height: 4px;
}
.apBarLineLeft{
    width: 100px;
    background: #167efc;
}
.apBarScrollEl{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: #fff;
    display: inline-block;
    position: absolute;
    cursor: default;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.apBarLineRight{
    width: 100px;
    background: #b5b5b6;
}

/* 以下为scroll样式 */
/*
::-webkit-scrollbar{
    width: 9px;
    height: 9px;
    box-sizing: border-box;
}
::-webkit-scrollbar-button{
	width:9px;
	height:12px;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAADr0lEQVRYR71Yy04iQRQtE10IRiSBOLbOUvZmfkIlLHXjI+jCDzAm8w8TJKxZyENdqEui8BPuDVtsHCNGQcFEWUzdSt/KtbqqqZ44U0kn1V2n69xz63W6x5h9iXFoNADe521dftnibJlt+7PCjdmycpzz9vbmmvCTk5PzvK0NuNvbWyNuYWEBcbbUX8obSvBgMDAKiUQiUrDLi0nNPC9eYqwFfyWvTvAPHsm1JhqHEl9dXbHV1VUJo4Lv7u6k4JOTE7a5uSlxc3Nz/0ww5VXjR15VMIjFoop2+v2+EAJisaDoaDQqR/j+/l7gjo+PJW5ra0vUZ2dnqWDko1zqM+fi4kL0RxOMMaytrUneXC4ncMhFYzg4OBA4KpiK1Yl2Xl9fXSqWip6ampLEDw8PbrVa9U2S7e1tlkwmdYIBC6J1CXfOz8/ljAHRNIbFxcXs0tJShb/rHB4eShxw0RgymczPVCr1CwWrRCOJeQesVqtJUevr61JwPp+XxHt7e6xYLErc/v6+OqVHJvrl5cWt1+u+BEIMNzc3UvDj46NbqYD2zwViaLfbWsGBU+vs7EwIASIow+GQYSA8e5K4UCgIHBBBeX9/Z+VyWdT5CAliJabApdTr9UR/VDTGQPeO5+dngUMuGgPiQu3S3W7XHR8fl2IxaHjWbDalYAhwYmJCNH98fEht8KzVaukEA8a4WQIvdgKiacJjsZicWZgYwJZKJZlwiGF6etq3hpWk+24dzKAOODMzI4lhrZs6I2t9FB+2+3ghcZjIIF4YCJiFUJA31AjbCrY8N/9aMH2RCrbhDSP4OydKBETZ4W09fn3jV8SAG/Dnv/kFFtS22PC2eGdWOJNg3fnos3iXl5ci6HQ6zTxryVRbeXp6KjAbGxvMYCt1XDQZgpdy0UbV0lI+ikNuk9NCLN21fU4LQXA2ersgbP+fXBZiwG05jqNzWUE7NLwueHVmBxrpLg3c4OwoJ9aR+6udFgvhsugA/DeHZ3JaWi+tOi1q9bxdkHU6nU8uCxwPlkQiEeSjTaKFw8M+1JGmDg+4EUddFsSA3KFGWGcAVlZWBId3zrGnpyff4Z/NZgUmHo+bBIc2Hgqv+Cy14Q61hlUDgNkEcs8AMPXwR8zOzo48/Olc5vWRaxh4qctCsdCPajzAcFBOrI8yHtpdWj2HG42G6G95eZl55yHDLyokOjo6EtXd3V1Gvqh061e3jAAnjAfloi/Tcxi4KR/FIXeYc9jmFwpw2PwGUgY58NaG1/rX0h9d1DUzJEP0JgAAAABJRU5ErkJggg==);
	background-color:transparent;
	background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:start{
	background-position:0px 0px;
}
::-webkit-scrollbar-button:vertical:start:hover{
	background-position:-10px 0px;
}
::-webkit-scrollbar-button:vertical:start:active{
	background-position:-20px 0px;
}
::-webkit-scrollbar-button:vertical:end{
	background-position:-30px 0px;
}
::-webkit-scrollbar-button:vertical:end:hover{
	background-position:-40px 0px;
}
::-webkit-scrollbar-button:vertical:end:active{
	background-position:-50px 0px;
}


::-webkit-scrollbar-button:horizontal:start{
	background-position:0px -11px;
}
::-webkit-scrollbar-button:horizontal:start:hover{
	background-position:-10px -11px;
}
::-webkit-scrollbar-button:horizontal:start:active{
	background-position:-19px -11px;
}
::-webkit-scrollbar-button:horizontal:end{
	background-position:-30px -11px;
}
::-webkit-scrollbar-button:horizontal:end:hover{
	background-position:-40px -11px;
}
::-webkit-scrollbar-button:horizontal:end:active{
	background-position:-50px -11px;
}
::-webkit-scrollbar-track-piece {
    background-color: rgba(0,0,0,0.15);
	-webkit-border-radius:5px;
}
::-webkit-scrollbar-thumb{
    background-color: #E7E7E7;
	border: 1px solid rgba(0,0,0,0.21);
    -webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover{
    background-color: #F6F6F6;
	border: 1px solid rgba(0,0,0,0.21);
}
::-webkit-scrollbar-thumb:active{
    background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#E4E4E4),
		to(#F4F4F4)
	);
}
 ::-webkit-scrollbar-corner{  
	background-color:#f1f1f1;
	-webkit-border-radius: 1px;
} 
*/
