@@ -0,0 +1,131 @@
body {
    background: rgb(226, 226, 226);
    margin: 0px;
}

header {
    background: rgb(226, 226, 226);
    color: black;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: smaller;
    text-align: center;
}

canvas.chartCanvasClass {
    background: rgb(255, 255, 255);
    margin: 0px;
    padding: 5px;
    border: 1px solid rgb(0, 0, 0);
    display: block; 
    box-sizing: border-box; 
}

@media (orientation: portrait) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr) 150px 120px;
        justify-items: stretch;
    }

    section div.chart-container {
        grid-column-start: 1; 
        grid-column-end: 3; 
        grid-row-start: 1; 
        grid-row-end: 4;
        height: 70vh;
        width: 100%;
        box-sizing: border-box; 
    }
    
    section div.antennaFront-container {
        grid-column-start: 1; 
        grid-column-end: 2; 
        grid-row-start: 4; 
        grid-row-end: 5;
    }
    section div.antennaSide-container {
        grid-column-start: 2; 
        grid-column-end: 3; 
        grid-row-start: 4; 
        grid-row-end: 5;
    }
    section div.slider_container {
        grid-column-start: 1; 
        grid-column-end: 3; 
        grid-row-start: 5; 
        grid-row-end: 6;
    }
}

@media (orientation: landscape) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr) 150px;
        justify-items: stretch;
    }

    section div.chart-container {
        grid-column-start: 1; 
        grid-column-end: 5; 
        grid-row-start: 1; 
        grid-row-end: 3;
        height: 80vh;
        width: 100%;
        box-sizing: border-box; 
    }
    
    section div.slider_container {
        grid-column-start: 1; 
        grid-column-end: 3; 
        grid-row-start: 3; 
        grid-row-end: 4;
    }
    section div.antennaFront-container {
        grid-column-start: 3; 
        grid-column-end: 4; 
        grid-row-start: 3; 
        grid-row-end: 4;
    }
    section div.antennaSide-container {
        grid-column-start: 4; 
        grid-column-end: 5; 
        grid-row-start: 3; 
        grid-row-end: 4;
    }
}    
/*
@media print (orientation: landscape) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: repeat(4, 300px);
        grid-template-rows: repeat(1, 300px) 150px;
        justify-items: stretch;
    }
    section div.chart-container {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: auto!important;
        width: auto!important;
    }
}

@media print (orientation: portrait) {
    section.gridLayoutClass {
        display: grid;
        grid-template-columns: repeat(2, 200px);
        grid-template-rows: repeat(2, 300px) 150px 120px;
        justify-items: stretch;
    }
    section div.chart-container {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: auto!important;
        width: auto!important;
    }
}
*/