/* set some browser defaults to zero and make some defaults */
*{
  margin:0;
  padding:0;
  border: 0;
  box-sizing: border-box;
  font-family: arial, tahoma, sans-serif;
}

html{
  height: 100%;
}

body{
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
}


h1,h2,h3,h4,h5,h6{
  font-family: times new roman, times, serif;
  color: darkblue; 
  margin: 10px 5px 0px 5px;
  padding: 3px;
}

p, th, td, li, select, input, pre, span, legend.updateLegend{
  font-size: 20px;
  color: darkblue; 
}

p,pre, span,legend.updateLegend{
  font-family: arial, tahoma, sans-serif;  
  /* color: #444; */
  color: darkblue; 
  margin: 0px 5px;
  padding: 3px;
  text-align: left;
}

hr {
  border: solid 1px black;
}

nav {
  background: darkblue;  
  width: 100%;
}

nav .menu {
    text-align: center;
    padding: 5px;
    text-decoration: none;
}

/* To make the top padding of the top menu item 10px for a more balanced look as the other items have a total of 5px +5px between them*/
nav .menu:nth-child(1) {
 padding-top: 10px; 
}

/* To make the bottom padding of the bottom menu item 10px for a more balanced look as the other items have a total of 5px +5px between them*/
nav .menu:nth-last-child(1) {
 padding-bottom: 10px; 
}

a.menu {
    color: gold;
    text-decoration: none;
    transition: .3s ease-in-out;
}

a.menu:hover {
    color: darkblue;
    background-color: gold;
}



input[type="submit"], input[type="email"], input[type="password"], input[type="text"], button{
    border-radius:4px;
    border: 1px solid black;  	
    border-style: inset;
    box-shadow: 2px 2px 1px grey;
    padding: 5px ;
    margin: 2px 5px 2px 5px;
    width: 400px;
}

/*for the "return" button on addToTables.php, invoked when trying to add a duplicate entry  */
.return{
    display: block;
    border-radius:4px;
    border: 1px solid black;  	
    border-style: inset;
    box-shadow: 2px 2px 1px grey;
    padding: 5px ;
    margin: 30px 5px;
    width: 400px; 
    text-decoration: none;
    background-color: lightgray;
}

main{
  margin-bottom: 30px;
}

.order {
  margin-bottom: 40px;
}

.picker li{
  width: 400px;
	display: block;
	padding: 9px;
	border:1px solid #DDDDDD;
  border-radius: 3px;
  margin: 10px;
}

.picker select, .picker input{
   width: 380px; 
}

input[type="number"]{
  width: 380px;
}

.picker li > label {
  display: block;
	float: left;
	margin-top: -19px;
  background: #FFFFFF;
	height: 14px;
	padding: 2px 5px 2px 5px;
	color: #B9B9B9;
  font-size: 0.8em;
}

input.delete{
  width: 100px;
}


/* To target the "add column to table" buttons on addToTable.php */
input.addColumn{
  width: 380px;
  margin: 0 0 5px 22px;
}

article.addItems{
  width: 380px;
}


/* Target the articles on the addToTables.php script */
.addTablesArticle{
  display: inline-block;
  vertical-align: top;
  width: 450px;
  border: 1px solid #444;
  border-radius: 3px;
  margin: 20px 10px;
  padding: 5px;
}

.addTablesList {
  list-style-type: none;
  margin: 0 0 0 15px;	
}

/* Style the search page */
.searchInput {
  border: 0px;
}

input.searchSubmit {
  margin-left: 12px;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 3px;
    text-align: left;
    vertical-align: top;
}

table {
  margin: 10px;
}

/* To make the cursor change to a pointer when over the table headers in search.php */
#myTable th{
  cursor: pointer;
}

li {
  padding: 3px 10px;
}

main {
  color: darkblue;
}


nav {
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* Classes for login page */
  .loginContainer { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.left{
	flex: 1 0 auto;
}
  

.footer{
	flex-shrink: 0;
}

fieldset.searchFieldset{
  display: inline;
  margin: 5px;
  padding: 5px;
  border: solid 1px lightgray;
  border-radius: 4px;
}

div.updateLine{
  display: inline-block;
  margin-bottom: 15px;
  border-radius: 4px;
  box-shadow: 4px 4px 5px #888;
  }

div.searchSubmit {
  box-shadow: 4px 4px 5px #ccc;
 /* border-left: 1px #999 solid;
  border-top: 1px #999 solid;*/
  border-radius: 4px;
  background-color: #ffd;
  padding: 10px 0;
  margin: 20px 0;
}

.searchSubmit *{
  background-color: #ffd; 
}

.searchSubmit {
  background-color: #ffd !important; 
}

main.homeMain{
  max-width: 600px;
}

article.searchForm{
  display: flex;
  justify-content: center;
}

/* styling the table displaying the details of item about to be deleted */
td.item{
  font-weight: bolder;
}

table.delete{
  border: none;
}

tr.delete, td.delete{
  border: none;
}

/*div.updated{
  border: 1px solid #999;
  border-radius: 4px;
  padding: 10px;
  margin: 5px;
}*/

.errorAddTables{
  color: red;
  font-weight: 600;
}

.home {
  font-size: 1.2rem;
}

/*To make the "Add Bar code" link on the Barcodes page appear like a button*/
a.addBarcode{
    border-radius:4px;
    border: 1px solid black;  	
    border-style: inset;
    background: lightgray;
    box-shadow: 2px 2px 1px grey;
    padding: 5px ;
    margin: 5px 10px 5px 10px;
    width: 400px;
    display: block;
    text-decoration: none;
}  

/*  *** Tablet ***  */
@media screen and (min-width: 600px)
  and (max-width: 991px){

      p, th, td, li, input, select, pre, span, legend.updateLegend{
      font-size: 0.9rem;
    }
    
}
    
      /* To adjust the size of the label above the drop down picking list in home.php "order by" and "asc/desc" */
      .picker li > label {
      font-size: 0.9em
    }
    
  /* To make the nav links a horizontal bar*/  
  nav {
  flex-direction: row; 
  gap: 20px;    
}
    
  nav .menu {
  padding: 10px;
  align-self: stretch
    }  
  
    
  
/* To cancel out some extra padding added below the last menu item in the mobile version */    
  nav > .menu:nth-last-child(1) {
  margin: 0 0 0 auto;
    
}
    
    
    
    



/*  *** Desktop ***  */
@media screen and (min-width: 992px)

  {  
    p, th, td, li, input, select, pre, span, legend.updateLegend{
      font-size: 0.8rem;
    }
    
    /* To adjust the size of the label above the drop down picking list in home.php "order by" and "asc/desc" */
    .picker li > label {
      font-size: 1em
    }
    
  /*This to make the ASC/DESC order pickers appear inline with the drop down picker to which they apply */
  .order{
  display: flex;
  align-items: center;
  margin-bottom: 5px;  
}

  /* To make the nav links a horizontal bar*/  
  nav {
  flex-direction: row; 
  gap: 20px;
}
    
  nav .menu {
    padding: 10px;
    }
  
      
  
  /* To cancel out some extra padding added below the last menu item in the mobile version */  
  nav > .menu:nth-last-child(1) {
  margin: 0 0 0 auto;
  
  
}
    

    
   }