/* ---- GLOW ERA CONTENT MANAGEMENT SYSTEM STYLE SHEET --- */

* {
    font-family: 'Quicksand', "sans-serif";
    font-size: 16px;
    color: black;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---- WRAPPER ---- */
#wrapper {
    max-width: 100%;
    min-height: 100vh;
    background-color: white;
    margin: auto;

    /* ---- PRIMARY GRID ---- */
    display: grid;
    grid-template-areas:
        "header"
        "menu"
        "content"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
}

/* ---- HEADER ---- */
header {
    grid-area: header;
    width: 100%;
    height: 200px;
    background-color: white;

    /* ---- SUB GRID ---- */
    display: grid;
    grid-template-areas:
        "logo company";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr;
}

header h1 {
    grid-area: company;
    text-align: right;
    margin: 1em;
    font-weight: normal;
}

header a {
    text-decoration: none;
}

/* ---- HEADER LOGO ---- */
header img {
    grid-area: logo;
    margin-left: 20px;
}

/* ---- NAVIGATION MENU ---- */
nav {
    grid-area: menu;
    width: 100%;
    height: 70px;
    background-color: rgb(228, 219, 219);
}

nav ul {
    width: 100%;
    list-style: none;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    
    margin-top: 1.5em;
    text-align: center;
}

nav ul li a {
    font-size: 18px;
    color: black;
    background-color: white;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 5px;
    box-sizing: border-box; 
}

nav a:hover {
    box-shadow: 0 0 12px 4px white;
}

/* ---- FOOTER ---- */
footer  {
    grid-area: footer;
    width: 100%;
    height: 100px;
    background-color: rgb(228, 219, 219);
    padding: 1em;

    /* ---- SUB GRID ---- */
    display: grid;
    grid-template-areas:
        "leftside rightside";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

#left {
    text-align: left;
}

#right {
    text-align: right;
}

footer ul {
    list-style: none;
}

footer ul li a {
    text-decoration: none;
}

/* ---- QUOTE PAGE ---- */
#quotepage {
	padding: 2em;
	text-align: center;
}

#quotepage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#clickhere {
	margin-top: 20%;
}

#quotepage blockquote p {
    margin-bottom: 2%;
}

/* ---- QUOTE MANAGEMENT SYSTEM ---- */
#QMSpage {
	padding: 2em;
	text-align: center;
}

#QMSpage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#QMSpage h2 {
	margin-bottom: 2%;
}

#QMSpage ul {
	list-style: none;
}

#QMSpage li {
	padding-bottom: 2%;
}

#QMSpage p {
	margin-top: 20%;
}

/* ---- LOGIN PAGE ---- */
#loginpage {
	padding: 2em;
	text-align: center;
}

#loginpage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#loginpage form div label input {
	margin-bottom: 2%;
}

#firstline p {
	margin-bottom: 5%;
}

#lastline p {
	margin-top: 20%;
}

/* ---- MANAGE QUOTES PAGE ---- */
#managequotespage {
	padding: 2em;
	text-align: center;
}

#managequotespage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#managequotespage p, div {
	margin-bottom: 2%;
}

#lastline2 p {
	margin-top: 20%;
}

/* ---- SEARCH RESULTS PAGE ---- */
#searchresultspage {
	padding: 2em;
	text-align: center;
}

#searchresultspage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#searchresultspage table {
	margin-left: auto;
	margin-right: auto;
}

#searchresultspage p {
	margin-bottom: 2%;
}

/* ---- NEW QUOTE PAGE ---- */
#newquotepage {
	padding: 2em;
	text-align: center;
}

#newquotepage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

/* ---- MANAGE AUTHORS PAGE ---- */
#manageauthorspage {
	padding: 2em;
	text-align: center;
}

#manageauthorspage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#manageauthorspage p {
	margin-bottom: 2%;
}

#manageauthorspage ul {
	list-style: none;
}

/* ---- EDIT AUTHOR PAGE ---- */
#editauthorpage {
	padding: 2em;
	text-align: center;
}

#editauthorpage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#editauthorpage fieldset div {
	text-align: left;
	padding-left: 2%;
}

/* ---- MANAGE CATEGORIES PAGE ---- */
#managecategoriespage {
	padding: 2em;
	text-align: center;
}

#managecategoriespage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#managecategoriespage ul {
	list-style: none;
}

#managecategoriespage p {
	margin-bottom: 2%;
}

/* ---- EDIT/NEW CATEGORY PAGE ---- */
#editcategorypage {
	padding: 2em;
	text-align: center;
}

#editcategorypage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#lastline3 p {
	margin-top: 30%;
}

/* ---- FILES PAGE ---- */
#filespage {
	padding: 2em;
	text-align: center;
}

#filespage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#filespage table {
	margin-left: auto;
	margin-right: auto;
}

#filespage p, h2 {
	margin-bottom: 2%;
}

/* ---- DONATION PAGE ---- */
#donationpage {
	padding: 2em;
	text-align: center;
}

#donationpage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#donationpage table {
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	margin-top: 5%;
}

#donationpage p {
	margin-bottom: 2%;
}

#donationpage table td, th {
	padding:5%;
}

/* ---- CART PAGE ---- */
#shoppingcartpage {
	padding: 2em;
	text-align: center;
}

#shoppingcartpage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}

#shoppingcartpage table {
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	margin-bottom: 2%;
}

#shoppingcartpage p {
	margin-bottom: 2%;
}

#shoppingcartpage table td, th {
	padding:5%;
}

/* ---- THANK YOU PAGE (NOT USING DUE TO NO PURCHASE FUNCTION) ---- */
#thankyoupage {
	padding: 2em;
	text-align: center;
}

#thankyoupage h1 {
	text-align: center;
	font-size: 25px;
	margin-bottom: 5%;
}