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

Line 3: Line 3:
 
<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");
 +
/************************************************************************
 +
Wiki Overrides
 +
************************************************************************/
 +
#top_menu_under {
 +
  display: none;
 +
  position: relative;
 +
  width: 100%;
 +
  height: 0;
 +
}
 +
#top_menu_14 {
 +
  position: fixed;
 +
  width: 100%;
 +
  top: 0px;
 +
  left: 0px;
 +
  height: 16px;
 +
  background-color: #383838;
 +
  border-bottom: 2px solid black;
 +
  z-index: 9999;
 +
}
 +
#top_title {
 +
  display: none;
 +
}
 +
#sideMenu {
 +
  display: none;
 +
  width: 170px;
 +
  position: absolute;
 +
  top: 20px;
 +
  left: 1020px;
 +
  z-index: 10;
 +
  padding-top: 0px;
 +
  padding-bottom: 15px;
 +
  padding-left: 15px;
 +
  padding-right: 15px;
 +
  background-color: white;
 +
  text-align: left;
 +
}
 +
#bodyContent a[href ^="https://"],
 +
.link-https {
 +
  background: none;
 +
  padding: 0
 +
}
 +
#bodyContent a[href ^="mailto:"], .link-mailto {
 +
  padding:0;
 +
}
 +
.pop_why_cover {
 +
  display: none;
 +
  z-index: 100;
 +
  margin-top: -65px;
 +
  margin-left: -40px;
 +
  width: 980px;
 +
  height: 2100px;
 +
  float: left;
 +
  position: absolute;
 +
  opacity: 0.5;
 +
  background-color: #b2b2b2;
 +
}
 +
.pop_why_box {
 +
  display: none;
 +
  left: 250px;
 +
  top: 0px;
 +
  background-color: white;
 +
  padding: 15px;
 +
  width: 500px;
 +
  position: absolute;
 +
  border: 3px solid #4e606e;
 +
  border-radius: 3px;
 +
  z-index: 100;
 +
}
 +
 
/************************************************************************
 
/************************************************************************
 
Page Backbone
 
Page Backbone
Line 22: Line 92:
 
   font: medium sans-serif;
 
   font: medium sans-serif;
 
}
 
}
 +
 +
@media (min-width: 1024px) {
 +
  body {
 +
    margin: 16px 0 0 0;
 +
  }
 +
}
 +
 +
 
#globalWrapper {
 
#globalWrapper {
 
   width: 100%;
 
   width: 100%;
Line 50: Line 128:
 
Page sections
 
Page sections
 
************************************************************************/
 
************************************************************************/
−
#bodyContent section#banner {
 
−
  margin: 0;
 
−
  padding: 10% 10% 0 10%;
 
−
}
 
 
#bodyContent article{
 
#bodyContent article{
 
     width:90%;
 
     width:90%;
Line 85: Line 159:
 
   }
 
   }
 
}
 
}
−
 
−
 
 
#bodyContent #ToC a {
 
#bodyContent #ToC a {
 
   display:block;
 
   display:block;
Line 95: Line 167:
 
#bodyContent #ToC a[title=H3] { font-size:12px;}
 
#bodyContent #ToC a[title=H3] { font-size:12px;}
  
−
#bodyContent article p {
+
#bodyContent nav {
−
   padding: 10px 0;
+
  display:none;
 +
  position: fixed;
 +
  background-color: white;
 +
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 +
  left: 0;
 +
  right: 0;
 +
  top: 16px;
 +
  z-index: 9999;
 +
}
 +
 
 +
@media (min-width: 1024px) {
 +
  #bodyContent nav{
 +
    display:flex;
 +
  }
 +
}
 +
 
 +
 
 +
#bodyContent .menu {
 +
  width:80%;
 +
  margin:auto;
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: space-between;
 +
  align-items: center;
 +
  padding: 0 20px;
 +
}
 +
 
 +
#bodyContent .menu img{
 +
  width: 128px;
 +
  max-width: 128px;
 +
}
 +
 
 +
#bodyContent nav li::before{
 +
  content:none;
 +
}
 +
 
 +
#bodyContent nav ul {
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 
 +
#bodyContent .menu li {
 +
  display: block;
 +
  list-style-type: none;
 +
  text-transform: uppercase;
 +
  padding-left: 0;
 +
  text-indent: 0;
 +
}
 +
 
 +
#bodyContent .menu li a {
 +
  display: flex;
 +
  text-align: center;
 +
  align-items:center;
 +
  text-decoration: none;
 +
  color: #777;
 +
  padding: 15px;
 +
  font-size: 14px;
 +
  font-weight: bold;
 +
}
 +
 
 +
#bodyContent .menu > li > a{
 +
  height: 80px;
 +
  padding: 0 5px;
 +
}
 +
 
 +
 
 +
#bodyContent .menu li a:hover {
 +
  background: #ccc;
 +
  color: #fff;
 +
}
 +
 
 +
#bodyContent .menu-item-has-children > a:after {
 +
  font-family: "Genericons";
 +
  content: "\f431";
 +
  padding-left: 5px;
 +
}
 +
 
 +
#bodyContent nav ul ul {
 +
  display: none;
 +
  position: absolute;
 +
}
 +
 
 +
#bodyContent nav ul li:hover > ul {
 +
  display: block;
 +
  color: #fff;
 +
  padding-left: 0;
 +
  background: #777;
 +
}
 +
 
 +
#bodyContent nav ul li:hover > ul a {
 +
  color: #fff;
 +
}
 +
 
 +
#bodyContent .sub-menu li {
 +
  display: flex;
 +
  width: 340px;
 +
}
 +
#bodyContent .sub-menu li:hover,
 +
#bodyContent .sub-menu li a:hover {
 +
  background: #ddd;
 +
  color: #777;
 +
}
 +
 
 +
#bodyContent nav ul ul ul {
 +
  margin: 0 0 0 100%;
 +
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
 +
}
 +
 
 +
#bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after {
 +
  transform: rotate(-90deg);
 +
  transition: transform 0.5s;
 +
}
 +
 
 +
/************************************************************************
 +
Navigation Button
 +
************************************************************************/
 +
#bodyContent #sidebar-btn {
 +
  width: 100%;
 +
  height: 50px;
 +
  padding: 0 5vw 0 0;
 +
  position: fixed;
 +
  top: 16px;
 +
  right: 0;
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: flex-end;
 +
  align-items: center;
 +
  font-size: 24pt;
 +
  cursor: pointer;
 +
  z-index: 2;
 +
  color: white;
 +
  background: #1C1E1F;
 +
  border: none;
 +
  border-radius: 0;
 +
  box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 +
  transition: border 1s ease;
 +
}
 +
#bodyContent #sidebar-btn:hover {
 +
  border: none;  }
 +
 
 +
#bodyContent #sidebar-btn i {
 +
  transition: color 1s ease;
 +
}
 +
#bodyContent #sidebar-btn:hover i {
 +
  color: #149375;
 +
}
 +
 
 +
@media (min-width: 1024px) {
 +
  #bodyContent #sidebar-btn {
 +
    display:none;
 +
    width: 20px;
 +
    height: 20px;
 +
    padding: 28px;
 +
    left: 2vw;
 +
    top: 4vw;
 +
    justify-content: center;
 +
    background: #149375;
 +
    border: 3px solid white;
 +
    border-radius: 100%;
 +
  }
 +
 
 +
  #bodyContent #sidebar-btn:hover {
 +
    border: 3px solid black;
 +
  }
 +
  #bodyContent #sidebar-btn:hover i {
 +
    color: black;
 +
  }
 +
  #bodyContent #sidebar-btn.active {
 +
    opacity:0;
 +
  }
 +
}
 +
/************************************************************************
 +
Navigation bar
 +
************************************************************************/
 +
#bodyContent #sidebar {
 +
  z-index: 5;
 +
  background: #151718;
 +
  width: 250px;
 +
  height: 100%;
 +
  display: block;
 +
  position: fixed;
 +
  top: 16px;
 +
  left: 0;
 +
  visibility: hidden;
 +
  opacity: 0;
 +
  transition: all 0.5s ease;
 +
  overflow-y: auto;
 +
}
 +
#bodyContent #sidebar.visible {
 +
  visibility: visible;
 +
  opacity: 1;
 +
}
 +
#bodyContent #sidebar ul {
 +
  margin: 0px;
 +
  padding: 0px;
 +
}
 +
#bodyContent #sidebar ul li {
 +
  list-style: none;
 +
  transition: all 0.5s ease;
 +
  margin: 0;
 +
  padding: 0;
 +
  text-indent: 0;
 +
}
 +
 
 +
#bodyContent #sidebar ul li::before{
 +
    content: none;
 +
    padding-right: 0;
 +
 
 +
}
 +
#bodyContent #sidebar ul li a {
 +
  font-size: 16px;
 +
  background: #1C1E1F;
 +
  color: #ccc;
 +
  border-bottom: 1px solid #111;
 +
  display: block;
 +
  width: 250px;
 +
   padding: 10px;
 +
  text-decoration: none;
 +
  transition: all 0.5s ease;
 +
}
 +
#bodyContent #sidebar ul li a:hover {
 +
  background-color: rgba(255, 255, 255, 0.3)
 +
}
 +
#bodyContent #sidebar ul ul a {
 +
  font-size: 16px;
 +
  background: #1C1E1F;
 +
  color: #ccc;
 +
  border-bottom: 1px solid #111;
 +
  display: block;
 +
  width: 250px;
 +
  padding: 10px;
 +
  text-decoration: none;
 +
  transition: all 0.5s ease;
 +
}
 +
#bodyContent #sidebar ul ul a:hover {
 +
  background-color: rgba(255, 255, 255, 0.3)
 +
}
 +
#bodyContent #sidebar ul ul.sub li {
 +
  display: none;
 +
  padding-left: 15px;
 +
}
 +
#bodyContent #sidebar ul ul.sub li.active {
 +
  display: block;
 +
}
 +
#bodyContent #overlay {
 +
  position: fixed;
 +
  width: 100%;
 +
  height: 100%;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  background-color: rgba(0, 0, 0, 0.5);
 +
  z-index: 1;
 +
  cursor: pointer;
 +
  visibility: hidden;
 +
  opacity: 0;
 +
  transition: all 0.5s ease;
 +
}
 +
#bodyContent #overlay.active {
 +
  visibility: visible;
 +
  opacity: 1;
 
}
 
}
 
#bodyContent footer {
 
#bodyContent footer {
Line 116: Line 449:
 
   color: rgba(255, 255, 255, 1);
 
   color: rgba(255, 255, 255, 1);
 
}
 
}
 +
 
/************************************************************************
 
/************************************************************************
−
Wiki Overrides
+
Layout Elements
 
************************************************************************/
 
************************************************************************/
−
#top_menu_under {
+
#bodyContent .tab {
−
   display: none;
+
   display:flex;
−
   position: relative;
+
   flex-direction:row;
−
   width: 100%;
+
   justify-content: center;
−
  height: 0;
+
 
}
 
}
−
#top_menu_14 {
+
 
−
   position: fixed;
+
#bodyContent .tab button {
 +
   background-color:#fff;
 +
  border:none;
 +
  border-bottom:5px solid #ccc;
 +
  outline:none;
 +
  transition: 0.3s;
 
   width: 100%;
 
   width: 100%;
−
   top: 0px;
+
   padding: 20px;
−
  left: 0px;
+
−
  height: 16px;
+
−
  background-color: #383838;
+
−
  border-bottom: 2px solid black;
+
−
  z-index: 9999;
+
 
}
 
}
−
#top_title {
+
 
−
   display: none;
+
#bodyContent .tab button:hover{
 +
   background-color:#eee;
 
}
 
}
−
#sideMenu {
+
 
−
   display: none;
+
#bodyContent .tab button.active {
−
  width: 170px;
+
   border-bottom:5px solid #149375;
−
  position: absolute;
+
−
  top: 20px;
+
−
  left: 1020px;
+
−
  z-index: 10;
+
−
  padding-top: 0px;
+
−
  padding-bottom: 15px;
+
−
  padding-left: 15px;
+
−
  padding-right: 15px;
+
−
  background-color: white;
+
−
  text-align: left;
+
 
}
 
}
−
#bodyContent a[href ^="https://"],
+
 
−
.link-https {
+
#bodyContent .tab img{
−
   background: none;
+
   padding: 20%;
−
  padding: 0
+
 
}
 
}
−
#bodyContent a[href ^="mailto:"], .link-mailto {
+
 
−
   padding:0;
+
#bodyContent .tabcontent {
 +
   display:none;
 
}
 
}
−
.pop_why_cover {
+
 
−
   display: none;
+
#bodyContent .tabcontent:first-child{
−
  z-index: 100;
+
   display:block;
−
  margin-top: -65px;
+
−
  margin-left: -40px;
+
−
  width: 980px;
+
−
  height: 2100px;
+
−
  float: left;
+
−
  position: absolute;
+
−
  opacity: 0.5;
+
−
  background-color: #b2b2b2;
+
 
}
 
}
−
.pop_why_box {
+
 
−
  display: none;
+
#bodyContent .tabcontent {
−
  left: 250px;
+
    -webkit-animation: fadeEffect 1s;
−
  top: 0px;
+
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
−
  background-color: white;
+
−
  padding: 15px;
+
−
  width: 500px;
+
−
  position: absolute;
+
−
  border: 3px solid #4e606e;
+
−
  border-radius: 3px;
+
−
  z-index: 100;
+
 
}
 
}
 +
 +
@-webkit-keyframes fadeEffect {
 +
    from {opacity: 0;}
 +
    to {opacity: 1;}
 +
}
 +
 +
@keyframes fadeEffect {
 +
    from {opacity: 0;}
 +
    to {opacity: 1;}
 +
}
 +
 
/************************************************************************
 
/************************************************************************
 
General page styles
 
General page styles
Line 247: Line 567:
 
   padding: 0;
 
   padding: 0;
 
}
 
}
−
 
−
 
−
 
−
 
 
#bodyContent p {
 
#bodyContent p {
 
   font-family: 'Quicksand', sans-serif;
 
   font-family: 'Quicksand', sans-serif;
Line 258: Line 574:
 
   margin:0 auto;
 
   margin:0 auto;
 
   padding: 0;
 
   padding: 0;
 +
}
 +
#bodyContent article p {
 +
  padding: 10px 0;
 
}
 
}
 
#bodyContent em{}
 
#bodyContent em{}
Line 334: Line 653:
 
     width: 100%;
 
     width: 100%;
 
   }
 
   }
 +
@media (min-width: 1024px) {
 +
  #bodyContent .flex-row-2{
 +
      flex-direction: row;
 +
    }
 +
  #bodyContent .flex-row-2 div{
 +
    width:100%;
 +
  }
 +
}
  
 
svg {
 
svg {
Line 368: Line 695:
 
#bodyContent table thead {
 
#bodyContent table thead {
 
   display:none;
 
   display:none;
 +
}
 +
@media (min-width: 1024px) {
 +
  #bodyContent table thead {
 +
    display:table-header-group;
 +
  }
 
}
 
}
  
Line 385: Line 717:
 
   width: 6rem;
 
   width: 6rem;
 
}
 
}
 +
 +
@media (min-width: 1024px){
 +
  #bodyContent table tbody td{
 +
    display: table-cell;
 +
    padding: 10px;
 +
    border-collapse: collapse;
 +
    vertical-align: middle;
 +
  }
 +
  #bodyContent table tbody td:before{
 +
    content:none;
 +
  }
 +
}
 +
 
#bodyContent table tr{
 
#bodyContent table tr{
 
   background-color: rgba(0,0,0,0);
 
   background-color: rgba(0,0,0,0);
Line 394: Line 739:
 
#bodyContent table tr:hover {
 
#bodyContent table tr:hover {
 
   background-color: rgba(20, 147, 117, 0.75);
 
   background-color: rgba(20, 147, 117, 0.75);
 +
}
 +
 +
#bodyContent table.small_first th:first-child {
 +
  width: 120px;
 +
}
 +
 +
#bodyContent table.small_first td:first-child  {
 +
  width: 120px;
 
}
 
}
 
/************************************************************************
 
/************************************************************************
Line 446: Line 799:
 
#bodyContent a:visited {
 
#bodyContent a:visited {
 
   color: #149375;
 
   color: #149375;
−
}
 
−
/************************************************************************
 
−
Navigation Button
 
−
************************************************************************/
 
−
#bodyContent #sidebar-btn {
 
−
  width: 100%;
 
−
  height: 50px;
 
−
  padding: 0 5vw 0 0;
 
−
  position: fixed;
 
−
  top: 16px;
 
−
  right: 0;
 
−
  display: flex;
 
−
  flex-direction: row;
 
−
  justify-content: flex-end;
 
−
  align-items: center;
 
−
  font-size: 24pt;
 
−
  cursor: pointer;
 
−
  z-index: 2;
 
−
  color: white;
 
−
  background: #1C1E1F;
 
−
  border: none;
 
−
  border-radius: 0;
 
−
  box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 
−
  transition: border 1s ease;
 
−
}
 
−
#bodyContent #sidebar-btn:hover {
 
−
  border: none;  }
 
−
 
−
#bodyContent #sidebar-btn i {
 
−
  transition: color 1s ease;
 
−
}
 
−
#bodyContent #sidebar-btn:hover i {
 
−
  color: #149375;
 
−
}
 
−
/************************************************************************
 
−
Navigation bar
 
−
************************************************************************/
 
−
#bodyContent #sidebar {
 
−
  z-index: 5;
 
−
  background: #151718;
 
−
  width: 250px;
 
−
  height: 100%;
 
−
  display: block;
 
−
  position: fixed;
 
−
  top: 16px;
 
−
  left: 0;
 
−
  visibility: hidden;
 
−
  opacity: 0;
 
−
  transition: all 0.5s ease;
 
−
  overflow-y: auto;
 
−
}
 
−
#bodyContent #sidebar.visible {
 
−
  visibility: visible;
 
−
  opacity: 1;
 
−
}
 
−
#bodyContent #sidebar ul {
 
−
  margin: 0px;
 
−
  padding: 0px;
 
−
}
 
−
#bodyContent #sidebar ul li {
 
−
  list-style: none;
 
−
  transition: all 0.5s ease;
 
−
  margin: 0;
 
−
  padding: 0;
 
−
  text-indent: 0;
 
−
}
 
−
 
−
#bodyContent #sidebar ul li::before{
 
−
    content: none;
 
−
    padding-right: 0;
 
−
 
−
}
 
−
#bodyContent #sidebar ul li a {
 
−
  font-size: 16px;
 
−
  background: #1C1E1F;
 
−
  color: #ccc;
 
−
  border-bottom: 1px solid #111;
 
−
  display: block;
 
−
  width: 250px;
 
−
  padding: 10px;
 
−
  text-decoration: none;
 
−
  transition: all 0.5s ease;
 
−
}
 
−
#bodyContent #sidebar ul li a:hover {
 
−
  background-color: rgba(255, 255, 255, 0.3)
 
−
}
 
−
#bodyContent #sidebar ul ul a {
 
−
  font-size: 16px;
 
−
  background: #1C1E1F;
 
−
  color: #ccc;
 
−
  border-bottom: 1px solid #111;
 
−
  display: block;
 
−
  width: 250px;
 
−
  padding: 10px;
 
−
  text-decoration: none;
 
−
  transition: all 0.5s ease;
 
−
}
 
−
#bodyContent #sidebar ul ul a:hover {
 
−
  background-color: rgba(255, 255, 255, 0.3)
 
−
}
 
−
#bodyContent #sidebar ul ul.sub li {
 
−
  display: none;
 
−
  padding-left: 15px;
 
−
}
 
−
#bodyContent #sidebar ul ul.sub li.active {
 
−
  display: block;
 
−
}
 
−
#bodyContent #overlay {
 
−
  position: fixed;
 
−
  width: 100%;
 
−
  height: 100%;
 
−
  top: 0;
 
−
  left: 0;
 
−
  right: 0;
 
−
  bottom: 0;
 
−
  background-color: rgba(0, 0, 0, 0.5);
 
−
  z-index: 1;
 
−
  cursor: pointer;
 
−
  visibility: hidden;
 
−
  opacity: 0;
 
−
  transition: all 0.5s ease;
 
−
}
 
−
#bodyContent #overlay.active {
 
−
  visibility: visible;
 
−
  opacity: 1;
 
 
}
 
}
 
/************************************************************************
 
/************************************************************************
Line 581: Line 809:
 
   justify-content: flex-start;
 
   justify-content: flex-start;
 
   align-items: center;
 
   align-items: center;
 +
}
 +
@media (min-width: 768px) {
 +
  #bodyContent .flex-gallery {
 +
    flex-direction: row;
 +
    flex-wrap: wrap;
 +
    align-items: flex-end;
 +
    justify-content: center;
 +
  }
 +
}
 +
 +
@media (min-width: 768px) {
 +
  #bodyContent .center-gallery{
 +
    align-items: center;
 +
  }
 
}
 
}
  
Line 752: Line 994:
 
}
 
}
  
−
#bodyContent nav {
 
−
  display:none;
 
−
  position: fixed;
 
−
  background-color: white;
 
−
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 
−
  left: 0;
 
−
  right: 0;
 
−
  top: 16px;
 
−
  z-index: 9999;
 
−
}
 
−
 
−
 
−
#bodyContent .menu {
 
−
  width:80%;
 
−
  margin:auto;
 
−
  display: flex;
 
−
  flex-direction: row;
 
−
  justify-content: space-between;
 
−
  align-items: center;
 
−
  padding: 0 20px;
 
−
}
 
−
 
−
#bodyContent .menu img{
 
−
  width: 128px;
 
−
  max-width: 128px;
 
−
}
 
−
 
−
#bodyContent nav li::before{
 
−
  content:none;
 
−
}
 
−
 
−
#bodyContent nav ul {
 
−
  margin: 0;
 
−
  padding: 0;
 
−
}
 
−
 
−
#bodyContent .menu li {
 
−
  display: block;
 
−
  list-style-type: none;
 
−
  text-transform: uppercase;
 
−
  padding-left: 0;
 
−
  text-indent: 0;
 
−
}
 
−
 
−
#bodyContent .menu li a {
 
−
  display: flex;
 
−
  text-align: center;
 
−
  align-items:center;
 
−
  text-decoration: none;
 
−
  color: #777;
 
−
  padding: 15px;
 
−
  font-size: 14px;
 
−
  font-weight: bold;
 
−
}
 
−
 
−
#bodyContent .menu > li > a{
 
−
  height: 80px;
 
−
  padding: 0 5px;
 
−
}
 
−
 
−
 
−
#bodyContent .menu li a:hover {
 
−
  background: #ccc;
 
−
  color: #fff;
 
−
}
 
−
 
−
#bodyContent .menu-item-has-children > a:after {
 
−
  font-family: "Genericons";
 
−
  content: "\f431";
 
−
  padding-left: 5px;
 
−
}
 
−
 
−
#bodyContent nav ul ul {
 
−
  display: none;
 
−
  position: absolute;
 
−
}
 
−
 
−
#bodyContent nav ul li:hover > ul {
 
−
  display: block;
 
−
  color: #fff;
 
−
  padding-left: 0;
 
−
  background: #777;
 
−
}
 
−
 
−
#bodyContent nav ul li:hover > ul a {
 
−
  color: #fff;
 
−
}
 
−
 
−
#bodyContent .sub-menu li {
 
−
  display: flex;
 
−
  width: 340px;
 
−
}
 
−
#bodyContent .sub-menu li:hover,
 
−
#bodyContent .sub-menu li a:hover {
 
−
  background: #ddd;
 
−
  color: #777;
 
−
}
 
−
 
−
#bodyContent nav ul ul ul {
 
−
  margin: 0 0 0 100%;
 
−
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
 
−
}
 
−
 
−
#bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after {
 
−
  transform: rotate(-90deg);
 
−
  transition: transform 0.5s;
 
−
}
 
−
 
−
 
−
 
−
 
−
 
−
/************************************************************************
 
−
Media Queries
 
−
************************************************************************/
 
−
/************************************************************************
 
−
Laptop
 
−
************************************************************************/
 
−
@media (min-width: 768px) {
 
−
  #bodyContent .flex-gallery {
 
−
    flex-direction: row;
 
−
    flex-wrap: wrap;
 
−
    align-items: flex-end;
 
−
    justify-content: center;
 
−
  }
 
−
  #bodyContent .center-gallery{
 
−
    align-items: center;
 
−
  }
 
−
}
 
−
 
−
/* Small Laptop up */
 
 
@media (min-width: 1024px) {
 
@media (min-width: 1024px) {
−
  body {
 
−
    margin: 16px 0 0 0;
 
−
  }
 
−
  #bodyContent nav{
 
−
    display:flex;
 
−
  }
 
−
  #bodyContent #sidebar-btn {
 
−
    display:none;
 
−
    width: 20px;
 
−
    height: 20px;
 
−
    padding: 28px;
 
−
    left: 2vw;
 
−
    top: 4vw;
 
−
    justify-content: center;
 
−
    background: #149375;
 
−
    border: 3px solid white;
 
−
    border-radius: 100%;
 
−
  }
 
−
 
−
  #bodyContent #sidebar-btn:hover {
 
−
    border: 3px solid black;
 
−
  }
 
−
  #bodyContent #sidebar-btn:hover i {
 
−
    color: black;
 
−
  }
 
−
  #bodyContent #sidebar-btn.active {
 
−
    opacity:0;
 
−
  }
 
 
   #bodyContent #back-to-top {
 
   #bodyContent #back-to-top {
 
     color: rgba(0, 0, 0, 0.6);
 
     color: rgba(0, 0, 0, 0.6);
 
   }
 
   }
−
  #bodyContent .flex-row-2{
 
−
      flex-direction: row;
 
−
    }
 
−
  #bodyContent .flex-row-2 div{
 
−
    width:100%;
 
−
  }
 
−
 
−
  #bodyContent table thead {display:table-header-group;}
 
−
  #bodyContent table tbody td{
 
−
    display: table-cell;
 
−
    padding: 10px;
 
−
    border-collapse: collapse;
 
−
    vertical-align: middle;
 
−
  }
 
−
  #bodyContent table tbody td:before{content:none;}
 
 
}
 
}
  
−
#bodyContent table.small_first th:first-child {
 
−
  width: 120px;
 
−
}
 
  
−
#bodyContent table.small_first td:first-child  {
 
−
  width: 120px;
 
−
}
 
  
−
#bodyContent .tab {
 
−
  display:flex;
 
−
  flex-direction:row;
 
−
  justify-content: center;
 
−
}
 
  
−
#bodyContent .tab button {
 
−
  background-color:#fff;
 
−
  border:none;
 
−
  border-bottom:5px solid #ccc;
 
−
  outline:none;
 
−
  transition: 0.3s;
 
−
  width: 100%;
 
−
  padding: 20px;
 
−
}
 
−
 
−
#bodyContent .tab button:hover{
 
−
  background-color:#eee;
 
−
}
 
−
 
−
#bodyContent .tab button.active {
 
−
  border-bottom:5px solid #149375;
 
−
}
 
−
 
−
#bodyContent .tab img{
 
−
  padding: 20%;
 
−
}
 
−
 
−
#bodyContent .tabcontent {
 
−
  display:none;
 
−
}
 
−
 
−
#bodyContent .tabcontent:first-child{
 
−
  display:block;
 
−
}
 
−
 
−
#bodyContent .tabcontent {
 
−
    -webkit-animation: fadeEffect 1s;
 
−
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
 
−
}
 
−
 
−
@-webkit-keyframes fadeEffect {
 
−
    from {opacity: 0;}
 
−
    to {opacity: 1;}
 
−
}
 
−
 
−
@keyframes fadeEffect {
 
−
    from {opacity: 0;}
 
−
    to {opacity: 1;}
 
−
}
 
 
</style>
 
</style>
 
</head>
 
</head>
 
</html>
 
</html>

Revision as of 07:21, 30 October 2017