@charset "UTF-8";
/* CSS Document */
/* corrected by W3C  21-2-2021*/
/* Definition and Usage

The :hover selector is used to select elements when you mouse over them.

Tip: The :hover selector can be used on all elements, not only on links.

Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective! 

Added .trophnav for the awards pages 23/3/2023 */

* {
font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
box-sizing : border-box;	
}

/* centre all tables */
table{
	margin: auto;
}

body {
	background-image: url("../images/background/backimage.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-attachment: fixed;	
	background-position: center;
	height: 100%;
}

.maindiv{
	color: black; 
	background-color: white;
	text-align: center;
	width: 800px;
	margin: auto;
	border: thin;
	box-shadow:2px 3px 5px 5px white;
}

@media only screen and (max-width: 1100px) {
  body {
    background-image: none;
  }
	.maindiv{
		box-shadow: none;
	}
}

img{
	border: 4px solid #cecece;	
}

.arow {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.acolumn {
  flex: 50%;
  padding: 10px;
}
/* button for video start/stop */

video{
  padding:5px;
  box-shadow: 5px 5px 7px 7px rgba(33,33,33,.7);
}



button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 30px;
  text-align: center;
  text-decoration:none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  border-radius: 10px;
} 

/* second attemt at a nav bar starts here */
.topnav{
	overflow: hidden;
	background-color: #ccffff;
	width: 800px;
}
.trophnav{
    overflow: auto;
    background-color: antiquewhite;
    width: 800px;
}
.trophnav a {
	float: left;
	color: blue;
	text-align: center;
	padding-bottom: 2px;
	padding-top: 2px;
	text-decoration: none;
	font-size: 17px;
	width: 33.3%;
}
.topnav a {
	float: left;
	color: blue;
	text-align: center;
	padding-bottom: 7px;
	padding-top: 7px;
	text-decoration: none;
	font-size: 17px;
	width: 20%;
}
.topnav a:hover{
	background-color: #ddd;
	color: black;	
	
}
.topnav a.active{
	background-color: #04aa6d;
	color: white;
}

/* and ends here */
.piccolumn1:hover{
  -ms-transform: scale(2.0); /* IE 9 */
  -webkit-transform: scale(2.0); /* Safari 3-8 */
  transform: scale(2.0); 
}
.piccolumn2:hover{
  -ms-transform: scale(2.0); /* IE 9 */
  -webkit-transform: scale(2.0); /* Safari 3-8 */
  transform: scale(2.0);   
}
.piccolumn1 {
float : left;
width : 20%;
padding : 2px;
transition: all 1.5s;	
}
.piccolumn2 {
float : left;
width : 25%;
padding : 3px;
transition: all 1.5s ;
}
.row::after {
content : "";
clear : both;
display : table;
}
.norm {
text-align : left;
color : midnightblue;
font-size : 16px;
text-decoration : none;
}
.norm_c {
text-align: center;
color : midnightblue;
font-size : 16px;
text-decoration :none;
font-style: italic;	
}
.small {
text-align : left;
background-color : white;
color : midnightblue;
font-size : 12px;
text-decoration : none;
font-style: italic;	
}
.header {
text-align : center;
background-color : white;
color : #009999;
font-size : 23px;
text-decoration : none;
font-weight : bold;
}
.large {
text-align : left;
background-color : white;
color : black;
font-size : 19px;
text-decoration : none;
}
.headlines {
text-align : center;
background-color : red;
color : white;
border-radius : 10px;
padding : 20px;
text-transform : uppercase;
}
/* I dont think we need this any more. Replaced with topnav
.navbar {
width : 800px;
background-color : #CCFFFF;
margin-left : auto;
margin-right : auto;
}
.navbar a {
padding-top : 2px;
text-decoration : none;
font-size : 17px;
width : 16.5%;
text-align : left;
border : green solid 0;
color: blue;
}
.navbar a:hover {
color : blue;
font-weight : bold;
text-decoration : underline;
}
.navbar a.active {
color : blue;
} */

a:hover {
color : blue;
font-weight : bold;
text-decoration : underline;
}
.h22 table {
align-content : center;
font-family : arial, sans-serif;
border-collapse : collapse;
width : 100%;
}
.h22 td, th {
border : #dddddd solid 1px;
text-align : left;
padding : 12px;
}
.h22 tr:nth-child(even) {
background-color : #dddddd;
}
.advert div {
border : gray solid 1px;
padding : 8px;
}
.advert h1 {
text-align : center;
text-transform : uppercase;
color : #4CAF50;
}
.advert p {
text-indent : 10px;
text-align : justify;
letter-spacing : 1px;
color : midnightblue;
}
.blink {
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
      }
      @keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }
      @-webkit-keyframes blink-animation {
        to {
          visibility: hidden;
        }
      }