.item2 { grid-area: left1; }
.item3 { grid-area: right1; }
.item4 { grid-area: right2; }
.item5 { grid-area: right3; }
.item6 { grid-area: right4; }
.item7 { grid-area: conv1; }
.item8 { grid-area: conv2; }
.item9 { grid-area: conv3;}
    
@font-face{
font-family: "Roboto";
src: url(fonts/Roboto-Regular.woff);
src: url(fonts/Roboto-Regular.ttf);
}
    
.grid-container {
  display: grid;
  grid-template-areas:
    'left1 right1 right1'
    'left1 right2 right2'
    'left1 right3 right3'
    'left1 right4 right4';
  grid-gap: 15px 15px;
  background-color: rgba (206,204,204);
}

body {
        margin:0;
        padding:0;
        font-family:"Roboto";
        min-width: 1024px;
        background-color: rgba (206,204,204);
}

#body-div {
	padding: 11px 15px 15px 15px;
    background-color: rgba(206,204,204);
}
    
    #header-div {
        position: relative;
        top: 0px;
        left: 0px;
        padding: 0px;
        margin: 0px;
        background-color: #fdfdfd;
        background-image: url('images/Pro-3-Header-Feather.jpg');
        background-repeat: no-repeat;
        background-size: 1440px;
        height: 312px;
    }
 #header-image {
       max-width: 100%;
        min-width: 801px;
        height: auto;
        min-height: 200px;
    }

#manual-div {
    position: absolute;
    right: 14px;
    top: 185px;

}

#manual-div > a {
    text-decoration: none;
    color: #217880;
    position:relative;
    left: -55px;
    top: -7px;
}

#manual-div > a {
    margin-left: 40px;
}

#manual-image {
    height: 55px;
    position: relative;
    top: -22px;
    left: 53px;
}

#logo-image {
    height: 100px;
}
    
.headline-div {
    background-color: black;
    color: white;
    height: 30px;
    padding: 10px 0 0 12px;
    font-size: 1.1em;  

}

.question-div:hover {
    width: 100%;    
}

.question-div:hover > span {
    display:none;
}

.question-div > p {
    display:none;
    position:relative;
    top: -5px;
    font-size: .5em;
}

.question-div:hover > p {
    display:block;
}

.question-div{
    float:right;
    position: relative;
    top: -40px;
    height: 40px;
    width: 40px;
    transition: .05s;
    background-color:#7C7C7C;
    color:white;
    font-size: 2em;
    text-align: center;
}



.dropfile-div, #name-div, #length-div, #position-div {
        margin-top: 44px;
        margin-bottom: 44px;
        padding-left: 25px;
        min-width: 350px;
}
    
.dropfile-div{
        height: 117px;
        background-color: #E5ECED;
        color: #217880;
        outline-style: dashed;
        outline-width: 2px;
        outline-color: #217880;
        text-align: center;
        padding: 14px 0 0 0;
        margin-left: 16px;
        margin-right: 16px;
        margin-bottom: 14px;
        margin-top: 14px;

}

.dropfile-div-active {
        height: 117px;
        background-color: #FFFF;
        opacity: 50%;
        z-index: 2;
        color: #217880;
        outline-style: dashed;
        outline-width: 2px;
        outline-color: #7C7C7C;
        outline-offset: -6px;
        text-align: center;
        padding: 14px 0 0 0;
        margin-left: 16px;
        margin-right: 16px;
        margin-bottom: 14px;
        margin-top: 14px;
        min-width: 350px;
}



#dropfile-div > p {
	background-color: #E5ECED;
    user-select:none;

}

#dropfolder-image {
    height: 45px;
    position: relative;
    top: -15px;  

}
    
.upload-div {
        text-align: center;
        margin: 12px 0 0 0;
}

.upload-input, .wavename-input, .wavelength-input, .waveposition-input, .waveconvert-input {
    line-height: 43px;
    height: 43px;
    width: 256px;
    text-align:center;
    text-align-last:center;
    font-size: 1.0em;
    border-color: #7c7c7c;
}

.upload-input {
        margin: auto;
        font-size: 0.95em !important;
    }
    .filemenu-div {
        margin: 25px 14px 14px 14px;

    }
    
    .filemenu {
        border-collapse: collapse;
        width: 100%;
        border-color: #7c7c7c;
    }
    
    .filemenu td {
        border: 1px solid #7c7c7c;
        padding: 5px 10px 5px 10px;
        font-size: 1em;
        text-align:center;
    }
    
.filemenu tr:nth-child(even){background-color: #f2f2f2;}

    
.wavename-input, .midiout-input {
        padding: 0;
        width: 254px;
        height:41px;
        border-width: 1px;
        border-style: solid;
        background-color: #E5ECED;
    }

.convert-div {
        margin-top: 71px;
        margin-bottom: 71px; 
        margin-right: 15px;
        padding-left:25px;
        display: grid;
        grid-template-areas:
        'conv1 conv2'
        'conv1 conv3';
        width: 0px;

}
    
.button {
    background-color: #217880;
    color: white;
    border:none;
    font-size: 0.9em;
}

.button:active{
    background-color: #53abb3;
}

.buttonoff {
    	background-color: #7C7C7C;
	color: white;
    	border:none;
    	font-size: 0.9em;
}

.grid-container > .item1, .item2, .item3, .item4, .item5, .item6 {
  background-color: rgba(255, 255, 255);
  

}

#midi-icon {
    height: 50px;
    position: relative;
    top: -100px;
    left: 105px;
    
}
.item8, .item9 {
    margin-left: 15px;
    display: none;
}


#midioutput {
    position: relative;
    top: -40px;
    text-align-last: center;
    width:256px;
}


.unhidden {
    display:block;
}

.midimargin {
    margin-bottom: 21px;
}

.versio-number {
    font-size: 0.8em;
    position:
    relative;
    left: 5px;
}

#footer {
    text-align: right;
    padding-top: 5px;
    font-size: 0.8em;
}

#footer > span > a:link {
    text-decoration: none;
    color: black;
}