Difference between revisions of "Template:Cologne-Duesseldorf/css"

 
(102 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
<style>
 
<style>
 +
 
@import url('https://fonts.googleapis.com/css?family=Quicksand');
 
@import url('https://fonts.googleapis.com/css?family=Quicksand');
 
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
 
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
Line 22: Line 23:
 
   background-color: #383838;
 
   background-color: #383838;
 
   border-bottom: 2px solid black;
 
   border-bottom: 2px solid black;
−
   z-index: 9999;
+
   z-index: 50;
 
}
 
}
 
#top_title {
 
#top_title {
Line 51: Line 52:
 
.pop_why_cover {
 
.pop_why_cover {
 
   display: none;
 
   display: none;
−
   z-index: 100;
+
   z-index: 50;
 
   margin-top: -65px;
 
   margin-top: -65px;
 
   margin-left: -40px;
 
   margin-left: -40px;
Line 71: Line 72:
 
   border: 3px solid #4e606e;
 
   border: 3px solid #4e606e;
 
   border-radius: 3px;
 
   border-radius: 3px;
−
   z-index: 100;
+
   z-index: 50;
 
}
 
}
  
Line 78: Line 79:
 
************************************************************************/
 
************************************************************************/
 
* {
 
* {
−
   box-sizing: border-box;
+
   -webkit-box-sizing: border-box;
 +
          box-sizing: border-box;
 
   margin: 0;
 
   margin: 0;
 
   padding: 0;
 
   padding: 0;
 
}
 
}
 
html {
 
html {
−
   font-size: 20px;
+
   font-size:16px;
 
}
 
}
 
body {
 
body {
Line 90: Line 92:
 
   padding: 0;
 
   padding: 0;
 
   color: black;
 
   color: black;
−
   background-color: #149375;
+
   background-color: white;
 
   font: inherit;
 
   font: inherit;
 
   font-size:16px;
 
   font-size:16px;
 +
  word-wrap: break-word;
 
}
 
}
  
Line 107: Line 110:
 
   background-color: #149375;
 
   background-color: #149375;
 
   position: relative;
 
   position: relative;
−
   font-size: 100%;
+
   font-size: 16px;
 
}
 
}
 
#content {
 
#content {
Line 134: Line 137:
 
     margin: auto;
 
     margin: auto;
 
     padding: 8% 0;
 
     padding: 8% 0;
 +
}
 +
 +
#bodyContent .frontpage{
 +
    width: 100%;
 +
    margin: 0% 0;
 +
    padding: 5%;
 +
    padding-top: 0%;
 +
    background: white;
 +
    box-shadow: 0 -20px 20px 20px white;
 
}
 
}
  
Line 147: Line 159:
 
   display:none;
 
   display:none;
 
   position:fixed;
 
   position:fixed;
−
   top: 125px;
+
   top: 100px;
 
   left: 85%;
 
   left: 85%;
 
   right: 0;
 
   right: 0;
 
   bottom: 0;
 
   bottom: 0;
 
   padding: 20px;
 
   padding: 20px;
−
   flex-direction:column;
+
   -webkit-box-orient:vertical;
−
   justify-content:space-around;
+
  -webkit-box-direction:normal;
 +
      -ms-flex-direction:column;
 +
          flex-direction:column;
 +
   -webkit-box-pack: start;
 +
      -ms-flex-pack: start;
 +
          justify-content: flex-start;
 +
  -webkit-box-align: start;
 +
      -ms-flex-align: start;
 +
          align-items: flex-start;
 
}
 
}
  
 
@media (min-width: 1024px){
 
@media (min-width: 1024px){
 
   #ToC{
 
   #ToC{
 +
    display:-webkit-box;
 +
    display:-ms-flexbox;
 
     display:flex;
 
     display:flex;
 
   }
 
   }
Line 163: Line 185:
 
#bodyContent #ToC a {
 
#bodyContent #ToC a {
 
   display:block;
 
   display:block;
 +
  margin:10px 0;
 
   position:relative;
 
   position:relative;
 
   text-align: left;}
 
   text-align: left;}
−
#bodyContent #ToC a[title=H1] { font-size:18px;}
+
#bodyContent #ToC a[title=H1] { display:none;font-size:1.125rem;}
−
#bodyContent #ToC a[title=H2] { font-size:14px;}
+
#bodyContent #ToC a[title=H2] { font-size:0.875rem;}
−
#bodyContent #ToC a[title=H3] { font-size:12px;}
+
#bodyContent #ToC a[title=H3] { display:none;font-size:0.750rem;}
  
 
#bodyContent nav {
 
#bodyContent nav {
Line 173: Line 196:
 
   position: fixed;
 
   position: fixed;
 
   background-color: white;
 
   background-color: white;
−
   box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+
   -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 +
          box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 
   left: 0;
 
   left: 0;
 
   right: 0;
 
   right: 0;
 
   top: 16px;
 
   top: 16px;
−
   z-index: 9999;
+
   z-index: 50;
 
}
 
}
  
 
@media (min-width: 1024px) {
 
@media (min-width: 1024px) {
 
   #bodyContent nav{
 
   #bodyContent nav{
 +
    display:-webkit-box;
 +
    display:-ms-flexbox;
 
     display:flex;
 
     display:flex;
 
   }
 
   }
Line 190: Line 216:
 
   width:80%;
 
   width:80%;
 
   margin:auto;
 
   margin:auto;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 
   display: flex;
 
   display: flex;
−
   flex-direction: row;
+
   -webkit-box-orient: horizontal;
−
   justify-content: space-between;
+
  -webkit-box-direction: normal;
−
   align-items: center;
+
      -ms-flex-direction: row;
 +
          flex-direction: row;
 +
   -webkit-box-pack: justify;
 +
      -ms-flex-pack: justify;
 +
          justify-content: space-between;
 +
   -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 
   padding: 0 20px;
 
   padding: 0 20px;
 
}
 
}
Line 220: Line 255:
  
 
#bodyContent .menu li a {
 
#bodyContent .menu li a {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 
   display: flex;
 
   display: flex;
 
   text-align: center;
 
   text-align: center;
−
   align-items:center;
+
   -webkit-box-align:center;
 +
      -ms-flex-align:center;
 +
          align-items:center;
 
   text-decoration: none;
 
   text-decoration: none;
 
   color: #777;
 
   color: #777;
 
   padding: 15px;
 
   padding: 15px;
−
   font-size: 14px;
+
   font-size: 0.875rem;
 
   font-weight: bold;
 
   font-weight: bold;
 
}
 
}
Line 245: Line 284:
 
   content: "\f431";
 
   content: "\f431";
 
   padding-left: 5px;
 
   padding-left: 5px;
 +
  -webkit-transition: -webkit-transform 0.5s;
 +
  transition: -webkit-transform 0.5s;
 +
  -o-transition: transform 0.5s;
 +
  transition: transform 0.5s;
 +
  transition: transform 0.5s, -webkit-transform 0.5s;
 
}
 
}
  
Line 264: Line 308:
  
 
#bodyContent .sub-menu li {
 
#bodyContent .sub-menu li {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 
   display: flex;
 
   display: flex;
 
   width: 340px;
 
   width: 340px;
Line 275: Line 321:
 
#bodyContent nav ul ul ul {
 
#bodyContent nav ul ul ul {
 
   margin: 0 0 0 100%;
 
   margin: 0 0 0 100%;
−
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+
   -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
 +
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
 
}
 
}
  
 
#bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after {
 
#bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after {
−
   transform: rotate(-90deg);
+
   -webkit-transform: rotate(-90deg);
−
   transition: transform 0.5s;
+
      -ms-transform: rotate(-90deg);
 +
          transform: rotate(-90deg);
 +
   -webkit-transform-origin: 50% 60%;
 +
      -ms-transform-origin: 50% 60%;
 +
          transform-origin: 50% 60%;
 
}
 
}
  
Line 293: Line 344:
 
   top: 16px;
 
   top: 16px;
 
   right: 0;
 
   right: 0;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 
   display: flex;
 
   display: flex;
−
   flex-direction: row;
+
   -webkit-box-orient: horizontal;
−
   justify-content: flex-end;
+
  -webkit-box-direction: normal;
−
   align-items: center;
+
      -ms-flex-direction: row;
 +
          flex-direction: row;
 +
   -webkit-box-pack: end;
 +
      -ms-flex-pack: end;
 +
          justify-content: flex-end;
 +
   -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 
   font-size: 24pt;
 
   font-size: 24pt;
 
   cursor: pointer;
 
   cursor: pointer;
Line 304: Line 364:
 
   border: none;
 
   border: none;
 
   border-radius: 0;
 
   border-radius: 0;
−
   box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
+
   -webkit-box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 +
          box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 +
  -webkit-transition: border 1s ease;
 +
  -o-transition: border 1s ease;
 
   transition: border 1s ease;
 
   transition: border 1s ease;
 
}
 
}
Line 311: Line 374:
  
 
#bodyContent #sidebar-btn i {
 
#bodyContent #sidebar-btn i {
 +
  -webkit-transition: color 1s ease;
 +
  -o-transition: color 1s ease;
 
   transition: color 1s ease;
 
   transition: color 1s ease;
 
}
 
}
Line 325: Line 390:
 
     left: 2vw;
 
     left: 2vw;
 
     top: 4vw;
 
     top: 4vw;
−
     justify-content: center;
+
     -webkit-box-pack: center;
 +
        -ms-flex-pack: center;
 +
            justify-content: center;
 
     background: #149375;
 
     background: #149375;
 
     border: 3px solid white;
 
     border: 3px solid white;
Line 355: Line 422:
 
   visibility: hidden;
 
   visibility: hidden;
 
   opacity: 0;
 
   opacity: 0;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   overflow-y: auto;
 
   overflow-y: auto;
Line 368: Line 437:
 
#bodyContent #sidebar ul li {
 
#bodyContent #sidebar ul li {
 
   list-style: none;
 
   list-style: none;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   margin: 0;
 
   margin: 0;
Line 380: Line 451:
 
}
 
}
 
#bodyContent #sidebar ul li a {
 
#bodyContent #sidebar ul li a {
−
   font-size: 16px;
+
   font-size: 1rem;
 
   background: #1C1E1F;
 
   background: #1C1E1F;
 
   color: #ccc;
 
   color: #ccc;
Line 388: Line 459:
 
   padding: 10px;
 
   padding: 10px;
 
   text-decoration: none;
 
   text-decoration: none;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
}
 
}
Line 394: Line 467:
 
}
 
}
 
#bodyContent #sidebar ul ul a {
 
#bodyContent #sidebar ul ul a {
−
   font-size: 16px;
+
   font-size: 1rem;
 
   background: #1C1E1F;
 
   background: #1C1E1F;
 
   color: #ccc;
 
   color: #ccc;
Line 402: Line 475:
 
   padding: 10px;
 
   padding: 10px;
 
   text-decoration: none;
 
   text-decoration: none;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
}
 
}
Line 427: Line 502:
 
   visibility: hidden;
 
   visibility: hidden;
 
   opacity: 0;
 
   opacity: 0;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
}
 
}
Line 434: Line 511:
 
}
 
}
 
#bodyContent footer {
 
#bodyContent footer {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 
   display: flex;
 
   display: flex;
−
   flex-direction: row;
+
   -webkit-box-orient: horizontal;
−
   justify-content: center;
+
  -webkit-box-direction: normal;
−
   align-items: center;
+
      -ms-flex-direction: row;
 +
          flex-direction: row;
 +
   -webkit-box-pack: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
   -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 
   height: 15vw;
 
   height: 15vw;
 
   max-height: 250px;
 
   max-height: 250px;
Line 446: Line 532:
 
   padding: 20px;
 
   padding: 20px;
 
   font-size: 5vw;
 
   font-size: 5vw;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
}
 
}
Line 458: Line 546:
 
   display: block;
 
   display: block;
 
   max-width: 100%;
 
   max-width: 100%;
 +
  padding: 20px;
 
   margin: 20px auto;
 
   margin: 20px auto;
 +
}
 +
 +
@media (min-width: 1024px){
 +
  #bodyContent .floatleft{
 +
    float:left;
 +
    margin:0;
 +
  }
 +
 +
  #bodyContent .floatright{
 +
      float:right;
 +
      margin:0;
 +
  }
 +
  #bodyContent img.nomargin{
 +
    margin:0;
 +
  }
 +
 
}
 
}
  
 
#bodyContent svg {
 
#bodyContent svg {
 
   display:block;
 
   display:block;
 +
}
 +
 +
#bodyContent svg.fullscreen{
 +
    padding: 10% 0;
 +
    margin: 0 5%;
 
}
 
}
  
 
#bodyContent video{
 
#bodyContent video{
 
   max-width:100%;
 
   max-width:100%;
 +
  margin: 5% auto;
 +
}
 +
 +
#bodyContent .max-width {
 +
  width: 100%;
 +
}
 +
 +
#bodyContent .limited-height{
 +
    max-height: 500px;
 +
    width: auto;
 
}
 
}
  
 
#bodyContent .half-width{
 
#bodyContent .half-width{
 
   width:100%;
 
   width:100%;
−
  padding:10%;
 
 
   margin:5% auto;
 
   margin:5% auto;
 
}
 
}
 +
 +
#bodyContent .quarter-width{
 +
  width:100%;
 +
  margin:5% auto;
 +
}
 +
 +
 
@media (min-width: 1024px){
 
@media (min-width: 1024px){
 
   #bodyContent .half-width{
 
   #bodyContent .half-width{
 
     width:50%;
 
     width:50%;
 
   }
 
   }
 +
  #bodyContent .quarter-width{
 +
    width:25%;
 
}
 
}
−
 
−
#bodyContent .max-width {
 
−
  width: 100%;
 
−
  padding: 10%;
 
 
}
 
}
 +
 
#bodyContent h1,h2,h3,h4,h5,h6 {
 
#bodyContent h1,h2,h3,h4,h5,h6 {
 
   color: #149375;
 
   color: #149375;
Line 494: Line 619:
 
}
 
}
 
#bodyContent h1 {
 
#bodyContent h1 {
−
   font-size: 2.986em;
+
   font-size: 2.986rem;
 
   margin: 20px 0;
 
   margin: 20px 0;
 
   padding: 0;
 
   padding: 0;
Line 502: Line 627:
 
   #bodyContent h1{
 
   #bodyContent h1{
 
   text-transform: uppercase;
 
   text-transform: uppercase;
−
   font-size: 6.854em;
+
   font-size: 6.854rem;
 
   border-left: 5px solid #149375;
 
   border-left: 5px solid #149375;
 
   padding: 0 20px;
 
   padding: 0 20px;
Line 509: Line 634:
  
 
#bodyContent h2 {
 
#bodyContent h2 {
−
   font-size: 2.488em;
+
   font-size: 2.488rem;
 
   margin: 18px 0;
 
   margin: 18px 0;
 
   padding: 0;
 
   padding: 0;
Line 516: Line 641:
 
@media (min-width: 1024px) {
 
@media (min-width: 1024px) {
 
   #bodyContent h2{
 
   #bodyContent h2{
−
     font-size:4.236em;
+
     font-size:4.236rem;
 
     }
 
     }
 
   }
 
   }
  
 
#bodyContent h3 {
 
#bodyContent h3 {
−
   font-size: 2.074em;
+
   font-size: 2.074rem;
 
   margin: 16px 0;
 
   margin: 16px 0;
 
   padding: 0;
 
   padding: 0;
Line 528: Line 653:
 
@media (min-width: 1024px) {
 
@media (min-width: 1024px) {
 
   #bodyContent h3{
 
   #bodyContent h3{
−
     font-size:2.618em;
+
     font-size:2.618rem;
 
   }
 
   }
 
}
 
}
 
#bodyContent h4 {
 
#bodyContent h4 {
−
   font-size: 1.728em;
+
   font-size: 1.728rem;
 
   margin: 14px 0;
 
   margin: 14px 0;
 
   padding: 0;
 
   padding: 0;
Line 538: Line 663:
 
@media (min-width: 1024px) {
 
@media (min-width: 1024px) {
 
   #bodyContent h4{
 
   #bodyContent h4{
−
     font-size:1.618em;
+
     font-size:1.618rem;
 
   }
 
   }
 
}
 
}
 
#bodyContent h5 {
 
#bodyContent h5 {
−
   font-size: 1.44em;
+
   font-size: 1.44rem;
 
   margin: 12px 0;
 
   margin: 12px 0;
 
   padding: 0;
 
   padding: 0;
 
}
 
}
 
#bodyContent h6 {
 
#bodyContent h6 {
−
   font-size: 1.2em;
+
   font-size: 1.2rem;
 
   margin: 10px 0;
 
   margin: 10px 0;
 
   padding: 0;
 
   padding: 0;
 
}
 
}
 +
 +
#bodyContent h1 a {font-size: inherit;}
 +
#bodyContent h2 a {font-size: inherit;}
 +
#bodyContent h3 a {font-size: inherit;}
 +
#bodyContent h4 a {font-size: inherit;}
 +
#bodyContent h5 a {font-size: inherit;}
 +
#bodyContent h6 a {font-size: inherit;}
 +
 
#bodyContent p {
 
#bodyContent p {
 
   font-family: 'Quicksand', sans-serif;
 
   font-family: 'Quicksand', sans-serif;
−
   font-size: 20px;
+
   font-size: 1.250rem;
 
   text-align: justify;
 
   text-align: justify;
 
   line-height: 1.5;
 
   line-height: 1.5;
Line 584: Line 717:
 
   text-decoration: none;
 
   text-decoration: none;
 
   color: rgba(0, 0, 0, 0.5);
 
   color: rgba(0, 0, 0, 0.5);
−
   font-size: 20px;
+
   font-size: 1.250rem;
 
}
 
}
 
#bodyContent abbr[title],.explain[title] {
 
#bodyContent abbr[title],.explain[title] {
Line 618: Line 751:
 
#bodyContent figcaption {
 
#bodyContent figcaption {
 
   font-family: 'Quicksand', sans-serif;
 
   font-family: 'Quicksand', sans-serif;
−
   font-size: 16px;
+
   font-size: 0.75rem;;
 
   padding-left: 20px;
 
   padding-left: 20px;
 
   font-style: italic;
 
   font-style: italic;
Line 624: Line 757:
  
 
#bodyContent figcaption a{
 
#bodyContent figcaption a{
−
   font-size: 16px;
+
   font-size: 0.75rem;;
 +
}
 +
 
 +
#bodyContent figcaption abbr{
 +
  font-size: 0.75rem;;
 
}
 
}
  
 
#bodyContent .flex-row-2{
 
#bodyContent .flex-row-2{
 +
    display:-webkit-box;
 +
    display:-ms-flexbox;
 
     display:flex;
 
     display:flex;
−
     flex-direction: column;
+
     -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
            flex-direction: column;
 
   }
 
   }
 
#bodyContent .flex-row-2 div{
 
#bodyContent .flex-row-2 div{
 +
    display:-webkit-box;
 +
    display:-ms-flexbox;
 
     display:flex;
 
     display:flex;
−
     flex-direction: column;
+
     -webkit-box-orient: vertical;
−
     justify-content: center;
+
    -webkit-box-direction: normal;
−
     align-items: center;
+
        -ms-flex-direction: column;
 +
            flex-direction: column;
 +
     -webkit-box-pack: center;
 +
        -ms-flex-pack: center;
 +
            justify-content: center;
 +
     -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
            align-items: center;
 
     width: 100%;
 
     width: 100%;
 
   }
 
   }
 +
#bodyContent .flex-row-3{
 +
    display:-webkit-box;
 +
    display:-ms-flexbox;
 +
    display:flex;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
            flex-direction: column;
 +
          }
 +
  #bodyContent .flex-row-3 div{
 +
      display:-webkit-box;
 +
      display:-ms-flexbox;
 +
      display:flex;
 +
      -webkit-box-orient: vertical;
 +
      -webkit-box-direction: normal;
 +
          -ms-flex-direction: column;
 +
              flex-direction: column;
 +
      -webkit-box-pack: center;
 +
          -ms-flex-pack: center;
 +
              justify-content: center;
 +
      -webkit-box-align: center;
 +
          -ms-flex-align: center;
 +
              align-items: center;
 +
      width: 100%;
 +
    }
 +
 
@media (min-width: 1024px) {
 
@media (min-width: 1024px) {
 
   #bodyContent .flex-row-2{
 
   #bodyContent .flex-row-2{
−
       flex-direction: row;
+
       -webkit-box-orient: horizontal;
 +
      -webkit-box-direction: normal;
 +
          -ms-flex-direction: row;
 +
              flex-direction: row;
 
     }
 
     }
 
   #bodyContent .flex-row-2 *{
 
   #bodyContent .flex-row-2 *{
−
     flex:1;
+
     -webkit-box-flex:1;
 +
        -ms-flex:1;
 +
            flex:1;
 +
  }
 +
  #bodyContent .flex-row-2 div{
 +
    width:50%;
 +
  }
 +
  #bodyContent .flex-row-2 img{
 +
    padding: 20px;
 +
  }
 +
  #bodyContent .flex-row-3{
 +
      -webkit-box-orient: horizontal;
 +
      -webkit-box-direction: normal;
 +
          -ms-flex-direction: row;
 +
              flex-direction: row;
 +
    }
 +
  #bodyContent .flex-row-3 *{
 +
    -webkit-box-flex:1;
 +
        -ms-flex:1;
 +
            flex:1;
 +
  }
 +
  #bodyContent .flex-row-3 div{
 +
    width:33%;
 +
  }
 +
  #bodyContent .flex-row-3 img{
 +
    padding: 20px;
 
   }
 
   }
 
}
 
}
Line 667: Line 872:
 
   ************************************************************************/
 
   ************************************************************************/
 
   #bodyContent .tab {
 
   #bodyContent .tab {
 +
    width: 100%;
 +
    display:-webkit-box;
 +
    display:-ms-flexbox;
 
     display:flex;
 
     display:flex;
−
     flex-direction:row;
+
     -webkit-box-orient:horizontal;
−
     justify-content: center;
+
    -webkit-box-direction:normal;
 +
        -ms-flex-direction:row;
 +
            flex-direction:row;
 +
     -webkit-box-pack: center;
 +
        -ms-flex-pack: center;
 +
            justify-content: center;
 
   }
 
   }
  
Line 677: Line 890:
 
     border-bottom:5px solid #ccc;
 
     border-bottom:5px solid #ccc;
 
     outline:none;
 
     outline:none;
 +
    -webkit-transition: 0.3s;
 +
    -o-transition: 0.3s;
 
     transition: 0.3s;
 
     transition: 0.3s;
 
     width: 100%;
 
     width: 100%;
Line 729: Line 944:
 
   ************************************************************************/
 
   ************************************************************************/
 
   #bodyContent button.accordion {
 
   #bodyContent button.accordion {
−
    font: 20px Quicksand;
+
      display:-webkit-box;
−
    background-color: rgba(20, 147, 117, 0.125);
+
      display:-ms-flexbox;
−
    cursor: pointer;
+
      display:flex;
−
    padding: 18px;
+
      -webkit-box-orient:vertical;
−
    width: 100%;
+
      -webkit-box-direction:normal;
−
    border: none;
+
          -ms-flex-direction:column;
−
    text-align: left;
+
              flex-direction:column;
−
    outline: none;
+
      -webkit-box-align:center;
−
    transition: all 0.5s ease;
+
          -ms-flex-align:center;
 +
              align-items:center;
 +
      font-family: 'Quicksand', sans-serif;
 +
      margin: 10px;
 +
      border-radius: 10px;
 +
      background-color: rgba(20, 147, 117, 0.125);
 +
      cursor: pointer;
 +
      padding: 18px;
 +
      width: 100%;
 +
      border: none;
 +
      outline: none;
 +
      -webkit-transition: all 0.5s ease;
 +
      -o-transition: all 0.5s ease;
 +
      transition: all 0.5s ease;
 +
    }
 +
  #bodyContent button.accordion h2{
 +
      font-size: 1.250rem;
 +
      text-transform:uppercase;
 +
      letter-spacing: 7px;
 
   }
 
   }
−
   #bodyContent button.accordion.active,
+
   #bodyContent button.accordion h3{
−
  #bodyContent button.accordion:hover {
+
      font-size: 1.250rem;
−
    background-color: rgba(20, 147, 117, 0.7);
+
      text-transform:uppercase;
 +
      letter-spacing: 7px;
 
   }
 
   }
−
   #bodyContent button.accordion:after {
+
   #bodyContent button.accordion h4{
−
    content: '\002B';
+
      font-size: 1.250rem;
−
    color: #149375;
+
      text-transform:uppercase;
−
    float: right;
+
      letter-spacing: 7px;
−
    margin-left: 5px;
+
 
   }
 
   }
−
   #bodyContent button.accordion.active:after {
+
 
−
     content: "\2212";
+
   #bodyContent button.accordion:after{
−
  }
+
     //content:"\25BE";
−
  #bodyContent .panel {
+
    content:"v";
−
     padding: 0 18px;
+
    font-size:1.25rem;
−
     background-color: white;
+
     font-weight:bold;
−
     max-height: 0;
+
    margin: 18px 0;
−
     overflow: hidden;
+
     width:100%;
−
     transition: max-height 0.5s ease-out;
+
     text-align:center;
 +
     background-color:white;
 +
     border-radius: 10px;
 
   }
 
   }
 +
 +
    #bodyContent button.accordion.active,
 +
    #bodyContent button.accordion:hover {
 +
      background-color: rgba(20, 147, 117, 0.7);
 +
    }
 +
 +
 +
  .panel {
 +
    padding: 0 18px;
 +
    background-color: white;
 +
    display:none;
 +
    opacity: 1;
 +
    -webkit-animation: fade 1s;
 +
            animation: fade 1s;
 +
  }
 +
 +
  .panel.show {
 +
    display: block;
 +
    opacity: 1;
 +
    -webkit-animation: fade 1s;
 +
            animation: fade 1s;
 +
  }
 +
  @-webkit-keyframes fade {
 +
      0% {
 +
          opacity: 0;
 +
      }
 +
 +
      100% {
 +
          opacity: 1;
 +
      }
 +
  }
 +
  @keyframes fade {
 +
      0% {
 +
          opacity: 0;
 +
      }
 +
 +
      100% {
 +
          opacity: 1;
 +
      }
 +
  }
 +
  #bodyContent .panel p {
 +
    font-size: 1.125rem;
 +
  }
 
   #bodyContent .panel p {
 
   #bodyContent .panel p {
−
     font-size: 18px;
+
     font-size: 1.125rem;
 
   }
 
   }
 +
 
/************************************************************************
 
/************************************************************************
 
Tables
 
Tables
Line 812: Line 1,091:
 
#bodyContent table tr{
 
#bodyContent table tr{
 
   background-color: rgba(0,0,0,0);
 
   background-color: rgba(0,0,0,0);
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
}
 
}
Line 821: Line 1,102:
 
}
 
}
  
−
#bodyContent table.small_first th:first-child {
+
@media (min-width: 1024px){
−
  width: 120px;
+
−
}
+
  
−
#bodyContent table.small_first td:first-child  {
+
  #bodyContent table th:first-child{
−
  width: 120px;
+
    border-radius: 10px 0 0 10px;
 +
  }
 +
  #bodyContent table th:last-child{
 +
    border-radius: 0 10px 10px 0;
 +
  }
 +
  #bodyContent table td:first-child{
 +
    border-radius: 10px 0 0 10px;
 +
  }
 +
  #bodyContent table td:last-child{
 +
    border-radius: 0 10px 10px 0;
 +
  }
 +
  #bodyContent table.small_first th:first-child {
 +
    width: 120px;
 +
  }
 +
  #bodyContent table.small_first td:first-child  {
 +
    width: 120px;
 +
  }
 
}
 
}
 
/************************************************************************
 
/************************************************************************
Line 835: Line 1,130:
 
   list-style-image: none;
 
   list-style-image: none;
 
   color: black;
 
   color: black;
−
   margin: 0 0 0 18px;
+
   margin: 2rem 0 2rem 3rem;
 
   padding: 0;
 
   padding: 0;
 
   line-height: 1.5;
 
   line-height: 1.5;
Line 842: Line 1,137:
 
#bodyContent ol {
 
#bodyContent ol {
 
   color: black;
 
   color: black;
−
   margin: 0 0 0 18px;
+
   margin: 2rem 0 2rem 3rem;
 
   padding: 0;
 
   padding: 0;
 
   line-height: 1.5;
 
   line-height: 1.5;
Line 849: Line 1,144:
 
#bodyContent li {
 
#bodyContent li {
 
   font-family: 'Quicksand', sans-serif;
 
   font-family: 'Quicksand', sans-serif;
−
   font-size: 20px;
+
   font-size: 1.250rem;
 
   margin: 0;
 
   margin: 0;
 
   padding: 0;
 
   padding: 0;
 
   line-height: 1.5;
 
   line-height: 1.5;
−
   padding-left: 1em;
+
   padding-left: 1rem;
−
   text-indent: -.7em;
+
   text-indent: -.7rem;
 
}
 
}
 
#bodyContent li::before {
 
#bodyContent li::before {
Line 860: Line 1,155:
 
   color: #149375;
 
   color: #149375;
 
   padding-right: 7px;
 
   padding-right: 7px;
 +
}
 +
 +
#bodyContent ul.eric{
 +
    display: flex;
 +
    flex-direction: column;
 +
}
 +
 +
#bodyContent ul.eric li{
 +
    text-indent: 0;
 +
}
 +
 +
 +
#bodyContent ul.eric li::before {
 +
    content: "";
 +
    color: #149375;
 +
    float: left;
 +
    padding-right: 10px;
 +
    display: block;
 +
    height: 32px;
 +
    width: 32px;
 +
    background-image: url(https://static.igem.org/mediawiki/2017/5/50/T--Cologne-Duesseldorf--check.jpeg);
 +
    background-repeat: no-repeat;
 +
    background-position: left center;
 +
    background-size: 26px;
 +
}
 +
 +
#bodyContent ol li::before {
 +
  content: none;
 
}
 
}
 
#bodyContent a {
 
#bodyContent a {
 
   font-family: 'Quicksand', sans-serif;
 
   font-family: 'Quicksand', sans-serif;
−
   font-size: 20px;
+
   font-size: 1.250rem;
 
   text-align: justify;
 
   text-align: justify;
 
   line-height: 1.5;
 
   line-height: 1.5;
Line 869: Line 1,192:
 
   list-style-type: none;
 
   list-style-type: none;
 
   color: #149375;
 
   color: #149375;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
}
 
}
Line 884: Line 1,209:
 
************************************************************************/
 
************************************************************************/
 
#bodyContent .flex-gallery {
 
#bodyContent .flex-gallery {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 
   display: flex;
 
   display: flex;
−
   flex-direction: column;
+
   -webkit-box-orient: vertical;
−
   flex-wrap: initial;
+
  -webkit-box-direction: normal;
−
   justify-content: flex-start;
+
      -ms-flex-direction: column;
−
   align-items: center;
+
          flex-direction: column;
 +
   -ms-flex-wrap: initial;
 +
      flex-wrap: initial;
 +
   -webkit-box-pack: start;
 +
      -ms-flex-pack: start;
 +
          justify-content: flex-start;
 +
   -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 
}
 
}
 
@media (min-width: 768px) {
 
@media (min-width: 768px) {
 
   #bodyContent .flex-gallery {
 
   #bodyContent .flex-gallery {
−
     flex-direction: row;
+
     -webkit-box-orient: horizontal;
−
     flex-wrap: wrap;
+
    -webkit-box-direction: normal;
−
     align-items: flex-end;
+
        -ms-flex-direction: row;
−
     justify-content: center;
+
            flex-direction: row;
 +
     -ms-flex-wrap: wrap;
 +
        flex-wrap: wrap;
 +
     -webkit-box-align: end;
 +
        -ms-flex-align: end;
 +
            align-items: flex-end;
 +
     -webkit-box-pack: center;
 +
        -ms-flex-pack: center;
 +
            justify-content: center;
 
   }
 
   }
 
}
 
}
Line 901: Line 1,244:
 
@media (min-width: 768px) {
 
@media (min-width: 768px) {
 
   #bodyContent .center-gallery{
 
   #bodyContent .center-gallery{
−
     align-items: center;
+
     -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
            align-items: center;
 
   }
 
   }
 
}
 
}
Line 908: Line 1,253:
 
   width: 200px;
 
   width: 200px;
 
   height: auto;
 
   height: auto;
 +
  display:-webkit-box;
 +
  display:-ms-flexbox;
 
   display:flex;
 
   display:flex;
−
   flex-flow: column;
+
   -webkit-box-orient: vertical;
−
   justify-content: flex-end;
+
  -webkit-box-direction: normal;
 +
      -ms-flex-flow: column;
 +
          flex-flow: column;
 +
   -webkit-box-pack: end;
 +
      -ms-flex-pack: end;
 +
          justify-content: flex-end;
 
   margin: 0 10px;
 
   margin: 0 10px;
 
}
 
}
 +
 
#bodyContent .flex-gallery img {
 
#bodyContent .flex-gallery img {
 
   max-width: 100%;
 
   max-width: 100%;
 
   height: auto;
 
   height: auto;
−
   filter: grayscale(100%);
+
   margin: 0 auto 40px auto;
 +
  -webkit-filter: grayscale(100%);
 +
          filter: grayscale(100%);
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
}
 
}
 
#bodyContent .flex-gallery img:hover {
 
#bodyContent .flex-gallery img:hover {
−
   filter: grayscale(0%);
+
   -webkit-filter: grayscale(0%);
 +
          filter: grayscale(0%);
 
}
 
}
 
#bodyContent .modalDialog {
 
#bodyContent .modalDialog {
 +
  display:none;
 +
  opacity: 0;
 
   position: fixed;
 
   position: fixed;
 
   top: 0;
 
   top: 0;
Line 929: Line 1,289:
 
   left: 0;
 
   left: 0;
 
   background: rgba(0, 0, 0, 0.8);
 
   background: rgba(0, 0, 0, 0.8);
−
   z-index: 99999;
+
   z-index: 100;
−
   opacity: 0;
+
   -webkit-transition: opacity 0.5s ease-in;
 +
  -o-transition: opacity 0.5s ease-in;
 
   transition: opacity 0.5s ease-in;
 
   transition: opacity 0.5s ease-in;
 
   pointer-events: none;
 
   pointer-events: none;
 
}
 
}
 
#bodyContent .modalDialog:target {
 
#bodyContent .modalDialog:target {
 +
  display:block;
 
   opacity: 1;
 
   opacity: 1;
 
   pointer-events: auto;
 
   pointer-events: auto;
 
}
 
}
 
#bodyContent .modalDialog > div {
 
#bodyContent .modalDialog > div {
 +
  display:-webkit-box;
 +
  display:-ms-flexbox;
 
   display:flex;
 
   display:flex;
−
   flex-direction: row;
+
   -webkit-box-orient: horizontal;
 +
  -webkit-box-direction: normal;
 +
      -ms-flex-direction: row;
 +
          flex-direction: row;
 
   position: absolute;
 
   position: absolute;
 
   top: 15vh;
 
   top: 15vh;
Line 957: Line 1,324:
 
   right: 13vw;
 
   right: 13vw;
 
   top: 11vh;
 
   top: 11vh;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 
   display: flex;
 
   display: flex;
−
   flex-direction: row;
+
   -webkit-box-orient: horizontal;
−
   justify-content: center;
+
  -webkit-box-direction: normal;
−
   align-items: center;
+
      -ms-flex-direction: row;
 +
          flex-direction: row;
 +
   -webkit-box-pack: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
   -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 
   width: 20px;
 
   width: 20px;
 
   height: 20px;
 
   height: 20px;
Line 967: Line 1,343:
 
   border: 3px solid white;
 
   border: 3px solid white;
 
   border-radius: 100%;
 
   border-radius: 100%;
−
   box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
+
   -webkit-box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 +
          box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 
}
 
}
 
#bodyContent a.close {
 
#bodyContent a.close {
 
   background: #149375;
 
   background: #149375;
 
   color: white;
 
   color: white;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
   transition: all 0.5s ease;
 
}
 
}
Line 985: Line 1,364:
 
}
 
}
  
 +
/************************************************************************
 +
image carousel
 +
************************************************************************/
 +
#bodyContent .slider{
 +
  position:relative;
 +
}
 +
#bodyContent .slide{
 +
    -webkit-transition: opacity 2s linear;
 +
    -o-transition: opacity 2s linear;
 +
    transition: opacity 2s linear;
 +
    padding:0;
 +
}
 +
 +
 +
#bodyContent .slider button {
 +
    position: absolute;
 +
    top: 0;
 +
    border: none;
 +
    height: 100%;
 +
    width: 50px;
 +
    cursor: pointer;
 +
    background: hsla(0, 0%, 50%, 0.5);
 +
}
 +
#bodyContent .slider button:hover{
 +
  background: hsla(0, 0%, 0%, 0.5);
 +
}
 +
 +
#bodyContent .btn-left{
 +
  left:0;
 +
}
 +
#bodyContent .btn-right{
 +
  right:0;
 +
}
  
 
/************************************************************************
 
/************************************************************************
Line 1,000: Line 1,412:
 
   text-decoration: none;
 
   text-decoration: none;
 
   color: rgba(0, 0, 0, 0.6);
 
   color: rgba(0, 0, 0, 0.6);
 +
  -webkit-transition: all 2s ease;
 +
  -o-transition: all 2s ease;
 
   transition: all 2s ease;
 
   transition: all 2s ease;
 
}
 
}
Line 1,007: Line 1,421:
 
}
 
}
  
 +
/************************************************************************
 +
Loader
 +
************************************************************************/
 +
#loader-wrapper {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    z-index: 1000;
 +
}
 +
#loader {
 +
    display: block;
 +
    position: relative;
 +
    left: 50%;
 +
    top: 50%;
 +
    width: 150px;
 +
    height: 150px;
 +
    margin: -75px 0 0 -75px;
 +
    border-radius: 50%;
 +
    border: 3px solid transparent;
 +
    border-top-color: #0e6752;
 +
 +
    -webkit-animation: spin 2s linear infinite;
 +
    animation: spin 2s linear infinite;
 +
 +
    z-index: 1001;
 +
}
 +
 +
    #loader:before {
 +
        content: "";
 +
        position: absolute;
 +
        top: 5px;
 +
        left: 5px;
 +
        right: 5px;
 +
        bottom: 5px;
 +
        border-radius: 50%;
 +
        border: 3px solid transparent;
 +
        border-top-color: #149375;
 +
 +
        -webkit-animation: spin 3s linear infinite;
 +
        animation: spin 3s linear infinite;
 +
    }
 +
 +
    #loader:after {
 +
        content: "";
 +
        position: absolute;
 +
        top: 15px;
 +
        left: 15px;
 +
        right: 15px;
 +
        bottom: 15px;
 +
        border-radius: 50%;
 +
        border: 3px solid transparent;
 +
        border-top-color: #1ac19a;
 +
 +
        -webkit-animation: spin 1.5s linear infinite;
 +
          animation: spin 1.5s linear infinite;
 +
    }
 +
 +
    @-webkit-keyframes spin {
 +
        0%  {
 +
            -webkit-transform: rotate(0deg);
 +
            -ms-transform: rotate(0deg);
 +
            transform: rotate(0deg);
 +
        }
 +
        100% {
 +
            -webkit-transform: rotate(360deg);
 +
            -ms-transform: rotate(360deg);
 +
            transform: rotate(360deg);
 +
        }
 +
    }
 +
    @keyframes spin {
 +
        0%  {
 +
            -webkit-transform: rotate(0deg);
 +
            -ms-transform: rotate(0deg);
 +
            transform: rotate(0deg);
 +
        }
 +
        100% {
 +
            -webkit-transform: rotate(360deg);
 +
            -ms-transform: rotate(360deg);
 +
            transform: rotate(360deg);
 +
        }
 +
    }
 +
 +
    #loader-wrapper .loader-section {
 +
        position: fixed;
 +
        top: 0;
 +
        width: 51%;
 +
        height: 100%;
 +
        background: #222222;
 +
        z-index: 1000;
 +
        -webkit-transform: translateX(0);
 +
        -ms-transform: translateX(0);
 +
        transform: translateX(0);
 +
    }
 +
 +
    #loader-wrapper .loader-section.section-left {
 +
        left: 0;
 +
    }
 +
 +
    #loader-wrapper .loader-section.section-right {
 +
        right: 0;
 +
    }
 +
 +
    /* Loaded */
 +
    .loaded #loader-wrapper .loader-section.section-left {
 +
        -webkit-transform: translateX(-100%);
 +
            -ms-transform: translateX(-100%);
 +
                transform: translateX(-100%);
 +
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
                -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
    }
 +
 +
    .loaded #loader-wrapper .loader-section.section-right {
 +
        -webkit-transform: translateX(100%);
 +
            -ms-transform: translateX(100%);
 +
                transform: translateX(100%);
 +
 +
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
        -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
    }
 +
 +
    .loaded #loader {
 +
        opacity: 0;
 +
        -webkit-transition: all 0.3s ease-out;
 +
                -o-transition: all 0.3s ease-out;
 +
                transition: all 0.3s ease-out;
 +
    }
 +
    .loaded #loader-wrapper {
 +
        visibility: hidden;
 +
 +
        -webkit-transform: translateY(-100%);
 +
            -ms-transform: translateY(-100%);
 +
                transform: translateY(-100%);
 +
        -webkit-transition: all 0.3s 1s ease-out;
 +
                -o-transition: all 0.3s 1s ease-out;
 +
                transition: all 0.3s 1s ease-out;
 +
    }
 +
    /* JavaScript Turned Off */
 +
    .no-js #loader-wrapper {
 +
        display: none;
 +
    }
 +
 +
    #myCanvas{
 +
      position:fixed;
 +
      top: 0;
 +
      bottom: 0;
 +
      left: 0;
 +
      right: 0;
 +
      z-index: -1;
 +
    }
  
  

Latest revision as of 20:31, 1 November 2017