body{
    background-color: #000000;
    color: #dddddd;
}

#title{
    text-align: center;
}


#index-title{
    margin-top: 40px;
}

a{
    color: #dddddd;
}

#input-form{
    margin-top: 100px;
}




#button-load, #button-play{
    cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
    padding:5px 25px; /*add some padding to the inside of the button*/
    background: rgba(46,250,254,.6); /*the colour of the button*/
    border:1px solid #33842a; /*required or the default border for the browser will appear*/
    /*give the button curved corners, alter the size as required*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*give the button a drop shadow*/
    -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
    box-shadow: 0 0 4px rgba(0,0,0, .75);
    /*style the text*/
    color: black;
    font-size:1.1em;
}


#button-load:hover, #button-play:hover{
    background-color :rgba(46,250,254,1); /*make the background a little darker*/
    /*reduce the drop shadow size to give a pushed button effect*/
    -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
    box-shadow: 0 0 1px rgba(0,0,0, .75);
}

#button-play{
    padding: 10px 10px;
    position: fixed;
    left: 20px;
    top: 60px;
}

#select-sound {
    padding:10px 10px;
    position: fixed;
    left: 20px;
    top: 10px;
}





text{
    cursor: default;
    font: 14px "Helvetica Neue", Sans-Serif;
}

#equalizer #frame{
    fill: black;
}

.axis path,
.axis line {
    fill: none;
    stroke: none;
    shape-rendering: crispEdges;
}