/* CSS property index       -- http://www.pageresource.com/dhtml/cssprops.htm */
/* CSS property inheritance -- http://www.w3.org/TR/CSS21/propidx.html */

* {  /* asterix is a UNIVERSAL selector - to define elements globally and particularly for elements that are not normally inherited if placed in the html tag for instance*/
   text-decoration:none;                     /*text-decoration: none|underline|overline|line-through|initial|inherit;*/
   box-sizing:border-box;                    /*border-box = The width and height properties (and min/max properties) includes content, padding and border, but not the margin*/
   padding:0px;
   margin:0px;
}

/* The major difference between :root and html is that :root (which is a pseudo-class selector) has a higher specificity than html ( The :root selector overrides the html selector)
    One useful use of the :root selector is for declaring global-scope CSS variables or custom properties. */ 
:root { 
	/* Variables */
   --productPgMaxWidth: 1000px;
   --headerHeight: 3em;						 /*em = relative to parent element, % = relative to parent element, rem = root element, px = literal size, VW, VH = relative to viewport*/
   --lineHeight: 1.0em;
   
   font-family: Arial, sans-serif;
   font-size: 14px;                          /*font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;*/
   font-weight:normal;                       /*normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit */
   font-style:normal;                        /*normal | italic | oblique | inherit */
   font-variant:normal;                      /*normal | small-caps | inherit */
   text-align:left;                          /*text-align: left|right|center|justify|initial|inherit;*/
   letter-spacing: 0.00em;
   line-height: var(--lineHeight);                
   background-color:hsl(0,0%,22.4%);		     /*This is the color of the margin area (HTML element)*/
} 

:root.lightPageTheme {
   font-weight: 400;
   /* Variables */
   --textPlainColor: hsl(0,0%,47.1%);			 /*Text-color*/
   --textPlainDeemphasisColor: hsl(0,0%,66.7%);
   --textVividColor: hsl(0,0%,15.7%);
   --textUserConsole: hsl(42,100%,39.2%);
   --textHeadingBackColor: hsl(0,0%,90.2%);
   --linkColor: hsl(0,66%,44%);
   --separatorColor: hsl(0,0%,59%);
   --pageBackColor: hsl(0,0%,100%);
   --navbarColor: hsla(0,0%,96%,0.9);
   --navbarBtmBrdrColor: hsl(0,100%,40%);
   --shadowColor: hsla(0,0%,0%,0.5);
   --shadowColorBlk: hsla(0,0%,0%,1);
   --hoverPopRowBckColor: hsl(60,100%,98%);
   
   --textTintedGlassBox: hsl(0,0%,59%);
   --tintedGlassBckColor:hsla(0,0%,47%,0.1);
   --tintedGlassBrdColor:hsla(0,0%,47%,0.3);
 
   --textButtonColor: hsl(0,0%,47%);
   --buttonBkColor: hsl(0,0%,100%);
   --buttonBrdColor: hsl(0,0%,78%);
   --buttonHvrBkColor: hsl(49,100%,48%);
   --buttonHvrBrdColor: hsl(44,100%,43%);

   --textHeaderCompanyColor: hsl(0,0%,31%);
   --textHeaderTitleColor: hsl(0,0%,47%);
   --headerBackgroundColor: hsl(0,0%,94%);
   --headerBtmBorderColor: hsl(0,0%,47%);
   --headerBtmShadow: hsla(0,0%,8%,0.4);
   
   --canvasBorder: hsl(0,0%,47%);
   
   --galleryGridLineColor: hsl(0,0%,78%);
   --galleryBackgroundColor: hsl(0,0%,100%);
   --galleryHoverBorderColor: hsl(28,100%,47%);
   --galleryHoverBackColor: hsl(0,0%,100%);
}

:root.darkPageTheme {
   font-weight: 300;
   /* Variables */
   --textPlainColor: hsl(0,0%,78%);
   --textPlainDeemphasisColor: hsl(0,0%,43%);
   --textVividColor: hsl(0,0%,71%);
   --textUserConsole: hsl(42,100%,39%);
   --textHeadingBackColor: hsl(0,0%,4%);
   --linkColor: hsl(0,70%,50%);
   --separatorColor: hsl(0,0%,20%); 		 /* hr element*/
   --pageBackColor: hsl(0,0%,0%);
   --navbarColor: hsla(0,0%,96%,0.9);     /* The sliding nav drawer on top of the page */
   --navbarBtmBrdrColor: hsl(0,100%,40%);
   --shadowColor: hsla(0,0%,0%,0.5);
   --shadowColorBlk: hsla(0,0%,0%,1);
   --hoverPopRowBckColor: hsl(240,100%,3%);
   
   --textTintedGlassBox: hsl(0,0%,39%);
   --tintedGlassBckColor:hsla(0,0%,47%,0.1);
   --tintedGlassBrdColor:hsla(0,0%,48%,0.3);
   
   --textButtonColor: hsl(0,0%,47%);
   --buttonBkColor: hsl(0,0%,100%);
   --buttonBrdColor: hsl(0,0%,78%);
   --buttonHvrBkColor: hsl(49,100%,48%);
   --buttonHvrBrdColor: hsl(44,100%,43%);

   --textHeaderCompanyColor: hsl(0,0%,31%);
   --textHeaderTitleColor: hsl(0,0%,86%);
   --headerBackgroundColor: hsl(0,0%,0%);
   --headerBtmBorderColor: hsl(0,0%,47%);
   --headerBtmShadow: hsla(0,0%,8%,0.6);
   
   --canvasBorder: hsl(0,0%,47%);
   
   --galleryGridLineColor: hsl(0,0%,31%);
   --galleryBackgroundColor: hsl(0,0%,0%);
   --galleryHoverBorderColor: hsl(28,100%,47%);
   --galleryHoverBackColor: hsl(0,0%,0%);
}

/* Stanadrd Elements ----------------------------------------------------------------------------------------------------------------------------------------------- */
body { 
   color:var(--textPlainColor);
   width:var(--productPgMaxWidth);
   margin-left:auto;
   margin-right:auto;
}
body.copyright {                            /* select copyright class specific only to body (on top of the regular copyright class further down this page) */
   width:550px;
   font-size: 12px;
   height:20px;
}
header {   
   position:fixed;                          /*fixed = removed from flow and position relative to browser window (regardless of scrolling)*/
   height:3.3em;
   width:inherit;
   z-index:4;
}
header>div.grid {
   background-color:var(--headerBackgroundColor);
   color:var(--textHeaderTitleColor);
}
nav {
   position:absolute;                       /*absolute = removed from flow and measure from parent 0,0; relative = offset from its normal cursor position*/
   text-align:center;
   display:table;                           /*display-->use 'none' to turn an element off*/
   z-index:-1;
   top:-15px;
   width:inherit;
   height:55px;
   background-color:var(--navbarColor);
   border-bottom:1px solid var(--navbarBtmBrdrColor);
}
section {
   background-color:var(--pageBackColor); 
   z-index:-2;
   width:inherit;
}

hr {
   border:0;   /* this sets all four borders to nothing, otherwise you get a thicker line */
   border-bottom-width:1px;
   border-bottom-style:solid;
   border-bottom-color:var(--separatorColor);
}
hr.dashed {
   border-bottom-style:dashed;
}
p,dl {                                  /* comma selector: a,b,c,... select of these at the same time*/
   line-height:140%;
   padding-top:0.5em;
   padding-bottom:0.5em;
   padding-left:1em;
   padding-right:1em;
}
dd {
   margin-left:1.5em;
}
ol,ul {
   line-height:140%;
   margin-left:30px;
}
h1,h2,h3,h4,h5,h6 {
   font-weight:inherit;                   /*font-weight: normal|bold|bolder|lighter|number|initial|inherit;*/
   font-size:inherit;                     /*font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;*/
   text-align:center;
   padding:1em;
}
table {
   table-layout:fixed;
}
b.vivid {
   color:var(--textVividColor);
}
a:link, a:visited {                      /*single colon represents pseudo-classes. (A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s) ) */
   color:var(--linkColor);
}

/*INDIVIDUAL styles--------------------------------------------------------------------------------------------------------------------------------------------------*/
#IndexLoad {                             /*The pound sign (#) signifies an ID name*/
   position:absolute;
   top:0;
   left:0;
   width:inherit;
   height:inherit;
   background-color:hsl(0,0%,86%);
}
#IndexWaitTxt {
   border:1px solid hsl(45,100%,47%);
   border-radius:10px;
   padding-left:1.5em;
   padding-right:1.5em;
   padding-top:0.5em;
   padding-bottom:0.5em;
   font-size:2em;
   position:absolute;
   top:50%;
   left:50%;
   background-color:hsl(0,0%,94%);
   transform:translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);
}
#noJavascriptWarn {
    position:absolute;
    width:100%;
    text-align:center;
    font-size:16px;
    color:hsl(0,100%,35%);
    top:55%;
}
#IndexPageBody {
   position:relative;               /*relative = relative to its place in the text flow (will keep moving if things are added in the flow prior to it) */
   left:0px;
   top:0px;
   width:inherit;
   height:750px;
   overflow:hidden;
}
#IndexPageCanvas {
   position:absolute;
   width:inherit;
   height:inherit;
   background-color:hsl(0,0%,78%);
}
#IndexPageHeader {
   position:absolute;
   height:80px;
   width:750px;
   border-bottom:1px solid hsl(0,100%,35%);
   -webkit-transform:translate(-335px,335px) rotate(-90deg);
   transform: translate(-335px,335px) rotate(-90deg);
}
#IndexPageHeaderContent {
   height:inherit;
   font-size:40px;
   padding-top:20px;
   padding-left:20px;
   display:block;
   background-color:hsla(0,0%,4%,1);
   color:hsla(47,100%,45%,1);
   letter-spacing: 3px;
   -webkit-filter:grayscale(100%);
   filter:grayscale(100%);
   opacity:0.2;
}
#IndexPageHeaderContent span{
   color:hsl(0,0%,23.5%);
}

#IndexPageRfLogo {
   position:absolute;               /* use absolute coordinates with respect to its parent element */
   float:left;                      /* if the element is still inside the flow (position is not absolute) then it appears to the left of its container (left aligned). when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element. */
                                    /* the original intended purpose of floats was not to put block elements side by side, but to reproduce the traditional typographical effect of wrapping text around images */
   left:400px;
   top:250px;
}

#IndexPagePoem {
   position:absolute;
   overflow:hidden;
   padding:10px;
   background-color:hsla(0,0%,100%,0);
   border:0px;
   top:30px;
   left:610px;
   width:355px;
   height:145px;
   letter-spacing:1px;
   text-align:center;
   line-height:140%;
   font-style:italic;
   color:hsl(0,0%,47%);
}

#IndexPageAbout {
   position:absolute;
   top:520px;
   left:120px;
   width:850px;
   height:200px;
   line-height:110%;
   box-sizing:inherit;
}

#IndexPageAboutRow {
   overflow:inherit;
   height:180px;
   color:hsl(0,0%,31%);
}
#IndexPageAboutRayflectar {
   width:270px;
   font-size: 0.9em;
   border-right:1px dashed hsl(0,0%,47%);
   padding-right:10px;
   vertical-align:top;
}
#IndexPageAboutTbio {
   width:375px;
   font-size: 0.9em;
   padding-left:10px;
   padding-right:10px;
   vertical-align:top;
}
#indexPageAboutTsketch {
   vertical-align:top;
   opacity:1;
}
#HeaderTitleBar {
   position:absolute;
   border-bottom:1px dashed var(--headerBtmBorderColor);
   letter-spacing:0.4px;
   width:inherit;
   box-shadow:0px 5px 8px 0px var(--headerBtmShadow);
}
#HeaderTitleBar.greyTheme {                         /* selectors without spaces act like a logical AND. Select only if both ID=HeaderTitleBar AND class=greyTheme */
   box-shadow:0px 5px 8px 0px hsla(0,0%,8%,0.4);
}
#HeaderTitleBar.blackTheme {
   box-shadow:0px 5px 8px 0px hsla(0,0%,8%,0.6);
}
#HeaderTitleBar .gridRow {                          /* space selector: a b means select all b which are inside a. In this case select only the .gridRow class elements which are inside the HeaderTitleBar ID */
   height:3.3em;
}
#HeaderTitleBar .gridCell {
   font-size:1.3em;
   line-height:2.8em;
   text-align:center;
}
#HeaderLogo {
   width:25%;
}
#HeaderTitle {
   width:56%;
}
#HeaderNavigation .gridRow {
   top:1.4em;
}
#HeaderNavigation .gridCell {
   width:13%;
}
#OverlayCanvas {
   position:absolute;
   display:block;
   width:inherit; 
   height:600px; 
   border-bottom:1px solid var(--canvasBorder); 
   border-top:1px solid var(--canvasBorder);
}
#GameCanvas {
   display:block;
   width:inherit; 
   height:600px; 
   border-bottom:1px solid var(--canvasBorder); 
   border-top:1px solid var(--canvasBorder);
}
#gameInfoTable .gridRow {
   height:auto;
}
#gameInfoTable .titleColumn {
   width: 15%;
   text-align:right;
   height:auto;
   padding-left:10px;
   padding-right:10px;
}
#gameInfoTable .titleColumn.columnHeader{       /* (elements can have multiple classes class="a b c d"). In this case select elements that are in both classes titleColumn AND columnHeader inside a gameInfoTable ID*/
   height: 2em;
}
#gameInfoTable .textColumn.columnHeader {
   height:2em;
}
/* Design/Utility Gallery ---------------------------- */
#designGallery, #utilityGallery { 
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
#designGallery>div, #utilityGallery>div {
	border:1px dashed var(--galleryGridLineColor);
    border-left-color:transparent;
    border-top-color:transparent;
}
#designGallery>div img, #utilityGallery>div img{
   object-fit:contain;
}
#designGallery>div:hover {
   background-color:hsl(40,100%,98%);
   border-radius:0;
}
#utilityGallery>div:hover {
   background-color:hsl(197,100%,95%); /* if the background-color is changed via Javascript then the hover transition gets overridder unless the !important flag is present */
   border-radius:0;
}

/* Concepts List ------------------------------- */
#ConceptsList .content {
   width:795px;
}

/* Software page ------------------------------- */
#PersSoftList .imgCell {
   width:1450px;
}
#Rhino3dList .imgCell {
   width:1.6em;
}
/* Misc page ----------------------------------- */
#MiscMaxwList .imgCell {
   width:700px;
}
/* Pegasi page --------------------------------- */
#pegasiDir {
   border-top:1px solid var(--galleryGridLineColor);
   border-bottom:1px solid var(--galleryGridLineColor);
}
#pegasiDir .gridCell {
   padding-bottom:10px;
   text-align:center;
}
#pegasiDir img {
   display:block;
}
#Download .gridCell{
   text-align:center;
   width:50%;
   height:2em;
   padding-top:0.5em;
}

/* Asceti page --------------------------------- */
#AscetiSpecs {
   border-top:1px solid var(--galleryGridLineColor);
   border-bottom:1px solid var(--galleryGridLineColor);
}
#AscetiSpecs .gridCell {
   border-right:1px dashed var(--galleryGridLineColor);
   width:25%;
   vertical-align:top;
}
#AscetiSpecs .gridCell p {
   color:var(--textVividColor);
}
#AscetiExercises {
   border-top:1px solid var(--galleryGridLineColor);
}
#AscetiExercises .gridCell {
   border-right:1px dashed var(--galleryGridLineColor);
   width:50%;
}
#AscetiExercises .gridRow {
   border-bottom:1px dashed var(--galleryGridLineColor);
}
#AscetiExercises .caption {
   position:absolute;
   top:1em;
   text-align:center;
   width:100%;
}
#AscetiHeader {
   top:-0.6em;
}
#AscetiBodybuild, #AscetiOutdoor {
   opacity:0.3;
}
#AscetiBodybuild .caption, #AscetiOutdoor .caption {
   position:absolute;
   font-size:200%;
   top:40%;
   left:5%;
   color:hsl(35,100%,50%);
   text-shadow:0px 0px 5px var(--shadowColorBlk),0px 0px 3px var(--shadowColorBlk);
}
#AscetiPhysics {
   border-top:1px dashed var(--galleryGridLineColor);
   border-bottom:1px dashed var(--galleryGridLineColor);
}
#AscetiPhysics .gridCell {
   width:25%;
}

/*GROUPS/CLASSES-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/*The dot signifies a class*/
.richList .gridRow {                            /* the space between classes here means select all .gridRow classes inside .richList classes */
   overflow:hidden;                             /* if there was no space between the classes then both would need to be found together (any element including nested ones assigned to both classes) for it to have effect*/
   border-bottom:1px solid var(--separatorColor);
}
.richList .imgCell {
   position:absolute;
   top:50%;
   transform:translate(5px,-50%); -ms-transform: translate(5px,-50%); -webkit-transform: translate(5px,-50%);
   transition:transform 1s; -webkit-transition:transform 1s;
}
.richList .imgCell:hover {
   transform:translate(-55%,-50%); -ms-transform: translate(-55%,-50%); -webkit-transform: translate(-55%,-50%);
}
.richList .preReq {
   width:21%;
   color:var(--textPlainDeemphasisColor);
}
.richList .content {
   width:61%;
}
.richList .title {
   color:var(--textPlainDeemphasisColor);
   border-bottom:1px dashed var(--galleryGridLineColor);
}
.richList .footer {
   color:var(--textPlainDeemphasisColor);
   text-align:right;
   border-top:1px dashed var(--galleryGridLineColor);
   width:100%;
}
.console {
    color:var(--textUserConsole);
}
.centeredObj {
   position:absolute;
   margin:auto;
   top:0;
   left:0;
   bottom:0;
   right:0;
   max-width:100%;
   max-height:100%;
}
.folderTab {
   display:inline-block;
   padding-left:2em;
   padding-right:2em;
   padding-top:0.5em;
   padding-bottom:0.5em;
}
.yellowTabTheme {
   background-color:hsl(42,100%,47%);
   border-color:hsl(42,100%,47%);
   color:hsl(0,0%,96%);
}
.orangeTabTheme {
   background-color:hsl(38,100%,50%);
   border-color:hsl(38,100%,50%);
   color:hsl(0,0%,0%);
}
.blueTabTheme {
   background-color:hsl(197,100%,49%);
   border-color:hsl(197,100%,49%);
   color:hsl(0,0%,96%);
}
.greyTabTheme {
   background-color:hsl(0,0%,50%);
   border-color:hsl(0,0%,50%);
   color:hsl(0,0%,96%);
}
.lightGreyTabTheme {
   background-color:hsl(0,0%,94%);
   border-color:hsl(0,0%,78%);
   color:hsl(0,0%,100%);
}
.lightYellowTheme {
   background-color:hsl(60,100%,98%);
   border-color:hsl(60,100%,98%);
   color:hsl(0,0%,55%);
}
.yellowTheme {
   background-color:hsl(45,100%,47%);
   color:hsl(0,0%,8%);
}
.blackTheme {
   background-color:hsl(0,0%,0%);
   color:hsl(0,0%,86%);
}
.whiteTheme {
   color: hsl(0,0%,47%);
   background-color:hsl(0,0%,100%);
}
.greyTheme {
   background-color:hsl(0,0%,94%);
   color:hsl(0,0%,47%);
}
.lightGreyTheme {
   background-color:hsl(0,0%,98%);
   color:hsl(0,0%,47%);
}
.midGreyTheme {
   background-color:hsl(0,0%,35%);
   color:hsl(0,0%,63%);
}
.darkGreyTheme {
   background-color:hsl(0,0%,8%);
   color:hsl(0,0%,78%);
}
.orangeTxt {
   color:hsl(45,100%,47%)
}
.HeaderButton {
   position:relative;
   color:var(--textButtonColor); /* Overrides link text color */
   text-align:center;
   display:inline-block;         /* use inline-block otherwise the link hot area will span the whole width of the cell instead of only the button.  In order to keep this button centered the container needs to be set as text-align:center */
   width:7em;
   line-height:1.5em;
   background-color:var(--buttonBkColor);
   border:1px solid var(--buttonBrdColor);
   border-radius:0.6em;
   -webkit-transition:background-color 1s, border-color 1s;
   transition:background-color 1s, border-color 1s;
}
.HeaderButton:hover {
   border-color:var(--buttonHvrBrdColor);
   background-color:var(--buttonHvrBkColor);
}
.IndexPageCopyrightIframe {
   position:absolute;
   top:730px;
   left:480px;
   width:550px;
   height:20px;
   border:none;
   overflow:hidden;
}
.DefaultCopyrightIframe {
   display:block;
   margin:auto;
   width:550px;
   height:20px;
   border:none;
   overflow:hidden;
}
.copyright{
   color:var(--textPlainDeemphasisColor);
   background-color:transparent;
}
.tintedGlass{
   position:absolute;
   border:1px solid var(--tintedGlassBrdColor);
   overflow:hidden;
   border-radius:0.8em;
   background-color:var(--tintedGlassBckColor);
   color:var(--textTintedGlassBox);
   padding:0.8em;
}

.menuButton{
   position:absolute;
   width:100px;
   height:100px;
   font-size:0.88em;
   opacity:0.8;
   overflow:hidden;
   border-radius:0.4em;
   -webkit-filter:grayscale(100%);
   filter:grayscale(100%);
}
.menuButton img{
   position:absolute; 
   top:0px;
   left:0px;

}
.menuButton span{
   position:absolute;
   top:6.6em;
   left:0px;
   width:100px;
   height:1.6em;
   line-height:1;
   text-align:center;
   padding-top:0.3em;
   overflow:hidden;
}
.headline {
   font-size:2em;
}
.grid { 
	font-size:1.0rem;
}
.gridRow {
   position:relative;
}
.gridCell {
   position:relative;
   display:inline-block;               /*inline: anything inline means "inline" of text as if you are typing and insert something at the blinking cursor (careful: spaces and carriage returns in the HTML will be reflected) */
                                       /*inline: also converts block level elements to inline elements. Inline-block is preferable to float. Float was originally intended to get text around an image like in magazines */
   vertical-align:middle;
   height:inherit;
}
.gridCell img {
   vertical-align:middle;
   display:inline-block;
}
.hoverPop {
   z-index:0;
   transition:background-color 1s, box-shadow 1s, z-index 1s; -webkit-transition:background-color 1s, box-shadow 1s, z-index 1s;
}
.hoverPop:hover {
   z-index:3;
   background-color:var(--hoverPopRowBckColor);
   box-shadow:0px 0px 15px 0px var(--shadowColor);
}
.zoomGallery { 
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   border-top:0px solid var(--galleryGridLineColor);
   border-bottom:0px solid var(--galleryGridLineColor);
}
.zoomGallery>div {
   display:flex;
   align-items: center;									/* https://stackoverflow.com/a/45599428 */
   background-color:var(--galleryBackgroundColor);
   overflow:hidden;
   border:1px solid transparent;
   cursor:pointer;
   transition:border-color 1s, border-radius 1s, background-color 1s; -webkit-transition:border-color 1s, border-radius 1s, background-color 1s;
}
.zoomGallery>div:hover {
   border-color:var(--galleryHoverBorderColor);          /* if the background-color is changed via Javascript then the hover transition gets overridder unless the !important flag is present */
   border-radius:1.25em;
   background-color:var(galleryHoverBackColor);
}
.zoomGallery>div img{
   width:100%;
   aspect-ratio: 1/1;
   object-fit:cover;
}