a {
        color:#000;
}

.soundsim-container {
        width: 690px;
        margin:0 auto;
        border: 1px none #000;
}

.gaugecontainer {
        width:27%;
        float:left;
        margin:3%;
        border:1px none #000;
}


.display-value {
        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
        text-align: center;
        font-weight: bold;


}

#distance-display {
        background-image: url(../images/icon_distance.png);
        padding-top:0.1em;
        padding-bottom:2.3em;

}

#distance-display  span, #height-display span {
        background-color: #fff;
        font-weight: normal;
        font-size:0.9em;
}


#height-display {
        background-image: url(../images/icon_height.png);
        padding-top:0.7em;
        padding-bottom:1.6em;
        padding-right: 50px;
}




#velocity-display {

        padding-top:0.3em;
        padding-right:0.1em;
        padding-bottom:0.2em;
        font-size:1.4em;
        letter-spacing: -0.05em;
        background-color: #ffcd05;
        border:8px solid #d4281c;
        width:68px;
        margin:0 auto;
        -webkit-border-radius: 200px;
        -moz-border-radius: 200px;
        border-radius: 200px;
        font-family: arial, sans-serif !important;
}




#distance-controls,#height-controls, #velocity-controls {
        margin-bottom:-50px;
        margin-left:2px;
        margin-right:2px;
        border:1px none #000;
}




.clear {
        clear:both;
}


.soundsim-container h2 {
        font-weight: normal;
        border-bottom:1px solid #888;
        text-align: left;
        font-size:0.8em;
        margin: 0 0 1em 0;
}


.ruler {
        background-color: #ff0;
        margin-top:20px;
        font-size:0.7em;
}

.ruler div {
        float:left;
}

.ruler-leftline {
        border-top:2px solid #404040;
        border-left:2px solid #404040;
        height:5px;
        margin-bottom:7px;
}

.ruler-rightline {
        border-top:2px solid #404040;
        border-right:2px solid #404040;
        height:5px;
        margin-bottom:7px;
}


.ruler-lefttext {
        text-align: left;
}

.ruler-centertext {
        text-align: left;
}

.ruler-righttext {
        text-align: right;
}

@media (max-width: 600px){
.ruler-lefttext .units , .ruler-centertext .units , .ruler-righttext .units  {
display: none;

}

}

@media (max-width: 400px){
.ruler-lefttext  , .ruler-centertext  , .ruler-righttext   {
display: none;

}

}





.rulerwidth-distance-50 {
        width: 50%;
}

.rulerwidth-distance-25 {
        width: 25%;
}

.rulerwidth-distance-25t {
        float:right !important;
}

.rulerwidth-height-20 {
        width: 20%;
}

.rulerwidth-height-10 {
        width: 10%;
}

.rulerwidth-height-10t {
        float:right !important;
}

.rulerwidth-speed-33 {
        width: 32%;
}

.rulerwidth-speed-16 {
        width: 15.5%;
}

.rulerwidth-speed-16t {
        float:right !important;
}

.transparent_plate {
        background-image: url(/sound-simulation/resources/images/transparent.png);
        position: absolute;
        top:0;
        left:0;
        z-index: 300;
        width: 100%;
        min-height: 100%;
        overflow: hidden;
        text-align: center;
        padding-top:130px;

}

.intro_message {
        margin: 0 auto;
        width:400px;
        border:1px none #000;
        padding:20px;
        background-color: #fff;
        text-align: left;
        font-size:0.8em;

}

.intro_message h2 {
        padding:0px;
        margin:0px;

}

.intro_message a {
        font-weight: bold
}

.intro_message p {

}

#stop {
        background-image: url(../images/sound_off.png);
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        display: block;
        float:right;
        overflow: hidden;
        margin-right:10px;
        margin-top:5px;
}

#stop span {
        display:none;
}

.cleargauge {
        clear:both;
        margin-top:60px;
}


canvas {
        margin-top:20px;
        width: 100%;  overflow: hidden;
}

.sound-simulation-smalltext {
        font-size:0.8em !important;
}


#progress-label {
        text-align: center;
        background-color: transparent;
        width:100%;
}


.progress-label-container {
        text-align:center;
        margin-top:20px;
        padding-bottom:10px;
        }


.sound-sim-linkbutton, .sound-sim-linkbutton:hover {
        color:#fff;
        text-decoration:none;
        margin:0 auto;
        display: block;
        background-color: #be0027;
        border:3px solid #be0027;
        width:250px;
        padding:7px;
        margin-bottom:-10px;
        margin-top:-10px;
}