@charset "UTF-8";

/* CSS Document Author: Edith Harvey
Purpose: Style Sheet for Course: ITWP 1000 - Web Project #1 & #2
File: project2.css */

/* Grid Layout - 2 Columns - Header, Nav, Nav2, Main, Footer */
/* If border around entire page is wanted add border: to grid-container */
/* For project 2 added a nav2 part of grid to be able to add the needed bottom border required */
.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 / 3;
     grid-column: 1 / 2;
}
.nav2 {
     grid-row: 3 / 4;
     grid-column: 1 / 2;
     text-align: center;
     border-right: 1px solid #009900;
     border-right: double;
     width: 100%;
}
main {
     grid-row: 2 / 3;
     grid-column: 2 / 3;
     border: double;
}
footer {
     grid-row: 3 / 4;
     grid-column: 2 / 3;
}

/* added adjustments to header, main, nav and footer as requested for project */
/* adds 1 pixels of padding around the header and main elements, sets the width to 100%. 10px was too much for the grid layout chosen.  It wanted to side scroll the page then. */
header, main {
     padding: 1px;
     width: 100%;
}
/* adds 1 pixels of padding around the nav elements and displays a 1 pixel solid black border beneath the nav element, sets the width to 100%. 10px was too much for the grid layout chosen.  It wanted to side scroll the page then. */
nav {
     padding: 1px;
     border-bottom: 1px solid #009900;
     width: 100%;
     border-bottom: double;
}
/* adds 10 pixels of padding above the footer element only. Per our discussion in the help section, I did remove the border that you had in place here because of the border already on the main section of this page from before. Centers the footer text, sets the width to 100%. */
footer {
     padding: 10px 0px 0px 0px;
     width: 100%;
     text-align: center;
}

/* 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%;
}

/* responsive image class */
img.responsive {
     max-width: 600px; /* sets the max image width to 600 pixels */
     height: auto;
     width: 100%;
     display: block;
     margin-left: auto;
     margin-right: auto;
}

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

table {
     padding: 2px;
     width: 100%;
     
}

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 */
}

/* Fig captions smaller text */
.disclaimer {
     font-size: .75em;
}

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

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

/* You Tube API player CSS from Professor */
#player {
     margin: auto;
     border: 3px solid #333;
     padding: 10px;
     display: block;
     margin-left: auto;
     margin-right: auto;
   }