@font-face {
    font-family: 'gothic';
    src: url('../assets/fonts/CenturyGothic.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/CenturyGothic.woff') format('woff'), /* Pretty Modern Browsers */ url('../assets/fonts/CenturyGothic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../assets/fonts/CenturyGothic.svg') format('svg');
    /* Legacy iOS */
}

body {
    margin: 0;
}

#main_cont {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 540px;
    height: 400px;
    background-color: #434343;
}

.meterCont {
    position: absolute;
    left: 10px;
    top: 43px;
    width: 501px;
    height: 198px;
    border: 2px solid #fe980e;
    overflow: hidden;
}

#meter {
    background-image: url(../assets/images/graph.png);
}

.btn {
    position: absolute;
/*    cursor: pointer;*/
    border: none;
    font-size: 10px;
    border-radius: 3px;
}

#startBtn {
    left: 236px;
    top: 252px;
    width: 50px;
    height: 17px;
}

#reveal {
    left: 14px;
    bottom: 25px;
    width: 114px;
    height: 20px;
}

#revealBox {
    position: absolute;
    left: 152px;
    bottom: 15px;
    border: 1px solid #fe980e;
    width: 149px;
    height: 38px;
    font-family: arial;
    color: #0b9bff;
    text-align: center;
    line-height: 38px;
    font-size: 25px;
}

.sw_cont {
    position: absolute;
    left: 327px;
    bottom: 129px;
    color: #fe980e;
    width: 184px;
}

.sw_label {
    text-align: center;
}

.sw_meter_cont {
    position: absolute;
    border: 2px solid #fe980e;
    left: 1px;
    top: 21px;
    width: 178px;
    height: 94px;
}

.sw_text {
    font-family: arial;
    color: #0b9bff;
    position: absolute;
    font-size: 33px;
    left: 20px;
    top: 26px;
}

#sw_start {
    left: 119px;
    width: 55px;
    top: 18px;
    height: 17px;
}

#sw_reset {
    left: 119px;
    top: 55px;
    width: 55px;
    height: 17px;
}

#canvasSlider {
    position: absolute;
    
    width: 12px;
    height: 200px;
    right: 0px;
    top: -2px;
}

#amplitude {
    left: 7px;
    bottom: 105px;
}

#waveLength {
    left: 7px;
    bottom: 72px;
}

.sliderCont {
    position: absolute;
    width: 230px;
    height: 4px;
    background-size: 100%;
    border-radius: 10px;
}

.slideBar {
    height: 4px;
    border-radius: 5px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 96%;
    margin-left: 5px;
}

.slideThumb {
    position: absolute;
    width: 13px;
    height: 13px;
    cursor: pointer;
    left: 115px;
}

.resetBtn {
    border: none;
    position: absolute;
    border-radius: 3px;
    width: 20px;
    height: 11px;
    cursor: pointer;
}

#amplitudeReset {
    bottom: 102px;
    left: 236px;
    width: 18px;
    height: 10px;
}

#waveLengthReset {
    bottom: 69px;
    left: 236px;
    width: 18px;
    height: 10px;
}

.head1 {
    font-family: "gothic";
    color: #fe980e;
    font-size: 20px;
}

.head2 {
    font-family: "gothic";
    color: #fe980e;
    font-size: 12px;
    position: absolute;
}

.head3 {
    font-family: "gothic";
    color: #fe980e;
}

#label1 {
    position: absolute;
    left: 183px;
    top: 12px;
}

#label2 {
    left: 12px;
    top: 274px;
}

#label3 {
    left: 12px;
    top: 307px;
}

#minfo{
	position:absolute;
	font-family:"gothic";
	color:#fff;
	pointer-events:none;
	font-size:10px;
}

.startBox {
    border: 1px solid #fe980e;
    position: absolute;
    width: 72px;
    height: 31px;
    top: 244px;
    left: 224px;
}

.gunit{
    color: #fff;
    position: absolute;
    bottom: 3px;
    font-family: gothic;
    list-style: none;
    font-size: 8px;
    margin: 0px;
    padding: 0px;
    left: 40px;	
}

.gunit li{
	    float: left;
    margin-right: 38px;
}

.gunit li:last-child{
	margin-right:0px;
}

.gradient {
    background: #e2e2e2;
    /* Old browsers */
    background: -moz-linear-gradient(top, #e2e2e2 0%, #989898 50%, #989898 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e2e2e2 0%,#989898 50%,#989898 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e2e2e2 0%,#989898 50%,#989898 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#989898',GradientType=0 );
    /* IE6-9 */
}

.btn:active {
    background: #e2f3fe;
    /* Old browsers */
    background: -moz-linear-gradient(top, #e2f3fe 0%, #9ed9fe 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e2f3fe 0%,#9ed9fe 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e2f3fe 0%,#9ed9fe 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f3fe', endColorstr='#9ed9fe',GradientType=0 );
    /* IE6-9 */
}
 #loadInfo {
    position: absolute;
    width: 176px;
    height: 50px;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    font-size: 24px;
    text-align: center;
}
        #main_cont{
                opacity: 0;
        }
.btn:hover {
    border:1px solid #0b9bff;
}