/*********************************************************************
CSCI 4750
Group 3 Codist Technologies
Team Members: Matthew Doerr, Alexander Hornick, Mikayla Webber, Tiasha
Gray-Ramey 
*********************************************************************/
input:required:focus {
  border: 3px #006699;

}
body {
  /******************************************************************
  This contains the font, Internet Explorer fall back options and 
  the background color for all of the sites
  ******************************************************************/

  font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
  /* IE Fallback */

}


  /******************************************************************
  Below is the login page class information.
  ******************************************************************/
.loginPage {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  width: 285px;
  margin: -140px 0 0 -182px;
  padding: 40px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  padding-bottom: 3px;
}

.loginPage h2 {
  margin: 0 0 20px;
  line-height: 1;
  color: #0088BA;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.loginPage input {
  outline: none;
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  color: #ccc;
  font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
}

.loginPage input {
  color: #333;
}

.loginPage input:focus {
  color: #333;
  border: 1px solid #0088BA;
}

.loginPage button {
  cursor: pointer;
  background: #0088BA;
  width: 100%;
  padding: 10px 15px;
  border: 0;
  color: #fff;
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;
}

.loginPage button:hover {
  background: #369cb8;
}
  /******************************************************************
  Below is the button information for the login page. It is a submit
  button that has movement, color changes, and alignment changes.
  ******************************************************************/
.button {
  border-radius: 4px;
  background-color: #0088BA;
  border: none;
  color: #fff;
  text-align: center;
  font-size: 15px;
  padding: 5px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
/******************************************************************
Below is the code for the red and blue button class which will be 
for all of the buttons in the program including the submit, next,
cancel, etc. 
******************************************************************/
.blueButton {
  -moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
  -webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
  box-shadow: inset 0px -3px 7px 0px #29bbff;
  background-color: #0088BB;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #0088BB;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-family: Arial;
  font-size: 15px;
  padding: 8px 8px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #263666;
}

.blueButton:hover {
  background-color: #369cb8;
}

.blueButton:active {
  position: relative;
  top: 1px;
}

.redButton {
  -moz-box-shadow: inset 0px -3px 7px 0px #8a2a21;
  -webkit-box-shadow: inset 0px -3px 7px 0px #8a2a21;
  box-shadow: inset 0px -3px 7px 0px #8a2a21;
  background-color: #c62d1f;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #d02718;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  padding: 8px 20px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #810e05;
}

.redButton:hover {
  background-color: #f24437;
}

.redButton:active {
  position: relative;
  top: 1px;
}



/******************************************************************
Below is the code for the main menu (for administrators and 
employees)
******************************************************************/
.drop-down-menu a {
  margin-left: 35%;
  margin-right: 40%;
  display: inline-block;
  text-decoration: none;
  color: #f8f8f8;
  font-weight: bold;
  width: 200px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  padding: 40px;
  padding-top: 15px;
  padding-bottom: 15px;
  background: rgba(0,136,187,0.55);
  background: -moz-linear-gradient(top, rgba(0,136,187,0.55) 0%, rgba(0,136,187,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,136,187,0.55)), color-stop(100%, rgba(0,136,187,1)));
  background: -webkit-linear-gradient(top, rgba(0,136,187,0.55) 0%, rgba(0,136,187,1) 100%);
  background: -o-linear-gradient(top, rgba(0,136,187,0.55) 0%, rgba(0,136,187,1) 100%);
  background: -ms-linear-gradient(top, rgba(0,136,187,0.55) 0%, rgba(0,136,187,1) 100%);
  background: linear-gradient(to bottom, rgba(0,136,187,0.55) 0%, rgba(0,136,187,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088ba', endColorstr='#0088ba', GradientType=0 );
}

.subnavbar a {
  display: block;
  color: #ddd;
  background: #007aa7;
  }
/******************************************************************
Below is the code for the findOrder.php page. It includes the css
for the form to search for the orders
******************************************************************/
.findOrder input[type=text] {
  width: 95%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}


.findOrder input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.findOrder input[type=submit],
.findOrder input[type=button] {
  float: right;
  margin: -20px 20px 10px 0px;
}

.findOrder {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  width: 40%;
  margin: 0 auto;
  box-shadow: 1px 1px 5px #888888;
}
/******************************************************************
Below is the code for the return order page (Orders->Return Order)
It includes two text fields and two required select drop-down 
menus 
******************************************************************/
.returnOrder input[type=text] {
  width: 95%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}

.returnOrder input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.returnOrder input[type=submit],
.returnOrder input[type=button] {
  float: right;
  margin: -20px 20px 10px 0px;
}

.returnOrder {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  width: 40%;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}

select {
  width: 40%;
  padding: 12px 20px;
  margin: auto 0;
  border-radius: 4px;
  text-align: left;
  font-size: 16px;
}
/******************************************************************
Below is the code for the order materials page (Inventory-> Order
Materials). It includes a required drop-down menu for the user 
to select a supplier and then it displays a next or cancel button. 
******************************************************************/
.orderMaterials input[type=submit],
.orderMaterials input[type=button] {
  float: right;
  margin: -20px 20px 10px 0px;
}

.orderMaterials {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  width: 40%;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}

.returnTitle {
  text-align: center;
}
/******************************************************************
Below is the styling for the submit order page which displays the
material id, cost, and quantity. 
******************************************************************/
.submitOrder input[type=text] {
  width: 95%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}


.submitOrder input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.submitOrder input[type=submit],
.submitOrder input[type=button] {
  float: right;
  margin: -20px 20px 10px 0px;
}

.submitOrder {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  width: 40%;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}
/******************************************************************
Below is the styling for the submit order table which displays the
material id, cost, and quantity. 
******************************************************************/
#form.form-horizontal,
body {
  background-color: #C3E6F4 !important;
}

html {
  background-color: #C3E6F4;
}

#inventory.form-control {
  background-color: #F8F8F8;
  width: 690px;
  border-color: #909090;
}

span.input-group-addon {
  background-color: #E0E0E0;
  border-color: #909090;
}

button.btn.btn-primary {
  background-color: #0088bb;
  border-color: #0088bb;
  width: 100px;
  align: right;
}

body {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #3b3b3b;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  width: 100%;
  background-color: #C3E6F4;


}

.wrapper {
  margin: 0 auto;
  padding: 40px;
  width: 70%;
}

table {
  margin: 0 0 40px 0;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: table;
}

@media screen and (max-width: 580px) {
table {
    display: block;
  }
}

tr {
  display: table-row;
  background: #f6f6f6;
}

tr:nth-of-type(odd) {
  background: #e9e9e9;
}

 th {
  font-weight: 900;
  color: #ffffff;
  background: #0088bb;
}

@media screen and (max-width: 580px) {
  tr {
    padding: 8px 0;
    display: block;
  }
}

td {
  padding: 6px 12px;
  display: table-cell;
}

@media screen and (max-width: 580px) {
  td {
    padding: 2px 12px;
    display: block;
  }
}
/******************************************************************
Below is the styling for the confirm order page which displays the 
material ID and the cost along with an order confirmed message
******************************************************************/
.confirmOrder input[type=text] {
  width: 95%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}

.confirmOrder input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.confirmOrder input[type=submit],
.confirmOrder input[type=button] {
  float: right;
  margin: -20px 20px 10px 0px;
}

.confirmOrder {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}
/******************************************************************
Below is the styling for the add employee page which has the user 
select the type of employee they are adding and then has multiple
fields for the user to enter information into.
******************************************************************/
.addEmployee input[type=text] {
  width: 95%;
  padding: 12px 20px;
  margin: 8px 0;
  margin-left: 15px;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}

.addEmployee input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.addEmployee input[type=submit],
.addEmployee input[type=button] {

  margin: 0px 20px 10px 0px;
}

.addEmployee {
  margin-left: 15px;
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}

.addEmployeeHeader {
  text-align: center;
}

/******************************************************************
Below is the code for the manage suppliers page, it includes an 
add supplier button and table that displays an edit button, 
supplier id, and company name. 
******************************************************************/
.manageSuppliers input[type=text] {
  width: 95%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}

.manageSuppliers input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.manageSuppliers input[type=submit],
.manageSuppliers input[type=button] {
  margin: -20px 20px 10px 0px;
}

.manageSuppliers {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}
.editSupplier {
  text-decoration: none;
}

.manageSuppliersHeader {
  text-align: center;
}
h3, h4 {
  text-align: center;
}
/******************************************************************
Below is the code for enter order page which includes a drop down
menu and a text box which asks for the quantity of the order.
******************************************************************/
.enterOrder input[type=text] {
  width: 25%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}
.enterOrder input[type=email] {
  width: 25%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}

.enterOrder input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.enterOrder input[type=submit],
.enterOrder input[type=button] {
  float: right;
  margin: -20px 20px 10px 0px;
}

.enterOrder {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}

/******************************************************************
Below is the code for custom order page which includes a comment
field, buttons, submit fields, and two drop down menus.
******************************************************************/
.customOrder input[type=text] {
  width: 35%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}

.customOrder input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.customOrder input[type=submit],
.customOrder input[type=button] {
  float: right;
  margin: -20px 20px 10px 0px;
}

.customOrder {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}

.address {
  width: 35%;
  padding: 12px 20px;
  margin: auto 0;
  border-radius: 4px;
  text-align: left;
  font-size: 16px;
}
/******************************************************************
Below is the code for the gift order page which includes several 
drop down menus, text fields, and submit buttons.
******************************************************************/
.giftOrder input[type=text] {
  width: 35%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}
.giftOrder input[type=email] {
  width: 35%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}

.giftOrder input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.giftOrder input[type=submit],
.giftOrder input[type=button] {
  float: right;
  margin: -20px 20px 10px 0px;
}

.giftOrder {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}
/******************************************************************
Below is the code for the inventory sheet page which is a table 
that displays information on the current inventory in a table 
format.
******************************************************************/
.inventorySheet {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}
/******************************************************************
Below is the code for the record inventory screen which is a table 
that displays information on the current inventory in a table 
format. It also gives the user an option to manually update the 
inventory.
******************************************************************/
.inventory input[type=text] {
  width: 95%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}

.inventory input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.inventory input[type=submit],
.inventory input[type=button] {
  float: right;
  margin: -20px 20px 10px 0px;
}

.inventory {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}
/******************************************************************
Below is the code for the reports section which displays the key
indicator report, inventory report, and supplier report. It also 
gives the user the option to filter between the general report,
low inventory report, and out of stock report.
******************************************************************/
.reports input[type=text] {
  width: 95%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}

.reports input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.reports input[type=submit],
.reports input[type=button] {
  float: right;
  margin: -20px 20px 10px 0px;
}

.reports {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 1px 1px 5px #888888;
}

.reportsHeader {
  text-align: center;
}
/******************************************************************
Below is the code for any page with the div class content. It adds 
a background to each of the pages.
******************************************************************/
.content input[type=text] {
  width: 35%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
  text-align: left;
}

.content input[type=text]:focus {
  border: 1px solid #a8a8a8;
}

.content input[type=submit],
.content input[type=button] {
  margin: 0px 20px 10px 0px;
}

.content {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  margin: 0 auto;
  box-shadow: 1px 1px 5px #888888;
}




.editButton {
  -moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
  -webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
  box-shadow: inset 0px -3px 7px 0px #29bbff;
  background-color: #0088BB;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #0088BB;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  padding: 5px 5px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #263666;
}

.editButton:hover {
  background-color: #369cb8;
}

.editButton:active {
  position: relative;
  top: 1px;
}

.back {
  float:left;
}
.subnavbar a:hover {
color:white;
}