/* 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;
}

/* 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 */
header {
	position: -webkit-sticky; /* For Safari web browser */
    position: sticky;
	z-index: 1;
    top: 0;
	left: 0;
	padding: 8px 0px 0px 0px;
	color: #ffffff;
	background-color: #3973ac;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.33);
}

a.social_media:link, a.social_media:visited {
	position: absolute;
	z-index: 2;
	top: 49px;
	right: 10px;
	width: 32px;
	height: 32px;
	display: inline-block;
	background: url(icon_images/facebook_icon_blue.png);
	background-repeat: no-repeat;
	background-size: 32px 32px;
	background-position: center;
	border-radius: 50%;
}

a.social_media:hover, a.social_media:active {
	background: url(icon_images/facebook_icon_white.png);
	background-repeat: no-repeat;
	background-size: 32px 32px;
	background-position: center;
}

a.logo:link, a.logo:visited {
	position: absolute;
	z-index: 3;
	top: 49px;
	left: 10px;
	width: 32px;
	height: 32px;
	display: inline-block;
	background: url(icon_images/logo.png);
	background-color: #0e477e;
	background-repeat: no-repeat;
	background-size: 25px 25px;
	background-position: center;
	border-radius: 50%;
}

a.logo:hover, a.logo:active {
	background-color: #ffffff;
	background-size: 25px 25px;
	background-position: center;
}

button#search_button {
	position: absolute;
	z-index: 4;
	top: 49px;
	right: 52px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	background: url(icon_images/search_white.png);
	background-color: #0e477e;
	background-repeat: no-repeat;
	background-size: 21px 21px;
	background-position: center;
	border: none;
	border-radius: 50%;
}

button#search_button:hover {
	background: url(icon_images/search_blue.png);
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-size: 21px 21px;
	background-position: center;
}

input#search_input {
	width: 70%;
	height: 32px;
	border: 1px solid #a5a5a5;
	border-radius: 16px 0px 0px 16px;
	outline: none;
	padding-left: 8px;
}

button#get_results {
	width: 44px;
	height: 32px;
	background-color: #0e477e;
	color: #ffffff;
	border: 1px solid #a5a5a5;
	border-left: none;
	border-radius: 0px 16px 16px 0px;
	outline: none;
	cursor: pointer;
}

button#get_results:hover {
	background-color: #0e477e; /* small devices ie: touch screens - must NOT change colour */
}

div.header_content {
	text-align: center;
}

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

div#sponsor {
	width: 190px;
	height: 46px;
	margin: auto;
	background: url(icon_images/butcombe_brewery_white.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	cursor: pointer;
}

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

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;
}

nav#menu_large {
	background-color: #0e477e;
	margin-top: 10px;
	border: 0px solid transparent;
	border-radius: 8px 8px 0px 0px;
}

div#menu_content {
	text-align: left;
	display: none;
	background-color: transparent;
}

/* navigation hyperlink used in menu_large */
a.navigation:link, a.navigation:visited {
	display: inline-block;
	height: 32px;
	padding: 5px 0.9%;
	cursor: pointer;
	border-bottom: 6px solid transparent;
	color: #ffffff;
	text-decoration: none;
}

a.navigation:hover, a.navigation:active {
	background-color: #0e477e;
    border-bottom: 6px solid #ffffff;
	color: #ffffff;
}

/* The menu_button & menu_button_close are only visibe on devices with a device width of less than 769px, close_modal self explanatory */
button#menu_button, button#menu_button_close, button#close_modal {
	margin-top: 5px;
	width: 90px;
	height: 32px;
	font-size: 18px;
	cursor: pointer;
	background-color: #0e477e;
	border: 1px solid #a5a5a5;
	border-bottom: none;
	border-radius: 8px 8px 0px 0px;
	color: #ffffff;
}

button#close_modal {
	width: 40%;
	margin: 5% 30% 0% 30%;
}

button#menu_button:hover, button#menu_button_close:hover, button#close_modal:hover {
	outline: none;
	background-color: #009933;
}

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

/* These buttons are only visibe on devices with a device width of less than 769px */
button.navigation_small {
	width: 29.333%;
	height: 30px;
	margin: 10px 2%;
	cursor: pointer;
	color: #ffffff;
	border: 1px solid #a5a5a5;
	border-radius: 4px;
	background-color: #0e477e;
}

button.navigation_small:hover {
	outline: none;
	background-color: #009933;
}
/* --------------- TOP COLOURED PANEL ELEMENTS END --------------- */

/* --------------- HOME PAGE ELEMENTS BEGIN (some elements may also be used on other pages) --------------- */
main, div#main_content { /* MUST retain the "div#main_content" as it's used in action pages & confimation pages! */
	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 { /* 23 Dec 2022 removed "display: inline-block" -as it added extra space below div "main_content". However, display: inline-block IS needed in print stylesheet  */
	width: 0px;
	height: 0px;
	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.jump { /* line height for jump links: places more space between lines needed for small touch screen devices */
	line-height: 160%;
}

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

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

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; /* Fixed/sticky position */
    bottom: 10px; /* Place the button near the bottom of the page */
    right: 0px;
    z-index: 10; /* Make sure it does not overlap */
    border: none;
    outline: none;
    background-color: #ff0000;
    color: #ffffff;
	font-size: 15px;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px 0px 0px 4px;
}

	/* 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> 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>, 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 {
	background-color: #dfdfdf;
	padding: 10px;
	font-size: 10px;
}
/* --------------- HOME PAGE ELEMENTS END (some elements may also be used on other pages) --------------- */

/* ---------------  MODAL STARTS HERE --------------- */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    padding-top: 20px; /* Location of model_content */
    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 with opacity */
}

/* Modal Content - used in all modals */
.modal_content {
    background-color: #ffffff;
    margin: auto;
    padding: 15px 15px 0px 15px;
	color: #000000;
    width: 94%;
	border-radius: 6px;
}
/* ---------------  MODAL ENDS HERE --------------- */

/* --------------- ALL OTHER PAGES BEGIN (some elements may also be used on other pages) --------------- */
button.show, button.hide {
	width: 70px;
	height: 30px;
	cursor: pointer;
	color: #303030;
	background-color: #ecf2f9;
	border: 1px solid #a5a5a5;
	border-top: none;
	border-radius: 0px 0px 8px 8px;
	position: relative;
	top: -10px;
	left: 10px;
	font-size: 15px;
}

button.hide {
	display: none;
}

button.show:hover, button.hide:hover {
	outline: none;
	background-color: #e6ffee;
}

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

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

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

div.team_card_inner {
	margin: 10px;
}

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

button.show_next_match:hover {
	outline: none;
	background-color: #009933;
}

button#print_save {
	width: 180px;
	height: 30px;
	cursor: pointer;
	color: #ffffff;
	border: 1px solid #a5a5a5;
	border-radius: 4px;
	background-color: #0e477e;
}

button#print_save:hover {
	outline: none;
	background-color: #009933;
}

div.rows_hidden { /* CONTAINER for rows to be hidden */
	width: 100%;
	display: none;
}

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

div.row, div.rowFixtures {
	height: 38px;
}

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.last_modified {
	position: absolute;
	top: 135px;
	left: 10px;
	font-size: 11px;
	color: #606060;
}

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.arrow_up_white_small { /* background image for button#widget */
	width: 15px;
	height: 15px;
	vertical-align: middle;
	display: inline-block;
	background: url(icon_images/arrow_up_white_small.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

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

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

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 */
/* --------------- ALL OTHER PAGES END (some elements may also be used on other pages) --------------- */

/* --------------- CONTACT PAGE ELEMENTS BEGIN (some elements may also be used on other pages) --------------- */
form.form_content {
	background-color: #efefef;
	margin-top: 10px;
	padding: 6px;
	border-radius: 4px;
}

label { /* styled as an h4 element but with no margin-bottom and with darker blue colour */
	font-family: 'Roboto', 'Roboto-Fallback-500', sans-serif;
	font-weight: 500;
	display: inline-block;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 0px;
	font-size: 15px;
	color: #0e477e;
}

label.inline { /* styled as normal <p> text */
	display: inline;
	color: #303030;
}

input.contact_name, input.player_name, input.contact_email, input.recipient, input.answer {
	width: 90%;
	height: 21px;
	color: #000000;
	background-color: #ffff70;
	border: 1px solid #bfbfbf;
	border-radius: 0px;
	padding: 1px;
}

input.player_name {
	text-transform: capitalize;
}

input.contact_name {
	text-transform: uppercase;
}

input.contact_email {
	text-transform: lowercase;
}

input.recipient, input.answer { /* these are check boxes */
	width: 21px;
	background-color: #ffff70;
	cursor: pointer;
	vertical-align: bottom;
}

input.hidden { 
	display: none;
}

select.selections {
	width: 220px;
	height: 21px;
	color: #000000;
	background-color: #ffff70;
	border: 1px solid #bfbfbf;
	border-radius: 0px;
	padding: 1px;
}

input.contact_name:focus, input.player_name:focus, input.contact_email:focus, input.recipient:focus, input.answer:focus, select.selections:focus {
	outline: none;
	border: 1px dashed #808080;
}

textarea.comments {
	width: 90%;
	max-width: 90%;
	min-height: 63px;
	color: #000000;
	background-color: #ffff70;
	border: 1px solid #bfbfbf;
	border-radius: 0px;
	padding: 1px;
	font-size: 15px;
	font-weight: 300;
}

textarea.comments:focus {
	outline: none;
	border: 1px dashed #808080;
}

div#captcha {
	font-size: 15px;
}

button.submit_me {
	width: 100px;
	height: 30px;
	padding: 0.25%;
	font-size: 14px;
	cursor: pointer;
	color: #ffffff;
	background-color: #0e477e;
	border: 1px solid #a5a5a5;
	border-radius: 4px;
}

button.submit_me:focus {
	outline: none;
}

@media (hover: hover) { /* prevents buttons on a touch screen device with "sticking" in the hover state */
	button.submit_me:hover {
		outline: none;
		background-color: #009933;
	}
}

button.submit_me:active {
	outline: none;
	background-color: #0e477e;
}

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

span.error_message {
	color: #ff0000;
	font-size: 14px;
	display: none;
}

/* --------------- CONTACT PAGE ELEMENTS END (some elements may also be used on other pages) --------------- */

/* --------------- @ MEDIA STARTS HERE --------------- */
@media only screen and (orientation: landscape) and (max-width: 768px) {
	button.navigation_small { /* --------------- 09 Jan 22 menu now fits in screen when landscape mode --------------- */
		width: 21%;
		height: 26px;
		margin: 6px 2%;
	}
	
	div.row, div.rowH, div.rowFixtures {
		font-size: 13px;
	}
	
	p.small_text {
		font-size: 13px;
	}
	
	div.cadcsl_ads {
	width: 48%;
	height: auto;
	margin: 1% 1%;
	}
}

@media screen and (max-width: 768px) and (min-width: 475px) {
	div.cadcsl_ads {
	width: 40%;
	height: auto;
	margin: 1% 5%;
	}
}

@media screen and (max-width: 768px) and (min-width: 300px) {
	#menu_large {
		display: none;
	}
	
	div#sponsor {
		width: 120px;
		height: 30px;
	}
	
	h1 {
		font-size: 15.75px;
	}
}

@media only screen and (min-width: 769px) {
	body {
		background-color: #efefef;
	}
	
	a.social_media:link, a.social_media:visited {
	position: absolute;
	z-index: 2;
	top: 51px;
	right: 6%;
	}
	
	a.logo:link, a.logo:visited {
	position: absolute;
	z-index: 3;
	top: 51px;
	left: 6%;
	}
	
	button#search_button {
	position: absolute;
	z-index: 4;
	top: 51px;
	right: 11%;
}
	
	#menu_small {
		display: none;
	}
	
	button#menu_button {
		display: none;
	}
	
	button.submit_me:hover, button#get_results:hover  {
	background-color: #009933; /* large devices ie: mouse (not touch) - changes colour */
	}
	
	main, div#main_content { /* Increase width if more menu items added */
		width: 88%;
		margin: auto;
		background-color: #ffffff;
	}
	
	div.content {
		width: 50%;
		padding: 2% 3%;
		display: table-cell;
	}
	
	div.content_full_width {
		padding: 2% 3%;
	}
	
	div.header_content { /* Increase width if more menu items added */
		width: 88%;
		margin: auto;
	}
	
	.modal_content {
		width: 50%;
		margin: auto;
	}
	
	input.contact_name, input.player_name, input.contact_email, textarea.comments {
		width: 50%;
	}
	
	div.row, div.rowH, div.rowFixtures {
		font-size: 15px;
	}
	
	div.cadcsl_ads {
	width: 21%;
	height: auto;
	margin: 1% 2%;
	}
	
	span.last_modified {
	position: absolute;
	top: 162px;
	left: 9.25%;
	}
	
	p.jump { /* line height for jump links: for larger screens - reverts line height to 18px - same as normal paragraph height */
	line-height: 125%;
	}
	
	p.small_text {
		font-size: 15px;
	}
	
	/* 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> is 159px 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>, so this CSS solves the problem */
	:target::before {
		content: "";
		display: block;
		height: 167px; /* this height for device widths more than 767px wide */
		margin: -167px 0px 0px 0px; /* this negative height for device widths more than 767px wide */
	}
	
	footer {
		font-size: 12px;
	}
}
/* --------------- @ MEDIA ENDS HERE --------------- */