/******************************************************************************/
/* wow.css                                                                    */
/*                                                                            */
/* Date     Description                                          Name         */
/* -------- --------------------------------------------------   ------------ */
/* 20250710 Initial coding.                                      Rodney       */
/******************************************************************************/

/******************************************************************************/
/* Global Element Settings                                                    */
/******************************************************************************/
/* #region Global Elements Settings */
/******************************************************************************/
/* The a tag is here to change the link color to white.                       */
/******************************************************************************/
a
{
  color: blue;
}

h1
{
  font-family: FontFrizQuadrata;
  padding-top: 15px;
}

/******************************************************************************/
/* The table, th, td selector is used here to define a universal look and     */ 
/* for all tables.  Here, the border will be a single, solid like.            */
/******************************************************************************/
table, th, td 
{
  border: 1px solid black;
  /****************************************************************************/
  /* Setting the border-collapse property to the value collapse will prevent  */
  /* a double line border.  It will be a single line border.                  */
  /****************************************************************************/
  border-collapse: collapse;
}

th, td 
{
  padding: 10px;
}

thead th 
{
  position: sticky;
  top: 0;
  background-color: #2c3e50; /* Required: prevents content from bleeding through */
  color: white;
  z-index: 1; /* Keeps headers stacked safely on top of scrolling rows */
}

table
{
  /****************************************************************************/
  /* Define the margins for the table, centering horizontally on the page.    */
  /****************************************************************************/
  margin-left: auto;
  margin-right: auto;
  margin-top:20px;
  margin-bottom:20px;
}

tbody tr:nth-child(even) 
{
  background-color: #dadada;
}

ul
{
  font-family: FontFrizQuadrata;
  padding-left: 20px;
}
/* #endregion */
/******************************************************************************/
/* Classes                                                                    */
/******************************************************************************/
/* #region Classes */
.clsImageBanner
{
  /****************************************************************************/
  /* The display CSS property sets whether an element is treated as a block   */ 
  /* or inline box and the layout used for its children, such as flow layout, */ 
  /* grid or flex.  The default value for this property is block.             */
  /*                                                                          */
  /* Setting the display property to block ensures that the image is centered */
  /* horizontally within the parent <div>.                                    */
  /****************************************************************************/
  display:block;
  
  /****************************************************************************/
  /* The CSS margin properties are used to create space around elements,      */
  /* outside of any defined borders.                                          */
  /*                                                                          */
  /* The browser selects a suitable margin to use. For example, in certain    */ 
  /* cases this value can be used to center an element.                       */
  /****************************************************************************/
  margin: 0 auto;
  max-width: 100%;
  padding-bottom: 20px;
}

.clsTitleWow1
{
  font-family: FontFrizQuadrata;
  font-size: 60px;
}

.clsTitleWow2
{
  font-family: FontFrizQuadrata;
  font-size: 18px;
  padding-bottom: 20px;
}

.clsDivImageRow
{
  /****************************************************************************/
  /* 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.                                   */
  /****************************************************************************/
  display: flex;
  flex-direction: row;
  /****************************************************************************/
  /* Forces items to wrap to the next row when they run out of room.          */
  /****************************************************************************/
  flex-wrap: wrap;
  padding-top: 20px;
}

/******************************************************************************/
/* This class is used to define the space surrounding the paperdoll images.   */
/******************************************************************************/
.clsPaperdollImage
{
  /****************************************************************************/
  /* Wrapping an HTML <img> tag within an <a> (anchor) tag can sometimes      */
  /* introduce unexpected spacing or layout issues, particularly a small gap  */
  /* at the bottom of the image. This occurs because images, by default, are  */
  /* inline-level elements, and when placed within an <a> tag, they can       */
  /* inherit or interact with baseline alignment properties, leading to this  */
  /* extra space.                                                             */
  /*                                                                          */
  /* Set display: block; on the <img> tag. This is a common and effective     */
  /* solution. By changing the image's display property to block, it behaves  */
  /* like a block-level element, eliminating the baseline alignment issue and */
  /* the associated space.                                                    */
  /****************************************************************************/
  display: block;
  /****************************************************************************/
  /* Allows items to grow/shrink, with an ideal base width of 200px.          */
  /****************************************************************************/
  flex: 1 1 200px;
  height: 300px;
  padding: 20px;
}
/* #endregion */
/******************************************************************************/
/* IDs                                                                        */
/******************************************************************************/
/* #region IDs */
#idDivMainPage
{
  margin-left: 100px;
  margin-right: 100px;
}

#idImgPaperDoll
{
  /****************************************************************************/
  /* The float CSS property places an element on the left or right side of    */ 
  /* its container, allowing text and inline elements to wrap around it. The  */ 
  /* element is removed from the normal flow of the page, though still        */ 
  /* remaining a part of the flow.                                            */
  /****************************************************************************/
  float:right;
  /****************************************************************************/
  /* The height CSS property specifies the height of an element. By default,  */
  /* the property defines the height of the content area.                     */
  /****************************************************************************/
  height:500px;
  /****************************************************************************/
  /* The following padding adds some space on the left side of the paperdoll  */ 
  /* image and the rest of the text on the page.                              */
  /****************************************************************************/
  padding-left:20px;
}
/* #endregion */