/* random junk */

.label
{
    font: 26px Helvetica, monospace;
}

.mygrid {
    display: grid;
/*
    grid-template-columns: 300px 300px 1fr;
    grid-template-rows: 400px 400px 0.1fr;
*/
    /*
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 0.1fr;
*/
}

.mygrid > div
{
    padding: 5px;
    margin: 0px;
    border: 1px solid black;
}

#precanvas {
    position: relative;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start:1;
    grid-row-end:3;
    resize:both;
    overflow:hidden;
}

#partitions {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start:1;
    grid-row-end:2;
}

#settings {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start:2;
    grid-row-end:4;
}

#animation {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start:3;
    grid-row-end:4;
}

#colorintensity {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start:3;
    grid-row-end:4;
}

#list {
}    


button
{
    cursor: pointer;
    padding:1px 3px;
    margin:0px 1px;
    border-width:2px;
}

#canvas {
    position:relative;
    background:transparent;
    left:0;
    top:0;
    z-index:1;
}

#submit {
    position: absolute;
    right:0px;
    top:0px;
    z-index:2;
}

#menuoverlay {
    position: absolute;
    left:0px;
    top:0px;
    height:0px;
    z-index:2;
}


input[type=range]
{
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 200px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 200px;
    height: 4px;
    background: #49A3FF;
    border: none;
    border-radius: 3px;
    margin: 5px 5px 3px 5px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 16px;
    background: #5970B2;
    margin-top: -6px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #3983DF;
}

input[type=range]::-moz-range-track {
    width: 200px;
    height: 5px;
    background: #49A3FF;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #5970B2;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}