
body {
  background-color: rgb(116, 114, 114);
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}

.YTPadding{
  padding-top: 60px;
  padding-right: 40px;
}

.chequered{
  background-image: url(/images/chequered.jpg);
  background-repeat: repeat;
}

.home-bg{
  background-image: url(/images/bg-3.jpg);
}

.current-races-bg{
  background-image: url(/images/bg-7.jpg);
}

.current-leader-bg{
  background-image: url(/images/bg-1.jpg);
}

.current-leaderclio-bg{
  background-image: url(/images/bg-5.jpg);
}

.current-leaderginetta-bg{
  background-image: url(/images/bg-6.jpg);
}

.current-leaderoverall-bg{
  background-image: url(/images/bg-8.jpg);
}

.sunday-races-bg{
  background-image: url(/images/bg-4.jpg);
}

.sunday-leader-bg{
  background-image: url(/images/bg-2.jpg);
}

.youtuber-bg{
  background-image: url(/images/bg-9.jpg);
}

.home-bg-settings{
  
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.bg-settings{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100vw;
  margin: 0;
}

.dropdown-item {
  color: white;
}

.dropdown-menu > a:hover {
  background-color: darkgrey;
  color: white;
  text-decoration: white underline solid;
}

.dropdown-menu {
  background-color: darkgrey;
}

a {
  color: rgb(255, 255, 255);
}

a:hover {
  text-decoration: rgb(255, 255, 255) underline solid;
  color: rgb(255, 255, 255);
}

.logo {
  content: url(/images/banner.png);
}

.navbar-text {
  font-size: 25px;
  color: rgb(255, 255, 255);
  margin-right: auto;
}

/*Making divs the width of the whole screen*/
.length {
  width: 100%;
  margin: 0;
}



/*As it says*/
.page-heading h2 {
  background-color: black;
  border: 4px solid rgb(250, 250, 250);
  text-align: center;
  color: rgb(211, 211, 211);
  text-decoration: rgb(211, 211, 211) underline;
  padding-bottom: 10px;
  padding-top: 5px;
  margin: 0;
}

/* As it says*/
.main-content {
  margin: 0;
  text-align: center;
  padding: 20px 0px;
}

/*To make the webpage sit in the right place after clicking link*/
.anchor {
  display: block;
  height: 140px; /*same height as header*/
  margin-top: -140px; /*same height as header*/
  visibility: hidden;
}

.top-three {
  color: rgb(255, 255, 255);
}

/*Size of tables*/
.tb-size {
  max-width: 75rem;
}

.tb-size-sun {
  max-width: 50rem;
}

/*Make border black*/
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border: 1px solid rgb(0, 0, 0);
}

/*Vertical align table text*/
.table > tbody > tr > td,
.table > tbody > tr > th {
  vertical-align: middle;
}

/*Vertical align table text*/
.table > thead > tr > th {
  vertical-align: middle;
  background-color: rgba(0, 0, 0, 0.4);
}

/*change table row colours*/
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: rgba(54, 54, 54, 0.8);
}

.table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th {
  background-color: rgba(18, 18, 19, 0.8);
}

.gold tbody > tr:nth-child(1) > td,
.gold tbody > tr:nth-child(1) > th {
  background:rgba(233, 200, 11, 0.88);
}

.silver tbody > tr:nth-child(2) > td,
.silver tbody > tr:nth-child(2) > th {
  background:rgba(192, 192, 192, 0.88);
}

.bronze tbody > tr:nth-child(3) > td,
.bronze tbody > tr:nth-child(3) > th {
  background:rgba(205, 127, 50, 0.88);
}
/*For use when a race has been done*/
.strike-out {
  text-decoration: line-through;
}

.aboutus {
  padding: 0 10%;
}

.youtubers{
  text-shadow: -1px -1px 0 rgb(163, 163, 163), 1px -1px 0 rgb(163, 163, 163), -1px 1px 0 rgb(163, 163, 163),
  1px 1px 0 rgb(163, 163, 163);
}

ul {
  display: inline-block;
  text-align: left;
}

.footer-style{
  background-color: #000;
  border-top: rgb(255, 255, 255) 1px solid;
}

.footer-text{
  text-align: right;
  padding-right: 10%;
}

.TSViewer{

  margin: auto;
}


@media screen and (max-width: 3900px) {
  
  .YTPadding{
    padding-top: 200px;
    padding-right: 40px;
  }
}

/*Mobile settings landscape*/
@media screen and (max-width: 2560px) {
  .logo {
    content: url(/images/banner-s.png);
  }
  .navbar-text {
    font-size: 15px;
  }
  .home-bg {
    padding-top: 10%;
  }

  .anchor {
    height: 70px; /*same height as header*/
    margin-top: -70px; /*same height as header*/
  }

  .TSViewer{

    margin: auto;
    padding-top:10%;
  }

  .YTPadding{
    padding-top: 60px;
    padding-right: 40px;
  }
}

/*Mobile settings portrait*/
@media screen and (max-width: 600px) {
  .logo {
    content: url(/images/banner-s.png);
  }

  .navbar-text {
    font-size: 15px;
  }
  .home-bg {
    padding-top: 11%;
  }

  body {
    font-size: 10px;
  }

  .page-heading h2 {
    font-size: 25px;
  }

  h3 {
    font-size: 20px;
  }

  .home-bg {

    padding-top: 5.5%;
  }

  iframe{
    width: 450px;
    height: 253px;
  }

  .YTPadding{
    padding-top: 300px;
    padding-right: 40px;
  }
}


