html, body {
  overflow: hidden; /* don't do scrollbars */
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size: 12pt;
  height: 100%;
}


#calCont {
  height: 95%;
}

#notifText {
  color: white;
  margin:7px;
}

.notification {
  position: fixed;
  overflow: hidden;
  z-index: 15;
  top:0;
  left:0;
  width:300px;
  height:0px;
  transition: 1s;
  background-color:#101010;
  display: flex;
    align-items: center;
}

.gotoDate{
  display: inline-block;
  /*font-size: 2em;*/
}

.roomsBlock{
  position: fixed;
  z-index:4;  /* Just behind sliding drawer.*/
  top: 5px;
  right:310px;
  font-size: 0.8em;
  background-color: #f1f1f1;
}

.roomsBlock label:hover {background-color: #ddd;}

.roomsBlock label {
	min-width: 100px;
	border-radius: 5px;
	border: 2px solid black;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: inline-block;        /*Can have a fixed width, but will also display along the same line*/
}

/* Colours in the room selection list */
.roomWarwick { background: #3498DB; }      /*Blue   52,152,219*/
.roomsMenu-content .roomWarwick:hover {background: #21618C;}
.roomStafford { background: #45B39D; }     /*Green  69,179,157*/
.roomsMenu-content .roomStafford:hover {background: #138D75;}
.roomTechnology { background-color: #E74C3C; } /*Red   231, 76, 60*/
.roomsMenu-content .roomTechnology:hover {background-color: #B03A2E;}
.roomMeeting { background-color: #F1C40F; } /*Yellow*/
.roomsMenu-content .roomMeeting:hover {background-color: #B7950B;}
.roomActivity { background-color: #B66CFF; } /*Purple*/
.roomsMenu-content .roomActivity:hover {background-color: #8000FF;}


/* All the possible combinations for barber colours to show room useage */

.roomW {background: #3498DB;}
.roomWS {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px);}
.roomWT {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #E74C3C 15px, #E74C3C 30px);}
.roomWM {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #F1C40F 15px, #F1C40F 30px);}
.roomWST {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #E74C3C 30px, #E74C3C 45px);}
.roomWSM {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #F1C40F 30px, #F1C40F 45px);}
.roomWTM {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #E74C3C 15px, #E74C3C 30px, #F1C40F 30px, #F1C40F 45px);}
.roomWSTM {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #E74C3C 30px, #E74C3C 45px, #F1C40F 45px, #F1C40F 60px);}
.roomS {background: #45B39D;}
.roomST {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #E74C3C 15px, #E74C3C 30px);}
.roomSM {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #F1C40F 15px, #F1C40F 30px);}
.roomSTM {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #E74C3C 15px, #E74C3C 30px, #F1C40F 30px, #F1C40F 45px);}
.roomT {background: #E74C3C;}
.roomTM {background:repeating-linear-gradient(45deg, #E74C3C, #E74C3C 15px, #F1C40F 15px, #F1C40F 30px);}
.roomM {background: #F1C40F;}

.roomA {background: #B66CFF;}
.roomWA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #B66CFF 15px, #B66CFF 30px);}
.roomWSA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #B66CFF 30px, #B66CFF 45px);}
.roomWTA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #E74C3C 15px, #E74C3C 30px, #B66CFF 30px, #B66CFF 45px);}
.roomWMA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #F1C40F 15px, #F1C40F 30px, #B66CFF 30px, #B66CFF 45px);}
.roomWSTA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #E74C3C 30px, #E74C3C 45px, #B66CFF 45px, #B66CFF 60px);}
.roomWSMA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #F1C40F 30px, #F1C40F 45px, #B66CFF 45px, #B66CFF 60px);}
.roomWTMA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #E74C3C 15px, #E74C3C 30px, #F1C40F 30px, #F1C40F 45px, #B66CFF 45px, #B66CFF 60px);}
.roomWSTMA {background:repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #45B39D 15px, #45B39D 30px, #E74C3C 30px, #E74C3C 45px, #F1C40F 45px, #F1C40F 60px, #B66CFF 60px, #B66CFF 75px);}
.roomSA {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #B66CFF 15px, #B66CFF 30px);}
.roomSTA {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #E74C3C 15px, #E74C3C 30px, #B66CFF 30px, #B66CFF 45px);}
.roomSMA {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #F1C40F 15px, #F1C40F 30px, #B66CFF 30px, #B66CFF 45px);}
.roomSTMA {background:repeating-linear-gradient(45deg, #45B39D, #45B39D 15px, #E74C3C 15px, #E74C3C 30px, #F1C40F 30px, #F1C40F 45px, #B66CFF 45px, #B66CFF 60px);}
.roomTA {background:repeating-linear-gradient(45deg, #E74C3C, #E74C3C 15px, #B66CFF 15px, #B66CFF 30px);}
.roomTMA {background:repeating-linear-gradient(45deg, #E74C3C, #E74C3C 15px, #F1C40F 15px, #F1C40F 30px, #B66CFF 30px, #B66CFF 45px);}
.roomMA {background:repeating-linear-gradient(45deg, #F1C40F, #F1C40F 15px, #B66CFF 15px, #B66CFF 30px);}

.roomCancelled {background: #808080;}

input, select, .pseudoInput { 
background-color: #F1F1F1;
padding: 10px 10px;   /*For two values, this is top-bottom and left-right */
border: 2px solid black;
border-radius: 5px;
box-sizing: border-box;       /*Daft caveat needed so that sizes include border, margin and padding*/
}

#loginSlider {
	position: fixed;
	left:0;
	top: 0;
	bottom:0;
	right: 100%;
	background-color: rgba(255, 255, 255,0.85);
    vertical-align: middle;
	z-index: 12;
	overflow: hidden;
	transition: right 500ms ease;
}

.loginTable { 
margin-top: 100px;
border: 2px solid black;
border-radius: 10px;
border-spacing: 0;
vertical-align: middle;
}

.loginTable td {
	width: 300px;
	height: 50px;
	text-align: center;
}
.loginTable tr:first-child td{
	border-radius: 8px 8px 0 0;
	background-color: #3A87AD;
}

.loginTable tr:last-child td{
	border-radius: 0 0 8px 8px;
	background-color: white;
}

.loginButton { background-color: lime; cursor: pointer;}

.alignTable {margin: 0 auto; }
.alignTable td { text-align:left; border:none;}