/*=====
    CSS for insert dept example

    assumption: this follows a link to normalize.css

    by: Sharon Tuttle
    last modified: 2025-04-12
=====*/

/*--
    give the body a little left and right margin
--*/

body
{
    margin-left: 1em;
    margin-right: 1em;
}

/*--
    give the form a border and a little padding, 
    and center the form
--*/

form
{
    border: thin solid black;
    padding: 1em 1em 0.3em 1em;
    
    width: 20em;
    margin-left: auto;
    margin-right: auto;
}

/*--
    make the form's fieldset a grid container
        with 2 columns,
    and add a little space on the inner bottom
        AND outside bottom
--*/
    
fieldset
{
    display: grid;
    grid-template-columns: 40% 60%;
    grid-auto-rows: minmax(1em, auto);
    gap: 0.2em;

    padding-bottom: .3em;
    margin-bottom: .3em;
}

/*-- so the fieldset's legend text fits on one line...! --*/

legend
{
    font-size: 90%;
}

/*-- put a LITTLE space between the textfields --*/

input
{
    margin-bottom: 0.3em;
}

/*-- and LESS space under the form's submit button --*/

input[type="submit"]
{
    margin-bottom: 0;
}

/*-- use a div to allow centering of the form's submit button --*/

div.submit
{
    display: flex;
    justify-content: center;
}

/*-- 
    put a tasteful border on the results' table,
    not TOO close to the table contents
--*/

table, tr, th, td
{
    border: thin solid black;
    padding: 0.25em;
}

/*-- 
    make the footer less obtrusive (while still including it) 
--*/

footer
{
    font-size: 0.5em;
}

/*-- end of insert-dept.css --*/