body {
    position: absolute;
    /*right: 250px; before changed to static left*/
    right: 350px;
    /*left: 75px;*/
    left: 20px;
    background-color: blanchedalmond;
    font-family: 'Arial';
    font-size: 100%;
    color: darkslateblue;
    font-style: normal;
    /*margin-top: 30px; remove margin-top after making left static bar. Since there is a placement for this php page in WebPix.css this just compounds it all
        -- nope - removing this made no difference - the whole page just shifts the main index.php down too -- Why?
    */
}



.Vert {
    display: flex;
    /*justify-content: space-between;
    border: 3px solid red;*/
    width: 20px;
    height: 150px;
    padding: 0;
}

    .Vert input {
        width: 150px;
        height: 20px;
        margin: 0;
        border: 3px solid red;
        transform-origin: 75px 75px;
        transform: rotate(-90deg);
    }

 /*
input[type=range] {
    -webkit-appearance: slider-vertical;
}
*/

#vertSlide0 {
    margin-left: 0px;
}

#vertSlide1 {
    margin-left: -110px;
}

#vertSlide2 {
    margin-left: -110px;
}

#vertSlide3 {
    margin-left: -110px;
}

#vertSlide4 {
    margin-left: -110px;
}

#vertSlide5 {
    margin-left: -110px;
}

#vertSlide6{
    margin-left:-110px;
}

#vertSlide7{
    margin-left: -110px;
}

#vertSlide8{
    margin-left: -110px;
}

#Val0 {
    border: 1px solid darkblue;
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-right: 13px;
    margin-left: -4px;
    margin-top: 140px;
    padding-left: 3px;
    padding-right: 3px;
}

#Val1 {
    border: 1px solid darkblue;
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-left: -112px;
    margin-top: 140px;
    margin-right: 13px;
    padding-left: 3px;
    padding-right: 3px;
}

#Val2 {
    border: 1px solid darkblue;
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-left: -112px;
    margin-top: 140px;
    margin-right: 13px;
    padding-left: 3px;
    padding-right: 3px;
}

#Val3 {
    border: 1px solid darkblue;
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-left: -112px;
    margin-top: 140px;
    margin-right: 13px;
    padding-left: 3px;
    padding-right: 3px;
}

#Val4 {
    border: 1px solid darkblue;
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-top: 140px;
    margin-left: -112px;
    margin-right: 13px;
    padding-left: 3px;
    padding-right: 3px;
}

#Val5 {
    border: 1px solid darkblue;
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-top: 140px;
    margin-left: -112px;
    margin-right: 13px;
    padding-left: 3px;
    padding-right: 3px;
}

#Val6 {
    border: 1px solid darkblue;
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-top: 140px;
    margin-left: -112px;
    margin-right: 13px;
    padding-left: 3px;
    padding-right: 3px;
}

#Val7 {
    border: 1px solid darkblue;
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-top: 140px;
    margin-left: -112px;
    margin-right: 13px;
    padding-left: 3px;
    padding-right: 3px;
}

#Val8 {
    border: 1px solid darkblue;
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-top: 140px;
    margin-left: -112px;
    margin-right: 13px;
    padding-left: 3px;
    padding-right: 3px;
}

#GenSqWave {
    /*display: flex;*/
    /*margin-left: 70px;*/
    /* adjusting left and right margin dictates width of button and text display*/
    margin-left: 48px;
    margin-right: 26px;
    margin-top: 5px;
    width: 50px;
    height: 18px;
    border: 1px solid black;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/*
.VertValues
{
    display: flex;
    font-family: Arial;
    font-size: 12px;
}
*/

#HrmLabel0 {
    /*border: 1px solid darkblue;*/
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-right: 6px;
    margin-left: 4px;
    padding-left: 2px;
    padding-right: 3px;
}

#HrmLabel1 {
    /*border: 1px solid darkblue;*/
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-right: 14px;
    margin-left: -104px;
    padding-left: 2px;
    padding-right: 3px;
}

#HrmLabel2 {
    /*border: 1px solid darkblue;*/
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-left: -104px;
    margin-right: 14px;
    padding-left: 2px;
    padding-right: 3px;
}

#HrmLabel3 {
    /*border: 1px solid darkblue;*/
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-left: -104px;
    margin-right: 14px;
    padding-left: 2px;
    padding-right: 3px;
}

#HrmLabel4 {
    /*border: 1px solid darkblue;*/
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-left: -104px;
    margin-right: 14px;
    padding-left: 2px;
    padding-right: 3px;
}

#HrmLabel5 {
    /*border: 1px solid darkblue;*/
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-left: -104px;
    margin-right: 14px;
    padding-left: 2px;
    padding-right: 3px;
}

#HrmLabel6 {
    /*border: 1px solid darkblue;*/
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-left: -104px;
    margin-right: 14px;
    padding-left: 2px;
    padding-right: 3px;
}

#HrmLabel7 {
    /*border: 1px solid darkblue;*/
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-left: -104px;
    margin-right: 14px;
    padding-left: 2px;
    padding-right: 3px;
}

#HrmLabel8 {
    /*border: 1px solid darkblue;*/
    width: 20px;
    font-family: Arial;
    font-size: 12px;
    margin-left: -104px;
    margin-right: 14px;
    padding-left: 2px;
    padding-right: 3px;
}

#SineLabel {
    /*white-space: break-spaces;*/
    font-family: Arial;
    font-size: 14px;
    font-size: 14px;
    margin-left: 10px;
}

#GenSineLabel {
    /*white-space: break-spaces;*/
    font-family: Arial;
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 14px;
    font-size: 14px;
    margin-left: 36px;
}

/*
.VertLabels {
    display: flex;
    font-family: Arial;
    font-size: 12px;
}
*/

.HarmonicBlock {
    margin-left: 50px;
    width: 375px;
    /*border: 3px solid blue;*/
    padding-left: 36px;
    padding-top: 30px; /* add a little space over the top of text*/
    padding-bottom: 10px;
}

#GenHarmonicsBlock {
    margin-left: 30px;
    margin-right: 60px;
    margin-top: 2px;
    /*display: flex;
    flex-wrap: wrap;
    width: 450px;
    height: 100px;*/
    /*border: 3px solid blue;*/
    padding-left: 0px;
    padding-top: 30px; /* add a little space over the top of text*/
    padding-bottom: 10px;
}

.ForierTextBlock {
    margin-left: 150px;
    margin-top: 2px;
    margin-bottom: 5px;
    width: 1050px;
    /*border: 3px solid blue;*/
    padding-left: 36px;
    padding-top: 30px; /* add a little space over the top of text*/
    padding-bottom: 10px;
}

#firstEl {
    width: 375px;
    font-family: Arial;
    font-size: 14px;
    margin-left: -280px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 8px;
    padding-bottom: 4px;
}

#Osc{
    width: 300px;
    margin-top: 80px;
    margin-left :50px;
}

fieldset {
    background-color: none;
    border: 2px groove purple;
    margin-left: 10px;
   
}

legend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}

.ToneGen {
    font-family: 'Arial';
    font-size: 14px;
    color: darkslateblue;
    width: 350px;
    margin-left: -280px; /*changed from -50 before making static left*/
}

.ToneGenPlayPause {
    margin-left: 120px;
    width: 60px;
    height: 24px;
}


#formSet {
    display: flex;
    gap: 30px;
}

#freq {
    display: flex;
    padding-bottom: 5px;
}

input[type="number"] {
    width: 80px;
}

#vol {
    display: flex;
}

#freqLabel {
    margin-right: 13px;
    margin-left: 12px; /*add 7 px to each control label left margin*/
}

#volLabel {
    margin-right: 14px;
    margin-left: 32px; /*was 26px*/
}

#waveLabel {
    margin-left: 7px;
    margin-right: 10px;
}

    #waveLabel::after {
        content: ":";
    }

#freqLabel::after {
    content: ":";
}

#volLabel::after {
    content: ":";
}
/* the id=radioBlock has display:flex attribute that places elements with line breaks in line beneath the <span> elements 1st span element type=input
    that has a <br> and the following 3 elements align with that one. This as opposed to them aligning on the left margin that's the inheirited
    30px from the body{}
*/
#radioBlock {
    display: flex;
    margin-bottom: 9px;
}



#SpectrumValues {
    /*margin-top: 100px; this moved the spectrum text and slider/player but NOT the placement from WebPix.css */
    margin-top: 70px;
    margin-lefT: 375px;
    width: 300px;
    height: 22px;
    /*flood-color: blue;*/
    border: 4px solid darkslateblue;
    background-color: none;
    font-family: Calibri;
    font-size: 100%;
    /*color: #F7BE81;*/
    font-style: italic;
    text-align: center;
}


#display {
    /*margin-top: 30px; this added 30px to WebPix.css*/
    margin-top: 30px;
    margin-left: 200px;
    width: 400px;
    height: 200px;
    /*border: 1px solid darkslateblue;*/
    background-color: none;
}
#Graph {
    /*background-color: lightgray;*/
    background-color: none;
    margin-left: -40px;
}

#Wave {
    border: 1px solid black;
    /*margin-left:100px;*/
    margin-top: 50px;
    background-color: white;
}

#add {
    margin-left: 146px;
    margin-top: 7px;
    border: 1px solid black;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

#plot {
    margin-left: 146px;
    margin-top: 0px;
    border: 1px solid black;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

#Reset {
    margin-left: 140px;
    margin-right: 18px;
    margin-top: 15px;
    width: 120px;
    height: 21px;
    border: 1px solid black;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}


th {
    border: 1px solid black;
    /*background-color: #D8D8D8;*/
    font-family: Calibri;
    font-size: 100%;
    /*color: #FF8000;*/
    font-style: normal;
}

td {
    border: 1px solid black;
    padding-left: 3px;
    padding-right: 3px;
    width: 10px;
}

#harmNum{
    width: 20px
}

#RealVal{
    width: 10px;
}

#ImagVal{
    width: 10px;
}