/* Force web browser not to have default margins and paddings. Also set all elements to box-sizing: border-box so that elements SHOULD be the exact size specified */
* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	print-color-adjust: exact; /* -- used to force printing of background colors and images --*/
	-webkit-print-color-adjust: exact; /* -- used to force printing of background colors and images --*/
}

/* Force web browser not to display default appearance of the following types of input and button elements - eg: prevent Apple devices primarily from rounding the corners and displaying drop shadows etc */
input [type="text"], input [type="date"], input [type="time"], input[type="radio"], input[type="checkbox"], button [type="button"], button [type="submit"] {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
background: transparent;
}

@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src: url('fonts/roboto-v51-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto-Fallback-300'; /* font-style=normal */
  src: local('Arial'); /* Targets major desktop & Android platforms */
  size-adjust: 92.77%; /* Normalises layout letter widths */
  ascent-override: 92.77%; /* Matches vertical height bounds */
  descent-override: 24.41%;
  line-gap-override: 0%;
}

@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/roboto-v51-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto-Fallback-500'; /* font-style=semi-bold */
  src: local('Arial'); /* Targets major desktop & Android platforms */
  size-adjust: 92.77%; /* Normalises layout letter widths */
  ascent-override: 92.77%; /* Matches vertical height bounds */
  descent-override: 24.41%;
  line-gap-override: 0%;
}

body, button, input, select, textarea, label.inline {
	font-family: 'Roboto', 'Roboto-Fallback-300', sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 300;
}

/* --------------- TOP COLOURED PANEL ELEMENTS BEGINS --------------- */
/* Set the header to stick at top of page */
div#header {
	display: none;
}

a.social_media:link, a.social_media:visited {
	display: none;
}

a.social_media:hover, a.social_media:active {
	display: none;
}

div.header_content {
	display: none;
}

h1 {
	font-weight: 300;
	text-align: center;
	color: #ffffff;
	font-size: 21px;
}

div#sponsor {
	display: none;
}

span.new_tab_window_white {
	display: none;
}

nav#menu_large {
	display: none;
}

div#menu_content {
	display: none;
}

/* navigation hyperlink used in menu_large */
a.navigation:link, a.navigation:visited {
	display: none;
}

a.navigation:hover, a.navigation:active {
    display: none;
}

/* This button is only visibe on devices with a device width of less than 769px */
button#menu_button, button#menu_button_close, button#close_modal {
	display: none;
}

span.menu {
	display: none;
}

/* These buttons are only visibe on devices with a device width of less than 769px */
button.navigation_small {
	display: none;
}
/* --------------- TOP COLOURED PANEL ELEMENTS END --------------- */

/* --------------- HOME PAGE ELEMENTS BEGIN (some elements may also be used on other pages) --------------- */
main, div#main_content {
	width: 100%;
	padding: 20px 10px 30px 10px;
	background-color: #ffffff;
}

div#table { /* IMPORTANT: This div is vital to ensure wherever div.content's are displayed on large devices, that they display at 50% width correctly - see @media only screen and (min-width: 769px) */
	width: 100%;
	display: table;
}

div.content {
	width: 100%; /* only on devices less than 769px */
	background-color: transparent;
}

span.qrcode {
	display: inline-block;
	width: 70px;
	height: 70px;
	background: url(icon_images/qrcode.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* standard hyperlink */
a:link, a:visited {
    color: #0e477e;
    text-decoration: underline;
}

a:hover, a:active {
    color: #cc0000;
}

p {
	text-align: left;
	color: #303030;
	margin-bottom: 10px;
}

p.small_text {
	font-size: 12px;
}

mark {
	font-family: 'Roboto', 'Roboto-Fallback-500', sans-serif;
	font-weight: 500;
	color: #3973ac;
	background-color: transparent;
}

span.last_modified {
	display: none;
}

h2 {
	font-family: 'Roboto', 'Roboto-Fallback-500', sans-serif;
	font-weight: 500;
	font-size: 20px;
	text-align: left;
	color: #0e477e;
	margin: 10px 0px;
	border-bottom: 8px solid #dfdfdf;
}

h3 {
	font-family: 'Roboto', 'Roboto-Fallback-500', sans-serif;
	font-weight: 500;
	font-size: 17px;
	color: #3973ac;
	margin-bottom: 5px;
}

h4 {
	font-family: 'Roboto', 'Roboto-Fallback-500', sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: #3973ac;
	margin-bottom: 5px;
}

button#widget {
	display: none;
    position: fixed;
    bottom: 10px;
    right: -100px; /* negative position to ensure it's not displayed for print or save as PDF */
}

	/* URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.*/
	/* The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. */
	/* The height of the our header div is 130px and add 10px for margin of <h2> <h3> elements
	/* Without this CSS the <a class="jump"> works, but the begining of the content is hidden at the very top behind the sticky header div, so this CSS solves the problem*/
:target::before {
	content: "";
	display: block;
	height: 140px; /* this height for device widths less than 769px wide */
	margin: -140px 0px 0px 0px; /* this negative height for device widths less than 768px wide */
}

footer {
	display: none;
}
/* --------------- HOME PAGE ELEMENTS END (some elements may also be used on other pages) --------------- */

/* --------------- ALL OTHER PAGES except CONTACT PAGE ELEMENTS BEGIN (some elements may also be used on other pages) --------------- */
div.hide_from_print {
	display: none;
}

form.form_content {
	 display: none;
}
	
div.modal {
    display: none; /* Hidden by default */
}

button.show, button.hide {
	display: none;
	position: relative;
	top: -15px;
	left: -100px; /* negative position to ensure it's not displayed for print or save as PDF */
}

div.page_break { /* used in fixtures page - prints a page break after each team's list of fixtures */
	page-break-after: always;
}

div.content_full_width {
	width: 100%;
	background-color: transparent;
}

div.row, div.rowH, div.rowFixtures {
	font-size: 15px;
	color: #303030;
}

div.row {
	height: 36px; /* screen style is 38px */
	line-height: 1;
}

div.rowFixtures {
	height: 22px;
}

div.rowH {  /* Headings div used in pages: Teams, Tables, Fixtures */
	height: 22px;
}

div.trophies {
	width: 100%;
	height: 60px;
	text-align: center;
	margin-bottom: -20px;
}

div.trophies_small {
	width: 100%;
	height: 50px;
	text-align: center;
	margin-bottom: -15px;
}

div.card {
	padding: 20px 10px 10px 10px; /* Note: 20px top padding to allow for protrusion into top of card for the trophies.png */
	width: 100%;
	margin-bottom: 50px;
	border-radius: 4px;
	background-color: #efefef;
}

hr {
	border: 4px solid #efefef;
}

div.cadcsl_ads {
	display: inline-block;
	width: 80%;
	height: auto;
	margin: 2% 10%;
	border: 1px solid #bfbfbf;
}

div.cadcsl_title {
	padding: 1px;
	text-align: center;
}

img.cadcsl_image {
	width: 100%;
	height: auto;
}

/* SPANS FOR DATA/TEXT BEGINS */
span.leftH, span.centerH, span.leftH_noRHborder, span.centerH_noRHborder { /* spans for  div.rowH */
	display: inline-block;
	height: 100%;
	padding: 2px 1px;
	border-top: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;
	background-color: #ecf2f9;
	vertical-align: middle; /* IMPORTANT: text that breaks onto a line below would otherwise cause incorrect vertical display of those spans */
}

span.leftH, span.leftH_noRHborder {
	text-align: left;
}

span.centerH, span.centerH_noRHborder {
	text-align: center;
}

span.leftH_noRHborder, span.centerH_noRHborder {
	border-right: none;
}

span.left, span.center, span.left_noRHborder, span.center_noRHborder { /* spans for  div.row & div.rowFixtures */
	display: inline-block;
	height: 100%;
	padding: 2px 1px;
	border-top: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;
	background-color: transparent;
	word-wrap: break-word;
	vertical-align: middle; /* IMPORTANT: text that breaks onto a line below would otherwise cause incorrect vertical display of those spans */
}

span.left, span.left_noRHborder {
	text-align: left;
}

span.center, span.center_noRHborder {
	text-align: center;
}

span.left_noRHborder, span.center_noRHborder {
	border-right: none;
}

/* Used in Tables page & Cups page - imitate hyperlink */
span.imitate_link {
	color: #0e477e;
	text-decoration: underline;
	cursor: pointer;
}

span.imitate_link:hover {
	color: #cc0000;
}
/* SPANS FOR DATA/TEXT ENDS */

/* SPANS FOR ICONS BEGINS */
span.new_tab_window {
	width: 12px;
	height: 12px;
	display: inline-block;
	background: url(icon_images/new_tab_window.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

span.arrow_up_white_small { /* background image for button#widget */
	display: none;
}

span.open_quote { /* actual icon sizes are: width 20px height 26px */
	width: 10px;
	height: 13px;
	vertical-align: text-top;
	display: inline-block;
	background: url(icon_images/open_quote.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right;
}

span.close_quote {
	width: 10px;
	height: 13px;
	vertical-align: text-top;
	display: inline-block;
	background: url(icon_images/close_quote.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left;
}

span.download {
	width: 50px;
	height: 50px;
	vertical-align: text-bottom;
	display: inline-block;
	background: url(icon_images/download.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

span.download_unavailable {
	width: 50px;
	height: 50px;
	vertical-align: text-bottom;
	display: inline-block;
	background: url(icon_images/download_unavailable.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

span.map_pin {
	width: 15px;
	height: 15px;
	vertical-align: text-top;
	display: inline-block;
	background: url(icon_images/map_pin.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

span.car_green {
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
	display: inline-block;
	background: url(icon_images/car_green.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

span.car_orange {
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
	display: inline-block;
	background: url(icon_images/car_orange.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

span.car_red {
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
	display: inline-block;
	background: url(icon_images/car_red.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
/* SPANS FOR ICONS ENDS */

div.team_card_outer {
	border: 1px solid #bfbfbf;
	border-radius: 8px;
	margin-bottom: 10px;
	background-color: #ffffff;
}

div.team_card_inner {
	width: 100%;
	margin: 10px;
}

button.show_next_match {
	width: 200px;
	height: 30px;
	cursor: pointer;
	color: #ffffff;
	font-weight: 500;
	border: 1px solid #a5a5a5;
	border-radius: 4px;
	background-color: #0e477e;
	margin-bottom: 10px;
}

button#print_save {
	display: none;
}
/* --------------- ALL OTHER PAGES except CONTACT PAGE ELEMENTS END (some elements may also be used on other pages) --------------- */