@charset "utf-8";

.mainscene {
    width: 500px; height: 490px;
    top: 20px;
}

#containImages {
    position: absolute;
    left: -20px;
    top: 0px;
    width: 550px;
    height: 450px;
}

#body {
    position: absolute;
    left:145px;
    top:10px;
    width: 320px;
    height: 357px;
}

#wires {
    position: absolute;
    left:145px;
    top:10px;
    width: 320px;
    height: 357px;
}

#underCommutator {
    position: absolute;
    left:181px;
    top:192px;
    width: 97px;
    height: 55px;
    visibility: hidden;
}

#commutatorSpriteContainer {
    position: absolute;
    left: 193px; top: 188px;
    width: 101px; height: 46px;
}

#posts {
    position: absolute;
    left:181px;
    top:191px;
    width: 97px;
    height: 55px;
}

#magnetSpriteContainer {
    position: absolute;
    left:164px; top:26px;
    width: 167px; height: 213px;
}

#meterSpriteContainer {
    position: absolute;
    left: 364px; top: 260px;
    width: 65px; height: 64px;
}

#needleOverlay {
    position: absolute;
    left:391px;
    top:270px;
    width: 22px;
    height: 11px;
}

#wheelSpriteContainer {
    position: absolute;
    left:184px; top:216px;
    width: 141px; height: 110px;
}

#arrows {
    position: absolute;
    left: 52px;
    top: 16px;
    width: 237px;
    height: 162px;
}

#topLeftArrowCan {
    position: absolute;
    left: 80px;
    top: 116px;
    width: 60px;
    height: 30px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

#topRtArrowCan {
    position: absolute;
    left: 257px;
    top: 116px;
    width: 60px;
    height: 30px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

#bottomLeftArrowCan {
    position: absolute;
    left: 63px;
    top: 231px;
    width: 60px;
    height: 30px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

#bottomRtArrowCan {
    position: absolute;
    left: 264px;
    top: 243px;
    width: 60px;
    height: 30px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

#allText {
    position: absolute;
    left: 50px; top: 0px;
    width: 500px; height: 400px;
}

#softIronLbl {
    position: absolute;
    left: 5px;
    top: 37px;
}

#wireCoilLbl {
    position: absolute;
    left: 15px;
    top: 86px;
}

#permanentMagLbl {
    position: absolute;
    left: 10px;
    top: 113px;
}

#commulatorLbl {
    position: absolute;
    left: 18px;
    top: 170px;
}

#wireCoilLbl2 {
    position: absolute;
    left: 267px;
    top: 86px;
}

#connectingWireLbl {
    position: absolute;
    left: 263px;
    top: 170px;
}

#galvanometerLbl {
    position: absolute;
    left: 302px;
    top: 219px;
}

#softIronLine {
    position: absolute;
    left: 93px;
    top: 43px;
    width:74px;
    height:2px;
    background: black;
}

#softIronLine2 {
    position: absolute;
    left: 106px;
    top: 43px;
    width:17px;
    height:2px;
    background: white;
}

#wireCoilLine {
    position: absolute;
    left: 75px;
    top: 91px;
    width:83px;
    height:2px;
    background: black;
}

#wireCoilLineB {
    position: absolute;
    left: 108px;
    top: 91px;
    width:14px;
    height:2px;
    background: white;
}

#permanentMagLine {
    position: absolute;
    left: 81px;
    top: 118px;
    width:68px;
    height:2px;
    background: black;
}

#permanentMagLine2 {
    position: absolute;
    left: 109px;
    top: 118px;
    width:13px;
    height:2px;
    background: white;
}

#commulatorLine {
    position: absolute;
    left: 85px;
    top: 192px;
    width:30px;
    height:2px;
    background: black;
    -webkit-transform: rotate(42deg);
    -moz-transform: rotate(42deg);
    -ms-transform: rotate(42deg);
    -o-transform: rotate(42deg);
    transform: rotate(42deg);
}

#commulatorLine2 {
    position: absolute;
    left: 106px;
    top: 207px;
    width:21px;
    height:2px;
    background: white;
    -webkit-transform: rotate(42deg);
    -moz-transform: rotate(42deg);
    -ms-transform: rotate(42deg);
    -o-transform: rotate(42deg);
    transform: rotate(42deg);
}

#wireCoilLine2 {
    position: absolute;
    left: 202px;
    top: 91px;
    width:63px;
    height:2px;
    background: black;
}

#wireCoilLine2B {
    position: absolute;
    left: 238px;
    top: 91px;
    width:16px;
    height:2px;
    background: white;
}

#connectingWireLine {
    position: absolute;
    left: 248px;
    top: 175px;
    width:13px;
    height:2px;
    background: black;
}

#connectingWireLine2 {
    position: absolute;
    left: 247px;
    top: 175px;
    width:6px;
    height:2px;
    background: white;
}

#galvanometerLine {
    position: absolute;
    left: 342px;
    top: 231px;
    width:2px;
    height:13px;
    background: black;
}

#ctrlPanel {
    position: absolute;
    bottom: 49px;
    width: 500px; height: 70px;
}

#powerBtnPanel {
    position: relative;
    display: inline-block;
    width: 130px; height: 70px;
}

#powerBtn {
    display: inline-block;
    position: relative;
    width: 130px; height: 40px;
}

#sldrPanel {
    position: relative;
    display: inline-block;
    width: 130px; height: 70px;
    top: 5px;
    margin: 0 20px;
}

#sldr {
    display: inline-block;
    position: relative;
    width: 130px; height: 40px;
}

#toggleBtnPanel {
    position: relative;
    display: inline-block;
    width: 130px; height: 70px;
}

#toggleBtn {
    display: inline-block;
    position: relative;
    width: 130px; height: 40px;
}

.spriteImgContainer {
    display: none;
}