/* ftoolsCheckRadioSkin - CSS by Péter Polgár (Force) - http://www.gbart.hu/ftools/ - 2014 */

/* basics */
.ftoolsCheckboxSkin,
.ftoolsRadiobuttonSkin {
	background-color: white;
	border: 2px solid blue;
	cursor: pointer;
	display: inline-block;
	height: 18px;
	margin: 0px 10px 20px 0px;
	overflow: hidden;
	vertical-align: top;
	width: 18px;
	/* box-sizing */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/* transition */
	-moz-transition: ease 0.2s;
	-webkit-transition: ease 0.2s;
	-o-transition: ease 0.2s;
	transition: ease 0.2s;
}

	/* checkbox */
	.ftoolsCheckboxSkin {
		background-position: center center;
		background-repeat: no-repeat;
	}

	/* radio button */
	.ftoolsRadiobuttonSkin {
		/* corner */
		-moz-border-radius: 100%;
		-webkit-border-radius: 100%;
		border-radius: 100%;
	}

	/* error - use "error" class in input element! */
	.ftoolsCheckboxSkin_error,
	.ftoolsRadiobuttonSkin_error {
		border-color: red;
	}

	/* focus */
	.ftoolsCheckboxSkin_focus,
	.ftoolsCheckboxSkin:hover,
	.ftoolsRadiobuttonSkin_focus,
	.ftoolsRadiobuttonSkin:hover {
		background-color: yellow;
	}

	/* active */
	.ftoolsCheckboxSkin_active {
		background-image: url('ftoolsCheckRadioSkin-pipe.png');
	}

	.ftoolsRadiobuttonSkin_active {
		background-color: orange;
	}

	/* disabled */
	.ftoolsCheckboxSkin_disabled,
	.ftoolsRadiobuttonSkin_disabled {
		border-color: gray;
		cursor: default;
		/* grayscale */
		-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
		-o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
		-webkit-filter: grayscale(100%);
		filter: gray;
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	}