body {background-image: url(images/Topofpage-Blk.png);}
/*#  ____8FFEB2*/
head {background-color:#33333;}/* #b8f5c8*/

body {background-size: 100%;}
body {background-repeat: no-repeat;}
body {background-color:#222222;} 
body {background-position: center top;}

 {padding-top: 0px;}
td {background-color:#E6F4FA; #D9F1FA#
    padding-left:10;
    padding-top:0;
    padding-right:10;
    padding-bottom:10;
    border-color: blue;
    border-all: 2px;
    size: 50%;
}
/* keep images centered inside cells */
td img {
  display: block;
  margin: 0 auto;
}



h1 {color:#33333;}

dropbtn {
  background-color:Black         <!--Dropdown colour-->
  color: #e38a05;                   <!--Dropdown Colour when hover-->
  padding: 12px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #Tan;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color:white;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: lightblue;}
.dropbtn {
  background-color: lightblue;<!--Button colour-->
  color: white;
  padding: 16px;
  font-size: 16px;
  border: 3px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightblue;;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: #black;       
  padding: 16px 16px;
  text-decoration: none;
  display: block;
}
.button {
  border: none;
  color: white;
  padding: 14px 20px;
  text-align: center;
  text-decoration: none;  /*This didn't work! Had to add style="text-decoration:none" just after the <a and before href in html*/
  display: inline-block;
  min-width: 150px;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  text-decoration: none;
  background-color: #e38a05; /* This is Button colour*/
  color: red; 
  border: 2px solid #04AA6D;
}

.button1:hover {
  background-color: lightgreen;
  text-decoration: none;
  color: black;   /*This is hover text colour*/
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}
table#body1 {
    padding: 0px;
    vertical-align: top;
    margin-bottom: 10px;
    margin-top: 5px;
}
td#images { 
    width: 30%;
}
td#text {
    width: 70%;
    padding-left: 15px;
    text-align: justify;
    vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: white;     /* default link color */
}

a:visited {
  color: black;   /* color after the link has been clicked */
}

a:hover {
  color: red;      /* when the mouse is over the link */
}

a:active {
  color: orange;   /* when the link is being clicked */
}
</style>
</head>
<body>

<a href="https://example.com">Visit Example</a>

</body>
</html>
