/*
Description: skins page1 style sheet
Author: PH
Created: 21 February 2007
Last modified: 20-Dec-2023
*/

/* --- BODY --- */
body {
    font-family: "Trebuchet MS", Verdana, Sans-serif;
    background-color: white; color:#000; padding:0 0 0 0; margin:0 0 0 0;
    background-image: url('../images/skins-background1.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    line-height: 100%;
    line-height: normal;
    text-shadow: none !important;
}


/* --- HEADINGS and PARAGRAPHS --- */
h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Verdana, Sans-serif;
    font-weight: 700; /* 100 to 900, normal is 400, bold is 700 */
}
h1 {font-size: 2.0em;} /* 40px/16=2.5em */
h2 {font-size: 1.5em;} /* 30px/16=1.875em */
h3 {font-size: 1.17em;} 
h4 {font-size: 1.0em;} 
h5 {font-size: 0.83em;} 
h6 {font-size: 0.67em;} 
p {font-size: 1.0em;} 

h1,p {margin: 6px 12px;} /* Adds space between columns */
h3 {margin: 15px 0 0 0}
h4, h5 {margin-left: 15px}
h2, h3 ,h4 {color:#339}
hr {
    width: 100%;
    height: 1px;
    color: silver;
    background-color: transparent;
}


/* These color rules need to coincide with body attributes to work in NN4 */
a, a:link {
	color: #339;
	font-weight: bold;
	text-decoration: none;
	}

a:visited {
	color: #669;
    color: #339;
	}

a:hover {
	background-color: #fff;
	color: #339;
	}

a:active {
	background-color: #fff;
	color: #339;
    }    

/* --- CONTAINER --- */
#container {
  width: 990px;
  border: 1px solid gray;
  background-color: #bfe2f9;
  margin-left: auto; margin-right: auto;
  text-shadow: none;
}


/* --- MASTHEAD --- */
#masthead {
  background: white;
  padding: 0px; margin: 4px;
  border: solid 1px;
  border-color: gray; /* dark green */
  text-shadow: none;
}
.masthead-table {
  width: 100%;
  padding: 0px; margin: 0px;
  border: solid 0px;
  margin-left: auto; margin-right: auto;}

.masthead-breadcrumb {
  padding: 2px; margin: 0px;
  border: solid 0px;
  width: 33%;
  color: green;
  font-size: 8pt; font-weight: bold;}

.masthead-breadcrumb a:link,
.masthead-breadcrumb a:visited, 
.masthead-breadcrumb a:active {
    color:navy;
}
.masthead-breadcrumb a:hover {
    color: gray;
} 

.masthead-centre {
  padding: 2px; margin: 0px;
  border: solid 0px;
  width: 33%;
  text-align: center;
  color: black;
  font-size: 8pt; font-style: normal; font-weight: normal;}

.masthead-right {
  padding: 2px; margin: 0px;
  border: solid 0px;
  width: 33%;
  text-align: right;
  color: green;
  font-size: 8pt; font-weight: bold;}


/* --- MENU --- */
#menu {
    float: left;
/*    top: 250px; */
/*    left: 5%; */
    background-color: #bfe2f9;
    width: 150px;
/*    z-index: 3; */
   margin: 0px;
   border: 0px;
   padding:4px;
   text-shadow: none;
}

#menu a {
    display: block;
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    font-size: 9pt;
    font-weight: bold;
    line-height: 120%;
    color: navy;
    margin: 0px;
    border: 0px;
    padding: 2px 10px 2px 10px;
}

#menu a:link.current, #menu a:visited.current {
    color: white;
    background-color: navy;
}

#menu a:hover {
    color: navy;
    background-color: white;
}

#menu a:hover.current {
    color: #FF0;
    color: gray;
    background-color: navy;
    cursor: default;
}

#menu h4 {color: navy; margin-left: 10px;}

/* #menu h5 {color: #bfe2f9; margin-left: 10px;} */

#menu p {font-size: 8pt; color: black; padding: 2px; margin: 1px;}
#menu li {font-size: 8pt; color: black; padding: 2px; margin: 1px;}


.local-rules {
}
.local-rules ul {
    padding-left: 2px;
    list-style-position: inside;
}

/* --- MAIN --- */
#main {
    float: left;
    width: 600px;
    background-color: white; 
    margin: 0px;
    border: 1px solid gray; 
    padding: 10px 10px 10px 10px;
    text-shadow: none;
}
#main a {color:blue;}
#main p, #main li {font-size: 10pt; color: black; padding: 2px; margin: 1px;}
#main blockquote {font-size:10pt; color:blue; font-style:italic;}
#main h3 {font-size: 16pt; color: navy; margin: 5px 0 0 0;}
#main h4 {font-size: 14pt; color: blue; margin: 5px 0 0 0;}
#main h5 {font-size: 12pt; color: blue; margin: 5px 0 0 0;}
#main h6 {font-size: 10pt; color: blue; margin: 5px 0 0 0;}
/* Paragraph tabs */
#main .tab, #main .tab1 {margin-left:20px;}
#main .tab2 {margin-left:40px;}

#main_rules {
    background-color: #bfe2f9;
    margin-top:5px; margin-bottom:10px;
    border: 1px solid gray;
    padding: 15px;
}
#main_rules h1, #main_rules h2, #main_rules h3, #main_rules h4, #main_rules h5, #main_rules h6 { color: black; font-weight: bold; }
#main_rules h1 { font-size:14pt; color:navy; margin-left:0px;}
#main_rules h2 { font-size:13pt; color:blue;}
#main_rules h3 { font-size:12pt; color:blue;}
#main_rules h4 { font-size: 11pt; }
#main_rules h5 { font-size: 10pt; text-transform: uppercase; }
#main_rules h6 { font-size: 10pt; }
#main_rules p, #main_rules li { color: black; font-size: 10pt; }
#main_rules em {font-style:italic; font-size: 11pt; font-weight:700; color: navy;}
#main_rules .red {color:red; font-weight:bold;}
#main_rules ul { margin-top: 2px; margin-bottom: 2px; } 
#main_rules li {background-color: transparent;}

#main_rules .indent {margin-left:30px; margin-right:30px;}
#main_rules .accent p{color:navy;}
/* Paragraph tabs */
#main_rules .tab, #main_rules .tab1 {margin-left:20px;}
#main_rules .tab2 {margin-left:40px;}


.notes {
    background-color: orange;
    background-color: transparent;
    margin-left: 0px;
    margin-right: 10px;
    border: 0px;
    padding: 0px 0px 0px 0px;
    list-style: none;
}
.notes li {font-size: 0.80em; font-style: italic;}

/* image styles */

.image_right{
    width: 40%;
    height: auto;
    float: right;
    clear: right;
    background-color:gray;
    margin: 5px 0 10px 10px;
    border: 0px;
    padding: 0;
}
.image_right img {
    border: 1px solid gray;
}

.image_desc {
    width: auto;
    font-size: 8pt;
    font-weight: normal;
    background-color:gray;
    color: white;
    text-align: center;
    margin:4px 4px 4px 4px;
    border:0px;
    padding:0px;
}

/* photo styles */

.photo {
    float: right;
    clear: right;
    margin: 5px;
    background-color: gray;
    border: 1px solid gray;
}
.photo img {
    display:block;
}
.photo2 {
    float: left;
    clear: right;
    margin: 5px 15px 5px 5px;
    background-color: transparent;
    border: 0px;
}

/* Presentation photo styles */

.photo_presentation {
    float: right;
    clear: right;
    background-color:gray;
    margin: 5px 0 10px 10px;
}
.photo_presentation img {
    display:block;
    margin: 0;
    border: 1px solid gray;
    padding: 0px;
}



.photo_right {
    float: right;
    clear: right;
    height:auto;
    width:auto;
    background-color:gray;
    margin: 5px 0 10px 10px;
    border: 0;
    padding: 0;
}
.photo_right a {
    display: inline;
    font-size: 8pt;
    font-weight: normal;
    color: blue;
    padding: 5px;
    margin: 5px;
}
.photo_right img {
    display:block;
    margin: 0;
    border: 1px solid gray;
    padding: 0px;
}

.gallery_photo_right {
    float: right;
    clear: right;
    height:auto;
    width:auto;
    background-color:gray;
    margin: 5px 0 10px 10px;
    border: 0;
    padding: 0;
}
.gallery_photo_right a {
    background-color:gray;
}
.desc {
    width: 290px;
    width: auto;
    font-size: 8pt;
    font-weight: normal;
    background-color:gray;
    color: white;
    text-align: center;
    margin:4px 4px 4px 4px;
    border:0px;
    padding:0px;
}

.photo_left {
    background-color:gray;
    height:auto;
    width:auto;
    float: left;
    clear: left;
    margin:8px 0px 8px 0px;
    border: 0px;
    padding: 0px;
    text-align:center;
}
.photo_left img,
.photo_left a,
.photo_left a:link, .photo_left a:visited, .photo_left a:hover, .photo_left a:active {
    display:block;
    margin: 0;
    border: 1px solid gray;
    padding: 0px;
    color: gray;
    background-color: gray;
    text-decoration: none;
}

.photo_left_a {
    float: left;
    clear: left;
    background-color: transparent;
    margin:12px;
    border: 1px solid transparent;
    padding: 0px;
}

.photo_centre {
    margin:0 0 0 -1px;
    border:0;  
    padding:0;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}
.photo_centre img {
    display: block;
    margin: 0 auto;
    border: 1px solid gray;
    padding: 0px;
}

.photo_array {
    display: block;
    float: left;
    clear: both;
    background-color: aqua;
    background-color: white;
    margin: 10px 0px 10px 2px;
    border: 0px solid gray;
    padding: 0px;
}

.photo_array img {
    margin: 0;
    border: 1px solid gray;
    padding: 0px;
}
.photo_array_desc {
    width: auto; 
    font-size: 8pt;
    background-color: gray;
    color: white;
    text-align: center;
    margin: 0 auto;
    border: 0px;
    padding: 4px 0px 4px 0px;
}
.photo_array_right {
    display: block;
    float: right;
    clear: both;
    background-color: white;
    margin: 10px 0px 10px 10px;
    border: 0px;
    padding: 0px;
}

/* xmas photos */

.xmas-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.xmas-image {
    flex-basis: 240px;
    order: 2;
}
.xmas-image img {
    max-width: 100%;
    border: 1px solid grey;
}
.xmas-text {
    flex-basis: 360px;
    order: 1;
    padding-left: 0px;
    padding-right:10px;
}

/* Image Modal Settings */

.presentation {
    float: right;
    margin-left: 10px;
}
.presentation-caption {
    width: auto;
    height: 20px;
    font-size: 8pt;
    font-weight: normal;
    background-color:gray;
    color: white;
    text-align: center;
    margin: -4px 0px 0px 0px;
    border:0px;
    padding:5px 0px 0px 0px;
}
#myImg {
/*  border-radius: 5px; */
    border: 1px solid gray;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 70%;
  max-width: 1024px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 70%;
  max-width: 1024px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

/* BANNER */

.banner_left { float: left; clear: left; }
.banner_center {clear: both; padding-left: 65px; }
.banner {clear: both; }

.main_title {
       font-size: 14pt;
       font-weight: bold;
       text-align: center;
       text-decoration: underline;
       color: blue;
       margin: 5px 0 0 0; }

.main_hitcount {
    clear:both;
       font-size: 8pt;
       font-weight: normal;
       text-align: center;
       text-decoration: none;
       color: navy;
       margin: 5px 0 0 0;
       border: 0;
       padding: 10px 2px 2px 2px;
}

/* Round Points Display Settings */

.points-cols {
    width: 160px;
    width: 180px;
    height: 30px;
    background-color: transparent;
    margin-left: auto; margin-right:auto;
    border: 0px solid black;
    padding: 0px;
}
.points-col1, .points-col2 {
    padding: 10px;
    border: 1px solid black;
    min-height: 100px;
    float: left;
    background-color: #d4ecfb;
}
.points-col1 {
    text-align: left;
    width: 100px;
    border-right: 0px solid transparent;
}
.points-col2 {
    text-align: right;
    width: 30px;
    border-left: 0px solid transparent;
}
/* Champions Columns Display Settings */

.champions-cols {
    width: auto;
    height: 30px;
    background-color: green;
    background-color: transparent;
    margin-left: 10px; margin-right: 0;
    margin-left: auto; margin-right:auto;
    margin-top: 0px;
    border: 0px solid black;
    padding: 0px;
}
.champions-col1, .champions-col2, .champions-col3 {
    padding: 10px;
    min-height: 100px;
    float: left;
    background-color: #ebf5fc;
    background-color: transparent;
}
.champions-col1 {
    text-align: left;
    width: auto;
}
.champions-col2 {
    text-align: left;
    width: auto;
}
.champions-col3 {
    text-align: left;
    width: auto;
}




.main-table {
  width: 30%;
  padding: 0px; margin: 0px;
  border: solid 1px;
  background: silver;
  color: black;
  margin-left: auto; margin-right: auto;
  font-family: "Arial";
  font-size: 9pt; font-weight: normal;}

.main-table th {font-weight:bold;}
.main-table td {text-align: left; padding:4px;}

.match-table {
  width: 30%;
  width: auto;
  padding: 0px; margin: 0px;
  border: solid 1px;
  background: silver;
  margin-left: auto; margin-right: auto;
  margin-top: 10px;
  margin-left: 20px;
  font-family: "Arial";
  font-size: 10pt; font-weight: normal;}

.match-table th, .match-table td {
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;}

.main-table2 {
  float: right; clear: right;
  width: auto;
  padding: 5px; margin: 5px;
  border: solid 1px; border-color: black;
  background: silver;
/*  margin-left: auto; margin-right: auto; */
  font-family: "Arial";
  font-size: 9pt; font-weight: normal;
  line-height: 90%; color: blue;}

.main-table3 {
  width: 40%;
  padding: 0px; margin: 0px;
  border: solid 1px;
  background: #E0E0E0;
  margin-left: auto; margin-right: auto;
  font-family: "Arial";
  font-size: 9pt; font-weight: normal;
}

.main-table3 td {
    text-align: center;
}

.main-table4 {
  width: 50%;
  padding: 0px; margin: 0px;
  border: solid 0px red;
  background: transparent;
  margin-left: auto; margin-right: auto;
  margin-left: 0; margin-right: 0;
  font-family: "Arial";
  font-size: 10pt; font-weight: normal;
}

.main-table4 td, .main-table4 th {
    text-align: left;
}

.main-table5 {
    float:left;
  width: 30%;
  padding: 0px; margin: 0px;
  border: solid 1px grey;
  background: silver;
  margin-left: 10px; margin-right: 0;
  font-family: "Arial";
  font-size: 9pt; font-weight: normal;
}

.main-table5 td, .main-table5 th {
    text-align: left;
}

.main-table6 {
  width: 60%;
  padding: 0px; margin: 0px;
  border: solid 1px;
  background-color: #E0E0E0;
  margin-left: auto; margin-right: auto;
  font-family: "Arial";
  font-size: 9pt; font-weight: normal;
}

.main-table6 td {
    text-align: center;
}

/*
Used for:
1. Xmas club use table, 
*/
.main-table7 {
  width: auto;
  padding: 0px; margin: 0px; border: 0px;
  background: transparent;
  margin-left: 20px; margin-right: 0;
  margin-top: 10px; margin-bottom: 20px;
/*
font-family: "Arial", sans-serif;
*/
font-size: 10pt; font-weight: normal;
  }

.main-table7 td, .main-table7 th {
    margin:0px;
    border: 0px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
}



.menu-table {
  width: 80%;
  margin-left: 0px; margin-right: 0px;
  margin-top: 10px;
  margin-bottom: 8px;
  border: solid 1px silver;
  padding: 0px;
  background: white;
  margin-left: auto; margin-right: auto;
  font-family: "Arial";
  font-size: 9pt; font-weight: normal;}

.menu-table a, .menu-table td {
  color: black;
  text-align: center;
  width: 33%;
  }

#main .menu-table td a:link,
#main .menu-table td a:visited,
#main .menu-table td a:active {
    color: black;
}   
#main .menu-table td a:hover {
    color: silver;
}   
  
.toc-table {
  width: 80%;
  margin-left: 0px; margin-right: 0px;
  margin-top: 10px;
  margin-bottom: 8px;
  border: solid 1px silver;
  padding: 10px;
  background: white;
  margin-left: auto; margin-right: auto;
  font-family: "Arial";
  font-size: 10pt; font-weight: normal;}
.toc-table a, .toc-table td {
  color: black;
  text-align: center;
  width: 33%;
  }
.toc-table a:hover {
  color: silver;
  }

.divider {
    clear:both;
    height:5px; width:100%;
    background-color:#bfe2f9;
    margin-top:15px; margin-bottom:15px;
    margin-left:auto; margin-right:auto;
    border:1px solid silver;
    padding:0;
  }  
  
.spacer {
    clear:both;
    height:20px; width:100%;
    background-color:transparent;
    margin:0;
    border:0;
    padding:0;
  }  
  
.spacer-20px {
    clear:both;
    height:20px; width:100%;
    background-color:transparent;
    margin:0;
    border:0;
    padding:0;
  }  
  
.spacer-10px {
    clear:both;
    height:10px; width:100%;
    background-color:transparent;
    margin:0;
    border:0;
    padding:0;
  }  
  
.spacer-5px {
    clear:both;
    height:5px; width:100%;
    background-color:transparent;
    margin:0;
    border:0;
    padding:0;
  }  
  
.return_to_top:link, .return_to_top:visited, .return_to_top:hover {
    float: right;
    font-size: 0.7em;
    font-weight: normal;
    color: navy;
}
.return_to_top:hover {
    color: black;
    text-decoration: underline;
}

/*
.main-td {
  padding: 2px; margin: 0px;
  border: solid 1px;
  width: 50%;
  font-size: 8pt; font-weight: bold;}
*/

/* --- Rule Changes --- */
#new-rules h1 {
    color: black;
    font-size: 2.0em;
    font-weight: normal;
}
#new-rules h2 {
    text-transform: uppercase;
    color: black;
    font-size: 1.0em;
}
#new-rules h3 {}
#new-rules h4 {
    color: blue;
    font-size: 0.9em;
    font-weight: bold;
}
#new-rules p {
    color: black;
    font-size: 0.8em;
    font-weight: normal;
}

#new-rules a {
    font-weight: bold;
    color: blue;
}

#new-rules a:link {}
#new-rules a:visited {}
#new-rules a:hover {color: black;}
#new-rules a:active {color: red;}

/* --- COLUMNS --- */
/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
}
.row {
    
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* --- ADVERT1 --- */
#advert1 {
  float: left;
  width: 210px;
  background-color: green;
  background-color: #bfe2f9;
  margin: 0px 0px 6px 0px;
  border: 0px;
  padding: 0px;
}
#advert1 h3 {color: red; margin: 2px;}
#advert1 h4 {color: red; margin: 2px;}
#advert1 h5 {color: red; margin: 2px;}
#advert1 p {
    color: gray;
    font-size: 8pt;
    text-align: center;
    margin:2px 0px 2px 0px;
    border: 0px;
    padding:0px;
}
#advert1 a {
    background-color: transparent;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
#advert1 a:link, #advert1 a:hover, #advert1 a:visited {
    background-color: transparent;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
#advert1 img {
    background-color: white;
    width: 194px;
    margin: 0px 0px 0px 4px;
    border: 1px solid gray;
    padding: 3px;
}

/* --- ADVERT2 --- */
#advert2 {
  float: left;
  width: 210px;
  background-color: green;
  background-color: #bfe2f9;
  margin: 0px 0px 6px 0px;
  border: 0px;
  padding: 0px;
}
#advert2 h3 {color: red; margin: 2px;}
#advert2 h4 {color: red; margin: 2px;}
#advert2 h5 {color: red; margin: 2px;}
#advert2 p {
    color: gray;
    font-size: 8pt;
    text-align: center;
    margin:2px 0px 2px 0px;
    border: 0px;
    padding:0px;
}
#advert2 a {
    background-color: transparent;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
#advert2 a:link, #advert2 a:hover, #advert2 a:visited {
    background-color: transparent;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
#advert2 img {
    background-color: white;
    width: 160px;
    margin: 0px 0px 0px 22px;
    border: 1px solid gray;
    padding: 3px;
}


/* --- NEWS --- */
#news {
  float: left;
  padding: 2px; margin: 2px;
  width: 200px;
  background-color: #bfe2f9;
  text-shadow: none;
}
#news a,
#news a:link, #news a:visited, #news a:hover, #news a:active {
    background-color: transparent;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
#news img {
    margin: 0px;
    border: 1px solid gray;
    padding: 0px;
}

#news h3, #news h4, #news h5, #news h6 {color: navy; margin-left: 10px;}
#news p {font-size: 0.8em; margin-left:10px;}
#news li {font-size: 0.8em; padding: 1px; margin:1px;}


/* --- RSS2 --- */

.rss2 {
    font-family: "Arial", "Helvetica", sans-serif;
    font-weight: bold;
    color: red;
    background-color: transparent;
    margin: 5px;
    border: 0px solid green;
    padding: 0px;
}
.rss2 a:link, .rss2 a:visited, .rss2 a:hover, .rss2 a:active {
    text-decoration: none;
    color: black;
    background-color: transparent;
}
.rss2 a:link, .rss2 a:visited {
    color: black;
}
.rss2 a:hover, .rss2 a:active {
    color: #959595;
}

.rss2 ul {
    background-color: transparent;
    list-style: none;
    margin: 0px;
    border: 0px solid white;
    padding: 0px;
}

.rss2 ul li {
    height: 24px;
    margin: 5px 5px 5px 10px;
    border: 0px solid white;
    padding: 6px 0px 0px 38px;
    background: transparent url("../rss/rss.png") no-repeat scroll 1px 1px;
}

/* Skins Twitter display Styles */
.skins-twitter {
    background-color: transparent;
}

/* --- CALENDAR --- */
#calendar {
  background:#339;
  color:white;
  padding:5px;
  margin-left:15px;
  margin-top:15px;
  margin-bottom:20px;
  font-size: 1.0em;
  width:300px; /* 20-May-2020 260 to 300 */
  float: right;
  clear:left
}
#calendar h3 {font-size: 1.2em; margin:0; color: white; }
#calendar p {font-size: 0.80em; color:white;}
.dates {
    width:300px;  /* 20-May-2020 260 to 300 */
    height:10.0em; 
    overflow:auto;}


/* --- FOOTER --- */
#footer {
    clear: both; 
    padding: 1px; 
    background: #bfe2f9;
    text-shadow: none;     
}
#footer p {
        font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
        font-size: 8pt;
        color: navy; text-align: center;
}
#footer a:link, #footer a:visited,  #footer a:active {
    color: navy;
} 
#footer a:hover {
    color: navy;
    background-color: white;
}