/* CSS Document */ /* 1 */ .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox1 { display: none; } .onoffswitch-label1 { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .onoffswitch-inner1 { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner1:before, .onoffswitch-inner1:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner1:before { content: "ON"; padding-left: 10px; background-color: #0088C2; color: #F9DD33; } .onoffswitch-inner1:after { content: "OFF"; padding-right: 10px; background-color: #fff; color: #666666; text-align: right; } .onoffswitch-switch1 { width: 30px; margin: 0px; background: #F9DD33; border: 2px solid #999999; border-radius: 0px; position: absolute; top: 0; bottom: 0; right: 56px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox1:checked + .onoffswitch-label1 .onoffswitch-inner1 { margin-left: 0; } .onoffswitch-checkbox1:checked + .onoffswitch-label1 .onoffswitch-switch1 { right: 0px; background-color: #F9DD33; } /* 2 */ .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox2 { display: none; } .onoffswitch-label2 { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .onoffswitch-inner2 { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner2:before, .onoffswitch-inner2:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner2:before { content: "ON"; padding-left: 10px; background-color: #0088C2; color: #F9DD33; } .onoffswitch-inner2:after { content: "OFF"; padding-right: 10px; background-color: #fff; color: #666666; text-align: right; } .onoffswitch-switch2 { width: 30px; margin: 0px; background: #F9DD33; border: 2px solid #999999; border-radius: 0px; position: absolute; top: 0; bottom: 0; right: 56px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox2:checked + .onoffswitch-label2 .onoffswitch-inner2 { margin-left: 0; } .onoffswitch-checkbox2:checked + .onoffswitch-label2 .onoffswitch-switch2 { right: 0px; background-color: #F9DD33; } /* 3 */ .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox3 { display: none; } .onoffswitch-label3 { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .onoffswitch-inner3 { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner3:before, .onoffswitch-inner3:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner3:before { content: "ON"; padding-left: 10px; background-color: #0088C2; color: #F9DD33; } .onoffswitch-inner3:after { content: "OFF"; padding-right: 10px; background-color: #fff; color: #666666; text-align: right; } .onoffswitch-switch3 { width: 30px; margin: 0px; background: #F9DD33; border: 2px solid #999999; border-radius: 0px; position: absolute; top: 0; bottom: 0; right: 56px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox3:checked + .onoffswitch-label3 .onoffswitch-inner3 { margin-left: 0; } .onoffswitch-checkbox3:checked + .onoffswitch-label3 .onoffswitch-switch3 { right: 0px; background-color: #F9DD33; } /* 4 */ .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox4 { display: none; } .onoffswitch-label4 { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .onoffswitch-inner4 { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner4:before, .onoffswitch-inner4:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner4:before { content: "ON"; padding-left: 10px; background-color: #0088C2; color: #F9DD33; } .onoffswitch-inner4:after { content: "OFF"; padding-right: 10px; background-color: #fff; color: #666666; text-align: right; } .onoffswitch-switch4 { width: 30px; margin: 0px; background: #F9DD33; border: 2px solid #999999; border-radius: 0px; position: absolute; top: 0; bottom: 0; right: 56px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox4:checked + .onoffswitch-label4 .onoffswitch-inner4 { margin-left: 0; } .onoffswitch-checkbox4:checked + .onoffswitch-label4 .onoffswitch-switch4 { right: 0px; background-color: #F9DD33; } /* 5 */ .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox5 { display: none; } .onoffswitch-label5 { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .onoffswitch-inner5 { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner5:before, .onoffswitch-inner5:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner5:before { content: "ON"; padding-left: 10px; background-color: #0088C2; color: #F9DD33; } .onoffswitch-inner5:after { content: "OFF"; padding-right: 10px; background-color: #fff; color: #666666; text-align: right; } .onoffswitch-switch5 { width: 30px; margin: 0px; background: #F9DD33; border: 2px solid #999999; border-radius: 0px; position: absolute; top: 0; bottom: 0; right: 56px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox5:checked + .onoffswitch-label5 .onoffswitch-inner5 { margin-left: 0; } .onoffswitch-checkbox5:checked + .onoffswitch-label5 .onoffswitch-switch5 { right: 0px; background-color: #F9DD33; } /* 6 */ .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox6 { display: none; } .onoffswitch-label6 { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .onoffswitch-inner6 { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner6:before, .onoffswitch-inner6:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner6:before { content: "ON"; padding-left: 10px; background-color: #0088C2; color: #F9DD33; } .onoffswitch-inner6:after { content: "OFF"; padding-right: 10px; background-color: #fff; color: #666666; text-align: right; } .onoffswitch-switch6 { width: 30px; margin: 0px; background: #F9DD33; border: 2px solid #999999; border-radius: 0px; position: absolute; top: 0; bottom: 0; right: 56px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox6:checked + .onoffswitch-label6 .onoffswitch-inner6 { margin-left: 0; } .onoffswitch-checkbox6:checked + .onoffswitch-label6 .onoffswitch-switch6 { right: 0px; background-color: #F9DD33; } /* 7 */ .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox7 { display: none; } .onoffswitch-label7 { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .onoffswitch-inner7 { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner7:before, .onoffswitch-inner7:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner7:before { content: "ON"; padding-left: 10px; background-color: #0088C2; color: #F9DD33; } .onoffswitch-inner7:after { content: "OFF"; padding-right: 10px; background-color: #fff; color: #666666; text-align: right; } .onoffswitch-switch7 { width: 30px; margin: 0px; background: #F9DD33; border: 2px solid #999999; border-radius: 0px; position: absolute; top: 0; bottom: 0; right: 56px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox7:checked + .onoffswitch-label7 .onoffswitch-inner7 { margin-left: 0; } .onoffswitch-checkbox7:checked + .onoffswitch-label7 .onoffswitch-switch7 { right: 0px; background-color: #F9DD33; } /* 8 */ .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox8 { display: none; } .onoffswitch-label8 { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .onoffswitch-inner8 { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner8:before, .onoffswitch-inner8:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner8:before { content: "ON"; padding-left: 10px; background-color: #0088C2; color: #F9DD33; } .onoffswitch-inner8:after { content: "OFF"; padding-right: 10px; background-color: #fff; color: #666666; text-align: right; } .onoffswitch-switch8 { width: 30px; margin: 0px; background: #F9DD33; border: 2px solid #999999; border-radius: 0px; position: absolute; top: 0; bottom: 0; right: 56px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox8:checked + .onoffswitch-label8 .onoffswitch-inner8 { margin-left: 0; } .onoffswitch-checkbox8:checked + .onoffswitch-label8 .onoffswitch-switch8 { right: 0px; background-color: #F9DD33; } /* 9 */ .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox9 { display: none; } .onoffswitch-label9 { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 0px; } .onoffswitch-inner9 { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner9:before, .onoffswitch-inner9:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner9:before { content: "ON"; padding-left: 10px; background-color: #0088C2; color: #F9DD33; } .onoffswitch-inner9:after { content: "OFF"; padding-right: 10px; background-color: #fff; color: #666666; text-align: right; } .onoffswitch-switch9 { width: 30px; margin: 0px; background: #F9DD33; border: 2px solid #999999; border-radius: 0px; position: absolute; top: 0; bottom: 0; right: 56px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox9:checked + .onoffswitch-label9 .onoffswitch-inner9 { margin-left: 0; } .onoffswitch-checkbox9:checked + .onoffswitch-label9 .onoffswitch-switch9 { right: 0px; background-color: #F9DD33; }