/* Copyright (C) 2022 FleetPrices.co.uk */

* {
    box-sizing: border-box;
}
/* box-sizing causes Google Custom Search button to shrink. CSS below is to overcome this
The !important is to override any other CSS that may be impacting the format. In this case probably Google's */
.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
    height: 26px !important;
    margin-top: 0 !important;
    min-width: 13px !important;
    padding: 5px 26px !important;
    width: 68px !important;
}
/* end of fix */

.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/* Stop header scrolling. The sticky class is added to the header with JavaScript when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

img {
    max-width: 100%;
    height: auto;
	float: left;
	border: 1px solid #EAEAEA;
}

html {
	font-size: 100%;
}

body {
	font-family: roboto, sans-serif;
	background-color: black;
	margin: 0;
	border: 0;
	padding: 5px;
}

.header {
    background-color: White;
    padding: 10px;
	font-size: 100%;
}
.header h1 {
	color: #ccc;
}
.header img {
    max-width: 100%;
    height: auto;
	float: left;
	border: none;
	margin: 0 10px 0 0;
}
.g-signin2 {
	float: right;
}
.menu {
    background-color:#666;
	font-size: 85%;
}
.menu h3 {
	color: #0A92C8;
}
.menu img {
    max-width: 100%;
    height: auto;
	float: left;
	clear: both;
	border: none;
	margin: 0 50px 10px 0;
}
.menu ul ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
	list-style-type: none;
    font-weight: bold;
	color: #0A92C8;
    margin-bottom: 5px;
/*    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
}
.menu li a {
	text-decoration: none;
	color:  #ffffff;
	background-color:#666;
	display: block;
	padding: 4px 5px;
}
.menu hr {
   border: 0;
   height: 1px;
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.menu a:hover {
	color: black;
	background-color: #f1f1f1;
}
.menu p a {
	text-decoration: underline;
	color:  Black;
}
/*
.menu li a.active {
    background-color: DarkRed;
    color: Turquoise;
}

.menu li a:hover:not(.active) {
    background-color: DarkRed;
    color: Turquoise;
}
*/
/*---------------------------------------
Dropdown menu */

.dropbtn {
    display: inline-block;
    color: white;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #f1f1f1;
}

.dropdown {
    display: inline-block;
	width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
	overflow: auto; /*enable scroll on small screens */
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 5px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
/*---------------------------------------*/
.sticky {
  position: sticky;
  width: 1px;
  white-space: nowrap;
}
.main {
	font-size: 80%;
	background-color: #f1f1f1;
}
.main h2 {
	color: #0A92C8;
}
.main h3, h3 a {
	color: #5c8dc5;
	margin-top: 30px;
	line-height: 80%;
}
.main h4 {
	color: #80ced6;
	line-height: 80%;
}
.main p {
	color:black;
}
.main table {
	border-collapse: collapse;
}
.main th a {
	color:  #ffffff;
}
.main td a {
	color:  #000000;
}
.main p a {
	text-decoration: underline;
	color:  Black;
}
.main ul ol {
	color: Black;
}
.main li {
	line-height: 150%;
	color:Black;
}
.main tr {
	text-decoration: none;
	color:  Black;
	text-align: left;
	vertical-align: text-top;
	background-color: #eaeaea;
}
.main tr:nth-child(even) {background-color: #dbd9d9;}
.main tr:hover {
	background-color: #f5f5f5;
}
.main th {
	text-decoration: none;
	border-right: 1px solid rgba(255,255,255,0.3);
	margin: 0;
	padding: 5px 5px;
	color:  #ffffff;
	text-align: left;
	background-color: #999999;
}
.main td {
	text-decoration: none;
	border: 0;
	padding: 5px 5px;
	color:  black;
	text-align: left;
}
.mainrb th:nth-child(1), .mainrb th:nth-child(8), .mainrb th:nth-child(11) {
    text-align: center;
}
.mainrb th:nth-child(6), .mainrb th:nth-child(7), .mainrb th:nth-child(9) {
    text-align: right;
}
.mainrb td:nth-child(1), .mainrb td:nth-child(8), .mainrb td:nth-child(11) {
    text-align: center;
}
.mainrb td:nth-child(6), .mainrb td:nth-child(7), .mainrb td:nth-child(9) {
    text-align: right;
}
.main strong {
	color: black;
}
.main blockquote {
	border-left: solid 2px DarkRed;
	padding-left: 20px;
}
.mainselect td {
    background-color: #757575;
}
.mainselect a {
	text-decoration: none;
	font-weight: bold;
	display: block;
    background-color:white;
	padding: 2px 5px;
	margin: 0 5px;
}
.mainselect a:hover {
    background-color: yellow;
}
.thumbnail {
	float: right;
	clear: right;
}
.footer {
    background-color: DarkRed;
	font-size: 80%;
	text-decoration: none;
}
.footer a {
	text-decoration: none;
	font-weight: bold;
	color:  Black;
}
.advert {
	background-color: Black;
	margin: 40px 0 0 0;
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}