body {
  background-color: #fff;
}
div.wrapper {
	width:800px;
	margin:20px auto;
	font-size:14px;
	padding:15px;
	}
div.text {
	width:100%;
	margin:25px auto;
  font-family: serif;
  background-color: #e7e7e7;
	font-size:12px;
	line-height:1.2;
  color: #666;
  padding: 5px;
	border:1px solid #aaa;
}
input[type=checkbox] {
  margin-left: 2em;
  display: block;
	font-size:16px;
	line-height:16px;
	margin-bottom:8px;
}
input[type=checkbox]:after {
  content: attr(id) ": " attr(data-value) ";";
  font-family: monospace;
  color: #333;
  display: block;
  position: relative;
  width: 25em;
  left: 1.5em;
	top:-2px;
}
input[type=checkbox]#background:checked ~ div.text {background:#dfd;}
input[type=checkbox]#color:checked ~ div.text {color:#222;}
input[type=checkbox]#font-family:checked ~ div.text {font-family:sans-serif;}
input[type=checkbox]#font-size:checked ~ div.text {font-size:15px;}
input[type=checkbox]#font-size2:checked ~ div.text {font-size:18px;}
input[type=checkbox]#line-height:checked ~ div.text {line-height:1.6;}
input[type=checkbox]#letter-spacing:checked ~ div.text {letter-spacing:0.1em;}
input[type=checkbox]#padding:checked ~ div.text {padding:10px;}