body {
    font-family:		DejaVu Sans Mono, Andale Mono, Courier, monospace;
    font-size:          1em;
    color:              #000000;
    background-color:   #eeeeee;
    margin:             0;
}

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

.toMsgBoxContent {
    background-color:   #fefefe;
    margin:             auto;
    padding:            1rem;
    border:             1px solid black;
    width:              20%;
}

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

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

#page {
    color:              #000000;
    background-color:   #dcf3ee;
    max-width:			1200px;
    margin:			    0 auto;
    overflow:           auto;
}

#bannerBox {
    color:              #000000;
    background-color:   #41bea3;
    display:            flex;
    flex-flow:          row wrap;
    justify-content:    space-evenly;
    align-items:        center;
    align-content:      center;
}

.bannerItem {
    margin:             0.5rem;
}

button.bannerItem, p.bannerItem button {
    display:            inline-block;
    font-size:          1em;
    text-align:         center;
    transition-duration: 0.4s;
    cursor:             pointer;
    color:              black;
    background-color:   white;
    padding:            1rem 2rem;
    border-radius:      1rem;
    border:             none;
}

button.bannerItem.inactive {
    cursor:             default;
    color:              white;
    background-color:   black;
}

button.bannerItem:hover, p.bannerItem button:hover {
    color:              white;
    background-color:   black;
}

button.bannerItem.inactive:hover {
    background-color:   black;
}

#navBox {
    color:              #000000;
    background-color:   #99ccff;
    display:            flex;
    flex-flow:          row wrap;
    justify-content:    flex-start;
    align-items:        center;
    align-content:      center;
}

.navItem {
    margin:             0.5rem;
}

#main {
    width:              60%;
    margin:             2rem auto;
}

#defPanel {
    border:             0.25rem solid black;
    border-radius:      1rem;
    padding:            1rem;
    text-align:	        left;
    color:              #000000;
    background:         #dcf3ee;
}

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

#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;
    background-color:   #04AA6D;
    color:              white;
    padding:            1rem;
    margin:             0.5rem 0;
    cursor:             pointer;
    border:             none;
    border-radius:      1rem;
    width:              100%;
}

#loginForm button:hover {
    opacity:            0.8;
}

#loginForm p.error {
    color:              red;
}

#footerBox {
    color:              #000000;
    background-color:   #41bea3;
    display:            flex;
    flex-flow:          row wrap;
    justify-content:    space-evenly;
    align-items:        center;
    align-content:      center;
}

.footerItem {
    margin:             0.5rem;
}