/* William Gutshall/ 
   IT270 | Final Project
   */

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

/*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 white;
  padding: 10px;
  border-radius: 3px;
}

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

/*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: 600px;
  height: 40px;
  background-color: #767575;
}

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

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

/*Electrical Title: This is the formating for the title of the menu page. It is a easy to read style with white text on dark background. It stands out and easy to recognize*/
.PageTitle{
  font-style: cursive;
  color: #FFFFFF;
  font-size: 50px;
  border-style: none;
  padding-left: 750px;
}

/*Fabrication Title: This is the formating for the title of the menu page. It is a easy to read style with white text on dark background. It stands out and easy to recognize.
It is consistent with the Electrical title page*/
.PageTitleFab{
  font-style: cursive;
  color: #FFFFFF;
  font-size: 50px;
  border-style: none;
  padding-left: 625px;
}

/*Index Page: This is used for the call to action image block used to decide between fabrication and electrical sub-menus. This one is for Fabrication*/
.border1 {
  margin-left: auto;
  border-style: double;
  border-width: 10px;
  padding-left: 75px;
  padding-right: 50px;
}

/*Index Page: This is used for the call to action image block used to decide between fabrication and electrical sub-menus. This one is for Electrical. There are two because there is
a slight difference in spacing*/
.border2{
  border-style: double;
  border-width: 10px;
  padding-left: 75px;
  padding-right: 75px;
}


/*Electrical Page: Connector Navigation image declarations*/
.border3 {
  border-style: double;
  color: #000000;
  border-width: 10px;
  padding-left: 25px;
  padding-right: 0px;
}

/*Wiring Page: Connector Navigation image declarations*/
.border4{
  border-style: double;
  color: #000000;
  border-width: 10px;
  padding-left: 25px;
  padding-right: 0px;
}

/*Fabrication page: This provides the border for the call to action image that is used to navigate from fabrication page to hole tapping tool page*/
.borderFab{
  margin-left: 200px;
  text-align: center;
  border-style: double;
  color: #000000;
  border-width: 10px;
  padding-left: 625px
  padding-right: 50px;
}

/*Electrical page: This provides the border for the call to action image that is used to navigate from Electrical page to wiring tool page*/
.DarkMenu{
  color: #ADFF2F;
  text-align: center;
}

/*About and AboutProject: This is used for the title of the About and About Project menu pages. This one is uses a white font for the dark background for easy readability.*/
.AboutTitle{
  color: #FFFFFF;
  text-align: center;
  font-size: 40px;
}

/*About and AboutProject: These are used for the large text divisions. This one is uses a white font for the dark background for easy readability. The Highlight font
size is slightly larger than the text font to make the catagories stand out from the rest of the text*/
.AboutHighlight{
  color: #FFFFFF;
  font-size: 20px;
}

/*About and AboutProject: These are used for the large text divisions. This one is uses a white font for the dark background for easy readability. The Highlight font
size is slightly larger than the text font to make the catagories stand out from the rest of the text*/
.AboutText{
  color: #FFFFFF;
  font-size: 15px;
}

/*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: #474545;
  color: #09F9F9;
  font-family: Arial;
}

/* Navigation Bar:Sets the text details for the links in the navigatin bar */
.Navbar a {
  float: left;
  font-size: 16px;
  color: #09F9F9;
  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: #44E827;
}

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

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

}

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

/* Dropdown Links*/
.DropDownText {
  display: none;
  position: absolute;
  background-color: #474545;
  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: #09F9F9;
  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;
}