/* William Gutshall/ 
   IT270 | Final Project
   */


/*EMPTY: All of the formatting was removed and localized but left it for future changes.*/
header {
}

/*Body: Default font size and style for main block of data for the site. I inlcuded a list that will cover all of the browsers*/
body {
  font-family: Segoe UI, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

/*Navigation: All of the unordered lists used in the navigation will use a consistant format that can all be modified
  at this location at the same time. This provides consistancy and makes page easy to maintain*/
ul {
  text-align: center;
  margin: 0;
  padding: 0;
  width: 675px;
  height: 40px;
  background-color: #F39633;
}

/*Navigation: This places all of the navigation bars in the same location for consistancy. It also makes it easier to 
  maintain because the formats can all be changed here at the same time*/
header nav {
  float: right;
  margin-right: 5px;
}

/*Navigation: This specifies formats for the list feature as a sub division of the navigation division. This places all of the
  lists inline with each other and specifies the font size. This is located here for quick and easy changes that maintain consistency*/
header nav li {
  display: inline;
  font-size: 20px;
}

/*Footers: This gives a consistent footer that is the same on all the pages. The lightgray color stands out from the background images and 
  the black text is easy to see and read on the background color. */
footer {
  background-color: lightgray;
  border: solid 1px black;
  padding: 10px;
  border-radius: 3px;
}

/*Body: sets default parameters for the body of the site*/
.container {
  width: 989px;
  margin: 0 auto;
  padding: 5px;
}

/*Centering class: This is a re-usable designation used to center an image*/
.centered-image {
  margin: 0px auto;
}

/*Centering class: This is a re-usable designation used to center the text used with an image*/
.centeredtext-image {
  margin-left: 400px;
  margin-bottom: 25px;
}

/* Title for Wiring page: keeps black text inline with image for good visability and easy page recognition*/
.WiringTitle{
  display: inline;
  font-size: 75px;
  font-weight: bold;
  color: #000000;
  border: none;
  padding-left: 200px;
}

/* Title for Hole Tapping page: keeps black text inline with image for good visability and easy page recognition*/
.TappingTitle{
  display: inline;
  font-size: 75px;
  font-weight: bold;
  color: #000000;
  border: none;
  padding-left: 175px;
}

/*Label for Tapping Kit Table: keeps black text inline with image for good visability and easy table recognition*/
.HoleTappingTitle{
  display: inline;
  font-size: 75px;
  font-weight: bold;
  color: #000000;
  border: none;
  padding-left: 125px;
}

/*Label for Tapping Tool Table: keeps black text inline with image for good visability and easy table recognition*/
.TapToolTitle{
  display: inline;
  font-size: 75px;
  font-weight: bold;
  color: #000000;
  border: none;
  padding-left: 350px;
}

/* Title for Connector page: keeps black text inline with image for good visability and easy page recognition*/
.ConnectTitle{
  display: inline;
  font-size: 75px;
  font-weight: bold;
  color: #000000;
  border: none;
  padding-left: 200px;
}

/*Label for Wire Nut Table: keeps black text inline with image for good visability and easy table recognition*/
.ConnectionTitle{
  display: inline;
  font-size: 75px;
  font-weight: bold;
  color: #000000;
  border: none;
  padding-left: 200px;
}

/*Label for Wire Connectors Table: keeps black text inline with image for good visability and easy table recognition*/
.ConnectionTitle2{
  display: inline;
  font-size: 75px;
  font-weight: bold;
  color: #000000;
  border: none;
  padding-left: 325px;
}

/*Order Form: Provides a consistant format for the order form that can be changed all at once in one location*/
.FormOrder{
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #000000;
  border: none;
}

/*Video Placement: This is used to place technical videos in the center of the page for easy viewing*/
.CenterVideo {
  text-align: center;
}

/*Wiring Table Block: Format a wood color box around chart to allow better contract for better viewing.
  Each one is unique because of the size and spacing of each table*/
.WoodChartWiring {
  background-color: #F4A460;
  border: solid 1px black;
  padding: 10px;
  border-radius: 3px;
  text-align: center;
  margin: auto;
  width: 1000px;
  height: 400px;
  white-space: nowrap;
}


/*Hole Tapping Kit Table Block: Format a wood color box around chart to allow better contract for better viewing.
  Each one is unique because of the size and spacing of each table*/
.WoodTapingKit {
  background-color: #F4A460;
  border: solid 1px black;
  padding: 10px;
  border-radius: 3px;
  text-align: center;
  margin: auto;
  width: 650px;
  height: 675px;
  white-space: nowrap;
}

/*Hole Tapping Tool Table Block: Format a wood color box around chart to allow better contract for better viewing.
  Each one is unique because of the size and spacing of each table*/
.WoodTapingTool {
  background-color: #F4A460;
  border: solid 1px black;
  padding: 10px;
  border-radius: 3px;
  text-align: center;
  margin: auto;
  width: 550px;
  height: 325px;
  white-space: nowrap;
}

/*Wire Nut Table Block: Format a wood color box around chart to allow better contract for better viewing.
  Each one is unique because of the size and spacing of each table*/
.WoodWireNuts {
  background-color: #F4A460;
  border: solid 1px black;
  padding: 0px;
  border-radius: 3px;
  text-align: center;
  margin: auto;
  width: 925px;
  height: 325px;
  white-space: nowrap;
}

/*Wire Connectors Table Block: Format a wood color box around chart to allow better contract for better viewing.
  Each one is unique because of the size and spacing of each table*/
.WoodConnectors {
  background-color: #F4A460;
  border: solid 1px black;
  padding: 0px;*/
  border-radius: 3px;
  text-align: center;
  margin: auto;
  width: 800px;
  height: 700px;
  white-space: nowrap;
}

/*Navigation bar: This sets the color of the navigation bar text to light blue which is easy to read on top of the dark gray background & all of the navigation
  bars on the tool pages will have the same look*/
.Navbar {
  overflow: hidden;
  background-color: #FFEBCD;
  color: #FC031A;
  font-family: Arial;
}

/* Navigation Bar:Sets the text details for the links in the navigatin bar */
.Navbar a {
  float: left;
  font-size: 16px;
  color: #FC031A;
  text-align: center;
  padding: 14px 16px;
}

/*Navigation bar: This is a specific instance when the mouse pointer is hovered over the navigation bar. It will make any text that is hovered over turn
  to green. This is a user friendly choice because it makes it very easy for the user to see what link they are on. It is also consistent throughout all
  of the tool pages*/
.Navbar a:hover {
  color: #C222F9;
}

/* DropDown */
.dropdown {
  float: left;
  overflow: hidden;
}

/* DropDown */
.dropdown .DButton {
  margin: 0; 
  font-size: 16px; 
  border: none;
  outline: none;
  color: #FC031A;
  padding: 14px 16px;
  background-color: inherit;

}

/*Navbar links when hovering will be green */
.navbar a:hover, .dropdown:hover .DButton {
  color: #C222F9;
}

/* Dropdown Links*/
.DropDownText {
  display: none;
  position: absolute;
  background-color: #FFEBCD;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* DropDown Links */
.DropDownText a {
  float: none;
  color: #FC031A;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* DropDown text setting when hovering: This is needed for the text to show up in the drop down when being hovered over it; */
.dropdown:hover .DropDownText {
  display: block;
}


/*Navigation bar: This sets the color of the navigation bar text to red which is easy to read on top of the brown background & all of the navigation
  bars on the tool pages will have the same look*/
/*.NavBar a{
    color: #FC031A;
}

/*Navigation bar: This is a specific instance when the mouse pointer is hovered over the navigation bar. It will make any text that is hovered over turn
  to purple. This is a user friendly choice because it makes it very easy for the user to see what link they are on. It is also consistent throughout all
  of the tool pages*/
/*.NavBar a:hover {
  color: #C222F9;
}