Updated 214 files via CloudCannon

assets/css/main20200519.css

@@ -53,7 +53,7 @@ html { font-size: 18pt; }
 
 body { background-color: url("css-images/BRIGHT-circuit_board_pattern.jpg"); background-size: 20%; background-repeat: repeat; color: #eeeeee; }
 
-body, input, select, textarea { font-family: "Courier New", monospace; font-size: 1rem; font-weight: 400; line-height: 1.65; }
+body, input, select, textarea { font-family: "Courier New", monospace; font-size: 0.75rem; font-weight: 400; line-height: 1.45; }
 
 a { -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; text-decoration: underline; }
 
@@ -1752,7 +1752,7 @@ body.is-preload .gallery.onload-fade-in article .image img { opacity: 0; }
 
 .gallery.style1 article .image img { display: block; width: 100%; border-radius: 0; }
 
-.gallery.style1 article .caption { -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; pointer-events: none; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; padding: 2rem; z-index: 1; font-size: 0.8rem; }
+.gallery.style1 article .caption { -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; pointer-events: none; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); opacity: 0; padding: 2rem; z-index: 1; font-size: 0.8rem; }
 
 .gallery.style1 article .caption a { pointer-events: auto; }
 
@@ -2399,39 +2399,35 @@ body.is-preload .items.onload-fade-in > * > .inner { opacity: 0; }
 
 .paused { animation-play-state: paused; }
 
-/* Navigation */
-.logo { z-index: 10; text-decoration: none; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 80%; height: 15%; background-color: transparent; background-image: url("/assets/panix-logo.svg"); background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: none; border-radius: 20px; -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); -o-filter: blur(15px); filter: blur(15px); }
+/* NAVIGATION */
+/* Style the navbar */
+#logo { padding: 10px; z-index: 10000; }
 
-.logo:hover { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); }
+.logo { text-decoration: none; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 300px; height: 95px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: none; border-radius: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
 
-.sticky { position: fixed; top: 20px; right: 20px; width: 50%; height: 10%; background-color: #111111; background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.075); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); }
-
-.sticky:hover { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); }
-
-@media only screen and (min-width: 769px) { .logo { position: absolute; top: 20px; right: 20px; width: 25%; height: 15%; background-color: transparent; background-image: url("/assets/panix-logo.svg"); background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: none; border-radius: 20px; }
-  .sticky { position: fixed; top: 20px; right: 20px; width: 20%; height: 10%; background-color: #111111; background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.075); } }
+.sticky { background-color: #111111; background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.075); }
 
 nav { position: absolute; width: 300px; height: 450px; max-height: 90vh; max-width: 90vw; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #111111; border-radius: 20px; padding: 20px; display: flex; flex-wrap: wrap; }
 
 nav ul { margin: auto; width: 100%; }
 
-nav li { list-style-type: none; margin: 10px; width: 80%; }
+nav li { list-style-type: none; margin: 10px; width: 80%; padding: 0; }
 
-nav li a { width: 100%; display: block; margin: auto !important; }
+nav li a { width: 100%; display: block; margin: auto !important; font-size: 14px; }
 
 .blurredout { filter: blur(5px); -webkit-transition: filter 400ms ease-in; -moz-transition: filter 400ms ease-in; transition: filter 400ms ease-in; }
 
 #wrapper { -webkit-transition: filter 400ms ease-in; -moz-transition: filter 400ms ease-in; transition: filter 400ms ease-in; }
 
-.modalDialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.85); z-index: 11; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; }
+.modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(238, 238, 238, 0.75); z-index: 11; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; }
 
 .modalDialog:target { opacity: 1; pointer-events: auto; }
 
 .modalDialog > div { width: 80%; max-width: 1100px; max-height: 80vh; display: flex; align-items: center; position: relative; margin: 100px auto; padding: 20px; border-radius: 3px; background: #001f24; background: -moz-linear-gradient(#000, #001f24); background: -webkit-linear-gradient(#000, #001f24); background: -o-linear-gradient(#000, #001f24); }
 
-.close-button { background: #eeeeee; color: #111111; line-height: 48px; position: absolute; right: -12px; text-align: center; top: -10px; width: 48px; height: 48px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 48px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; transition: all 400ms ease-in; }
+.close-button { background-color: #FFFFFF; color: black; line-height: 48px; position: absolute; right: -12px; text-align: center; top: -10px; width: 48px; height: 48px; text-decoration: none; font-weight: bold; -webkit-border-radius: 48px; -moz-border-radius: 48px; border-radius: 48px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; transition: all 400ms ease-in; }
 
-.close-button:hover { background: #e94d1d; color: #eeeeee; }
+.close-button:hover { color: #FFFFFF; }
 
 #closearea { position: fixed; width: 100%; height: 100%; }
 
@@ -2535,9 +2531,9 @@ audio { margin: 0; width: 100%; }
 
 .plItem { position: relative; }
 
-.plTitle { left: 50px; overflow: hidden; position: absolute; right: 65px; text-overflow: ellipsis; top: 0; white-space: nowrap; font-weight: bold; }
+.plTitle { left: 75px; overflow: hidden; position: absolute; right: 65px; text-overflow: ellipsis; top: 0; white-space: nowrap; font-weight: bold; padding-right: 10px; }
 
-.plNum { padding-left: 21px; width: 25px; }
+.plNum { padding-left: 21px; width: 65px; }
 
 .plLength { padding-left: 21px; position: absolute; right: 21px; top: 0; }
 

assets/css/noscript20200518-rev1.css

@@ -155,39 +155,35 @@ body.is-preload .banner.onload-image-fade-in .image img { opacity: 1; }
 
 .paused { animation-play-state: paused; }
 
-/* Navigation */
-.logo { z-index: 10; text-decoration: none; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 80%; height: 15%; background-color: transparent; background-image: url("/assets/panix-logo.svg"); background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: none; border-radius: 20px; -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); -o-filter: blur(15px); filter: blur(15px); }
+/* NAVIGATION */
+/* Style the navbar */
+#logo { padding: 10px; z-index: 10000; }
 
-.logo:hover { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); }
+.logo { text-decoration: none; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 300px; height: 95px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: none; border-radius: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
 
-.sticky { position: fixed; top: 20px; right: 20px; width: 50%; height: 10%; background-color: #111111; background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.075); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); }
-
-.sticky:hover { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); }
-
-@media only screen and (min-width: 769px) { .logo { position: absolute; top: 20px; right: 20px; width: 25%; height: 15%; background-color: transparent; background-image: url("/assets/panix-logo.svg"); background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: none; border-radius: 20px; }
-  .sticky { position: fixed; top: 20px; right: 20px; width: 20%; height: 10%; background-color: #111111; background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.075); } }
+.sticky { background-color: #111111; background-repeat: no-repeat; background-position: center center; background-size: 95% 95%; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; transition: all 400ms ease-in; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.075); }
 
 nav { position: absolute; width: 300px; height: 450px; max-height: 90vh; max-width: 90vw; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #111111; border-radius: 20px; padding: 20px; display: flex; flex-wrap: wrap; }
 
 nav ul { margin: auto; width: 100%; }
 
-nav li { list-style-type: none; margin: 10px; width: 80%; }
+nav li { list-style-type: none; margin: 10px; width: 80%; padding: 0; }
 
-nav li a { width: 100%; display: block; margin: auto !important; }
+nav li a { width: 100%; display: block; margin: auto !important; font-size: 14px; }
 
 .blurredout { filter: blur(5px); -webkit-transition: filter 400ms ease-in; -moz-transition: filter 400ms ease-in; transition: filter 400ms ease-in; }
 
 #wrapper { -webkit-transition: filter 400ms ease-in; -moz-transition: filter 400ms ease-in; transition: filter 400ms ease-in; }
 
-.modalDialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.85); z-index: 11; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; }
+.modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(238, 238, 238, 0.75); z-index: 11; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; }
 
 .modalDialog:target { opacity: 1; pointer-events: auto; }
 
 .modalDialog > div { width: 80%; max-width: 1100px; max-height: 80vh; display: flex; align-items: center; position: relative; margin: 100px auto; padding: 20px; border-radius: 3px; background: #001f24; background: -moz-linear-gradient(#000, #001f24); background: -webkit-linear-gradient(#000, #001f24); background: -o-linear-gradient(#000, #001f24); }
 
-.close-button { background: #eeeeee; color: #111111; line-height: 48px; position: absolute; right: -12px; text-align: center; top: -10px; width: 48px; height: 48px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 48px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; transition: all 400ms ease-in; }
+.close-button { background-color: #FFFFFF; color: black; line-height: 48px; position: absolute; right: -12px; text-align: center; top: -10px; width: 48px; height: 48px; text-decoration: none; font-weight: bold; -webkit-border-radius: 48px; -moz-border-radius: 48px; border-radius: 48px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; transition: all 400ms ease-in; }
 
-.close-button:hover { background: #e94d1d; color: #eeeeee; }
+.close-button:hover { color: #FFFFFF; }
 
 #closearea { position: fixed; width: 100%; height: 100%; }
 
@@ -291,9 +287,9 @@ audio { margin: 0; width: 100%; }
 
 .plItem { position: relative; }
 
-.plTitle { left: 50px; overflow: hidden; position: absolute; right: 65px; text-overflow: ellipsis; top: 0; white-space: nowrap; font-weight: bold; }
+.plTitle { left: 75px; overflow: hidden; position: absolute; right: 65px; text-overflow: ellipsis; top: 0; white-space: nowrap; font-weight: bold; padding-right: 10px; }
 
-.plNum { padding-left: 21px; width: 25px; }
+.plNum { padding-left: 21px; width: 65px; }
 
 .plLength { padding-left: 21px; position: absolute; right: 21px; top: 0; }