Difference between revisions of "Template:Cologne-Duesseldorf/css"
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | <head> | ||
<style> | <style> | ||
| − | + | @import url('https://fonts.googleapis.com/css?family=Quicksand'); | |
| − | + | /************************************************************************ | |
| − | + | Page Backbone | |
| − | + | ************************************************************************/ | |
| − | + | * { | |
| − | + | box-sizing: border-box; | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | html { | |
| − | + | font-size: 20px; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
body { | body { | ||
| − | + | width: 100%; | |
| − | + | margin: 48px 0 0 0; | |
| − | + | padding: 0; | |
| − | + | color: black; | |
| − | + | background-color: #149375; | |
| + | font: medium sans-serif; | ||
} | } | ||
| − | + | #globalWrapper { | |
| − | + | width: 100%; | |
| + | padding: 0; | ||
| + | background-color: #149375; | ||
| + | position: relative; | ||
| + | font-size: 100%; | ||
} | } | ||
| − | + | #content { | |
| − | + | width: 100%; | |
| − | + | //max-width: 1024px; | |
| − | + | min-height: 80vh; | |
| − | + | margin: auto; | |
| − | + | padding: 5%; | |
| + | border: none; | ||
| + | color: inherit; | ||
| + | background-color: #ffffff; | ||
| + | position: relative; | ||
} | } | ||
| − | + | #HQ_page { | |
| − | # | + | width: 100%; |
| − | + | margin: auto; | |
| − | + | padding: 5%; | |
| − | + | background: #ffffff; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #bodyContent { | |
| − | # | + | |
| − | + | ||
} | } | ||
| − | # | + | /************************************************************************ |
| − | + | 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 | ||
} | } | ||
| − | + | .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; | ||
} | } | ||
| − | + | /************************************************************************ | |
| − | + | General page styles | |
| − | + | ************************************************************************/ | |
| − | + | #bodyContent img { | |
| − | + | display: block; | |
| − | + | max-width: 100%; | |
| − | + | margin: auto; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | # | + | #bodyContent h1, |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
h2, | h2, | ||
h3, | h3, | ||
| Line 299: | Line 127: | ||
h5, | h5, | ||
h6 { | h6 { | ||
| − | + | color: #149375; | |
| − | + | border: none; | |
| − | + | font-weight: normal; | |
| − | + | font-style: normal; | |
| + | text-rendering: optimizeLegibility; | ||
| + | font-family: 'Quicksand', sans-serif; | ||
| + | //margin: 1rem 0; | ||
| + | line-height: 1; | ||
| + | //border-bottom: 1px solid #ccc | ||
} | } | ||
| − | # | + | #bodyContent h1 { |
| − | + | font-size: 2.986em; | |
| − | + | margin: 0; | |
| − | + | ||
} | } | ||
| − | # | + | #bodyContent h2 { |
| − | + | font-size: 2.488em; | |
| − | + | margin: 0; | |
| − | + | ||
} | } | ||
| − | # | + | #bodyContent h3 { |
| − | + | font-size: 2.074em; | |
| − | + | margin: 0; | |
| − | + | ||
} | } | ||
| − | # | + | #bodyContent h4 { |
| − | + | font-size: 1.728em; | |
| − | + | margin: 0; | |
| − | + | ||
} | } | ||
| − | # | + | #bodyContent h5 { |
| − | + | font-size: 1.44em; | |
| − | + | margin: 0; | |
| − | + | ||
} | } | ||
| − | # | + | #bodyContent h6 { |
| − | + | font-size: 1.2em; | |
| − | + | margin: 0; | |
| − | + | ||
} | } | ||
| − | # | + | #bodyContent p { |
| − | + | font-family: 'Quicksand', sans-serif; | |
| − | + | font-size: 20px; | |
| + | text-align: justify; | ||
| + | line-height: 1.5; | ||
| + | margin: 0.5rem 0; | ||
} | } | ||
| − | # | + | /************************************************************************ |
| − | + | Tables | |
| − | + | ************************************************************************/ | |
| − | + | #bodyContent table{ | |
| − | + | font: 18px Quicksand; | |
| − | + | border: none; | |
| − | + | margin: 0; | |
| + | width: 100%; | ||
} | } | ||
| − | # | + | #bodyContent table thead { |
| − | + | display:none;} | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | # | + | #bodyContent table th{ |
| − | + | border: none; | |
| − | + | background-color: rgba(20, 147, 117, 0.5); | |
| − | + | text-align: left; | |
| − | + | } | |
| − | + | #bodyContent table td { | |
| − | + | border:none; | |
| − | + | display:block; | |
| − | } | + | } |
| − | # | + | #bodyContent table tbody td:before{ |
| − | + | content: attr(data-th); | |
| − | } | + | font-weight: bold; |
| − | # | + | display: inline-block; |
| − | + | width: 6rem; | |
| − | + | } | |
| − | } | + | #bodyContent table tr{ |
| − | # | + | background-color: white; |
| − | + | } | |
| − | } | + | #bodyContent table tr:nth-child(even) { |
| − | # | + | background-color: rgba(20, 147, 117, 0.125); |
| − | + | } | |
| − | + | #bodyContent table tr:hover { | |
| − | + | background-color: rgba(20, 147, 117, 0.75); | |
| − | + | } | |
| − | + | #bodyContent table th:hover { | |
| − | + | background-color: rgba(20, 147, 117, 0.75); | |
| − | + | } | |
| − | + | /************************************************************************ | |
| − | + | Lists | |
| − | + | ************************************************************************/ | |
| − | + | #bodyContent ul { | |
| − | + | list-style-type: disc; | |
| − | + | color: #149375; | |
| − | } | + | margin: 0 0 0 18px; |
| − | # | + | list-style-image: none; |
| − | + | padding: 0; | |
| − | + | line-height: 1.5; | |
| − | } | + | } |
| − | # | + | #bodyContent li { |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | line-height: 1.5; | |
| − | + | } | |
| − | + | #bodyContent a { | |
| − | + | font-family: 'Quicksand', sans-serif; | |
| − | + | font-size: 20px; | |
| − | } | + | text-align: justify; |
| − | #sidebar | + | line-height: 1.5; |
| − | + | list-style-image: none; | |
| − | + | list-style-type: none; | |
| − | + | color: #149375; | |
| − | + | } | |
| − | + | #bodyContent a:hover { | |
| − | + | color: #0e6752; | |
| − | + | } | |
| − | + | #bodyContent a:active { | |
| − | + | color: #0e6752; | |
| − | + | } | |
| − | + | #bodyContent a:visited { | |
| − | + | 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; |
| − | section# | + | cursor: pointer; |
| − | + | z-index: 2; | |
| − | + | color: white; | |
| − | } | + | background: #1C1E1F; |
| − | section#footer { | + | border: none; |
| − | + | border-radius: 0; | |
| − | + | box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3); | |
| − | + | } | |
| − | + | #bodyContent #sidebar-btn:hover { | |
| − | + | border: none; | |
| − | + | } | |
| − | + | #bodyContent #sidebar-btn:hover i { | |
| − | + | color: #149375; | |
| − | + | } | |
| − | + | /************************************************************************ | |
| − | + | Navigation bar | |
| − | } | + | ************************************************************************/ |
| − | section#footer i { | + | #bodyContent #sidebar { |
| − | + | z-index: 5; | |
| − | + | background: #151718; | |
| − | + | width: 250px; | |
| − | } | + | height: 100%; |
| − | section#footer i:hover { | + | 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 2s ease; | |
| − | + | } | |
| − | + | #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; | |
| − | + | } | |
| − | + | #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; | |
| − | + | } | |
| − | } | + | #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; |
| − | # | + | } |
| − | + | /************************************************************************ | |
| − | } | + | Page sections |
| − | # | + | ************************************************************************/ |
| − | + | #bodyContent section#article p { | |
| − | } | + | column-count: 1; |
| − | # | + | column-gap: 40px; |
| − | + | //column-rule: 1px solid #ccc; | |
| − | + | border-top: 1px solid #ccc; | |
| − | + | border-bottom: 1px solid #ccc; | |
| − | + | padding: 10px 0; | |
| − | } | + | } |
| − | # | + | section#footer { |
| − | + | display: flex; | |
| − | } | + | flex-direction: row; |
| − | # | + | justify-content: center; |
| − | + | align-items: center; | |
| − | + | height: 15vw; | |
| − | # | + | max-height: 250px; |
| − | + | margin: 2vw 0 0 0; | |
| − | } | + | background: #1C1E1F; |
| − | # | + | position: absolute; |
| − | + | left: 0; | |
| − | } | + | right: 0; |
| − | . | + | } |
| − | + | section#footer i { | |
| − | + | color: rgba(255, 255, 255, 0.3); | |
| − | + | padding: 20px; | |
| − | + | font-size: 5vw; | |
| − | + | } | |
| − | + | section#footer i:hover { | |
| − | + | color: rgba(255, 255, 255, 1); | |
| − | + | } | |
| − | } | + | /************************************************************************ |
| − | . | + | 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 0.5s ease; |
| − | + | } | |
| − | + | #bodyContent .flex-gallery a img:hover { | |
| − | } | + | filter: grayscale(0%); |
| − | #mega-menu { | + | } |
| − | + | #bodyContent .modalDialog { | |
| − | + | position: fixed; | |
| − | } | + | top: 0; |
| − | #mega-menu i { | + | right: 0; |
| − | + | bottom: 0; | |
| − | } | + | left: 0; |
| − | #mega-menu a { | + | background: rgba(0, 0, 0, 0.8); |
| − | + | z-index: 99999; | |
| − | } | + | opacity: 0; |
| − | #mega-menu a:link { | + | transition: opacity 400ms ease-in; |
| − | + | pointer-events: none; | |
| − | } | + | } |
| − | #mega-menu a:visited { | + | #bodyContent .modalDialog:target { |
| − | + | opacity: 1; | |
| − | } | + | pointer-events: auto; |
| − | #mega-menu a:hover, | + | } |
| − | a:focus, | + | #bodyContent .modalDialog > div { |
| − | a:active { | + | 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; | |
| − | + | } | |
| − | + | #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: 0.4s; | ||
| + | } | ||
| + | #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; | ||
| + | } | ||
| + | #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 #back-to-top { | ||
| + | position: fixed; | ||
| + | font-size: 35pt; | ||
| + | right: 3vw; | ||
| + | bottom: 3vw; | ||
| + | color: rgba(0, 0, 0, 0.6); | ||
| + | } | ||
| + | /************************************************************************ | ||
| + | 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> | ||
</html> | </html> | ||
Revision as of 15:35, 19 September 2017
