- needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: var(--bgcolor-table);
/* #f1f1f1; */
min-width: 160px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: lime;
/* black; */
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: var(--bgcolor-body);}
/* #ddd;} */
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/* How TO - Centered Top Navigation */
/* https://www.w3schools.com/howto/howto_css_topnav_centered.asp */
/* Add a black background color to the top navigation */
.topnav {
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 0.875rem;
/* 17px; */
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Centered section inside the top navigation */
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) {
.topnav a, .topnav-right {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
/* How TO - Equal Width Navbar Links */
/* https://www.w3schools.com/howto/howto_css_topnav_equal_width.asp */
/* Style the navigation menu */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Navigation links */
.navbar a {
float: left;
padding:0.5rem;
/* 12px; */
color: white;
text-decoration: none;
font-size: 0.875rem;
/* 17px; */
width: 20%; /* Five equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
/* Add a background color on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #04AA6D;
}
/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left; /* If you want the text to be left-aligned on small screens */
}
}
/* The 'Goldilocks' Version 240424 */
/* Dropup Button */
.dropbtnup {
background-color: var(--bgcolor-body);
/* #04AA6D; */
color: lightgreen;
/* color: lightgreen; */
/* white; */
padding:
/* 0.875rem; */
16px;
font-size: 0.875rem;
/* 16px; */
border: none;
}
/* The container
- needed to position the dropdown content */
.dropup {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropup-content {
display: none;
position: absolute;
background-color: black;
/* var(--bgcolor-body); */
/* #04040; */
/* #f1f1f1; */
bottom: 40px;
min-width: 100px;
text-align: left;
/* 160px; */
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
z-index: 1;
}
/* Links inside the dropup */
.dropup-content a {
color: white;
/* color: lightgreen; */
/* black; */
padding: 15px 15px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropup-content a:hover {background-color:lightgreen;color:black}
/* .dropup-content a:hover {background-color:grey;color:lime} */
/* .dropup-content a:hover {background-color:purple;} */
/* var(--bgcolor-body);} */
/* #ddd;} */
/* Show the dropdown menu on hover */
.dropup:hover .dropup-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropup:hover .dropbtnup {background-color: var(--bgcolor-body); color:white;}
/* .dropup:hover .dropbtnup {background-color: #3e8e41; color:white;} */
/* Image Gallery controls for Elsoc, Alumni, etc */
/* 240610 */
.img-gallery{
width: 90%;
margin: 100px auto 50px;
display: grid;
/* original */
/* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 30px;
}
.img-gallery img{
width: 100%;
cursor: pointer;
}
/* feedback of mouse pointer location */
.img-gallery img:hover{
transform: scale(0.8) rotate(-15deg);
/* border-radius: 20px; */
border-radius: 1rem;
/* hidden because bg has no effect as is currently grey */
/* box-shadow: 0 32px 75px rgba(68,77,136,0.2); */
}
.full-img{
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.9);
position: fixed;
top: 0;
left: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 100;
}
.full-img img{
width: 90%;
/* original */
/* max-width: 700px; */
max-width: 1000px;
/* try - nbg 240629*/
/* height: 80%; */
}
/* location of 'X' for Close large image view */
.full-img span{
position: absolute;
top: 5%;
right: 5%;
font-size: 30px;
color: white;
cursor: pointer;
}
/* Random Quote Generator
https://codepen.io/kkoutoup/pen/zxmGLE
Found: 240707 */
#container{
width:800px;
margin:50px auto;
padding: 20px;
width:50%;
}
#container h2{
text-align:center;
color:#045;
}
#quoteContainer{
width:75%;
/* background: #fff; */
background: darkgrey;
padding:10px;
margin:30px auto;
text-align: center;
height:70px;
}
#buttonContainer{
width: 100%;
text-align: center;
}
#quoteButton{
width:200px;
margin-top: 10px;
/* border:2px solid #46b8da; */
/* color:#045; */
color:#fff;
font-family: inherit;
/* font-weight: bold; */
padding:5px;
text-decoration: none;
text-align: center;
}
#quoteButton:hover{
cursor:pointer;
background:#09c;
border:2px solid #46b8da;
color: #fff;
}
#quoteButton:active{
cursor: pointer;
}
#quoteButton{
display: inline-block;
}
#quoteGenius{
font-style: italic;
font-weight: 600;
text-align: center;
}
/*MEDIA QUERIES*/
@media screen and(max-width:760px){
#quoteButton,#addNew{
display: block;
}
}