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

Line 57: Line 57:
 
   padding: 10% 10% 0 10%;
 
   padding: 10% 10% 0 10%;
 
}
 
}
−
#bodyContent section#article{
+
#bodyContent article{
 
   padding:10%;
 
   padding:10%;
 
}
 
}
−
#bodyContent section#article p {
+
#bodyContent article p {
 
   //column-count: 1;
 
   //column-count: 1;
 
   //column-gap: 40px;
 
   //column-gap: 40px;
Line 68: Line 68:
 
   padding: 10px 0;
 
   padding: 10px 0;
 
}
 
}
−
#bodyContent section#footer {
+
#bodyContent footer {
 
   display: flex;
 
   display: flex;
 
   flex-direction: row;
 
   flex-direction: row;
Line 77: Line 77:
 
   background: #1C1E1F;
 
   background: #1C1E1F;
 
}
 
}
−
#bodyContent section#footer i {
+
#bodyContent footer i {
 
   color: rgba(255, 255, 255, 0.3);
 
   color: rgba(255, 255, 255, 0.3);
 
   padding: 20px;
 
   padding: 20px;
Line 83: Line 83:
 
   transition: all 1s ease;
 
   transition: all 1s ease;
 
}
 
}
−
#bodyContent section#footer i:hover {
+
#bodyContent footer i:hover {
 
   color: rgba(255, 255, 255, 1);
 
   color: rgba(255, 255, 255, 1);
 
}
 
}
Line 159: Line 159:
 
   margin: auto;
 
   margin: auto;
 
}
 
}
−
#bodyContent h1,
+
#bodyContent h1,h2,h3,h4,h5,h6 {
−
h2,
+
−
h3,
+
−
h4,
+
−
h5,
+
−
h6 {
+
 
   color: #149375;
 
   color: #149375;
 
   border: none;
 
   border: none;
Line 171: Line 166:
 
   text-rendering: optimizeLegibility;
 
   text-rendering: optimizeLegibility;
 
   font-family: 'Quicksand', sans-serif;
 
   font-family: 'Quicksand', sans-serif;
−
  //margin: 1rem 0;
 
 
   line-height: 1;
 
   line-height: 1;
−
  //border-bottom: 1px solid #ccc
 
 
}
 
}
 
#bodyContent h1 {
 
#bodyContent h1 {
 
   font-size: 2.986em;
 
   font-size: 2.986em;
 
   margin: 0;
 
   margin: 0;
 +
  padding: 0;
 
}
 
}
 
#bodyContent h2 {
 
#bodyContent h2 {
 
   font-size: 2.488em;
 
   font-size: 2.488em;
 
   margin: 0;
 
   margin: 0;
 +
  padding: 0;
 
}
 
}
 
#bodyContent h3 {
 
#bodyContent h3 {
 
   font-size: 2.074em;
 
   font-size: 2.074em;
 
   margin: 0;
 
   margin: 0;
 +
  padding: 0;
 
}
 
}
 
#bodyContent h4 {
 
#bodyContent h4 {
 
   font-size: 1.728em;
 
   font-size: 1.728em;
 
   margin: 0;
 
   margin: 0;
 +
  padding: 0;
 
}
 
}
 
#bodyContent h5 {
 
#bodyContent h5 {
 
   font-size: 1.44em;
 
   font-size: 1.44em;
 
   margin: 0;
 
   margin: 0;
 +
  padding: 0;
 
}
 
}
 
#bodyContent h6 {
 
#bodyContent h6 {
 
   font-size: 1.2em;
 
   font-size: 1.2em;
 
   margin: 0;
 
   margin: 0;
 +
  padding: 0;
 
}
 
}
 
#bodyContent p {
 
#bodyContent p {
Line 204: Line 203:
 
   text-align: justify;
 
   text-align: justify;
 
   line-height: 1.5;
 
   line-height: 1.5;
−
   margin: 0.5rem 0;
+
   margin:0;
 +
  padding: 0;
 
}
 
}
 
/************************************************************************
 
/************************************************************************
Line 219: Line 219:
 
}
 
}
  
−
  #bodyContent table th{
+
#bodyContent table th{
−
    border: none;
+
  border: none;
−
    background-color: rgba(20, 147, 117, 0.5);
+
  background-color: rgba(20, 147, 117, 0.5);
−
    text-align: left;
+
  text-align: left;
−
  }
+
}
−
  #bodyContent table td {
+
#bodyContent table td {
−
    border:none;
+
  border:none;
−
    display:block;
+
  display:block;
−
  }
+
}
−
  #bodyContent table tbody td:before{
+
#bodyContent table tbody td:before{
−
    content: attr(data-th);
+
  content: attr(data-th);
−
    font-weight: bold;
+
  font-weight: bold;
−
    display: inline-block;
+
  display: inline-block;
−
    width: 6rem;
+
  width: 6rem;
−
  }
+
}
−
  #bodyContent table tr{
+
#bodyContent table tr{
−
    background-color: white;
+
  background-color: white;
−
    transition: all 0.5s ease;
+
  transition: all 0.5s ease;
−
  }
+
}
−
  #bodyContent table tr:nth-child(even) {
+
#bodyContent table tr:nth-child(even) {
−
    background-color: rgba(20, 147, 117, 0.125);
+
  background-color: rgba(20, 147, 117, 0.125);
−
  }
+
}
−
  #bodyContent table tr:hover {
+
#bodyContent table tr:hover {
−
    background-color: rgba(20, 147, 117, 0.75);
+
  background-color: rgba(20, 147, 117, 0.75);
−
  }
+
}
−
  /************************************************************************
+
/************************************************************************
−
  Lists
+
Lists
−
  ************************************************************************/
+
************************************************************************/
−
  #bodyContent ul {
+
#bodyContent ul {
−
    list-style-type: disc;
+
  list-style-type: disc;
−
    color: #149375;
+
  color: #149375;
−
    margin: 0 0 0 18px;
+
  margin: 0 0 0 18px;
−
    list-style-image: none;
+
  list-style-image: none;
−
    padding: 0;
+
  padding: 0;
−
    line-height: 1.5;
+
  line-height: 1.5;
−
  }
+
}
−
  #bodyContent li {
+
#bodyContent li {
−
    margin: 0;
+
  margin: 0;
−
    padding: 0;
+
  padding: 0;
−
    line-height: 1.5;
+
  line-height: 1.5;
−
  }
+
}
−
  #bodyContent a {
+
#bodyContent a {
−
    font-family: 'Quicksand', sans-serif;
+
  font-family: 'Quicksand', sans-serif;
−
    font-size: 20px;
+
  font-size: 20px;
−
    text-align: justify;
+
  text-align: justify;
−
    line-height: 1.5;
+
  line-height: 1.5;
−
    list-style-image: none;
+
  list-style-image: none;
−
    list-style-type: none;
+
  list-style-type: none;
−
    color: #149375;
+
  color: #149375;
−
    transition: all 1s ease;
+
  transition: all 1s ease;
−
  }
+
}
−
  #bodyContent a:hover {
+
#bodyContent a:hover {
−
    color: #0e6752;
+
  color: #0e6752;
−
  }
+
}
−
  #bodyContent a:active {
+
#bodyContent a:active {
−
    color: #0e6752;
+
  color: #0e6752;
−
  }
+
}
−
  #bodyContent a:visited {
+
#bodyContent a:visited {
−
    color: #149375;
+
  color: #149375;
−
  }
+
}
−
  /************************************************************************
+
/************************************************************************
−
  Navigation Button
+
Navigation Button
−
  ************************************************************************/
+
************************************************************************/
−
  #bodyContent #sidebar-btn {
+
#bodyContent #sidebar-btn {
−
    width: 100%;
+
  width: 100%;
−
    height: 50px;
+
  height: 50px;
−
    padding: 0 5vw 0 0;
+
  padding: 0 5vw 0 0;
−
    position: fixed;
+
  position: fixed;
−
    top: 16px;
+
  top: 16px;
−
    right: 0;
+
  right: 0;
−
    display: flex;
+
  display: flex;
−
    flex-direction: row;
+
  flex-direction: row;
−
    justify-content: flex-end;
+
  justify-content: flex-end;
−
    align-items: center;
+
  align-items: center;
−
    font-size: 24pt;
+
  font-size: 24pt;
−
    cursor: pointer;
+
  cursor: pointer;
−
    z-index: 2;
+
  z-index: 2;
−
    color: white;
+
  color: white;
−
    background: #1C1E1F;
+
  background: #1C1E1F;
−
    border: none;
+
  border: none;
−
    border-radius: 0;
+
  border-radius: 0;
−
    box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
+
  box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
−
    transition: border 1s ease;
+
  transition: border 1s ease;
−
  }
+
}
−
  #bodyContent #sidebar-btn:hover {
+
#bodyContent #sidebar-btn:hover {
−
    border: none;  }
+
  border: none;  }
  
−
  #bodyContent #sidebar-btn i {
+
#bodyContent #sidebar-btn i {
−
    transition: color 1s ease;
+
  transition: color 1s ease;
−
  }
+
}
  
−
  #bodyContent #sidebar-btn:hover i {
+
#bodyContent #sidebar-btn:hover i {
−
    color: #149375;
+
  color: #149375;
  
−
  }
+
}
−
  /************************************************************************
+
/************************************************************************
−
  Navigation bar
+
Navigation bar
−
  ************************************************************************/
+
************************************************************************/
−
  #bodyContent #sidebar {
+
#bodyContent #sidebar {
−
    z-index: 5;
+
  z-index: 5;
−
    background: #151718;
+
  background: #151718;
−
    width: 250px;
+
  width: 250px;
−
    height: 100%;
+
  height: 100%;
−
    display: block;
+
  display: block;
−
    position: fixed;
+
  position: fixed;
−
    top: 16px;
+
  top: 16px;
−
    left: 0;
+
  left: 0;
−
    visibility: hidden;
+
  visibility: hidden;
−
    opacity: 0;
+
  opacity: 0;
−
    transition: all 1s ease;
+
  transition: all 1s ease;
−
    overflow-y: auto;
+
  overflow-y: auto;
−
  }
+
}
−
  #bodyContent #sidebar.visible {
+
#bodyContent #sidebar.visible {
−
    visibility: visible;
+
  visibility: visible;
−
    opacity: 1;
+
  opacity: 1;
−
  }
+
}
−
  #bodyContent #sidebar ul {
+
#bodyContent #sidebar ul {
−
    margin: 0px;
+
  margin: 0px;
−
    padding: 0px;
+
  padding: 0px;
−
  }
+
}
−
  #bodyContent #sidebar ul li {
+
#bodyContent #sidebar ul li {
−
    list-style: none;
+
  list-style: none;
−
    transition: all 2s ease;
+
  transition: all 2s ease;
−
  }
+
}
−
  #bodyContent #sidebar ul li a {
+
#bodyContent #sidebar ul li a {
−
    font-size: 16px;
+
  font-size: 16px;
−
    background: #1C1E1F;
+
  background: #1C1E1F;
−
    color: #ccc;
+
  color: #ccc;
−
    border-bottom: 1px solid #111;
+
  border-bottom: 1px solid #111;
−
    display: block;
+
  display: block;
−
    width: 250px;
+
  width: 250px;
−
    padding: 10px;
+
  padding: 10px;
−
    text-decoration: none;
+
  text-decoration: none;
−
    transition: all 1s ease;
+
  transition: all 1s ease;
−
  }
+
}
−
  #bodyContent #sidebar ul li a:hover {
+
#bodyContent #sidebar ul li a:hover {
−
    background-color: rgba(255, 255, 255, 0.3)
+
  background-color: rgba(255, 255, 255, 0.3)
−
  }
+
}
−
  #bodyContent #sidebar ul ul a {
+
#bodyContent #sidebar ul ul a {
−
    font-size: 16px;
+
  font-size: 16px;
−
    background: #1C1E1F;
+
  background: #1C1E1F;
−
    color: #ccc;
+
  color: #ccc;
−
    border-bottom: 1px solid #111;
+
  border-bottom: 1px solid #111;
−
    display: block;
+
  display: block;
−
    width: 250px;
+
  width: 250px;
−
    padding: 10px;
+
  padding: 10px;
−
    text-decoration: none;
+
  text-decoration: none;
−
    transition: all 1s ease;
+
  transition: all 1s ease;
−
  }
+
}
−
  #bodyContent #sidebar ul ul a:hover {
+
#bodyContent #sidebar ul ul a:hover {
−
    background-color: rgba(255, 255, 255, 0.3)
+
  background-color: rgba(255, 255, 255, 0.3)
−
  }
+
}
−
  #bodyContent #sidebar ul ul.sub li {
+
#bodyContent #sidebar ul ul.sub li {
−
    display: none;
+
  display: none;
−
    padding-left: 15px;
+
  padding-left: 15px;
−
  }
+
}
−
  #bodyContent #sidebar ul ul.sub li.active {
+
#bodyContent #sidebar ul ul.sub li.active {
−
    display: block;
+
  display: block;
−
  }
+
}
−
  #bodyContent #overlay {
+
#bodyContent #overlay {
−
    position: fixed;
+
  position: fixed;
−
    width: 100%;
+
  width: 100%;
−
    height: 100%;
+
  height: 100%;
−
    top: 0;
+
  top: 0;
−
    left: 0;
+
  left: 0;
−
    right: 0;
+
  right: 0;
−
    bottom: 0;
+
  bottom: 0;
−
    background-color: rgba(0, 0, 0, 0.5);
+
  background-color: rgba(0, 0, 0, 0.5);
−
    z-index: 1;
+
  z-index: 1;
−
    cursor: pointer;
+
  cursor: pointer;
−
    visibility: hidden;
+
  visibility: hidden;
−
    opacity: 0;
+
  opacity: 0;
−
    transition: all 1s ease;
+
  transition: all 1s ease;
−
  }
+
}
−
  #bodyContent #overlay.active {
+
#bodyContent #overlay.active {
−
    visibility: visible;
+
  visibility: visible;
−
    opacity: 1;
+
  opacity: 1;
−
   }
+
}
−
   /************************************************************************
+
/************************************************************************
−
   Flex gallery
+
Flex gallery
−
   ************************************************************************/
+
************************************************************************/
 +
#bodyContent .flex-gallery {
 +
   display: flex;
 +
  flex-direction: column;
 +
  flex-wrap: initial;
 +
  justify-content: flex-start;
 +
  align-items: center;
 +
}
 +
#bodyContent .flex-gallery div {
 +
   width: 200px;
 +
  height: auto;
 +
  display:flex;
 +
  flex-flow: column;
 +
  justify-content: flex-end;
 +
  margin: 0 10px;
 +
}
 +
#bodyContent .flex-gallery a img {
 +
  max-width: 100%;
 +
  height: auto;
 +
  filter: grayscale(100%);
 +
  transition: all 1s ease;
 +
}
 +
#bodyContent .flex-gallery a img:hover {
 +
  filter: grayscale(0%);
 +
}
 +
#bodyContent .modalDialog {
 +
  position: fixed;
 +
  top: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  background: rgba(0, 0, 0, 0.8);
 +
  z-index: 99999;
 +
  opacity: 0;
 +
  transition: opacity 400ms ease-in;
 +
  pointer-events: none;
 +
}
 +
#bodyContent .modalDialog:target {
 +
  opacity: 1;
 +
  pointer-events: auto;
 +
}
 +
#bodyContent .modalDialog > div {
 +
  display:flex;
 +
  flex-direction: row;
 +
  position: absolute;
 +
  top: 15vh;
 +
  left: 15vw;
 +
  right: 15vw;
 +
  border-radius: 20px;
 +
  background: #fff;
 +
}
 +
#bodyContent .modalDialog > div > div {
 +
  margin: 20px;
 +
}
 +
#bodyContent a.close {
 +
  font-size: 24pt;
 +
  z-index: 3;
 +
  position: fixed;
 +
  right: 13vw;
 +
  top: 11vh;
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: center;
 +
  align-items: center;
 +
  width: 20px;
 +
  height: 20px;
 +
  cursor: pointer;
 +
  padding: 28px;
 +
  border: 3px solid white;
 +
  border-radius: 100%;
 +
  box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 +
}
 +
#bodyContent a.close {
 +
  background: #149375;
 +
  color: white;
 +
  transition: all 1s ease;
 +
}
 +
#bodyContent a.close:visited {
 +
  color: white;
 +
}
 +
#bodyContent a.close:link {
 +
  color: white;
 +
}
 +
#bodyContent a.close:hover {
 +
  border: 3px solid black;
 +
  color: black;
 +
}
 +
/************************************************************************
 +
Special Text
 +
************************************************************************/
 +
#bodyContent abbr {
 +
   vertical-align: baseline;
 +
   font-size: inherit;
 +
  text-decoration: none;
 +
  color: rgba(0, 0, 0, 0.4);
 +
}
 +
#bodyContent abbr[title],.explain[title] {
 +
  border-bottom: none;
 +
  cursor: help;
 +
}
 +
#bodyContent b,strong {
 +
  font-weight: bold;
 +
  line-height: inherit;
 +
  color: #149375;
 +
}
 +
/* label */
 +
span.label {
 +
  display: inline-block;
 +
  padding: 0 6px;
 +
  border-radius: 20px;
 +
  white-space: nowrap;
 +
  cursor: default;
 +
  background: #149375;
 +
  color: #fefefe;
 +
}
 +
/************************************************************************
 +
Callout
 +
************************************************************************/
 +
#bodyContent div.callout {
 +
  margin: 24px 0;
 +
  padding: 10px;
 +
  border: 2px solid rgba(20, 147, 117, 0.5);
 +
  border-radius: 0;
 +
}
 +
/************************************************************************
 +
Accordion
 +
************************************************************************/
 +
#bodyContent button.accordion {
 +
  font: 20px Quicksand;
 +
  background: #fefefe;
 +
  cursor: pointer;
 +
  padding: 18px;
 +
  width: 100%;
 +
  border: none;
 +
  text-align: left;
 +
  outline: none;
 +
  transition: all 1s ease;
 +
}
 +
#bodyContent button.accordion.active,
 +
#bodyContent button.accordion:hover {
 +
  background-color: rgba(20, 147, 117, 0.7);
 +
}
 +
#bodyContent button.accordion:after {
 +
  content: '\002B';
 +
  color: #777;
 +
  float: right;
 +
  margin-left: 5px;
 +
}
 +
#bodyContent button.accordion.active:after {
 +
  content: "\2212";
 +
}
 +
#bodyContent .panel {
 +
  padding: 0 18px;
 +
  background-color: white;
 +
  max-height: 0;
 +
  overflow: hidden;
 +
  transition: max-height 0.2s ease-out;
 +
}
 +
#bodyContent .panel p {
 +
  font-size: 18px;
 +
}
 +
/************************************************************************
 +
Mega Menu
 +
************************************************************************/
 +
#mega-menu {
 +
  display: flex;
 +
  justify-content: space-around;
 +
  margin: 5vw 0;
 +
}
 +
#mega-menu i {
 +
  font-size: 10vw;
 +
}
 +
#mega-menu a {
 +
  color: #263238;
 +
  transition: all 1s ease;
 +
}
 +
#mega-menu a:link {
 +
  color: #263238;
 +
}
 +
#mega-menu a:visited {
 +
  color: #263238;
 +
}
 +
#mega-menu a:hover,
 +
a:focus,
 +
a:active {
 +
  color: #149375;
 +
}
 +
/************************************************************************
 +
Upwards arrow
 +
************************************************************************/
 +
#bodyContent #returnToTop {
 +
  position: fixed;
 +
  font-size: 35pt;
 +
  right: 3vw;
 +
  bottom: 3vw;
 +
  display: block;
 +
  text-decoration: none;
 +
  color: rgba(0, 0, 0, 0.6);
 +
  transition: all 1s ease;
 +
}
 +
 
 +
#bodyContent #returnToTop:hover{
 +
  color: black;
 +
}
 +
 
 +
/************************************************************************
 +
Media Queries
 +
************************************************************************/
 +
/************************************************************************
 +
Laptop
 +
************************************************************************/
 +
@media (min-width: 768px) {
 
   #bodyContent .flex-gallery {
 
   #bodyContent .flex-gallery {
−
    display: flex;
+
     flex-direction: row;
−
     flex-direction: column;
+
     flex-wrap: wrap;
−
     flex-wrap: initial;
+
     align-items: flex-end;
−
     justify-content: flex-start;
+
     justify-content: center;
−
     align-items: center;
+
 
   }
 
   }
−
   #bodyContent .flex-gallery div {
+
   #bodyContent table thead {display:table-header-group;}
−
    width: 200px;
+
  #bodyContent table tbody td{display: table-cell;}
−
    height: auto;
+
  #bodyContent table tbody td:before{content:none;}
−
    display:flex;
+
}
−
    flex-flow: column;
+
@media (min-width: 900px) {
−
    justify-content: flex-end;
+
  body {
−
     margin: 0 10px;
+
     margin: 16px 0 0 0;
 
   }
 
   }
−
   #bodyContent .flex-gallery a img {
+
   #globalWrapper {
−
     max-width: 100%;
+
     padding: 10%;
−
    height: auto;
+
−
    filter: grayscale(100%);
+
−
    transition: all 1s ease;
+
−
  }
+
−
  #bodyContent .flex-gallery a img:hover {
+
−
    filter: grayscale(0%);
+
−
  }
+
−
  #bodyContent .modalDialog {
+
−
    position: fixed;
+
−
    top: 0;
+
−
    right: 0;
+
−
    bottom: 0;
+
−
    left: 0;
+
−
    background: rgba(0, 0, 0, 0.8);
+
−
    z-index: 99999;
+
−
    opacity: 0;
+
−
    transition: opacity 400ms ease-in;
+
−
    pointer-events: none;
+
−
  }
+
−
  #bodyContent .modalDialog:target {
+
−
    opacity: 1;
+
−
    pointer-events: auto;
+
−
  }
+
−
  #bodyContent .modalDialog > div {
+
−
    display:flex;
+
−
    flex-direction: row;
+
−
    position: absolute;
+
−
    top: 15vh;
+
−
    left: 15vw;
+
−
    right: 15vw;
+
−
    border-radius: 20px;
+
−
    background: #fff;
+
 
   }
 
   }
−
   #bodyContent .modalDialog > div > div {
+
   #bodyContent article p {
−
     margin: 20px;
+
     //column-count: 2;
 +
    //border-bottom: 1px solid #ccc;
 
   }
 
   }
−
   #bodyContent a.close {
+
   #bodyContent #sidebar-btn {
−
    font-size: 24pt;
+
−
    z-index: 3;
+
−
    position: fixed;
+
−
    right: 13vw;
+
−
    top: 11vh;
+
−
    display: flex;
+
−
    flex-direction: row;
+
−
    justify-content: center;
+
−
    align-items: center;
+
 
     width: 20px;
 
     width: 20px;
 
     height: 20px;
 
     height: 20px;
−
    cursor: pointer;
 
 
     padding: 28px;
 
     padding: 28px;
 +
    right: 2vw;
 +
    top: 4vw;
 +
    justify-content: center;
 +
    background: #149375;
 
     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);
 
−
  }
 
−
  #bodyContent a.close {
 
−
    background: #149375;
 
−
    color: white;
 
−
    transition: all 1s ease;
 
−
  }
 
−
  #bodyContent a.close:visited {
 
−
    color: white;
 
 
   }
 
   }
−
   #bodyContent a.close:link {
+
   #bodyContent #sidebar-btn:hover {
−
     color: white;
+
     border: 3px solid black;
 
   }
 
   }
−
   #bodyContent a.close:hover {
+
   #bodyContent #sidebar-btn:hover i {
−
    border: 3px solid black;
+
 
     color: black;
 
     color: black;
 
   }
 
   }
−
  /************************************************************************
+
   #bodyContent #back-to-top {
−
  Special Text
+
−
  ************************************************************************/
+
−
   #bodyContent abbr {
+
−
    vertical-align: baseline;
+
−
    font-size: inherit;
+
−
    text-decoration: none;
+
−
    color: rgba(0, 0, 0, 0.4);
+
−
  }
+
−
  #bodyContent abbr[title],.explain[title] {
+
−
    border-bottom: none;
+
−
    cursor: help;
+
−
  }
+
−
  #bodyContent b,strong {
+
−
    font-weight: bold;
+
−
    line-height: inherit;
+
−
    color: #149375;
+
−
  }
+
−
  /* label */
+
−
  span.label {
+
−
    display: inline-block;
+
−
    padding: 0 6px;
+
−
    border-radius: 20px;
+
−
    white-space: nowrap;
+
−
    cursor: default;
+
−
    background: #149375;
+
−
    color: #fefefe;
+
−
  }
+
−
  /************************************************************************
+
−
  Callout
+
−
  ************************************************************************/
+
−
  #bodyContent div.callout {
+
−
    margin: 24px 0;
+
−
    padding: 10px;
+
−
    border: 2px solid rgba(20, 147, 117, 0.5);
+
−
    border-radius: 0;
+
−
  }
+
−
  /************************************************************************
+
−
  Accordion
+
−
  ************************************************************************/
+
−
  #bodyContent button.accordion {
+
−
    font: 20px Quicksand;
+
−
    background: #fefefe;
+
−
    cursor: pointer;
+
−
    padding: 18px;
+
−
    width: 100%;
+
−
    border: none;
+
−
    text-align: left;
+
−
    outline: none;
+
−
    transition: all 1s ease;
+
−
  }
+
−
  #bodyContent button.accordion.active,
+
−
  #bodyContent button.accordion:hover {
+
−
    background-color: rgba(20, 147, 117, 0.7);
+
−
  }
+
−
  #bodyContent button.accordion:after {
+
−
    content: '\002B';
+
−
    color: #777;
+
−
    float: right;
+
−
    margin-left: 5px;
+
−
  }
+
−
  #bodyContent button.accordion.active:after {
+
−
    content: "\2212";
+
−
  }
+
−
  #bodyContent .panel {
+
−
    padding: 0 18px;
+
−
    background-color: white;
+
−
    max-height: 0;
+
−
    overflow: hidden;
+
−
    transition: max-height 0.2s ease-out;
+
−
  }
+
−
  #bodyContent .panel p {
+
−
    font-size: 18px;
+
−
  }
+
−
  /************************************************************************
+
−
  Mega Menu
+
−
  ************************************************************************/
+
−
  #mega-menu {
+
−
    display: flex;
+
−
    justify-content: space-around;
+
−
    margin: 5vw 0;
+
−
  }
+
−
  #mega-menu i {
+
−
    font-size: 10vw;
+
−
  }
+
−
  #mega-menu a {
+
−
    color: #263238;
+
−
    transition: all 1s ease;
+
−
  }
+
−
  #mega-menu a:link {
+
−
    color: #263238;
+
−
  }
+
−
  #mega-menu a:visited {
+
−
    color: #263238;
+
−
  }
+
−
  #mega-menu a:hover,
+
−
  a:focus,
+
−
  a:active {
+
−
    color: #149375;
+
−
  }
+
−
  /************************************************************************
+
−
  Upwards arrow
+
−
  ************************************************************************/
+
−
  #bodyContent #returnToTop {
+
−
    position: fixed;
+
−
    font-size: 35pt;
+
−
    right: 3vw;
+
−
    bottom: 3vw;
+
−
    display: block;
+
−
    text-decoration: none;
+
 
     color: rgba(0, 0, 0, 0.6);
 
     color: rgba(0, 0, 0, 0.6);
−
    transition: all 1s ease;
 
 
   }
 
   }
−
 
+
}
−
   #bodyContent #returnToTop:hover{
+
/************************************************************************
−
     color: black;
+
Desktop
 +
************************************************************************/
 +
@media (min-width: 1600px) {
 +
   #bodyContent article p {
 +
     //column-count: 3;
 
   }
 
   }
−
 
+
}
−
  /************************************************************************
+
</style>
−
  Media Queries
+
−
  ************************************************************************/
+
−
  /************************************************************************
+
−
  Laptop
+
−
  ************************************************************************/
+
−
  @media (min-width: 768px) {
+
−
    #bodyContent .flex-gallery {
+
−
      flex-direction: row;
+
−
      flex-wrap: wrap;
+
−
      align-items: flex-end;
+
−
      justify-content: center;
+
−
    }
+
−
    #bodyContent table thead {display:table-header-group;}
+
−
    #bodyContent table tbody td{display: table-cell;}
+
−
    #bodyContent table tbody td:before{content:none;}
+
−
  }
+
−
  @media (min-width: 900px) {
+
−
    body {
+
−
      margin: 16px 0 0 0;
+
−
    }
+
−
    #globalWrapper {
+
−
      padding: 10%;
+
−
    }
+
−
    #bodyContent section#article p {
+
−
      //column-count: 2;
+
−
      //border-bottom: 1px solid #ccc;
+
−
    }
+
−
    #bodyContent #sidebar-btn {
+
−
      width: 20px;
+
−
      height: 20px;
+
−
      padding: 28px;
+
−
      right: 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 #back-to-top {
+
−
      color: rgba(0, 0, 0, 0.6);
+
−
    }
+
−
  }
+
−
  /************************************************************************
+
−
  Desktop
+
−
  ************************************************************************/
+
−
  @media (min-width: 1600px) {
+
−
    #bodyContent section#article p {
+
−
      //column-count: 3;
+
−
    }
+
−
  }
+
−
  </style>
+
−
 
+
−
 
+
 
</head>
 
</head>
 
</html>
 
</html>

Revision as of 09:01, 20 September 2017