/*SHARED STYLES FOR 'ON THE WRONG SIDE!'*/

{box-sizing: border-box;}

/*TOP BANNER.*/
/*The background bannerimage across the top of the page. Size 1597 x 551 pixels.*/
.topbanner {
    background-image: url(Images/HomeBanner3.png);
    background-repeat: no-repeat;
    background-position: left top;
    margin-left: -10px;/*Negative margins are needed to prevent a white border.*/
    margin-top: -10px;
    margin-right: -10px;
    max-width 100%;/*... but subject to the actual width of the image.*/
    max-height: 550px;
}

    
/*NAVIGATION.*/
/*The default colour is white.*/

/*THE CHECKBOX FOR MOBILE DEVICES.*/
.topbanner input{opacity: 0} /*Hides the small 'checked' confimatory rectangle.*/

.mobilenav{
 color: white;
 text-align: center;   
 font-size: 14pt;  
 font-family: Helvetica, Arial, sans-serif;
}

/*The mathematical 'equivalent to' icon. The margins accommodate the large font size needed.*/
.topbanner label div { 
  font-size: 40pt; 
  margin-top:-23px;
  margin-bottom: -20px;
  border-bottom: solid;
}

/*The drop-down navigation links. The margins create agreeable spacing between the icon and the big name header below.*/
.dropdown-content{ 
  display: none; /*Normally invisible.*/
  margin-top: 40px;
  margin-bottom: -20px;
  border-bottom: solid;
}

/*Display when the icon is clicked.*/
.topbanner input:checked~p.dropdown-content{display: block}

/*Hide when the width is > 480 px, implying that normal inline navigation links can then be used.*/
@media screen and (min-width:480px) {
  .mobilenav{display:none}    
}

/*SIMPLE INLINE NAVIGATION LINKS.*/
nav{ 
  padding-top: 30px;
  max-width: 1600px;
  font-family: Helvetica, Arial, sans-serif;
  font-size:16pt;
  color:white;
  text-align: center;
}

/*Turn off when the width is < 480 px.*/
@media screen and (max-width:480px) {
  nav{display:none};    
}

/*ALL TEXT LINKS, INCLUDING THOSE IN 'NAVIGATION'.*/
a:link,  a:visited{ 
    color: #ffde00; /*Dark yellow.*/
    text-decoration: none;
}

a:hover, a:active{
    color: yellow;
    cursor: pointer;
}

a:link:active, a:visited:active { 
    color:purple;
}

/*BOTTOM BANNER, SECONDARY LINK AND COLOPHON.*/
.bottombanner{
    background-color: red;  
    height: 220px;
    margin-left:-10px;/*Negative margins are needed to prevent white margins on the iPhone.*/
    margin-right: -10px;
    margin-bottom: -10px;
    max-width: 1597px; /*Same as the top banner image.*/       
}

/*SECONDARY PAGE IMAGE.*/
.secpagimage{
    padding-top: 30px;
    text-indent: 10px;
    text-align: center
}

/*COLOPHON*/
.colophon{
    Display: block;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    text-indent: 0px;
    padding-top: 10px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 10pt;
    color: white;  
}

/********************************************************************************/