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

/******************************************************************************/
/* The Friz-Quadrata font is used specifically for World of Warcraft font.    */
/******************************************************************************/
@font-face 
{
  font-family: Friz-Quadrata;
  src: url(friz-quadrata-regular-os-5870333951e7c.ttf);
}
/******************************************************************************/
/* The universal selector is indicated by an asterisk ( * ). It selects       */
/* everything in the document. If * is chained using a descendant combinator, */
/* it selects everything inside that ancestor element. For example, p *       */ 
/* selects all the nested elements inside the <p> element.                    */
/******************************************************************************/
*
{
  /****************************************************************************/
  /* The follow border properties are here to provide debugging support.  The */
  /* border property is shorthand for the following properties:               */
  /*   border-width                                                           */
  /*   border-style                                                           */
  /*   border-color                                                           */
  /* To turn on borders, uncomment the following line.  To turn off borders,  */  
  /* comment the line out.                                                    */
  /****************************************************************************/
  /* border: 1px solid white; */
  /****************************************************************************/
  /* The CSS margin properties are used to create space around elements,      */
  /* outside of any defined borders.  The margin property is a shorthand      */
  /* property for the following individual margin properties:                 */
  /*  margin-top                                                              */
  /*  margin-right                                                            */
  /*  margin-bottom                                                           */
  /*  margin-left                                                             */
  /* Setting margin to zero (0) resets the margin property.                   */
  /****************************************************************************/
  margin: 0;
  /****************************************************************************/
  /* An element's padding area is the space between its content and its       */
  /* border.                                                                  */
  /*                                                                          */
  /* The padding property is a shorthand property for the following           */
  /* individual padding properties:                                           */
  /*  padding-top                                                             */
  /*  padding-right                                                           */
  /*  padding-bottom                                                          */
  /*  padding-left                                                            */
  /* Setting padding to zero (0) resets the padding property.                 */
  /****************************************************************************/
  padding: 0;
  /****************************************************************************/
  /* The CSS box-sizing property allows us to include the padding and border  */ 
  /* in an element's total width and height.  By default, the width and       */ 
  /* height of an element is calculated like this:                            */
  /*                                                                          */
  /*   width + padding + border = actual width of an element                  */
  /*   height + padding + border = actual height of an element                */
  /*                                                                          */
  /* This means: When you set the width/height of an element, the element     */ 
  /* often appears bigger than you have set (because the element's border and */ 
  /* padding are added to the element's specified width/height).              */
  /*                                                                          */
  /* Applying "box-sizing: border-box;" to all elements is safe and wise.     */
  /****************************************************************************/              
  box-sizing: border-box;
}

/******************************************************************************/
/* The a tag is here to change the link color to white.                       */
/******************************************************************************/
a 
{
  color:white; /* Sets the color of visited links to white */
}

/******************************************************************************/
/* 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;
}

table
{
  /****************************************************************************/
  /* Center the table within the <div>.                                       */
  /****************************************************************************/
  margin-left: auto;
  margin-right: auto;
}

ul 
{
  /****************************************************************************/ 
  /* The font-family CSS property specifies a prioritized list of one or more */ 
  /* font family names and/or generic family names for the selected element.  */
  /****************************************************************************/
  font-family: Friz-Quadrata;
  /****************************************************************************/ 
  /* The font-size CSS property sets the size of the font.  It controls the   */
  /* font size of the text on the right side of the <div>.                    */
  /****************************************************************************/
  font-size: 24px;
  /****************************************************************************/ 
  /* The font-weight CSS property sets the weight (or boldness) of the font.  */ 
  /* The weights available depend on the font-family that is currently set.   */
  /* It controls the font size of the text on the right side of the <div>.    */
  /****************************************************************************/
  font-weight: normal;

  margin-left: 0; /* Or adjust as needed */
  padding-left: 40px; /* Adjust as needed for desired indentation */
}

.clsBody
{
  /****************************************************************************/
  /* The background-color property sets the background color of an element.   */
  /* The background of an element is the total size of the element, including */ 
  /* padding and border (but not the margin).  Setting the property to #000   */ 
  /* sets it to black.                                                        */
  /*                                                                          */
  /* It is also possible to specify all the background properties in one      */ 
  /* single property, namely 'background.'  This is called a shorthand        */ 
  /* property.  There are five background properties associated with each     */ 
  /* other.  The background property is shorthand for the following           */ 
  /* properties:                                                              */  
  /* - background-color                                                       */
  /* - background-image                                                       */
  /* - background-repeat                                                      */
  /* - background-attachment                                                  */
  /* - background-position                                                    */
  /*                                                                          */
  /* For more information about linear-gradient, please visit                 */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient*/
  /****************************************************************************/
  background-image: linear-gradient(to bottom right,#1DA071, rgb(15, 78, 15));
  /****************************************************************************/ 
  /* The color property specifies the color of text.                          */
  /*                                                                          */
  /* Setting the property to #fff sets it to white.                           */
  /****************************************************************************/
  color: #fff;
  /****************************************************************************/ 
  /* The height property sets the height of an element. The height of an      */ 
  /* element does not include padding, borders, or margins!  If height is set */ 
  /* to a numeric value (like pixels, (r)em, percentages) then if the content */ 
  /* does not fit within the specified height, it will overflow. How the      */ 
  /* container will handle the overflowing content is defined by the overflow */ 
  /* property.                                                                */
  /*                                                                          */
  /* The CSS unit value of vh specifies a relative length that is relative to */ 
  /* 1% of the height of the viewport*.                                       */
  /*                                                                          */
  /* *Viewport = the browser window size. If the viewport is 50cm wide,       */ 
  /*  1vw = 0.5cm.  Setting it to 100vh will display the entire viewport.     */
  /****************************************************************************/
  min-height: 100vh;
}

.clsDivHorizontalGap
{
  /****************************************************************************/
  /* The height CSS property specifies the height of an element. By default,  */ 
  /* the property defines the height of the content area.                     */
  /****************************************************************************/
  height:50px;
}

.clsDivTitle
{
  /****************************************************************************/ 
  /* The font-family CSS property specifies a prioritized list of one or more */ 
  /* font family names and/or generic family names for the selected element.  */
  /****************************************************************************/
  font-family: Friz-Quadrata;
  /****************************************************************************/ 
  /* The font-size CSS property sets the size of the font.  It controls the   */
  /* font size of the text on the right side of the <div>.                    */
  /****************************************************************************/
  font-size: 30px;
  /****************************************************************************/ 
  /* The font-weight CSS property sets the weight (or boldness) of the font.  */ 
  /* The weights available depend on the font-family that is currently set.   */
  /* It controls the font size of the text on the right side of the <div>.    */
  /****************************************************************************/
  font-weight: normal;
}

.clsImgFittingDiv
{
  /****************************************************************************/
  /* 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 height CSS property specifies the height of an element. By default,  */
  /* the property defines the height of the content area.                     */
  /*                                                                          */
  /* height:inherit will, as the name implies, inherit the value from it's    */
  /* parent. If the parent's value is height: 50% , then the child will also  */
  /* be 50% of the height of it's parent.                                     */
  /****************************************************************************/
  height:300px;
  /****************************************************************************/
  /* 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:auto;
}

/******************************************************************************/
/* This ID sets up the page's three columns.                                  */
/******************************************************************************/
#idDivMainPage
{
  /****************************************************************************/
  /* 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.                                                            */
  /*                                                                          */
  /* CSS grid layout introduces a two-dimensional grid system to CSS. Grids   */ 
  /* can be used to lay out major page areas or small user interface          */ 
  /* elements. This guide introduces the CSS grid layout and the terminology  */ 
  /* that is part of the CSS grid layout specification. The features shown in */ 
  /* this overview will then be explained in greater detail in the other      */ 
  /* guides in this series.                                                   */
  /****************************************************************************/
  display:grid;
  /****************************************************************************/
  /* The grid-template-columns CSS property defines the line names and track  */ 
  /* sizing functions of the grid columns.                                    */
  /*                                                                          */
  /* 1fr is a unit representing one fraction of the available space within    */ 
  /* the grid container. The "fr" stands for "fractional unit."               */
  /****************************************************************************/
  grid-template-columns: 40px 1fr 40px;
  height:100%;
  width:100%;
}

#idDivReoSoftLogo
{
  /****************************************************************************/ 
  /* The CSS align-items property sets the align-self value on all direct     */ 
  /* children as a group.  In flexbox, it controls the alignment of items on  */ 
  /* the cross axis, or vertical axis.  Setting align-items: center will      */
  /* center items vertically.  However, this does require the display:flex    */ 
  /* property.                                                                */
  /****************************************************************************/
  align-items: center;
  /****************************************************************************/
  /* 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;
  /****************************************************************************/ 
  /* The height property sets the height of an element. The height of an      */ 
  /* element does not include padding, borders, or margins!  If height is set */ 
  /* to a numeric value (like pixels, (r)em, percentages), then if the        */ 
  /* content does not fit within the specified height, it will overflow. How  */ 
  /* the container will handle the overflowing content is defined by the      */ 
  /* overflow property.                                                       */
  /*                                                                          */
  /* This is for the height of the <div>.                                     */
  /****************************************************************************/
  height: 100px;
  /****************************************************************************/
  /* The justify-content is specifically used within a flexbox element.  The  */
  /* goal here is to have the logo touching the left side of the <div> and    */
  /* and the site name touching the right side.  Setting justify-content to   */
  /* space-between gives us this behavior.                                    */
  /****************************************************************************/
  justify-content: space-between;
  /****************************************************************************/
  /* An element's padding area is the space between its content and its       */
  /* border.                                                                  */
  /*                                                                          */
  /* These values keep the icon and website name text from butting against    */
  /* the <div>.                                                               */
  /****************************************************************************/
  padding-left: 20px;
  padding-right: 20px;
}

/******************************************************************************/
/* This ID sets up the page's three columns.                                  */
/******************************************************************************/
#idDivToonName
{
    /****************************************************************************/ 
  /* The font-family CSS property specifies a prioritized list of one or more */ 
  /* font family names and/or generic family names for the selected element.  */
  /****************************************************************************/
  font-family: Friz-Quadrata;
  /****************************************************************************/ 
  /* The font-size CSS property sets the size of the font.  It controls the   */
  /* font size of the text on the right side of the <div>.                    */
  /****************************************************************************/
  font-size: 50px;
  /****************************************************************************/ 
  /* The font-weight CSS property sets the weight (or boldness) of the font.  */ 
  /* The weights available depend on the font-family that is currently set.   */
  /* It controls the font size of the text on the right side of the <div>.    */
  /****************************************************************************/
  font-weight: normal;
  /****************************************************************************/ 
  /* The letter-spacing CSS property sets the horizontal spacing behavior     */ 
  /* between text characters. This value is added to the natural spacing      */ 
  /* between characters while rendering the text. Positive values of          */ 
  /* letter-spacing causes characters to spread farther apart, while negative */ 
  /* values of letter-spacing bring characters closer together.               */
  /****************************************************************************/
	letter-spacing: 2px;
  /****************************************************************************/ 
  /* Center the text.
  /****************************************************************************/
  text-align: center;
}

#idImgPageImage
{
  /****************************************************************************/
  /* The height property sets the height of an element. The height of an      */
  /* element does not include padding, borders, or margins!  If height is set */
  /* to a numeric value (like pixels, (r)em, percentages), then if the        */
  /* content does not fit within the specified height, it will overflow. How  */
  /* the container will handle the overflowing content is defined by the      */
  /* overflow property.                                                       */
  /*                                                                          */
  /* This is for the height of the <img>.                                     */
  /****************************************************************************/
  height: 200px;
}

#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;
}

/******************************************************************************/
/* This ID is used to display the website name on the right side of a <div>.  */
/******************************************************************************/
#idSiteName
{
  /****************************************************************************/ 
  /* The font-family CSS property specifies a prioritized list of one or more */ 
  /* font family names and/or generic family names for the selected element.  */
  /****************************************************************************/
  font-family: Friz-Quadrata;
  /****************************************************************************/ 
  /* The font-size CSS property sets the size of the font.  It controls the   */
  /* font size of the text on the right side of the <div>.                    */
  /****************************************************************************/
  font-size: 20px;
  /****************************************************************************/ 
  /* The font-weight CSS property sets the weight (or boldness) of the font.  */ 
  /* The weights available depend on the font-family that is currently set.   */
  /* It controls the font size of the text on the right side of the <div>.    */
  /****************************************************************************/
  font-weight: normal;
  /****************************************************************************/ 
  /* The letter-spacing CSS property sets the horizontal spacing behavior     */ 
  /* between text characters. This value is added to the natural spacing      */ 
  /* between characters while rendering the text. Positive values of          */ 
  /* letter-spacing causes characters to spread farther apart, while negative */ 
  /* values of letter-spacing bring characters closer together.               */
  /****************************************************************************/
	letter-spacing: 7px;
}