/* CSS Document for the table style */

/* Define some global colors */
:root
{
 --TopBoxColor:          #005ce6;
 --BoxBottomColor:       #3385ff;
 --BoxTopColor:          #005ce6;
 --OutsetColor:          #005ce6;
 --MenuTextColor:        #fff;
 --BorderRadius:         15px;
 --ButtonRadius:         10px;
 --TableBorder:          #002966;
}

.parallax 
{
 /* The default image used */
 background-image: url("/wvbirder.org/recent/astro/tristate/Sh2-221_sh2-216.jpg");

 /* Set a specific height */
 min-height: 500px; 

 /* Create the parallax scrolling effect */
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

/* These classes are used only to format the top header */

.TopMenu
{
 text-align: center;
 padding: 20px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-size: 36pt;
 color: yellow;
}

.SmallItalic 
{
 font-size: .40em;
 font-style: italic;   
}

.TopBox
{
 max-width: 700px;
 height: 70px;
 margin-left: auto;
 margin-right: auto;
 background-color: var(--TopBoxColor);
 border: 4px outset var(--OutsetColor);
 border-radius: var(--BorderRadius);

}

/* Buttons for the header */
.MainButton 
{
 border: 4px inset var(--OutsetColor);
 width: 100px;
 padding: 3px 15px;
 margin: 5px;
 color: var(--MenuTextColor);
 background-color: var(--TopBoxColor);
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 font-weight: bold;
 text-align: center;
 text-decoration: none;
 border: 4px outset var(--OutsetColor);
 border-radius: var(--ButtonRadius);
}

/* MoonBox() and ContactBox() use these as the basic div style */
.sectioncontent 
{
 font-size: 9pt;
 color: black;
 font-weight: normal;
 font-family: verdana, arial, sans-serif;
 padding: 5px;
 margin: 10px;
 text-align: center;
}

.sectioncontent2 
{
 font-size: 10pt;
 color: white;
 font-weight: bold;
 font-family: verdana, arial, sans-serif;
 padding: 5px;
 margin: 10px;
 text-align: center;
}

/* For the taas@taas.org email address on the left menu */
.redborder 
{
 height: 20px;
 width: 100px;
 color: orange; /* changed from red - MTO */
 font-size: 12pt;
}


/* All this is for the flyouts in the side menu */

.NavLeftColumn
{
 float: left;
 background-color: var(--BoxBottomColor);
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 font-weight: bold;
 text-align: center;
 text-decoration: none;
 border: 8px outset var(--OutsetColor);
 border-radius: var(--BorderRadius);
}

/* This class is used for anchors inthe main 
side menu item, wheher they have a flyout or not 
the text color must be here to override default
hover and visited issues */
.navbar 
{
/* text-decoration: none; */
 color: var(--MenuTextColor);
 margin: 15px;
 display: block;
}

nav a 
{ 
 text-decoration: none;
 display: block; 
}

nav ul
{
 list-style: none;
 text-align: center
}

nav ul li 
{ 
 text-align:center;
}

nav > ul > li 
{
 position: relative;
 right: 20px; /* This was needed to get the menu text to center  */
}

nav > ul > li > a 
{ 
 padding: 0px;
 display: block;
}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }

/* Dropdown Menu */
nav ul li ul 
{ 
 position: absolute;
 left: 90%;
 bottom: -11px;
 width: 80%; 
 padding: 5px;
 padding-left:0px;
 display: none; 
}

nav ul li ul li 
{ 
 text-align: center;
 color: #444;
 border-style: solid;
 border-width: 1px;
 border-color: #000; 
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: light;
 text-align: left;
  padding: 3px
}

nav ul li:hover ul 
{ 
 display: block; 
 opacity: 1;
 background: lightgray;
}

/* Used for the bottom text HTMLBottom() */

.Footer
{
 border: 6px outset #eef;
 padding: 3px 15px;
 margin: 5px;
 color: black;
 background-color: var(--BoxBottomColor);
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 font-weight: bold;
 text-align: center;
 text-decoration: none;
 border-radius: var(--BorderRadius);
}


/* produce the rounded gradient boxes.  Each box is a separate
table.  The table is rounded with a gradient fill and outset.  The
cells simply have a transparent background */

.RoundTable
{
 width: 95%;
 margin: 20px;
 background-color:white;
 border: 8px outset  var(--OutsetColor);
 border-radius: var(--BorderRadius);
 background: linear-gradient(to bottom, var(--BoxTopColor), var(--BoxBottomColor));
}

.RoundCell
{
 /* width: 1000px;  MTO */
 background-color:rgba(0, 0, 0, 0);
 padding-left: 10px;
 padding-right: 10px;
 display:table-cell;
 color: white; /* changed for black - MTO */
}
.TopRoundCell
{
 background-color:rgba(0, 0, 0, 0);
 padding-top: 20px;
 padding-left: 10px;
 padding-right: 10px;
 display:table-cell;
 vertical-align: text-top;
}
.EventTable 
{
 width: 100%;
 border-collapse: collapse;
}


.EventTable  td, .EventTable  th 
{
 font-size: 1em;
 border: 1px solid var(--TableBorder);
 padding: 3px 7px 2px 7px;
}


.EventTable  th 
{
 font-size: 1.1em;
 text-align: center;
 padding-top: 5px;
 padding-bottom: 4px;
 background-color: var(--TableBorder);
 color: white;
}

.numeric { text-align: center 

.TableCell 
{
 padding-top: 8px;
 padding-bottom: 8px;
 padding-left: 15px;
 padding-right: 15px;
 text-align:center;
font-family: "Aller_Rg";
 font-size: 12pt;
  background-color: var(--BoxBottomColor);
}

h1 
{
text-outline: 2px 2px #ff0000;
}


/* Standard page main content formatting */






/*
td { border: solid 2px red; }
table { border: solid 2px green; }
*/