.iphone-toggle-buttons {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 4px 0;
}


    .iphone-toggle-buttons label,
    .iphone-toggle-buttons input[type="checkbox"] + span,
    .iphone-toggle-buttons input[type="checkbox"] + span::before,
    .iphone-toggle-buttons input[type="checkbox"] + span::after {
        display: inline-block;
    }

    .iphone-toggle-buttons label,
    .iphone-toggle-buttons input[type="checkbox"] + span {
        vertical-align: middle;
    }

        .iphone-toggle-buttons input[type="checkbox"] + span,
        .iphone-toggle-buttons input[type="checkbox"] + span::before,
        .iphone-toggle-buttons input[type="checkbox"] + span::after {
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
        }

            .iphone-toggle-buttons input[type="checkbox"] + span::before,
            .iphone-toggle-buttons input[type="checkbox"] + span::after,
            .iphone-toggle-buttons input[type="checkbox"]:checked + span::before,
            .iphone-toggle-buttons input[type="checkbox"]:checked + span::after {
                top: 0;
            }

            .iphone-toggle-buttons input[type="checkbox"] + span::after,
            .iphone-toggle-buttons input[type="checkbox"]:checked + span::before {
                right: 0;
            }

            .iphone-toggle-buttons input[type="checkbox"] + span::before,
            .iphone-toggle-buttons input[type="checkbox"]:checked + span::after {
                left: 0;
            }

            .iphone-toggle-buttons input[type="checkbox"],
            .iphone-toggle-buttons input[type="checkbox"] + span::before,
            .iphone-toggle-buttons input[type="checkbox"] + span::after {
                position: absolute;
            }

    .iphone-toggle-buttons label {
        margin: 4px;
        cursor: pointer;
    }

    .iphone-toggle-buttons input[type="checkbox"] {
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        -webkit-opacity: 0;
        opacity: 0;
    }

        .iphone-toggle-buttons input[type="checkbox"] + span {
            width: 100px;
            height: 30px;
            font: bold 14px/30px Arial, Sans-serif;
            color: #8c8c8c;
            text-transform: uppercase;
            border: solid 1px #bcbbbb;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c8c8c8", endColorstr="#f3f3f3");
            background: -moz-linear-gradient(top, #c8c8c8, #f3f3f3);
            background: -webkit-linear-gradient(top, #c8c8c8, #f3f3f3);
            background: -o-linear-gradient(top, #c8c8c8, #f3f3f3);
            background: -ms-linear-gradient(top, #c8c8c8, #f3f3f3);
            background: linear-gradient(top, #c8c8c8, #f3f3f3);
            position: relative;
            text-indent: -9999px;
        }

            .iphone-toggle-buttons input[type="checkbox"] + span::before {
                content: "";
                width: 40%;
                height: 29px;
                border-top: solid 1px #fff;
                border-right: solid 1px #bebebe;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cfcfcf", endColorstr="#f9f9f9");
                background: -moz-linear-gradient(top, #cfcfcf, #f9f9f9);
                background: -webkit-linear-gradient(top, #cfcfcf, #f9f9f9);
                background: -o-linear-gradient(top, #cfcfcf, #f9f9f9);
                background: -ms-linear-gradient(top, #cfcfcf, #f9f9f9);
                background: linear-gradient(top, #cfcfcf, #f9f9f9);
                -moz-box-shadow: 1px 0 1px #bebebe;
                -webkit-box-shadow: 1px 0 1px #bebebe;
                box-shadow: 1px 0 1px #bebebe;
            }

            .iphone-toggle-buttons input[type="checkbox"] + span::after {
                content: "off";
                text-indent: 0;
                width: 62%;
                height: 32px;
                text-align: center;
            }

        .iphone-toggle-buttons input[type="checkbox"]:checked + span {
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1b45bd", endColorstr="#5d96ea");
            background: -moz-linear-gradient(top, #1b45bd, #5d96ea);
            background: -webkit-linear-gradient(top, #1b45bd, #5d96ea);
            background: -o-linear-gradient(top, #1b45bd, #5d96ea);
            background: -ms-linear-gradient(top, #1b45bd, #5d96ea);
            background: linear-gradient(top, #1b45bd, #5d96ea);
            color: #fff;
            -webkit-text-shadow: -1px -1px #0d2046;
            text-shadow: -1px -1px #0d2046;
        }

            .iphone-toggle-buttons input[type="checkbox"]:checked + span::before {
                left: auto;
                -moz-box-shadow: -2px 0 1px #3a5e91;
                -webkit-box-shadow: -2px 0 1px #3a5e91;
                box-shadow: -2px 0 1px #3a5e91;
            }

            .iphone-toggle-buttons input[type="checkbox"]:checked + span::after {
                content: "on";
                border-top: solid 1px #0f2a4f;
                border-bottom: solid 1px #0f2a4f;
                border-left: solid 1px #2c5496;
                height: 30px;
                top: -1px;
                left: -1px;
                -moz-border-radius: 4px 0 0 4px;
                -webkit-border-radius: 4px 0 0 4px;
                border-radius: 4px 0 0 4px;
            }