header {display: block;  padding: 50px; border-bottom: 5px rgba(255,255,255,0.5);}
h1, h2, h3 {font-weight: normal; color: white; margin: auto; text-align: center;}
h1 {padding:0.5em;}
/* Links for wines etc */
a {color:white; text-decoration:none;}
a:hover {
    font-weight:bold;
    color:#fff2e6;
}

nav {background-color: rgb(255,255,255); background-color: rgba(255,255,255, 0.4);
}
nav a {color: white; text-decoration: none;}
nav a:hover {color: #ddd;}
nav ul {
    display: block; 
    width: 100vw; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    position: relative;
}
nav ul li {
    display: inline-block; 
    text-align: center; 
    padding: 1em;
    width: 170px;
}
/* Fisrt level Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display: block;
	position: relative;
	left: -150px;
    background-color: rgb(255,255,255); background-color: rgba(255,255,255,0.2)
}
 
/* Second, Third and more levels	*/
nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px;
}
/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute; 
	top: 60px; /* the height of the main nav */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
/* Move table out of the way on hover */
nav ul li:hover + .alignleft {
    margin-top:300px;
}
/* format search results lists */
.search-results-list {
    list-style-type: none;
}
.search-results-item: hover {
    font-weight: bold;
}

table, th, td {
    border: 2px white;
    border-collapse: collapse;
    padding: 5px;
    color: white;
    font-family: "Calibri (Detail)",Calibri,sans-serif;
    opacity: 1;
}
th, td {
    text-overflow:ellipsis;
    overflow:visible;
    vertical-align:text-bottom;
}
.error {
    color:yellow;
    vertical-align:text-top;
}
.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.alignleft {
    text-align: left;
    margin-left: 5%;
    margin-right: auto;
}

footer {position: absolute; left: 0; bottom: 0;}

p {margin-bottom: 1em; }

body {font-size: 1.2em; font-family: "Calibri (Detail)",Calibri, sans-serif; background-image: url('images/Cellar.jpg');}
input, label, select, textarea {margin-top: 0.5em; padding: 0.2em; background-color:transparent; color: white; font-family: inherit; font-size:inherit;}
label {display:inline-block; width:8em;}
/* to align the top of a label with its textarea */
label textarea {
    vertical-align: text-top;
}
/* to use with label over input */
.overinput {
    width:16em;
}
option {
    background-color:#1a0000;
    color: white;
}
optgroup[label] {
    background-color:#1a0000;
}
input[type="submit"] {margin-left: 15em; width: auto; padding: 0.5em 1em; clear: both; font-size: 1em;}
input[type="submit"]:hover {cursor:pointer;}
form {overflow: auto; clear: both; display: block;}
blockquote {display: table; margin-bottom: 1em; border-bottom: 1px solid #ccc; padding: 0.5em;}
blockquote p {display: table-cell; width: 90%; vertical-align: top;}
blockquote form {display: table-cell; width: 10%;}
/* The sidebar menu */
.sidenav {
  height: 60%; /* Full-height: remove this if you want "auto" height */
  width: 180px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 70px; /* Stay underneath the header */
  left: 0;
  background-color: rgba(255,255,255,0.2);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #cccccc;
}

/* Style page content */
.main {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* This class used to resize the button images */

.img-resize img {
    width: 25px;
    height: 25px;
}

.img-resize-disable img {
    width: 25px;
    height: 25px;
    opacity: 0.5;
}

.img-resize {
    background-color: transparent;
    margin-left: 50px;
    border: none;
    /* cursor: pointer; */
}

.img-resize-disable {
    background-color: transparent;
    margin-left: 50px;
    border: none;
    /* cursor: pointer; */
}

.img-resize  img:hover {
    width: 27px;
    height: 27px;
    margin-left: -2px;
}

/* this so input box is the right size for stocktake */

input[type="number"] {
    width:50px;
    text-align:center;
}

/* class for input labels */

.inputLabel {
    color: white;
    background-color: transparent;
    margin-top: 0.5em;
    padding: 0.5em;
    font-size: 1em;
    font-family: inherit;
}

/* class for space at the top of the form */

.topSpace {
    padding-top: 50px;
}

/* class for input form */

.editForm {
    display: block;
    margin-left: 30%;
    margin-right: auto;
    color: white;
    background-color: transparent;
}