#mainWrapper {
	min-width: 1024px;
}

#stroke {
	position: relative;
	z-index: 1;
/*	font-family: inherit;
	font-size: 15px !important;
	text-align: left;
	display: inline-block; */
}

#stroke textarea,
#stroke input[type=text],
#stroke input[type=password] {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	border: 1px solid rgba(0, 0, 0, 0.3 );
	border-radius: 0.2em;
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.36) inset;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.36) inset;
	padding: 0.2em;
	font-family: inherit;
	font-size: inherit;
	vertical-align: middle;
}

#stroke textarea {
	white-space: pre;
	resize: none;
}

#stroke input[type=text],
#stroke input[type=password] {
	height: 1.6em;
	padding: 0 0.2em;
}

#stroke .block {
	position: relative;
	padding: 1em;
	-webkit-box-shadow: 0 0 3px rgba( 0, 0, 0, 0.5 );
	box-shadow: 0 0 3px rgba( 0, 0, 0, 0.5 );

	background: #FFFFFF;
	background: -moz-linear-gradient(top,  #F2F2F2 0%, #FFFFFF 20%, #FFFFFF 80%, #F2F2F2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2F2F2), color-stop(20%,#FFFFFF), color-stop(80%,#FFFFFF), color-stop(100%,#F2F2F2));
	background: -webkit-linear-gradient(top,  #F2F2F2 0%,#FFFFFF 20%,#FFFFFF 80%,#F2F2F2 100%);
	background: -ms-linear-gradient(top,  #F2F2F2 0%,#FFFFFF 20%,#FFFFFF 80%,#F2F2F2 100%);
	background: linear-gradient(to bottom,  #F2F2F2 0%,#FFFFFF 20%,#FFFFFF 80%,#F2F2F2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F2F2F2', endColorstr='#F2F2F2',GradientType=0 );
}

#stroke .block .ct,
#stroke .block .cb {
	position: absolute;
	z-index: -1;
	height: 100%;
	left: -16px;
	right: -16px;
	overflow: hidden;
}

#stroke .block .ct {
	top: -5px;
}

#stroke .block .cb {
	bottom: -5px;
}

#stroke .block .ct:before,
#stroke .block .ct:after,
#stroke .block .cb:before,
#stroke .block .cb:after {
	content: "";
	position: absolute;
	display: inline-block;
	height: 100px;
	width: 100px;
}

#stroke .block .ct:before {
	top: 5px;
	left: 3px;

	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);

	-webkit-transform: rotate(0deg) translate(40px, 15px) skew(20deg);
	-moz-transform: rotate(0deg) translate(40px, 15px) skew(20deg);
	-ms-transform: rotate(0deg) translate(40px, 15px) skew(20deg);
	transform: rotate(0deg) translate(40px, 15px) skew(20deg);
}

#stroke .block .ct:after {
	top: 5px;
	right: 3px;

	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.4);
	box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.4);

	-webkit-transform: rotate(0deg) translate(-40px, 15px) skew(-20deg);
	-moz-transform: rotate(0deg) translate(-40px, 15px) skew(-20deg);
	-ms-transform: rotate(0deg) translate(-40px, 15px) skew(-20deg);
	transform: rotate(0deg) translate(-40px, 15px) skew(-20deg);
}

#stroke .block .cb:before {
	bottom: 5px;
	left: 3px;

	-webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.4);
	box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.4);

	-webkit-transform: rotate(0deg) translate(40px, -15px) skew(-20deg);
	-moz-transform: rotate(0deg) translate(40px, -15px) skew(-20deg);
	-ms-transform: rotate(0deg) translate(40px, -15px) skew(-20deg);
	transform: rotate(0deg) translate(40px, -15px) skew(-20deg);
}

#stroke .block .cb:after {
	bottom: 5px;
	right: 3px;

	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);

	-webkit-transform: rotate(0deg) translate(-40px, -15px) skew(20deg);
	-moz-transform: rotate(0deg) translate(-40px, -15px) skew(20deg);
	-ms-transform: rotate(0deg) translate(-40px, -15px) skew(20deg);
	transform: rotate(0deg) translate(-40px, -15px) skew(20deg);
}

#stroke .block2 {
	padding: 1em;
	position: relative;
	display: block;
/*
	background: -webkit-gradient(linear,left top,left bottom,from(rgb(255, 255, 255)),color-stop(rgb(243, 243, 243),0.1),color-stop(rgb(255, 255, 255),0));
	background: -webkit-linear-gradient(0% 0% , rgb(255, 255, 255), rgb(243, 243, 243) 10%, rgb(255, 255, 255)) repeat scroll 0% 0% transparent;
	background:   -moz-linear-gradient(0% 0% , rgb(255, 255, 255), rgb(243, 243, 243) 10%, rgb(255, 255, 255)) repeat scroll 0% 0% transparent;
	background:        linear-gradient(0% 0% , rgb(255, 255, 255), rgb(243, 243, 243) 10%, rgb(255, 255, 255)) repeat scroll 0% 0% transparent;
*/

	background: -moz-linear-gradient(top,  #F2F2F2 0%, #FFFFFF 20%, #FFFFFF 80%, #F2F2F2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2F2F2), color-stop(20%,#FFFFFF), color-stop(80%,#FFFFFF), color-stop(100%,#F2F2F2));
	background: -webkit-linear-gradient(top,  #F2F2F2 0%,#FFFFFF 20%,#FFFFFF 80%,#F2F2F2 100%);
	background: -ms-linear-gradient(top,  #F2F2F2 0%,#FFFFFF 20%,#FFFFFF 80%,#F2F2F2 100%);
	background: linear-gradient(to bottom,  #F2F2F2 0%,#FFFFFF 20%,#FFFFFF 80%,#F2F2F2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F2F2F2', endColorstr='#F2F2F2',GradientType=0 );

	border: 1px solid rgb(204, 204, 204);

	-webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1) inset;
	border-radius: 6px 6px 6px 6px / 60px 60px 60px 60px;
}

#stroke .block2 .ad {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -1;
}

#stroke .block2:before,
#stroke .block2:after,
#stroke .block2 .ad:before,
#stroke .block2 .ad:after {
	content: "";
	width: 50px;
	height: 50px;
	position: absolute;
	-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
	z-index: -1;
}

#stroke .block2:after {
	top: 23px;
	left: 20px;
	-webkit-transform:skew(0deg, 32deg) rotate(-205deg);
	-moz-transform:skew(0deg, 32deg) rotate(-205deg);
	-ms-transform:skew(0deg, 32deg) rotate(-205deg);
	transform:skew(0deg, 32deg) rotate(-205deg);
}

#stroke .block2 .ad:after {
	top: 23px;
	right: 20px;
	-webkit-transform:skew(0deg, -32deg) rotate(-60deg);
	-moz-transform:skew(0deg, -32deg) rotate(-60deg);
	-ms-transform:skew(0deg, -32deg) rotate(-60deg);
	transform:skew(0deg, -32deg) rotate(-60deg);
}

#stroke .block2 .ad:before {
	bottom: 23px;
	left: 20px;
	-webkit-transform:skew(0deg, -32deg) rotate(115deg);
	-moz-transform:skew(0deg, -32deg) rotate(115deg);
	-ms-transform:skew(0deg, -32deg) rotate(115deg);
	transform:skew(0deg, -32deg) rotate(115deg);
}

#stroke .block2:before {
	bottom: 23px;
	right: 20px;
	-webkit-transform:skew(0deg, 32deg) rotate(-25deg);
	-moz-transform:skew(0deg, 32deg) rotate(-25deg);
	-ms-transform:skew(0deg, 32deg) rotate(-25deg);
	transform:skew(0deg, 32deg) rotate(-25deg);
}

#stroke .button {
	display: inline-block;
	position: relative;

	padding: 0.2em 0.4em;
	vertical-align: top;

	cursor: pointer;
	text-decoration: none;

	font-family: Verdana;
	font-weight: bold;
	color: #555555;

	border-radius: 0.18em;

	border: 1px solid #C2C2C2;

	border-radius: 0.18em;

	-webkit-box-shadow: inset 0 0 1px #FFFFFF;
	box-shadow: inset 0 0 1px #FFFFFF;

	background: #E5E5E5 -webkit-linear-gradient( 180deg, #FFFFFF, #DFDFDF );
	background: #E5E5E5 -moz-linear-gradient( 180deg, #FFFFFF, #DFDFDF );
	background: #E5E5E5 -ms-linear-gradient( 180deg, #FFFFFF, #DFDFDF );
	background: #E5E5E5 linear-gradient( 180deg, #FFFFFF, #DFDFDF );

	text-shadow: #FFFFFF 0px 1px 0;

	text-align: center;

	outline: none;

	z-index: 1;
}

#stroke .button:hover {
	border-color: #9A9A9A;

	-webkit-box-shadow: 0px 0px 2px #A0A0A0;
	box-shadow: 0px 0px 2px #A0A0A0;
}

#stroke .button:active,
#stroke .buttonPressed {
	color: #555555;

	text-shadow: #FFFFFF 0px 1px 0;


	border-color: #9A9A9A;

	background: #E6E6E6 none;

	-webkit-box-shadow: inset 0 0 2px #D0D0D0;
	box-shadow: inset 0 0 2px #D0D0D0;
}

#stroke label {
	width: 11em;
	display: inline-block;
	text-align: left;
	overflow: hidden;
	position: relative;
	padding-right: 0.5em;
	text-shadow: 1px 1px rgba( 0, 0, 0, 0.3 );
	vertical-align: middle;
	cursor: pointer;
	color: #000000;
	font-weight: normal;
}

#stroke label * {
	vertical-align: middle;
}

#stroke .slider {
	margin-left: 0;
	margin-right: 0;
}

#stroke .minicolors-swatch {
	margin-top: -1px;
	margin-left: -1px;
	height: 15px !important;
	cursor: pointer;
}

#stroke .controls {
	margin-bottom: 2em;
	min-width: 405px;
}

#stroke .controls,
#stroke .view {
	position: relative;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
}

#stroke .controls .files label {
	cursor: default;
}

#stroke .controls .bgColor {
	margin-top: 1em;
}

#stroke .controls .files .remBg {
	margin-left: 3em;
	color: #A00000;
}

#stroke .controls .bgColor input,
#stroke .controls .textColor input,
#stroke .controls .strokeColor input {
	width: 100%;
	padding-right: 27px;
}

#stroke .controls .colorPickerField > .bt {
		width: 19px
}

#stroke .controls .css {
	width: 100%;
	height: 10em;
}

#stroke .controls .slider .title,
#stroke .controls label {
	display: inline-block;
	width: 11em;
	overflow: hidden;
	text-align: left;
}

#stroke .view {
	display: inline-block;
	margin-left: 2em;
}

#stroke .view .wrapper {
	display: inline-block;
	width: 300px;
	height: 300px;
	overflow: auto;
}

#stroke .view .wrapper .centrer {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
	background: none no-repeat scroll center center / contain;
}

#stroke .view .wrapper .centrer .text {
	display: table-cell;
	font-size: 20px;
	font-family: Arial;
	vertical-align: middle;
	white-space: pre;
}

#stroke .controls .textSample input {
	width: 12em;
}

#stroke .controls .textFont input {
	width: 7em;
}



#stroke .controls .textFontWeight {
	display: inline-block;
	vertical-align: middle;
	margin-left: 1em;
}

#stroke .controls .textFontWeight label {
	width: auto;
	vertical-align: middle;
}

#stroke .controls .textFontWeight input {
	width: auto;
	cursor: pointer;
	vertical-align: middle;
}