Difference between revisions of "Team:Bielefeld-CeBiTec/CSS"
| Line 780: | Line 780: | ||
| − | . | + | .s1 { |
-webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | -webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
-moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | -moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| Line 795: | Line 795: | ||
} | } | ||
| − | . | + | .s2 { |
-webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | -webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
-moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | -moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| Line 810: | Line 810: | ||
} | } | ||
| − | . | + | .s3 { |
-webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | -webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
-moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | -moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
| Line 825: | Line 825: | ||
} | } | ||
| − | . | + | .s4 { |
-webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | -webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
-moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | -moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; | ||
Revision as of 16:54, 21 September 2018
/* HQ CSS*/
.firstHeading {
display: none;
}
.mw-content-text { display: none; }
.logo_2018 { display: none; }
#globalWrapper { padding: 0px;
margin: 0px;
padding-bottom: 0px;
}
#content {
margin-left:0px; padding:0px; width:100%;
margin-top: -7px;
}
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ margin:0px; }
- top_title {
margin-bottom: 0px;
}
- top_menu_14{
border-bottom: 0px solid black;
}
- HQ_page p {
margin: 0;
}
/*NAVBAR*/
@charset "UTF-8";
body{ margin-top:0px; }
.navigation {
height: 70px; background: #002a5c; position: fixed; width:100%; text-decoration: none;
}
.brand {
position: absolute; padding-left: 20px; float: left; line-height: 70px; text-transform: uppercase; font-size: 1.4em; width: 300px;
}
.logo-img{ width: 70%; margin-top: 1%; }
@media only screen and (max-width: 1350px) { .logo-img{ width: 70%; margin-top: 2%; } }
@media only screen and (max-width: 790px) { .logo-img{ width: 70%; margin-top: 3%; } }
.brand a,
.brand a:visited {
color: #ffffff; text-decoration: none;
}
.nav-container {
max-width: auto; margin: 0 auto;
text-decoration: none; }
nav {
float: right;
text-decoration: none; } nav ul {
list-style: none; margin: 0; padding: 0;
text-decoration: none; } nav ul li {
float: left; position: relative;
text-decoration: none; } nav ul li a, nav ul li a:visited, nav ul li a:focus{
display: block; padding: 0 20px; line-height: 70px; background: #002a5c; color: #ffffff; text-decoration: none; margin-bottom:-4px; border-color:#002a5c;
} nav ul li a:hover, nav ul li a:visited:hover {
background: #4d9dff; color: #ffffff; text-decoration: none;
} nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px; content: " ▾"; text-decoration: none;
} nav ul li ul li {
min-width: 190px;
text-decoration: none; } nav ul li ul li a {
padding: 15px; line-height: 20px; text-decoration: none;
text-decoration: none; }
.nav-dropdown {
position: absolute; display: none; z-index: 1; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); text-decoration: none;
}
/* Mobile navigation */ .nav-mobile {
display: none; position: absolute; top: 0; right: 0; background: #002a5c; height: 70px; width: 70px;
}
@media only screen and (max-width: 1350px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
text-decoration: none;
}
nav ul li ul li a {
padding-left: 30px;
text-decoration: none;
}
.nav-dropdown {
position: static;
}
} @media screen and (min-width: 1351px) {
.nav-list {
display: block !important;
}
}
- nav-toggle {
position: absolute; left: 18px; top: 22px; cursor: pointer; padding: 10px 35px 16px 0px;
}
- nav-toggle span,
- nav-toggle span:before,
- nav-toggle span:after {
cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: #ffffff; position: absolute; display: block; content: ""; transition: all 300ms ease-in-out;
}
- nav-toggle span:before {
top: -10px;
}
- nav-toggle span:after {
bottom: -10px;
}
- nav-toggle.active span {
background-color: transparent;
}
- nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
- nav-toggle.active span:before {
transform: rotate(45deg);
}
- nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px; margin: 0 auto; padding: 10px;
}
/* W3 Schools templates*/
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1;} .w3-top{top:0;} .w3-bottom{bottom:0;}
#footer{display:block;width:98%}
.w3-container:after,.w3-container:before{content:"";display:table;clear:both;width:98%;}
.w3-container{}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important;}
.w3-center .w3-bar{display:inline-block;width:auto;}
.w3-center{text-align:center!important;}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important;}
.w3-xlarge{font-size:24px!important;}
/*OWN STYLES*/
body { font-family: "Lato", sans-serif; }
@media only screen and (min-width: 1010px){ .main_content {
background-color: white; border: 1px solid #000000; border-radius: 0px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); min-height: 100px; border-top: none; border-bottom: none;
margin-left:25%;
margin-right:25%;
padding-bottom: 4%;
min-height: 420px;
} }
@media only screen and (max-width: 1009px){ .main_content {
background-color: white; border: 1px solid #000000; border-radius: 0px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); min-height: 100px; border-top: none; border-bottom: none;
margin-left:0;
margin-right:0;
padding-bottom: 4%;
}
}
- container{
position: relative; min-height: 100%; height: 100%;
}
.container{ padding-top:0px;
background-color: #001633;
}
.section{ margin: 1%; }
.half{ max-width: 48%; }
.half.left { float: left; margin-right: 1%; }
.half.right { float: right; margin-left: 1%;
}
article, .article { text-align: justify;
display: block; margin: auto;
font-size: 16px; padding-bottom: 20px; }
article, .article, .contentline { width: 90%; font-size: 16px; padding-bottom: 30px; }
.contentline article, .contentline .article { width: 100%; }
h1, h2, h3, h4, h5, h6 {
width: 92%; margin: auto; margin-top: 0px; padding-top: 20px; padding-bottom: 15px;
}
.p { text-align: justify; }
.title { font-size: 40px; padding-top: 7%; padding-left: 7%; padding-bottom: 30px;
font-weight: bold;
}
h2 { padding-left: 3%; font-size:14; }
br { display: block; /* makes it have a width */
content: ""; /* clears default height */
margin-top: 20px; /* change this to whatever height you want it */
}
p {
font-size:14px;
}
body { padding-top: 0px; }
article{
padding-right: 5%;
padding-left : 5%;
}
#page-arrow-top { display: none; cursor: pointer; padding: 0; margin: 0; position: fixed; bottom: 20px; right: 50px; }
.half { width: 48%; }
.half.left { float: left; margin-right: 1%; }
.half.right { float: right; margin-left: 1%; }
.sidenavi{
margin-top: 50px; margin-left: 25px; display: block; position: -webkit-sticky;
position: sticky;
top: 150px;
float: left; background-color: white; border-radius: 30px; border-color: #001633; }
.side_list{
display: block;
margin: 30px;
color: #002a5c;
}
.side_link{ color: #002a5c; font-size: 20px; text-decoration:none; padding: 10px; }
.side_list > a:hover{ text-decoration:none; color: #4d9dff; }
.side_list > a{ text-decoration:none; font-size: 20px; padding: 10px; width:100%; cursor: pointer;
color: #002a5c;
}
@media only screen and (max-width: 1150px){
.sidenavi{
margin-top: 50px; margin-left: 25px; display: block; position: -webkit-sticky;
position: sticky;
top: 150px;
float: left; background-color: white; border-radius: 30px; }
.side_list{ display: block; margin: 30px; color: #002a5c; }
.side_link{ color: #002a5c; font-size: 12px; text-decoration:none; padding: 10px; }
.side_list > a:hover{ text-decoration:none; color: #4d9dff; }
.side_list > a{ text-decoration:none; font-size: 16px; padding: 12px; width:100%; cursor: pointer;
color: #002a5c;
}
}
@media only screen and (max-width: 1010px){ .sidenavi{ display: none;
} }
figure {
text-align: center; margin-bottom: 30px;
}
figcaption{ text-align: justify;
font-size: 13px;
}
.figure.eighty { width:80%; }
.figure.ten { width:10%; }
.figure.twenty { width:20%; }
.figure.thirty { width:30%; } nav ul li a:visited .figure.fourty { width:40%; }
.figure.fifty { width:50%; }
.figure.sixty { width:60%; }
.figure.seventy { width:70%; }
.figure.ninety { width:90%; }
.figure.hundred { width:100%; }
table, th, td {
border: 1px solid black; border-collapse: collapse; font-size:17px;
} th, td {
padding: 15px; text-align: left;
} table#t01 tr:first-child td{
background-color: #eee;
}
table#t01 tr td:first-child {
background-color: #eee; color: black;
}
table.centern{
margin-left:15%; margin-right:15%; margin-top: 100px; margin-top: 5%;
}
- HQ_page table {
border: 1px solid #ccc; border-collapse: collapse; width: 70%; margin: auto; margin-bottom: 0px; margin-top: 100px; margin-right: auto; margin-left: auto;
}
hr {
margin-top: 10%; margin-bottom: 20px; border: 0; text-align: center; border-top: 2px solid #000000; margin-left: auto; margin-right: auto;
}
.reftext {
display: block; text-align: justify; margin-left: 5%; margin-right: 5%; font-size: 14px; padding-bottom: 20px; line-height: 20px;
}
/*Footer*/ .fa-facebook-official:before {
content: "\f230"; color: white;
}
.fa-instagram:before {
content: "\f230"; color: white;
}
.fa-twitter:before {
content: "\f230"; color: white;
}
- myDIV {
margin-top: 10px; display:none;
}
.refbtn{
background-color: white; border: none; font-size: 150%; font-weight: bold; color: black; margin-left: 5%; margin-bottom: 26px; margin-top: 30px;
}
a.shifted-anchor { display: block; position:relative; top: -100px; }
- active{
text-decoration: none; }
html,body { background-color: #001633; }
- myVideo {
position: static; top:0; left:0 right: 0; bottom: 0; height: auto; margin-top: 70px; z-index:1;
} @-webkit-keyframes animateBubble { 0% { margin-top: 40px; } 100% { margin-top: -80%; } }
@-moz-keyframes animateBubble { 0% { margin-top: 40px; } 100% { margin-top: -80%; } }
@keyframes animateBubble { 0% { margin-top: 40px; } 100% { margin-top: -80%; } }
@-webkit-keyframes animateBubbleSeite { 0% { margin-top: 40px; } 100% { margin-top: -95%; } }
@-moz-keyframes animateBubbleSeite { 0% { margin-top: 40px; } 100% { margin-top: -95%; } }
@keyframes animateBubbleSeite { 0% { margin-top: 40px; } 100% { margin-top: -95%; } }
@-webkit-keyframes sideWays {
0% {
margin-left:0px;
}
100% {
margin-left:50px;
}
}
@-moz-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } }
@keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } }
.s1 {
-webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 5%; top: 95%;
z-index:1;
overflow: hidden;
-webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }
.s2 { -webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 15%; top: 95%;
z-index:1;
overflow: hidden;
-webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }
.s3 { -webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 85%; top: 95%;
z-index:1;
overflow: hidden;
-webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }
.s4 { -webkit-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubbleSeite 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 95%; top: 95%;
z-index:1;
overflow: hidden;
-webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }
.x1 {
-webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: -5%; top: 95%;
z-index:1;
overflow: hidden;
-webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }
.x2 { -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 5%; top: 95%;
z-index:1;
overflow: hidden; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }
.x3 { -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 10%; top: 95%; overflow: hidden; z-index:1; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }
.x4 { -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 20%; top: 95%; overflow: hidden; z-index:1; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }
.x5 { -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 30%; top: 95%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }
.x6 { -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 50%; top: 95%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }
.x7 { -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 65%; top: 95%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }
.x8 { -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 80%; top: 95%; overflow: hidden; z-index:1; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }
.x9 { -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 90%; top: 95%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }
.x10 { -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 80%; top: 95%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }
.bubble {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
height: 200px; position: absolute; width: 200px; }
.bubble:after { background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 0%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(0%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
-webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3); -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3); box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
content: ""; height: 180px; left: 10px; position: absolute; width: 180px; }
}