.rotaryswitchPlugin { position: relative; width: 51px; height: 51px; cursor: pointer; background: url(../images/darkSmallBackground.png) no-repeat; background-size: 100%; background-position: center; } @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .rotaryswitchPlugin { background-image: url(../images/darkSmallBackground@2x.png); background-size: 100% 100%; background-position: center; } } .rotaryswitchPlugin .switch { width: 100%; height: 100%; background: url(../images/darkSmallFront.png) no-repeat; background-size: 93%; background-position: center; } @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .rotaryswitchPlugin .switch { background-image: url(../images/darkSmallFront@2x.png); background-size: 100% 100%; background-position: center; } } .rotaryswitchPlugin .mark { position: absolute; left: 50%; top: 50%; margin: -1px 0 0 0; width: 1px; height: 3px; background-color: #0e0e0e; } .rotaryswitchPlugin input { position: absolute; top: 0; bottom: 0; right: -60px; width: 100%; border: none; z-index: 100; text-align: left; background: none; font: normal 18px/18px verdana; color: #0e0e0e; } .rotaryswitchPlugin.big { width: 200px; height: 200px; background: url(../images/darkBigBackground.png) no-repeat; background-size: 100%; background-position: center; } @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .rotaryswitchPlugin.big { background-image: url(../images/darkBigBackground@2x.png); background-size: 100% 100%; background-position: center; } } .rotaryswitchPlugin.big .switch { background: url(../images/darkBigFront.png) no-repeat; } @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .rotaryswitchPlugin.big .switch { background-image: url(../images/darkBigFront@2x.png); background-size: 100% 100%; background-position: center; } } .rotaryswitchPlugin.big .mark { position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -2px; width: 4px; height: 10px; background-color: #c3c3c2; } .rotaryswitchPlugin input { position: absolute; top: 0; bottom: 0; right: -60px; width: 100%; border: none; z-index: 100; text-align: left; background: none; font: normal 18px/18px verdana; color: #0e0e0e; } .rotaryswitchPlugin.big.light { margin: 36px; background: url(../images/lightBigBackground.png) no-repeat; background-size: 100%; background-position: center; display: inline-block; } .rotaryswitchPlugin.big.light .switch { background: url(../images/lightBigFront.png) no-repeat; background-size: 93%; background-position: center; } .knob-value{ left: 50%; font-size: 30px; position: relative; margin-left: -30px; width: 60px; text-align: center; right: auto; top: -16px; color: #00bcd6; text-shadow: 0 1px 1px #ffffff, 0px 0px 4px #78efff; } div#knobthrottle.disabled:before { content: ""; height: 200px; background: #ececec; width: 200px; display: inline-block; position: absolute; z-index: 100; opacity: 0.5; margin-left: 36px; border-radius: 100%; margin-top: 36px; } .speedController.disabled{ position: relative; }