Team:Bielefeld-CeBiTec/CSS

/* 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; }

1. top_title {

   margin-bottom: 0px;

}

1. top_menu_14{

   border-bottom: 0px solid black;

}

1. 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;
 }

}

1. nav-toggle {

 position: absolute;
 left: 18px;
 top: 22px;
 cursor: pointer;
 padding: 10px 35px 16px 0px;

}

1. nav-toggle span,
2. nav-toggle span:before,
3. 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;

}

1. nav-toggle span:before {

 top: -10px;

}

1. nav-toggle span:after {

 bottom: -10px;

}

1. nav-toggle.active span {

 background-color: transparent;

}

1. nav-toggle.active span:before, #nav-toggle.active span:after {

 top: 0;

}

1. nav-toggle.active span:before {

 transform: rotate(45deg);

}

1. 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%;
    }

}

1. 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%;

}

1. 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;

}

1. 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; }

1. 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: -100%; } }

@-moz-keyframes animateBubble { 0% { margin-top: 40px; } 100% { margin-top: -80%; } }

@keyframes animateBubble { 0% { margin-top: 40px; } 100% { margin-top: -80%; } }

@-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; } }

.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; }

}