/*https://opensource.com/article/19/3/webfonts
http://fontlibrary.org/en/font/liera-sans*/
@font-face{font-family:"Liera Sans Extra Bold";src:url(LieraSans-ExtraBold.ttf)}
@font-face{font-family:"Liera Sans Regular";src:url(LieraSans-Regular.ttf)}
a:link{color:#4040FF}
a:visited{color:#7536EA}
a.button0{border-color:#CCC;-moz-border-radius:16px 16px 16px 16px;border-radius:16px 16px 16px 16px;border-style:solid;border-width:1px;color:#DDD;display:block;width:146px;height:30px;margin:auto;padding-top:1px;font-family:"Liera Sans Regular",sans-serif;font-size:20px;font-style:italic;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}
a.button0:hover,a.button1:hover{color:#EEE;background-color:rgba(255,255,255,0.494);box-shadow:0 0}
a.button1{border-color:#CCC;-moz-border-radius:16px 16px 16px 16px;border-radius:16px 16px 16px 16px;border-style:solid;border-width:1px;color:#EEE;display:block;width:146px;height:30px;margin:auto;padding-top:1px;background-color:rgba(255,255,255,0.494);box-shadow:inset 0 0 2px 4px#E6E6E6}
a.logo{color:#D70000}
body{color:#FFF;font-family:"Liera Sans Extra Bold","Arial Black",sans-serif;font-size:16px;/*Stylistically should be 12px, but here made 16px for legibility.*/margin:0;background-color:#000066;background-image:linear-gradient(#000066,#333399 126px,#996699 231px,#9999CC 357px);background-attachment:fixed;overflow-y:scroll}
#grad1 {background-image:linear-gradient(#000066, #996699 247px, #9999CC 463px)}
div.fixedwidth{background-color:#4F3F8B;background-image:url('images/BackGround-150x150.png');margin:auto;max-width:1366px;min-height:100vh}
div.bar1{background-color:#444444;background-image:url('images/AG128_2.png');height:100%;position:fixed;width:8px;z-index:2}
div.div0 a{font-family:"Liera Sans Regular",sans-serif;font-size:20px;font-style:italic;font-weight:700;text-decoration:none}
div.div0{background-attachment:local;background-color:#000017;background-image:url('images/CJCOMM15.png');height:100%;width:181px;position:fixed;text-align:center;z-index:1;overflow:auto}
div.bar2{background-color:#444444;background-image:url('images/AG128_2.png');height:100%;top:0px;margin-left:-8px;position:fixed;width:8px;z-index:1}
/*https://codepen.io/alexandredees/pen/ojaFr
https://stackoverflow.com/questions/4767971/how-do-i-center-floated-elements*/
div.logocontain{margin-bottom:16px;overflow:hidden}
div.logo1{float:left;position:relative;left:50%}
div.logo2{float:left;position:relative;left:-50%}
div.div1{margin-left:195px;word-wrap:break-word;margin-right:24px;padding-top:16px;padding-bottom:16px;position:relative}
div.floatright{float:right}
div.bar3{background-color:#444444;background-image:url('images/AG128_2.png');height:100%;position:fixed;margin-left:-8px;width:8px}
div.main{background-color:#000017;background-image:url('images/CJCOMM15.png');border:1px solid;margin-bottom:16px}
div.clear{clear:both}
img.mdoom{display:block;margin:auto;margin-top:3px}
img.logo{display:block;margin:auto;width:calc(1000px/2.14);height:auto;float:left;max-width:100%}
img.imgcenter{max-width:100%}
div.icons{float:left;position:relative;/*left for left float, right for right float, and -86px correction to properly center it either way*/left:calc(50% - 45px);font-size:x-small}
img.verified{float:left;padding:1px}
p.paragraph0{margin-left:18px;margin-right:18px}
p.imgcenter{margin-left:18px;margin-right:18px;text-align:center}
p.title{color:#D5D5D5;font-family:"Liera Sans Extra Bold","Arial Black",sans-serif;font-size:27px;/*font-size:20px*/font-style:italic;font-weight:700;margin-left:18px;margin-right:18px}

/*https://www.w3schools.com/css/css_tooltip.asp
This suggests setting .tooltip to position:relative. However, this causes the tooltip itself (.tooltiptext) to become rigid and maintain a static long rectangle even when there is room to widen out. Therefore, it is omitted so that it can flex in shape like normal paragraphs and divs.
Another suggestion from there that has an issue: Having display:inline-block here causes the line of text in the paragraph containing the underlined tooltip text to have an unwanted extra pixel of spacing between it and the line below. However, leaving it out does makes the tooltip itself display on top of the tooltiptext, which is also unwanted. This is correctable with more JavaScript, but creating more lines that has to be ran every single time the window is resized isn't worth removing one row of pixels.
Another benefit of display:inline-block is that it prevents the right edge of the tooltiptext from consuming the space after it when it isn't part of the <span> element.
https://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible for a commentary on JavaScript being ran on each window resize.*/
.tooltip{cursor:pointer;display:inline-block;text-decoration-line:underline;text-decoration-style:dashed}
/*Intended max-width is 327px. The horizontal padding is 32 (16 x 2), and the borders on each side (1 x 2) total 34 more pixels.*/
.tooltiptext{visibility:hidden;background-color:#4F3F8B;border:1px solid;padding:16px;position:absolute;max-width:293px}
/*This part is omitted because due to having mobile device-intended click activation on top of the desktop-intended hover activation, we need to keep track of a certain variable in order to keep track of the visibility state. This means we need to call a function whenever the pointer hovers over the text. So the hover function is moved over to the script instead of this CSS.*/ 
/*.tooltip:hover .tooltiptext{visibility:visible}*/

iframe.video{border:0}
/*https://avexdesigns.com/blog/responsive-youtube-embed*/
div.embed-container{position:relative;padding-bottom:calc(56.25% - 20.25px);overflow:hidden;max-width:100%;margin-left:18px;margin-right:18px}
div.embed-container iframe,div.embed-container object,div.embed-container embed{position:absolute;width:100%;height:100%}
/*https://stackoverflow.com/questions/38026714/youtube-embed-dynamic-size-with-min-and-max-size
The intended max-width is 560px to match the YouTube embed default. However, the desired margins above of 18px (left and right) shrink the main frame into an off-aspect ratio with horizontal black bars that never reach the specified 560px width, even on super-wide monitors (it always caps out at 524px, with a 294.75px-high video inside a 315px-high container).
To compensate, the total margin size (36px) is added to max-width, and the 56.25% above is modified into a calc (524 / 560 = 0.9357142857142857, 0.9357142857142857 * 315 = 294.75, 315 - 294.75 = 20.25).*/
div.video-wrapper{width:100%;max-width:596px;float:left}

/*https://www.w3schools.com/howto/howto_js_slideshow.asp*/
div.slideshow-container{position:relative;margin:auto}
a.prev,a.next{color:#DDD;cursor:pointer;position:absolute;top:50%;width:auto;margin-top:-22px;padding:16px;font-weight:bold;font-size:18px;-moz-border-radius:0 16px 16px 0;border-radius:0 16px 16px 0;user-select:none}
a.next{right:0;-moz-border-radius:16px 0 0 16px;border-radius:16px 0 0 16px}
div.pictext{font-size:15px;padding:8px 0px;position:absolute;bottom:8px;width:100%;text-align:center}
div.numbertext{font-size:12px;padding:8px 12px;position:absolute;top:0}
.dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:rgba(255,255,255,0.494);-moz-border-radius:50%;border-radius:50%;display:inline-block}
.active,.dot:hover{background-color:#DDD}
a.prev:hover,a.next:hover{background-color:rgba(255,255,255,0.494);color:#EEE}
/*https://www.codesdope.com/blog/article/adding-outline-to-text-using-css/*/
a.prev:active,a.next:active{background-color:rgba(255,255,255,0.494);box-shadow:inset 0 0 2px 4px#E6E6E6;color:#EEE}
.dot:active{background-color:#EEE;box-shadow:0 0 2px 4px#E6E6E6}

div.fade{-webkit-animation-name:fade;-webkit-animation-duration:0.5s;animation-name:fade;animation-duration:0.5s}
@-webkit-keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/*https://www.w3schools.com/css/css3_images.asp*/
img.screencap{max-width:100%;height:auto}
div.slideshow-margins{float:left;margin-left:18px;margin-right:18px}
/*http://www.corelangs.com/css/box/ontop.html*/
img.underlay{max-width:100%;height:auto;position:absolute}
div.slideshow-underframe{position:relative}