/*****************************************************************************/
/* main.css                                                                  */
/*                                                                           */
/* Date     Description                                          Name        */
/* -------- --------------------------------------------------   ----------- */
/* 20140825 Initial coding.                                      Rodney      */
/* 20160414 Updated to use new formats.                          Rodney      */
/* 20260610 Updated for retirement.                              Rodney      */
/*****************************************************************************/

/******************************************************************************/
/* Classes                                                                    */
/******************************************************************************/
/* #region Classes */
.clsDivMainColumn 
{
  background-color: white;
  flex: 1; /* Expands to fill all remaining horizontal space */
  padding-top: 20px;
}

.clsDivFixedColumn 
{
  background-color: white;
  flex-shrink: 0; /* Prevents the column from compressing if space gets tight */
  padding-top: 20px;
  padding-right: 0px;
  padding-bottom: 20px;
  padding-left: 20px;
  width: 200px; /* Locks the second column to exactly 200px */
}

.clsDivPlacard 
{
  background-color: white;
  width: 100%;
}

.clsDivPlacard a:link
{
  color: blue;
}
.clsDivPlacard a:visited
{
  color: purple;
}
.clsDivPlacard a:active
{
  color: red;
}

.clsPlacardText
{
  font-family: FontBookman;
  font-size: 12px;
  padding: 25px;
}

.clsAboutMeTitleText
{
  color: black;
  font-family: FontBookman;
  font-size: 12px;
}

.clsAboutMeImage
{
  float: left;
  width: 50px;
  margin-right: 10px;
}

.clsAboutMeTextName
{
  font-family: FontBookman;
  font-size: 12px;
}

.clsAboutMeTextNarrative
{
  font-family: FontBookman;
  font-size: 12px;
  text-align: justify;
}

.clsAboutMeBtnContainer
{
  padding-bottom: 20px;
  text-align: center;
}
.clsDivFollowMeImages
{
  /****************************************************************************/
  /* An area of a document that is laid out using flexbox is called a flex    */
  /* container. To create a flex container, set the area's display property   */
  /* to flex. When we do this, the direct children of that container become   */
  /* flex items.  This is done to give us the ability to center items         */
  /* vertically and to justify accordingly.                                   */
  /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/#css-flexbox-properties */
  /****************************************************************************/
  display: flex;
  padding-top: 15px;
}
/* #endregion */
/******************************************************************************/
/* IDs                                                                        */
/******************************************************************************/
/* #region IDs */
#idDivMainPage
{
  margin-left: 100px;
  margin-right: 100px;
}
/* #endregion */