@charset "utf-8";

body {
    height: 340px;
    text-align: center;
}

.controlBack{
    padding-bottom: 5px;
}

.controlBack > * {
    vertical-align: middle;
}

.samplePanelLeft {
    margin-right: 40px;
}

.controlPanelBack {
    display: inline-block;
    height: 55px;
    margin-top: 5px;
    padding: 0 10px;
}

#whiteBkgd{
    position: absolute;
    top: 50px;
    left: 20px;
    width: 384px;
    height: 195px;
}

#apertureSprite{
    position: absolute;
    top: 60px;
    left: 285px;
    width: 87px;
    height: 79px;
}

#probeTipLbl{
    position: absolute;
    top: 32px;
    left: 308px;
    width: 40px;
    height: 30px;
}

.slider {
    display: inline-block;
    position: relative;
    width: 160px;
    margin-top: 5px;
}

#chartRect{
    position: absolute;
    top: 20px;
    left: 20px;
    width:209px;
    height:139px;
    background-color:white;
}

#chartRectBorder{
    position: absolute;
    top: 20px;
    left: 20px;
    width:209px;
    height:140px;
    box-shadow: 2px 2px 5px #888888;
}

.border{
    border:2px solid #000000;
    position:relative;
}

#verticalLinesCan{
    position: absolute;
    top: 7px;
    left: 14px;
    width: 210px;
    height: 156px;
}

#horizontalLinesCan{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 228px;
    height: 143px;
}

#verticalLinesCan2{
    position: absolute;
    top: 7px;
    left: 21px;
    width: 210px;
    height: 156px;
}

#horizontalLinesCan2{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 228px;
    height: 143px;
}

#verticalTicCan{
    position: absolute;
    top: 124px;
    left: -8px;
    width: 210px;
    height: 18px;
}

#horizontalTicCan{
    position: absolute;
    top: 20px;
    left: 21px;
    width: 4px;
    height: 143px;
}

#linesCon{
    position: absolute;
    top: -5px;
    left: 30px;
    width: 245px;
    height: 170px;
}

#tenTwo{
    position: absolute;
    top: 12px;
    left: -5px;
    width: 10px;
    height: 10px;
}

#tenOne{
    position: absolute;
    top: 26px;
    left: -5px;
    width: 10px;
    height: 10px;
}

#tenZero{
    position: absolute;
    top: 40px;
    left: -5px;
    width: 10px;
    height: 10px;
}

#tenMinus1{
    position: absolute;
    top: 56px;
    left: -9px;
    width: 30px;
    height: 10px;
}

#tenMinus2{
    position: absolute;
    top: 70px;
    left: -9px;
    width: 30px;
    height: 10px;
}

#tenMinus3{
    position: absolute;
    top: 86px;
    left: -9px;
    width: 30px;
    height: 10px;
}

#tenMinus4{
    position: absolute;
    top: 101px;
    left: -9px;
    width: 30px;
    height: 10px;
}

#tenMinus5{
    position: absolute;
    top: 116px;
    left: -9px;
    width: 30px;
    height: 10px;
}

#tenMinus6{
    position: absolute;
    top: 130px;
    left: -9px;
    width: 30px;
    height: 10px;
}

#tenMinus7{
    position: absolute;
    top: 144px;
    left: -9px;
    width: 30px;
    height: 10px;
}
#tenMinus8{
    position: absolute;
    top: 157px;
    left: -9px;
    width: 30px;
    height: 10px;
}

#opticalLbl{
    position: absolute;
    top: 84px;
    left: -55px;
    width: 140px;
    height: 10px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#zeroLbl{
    position: absolute;
    top: 168px;
    left: 16px;
    width: 10px;
    height: 10px;
}

#oneHunLbl{
    position: absolute;
    top: 168px;
    left: 38px;
    width: 20px;
    height: 10px;
}

#twoHunLbl{
    position: absolute;
    top: 168px;
    left: 66px;
    width: 20px;
    height: 10px;
}

#threeHunLbl{
    position: absolute;
    top: 168px;
    left: 95px;
    width: 20px;
    height: 10px;
}

#fourHunLbl{
    position: absolute;
    top: 168px;
    left: 122px;
    width: 20px;
    height: 10px;
}

#fiveHunLbl{
    position: absolute;
    top: 168px;
    left: 149px;
    width: 20px;
    height: 10px;
}

#sixHunLbl{
    position: absolute;
    top: 168px;
    left: 179px;
    width: 20px;
    height: 10px;
}

#sevenHunLbl{
    position: absolute;
    top: 168px;
    left: 207px;
    width: 20px;
    height: 10px;
}

#apertureLbl{
    position: absolute;
    top: 177px;
    left: 67px;
    width: 180px;
    height: 10px;
}

#powersLbl{
    position: absolute;
    top: 0px;
    left: 0px;
    white-space: nowrap;
}

#ballAnimationSprite{
    position: absolute;
    top: -3px;
    left: 8px;
    width: 208px;
    height: 132px;
}

#grayLineCan{
    position: absolute;
    top: 0px;
    left: 0px;
    width:209px;
    height:141px;
}

#ball2x{
    position: absolute;
    top: 0px;
    left: 0px;
    width:15px;
    height:15px;
}

#ball2xCon{
    position: absolute;
    top: 0px;
    left: 0px;
    width:15px;
    height:15px;
}

#lineAndBallCon{
    position: absolute;
    top: 16px;
    left: 52px;
    width:209px;
    height:141px;
}