*{
	margin: 0;
	padding: 0;
	
	box-sizing: border-box;
}

:root{
	--textColor: #039;
	--headlineColor: #69e;
	--backgroundColor: #fea;
  --siteBackgroundColor: #ffffff;
  --footerColor: darkblue;
  --footerGradientTop: #06f;
  --footerGradientBottom:  #6cf;
  --inputBorder: #999;
  --navText: #ffffff;
}

img{
	display: block;
}

html {
	height: 100%;
}

body{
  height: 100%;
  background-image: url("../images/room40.jpg");
  background-size: cover;
	background-color: var(--backgroundColor);
}

div.container{
  min-height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
 
  grid-template-areas:
    "  header "
    "  main  "
    "  footer  ";
  max-width: 835px;
  margin: 0 auto;
  box-shadow: 5px 0 5px rgba(128,128,128,0.5);
}

nav{
  display: flex;
  flex-direction: row;
  background-color: var(--footerGradientTop);  
}

nav a{
  text-decoration: none;
  color: var(--navText);
  background-color: var(--footerGradientTop);
  font-family: roboto, sans-serif;
  padding: 10px;
  text-align: center;
  font-weight: 600;
}

nav a:hover{
  color: var(--footerGradientTop);
  background-color:  var(--navText);
}

nav a.current{
  color: var(--footerGradientTop);
  background-color: var(--backgroundColor);
}

header {
  grid-area: header;
}

main{
	background-color: var(--siteBackgroundColor);
  width: 100%; 
	padding: 10px;
  grid-area: main;
}

p,span,input,legend,td,th{
	font-family: roboto, sans-serif;
	color: var(--textColor);
	padding: 5px;
}

legend{
  font-size: smaller;
}

input.new,fieldset.new{
  border-radius: 4px; 
  width: 100%;
}

input{
  border: none; 
}

fieldset{
  border: inset 1px var(--inputBorder);
  margin: 5px 0;
}

input.old{
  border: solid 1px var(--inputBorder);
  border-radius: 4px;
  width: 5em;
  text-align: right;
  margin: 0;
}

input.room{
  text-align: left;
  width: 15em;
}

input.submit{
  width: auto;
  border: 1px outset;
  border-radius: 4px;
  background-color: var(--backgroundColor);
  box-shadow: 2px 2px 2px 0 var(--inputBorder);
}

input.submit:hover{
  color: var(--backgroundColor);
  background-color: var(--textColor);
  border: 1px inset;
}

span.nowrap{
  white-space: nowrap;
}

form{
  max-width: 400px;
}

h1,h2,h3,h4,h5,h6{
	font-family:  bree, times, serif;
	color: var(--headlineColor);
	padding: 5px 5px 0 5px;
}

table{
  width: 100%;
  border-collapse: collapse;
}

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

th{
  color: white;
  background-color: #006;
}

td, th{
  padding: 6px;
  border: 1px solid #ccc;
  text-align: center;
}


footer.footer{
	background-color: var(--footerColor);
  background-image: linear-gradient(to bottom, var(--footerGradientTop), var(--footerGradientBottom));
  width: 100%;
  margin: 0 auto;
	font-size: smaller;
	padding: 5px;
  grid-area: footer;
}

footer > span{
    color: white;
}

footer a{
  text-decoration: none;
  color: var(--textColor);
}

.disclaimer{
  font-style: oblique;
  font-size: smaller;
  font-weight: bolder;
}

/* Not needed now I have removed the "george" class

div.george p{
  color: darkgreen;
  font-size: smaller;
  font-style: oblique;
}

div.george {
  border: solid 1px darkgreen;
  border-radius: 4px;
  box-shadow: 5px 5px 5px rgba(128,128,128,0.5);
  padding: 10px;
}
*/

/* responsive table - mobile*/
@media 
only screen and (max-width: 835px) {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc; 
		position: relative;
		padding-left: 50%; 
	}
  
  td,th{
    text-align: left;
  }
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	.mobile-optimised td:before { 
    content: attr(data-th); 
    display: block;
  }
  
  nav{
    flex-direction: column;
  }
  
/*Hide footer credit for background (no background on mobile)*/

span.ifDesktop{
  display: none;
}  
  
  
  
}