.iOS {
    float:left;
    position:relative;
    top:20px;
    left:40px;
}
.clear {
    clear: both;
}
.iOS li {
	display: block;
	clear: both;
	margin-bottom: 10px;
}
.iOS input {
	margin-right: 4px;
}
.iOS input[type="checkbox"]:checked,
.iOS input[type="checkbox"]:not(:checked) {
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	position: absolute;
	clip: rect(0 0 0 0);
	clip: rect(0,0,0,0);
	-webkit-appearance:	none;
	-moz-appearance:	none;
	-o-appearance:		none;
	appearance:			none;
}
#foo:checked:before,
.iOS input[type="checkbox"]+label {
	display: block;
	padding-right: 0px;
	position: relative;
	cursor: pointer;
	text-align: left;
}
#foo:checked,
.iOS input[type="checkbox"]+label:before {
	content: 'Oui\0000a0\0000a0\0000a0Non';
	position: absolute;
	right: 0;
	bottom: 50%;
	margin-bottom: -10px;
	width: 70px;
	height: 20px;
	padding-left: 4px;
	line-height: 22px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0;
	color: white;
	text-shadow: none;
	background-color: green;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(rgba(255,255,255,.2)), color-stop(0.5, transparent), color-stop(0.5, rgba(255,255,255,.1))), -webkit-gradient(linear, 0% 0%, 100% 0%, from(green), to(#E40101), color-stop(0.5, green), color-stop(0.5, #E40101));
	background: -webkit-linear-gradient(top, transparent 50%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.2) 100%), -webkit-linear-gradient(left, green 50%, #E40101 50%);
	background:    -moz-linear-gradient(top, transparent 50%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.2) 100%),    -moz-linear-gradient(left, green 50%, #E40101 50%);
	background:      -o-linear-gradient(top, transparent 50%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.2) 100%),      -o-linear-gradient(left, green 50%, #E40101 50%);
	background:         linear-gradient(top, transparent 50%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.2) 100%),         linear-gradient(left, green 50%, #E40101 50%);
	-webkit-background-size:120% 100%;
	-moz-background-size:	120% 100%;
	-o-background-size:		120% 100%;
	background-size:		120% 100%;
	background-position: 0 0, -13px 0;
	background-repeat: no-repeat;
	-webkit-box-shadow:	inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3);
	-moz-box-shadow:	inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3);
	-o-box-shadow:		inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3);
	box-shadow:			inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3);
	-webkit-border-radius:	3px;
	-moz-border-radius:		3px;
	-o-border-radius:		3px;
	border-radius:			3px;
	-webkit-transition:	color 0.2s ease-in-out, background-position 0.2s ease-in-out;
	-moz-transition:	color 0.2s ease-in-out, background-position 0.2s ease-in-out;
	-o-transition:		color 0.2s ease-in-out, background-position 0.2s ease-in-out;
	transition:			color 0.2s ease-in-out, background-position 0.2s ease-in-out;
}
.iOS input[type="checkbox"]:checked+label:before {
	color: #fff;
	background-position: 0 0, 0 0;
}
.iOS input[type="checkbox"]:focus+label:before {
	-webkit-box-shadow:	inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 4px rgba(0,0,0,.6);
	-moz-box-shadow:	inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 4px rgba(0,0,0,.6);
	-o-box-shadow:		inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 4px rgba(0,0,0,.6);
	box-shadow:			inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 4px rgba(0,0,0,.6);
}
#foo:checked,
.iOS input[type="checkbox"]+label:after {
	content: '';
	position: absolute;
	right: 40px;
	bottom: 50%;
	margin-bottom: -10px;
	width: 30px;
	height: 20px;
	background-color: rgb(205,205,205);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(205,205,205)), to(rgb(254,254,254)));
	background: -webkit-linear-gradient(top, rgb(205,205,205), rgb(254,254,254));
	background:    -moz-linear-gradient(top, rgb(205,205,205), rgb(254,254,254));
	background:      -o-linear-gradient(top, rgb(205,205,205), rgb(254,254,254));
	background:         linear-gradient(top, rgb(205,205,205), rgb(254,254,254));
	-webkit-box-shadow:	inset 0 1px 1px rgba(255,255,255,.7), 1px 0 2px rgba(0,0,0,.6), -1px 0 1px rgba(0,0,0,.6);
	-moz-box-shadow:	inset 0 1px 1px rgba(255,255,255,.7), 1px 0 2px rgba(0,0,0,.6), -1px 0 1px rgba(0,0,0,.6);
	-o-box-shadow:		inset 0 1px 1px rgba(255,255,255,.7), 1px 0 2px rgba(0,0,0,.6), -1px 0 1px rgba(0,0,0,.6);
	box-shadow:			inset 0 1px 1px rgba(255,255,255,.7), 1px 0 2px rgba(0,0,0,.6), -1px 0 1px rgba(0,0,0,.6);
	-webkit-border-radius:	3px;
	-moz-border-radius:		3px;
	-o-border-radius:		3px;
	border-radius:			3px;
	-webkit-transition:	right 0.2s ease-in-out;
	-moz-transition:	right 0.2s ease-in-out;
	-o-transition:		right 0.2s ease-in-out;
	transition:			right 0.2s ease-in-out;
}
.iOS input[type="checkbox"]:checked+label:after {
	right: 0;
	-webkit-box-shadow:	inset 0 1px 1px rgba(255,255,255,.7), 1px 0 1px rgba(0,0,0,.6), -1px 0 2px rgba(0,0,0,.6);
	-moz-box-shadow:	inset 0 1px 1px rgba(255,255,255,.7), 1px 0 1px rgba(0,0,0,.6), -1px 0 2px rgba(0,0,0,.6);
	-o-box-shadow:		inset 0 1px 1px rgba(255,255,255,.7), 1px 0 1px rgba(0,0,0,.6), -1px 0 2px rgba(0,0,0,.6);
	box-shadow:			inset 0 1px 1px rgba(255,255,255,.7), 1px 0 1px rgba(0,0,0,.6), -1px 0 2px rgba(0,0,0,.6);
}