﻿body {
    background-color: lightgray;
    color: black;
    font-family: Tahoma, sans-serif, serif;
    font-size: 16px;
}

/*Header and Navbar*/
div.header {
    margin: auto;
    width: 70%;
    height: 200px;
    padding: 10px;
    background-image: url("../Images/waikoloa.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

div.navbar {
    background-color: cornflowerblue;
    margin: auto;
    width: 70%;
    padding: 10px;
}

ul.navbar {
    background-color: cornflowerblue;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li.navbar {
    display: inline;
    text-align: center;
    padding: 5px;
}

li.admin {
    background-color: red;
}

li.customer {
    background-color: lightseagreen;
}

a.navbar {
    text-decoration: none;
    display: inline-block;
    padding: 5px;
    color: white;
}

div.mainbody {
    margin: auto;
    width: 70%;
    background-color: lightskyblue;
    padding: 10px;
}

div.mainbodyadmin {
    background-color: red;
}

div.lowerbody {
    margin: auto;
    width: 70%;
    background-color: white;
    padding: 10px;
}

/*Main body elements*/
h1.pagetitle {
    text-align: center;
}

/*Test Area*/
h2.test {
    color: green;
    text-align: center;
}

/*Table Elements*/
table, tr {
    border: 1px solid black;
    width: 100%;
    border-collapse: collapse;
}

table.view, tr.view, th.view, td.view {
    border: none;
    text-align: left;
    padding: 5px;
}

table.addProducts, table.frontpage, tr.frontpage {
    width: auto;
}

th, td {
    text-align: left;
    border: 1px solid black;
    padding: 5px;
}

th.center, td.center {
    text-align: center;
}

th {
    font-size: 18px;
    font-weight: bold;
}

.caption {
    font-size: 20px;
    text-align: left;
    font-weight: bold;
    padding: 5px;
}

/*CSS Buttons*/
.button {
    background-color: lightsteelblue;
    border: none;
    color: white;
    padding:5px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
}

.buttonclear {
    background-color: gray;
}

.buttonenter {
    background-color: cornflowerblue;
}

.buttoncategories {

    background-color: cornflowerblue;

}

.admin {
    background-color: red;
}

