html {
	height: 100%;
}

/* background-image: url("images/background.gif"); */

body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	color: black;
	background-color: #ffffc0;
	font-family: 'Century Gothic', Arial;
	font-weight: normal;
	-webkit-print-color-adjust: exact !important;
}

hr {
	color: #861f42;
}

h1 {
	font: bold 24px;
}

h2 {
	font: bold 20px;
}

h3 {
	font: bold 16px;
}

th {
	font: bold 14px;
	background-color: navy;
	color: white;
	border-right: 1px solid white;
}

fieldset {
	border: 2px solid navy;
	padding: 5px;
	-moz-border-radius:5px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
}

a {
	text-decoration: none;
	font-family: 'Century Gothic', Arial;
	color: navy;
}

a:hover {
	text-decoration: none;
	font-family: 'Century Gothic', Arial;
	color: red;
}

.sidebar {
	margin: 0;
	padding: 0;
	width: 60px;
	background-color: #0070c0;
	position: fixed;
	height: 100%;
	overflow: auto;
}

div.mainpage {
	margin-left: 60px;
	padding: 1px 20px;
	height: 100%;
}

.title {
	color: #861f42;
	font: bold 48px Arial;
}

.pagetitle {
	color: navy;
	font-weight: bold;
	font-size: 36px;
	font-family: 'Century Gothic', Arial;
	text-align: left;
	height: 60px;
	padding-left: 30px;
}

.subtitle {
	color: navy;
	font: bold 22px Arial;
}

.pagebuttons {
	padding-left: 10px;
}

.box-text {
	width: 360px;
	padding: 2px;
	font-family: 'Century Gothic', Arial;
}

.box-search {
	width: 180px;
	padding: 2px;
	font-family: 'Century Gothic', Arial;
}

.box-number {
	width: 180px;
	padding: 2px;
	text-align: right;
	font-family: 'Century Gothic', Arial;
}

.border-black {
	border: 1px solid black;
}

.border-red {
	border: 2px solid red;
}

.sbox {
	width: 180px;
	padding: 2px;
	border: 1px solid black;
	font-family: 'Century Gothic', Arial;
}

.nbox {
	width: 180px;
	padding: 2px;
	border: 1px solid black;
	text-align: right;
	font-family: 'Century Gothic', Arial;
}

.nebox {
	width: 180px;
	padding: 2px;
	border: 2px solid red;
	text-align: right;
	font-family: 'Century Gothic', Arial;
}

.selbox {
	width: 250px;
	padding: 2px;
	border: 1px solid black;
	text-align: left;
	font-family: 'Century Gothic', Arial;
	height: 300px;
}

.selbox150 {
	width: 250px;
	padding: 2px;
	border: 1px solid black;
	text-align: left;
	font-family: 'Century Gothic', Arial;
	height: 150px;
}

.selbox150e {
	width: 250px;
	padding: 2px;
	border: 2px solid red;
	text-align: left;
	font-family: 'Century Gothic', Arial;
	height: 150px;
}

.selbox225 {
	width: 250px;
	padding: 2px;
	border: 1px solid black;
	text-align: left;
	font-family: 'Century Gothic', Arial;
	height: 225px;
}

.tbox {
	width: 60px;
	padding: 2px;
	border: 1px solid black;
	text-transform: uppercase;
}

.lbox {
	width: 720px;
	padding: 2px;
	border: 1px solid black;
}

.lebox {
	width: 720px;
	padding: 2px;
	border: 1px solid red;
}

.tablebox {
	border-left: 5px solid #5b9bd5;
	border-top: 5px solid #5b9bd5;
	border-right: 5px solid #5b9bd5;
	background-color: white;
	padding: 4px;
}

.tabtitles {
	font-style: italic;
	font-family: 'Century Gothic', Arial;
}

.tableline {
	border-left: 2px solid navy;
}

.gheader {
	font: bold 14px;
	background-color: #a9d08e;
	text-align: center;
	color: black;
	font-weight: bold;
}

.yheader {
	font: bold 14px;
	background-color: #ffeb9c;
	text-align: center;
	color: black;
	font-weight: bold;
}

.rheader {
	font: bold 14px;
	background-color: #ec9191;
	text-align: center;
	color: black;
	font-weight: bold;
}

.xheader {
	font: bold 14px;
	background-color: #b5c6e7;
	text-align: center;
	color: black;
	font-weight: bold;
}

.gheadt {
	background-color: #a9d08e;
	height: 40px;
}

.yhead {
	background-color: #ffeb9c;
	font-size: 24px;
	font-weight: bold;
	font-family: 'Century Gothic', Arial;
}

.bhead {
	background-color: #0070c0;
	color: white;
	font-size: 30px;
	font-weight: bold;
	font-family: 'Century Gothic', Arial;
}

.bhead2 {
	background-color: #0070c0;
	color: white;
	font-size: 60px;
	font-weight: bold;
	font-family: 'Century Gothic', Arial;
}

.errbox {
	background-color: red;
	color: white;
}

.errmsg {
	font: bold 14px;
	background-color: red;
	color: white;
	text-align: center;
	font-weight: bold;
}

.txtmsg {
	font: bold 14px;
	background-color: orange;
	color: white;
	text-align: center;
	font-weight: bold;
}

.updmsg {
	font: bold 14px;
	background-color: green;
	color: white;
	text-align: center;
	font-weight: bold;
}

.msgbox {
	background-color: green;
	color: white;
}

.rotmsg {
	font: bold 14px;
	background-color: navy;
	color: white;
	text-align: center;
	font-weight: bold;
}

.emsg {
	color: red;
}

.emsgl {
	color: white;
}

.wtext {
	color: white;
}

.rcell {
	border-right: 1px solid navy;
}

.lcell {
	border-left: 1px solid navy;
}

.lfont {
	font-size: 20px;
}

.desh {
	background-color: #ec9191;
}

.allergy {
	background-color: red;
	color: white;
	font-size: 16px;
	font-weight: bold;
}

.intolerance {
	background-color: yellow;
	color: black;
	font-size: 16px;
	font-weight: bold;
}

#overflow {
	overflow-y: auto;
	height: 100%;
}

/* Buttons */
/* Buttons */

.mb {
	width: 160px;
	color: white;
	background-color: #5b9bd5;
	text-align: center;
	padding: 8px;
	font: 14px;
}

.mb:hover,
.mb:focus {
	width: 160px;
	color: white;
	background-color: navy;
	text-align: center;
	padding: 8px;
	font: 14px;
}

.mab {
	width: 160px;
	color: white;
	background-color: #ff6600;
	text-align: center;
	padding: 8px;
	font: 14px;
}

.mab:hover,
.mab:focus {
	width: 160px;
	color: white;
	background-color: #ff3300;
	text-align: center;
	padding: 8px;
	font: 14px;
}

.meb {
	width: 160px;
	color: white;
	background-color: #5b9bd5;
	text-align: center;
	padding: 8px;
	font: 14px;
}

.meb:hover,
.meb:focus {
	width: 160px;
	color: white;
	background-color: navy;
	text-align: center;
	padding: 8px;
	font: 14px;
}

.msb {
	width: 160px;
	color: white;
	background-color: #00cc66;
	text-align: center;
	padding: 8px;
	font: 14px;
}

.msb:hover,
.msb:focus {
	width: 160px;
	color: white;
	background-color: #006660;
	text-align: center;
	padding: 8px;
	font: 14px;
}

#filterBtn {
	width: 40px;
	height: 40px;
	cursor: pointer;
}

#filterBtn:hover {
	content: url('images/Milk_C.png');
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.btn {
	width: 30px;
	height: 30px;
	padding: 5px;
}

.btn:hover,
.btn:focus {
	text-decoration: none;
	cursor: pointer;
}

.ebtn {
	width: 20px;
	height: 20px;
	padding: 3px;
}

.ebtn:hover,
.ebtn:focus {
	text-decoration: none;
	cursor: pointer;
	cursor: pointer;
}

.datep {
	color: black;
	background-color: white;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.datep:hover,
.datep:focus {
	color: white;
	background-color: green;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.dates {
	color: white;
	background-color: navy;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.dates:hover,
.dates:focus {
	color: white;
	background-color: navy;
	width: 30px;
	height: 30px;
}

/* HREF button */

a.button {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;

	text-decoration: none;
	width: 160px;
	color: white;
	background-color: #5b9bd5;
	text-align: center;
	padding: 6px;
	font: 14px;
}

a.button:hover {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;

	text-decoration: none;
	width: 160px;
	color: white;
	background-color: navy;
	text-align: center;
	padding: 6px;
	font: 14px;
}

.pale {
	background-color: white;
}

.dark {
	background-color: #c1daf1;
}

/* Menu Line */

.menu {
	background-color: #0070c0;
	color: white;
	font: bold 14px Arial;
	padding: 8px;
	text-decoration: none;
}

/* Login Box */

#loginbox {
	position:absolute;
	top: 50%;
	left: 50%;
	width:50em;
	height:20em;
	margin-top: -10em; /*set to a negative number 1/2 of your height*/
	margin-left: -25em; /*set to a negative number 1/2 of your width*/
	border: 0px;
	background-color: #0070c0;
}

/* The Modal (background) */

.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */

.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 0px;
	border: 2px solid navy;
	overflow-y: scroll;
	width: 60%;
}

.modal-content-600 {
	background-color: #fefefe;
	margin: auto;
	padding: 0px;
	border: 2px solid navy;
	width: 600px;
}

.modal-content-800 {
	background-color: #fefefe;
	margin: auto;
	padding: 0px;
	border: 2px solid navy;
	width: 800px;
}

.modal-content-900 {
	background-color: #fefefe;
	margin: auto;
	padding: 0px;
	border: 2px solid navy;
	width: 900px;
}

.modal-content-1000 {
	background-color: #fefefe;
	margin: auto;
	padding: 0px;
	border: 2px solid navy;
	width: 1000px;
}

.modal-content-1200 {
	background-color: #fefefe;
	margin: auto;
	padding: 0px;
	border: 2px solid navy;
	width: 1200px;
}

/* The Modal Close Button */

.apply {
	color: #aaaaaa;
	float: right;
	font-size: 16px;
	font-weight: bold;
}

.apply:hover,
.apply:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.menu-image {
	width: 50px;
	height: auto;
	padding-bottom: 0px;
	cursor: pointer;
}

.main-image {
	width: 100px;
	height: auto;
}

/* Meals DIV Controls */ 

.meals {
	width: 100%;
	height: 80vh;
	overflow: scroll; 
}

.meals table {
	border-spacing: 0;
}

.meals th {
	border-left: none;
	border-right: 1px solid white;
	padding: 4px;
	width: 200px;
	min-width: 200px;
	position: sticky;
	top: 0;
	background-color: navy;
	color: white;
	font: bold 14px;
}

.meals td {
	border-left: none;
	border-right: 1px solid #bbbbbb;
	border-bottom: 1px solid #bbbbbb;
	padding: 4px;
	width: 200px;
	min-width: 200px;
	background: white;
}

.meals th:nth-child(1),
.meals td:nth-child(1) {
	position: sticky;
	left: 0;
	width: 200px;
	min-width: 200px;
}

.meals th:nth-child(2),
.meals td:nth-child(2) {
	position: sticky;
	/* 1st cell left/right padding + 1st cell width + 1st cell left/right border width */
	/* 0 + 4 + 200 + 4 + 1 */
	left: 209px;
	width: 200px;
	min-width: 200px;
}

.meals td:nth-child(1),
.meals td:nth-child(2) {
	background: white;
}

.meals th:nth-child(1),
.meals th:nth-child(2) {
	z-index: 2;
}

/* Meals menu selector */

.mealsbox ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #FFFFC0;
}

.mealsbox ul li {
	float: left;
}

.mealsbox ul li a {
	display: block;
	color: navy;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

.mealsbox ul li a:hover {
	background-color: #000080;
	color: white;
}

/* Colour Chart */

.bg-white {
	background-color: white;
}

.bg-green {
	background-color: green;
}

.fc-red {
	color: red;
}

.fc-orange {
	color: orange;
}

.fc-pale-blue {
	color: #00B0F0;
}