body, table, select, input { font-family: arial; font-size: 12pt }
body { margin: 0; background-image: URL('pinkBG2.jpg');  }
table { background-color: background-image: URL('pinkBG2.jpg') }

.themeColor { color: black }
.stdbg { background-color: rgb(237,220,228) }
.bodybg { background-color: white }

div.body { margin: 10px 5px 10px 5px }
div.welcome { margin: 10px 0 0 20px; font-size: larger; text-align: left }

#MAIN { width: 100%; background-color: transparent }  /* Main composition area <TABLE> */

table.layout, #MAIN { border-spacing: 0; border-collapse: collapse; }
table.layout tr, #MAIN tr { vertical-align: top; }

/* Home Page Introduction */
div.intro { width: 90%; margin: auto; margin-top: 30px; text-align: left; font-size: 14pt; text-align: left; background-color: white }
div.intro fieldset { border: 1px solid black; background-color: white }

/* Members only, Message to Members */
div.mmesg { width: 90%; margin: auto; margin-top: 30px; text-align: left; font-size: 14pt; text-align: left; background-color: white }
div.mmesg fieldset { border: 1px solid black; background-color: white }

#sidebar, #sidebar a:link, #sidebar a:hover, #sidebar a:visited  { font-size: 11pt; font-weight: bold; color: white; line-height: 22px}
#sidebar { background-color: rgb(95,0,95) }
/* div.SBlink defines link formatting on sideBar DIVs */
#memberbar, #memberbar a:link, #memberbar a:hover, #memberbar a:visited  { font-size: 14pt; color: white; }
#memberbar { background-color: rgb(95,0,95) }
.sideBarImgWidth { width: 150px }

/* Meeting date, time, location */
div.location { text-align: center; margin-top: 10px; font-size: 14pt }

table.CAL { margin: auto; margin-top: 20px; width: 75%; border-collapse: collapse; }
table.CAL td { border: 1px solid black; text-align: left }
table.CAL th { border: 2px solid black }

table.CAL tr.header { text-align: center; background-color: rgb(171,102,102); color: black; 
  font-family: 'Comic Sans MS',Arial; font-size: 12pt;
}

/* Directory page, cell gradients */
table.direc { border-spacing: 6px 3px; border-collapse: separate; margin: auto; background: transparent }
table.direc tr { vertical-align: top }
table.direc td { 
  padding-left: 3px;
  border: 1px solid black;
  background-image: linear-gradient(to bottom, rgba(95,0,95,0.5), rgba(95,0,95,0.2)) 
}

/* Album Covers for Gallery */

div.albumTextBG { color: white }
div.albumTextFG { color: black }

/* Formatting for Reports */

table.report {background-color: white }
table.report { border: 1px solid black }
table.report th, table.report td { padding-left: 5px; padding-right: 5px;}
#MAIN tr.header, table.report tr.header { vertical-align: bottom; background-color: rgb(120,120,120); color: black}
table.report tr.graybar { background-color: rgb(235,197,203) }
table.report tr.graybarLT { background-color: rgba(200,200,200,0.5) }

/* Formatting for data input forms */
textarea, select, input[type=text], input[type=date] { background-color: white }


table.form, table.data, div.form { background-color: rgb(235,197,203); border: 1px solid black }
table.subform { background-color: transparent }
table.form th, table.subform th { text-align: right; font-weight: normal }
table.form td, table.subform td { text-align: left; font-weight: normal }
table.form input, table.form select { font-size: 12pt; background-color: white }
table.form tr.header th { text-align: center; font-weight: bold }

/* Style for committee box on Update Member page */

div.mbrCommittee { width: 260px }

/* Define initial color, font-size, etc. for menu items and its links */

div.menubarBG { background-color: rgb(95,0,95) }

div.menubar, div.menubar a:link, div.menubar a:visited {
  font-size: 12PT; 
  color: white;
  text-decoration: underline;
  font-weight: bold;
}

/* Define main menu items DIVs (size, etc.) */

div.menubar {
  z-index: 1;
  position: relative;
  margin: 0 1px 0 1px;
  height: 22px;
  padding: 3px 6px 3px 6px;
  float: left;
  white-space: nowrap;
  text-align: center;
  background-color: rgb(129,0,129);
}

div.menubar:hover { background-color: rgb(201,88,170); }

/* menu item background and font color change when hovered */

/***
div.menubar:hover {
    color: rgb(201,88,170);
    transition: background-color,color 0s; 
}
***/

/* modification of div.menubar */

div.committee {     
  position: relative;
  float: left;
  white-space: nowrap; 
}

div.committee:hover div.submenu {
    background-color: rgb(235,197,203);
    visibility: visible;
    transition: all .5s;
}

div.submenu li, div.submenu2 li { font-weight: bold }

div.committee:hover div.submenu li, div.committee:hover div.submenu2 li {
  margin-top: 0px;
  padding: 0px 8px 0px 8px;
  visibility: visible;
  transition: all .3s
}

/* Define submenu DIV. Initial size is 0px making it hidden */

div.submenu { 
  z-index: 2;
  position: absolute;
  border-radius: 8px;
  top: 28px; 
  left: 0px;
  text-align: left;
  color: black;
  font-size: 12PT;
  font-weight: normal;
  background-color: transparent;
  visibility: hidden;
}

/* Submenu transitions to new bg color, height, width when menu item is hovered */

div.menubar:hover div.submenu {
    background-color: rgb(201,88,170);
    color: white;
    visibility: visible;
    transition: all .5s;
}

div.submenu ul, div.submenu2 ul { 
  margin: 0px; padding: 0px; 
  list-style-type: none; 
}

div.submenu li, div.submenu2 li {
  padding: 0; 
  margin: 0;
  margin-top: -15px;
  font-size: 16pt;
  visibility: hidden; 
  transition: all .2s;   /* doesn't do anything for div.submenu2 */
}

div.submenu2 
{
  z-index: 2;
  position: absolute;
  text-align: left;
  color: black;
  font-weight: normal;
  background-color: rgb(155,198,255);
  border: 1px solid black;
}

div.menubar:hover div.submenu li, div.menubar:hover div.submenu2 li {
  margin-top: 0px;
  padding: 0px 8px 0px 8px;
  visibility: visible;
  transition: all .3s
}

div.submenu a:link, div.submenu a:visited { color: white; text-decoration: none; font-size: 16pt }

div.submenu a:hover { 
  color: rgb(201,88,170); 
  background-color: rgb(185,201,255);
}

/* modification of div.menubar */

div.committee {     
  position: relative;
  float: left;
  white-space: nowrap; 
}

/* DON'T NEED THIS div.committee a:hover { color: white }  <a> font color changes to white when hovered */

/* menu item background and font color change when hovered */
/* committee transitions to new bg color, height, width when menu item is hovered */

div.committee:hover div.submenu {
    background-color: rgb(rgb(235,197,203));
    visibility: visible;
    transition: all .5s;
}

div.submenu li, div.submenu2 li { font-weight: bold }

div.committee:hover div.submenu li, div.committee:hover div.submenu2 li {
  margin-top: 0px;
  padding: 0px 8px 0px 8px;
  visibility: visible;
  transition: all .3s
}

div.breadcrumb { 
  font-size: 12PT; 
  text-decoration: underline; 
  font-weight: bold; 
  margin: 0 4px 0 4px; 
  height: 22px; 
  padding: 3px 8px 3px 8px;
  float: left;
  white-space: nowrap;
  text-align: center;
  background-color: transparent;
}