/******************************************************************************/
/* website.css                                                                */
/*                                                                            */
/* Date     Description                                           Name        */
/* -------- --------------------------------------------------    ----------- */
/* 20260219 Moved div styles to this file.                        Rodney      */
/******************************************************************************/

/******************************************************************************/
/* Fonts                                                                      */
/******************************************************************************/
/* #region Fonts */
@font-face 
{
  font-family: FontBahnschrift;
  src: url("Bahnschrift.ttf");
}

@font-face 
{
  font-family: FontBankGothic;
  src: url("Bank-Gothic-Light-Regular.otf");
}

@font-face 
{
  font-family: FontBauh;
  src: url("BAUHS93.TTF");
}

@font-face 
{
  font-family: FontBookman;
  src: url("Bookman.ttf");
}

@font-face 
{
  font-family: FontCurl;
  src: url("CURLZ___.TTF");
}

/******************************************************************************/
/* The Friz-Quadrata font is used specifically for World of Warcraft font.    */
/******************************************************************************/
@font-face 
{
  font-family: FontFrizQuadrata;
  src: url(friz-quadrata-regular-os-5870333951e7c.ttf);
}

@font-face 
{
  font-family: FontOldEnglish;
  src: url("OLDENGL.TTF");
}

@font-face 
{
  font-family: FontVladimir;
  src: url("VLADIMIR.TTF");
}

/* #endregion */
/******************************************************************************/
/* Global Element Settings                                                    */
/******************************************************************************/
/* #region Global Elements Settings */

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

/******************************************************************************/
/* This will set all <a href> elements to white.  This includes those that    */
/* are visited and those that are not visited (link).                         */
/******************************************************************************/
a
{
  color:white;
}

body, html
{
  /****************************************************************************/
  /* To make the <body> element take up 100% of the browser height, set the   */ 
  /* height property to 100%.                                                 */
  /****************************************************************************/ 
  height: 100%;
  /****************************************************************************/ 
  /* To remove all margins, set it to '0'.                                    */
  /****************************************************************************/ 
  margin: 0;
}
/* #endregion */
/******************************************************************************/
/* Classes                                                                    */
/******************************************************************************/
/* #region Classes */
/******************************************************************************/
/* This class is used for a pill-shaped button like one used to show a link   */
/* to my resume.                                                              */
/******************************************************************************/
.clsBtnRoundedLink 
{
  /****************************************************************************/
  /* Set the color of the button interior to the specified color.             */
  /****************************************************************************/
  background-color: white;
  /****************************************************************************/
  /* The border needs to be 2px and black.  Any smaller and the border is too */
  /* thin.                                                                    */
  /****************************************************************************/
  border: 2px solid #000000;
  /****************************************************************************/
  /* Give the button the rounded edges...you know...pill shaped.              */
  /****************************************************************************/
  border-radius: 50px;
  /****************************************************************************/
  /* The color is the color of the text inside the button.                    */
  /****************************************************************************/
  color: black;
  /****************************************************************************/
  /* The display: inline-block property combines the features of both inline  */
  /* and block elements. An element with display: inline-block will appear on */
  /* the same line as other inline or inline-block elements.                  */
  /****************************************************************************/
  display: inline-block;
  /****************************************************************************/
  /* Set the font used for the button text.                                   */
  /****************************************************************************/
  font-family: FontBookman;
  /****************************************************************************/
  /* Set the font size used for the button text.                              */
  /****************************************************************************/
  font-size: 10px;
  /****************************************************************************/
  /* Set the amount of space between the button text and the outline of the   */ 
  /* pill-shaped button.                                                      */
  /****************************************************************************/
  padding: 5px 20px;
  /****************************************************************************/
  /* The text-decoration property specifies the decoration added to text, and */ 
  /* is a shorthand property for:                                             */
  /*   - text-decoration-line (required)                                      */
  /*   - text-decoration-color                                                */
  /*   - text-decoration-style                                                */
  /*   - text-decoration-thickness                                            */
  /* In this case, I want to remove the default underline of the text since   */ 
  /* is this be used on an <a> element.                                       */
  /****************************************************************************/
  text-decoration: none;
}

/******************************************************************************/
/* Hover effect for better user experience.                                   */
/******************************************************************************/
.clsBtnRoundedLink:hover 
{
  background-color: #b7b5b5;
}

/******************************************************************************/
/* Footer styling begin                                                       */
/******************************************************************************/
footer 
{
  background-color: #222;
  color: #fff;
  margin-top: 20px;
  padding: 20px 0;
}

.footer-container 
{
  display: flex;
  margin: 0 auto;
  max-width: 1100px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 20px;
}

.footer-section 
{
  flex: 1;
  min-width: 250px;
  margin-bottom: 20px;
}

.footer-section h3 
{
  border-bottom: 2px solid #ff5722;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.footer-section p
{
  font-family:verdana;
  padding:5px;
}

.footer-section ul
{
  font-family:verdana;
  padding-left:20px;
}

.footer-section ul li 
{
  font-family:verdana;
  margin-bottom: 10px;
}

.footer-section ul li a 
{
  color: white;
  font-family:verdana;
  text-decoration: none;
}

.footer-section ul li a:hover 
{
  color: white;
}

.footer-bottom 
{
  text-align: center;
  padding-top: 5px;
  border-top: 1px solid #444;
  font-size: 14px;
  color: #aaa;
}
/******************************************************************************/
/* Footer styling end                                                         */
/******************************************************************************/

.clsTopHeader 
{
  margin: 30px 0px 20px 0px;
  text-align: center;
  width: 100%;
}

.clsTitle1
{
  font-family: FontBankGothic;
  font-size: 60px;
}

.clsTitle2
{
  font-family: FontBankGothic;
  font-size: 18px;
  padding-bottom: 20px;
}

.clsImageInDiv
{
  /****************************************************************************/
  /* This can be used by an image that sits within a <div>.  We want the      */
  /* <div> element to control the width of the image as the user changes the  */ 
  /* width of the page.  The image should keep the image at 100% width of the */ 
  /* <div>.  The height should be set to auto so the image's scale remains    */ 
  /* the same.                                                                */
  /****************************************************************************/
  /****************************************************************************/
  /* The CSS height property specifies the height of an element's content     */
  /* area. This property allows control over the vertical size of elements on */ 
  /* a web page.                                                              */
  /****************************************************************************/
  height: auto;
  /****************************************************************************/
  /* The CSS width property specifies the width of an element's content area. */
  /* This property allows control over the horizontal size of elements on a   */ 
  /* web page.                                                                */
  /****************************************************************************/
  width:100%
}

.clsHRHeader
{
  background-color: rgb(201, 201, 201);
  border: none;
  height: 1px;
  margin: 0px;
  width: 100%;
}
.clsHR
{
  background-color: rgb(201, 201, 201);
  border: none;
  height: 1px;
  margin-top: 20px;
  width: 100%;
}
.clsDivMenuRow
{
  /****************************************************************************/
  /* 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;
  /****************************************************************************/
  /* The CSS flex-direction property sets the main axis of a flex container,  */ 
  /* dictating whether flex items stack vertically or lay out horizontally.   */
  /****************************************************************************/
  flex-direction: row;
  justify-content: space-between;
  padding-top: 3px;
}

/******************************************************************************/
/* This class is used to define a container that has a width that is 100% of  */
/* of the container it is contained in.  It also defines the container as     */
/* being a flex container with flex growth occuring in a row.                 */ 
/******************************************************************************/
.clsDivContainer 
{
  /****************************************************************************/
  /* Set the display to a value of flex.  CSS Flexbox is short for the CSS    */ 
  /* Flexible Box Layout module.  Flexbox is a layout model for arranging     */ 
  /* items (horizontally or vertically) within a container, in a flexible and */ 
  /* responsive way. Flexbox makes it easy to design a flexible and           */ 
  /* responsive layout, without using float or positioning.                   */
  /****************************************************************************/
  display: flex;
  flex-direction: row;
  width: 100%;
}
.clsMenuHREF
{
  color: black;
  padding-top: 4px;
  text-decoration: none;
  font-size: 10px;
}
.clsDivGroupedImages
{
  /****************************************************************************/
  /* 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;
}
.clsDivGroupedMenu
{
  display: flex;
  gap: 10px;
}
.clsImageConnectIcons
{
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 20px;
  margin-top: 0px;
  width: 20px;
}

.clsNoDisplay
{
  display:none;
}

.clsWidth25px
{
  width:25px;
}
.clsWidth50px
{
  width:50px;
}
.clsWidth150px
{
  width:150px;
}
.clsWidth200px
{
  width:200px;
}
.clsWidth250px
{
  width:250px;
}
.clsWidth300px
{
  width:300px;
}
/* #endregion */
/******************************************************************************/
/* IDs                                                                        */
/******************************************************************************/
/* #region IDs (Beach Opening Image)*/
#idDivBeachContainer
/******************************************************************************/
/* The idDivContainer class is used to display the beach image in the entire  */
/* background.                                                                */
/******************************************************************************/
{
  /****************************************************************************/
  /* The background-image property sets one or more background images for     */
  /* an element. By default, a background-image is placed at the top-left     */
  /* corner of an element, and repeated both vertically and horizontally.     */
  /****************************************************************************/
  background-image: url("../images/Beach.gif");
  /****************************************************************************/
  /* The background-position property sets the starting position of a         */
  /* background image. By default, a background-image is placed at the        */
  /* top-left corner of an element, and repeated both vertically and          */
  /* horizontally.  Two values can be specified.  If you only specify one     */
  /* keyword, the other value will be "center".                               */
  /****************************************************************************/
  background-position: center center;
  /****************************************************************************/
  /* The background-repeat property sets if/how a background image will be    */
  /* repeated. By default, a background-image is repeated both vertically     */
  /* and horizontally.                                                        */
  /* Possible Values                                                          */
  /*   no-repeat: The background-image is not repeated. The image will only   */
  /*              be shown once.                                              */  
  /****************************************************************************/
  background-repeat: no-repeat;
  /****************************************************************************/
  /* The background-size property specifies the size of the background        */
  /* images.                                                                  */
  /* Possible Values                                                          */
  /*   cover: Resize the background image to cover the entire container,      */
  /*          even if it has to stretch the image or cut a little bit off     */
  /*          one of the edges.                                               */  
  /****************************************************************************/
  background-size: cover;
  /****************************************************************************/ 
  /* The height property sets the height of an element.                       */
  /****************************************************************************/ 
  height: 100%; 
}

#idDivTheJourney
/******************************************************************************/
/* The Journey                                                                */
/******************************************************************************/
{
  font-family:FontBankGothic;
  font-size:400%;
  color:white;
  display:none;
  left:30%;
  top:60%;
  /****************************************************************************/
  /* position: absolute removes an element from the normal document flow and  */ 
  /* positions it precisely relative to its closest positioned ancestor.      */
  /****************************************************************************/
  position:absolute;
}

#idDivTransformation
/******************************************************************************/
/* Transformation                                                             */
/******************************************************************************/
{
  font-family:FontOldEnglish;
  font-size:220%;
  font-style:italic;
  color:white;
  display:none;
  left:50%;
  top:34%;
  position:absolute;
}

#idDivLifestyle
/******************************************************************************/
/* Lifestyle                                                                  */
/******************************************************************************/
{
  font-family:FontCurl;
  font-size:220%;
  font-style:italic;
  color:white;
  display:none;
  left:20%;
  top:80%;
  position:absolute;
}

#idDivPlanningandExecution
/******************************************************************************/
/* Planning and Execution                                                     */
/******************************************************************************/
{
  font-family:FontVladimir;
  font-size:500%;
  color:white;
  display:none;
  left:10%;
  top:40%;
  position:absolute;
}

#idDivRetirement
/******************************************************************************/
/* Retirement                                                                 */
/******************************************************************************/
{
  font-family:FontBauh;
  font-size:500%;
  color:white;
  display:none;
  left:50%;
  top:50%;
  position:absolute;
}

#idDivEnterSiteButton
/******************************************************************************/
/* <div> for the Site Button                                                  */
/* The div that contains the button link needs to be centered horizontally    */ 
/* on the page.  Use the transform statement to perform this feat of magic.   */
/******************************************************************************/
{
  /****************************************************************************/
  /* The display: none; renders the element invisible when the page is        */
  /* rendered.                                                                */
  /****************************************************************************/
  display: none;
  left: 50%;
  /****************************************************************************/
  /* position: absolute removes an element from the normal document flow and  */ 
  /* positions it precisely relative to its closest positioned ancestor.      */
  /****************************************************************************/
  position: absolute;
  top:80%;
  /****************************************************************************/
  /* The transform: translate() function in CSS moves an element from its     */ 
  /* original position along the X (horizontal) and Y (vertical) axes without */ 
  /* altering the surrounding page layout.  This is how we will center the    */
  /* button horizontally.                                                     */
  /****************************************************************************/
  transform: translateX(-50%);
}

#idDivPhotoCaption
/******************************************************************************/
/* Photo caption                                                              */
/******************************************************************************/
{
  font-family: verdana;
  font-size: 70%;
  color: white;
  display: none;
  left: 2%;
  top: 90%;
  /****************************************************************************/
  /* position: absolute removes an element from the normal document flow and  */ 
  /* positions it precisely relative to its closest positioned ancestor.      */
  /****************************************************************************/
  position: absolute;
}
/* #endregion */