settings.css

html { height:100%; width:100%; }
body{ width:225px; height:400px; padding:10px 5px; }
body h1 { text-align: center; margin:0 auto; border-bottom:1px solid #eee; padding-bottom:0; }
body h3 { border-bottom:1px solid #eee; padding-bottom:15px; }
button { border:0px ; width:100%; padding:10px 15px; background: #0082D7; color: white; text-align:left; cursor:pointer; }
button[data-enabled=true] { color:white; }
button[data-enabled=false] { background: #eee; color:#0082D7; }
button[data-enabled=true] .enabled { display:none; }
button[data-enabled=true] .disabled { display:block; }
button[data-enabled=false] .enabled { display:block; }
button[data-enabled=false] .disabled { display:none; }
button[data-enabled=true] + .sub-settings { display:block; }
button[data-enabled=false] + .sub-settings { display:none; }
input, select { padding: 3px 6px; width:100%; }
input[type=checkbox] { display:inline-block; width:auto; }
small { display:block; color: #999; text-align:center; width: 100%; }
label { display:block; padding-top:3px; }
button:focus, textarea:focus, input:focus{ outline: none; }
.hide { display:none; }
.padded { padding:5px 0px; }