Common.css

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* DO NOT COPY THIS TO MAIN SITE!!! */
body{
    border-left: 10px dashed red;
    border-right: 10px dashed red;
    height: max-content;
}

/* ^^^^^^^^^ */

/*
#mw-page-base {
  background: red;
}
*/
/*
@media only screen and (max-height: 800px) {
  .cFloat {
   height: 85%;
  }
  .toc {
   display: block;
   height: 100%;
   overflow: scroll;
  }
}
*/
@media only screen and (max-height: 800px) {
 .toctogglecheckbox:not(:checked) ~ ul {
   display: block;
   height:75vh;
   overflow: scroll;
 }
}

/*This will create a circle around the item.*/
.justthetip {
  height: 25px;
  width: 25px;
  background-color: #13548e;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
}

.tooltip {
  position: relative;
  display: inline-block;
}

a {
  color:white;
}

.tooltip .tooltiptext {
  visibility: hidden;
  
  /*I don't like that this is static, but I've got bigger fish to fry*/
  width: 300px;
  /*
  min-width:120px;
  max-width:75%;
  min-height:25px;
  max-height:100px;
  width: max-content;
  height: max-content;
  */

  background-color: #13548e;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  
  /*padding: 5px 0;*/
  padding: 10px;


  position: absolute;
  top: 120%;
  left: 50%;
  margin-left: -160px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 5px 5px;
  border-style: solid;
  border-color: transparent transparent #004684 transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;

  /*This causes the tooltip window to be on top of everything else, since it temporary.*/
  z-index: 10;
}


/* DCK 2_23_2021 Added to get multi tiered numbered lists. -----------------------------------------*/
/* Well this was super annoying to figure out...
   .numlist is an arbitrary class i choose.
   ol is the Ordered List
   li is the list item
   li:before no idea, stole that code off the interwebs.

   So, the space between .numlist and ol says "select all ol items that are decendants of .numlist.
   counter-reset: cNumlist--> cNumlist is the arbitrary name of the counter i choose.
   This should work for any number of list items...
   

.numlist ol {counter-reset: cNumlist;}
.numlist li{ display: block; }
.numlist li::before { content: counters(cNumlist, ".") ". "; counter-increment: cNumlist; }
*/

.noautonum .tocnumber { display: none; }

.cFloat {
 position: fixed;
 right: 0;
 top: 6em;
 
 /*This keeps it above the Circles.*/
 z-index: 1;
 max-width: 700px;
}

@media (min-width:1200px) {
 .cFloat .toc:not(:hover) {
  opacity: 0.65;
 }
 .cFloat .toc:hover {
  opacity: 1.0;
 }
}



/* Defining an alternative to a Heading format that doesn't get put into the TOC*/

.txtBig {
  font-size: 1.5em;
  font-family: 'Linux Libertine','Georgia','Times',serif;
  font-weight: bold;

  border-style: hidden hidden solid hidden;
  border-width: 1px;
  border-color: #a2a9b1;
}

.tab0 {
  margin-left: 0px;
}
.tab1 {
  margin-left: 25px;
}
.tab2 {
  margin-left: 50px;
}
.tab3 {
  margin-left: 75px;
}
.tab4 {
  margin-left: 100px;
}

/* CSS placed here will be applied to all skins */

/*Formatting for Change Table*/

.ChangesTable{
    border: 1px solid black;
    border-collapse: collapse;
}

.ChangesTable td, th, tr{
    border: 1px solid black;
    padding:10px;
}


/* CSS for Links -----------------------------------------*/

/* A link that has not been visited */
a:link {
    color: blue;
}
/* A link that has been visited */
a:visited {
    color: blue;
}
/* A link that is hovered on */
a:hover {
    color: red;
}
/* A link that is selected */
a:active {
    color: green;
}




/* -----------------------------------------------------*/

/* Header that is red*/
.warning_red {
    color: red;
    font-size: 20px;
}