html {
	overflow:scroll;
	overflow-x:hidden;
	font-family:"PT Sans", "Arial", "Helvetica", sans-serif;	
	font-size:16px;
	color:#800020;
	line-height:1.4em;
	min-width:480;
	width:100%;
}

img.rounded {
	border-radius: 10px;
} 

/* Fixed Footer */

html, body {
	margin:0;
	padding:0;
	height:100%;
	text-decoration:none;
}
#container {
	min-height:100%;
	position:relative;
}
#header {
	padding:0px;
}

#body {
	padding-bottom:115px;  	/* Height of the footer */
}

#footer {
	position:absolute;
	bottom:0;
	width:100%;
	height:115px;    		/* Height of the footer */
	text-decoration:none;
}

/* End of Fixed Footer */

#site-layout {
/*	max-width:1050px;*/
	width:100%;
	margin:auto;
}	
	
.page-column {
	vertical-align:top;
}

.content-column {
	width:100%;
	padding:10px;
	font-size: 95%;
}

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

#contact {
	margin-right:0px;
 	border-style:solid;  
	border-color:#800020;
	border-radius:5px; 
	border-width:1px;
	color:#800020;
	background-color:white;
	padding:5px;
	margin:10px;
	width:190px;
	text-decoration:none;
}

#currently_booking {
	font-size:80%; 
	border-style:solid;
	border-color:#F0F0F0; 
	border-radius:5px; 
	border-width:1px;
	background-color:#F0F0F0; 
	text-align:center; 
	padding:15px 5px 15px 5px; 
	margin:5px;
}

.narrow-break {
	line-height:0.7em;
}

.columns-top {
	vertical-align:top;
}

.header-text {
	font-size:150%;
}

.sub-header-text {
	font-size:120%;
}

.ordinary-text {
	font-size:100%;
}

.banners {
	background:#800020; 
	margin-left:auto; 
	margin-right:auto;
	margin-top:10px;
	width:100%; 
/*	max-width:1050px;*/
	text-align:center;
	color:#FFFFFF;
	font-size:100%;
	font-weight:bold;
}

.top-banner {
	margin-top:10px;
	height:180px;      
	margin-bottom:5px;	
}

.banner-images {
	height:100px;
	margin-top:20px;
}

.banner-images-left {
	float:left;
	margin-left:30px;	
}

.banner-images-right {
	float:right;
	margin-right:30px;
}

.probably {
	font-size:90%;
	text-align:center;
	padding-top:90px;
}

.bottom-banner {
	margin-top:5px;
	height:100px;
	margin-bottom:10px;	
	display: table;
	background-image: url(images/misc/footer_2019.png); 
    background-size: cover;
}

.ring {
	display: table-cell; 
	vertical-align: middle;
	color:#800020;
	font-size:200%;
    line-height:2em;	
}

.copyright {
	font-size:40%; 	
	line-height:0.6em;
}

/* Menu */

#nav {
    background-color:#800020;
	text-align:center;
	margin-top:30px;
	margin-bottom:5px;
	min-height:32px;
	background-color:transparent;
}

#nav ul {
	display:inline-block;
	list-style:none; 
	padding:4px 0px;
	margin:0px;
}

#nav li {
	display:inline;
}

#nav a {
 	//border-style:solid;  
	border-radius:5px; 
	border-width:1px;
	border-color:white;
	color:white;
	background-color:#800020;
	padding:0px 10px;
	font-size:80%;
	font-weight:bold;
    text-align:center;
    text-decoration:none;
    display:inline-block;
	background-color:transparent;
}
	
#nav a:hover{
	border-color:white;
	color:#800020;
	background-color:white;
} 

#nav2 {
    background-color:#800020;
	text-align:center;
}

#nav2 ul {
	list-style:none; 
	padding: 0px;
	margin: 0px;
}

#nav2 li {
	padding:10px 0px 10px 0px;
	margin: 0px 0px 0px 0px;
	background-color:transparent;
	border-color:white;
	border-style:solid;   
	border-width:1px;
}

#nav2 a {
	background-color:transparent;
	color:white;
	font-size:120%;
	font-weight:bold;
    text-align:center;
    text-decoration:none;
	display: inline-block; 
	width: 100%;
}
	
#nav2 a:hover{
	border-color:white;
	color:#800020;
	background-color:white;
} 

/* End of Menu */


/* Home */

.splash-body {
	/* Same as min-height of #splash */
	min-height:600px;
}

#splash {  
	width:100%;

	/* 100% - banner(180) - footer(125 including padding etc)) */
	height: -webkit-calc(100vh - 305px);
    height: -moz-calc(100vh - 305px);
    height: calc(100vh - 305px);

	/* Same as min-height of .splash-body */
/*	min-height:600px;*/
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
    background-repeat: no-repeat;
}

.splash-menu {
	color:white;
	margin-left:30px;
	margin-right:30px;
	background:rgba(0,0,0,0.2);
	max-width:300px;
	padding-left:20px;
	padding-right:20px;
}

.splash-menu a {
	text-decoration:none;
}

.splash-menu-highlight {
	background:rgba(0,0,0,0.6);
}

.menu-padding {
	height:30px;
}

.menu-sub-padding {
	height:10px;
}

.menu-title {
	font-size:300%;
	line-height:1.4em;
    color:white;
}

.menu-details {
	font-size:80%;
	color:white;
	line-height: 1.3em;
	padding-left:20px;
	padding-bottom:10px;
}

/*landscape*/
@media screen and (min-aspect-ratio: 10001/10000) {
	#splash { 
		background-image:url('images/misc/flag_landscape.jpg');
	}
}

/*portrait*/
@media screen and (max-aspect-ratio: 1/1) {
	#splash { 
		background-image:url('images/misc/flag_portrait.jpg'); 
	}
	
	.splash-menu {
		height:90px;
		max-width:none;
		width:calc(100hh - 60px);
		background:rgba(0,0,0,0.4);
	}
	
	.splash-menu-highlight {
		background:rgba(0,0,0,0.6);
	}
	
	.menu-title {
		font-size:200%;
	}
}

/* End of Home */


/* Away Travel & Events */

.event-column {
	border:1px solid #000;
	border-color:#800020;
	text-align:center; 
}

.event-column.crest-column {
	border-left:0px;	
}

.event-column.game-column {
	border-right:0px;
}	
	
.date-column {
	width:130px;
}

.date-column2 {
	max-width:10px;
}

.booking-column {
	width:70px;
}
	
.date-text {
	font-size:80%; 
	margin-left:5px; 
	margin-right:5px; 
	text-align:left;
}

.game-text {
	font-size:240%; 
	text-align:center;
	margin-left:5px; 
	margin-right:5px; 
}

.game-crest {
	width:80px;
	height:80px; 
	margin-left:5px; 
	margin-right:5px;
	margin-top:5px; 
	margin-bottom:5px; 
}

.next-game-crest {
	width:80px;
	height:80px; 
	float:right;
}

.details-text {
	font-size:80%; 
}

.future {
	color:#B0B0B0;
}

/* End of Away Travel & Events */


/* Match details */

.match-crest {
	width:80px;
	height:80px; 
	margin-left:0px; 
	margin-right:0px;
	margin-top:0px; 
	margin-bottom:0px;
	float:left;  
}

.match-crest.small {
	width:40px;
	height:40px; 
}

.match-crest.tiny {
	width:30px;
	height:30px; 
	margin-left:2px; 
	margin-right:2px;
	margin-top:2px; 
	margin-bottom:2px;
}

.match-header {
	text-decoration:none;
}

.match-text {
	font-size:400%; 
	display:table-cell; 
	vertical-align:middle; 
	padding-left:15px;
	color:#800020;
}

.match-text.small {
	font-size:200%; 
}

.match-text.nocrest {
	padding-left:0px;
}

.icon-column {
	width:30px;
}

.icon-column2 {
	max-width:40px;
}

.icon.column.show {
	visibility:visible;
}

.icon-column.hide {
	visibility:hidden;
}

.game-date {
	width:210px; 
	font-size:100%; 
	vertical-align:top; 
	text-align:left;
	/* add below if leave in "Embed from Getty Images"
	margin-top:12px; */
}

.icon {
	width:25px;
}

.programme {
	max-width:210px; 
	padding-top:5px;
}

/* End of Match details */


/* On Tour */

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

	border: 1px solid #ccc;
    background-color: #f9f9f9;
}

ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 0px 16px;    
    text-decoration: none;
    transition: 0.3s;
   	background-size: 30px 30px;
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 40px;
}

.tab li a:hover {
//	color: white;
	background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 12px 12px;
    border: 1px solid #ccc;
	background-color: #f9f9f9;	
}

.tablinks {
//	cursor: pointer;
}

.tour-game {
	margin-left:12px;
	margin-top:2px;
	margin-bottom:2px;
}

.highlights {
	text-decoration:none;
	font-size:80%;
	font-weight:bold;
	color:#333333;
/*
	display:inline-block;
	margin-left:10px;
	font-size:80%;
*/
}

.location-map {
	text-decoration:none;
	font-size:80%;
	font-weight:bold;
	color:#666666;
}

.fixture-title {
	color: #666666;
	background-color: #DFDFDF;
	font-size:120%;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:4px;	
}

/* End of On Tour */


/* Scale Videos and maps */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videoWrapper.map {
	padding-bottom: 75%; 
}

/* End of Scale Videos and maps */


/* Screen too narrow for contacts panel and adjust banners */
@media screen and (max-width: 768px) {
	
	#contact {
		display:none !important;
	}
	
	.probably {
		padding-top:145px !important;
	}
	
	#nav {
		margin-top:0px;
		padding-top:0px;
	}
	
	#body {
		padding-bottom:75px;  	/* Height of the footer */
	}
	
	#footer {
		height:75px;
	}
	
	.bottom-banner {
		height:60px !important;
	}

	#splash {  
		/* 100% - banner(180) - footer(85 including padding etc)) */
		height: -webkit-calc(100vh - 265px);
		height: -moz-calc(100vh - 265px);
		height: calc(100vh - 265px);
	}
	
	.ring {
		font-size:140%;	
	}
	
	.menu-details {
		font-size:80%;
	}
}

/*..and then display alcohol message on match page instead */
@media screen and (min-width: 768px) {
	
	.match-alcohol {
		display:none !important;
	}
}

/* 1st level alterations due to size */
@media screen and (max-width: 1070px) {
	
	.match-crest {
		width:70px !important;
		height:70px !important;
	}

	.match-text {
		font-size:350% !important;		
	}
	
	.game-text {
		font-size:190% !important;
	}
	
	.game-crest {
		width:60px !important;
		height:60px !important;
	}
	
	.details {
		width:65px !important;
	}	
}


/* 2nd level alterations due to size */
@media screen and (max-width: 820px) {
	
	.match-crest {
		width:60px !important;
		height:60px !important;
	}
	
	.match-text {
		font-size:300% !important;
		
	}
}

@media screen and (max-width: 580px) {
	/* Restore to 0th level alterations no have no contacts*/
	.header-text {
	font-size:150% !important;
	}

	/* Restore to 0th level alterations no have no contacts*/
	.sub-header-text {
	font-size:120% !important;
	}
	
	/* Restore to 2nd level alterations no have no contacts*/
	.match-crest {
		width:60px !important;
		height:60px !important;
	}
	
	/* Restore to 2nd level alterations no have no contacts*/
	.match-text {
		font-size:300% !important;
		
	}
}


/* No contacts and 3rd level alterations due to size */
@media screen and (max-width: 688px) {
	.header-text {
		font-size:120% !important;
	}
	
	.sub-header-text {
		font-size:110% !important;
	}
}
	
/* No contacts and 4th level alterations due to size */
@media screen and (max-width: 628px) {

	.match-crest {
		width:45px !important;
		height:45px !important;
	}
	
	.match-text {
		font-size:225% !important;
	}
	
	.game-text {
		font-size:140% !important;
	}

	.crest {
		width:40px !important;
		height:40px !important;
	}
	
	.details {
		width:50px !important;
	}
}

@media screen and (max-width: 600px) {
	
	#nav {
		display:none;
	}
	
	#altnav {
		display:block !important;
	}
	
/*										Include to stop scrolling Home banner on phones	
	#banner_images {
		display:none !important;                           
	}
*/
	
	#altnav_button {
		display:block !important;
	}

	#altnav_button_padding {
		display:block !important;
		margin-top: 20px !important;
	}
	
	.probably {
		padding-top: 125px !important;
		padding-bottom:10px !important;
	}
}

/* Menus */

@media screen and (max-width: 1080px) {
	
	#xxxtb {
		height:205px !important;
	}
}

@media screen and (max-width: 768px) {
	
	#xxxtb {
		height:230px !important;
	}
}

@media screen and (max-width: 590px) {
	
	#xxxtb {
		height:255px !important;
	}
}

@media screen and (max-width: 480px) {
	
	.top-banner {
		height:405px !important;
	}
}

/* End of Menus */

/* Please waits */

.please_wait_getty {
	background:url(images/misc/please_wait_getty.png) center center repeat;
}

.please_wait_youtube {
	background:url(images/misc/please_wait_youtube.png) center center repeat;
}

.please_wait_google {
	background:url(images/misc/please_wait_google.png) center center repeat;
}

/* End of Please waits */

/* Latest news */

.news {
	padding: 10px 10px 10px 10px;
	border-style:solid;  
	border-color:#B0B0B0;
//	border-radius: 5px; 
	border-width:1px;
	border-top-width:0px;
	margin-bottom: 10px;
}

.news.odd {
	background-color: #D8D8D8;
}

.news.even {
	background-color: #E8E8E8;
}

.news.first {
	border-top-width:1px;
}

.newsbutton {
	padding: 3px 3px 3px 3px;
	border-style:solid;  
	border-color:#B0B0B0;
	border-radius: 5px; 
	border-width:1px;
	text-decoration:none;
	background-color:#E8E8E8;
	color:#444444;
	font-size:70%;
	font-weight:normal;
}

/* End of Latest news */

/* On Tour & Last Visit */

.club-crest {
	height: 70px;
	width: 70px; 
	margin: 5px; 
}

.text-club {
	font-size: 150%;
}

.club-crest-tiny {
	height: 30px !important;
	width: 30px !important;
	margin: 5px; 
}

/* End of On Tour & Last Visit */


/* Index Rotator */

.rotator-button {
	height: 30px;
	width: 30px;
	margin-top: -webkit-calc(12.5vw - 15px);
    margin-top: -moz-calc(12.5vw - 15px);
    margin-top: calc(12.5vw - 15px);
	background-color: Transparent;
	border: none;
	outline: none;
}

.rotator-button.left {
	margin-left: 30px;
}

.rotator-button.right {
	margin-right: 40px;
}

.rotator-button img {
	height: 30px;
	width: 30px;
	border: 0px;
	padding: 0px;
}

/* End of Index Rotator */

/* Index Boxes */

ul.index {
	padding:0px;
   	list-style: none;
   	font-size: 0px;
   	margin-left: -1.25%; /* should match li left margin */
    margin-right: 1.25%; /* should match li left margin */
}

ul.index li {
   	display: inline-block;
   	padding: 10px;
   	margin: 0 0 2.5% 2.5%;   	
   	background: #fff;
	border: 1px solid #ddd;
   	font-size: 16px;
   	font-size: 1rem;
   	vertical-align: top;
   	box-shadow: 0 0 5px #ddd;
   	box-sizing: border-box;
	-moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box;
	
   	width: 22.5%; /* this value + 2.5 should = 25% */
	height: 25vw;
		
	min-height: 310px !important;
}

ul.index li img {
   	max-width: 100%;
   	height: auto;
   	margin: 10px 0 10px 0;
}

ul.index li h3 {
   	margin: 0 0 5px;
}

ul.index li p {
   	font-size: .9em;
   	line-height: 1.5em;
   	color: #999;
}

ul.index li.white_space {
	border: 1px solid #fff;
	box-shadow: 0 0 5px #fff;
}

@media(max-width: 1300px) {
	ul.index li {
		width: 30.83% !important; 
		height: 33vw !important;
		
		min-height: 300px !important;
		max-height: 340px !important;
	}
}	
	
@media(max-width: 1000px) {
	ul.index li {
		width: 47.5% !important;
		height: 50vw !important;
		
		min-height: 270px !important;
		max-height: 360px !important;
	}
	
	ul.index li.white_space {
		display: none;
	}
}

/* End of Index Boxes */

/* Committee Boxes */

ul.committee {
	padding:0px;
   	list-style: none;
   	font-size: 0px;
   	margin-left: -1.25%; /* should match li left margin */
    margin-right: 1.25%; /* should match li left margin */
}

ul.committee li {
   	display: inline-block;
   	padding: 10px;
   	margin: 0 0 2.5% 2.5%;   	
   	background: #fff;
	border: 1px solid #ddd;
   	font-size: 16px;
   	font-size: 1rem;
   	vertical-align: top;
   	box-shadow: 0 0 5px #ddd;
   	box-sizing: border-box;
	-moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box;
	
	width: 17.5%; /* this value + 2.5 should = 25% it it was 4, here it is for 5*/
	height: 26vw;
}

ul.committee li img {
   	max-width: 100%;
   	height: auto;
   	margin: 0 0 10px;
}

ul.committee li h3 {
   	margin: 0 0 5px;
}

ul.committee li p {
   	font-size: .9em;
   	line-height: 1.5em;
   	color: #999;
}
	
@media(max-width: 1280px) {
	ul.committee li {
		width: 22.5% !important; 
		height: 32vw !important;
	}
}	

@media(max-width: 1070px) {
	ul.committee li {
		width: 30.83% !important; 
		height: 40vw !important;
	}
}	
	
@media(max-width: 820px) {
	ul.committee li {
		width: 47.5% !important;
		height: 55vw !important;
	}
}
 
@media(max-width: 768px) {
	ul.committee li {
		width: 30.83% !important;
		height: 52vw !important;
	}
}
	
@media(max-width: 620px) {
	ul.committee li {
		width: 47.5% !important;
		height: 80vw !important;
		
		min-height: 380px !important;
	}
}

/* End of Committee Boxes */

.hidelink {
	color:#800020;
	text-decoration:none;
}

/* Forthcoming games and events */

.forthcoming {
  border-collapse: collapse;
  /*border: solid 1px red;*/
  /*background: blue;*/
  width: 100%;
}

.forthcoming td  {
  width: 20%;
  height: 20%;
  /*background: yellow;*/
  padding: 0px;
}

.forthcoming td.pics {
  margin: 0px;
}

.forthcoming td.placeholder {
  height: 10px;
  width: 20%;
}

.forthcoming img {
  width: 80px;
  height: 80px;
}

.forthcoming img.hide {
  display: none; 
}

.forthcoming td.names {
  height: 10px;
  margin: 0px;
  text-align: left;
}

.forthcoming td.names.small {
  font-size: 80%;
}

/* End of Forthcoming games and events */