@charset "UTF-8";

/* CSS Document Author: Edith Harvey
Course: ITWP 1000 - Web Project #1 & #2
File: project1.css */

/* Grid Layout - 2 Columns - Header, Nav, Main, Footer */
/* If border around entire page is wanted add border: to grid-container */
.grid-container { 
     display: grid;
     grid-template-columns: 235px 1fr;
     grid-template-rows: 125px auto;
}

header {
     grid-row: 1 / 2;
     grid-column: 1 / 3;
}
nav {
     grid-row: 2 / 4;
     grid-column: 1 / 2;
}
main {
     grid-row: 2 / 3;
     grid-column: 2 / 3;
     border: double;
     padding: 5px;
}
footer {
     grid-row: 3 / 4;
     grid-column: 2 / 3;
     margin-top: 2em;
}

/* Body Font Styles, Background Images, etc */
body {
     background-image: url("../images/ricepaper.jpg");
     background-color: #ffffff; /* white */
     color: #009900; /* dark green */
     margin-bottom: auto;
     font-family: "Comic Sans MS", "Century Gothic", Arial, sans-serif;  
}

/* Header Styles */
h1 {
     text-align: center;
     font-size: 2.5em;
     color: #000000;
}
h2 {
     text-align: center;
     font-size: 2em;
     color: #000000;
     text-decoration: underline;
}
h3 {
     text-align: center;
     font-size: 2em;
     color: #000000;
     text-decoration: underline;
}
h4 {
     text-align: center;
     font-size: 2em;
     color: #000000;
     text-decoration: underline;
}
h5 {
     text-align: center;
     font-size: 1.25em;
     color: #000000;
     text-decoration: underline;
}

/* Specific image for UL (unordered list) type cabinet */
ul.cabinet {
     list-style-image: url('../images/cabinet-small.gif');
}
/* Specific image for UL (unordered list) type cabinet */
ul.tack {
     list-style-image: url('../images/tack-paper.gif');
}
/* Larger text for titles in nav menu */
.titlenavmenu {
     text-align: center;
     font-size: 1.25em;
     color: #FF0000;
     text-decoration: underline;
}
/* Smaller text for 2nd line of nav menu */
.subnavmenu {
     font-size: .75em;
     color: #000000;
}

/* Specific Class for images to Float Left */
.imgfloatleft {
     border: 0;
     float: left;
     padding: 2px;
}
/* Specific class to center an img but not all images */
.imgcenter {
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 50%;
}

/* Center Text without using obsolete div align="center" tags */
.center {
     text-align: center;
}

table {
     padding: 2px;
     
}

th, td {
     padding: 3px;
     vertical-align: top;
}

/* No vertical-align for TD tag and centered as well */
.tdcenter {
     text-align: center;
     vertical-align: middle;
}

/* Only vertical-align middle for td tag */
.tdvmiddle {
     vertical-align: middle;
}

/* link anchor tag styles */
/* all links before clicked */
a:link {
     text-decoration: none;
     color: #000000; /* black */
}
/* visited link style */
a:visited {
     color: #009900; /* dark green */
}
/* hovering over link style */
a:hover {
     color: #ff0000; /* red */
}
a:active {
     text-decoration: none;
     color: #000000; /* black */
}

/* Class for Validation, Copyright, and Return to Course Page */     
.validation {
     text-align: center;
}

/* Footer area smaller text only class */
.disclaimer {
     font-size: .75em;
     text-align: center;
}