header, footer {/*common attributes for both the header and footer*/
  background-color: white;
  border: solid 1px black;
  padding: 10px;
}

header {/*header attributes unique to the header*/
  height: 200px;
  background-color: #1b0896;
}

footer {/*footer attributes unique to the footer*/
  border-radius: 3px;
  text-align: center;
}

body {/*body attributes*/
  font-family: Arial, sans-serif;
  font-size: 15px;
  background-color: #D3D3D3;
}

table {/*table structure*/
  border-collapse: collapse;
  border-spacing: 0;
  margin-left: auto;
  margin-right: auto;
  width: 750px;

}

table, th, td {/*table structure*/
  border: 1px solid black;
  padding: 5px;
  height: 35px;
}

ul {
  overflow: hidden;
  background-color: #f1f1f1;
}

a {/*changing font to bold*/
  font-weight: bold;
}

li a {/*normal coloring of the nav menu*/
  display: block;
  color: #000;
  text-decoration: none;
}

li a:hover {/*controls the changing of the background & font color when a mouse is run over the nav area*/
  background-color: black;
  color: white;
}

h1 {/*text sizing and stucture*/
  font-size: 30px;
  text-align: center;
}

h2 {/*text sizing and structure*/
  font-size: 20px;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
}

.imgleft {/*floats an image left and sets hard parameters for the image, will ensure all images are the same shape*/
  float: left;
  border: solid 1px #444;
  border-radius: 2px;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

.logo {/*attributes for the logo class*/
  display: block;
  margin-left: 18%;
  margin-right: 20%;
  height: 200px;
}

#nav {/*nav ID tag to center and hard code a width to the nav box*/
  width:750px;
  margin:0 auto;
  padding: 0;
  list-style:none;
  font-size: 20px;
  font-weight:bold;
}

#nav li {
  float: left;
}

#nav a {
  display:block;
  text-align:center;
  width:150px;
  text-decoration:none; 
}

#description {/*images are all left on the website, this ID tag enables anything needed to be to the right of the pictures to be padded
                out 200px*/
  margin-left: 200px;
  width: 500px;
  height: 170px;
}

.container {
  margin: 0 auto;
  background-color: white;
  border: solid 1px black;
  padding: 5px;
}

.bordered-image {/*Gives any image with this class a border around it*/
  border: solid 1px #444;
  border-radius: 2px;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

.coupon {/*Gives the coupon class a dashed box look*/
  border-style: dashed;
  font-size: 50px;
  text-align: center;
  color: black;
  background-color: #1b0896;
}

.price {
  font-size: 30px; /*Font size override for product pages so that the price will be larger*/
}