/* RWJMSAA.org : Stylesheet for website                                        *
 * Colors: Red: CC0033 (pantone 186, rgb 204, 0, 51),                          *
 *         Grey 6A757C 5G6A72 (pantone 431, rgb 95,106, 114) (6A or 61)               *
 * Fonts: Source Sans Pro (Google Fonts - Regular, Regular Italic, Bold),      *
 *        ITC Giovanni (Serif - Adobe - Book, Book Italic, Bold)               *
 */
body        { max-width:1000px; color:#000;
              font-size: 15px; font-family:'sans serif';}
form        { margin: 0px; padding: 0px }
table       { margin: 0px; padding: 0px }
th.foot     { border-bottom:1px solid #999; }
th.footr    { text-align:right !important; }
th.footc    { text-align:center !important; }
th.footl    { text-align:left !important; }
hr          { color: #CC0033; width:100%; }
h4          { font-size:18px; font-weight:bold;
              margin: 10px 0;
              }
.mylist     { width:125px;              }
.newbullet  { list-style : url(images/PULogoTiny.gif) disc }
.title  { text-decoration: underline solid #FF0033 1px; }
.emailIcon  { display:inline-block; height:12px; width:21px; padding:2px 2px 0 4px; }
.green      { color: #090; }

/******************************************************************************/
/* Submit Buttons, including -faux (Used to make divs look like buttons       */
.button-submit, .button-submit-new, .button-return, .button-delete,
  .button-emails, .button-other, .button-submit-faux {
    border: 2px solid black;
    border-radius: 10px;
    padding: 0 10px;
    cursor: pointer;
    color: #000;
    width: auto; 
    min-width: 75px; width:fit-content;
    }
.button-submit-faux {
    cursor: auto;
    }
.button-submit {
    background-color:#C03;
    }
.button-submit:hover {
    background-color:#000;
    color: #F58025; 
    border-color: #FF6000; }
.button-submit-new {
    background-color:#FFF; 
    border-color: rgba(0,0,0,0.2);
    }
.button-submit-new:hover {
    background-color: rgba(231,117,0,0.5);
    }
.button-return {
    background-color: #FFFF80; }
.button-delete {
    background-color: #FF6666;
    border: 2px solid #CC0000; }
.button-emails { 
    background-color:#000; 
    color:#FF6000;
    border: 1px solid #FF6000; }
.button-emails:hover { 
    background-color:#FF6000; 
    color:#000;
    border: 1px solid #000; }
.button-other {
    background-color: #c9c9c9; }

.myButton   { background-color:#CC0033; 
              color:white;
              min-width:125px;width: fit-content;
              border-radius: 10px;
              cursor: pointer;
              }
.myButton1  { min-width :  50px; width: fit-content;
              height : 25px; 
              background-color:#CC0033;
              color : white;
              border-radius: 10px;
              cursor: pointer;
              }
.myButton1R { min-width :  50px; width: fit-content;
              height : 25px; 
              background-color: #FFF;
              color : #C03;
              border: 1px solid #C03;
              border-radius: 10px;
              cursor: pointer;
              }
.mybutton2  { min-width : 75px; width: fit-content;
              height : 25px; 
              background-color:#CC0033;
              color : white;
              border-radius: 10px;
              cursor: pointer;
              }
.myButton3  { min-width : 100px; width: fit-content;
              height : 25px; 
              background-color:#CC0033;
              color : white;
              border-radius: 10px;
              cursor: pointer;
              }
.myButton4  { min-width : 150px; width: fit-content;
              height : 25px; 
              background-color:#CC0033;
              color : white;
              border-radius: 10px;
              cursor: pointer;
              }
.myButton4R { min-width : 150px; width: fit-content;
              height : 25px; 
              padding:0 10px;
              font-weight: bold;
              background-color: #FFF;
              color : #CC0033;
              border: 1px solid #C03;
              border-radius: 10px;
              cursor: pointer;
              }
.myButton5  { min-width : 175px; width: auto; 
              padding:0 10px;
              height : 25px; 
              background-color: #CC0033;
              color : white;
              border-radius: 10px;
              cursor: pointer;
              }
.myButton5R { min-width : 175px; width: fit-content; 
              height : 25px; 
              padding:0 10px;
              font-weight: bold;
              background-color: #FFF;
              color : #CC0033;
              border: 1px solid #C03;
              border-radius: 10px;
              cursor: pointer;
              }
.myButton6  { min-width  : 200px; width: fit-content;
              height : 25px; 
              background-color:#CC0033;
              color : white;
              border-radius: 10px;
              cursor: pointer;
              }
.myButtonW  { min-width : 600px; width: fit-content;
              height : 40px; 
              background-color:#CC0033;
              color : white;
              border-radius: 10px;
              cursor: pointer;
              }
.label0 { display:inline-block; width: auto;  height: auto; vertical-align: top; color:#900;}
.label  { display:inline-block; width: 110px; height: auto; vertical-align: top; color:#900;}
.label2 { display:inline-block; width: 200px; height: auto; vertical-align: top; color:#900;}
.label3 { display:inline-block; width: 125px; height: auto; vertical-align: top; color:#900;}
.label4 { display:inline-block; width: 400px; height: auto; vertical-align: top; color:#900;}
.label5 { display:inline-block; width: 300px; height: auto; vertical-align: top; color:#900;}
.label6 { display:inline-block; width: 175px; height: auto; vertical-align: top; color:#900;}
.data0  { display:inline-block; width: 400px; height: auto; vertical-align: top;}
.data05 { display:inline-block; width: 340px; height: auto; vertical-align: top;}
.data1  { display:inline-block; width: 300px; height: auto; vertical-align: top;}
.data2  { display:inline-block; width: 200px; height: auto; vertical-align: top;}
.data25 { display:inline-block; width: 250px; height: auto; vertical-align: top;}
.data3  { display:inline-block; width: 100px; height: auto; vertical-align: top;}
.data35 { display:inline-block; width: 350px; height: auto; vertical-align: top;}
.data4  { display:inline-block; width:  75px; height: auto; vertical-align: top;}
.data5  { display:inline-block; width: 500px; max-width: 80%; height: auto; vertical-align: top;}
.data7  { display:inline-block; width: 700px; height: auto; vertical-align: top;}
.dataX150 { display:inline-block;  vertical-align: top;
           width: calc(100% - 150px); max-width: 80%; height: auto; }
.dataX200 { display:inline-block;  vertical-align: top;
           width: calc(100% - 210px); height: auto; }

  .requiredLabel {
    color: #900;
    font-weight: bold;
    font-style: italic;
    vertical-align: top;
    font-size: 15px;
    }   
  .requiredInput {
    background-color: #FB9;
    }

/* Report formatting */
table.report {
  margin: 0px; padding: 0px; 
  border: 1px solid #999;
  text-align: left;
  border-collapse: collapse;
  margin-left: auto; margin-right: auto;
  caption-side: top; }
tr.report:nth-child(even) {background-color: #f2f2f2;}
tr.report-total {
  padding: 0.3em;
  background-color: #eee;
  text-align: center;
  font-weight: bold;
  border-top: 1px solid #FFAF33; }
#report-total {
  border-top: 1px solid #FFAF33; 
  }
td.report {
  padding: 0.3em;
  border-bottom: 1px solid #999; }
th.report {
  padding: 0.3em;
  background-color: #eee;
  text-align: center;
  border-bottom: 1px solid #999; }
th.report-total {
  padding: 0.3em;
  background-color: #eee;
  text-align: center;
  border-top: 1px solid #FFAF33 !important; }
caption.report {
  padding: 0.3em;
  font-size: 1.25em;
  color: #fff;
  background: #CC0033; /* #FFAF33; */ }
.report-head {
  padding: 0.3em;
  background-color: #595959;
  text-align: center;
  font-weight: bold;
  font-size: 1.15em;
  color: #FFF;
  border-bottom: 1px solid #FFF; }

.grid-box {
  display: grid;/*  */
  border: 2px solid #CC0033;
  border-radius: 8px;
  margin-bottom: 0px; 
  color: #000;
  height: auto;
  }
.grid-boxR {
  display: grid;
  border: 2px solid #000;
  border-radius: 8px;
  margin-bottom: 0px; /*  */
  color: #000;
  }
legend {
  color: #000;
  }
.legend {
  border: none;
  border-radius: 8px;
  background-color:#CC0033;
  color: #FFF;
  text-transform: capitalize;
  font-size: 14px;
  font-variant: small-caps; font-weight: bold;
  padding: 0 20px;
  }
.legendR {
  border: none;
  border-radius: 8px;
  background-color: #000;
  color: #CC0033;
  text-transform: capitalize;
  font-size: 14px;
  font-variant: small-caps; font-weight: bold;
  padding: 0 20px;
  }

  .errorMsg:before { /* Used by HTML/Javascript */
    content: "ERROR:\a";  
    }
  .errorMsg { /* Used by HTML/Javascript */
    display: none;
    width: fit-content; height:auto;
    text-align: left;
    white-space:pre-line;
    background-color: #FFB3B3;/* color: #D8000C; background-color: #FFD2D2;*/
    outline:3px solid #C00;
    margin: 5px 25px; padding: 3px;
    }
  .error_message { /* Used by PHP  */
    display: grid;/*  */
    border: 3px solid #C00;
    border-radius: 8px;
    background-color: #FFB3B3;/* color: #D8000C; background-color: #FFD2D2;*/
    margin: 5px 25px 10px;
    height: auto; width: auto;
    text-align: left;
    white-space:pre-line;
    }
  .error_legend { /* User by PHP */
    border-radius: 8px;
    border: 3px solid #C00;
    background-color:#FFB3B3;
    text-transform: capitalize;
    font-variant: small-caps; font-weight: bold;
    padding: 0 20px;
    }
  .warningMsg:before { /* Used by HTML/Javascript */
    content: "Warning:\A";
    white-space: pre;
    }
  .warningMsg { /* Used by HTML/Javascript */
    display: none;
    width: auto; height:auto;
    text-align: left;
    white-space:pre-line;
    color: #9F6000;
    background-color: #FEEFB3; /* color: #9F6000; background-color: #FEEFB3; */
    outline:2px solid red;
    margin: 5px 25px; padding:5px;
    }
  .warning_message { /* Used by PHP  */
    display: block;
    width: auto; height:auto;
    white-space:pre-line;
    text-align: left;
    border-radius: 8px;
    border: 3px solid #960;
    background-color: #FFC; /* #FEEFB3; */
    color: #9F6000;
    margin: 5px 25px;
    }
  .warning_legend {
    border-radius: 8px;
    border: 3px solid #960;
    color: #9F6000;
    background-color: #FEEFB3;
    text-transform: capitalize;
    font-variant: small-caps; font-weight: bold;
    padding: 0 20px;
    }
  .successMsg { /* Used by HTML/Javascript */
    display: none;
    width: auto; height:auto;
    text-align: center;
    background-color: #8F8; /* color: #4F8A10; background-color: #DFF2BF; */
    color: #000;
    outline:2px solid #000;
    margin: 5px 25px;
    }
  .success_message { /* Used by PHP  */
    display: block;
    width: auto; height:auto;
    white-space:pre-line;
    text-align: left;
    border-radius: 8px;
    border: 3px solid #090;
    background-color: #8F8; /* color: #4F8A10; background-color: #DFF2BF; */
    color: #000;
    margin: 5px 25px;
    }
  .success_legend {
    border-radius: 8px;
    border: 3px solid #090;
    background-color:#8F8;
    text-transform: capitalize;
    font-variant: small-caps; font-weight: bold;
    padding: 0 20px;
    }
  .noticeMsg { /* Used by HTML/Javascript */
    display: none;
    width: auto; height:auto;
    white-space:pre-line;
    text-align: left;
    color: #00529B;
    background-color: #BDE5F8; 
    outline:2px solid red;
    margin: 5px 25px;
    }
  .noticeMsg:before { /* Used by HTML/Javascript */
    content: "Notice:\A";  
    }

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 7; /* 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.4); /* Black w/ opacity */
  }
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto; margin-left:50px; margin-top:200px;
  padding: 20px;
  border: 1px solid #C03; /*#888;*/
  width: 90%; min-width:250px; 
  height: auto;
  }
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  }
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  }
      
@media  screen and (max-width: 970px) {
  .modal { position: fixed;}
  .modal-content { margin:0; margin-left:10px; margin-top:10px; padding:10px; width:100%;}
  }
/* End of Modal section */

@media screen and (max-width: 600px) {
  .PageTopLogo { display: none; } 
/*  .TitleName  { display:none; }
  .TitleName:after { content: "RWJ Medical School Alumni Association"; } */
  }

/*** Tool Tip Section ***/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  }
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  }
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  }
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  }
/*** End of Tool Tip Section ***/

/******************************************************************************/
/* New Page Headers                                                           */
.PageTop { /* Page Top container */
    display:flex; flex-direction:row; align-items:flex-start; flex-wrap:wrap;
    width: 100%; height:auto; min-height: 60px; vertical-align: top;
    padding-top: 0px; padding-bottom: 4px; 
    border-bottom: 1px solid rgba(204,0,51,0.5);
    }
.PageHeader {    /* Page Title */
    width: 200px; height: 60px; vertical-align: middle;
    font-size: 40px; font-weight: bold; 
    color: #000; /*#C03*/
    }
.PageHeaderAdmin::before {
    content: "";
    white-space: pre;
    }
.PageHeaderAdmin { /* Admin Menu Items */
    width: 100%; height: 50px; vertical-align: top;
    font-size: 40px; font-weight: bold; text-align: center;
    color: #000; /*#C03*/
    }
/* Menu Bar css is in Menu.css                                                */
/* Filter items                                                               */
.FilterBar { /* Filter section container */
    display:flex; flex-direction:row; flex-wrap: wrap; 
    justify-content:center; align-items:center;
    width:calc(100% - 220px); 
    height: 60px; font-size: 14px;
    margin: 0 0 0 1px;
    }
.PageFilter { /* 'Filter' and modal icon */
    display: inline-block;
    min-width: 65px; height: 30px; right: 0;
    text-align: left; vertical-align: middle;
    font-size: 14px; font-weight: bold;
    font-family: 'Libre Franklin', sans-serif;
    }
.FilterLabel { /* Used? */
    display: inline-block; font-size: 14px;
    width: auto; height: 25px; vertical-align: middle;
    }
.filterItem { /* For each Filter Row Item */
    height: 30px !important; vertical-align: middle;
    font-size: 14px;
    font-family: 'Libre Franklin', sans-serif;
    }
.PageText { 
    font: 14px 'Old Standard TT';
    padding-top: 10px;
    height: auto;
    }
  
.infoButton {
  display:inline; float:right;
  background: url("https://Princeton79.org/images/info-icon2.png") no-repeat scroll 0 0 transparent;
  height: 20px; width:20px; /*margin-top:2px;*/
  background-size: contain; border:none;
  cursor: pointer;
  }
.infoButtonPlain {
  display:inline; float:none;
  background: none;
  height: auto; width:fit-content; /*margin-top:2px;*/
  border:1px solid black;
  cursor: pointer;
  }
  
.menuButton {
  display: inline;
  text-align: start;
  text-decoration: none;
  color: #000;
  font: inherit;
  background: none;
  border: none;
  padding: 0 10px;
  height: auto;
  cursor: pointer;
  height: auto;
  z-index: 2;
  width: auto; 
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
  }
button:focus { /* add outline to focus pseudo-class */
  outline: 1px dotted #FF6000;
  }

@media screen and (max-width:650px) {
  .PageNarrow { flex-direction: column; }
  .FilterBar  { width:100% !important; min-height:60px; height:auto; }
  }
@media screen and (max-width:750px) {
  .PageNarrowPub { flex-direction: column; }
  .FilterBar  { width:100% !important; min-height:60px; height:auto; }
  }
  
.popupMenu {
  padding-top:10px; padding-bottom:10px; 
  top:200px !important; height:auto; width:fit-content;
  left: 300px;
  display:none; flex-direction:row; 
  vertical-align:top; 
  }
@media screen and (max-width:1000px) {
  .popupMenu { 
    left:calc(100% - 600px) !important;
    max-width: 100% !important;
    position: absolute; top: 185px !important;
    }
  }
@media screen and (max-width:875px) {
  .popupMenu { 
    left:200px !important;
    max-width: 100% !important;
    position: absolute; top: 190px !important;
    }
  }
@media screen and (max-width:800px) {
  .popupMenu { 
    left:100px !important;
    max-width: 100% !important;
    top: 200px !important;
    } 
  }
@media screen and (max-width:700px) {
  .popupMenu { 
    left:10px !important;
    max-width: calc(100% - 20px) !important;
    top: 225px !important;
    } 
  }
@media screen and (max-width:575px) {
  .popupMenu { 
    position: absolute; top: 250px !important;
    left:10px !important;
    width: calc(100% - 20px) !important;
    top: 50px !important;
    }
  }
  
.menuLabel { height:auto; float:left; margin-left:5px; }

.BackToTop  { width: 10px;
              height: 10px;  }
.Control-F  { width: 50px;
              height: 20px;
              vertical-align: bottom;  }

/* Summary blocks on home page (below Welcome/Slide Show) - for modals        */
.summary-container {
  display:flex; flex-direction: row; 
  align-content: space-between; justify-content: space-around; 
  width:100%; height:min-content; padding:1px 0; 
  border-top:1px solid rgba(0,0,0,0.3); border-bottom:1px solid rgba(0,0,0,0.3);
  }  
.summary-div {
  display:inline-block;
  text-align:center; 
  /* width:auto; min-width:15%; max-width:45%; 33% */
  width: 90%;
  height:min-content; min-height:25px;
  padding:0 4px 0 2px; margin:.1em .625em .25em; /*background-color:lightblue;*/
  font-feature-settings: "smcp" on; 
  font-size: 1.0em;
  font-weight: bold;
  color: #C03;
  background-color: #e6e6e6;
  padding-left: 3px;
  }
.summary-button {
  border: none; background: none !important;
  float: left !important; margin: 0;
  text-align: left !important; color: #C03; font-weight: bold;
  height: auto; width: auto !important; 
  }
.summary-icon {
  display:inline; padding:0px 2px 0 0 !important; 
  width:16px; height:min-content; vertical-align:middle;
  font-size:10px; font-family: 'Courier New';
  }
@media screen and (max-width:400px) {
  .summary-div { margin:0 !important; padding:0 !important; }
  .summary-button { width:fit-content !important; height:auto; }
  }

/* Slide Show classes */    
.fieldborder { 
    border: none;
    border-top: 1px solid rgba(0, 0, 0, .5);
    }
.mySlides {
    display:none;
    text-align:center; margin:auto; outline:1px solid #C03;
    }
.imageIndicator {
    border: 1px solid #C03; 
    padding: 4px; 
    border-radius: 50px; 
    width:1px; height:1px;
    cursor:pointer;
    }
.speedbutton {
    display:inline; 
    color:#FF6000; 
    font-size:125%; 
    cursor:pointer;
    }
.SlideTitle {
    height:auto;
    font-weight:bold; font-size:20px;
    }
.SlideDesc {
    height:auto; font-style:italic;
    font-size:15px;
    }

/* Top of page logos/text                     */
.NameLogo { /* Name & Logo top left of screen */
    float: left; cursor:pointer;
    display:block;
    width:335px; height:60px; /* padding-top:5px;
    border:1px dotted green; */
    } 
.PULogo  { float: left; vertical-align:middle; 
           padding: 0 5px 0 0; width: 50px; height: 60px; }
.WAFLogo { float: left; vertical-align: middle; 
           padding: 0 5px 0 0; width:60px; height: 60px; }
.PUName  { font: bold 22px 'Old Standard TT';
           float: left; height: 30px; vertical-align: middle; }
.PUHide  { float: none; } /* Hides 'University' on narrow screen */
.ClassName { 
    min-height:30px; height:auto; color:#E77500; 
    font: bold small-caps 17px 'Libre Franklin';
    }
  
.CalMonYear {
    width: fit-content;
    font:bold italic small-caps 20px 'Old Standard TT'; 
    text-shadow: 0 0 2px #FF5000; 
    border-bottom:1px solid #FF5000; margin:10px 0;    
    }
  
.EventBlock {
  width:100%; height:auto; padding:20px 10px;  
  border-bottom:1px solid rgba(195,195,195,0.5); margin-bottom:5px; 
  vertical-align:top;  
  }

      /****** COLUMNS ******/
    @media screen and (max-width: 900px){
      input { width: inherit; }
      body  { margin: 0; }
      }
    /* For small screens */
    [class*="col-"] {
      width: 100%; height: auto;
      float: left;
      padding: 0px; padding-top: 0;
      /* background-color: lightgray; border:1px dashed black; */
      }
    /* For medium screens */
    @media only screen and (max-width: 989px) {
      /* body { background-color: lightblue; } */
      table { width:100%; margin-bottom:0px; }
      .col-t-1 {width: 50%; }   /*border:1px solid red; */
      .col-t-2 {width: 100%; }  /*border:1px solid blue; */
      }
    /* For large screens */
    @media only screen and (min-width: 990px) {
      /* body { background-color: yellow; } */
      table { width:100%; margin-bottom:0px; }
      td { padding-right:10px !important; }
      .col-1 {width: 49%; } /*border:1px solid orange; */
      .col-2 {width: 100%; } /*border:1px solid yellow; */
      .col-3 {width: 100%; }   /*border:1px solid purple; */
      }