.toggle-control { margin-bottom: 10px; } .toggle-control:after { content: ""; clear: both; display: block; visibility: hidden; } .toggle-control .togglebox { float: left; display: inline-block; background-color: #8ac324; width: 40px; height: 18px; box-shadow: inset 0 0 3px rgba(22,22,22,.4); border-radius: 3px; overflow: hidden; position: relative; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } .toggle-control .togglebox input[type="checkbox"], .toggle-control .togglebox input[type="radio"] { position: absolute; width: 100%; height: 100%; margin: 0; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .toggle-control .togglebox label { position: absolute; z-index: 0; width: 60px; height: 18px; margin: 0; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } .toggle-control .togglebox label b { display: block; width: 19px; height: 16px; position: absolute; z-index: 1; top: 1px; left: 20px; border-radius: 2px; box-shadow: 0px 0px 2px rgba(0,0,0,.4); background-color: #fafafa; background-image: -moz-linear-gradient(top, #fafafa, #efefef); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#efefef)); background-image: -webkit-linear-gradient(top, #fafafa, #efefef); background-image: -o-linear-gradient(top, #fafafa, #efefef); background-image: linear-gradient(to bottom, #fafafa, #efefef); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef', GradientType=0); } .toggle-control .togglebox.disable { background-color: #999b93; } .toggle-control .togglebox.disable label { left: -19px; } .toggle-control .togglebox label:before, .toggle-control .togglebox label:after { font-family: FontAwesome; font-size: 12px; height: 18px; line-height: 19px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; } .toggle-control .togglebox label:before { content: "\f00c"; text-align: left; color: #dbf1d2; padding-left: 4px; text-shadow: 0px -1px 0px #5f8718; } .toggle-control .togglebox label:after { content: "\f00d"; text-align: right; color: #dadada; padding-right: 7px; text-shadow: 0px -1px 0px #4c4c48; } .toggle-control p { display: inline-block; height: 22px; line-height: 20px; font-size: 1.1em; margin: 7px 20px 0 5px; } .control-group .toggle-control .togglebox { margin-top: 5px; height: 22px; } #users .toggle-control .togglebox { margin-left: 10px; height: 22px; } #users .toggle-control .togglebox label, .control-group .toggle-control .togglebox label { height: 22px; } #users .toggle-control .togglebox label b, .control-group .toggle-control .togglebox label b { height: 20px; } #users .toggle-control .togglebox label:before, #users .toggle-control .togglebox label:after, .control-group .toggle-control .togglebox label:before, .control-group .toggle-control .togglebox label:after { line-height: 22px; height: 22px; }