/******************************************************************************/
/* wow.css */
/* */
/* Date Description Name */
/* -------- -------------------------------------------------- ------------ */
/* 20250710 Initial coding. Rodney */
/******************************************************************************/
/******************************************************************************/
/* The Morpheus font is used specifically for World of Warcraft font. */
/******************************************************************************/
@font-face
{
font-family: Morpheus;
src: url(morpheus.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 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: 2px 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
}
.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. */
/****************************************************************************/
height: 100vh;
}
.clsDivGap
{
/****************************************************************************/
/* The height CSS property specifies the height of an element. By default, */
/* the property defines the height of the content area. */
/****************************************************************************/
height:50px;
}
.clsImageFittingDiv
{
/****************************************************************************/
/* 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
. */
/****************************************************************************/
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:inherit;
/****************************************************************************/
/* 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
}
.clsWowheadIcon
{
padding-left:40px;
height:60px
}
/******************************************************************************/
/* This ID is for the very first, topmost stripe or row at the top of the */
/* page. */
/******************************************************************************/
#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
. */
/****************************************************************************/
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
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
. */
/****************************************************************************/
padding-left: 20px;
padding-right: 20px;
}
#idDivPageImage
{
/****************************************************************************/
/* 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
. */
/****************************************************************************/
height: 200px;
}
/******************************************************************************/
/* This ID is used to display the website name on the right side of a
. */
/******************************************************************************/
#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: Morpheus;
/****************************************************************************/
/* 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
. */
/****************************************************************************/
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
. */
/****************************************************************************/
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;
}
#idDivWowhead
{
/****************************************************************************/
/* 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
. */
/****************************************************************************/
/* height: 60px; */
}
#idDivWowheadTitle
{
/****************************************************************************/
/* 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: Morpheus;
/****************************************************************************/
/* 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
. */
/****************************************************************************/
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
. */
/****************************************************************************/
font-weight: normal;
/****************************************************************************/
/* 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
. */
/****************************************************************************/
padding-left: 20px;
}
#idDivWowheadIcons
{
/****************************************************************************/
/* 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;
/****************************************************************************/
/* 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
. */
/****************************************************************************/
height: 100px;
padding-top: 20px;
}