:root {
    --tpcc-blue:            #44756f;
    --tpcc-green:           #8bb461;
    --tpcc-orange:          #f47430;
    --tpcc-red:             #f0452a;
    font-family:		    Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:              0.83em;
}

* {
    box-sizing:             border-box;
}

body {
    color:                  black;
    background-color:       whitesmoke;
    margin:                 0;
}

#page {
    color:                  var(--tpcc-blue);
    background-color:       ivory;
    display:                grid;
    grid-template-rows:     min-content 1fr min-content;
}

header, footer {
    color:              var(--tpcc-blue);
    background-color:   var(--tpcc-green);
    font-weight:        bold;
}

#banner, nav, #footerBox {
    max-width:          800px;
    margin:             0 auto;
    display:            flex;
    flex-flow:          row wrap;
    justify-content:    space-between;
    align-items:        center;
    align-content:      center;
}

#banner > *, nav > *, #footerBox > * {
    margin:             0.5rem;
}

main {
    max-width:          800px;
    padding:            1rem;
    margin:             0 auto;
}

main > h2 {
    text-align:         center;
}

main > p {
    max-width:          75ch;
}

button {
    font-size:          1em;
    font-weight:        bold;
    text-align:         center;
    cursor:             pointer;
    color:              white;
    background-color:   var(--tpcc-blue);
    padding:            0.25rem 0.5rem;
    border-radius:      0.25rem;
    border:             2px solid var(--tpcc-blue);
}

button:hover {
    color:              var(--tpcc-blue);
    background-color:   white;
}

button.inactive {
    cursor:             default;
    color:              var(--tpcc-blue);
    background-color:   white;
}

#loginForm {
    padding:            1rem;
    border:             0.1rem solid black;
    margin:             1rem;
}

#loginForm input[type=text], #loginForm input[type=password] {
    font-size:          1em;
    width:              100%;
    padding:            1rem;
    margin:             0.5rem 0;
    display:            inline-block;
    border:             1px solid #ccc;
    box-sizing:         border-box;
}

#loginForm button {
    font-size:          1em;
    font-weight:        bold;
    background-color:   var(--tpcc-blue);
    color:              white;
    padding:            0.25rem 0.5rem;
    margin:             0.5rem 0;
    cursor:             pointer;
    border:             2px solid var(--tpcc-blue);
    border-radius:      0.25rem;
    width:              100%;
}

#loginForm button:hover {
    color:              var(--tpcc-blue);
    background-color:   white;
}

#loginForm p.error {
    color:              var(--tpcc-red);
}

#loginForm a {
    color:              var(--tpcc-blue);
}

/* Session timeout box */
.toMsgBoxBg {
    display:            block;
    position:           fixed;
    z-index:            1;
    padding-top:        3rem;
    left:               0;
    top:                0;
    width:              100%;
    height:             100%;
    overflow:           auto;
    background-color:   rgba(0,0,0,0.4);
}

.toMsgBoxContent {
    color:              var(--tpcc-blue);
    background-color:   #fefefe;
    margin:             auto;
    padding:            1rem;
    border:             3px solid var(--tpcc-blue);
    width:              20%;
}

.toMsgBoxClose {
    color:              #aaaaaa;
    float:              right;
    font-size:          2rem;
    font-weight:        bold;
}

.toMsgBoxClose:hover,
.toMsgBoxClose:focus {
    color:              black;
    text-decoration:    none;
    cursor:             pointer;
}

.googleMap {
    max-width:          300px;
    padding:            0 1rem;
    margin:             0 auto;
}