Template:Virginia/css/index
@charset "UTF-8"; /* Override iGEM wiki settings, removing everything but the top navbar. */ @import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,900italic,500italic,500,400italic); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,900italic,500italic,500,400italic);
- sideMenu,
- top_title {
display: none; }
- content {
width: 100vw; padding: 0px; border: none; color: black; margin-left: auto; margin-right: auto; background-color: #fff; position: relative; }
- globalWrapper {
font-size: inherit; padding-bottom: 0; }
- top_menu_under {
height: 0px; }
ul {
list-style-image: none; /* removes the iGEM wiki bullets */ }
/* Begin actual Virginia iGEm 2018 Code */ /* UVA Colors $background-dark-color: #232D4B; $background-light-color: #ffffff; $accent-color: #E57200; $light-accent-color: rgb(255, 191, 128); $text-light: #ffffff; $text-dark-color: #666666; $link-color: #EB5F0C;
- /
/* Cherenkov Colors $background-dark-color:#282828; $background-light-color:#C3C3D8; $accent-color: #BFFBF9; $text-light: #E8F9F9; $text-dark-color: #001C4E; $link-color: #3DD4DF;
- /
/*Passion Fruit Colors*/ /* $background-dark-color:#FAF4E0; $background-light-color:rgb(128, 39, 81); $accent-color: #F5287F; $light-accent-color: rgb(255, 142, 189); $text-light: #1E0811; $text-dark-color: #FFF0EF; $link-color: #FBB645;
- /
/*Applies to all*/
- {
font-family: "Lato"; margin: 0; padding: 0; border: 0; }
img {
width: auto; height: auto; max-height: 100%; max-width: 100%; overflow: hidden; }
body {
background-color: #f7f5e9; }
.content {
color: #817f74;
padding: 3% 5%;
width: auto;
height: auto; }
.content::after {
clear: both;
content: "";
display: block; }
.content div.interactive {
width: calc(33.33333% - 80px);
float: left;
margin-left: 60px;
text-align: center; }
.content div.text {
width: calc(66.66667% - 100px);
float: left;
margin-left: 60px; }
.content div.text h1 {
padding: 3% 1%; }
.content div.text p {
margin: 1%;
line-height: 2em; }
a {
text-decoration: none;
color: #2c6a94;
transition: all 0.2s ease-in-out 0s; }
a:hover {
color: #00c3ff; }
header {
box-sizing: border-box;
/*Keeps the nav bar sticking on the top*/
position: sticky;
top: 0;
z-index: 99;
position: sticky;
top: 0;
z-index: 99;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
header * {
box-sizing: border-box; }
header nav {
line-height: 60px;
height: 60px;
width: 100%; }
header nav ul {
list-style: none;
margin: 0px;
padding: 0px;
margin-left: 0px;
margin-top: 0px;
background-color: #252525; }
header nav ul::after {
clear: both;
content: "";
display: block; }
header nav ul li {
width: calc(12.5%);
float: left;
margin-left: 0px;
float: left;
position: relative;
/*makes all the nav bar the same*/
line-height: 60px;
height: 60px;
/*a, related to link*/ }
header nav ul li a, header nav ul li a:visited {
/*transition time*/
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
display: flex;
align-items: center;
padding: 0 20px;
height: 100%;
width: 100%;
background: #252525;
color: #fffdff;
text-decoration: none;
white-space: nowrap;
/*adds the arrow on the nav bar, selects not only-child*/ }
header nav ul li a img, header nav ul li a:visited img {
margin-right: 10px;
max-height: 70%; }
header nav ul li a:hover, header nav ul li a:visited:hover {
color: #00c3ff;
text-shadow: 0px 0px 8px #00c3ff; }
header nav ul li a:not(:only-child):after, header nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾'; }
header nav ul li ul {
position: absolute;
z-index: -1;
/*remains hidden*/
visibility: hidden;
opacity: 0;
transform: translateY(-2em);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; }
header nav ul li ul::after {
clear: both;
content: "";
display: block; }
header nav ul li ul li {
width: calc(100%);
float: left;
margin-left: 0px;
overflow: hidden; }
header nav ul li:focus > ul, header nav ul li:hover > ul {
z-index: 1;
visibility: visible;
opacity: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s; }
footer {
box-sizing: border-box;
background-color: #252525;
border-top: 3px solid #2c6a94;
color: #fffdff;
padding: 25px; }
footer::after {
clear: both;
content: "";
display: block; }
footer div.scroll-up {
width: calc(16.66667% - 23.33333px);
float: left;
margin-left: 20px;
line-height: 75px;
height: 75px;
text-align: center; }
footer div.footer-name {
width: calc(50% - 30px);
float: left;
margin-left: 20px;
line-height: 75px;
height: 75px;
text-align: left; }
footer div.footer-logo {
width: calc(50% - 30px);
float: left;
margin-left: 20px;
line-height: 75px;
height: 75px;
text-align: left; }
.interactive {
color: #817f74; background-size: cover; }
.category-gallery {
margin: 3% 5%; }
.category-gallery::after {
clear: both;
content: "";
display: block; }
.category-gallery div {
width: calc(50% - 30px);
float: left;
margin-left: 20px;
text-align: center; }
@media only screen and (min-width: 1000px) {
.category-gallery div {
width: calc(16.66667% - 35px);
float: left;
margin-left: 30px; } }
.category-gallery div a p {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
/*overlay text over*/
/* float: left;
margin: 10px;
width: 100%;
height: 170px;
text-align: center;*/ }
.category-gallery div a img {
border-radius: 50%;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
margin-bottom: 25px;
width: 90%;
height: 90%;
/*float:left;*/ }
.category-gallery div a img:hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
.petri-dish {
border-radius: 50%; background-color: #252525; width: 200; height: 200; margin: 2%; }