(162 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://cdn.jsdelivr.net/genericons/3.0.3/genericons.css"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | / | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
/************************************************************************ | /************************************************************************ | ||
Wiki Overrides | Wiki Overrides | ||
Line 106: | Line 23: | ||
background-color: #383838; | background-color: #383838; | ||
border-bottom: 2px solid black; | border-bottom: 2px solid black; | ||
− | z-index: | + | z-index: 50; |
} | } | ||
#top_title { | #top_title { | ||
Line 135: | Line 52: | ||
.pop_why_cover { | .pop_why_cover { | ||
display: none; | display: none; | ||
− | z-index: | + | z-index: 50; |
margin-top: -65px; | margin-top: -65px; | ||
margin-left: -40px; | margin-left: -40px; | ||
Line 155: | Line 72: | ||
border: 3px solid #4e606e; | border: 3px solid #4e606e; | ||
border-radius: 3px; | border-radius: 3px; | ||
− | z-index: | + | z-index: 50; |
} | } | ||
+ | |||
+ | /************************************************************************ | ||
+ | Page Backbone | ||
+ | ************************************************************************/ | ||
+ | * { | ||
+ | -webkit-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | html { | ||
+ | font-size:16px; | ||
+ | } | ||
+ | body { | ||
+ | width: 100%; | ||
+ | margin: 48px 0 0 0; | ||
+ | padding: 0; | ||
+ | color: black; | ||
+ | background-color: white; | ||
+ | font: inherit; | ||
+ | font-size:16px; | ||
+ | word-wrap: break-word; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1024px) { | ||
+ | body { | ||
+ | margin: 16px 0 0 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | #globalWrapper { | ||
+ | width: 100%; | ||
+ | padding: 0; | ||
+ | background-color: #149375; | ||
+ | position: relative; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | #content { | ||
+ | width: 100%; | ||
+ | min-height: 80vh; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: none; | ||
+ | color: inherit; | ||
+ | background-color: #ffffff; | ||
+ | position: relative; | ||
+ | } | ||
+ | #HQ_page { | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background: none; | ||
+ | } | ||
+ | #bodyContent { | ||
+ | } | ||
+ | /************************************************************************ | ||
+ | Page sections | ||
+ | ************************************************************************/ | ||
+ | #bodyContent article{ | ||
+ | width:90%; | ||
+ | margin: auto; | ||
+ | padding: 8% 0; | ||
+ | } | ||
+ | |||
+ | #bodyContent .frontpage{ | ||
+ | width: 100%; | ||
+ | margin: 0% 0; | ||
+ | padding: 5%; | ||
+ | padding-top: 0%; | ||
+ | background: white; | ||
+ | box-shadow: 0 -20px 20px 20px white; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1024px) { | ||
+ | #bodyContent article{ | ||
+ | width: 85%; | ||
+ | margin: 0; | ||
+ | padding: 8% 5%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #ToC { | ||
+ | display:none; | ||
+ | position:fixed; | ||
+ | top: 100px; | ||
+ | left: 85%; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | padding: 20px; | ||
+ | -webkit-box-orient:vertical; | ||
+ | -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){ | ||
+ | #ToC{ | ||
+ | display:-webkit-box; | ||
+ | display:-ms-flexbox; | ||
+ | display:flex; | ||
+ | } | ||
+ | } | ||
+ | #bodyContent #ToC a { | ||
+ | display:block; | ||
+ | margin:10px 0; | ||
+ | position:relative; | ||
+ | text-align: left;} | ||
+ | #bodyContent #ToC a[title=H1] { display:none;font-size:1.125rem;} | ||
+ | #bodyContent #ToC a[title=H2] { font-size:0.875rem;} | ||
+ | #bodyContent #ToC a[title=H3] { display:none;font-size:0.750rem;} | ||
+ | |||
+ | #bodyContent nav { | ||
+ | display:none; | ||
+ | position: fixed; | ||
+ | background-color: white; | ||
+ | -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; | ||
+ | right: 0; | ||
+ | top: 16px; | ||
+ | z-index: 50; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1024px) { | ||
+ | #bodyContent nav{ | ||
+ | display:-webkit-box; | ||
+ | display:-ms-flexbox; | ||
+ | display:flex; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | #bodyContent .menu { | ||
+ | width:80%; | ||
+ | margin:auto; | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: horizontal; | ||
+ | -webkit-box-direction: normal; | ||
+ | -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; | ||
+ | } | ||
+ | |||
+ | #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: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | text-align: center; | ||
+ | -webkit-box-align:center; | ||
+ | -ms-flex-align:center; | ||
+ | align-items:center; | ||
+ | text-decoration: none; | ||
+ | color: #777; | ||
+ | padding: 15px; | ||
+ | font-size: 0.875rem; | ||
+ | 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; | ||
+ | -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; | ||
+ | } | ||
+ | |||
+ | #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: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | 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%; | ||
+ | -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 { | ||
+ | -webkit-transform: rotate(-90deg); | ||
+ | -ms-transform: rotate(-90deg); | ||
+ | transform: rotate(-90deg); | ||
+ | -webkit-transform-origin: 50% 60%; | ||
+ | -ms-transform-origin: 50% 60%; | ||
+ | transform-origin: 50% 60%; | ||
+ | } | ||
+ | |||
+ | /************************************************************************ | ||
+ | Navigation Button | ||
+ | ************************************************************************/ | ||
+ | #bodyContent #sidebar-btn { | ||
+ | width: 100%; | ||
+ | height: 50px; | ||
+ | padding: 0 5vw 0 0; | ||
+ | position: fixed; | ||
+ | top: 16px; | ||
+ | right: 0; | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: horizontal; | ||
+ | -webkit-box-direction: normal; | ||
+ | -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; | ||
+ | cursor: pointer; | ||
+ | z-index: 2; | ||
+ | color: white; | ||
+ | background: #1C1E1F; | ||
+ | border: none; | ||
+ | border-radius: 0; | ||
+ | -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; | ||
+ | } | ||
+ | #bodyContent #sidebar-btn:hover { | ||
+ | border: none; } | ||
+ | |||
+ | #bodyContent #sidebar-btn i { | ||
+ | -webkit-transition: color 1s ease; | ||
+ | -o-transition: color 1s ease; | ||
+ | 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; | ||
+ | -webkit-box-pack: center; | ||
+ | -ms-flex-pack: center; | ||
+ | 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; | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -o-transition: all 0.5s ease; | ||
+ | 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; | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -o-transition: all 0.5s ease; | ||
+ | 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: 1rem; | ||
+ | background: #1C1E1F; | ||
+ | color: #ccc; | ||
+ | border-bottom: 1px solid #111; | ||
+ | display: block; | ||
+ | width: 250px; | ||
+ | padding: 10px; | ||
+ | text-decoration: none; | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -o-transition: all 0.5s ease; | ||
+ | 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: 1rem; | ||
+ | background: #1C1E1F; | ||
+ | color: #ccc; | ||
+ | border-bottom: 1px solid #111; | ||
+ | display: block; | ||
+ | width: 250px; | ||
+ | padding: 10px; | ||
+ | text-decoration: none; | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -o-transition: all 0.5s ease; | ||
+ | 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; | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -o-transition: all 0.5s ease; | ||
+ | transition: all 0.5s ease; | ||
+ | } | ||
+ | #bodyContent #overlay.active { | ||
+ | visibility: visible; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #bodyContent footer { | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: horizontal; | ||
+ | -webkit-box-direction: normal; | ||
+ | -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; | ||
+ | max-height: 250px; | ||
+ | background: #1C1E1F; | ||
+ | } | ||
+ | #bodyContent footer i { | ||
+ | color: rgba(255, 255, 255, 0.3); | ||
+ | padding: 20px; | ||
+ | font-size: 5vw; | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -o-transition: all 0.5s ease; | ||
+ | transition: all 0.5s ease; | ||
+ | } | ||
+ | #bodyContent footer i:hover { | ||
+ | color: rgba(255, 255, 255, 1); | ||
+ | } | ||
+ | |||
/************************************************************************ | /************************************************************************ | ||
General page styles | General page styles | ||
Line 163: | Line 546: | ||
display: block; | display: block; | ||
max-width: 100%; | max-width: 100%; | ||
− | |||
padding: 20px; | padding: 20px; | ||
+ | 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 { | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | #bodyContent svg.fullscreen{ | ||
+ | padding: 10% 0; | ||
+ | margin: 0 5%; | ||
+ | } | ||
+ | |||
+ | #bodyContent video{ | ||
+ | max-width:100%; | ||
+ | margin: 5% auto; | ||
} | } | ||
#bodyContent .max-width { | #bodyContent .max-width { | ||
width: 100%; | width: 100%; | ||
− | |||
} | } | ||
+ | |||
+ | #bodyContent .limited-height{ | ||
+ | max-height: 500px; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | #bodyContent .half-width{ | ||
+ | width:100%; | ||
+ | margin:5% auto; | ||
+ | } | ||
+ | |||
+ | #bodyContent .quarter-width{ | ||
+ | width:100%; | ||
+ | margin:5% auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | @media (min-width: 1024px){ | ||
+ | #bodyContent .half-width{ | ||
+ | width:50%; | ||
+ | } | ||
+ | #bodyContent .quarter-width{ | ||
+ | width:25%; | ||
+ | } | ||
+ | } | ||
+ | |||
#bodyContent h1,h2,h3,h4,h5,h6 { | #bodyContent h1,h2,h3,h4,h5,h6 { | ||
color: #149375; | color: #149375; | ||
Line 181: | Line 619: | ||
} | } | ||
#bodyContent h1 { | #bodyContent h1 { | ||
− | font-size: 2. | + | font-size: 2.986rem; |
margin: 20px 0; | margin: 20px 0; | ||
padding: 0; | padding: 0; | ||
} | } | ||
+ | |||
+ | @media (min-width: 1024px) { | ||
+ | #bodyContent h1{ | ||
+ | text-transform: uppercase; | ||
+ | font-size: 6.854rem; | ||
+ | border-left: 5px solid #149375; | ||
+ | padding: 0 20px; | ||
+ | } | ||
+ | } | ||
+ | |||
#bodyContent h2 { | #bodyContent h2 { | ||
− | font-size: 2. | + | font-size: 2.488rem; |
margin: 18px 0; | margin: 18px 0; | ||
padding: 0; | padding: 0; | ||
} | } | ||
+ | |||
+ | @media (min-width: 1024px) { | ||
+ | #bodyContent h2{ | ||
+ | font-size:4.236rem; | ||
+ | } | ||
+ | } | ||
+ | |||
#bodyContent h3 { | #bodyContent h3 { | ||
− | font-size: 2. | + | font-size: 2.074rem; |
margin: 16px 0; | margin: 16px 0; | ||
padding: 0; | padding: 0; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1024px) { | ||
+ | #bodyContent h3{ | ||
+ | font-size:2.618rem; | ||
+ | } | ||
} | } | ||
#bodyContent h4 { | #bodyContent h4 { | ||
− | font-size: 1. | + | font-size: 1.728rem; |
margin: 14px 0; | margin: 14px 0; | ||
padding: 0; | padding: 0; | ||
+ | } | ||
+ | @media (min-width: 1024px) { | ||
+ | #bodyContent h4{ | ||
+ | font-size:1.618rem; | ||
+ | } | ||
} | } | ||
#bodyContent h5 { | #bodyContent h5 { | ||
− | font-size: 1. | + | font-size: 1.44rem; |
margin: 12px 0; | margin: 12px 0; | ||
padding: 0; | padding: 0; | ||
} | } | ||
#bodyContent h6 { | #bodyContent h6 { | ||
− | font-size: 1. | + | 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: | + | font-size: 1.250rem; |
text-align: justify; | text-align: justify; | ||
line-height: 1.5; | line-height: 1.5; | ||
− | margin:0; | + | margin:0 auto; |
padding: 0; | padding: 0; | ||
+ | } | ||
+ | #bodyContent article p { | ||
+ | padding: 10px 0; | ||
} | } | ||
#bodyContent em{} | #bodyContent em{} | ||
Line 240: | Line 717: | ||
text-decoration: none; | text-decoration: none; | ||
color: rgba(0, 0, 0, 0.5); | color: rgba(0, 0, 0, 0.5); | ||
− | font-size: | + | font-size: 1.250rem; |
} | } | ||
#bodyContent abbr[title],.explain[title] { | #bodyContent abbr[title],.explain[title] { | ||
Line 248: | Line 725: | ||
#bodyContent pre { | #bodyContent pre { | ||
− | + | display:block; | |
+ | overflow-x: auto; | ||
background: rgba(0,0,0,0); | background: rgba(0,0,0,0); | ||
padding: 20px; | padding: 20px; | ||
Line 273: | Line 751: | ||
#bodyContent figcaption { | #bodyContent figcaption { | ||
font-family: 'Quicksand', sans-serif; | font-family: 'Quicksand', sans-serif; | ||
− | font-size: | + | font-size: 0.75rem;; |
padding-left: 20px; | padding-left: 20px; | ||
font-style: italic; | font-style: italic; | ||
+ | } | ||
+ | |||
+ | #bodyContent figcaption a{ | ||
+ | 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) { | ||
+ | #bodyContent .flex-row-2{ | ||
+ | -webkit-box-orient: horizontal; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-direction: row; | ||
+ | flex-direction: row; | ||
+ | } | ||
+ | #bodyContent .flex-row-2 *{ | ||
+ | -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; | ||
+ | } | ||
+ | } | ||
+ | |||
/************************************************************************ | /************************************************************************ | ||
Special Text | Special Text | ||
Line 302: | Line 865: | ||
color: #fefefe; | color: #fefefe; | ||
} | } | ||
+ | /************************************************************************ | ||
+ | Layout Elements | ||
+ | ************************************************************************/ | ||
+ | /************************************************************************ | ||
+ | Tabs | ||
+ | ************************************************************************/ | ||
+ | #bodyContent .tab { | ||
+ | width: 100%; | ||
+ | display:-webkit-box; | ||
+ | display:-ms-flexbox; | ||
+ | display:flex; | ||
+ | -webkit-box-orient:horizontal; | ||
+ | -webkit-box-direction:normal; | ||
+ | -ms-flex-direction:row; | ||
+ | flex-direction:row; | ||
+ | -webkit-box-pack: center; | ||
+ | -ms-flex-pack: center; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | |||
+ | #bodyContent .tab button { | ||
+ | background-color:#fff; | ||
+ | border:none; | ||
+ | border-bottom:5px solid #ccc; | ||
+ | outline:none; | ||
+ | -webkit-transition: 0.3s; | ||
+ | -o-transition: 0.3s; | ||
+ | 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;} | ||
+ | } | ||
+ | /************************************************************************ | ||
+ | Callout | ||
+ | ************************************************************************/ | ||
+ | #bodyContent div.callout { | ||
+ | margin: 24px 0; | ||
+ | padding: 20px; | ||
+ | border: 5px solid #149375; | ||
+ | border-radius: 20px; | ||
+ | } | ||
+ | /************************************************************************ | ||
+ | Accordion | ||
+ | ************************************************************************/ | ||
+ | #bodyContent button.accordion { | ||
+ | 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-align:center; | ||
+ | -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 h3{ | ||
+ | font-size: 1.250rem; | ||
+ | text-transform:uppercase; | ||
+ | letter-spacing: 7px; | ||
+ | } | ||
+ | #bodyContent button.accordion h4{ | ||
+ | font-size: 1.250rem; | ||
+ | text-transform:uppercase; | ||
+ | letter-spacing: 7px; | ||
+ | } | ||
+ | |||
+ | #bodyContent button.accordion:after{ | ||
+ | //content:"\25BE"; | ||
+ | content:"v"; | ||
+ | font-size:1.25rem; | ||
+ | font-weight:bold; | ||
+ | margin: 18px 0; | ||
+ | width:100%; | ||
+ | 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 { | ||
+ | font-size: 1.125rem; | ||
+ | } | ||
+ | |||
/************************************************************************ | /************************************************************************ | ||
Tables | Tables | ||
Line 315: | Line 1,054: | ||
#bodyContent table thead { | #bodyContent table thead { | ||
display:none; | display:none; | ||
+ | } | ||
+ | @media (min-width: 1024px) { | ||
+ | #bodyContent table thead { | ||
+ | display:table-header-group; | ||
+ | } | ||
} | } | ||
Line 332: | Line 1,076: | ||
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); | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -o-transition: all 0.5s ease; | ||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||
} | } | ||
Line 341: | Line 1,100: | ||
#bodyContent table tr:hover { | #bodyContent table tr:hover { | ||
background-color: rgba(20, 147, 117, 0.75); | background-color: rgba(20, 147, 117, 0.75); | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1024px){ | ||
+ | |||
+ | #bodyContent table th:first-child{ | ||
+ | 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 349: | Line 1,130: | ||
list-style-image: none; | list-style-image: none; | ||
color: black; | color: black; | ||
− | margin: 0 | + | margin: 2rem 0 2rem 3rem; |
padding: 0; | padding: 0; | ||
line-height: 1.5; | line-height: 1.5; | ||
Line 356: | Line 1,137: | ||
#bodyContent ol { | #bodyContent ol { | ||
color: black; | color: black; | ||
− | margin: 0 | + | margin: 2rem 0 2rem 3rem; |
padding: 0; | padding: 0; | ||
line-height: 1.5; | line-height: 1.5; | ||
Line 362: | Line 1,143: | ||
#bodyContent li { | #bodyContent li { | ||
+ | font-family: 'Quicksand', sans-serif; | ||
+ | font-size: 1.250rem; | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
line-height: 1.5; | line-height: 1.5; | ||
− | padding-left: | + | padding-left: 1rem; |
− | text-indent: -. | + | text-indent: -.7rem; |
} | } | ||
#bodyContent li::before { | #bodyContent li::before { | ||
Line 372: | 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: | + | font-size: 1.250rem; |
text-align: justify; | text-align: justify; | ||
line-height: 1.5; | line-height: 1.5; | ||
Line 381: | 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 393: | Line 1,206: | ||
} | } | ||
/************************************************************************ | /************************************************************************ | ||
− | + | Flex gallery | |
************************************************************************/ | ************************************************************************/ | ||
− | #bodyContent | + | #bodyContent .flex-gallery { |
− | + | display: -webkit-box; | |
− | + | display: -ms-flexbox; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display: flex; | display: flex; | ||
− | + | -webkit-box-orient: vertical; | |
− | + | -webkit-box-direction: normal; | |
− | + | -ms-flex-direction: column; | |
− | + | 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) { | |
− | + | #bodyContent .flex-gallery { | |
− | + | -webkit-box-orient: horizontal; | |
− | #bodyContent | + | -webkit-box-direction: normal; |
− | + | -ms-flex-direction: row; | |
− | + | 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; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | @media (min-width: 768px) { | |
− | + | #bodyContent .center-gallery{ | |
− | + | -webkit-box-align: center; | |
− | + | -ms-flex-align: center; | |
− | + | align-items: center; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | #bodyContent | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
#bodyContent .flex-gallery div { | #bodyContent .flex-gallery div { | ||
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 | + | |
+ | #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 | + | #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 551: | Line 1,289: | ||
left: 0; | left: 0; | ||
background: rgba(0, 0, 0, 0.8); | background: rgba(0, 0, 0, 0.8); | ||
− | z-index: | + | 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 579: | 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 589: | 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 606: | Line 1,363: | ||
color: black; | color: black; | ||
} | } | ||
+ | |||
/************************************************************************ | /************************************************************************ | ||
− | + | image carousel | |
************************************************************************/ | ************************************************************************/ | ||
− | #bodyContent | + | #bodyContent .slider{ |
− | + | position:relative; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #bodyContent .slide{ | |
− | + | -webkit-transition: opacity 2s linear; | |
− | + | -o-transition: opacity 2s linear; | |
− | #bodyContent | + | transition: opacity 2s linear; |
− | + | padding:0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | #bodyContent | + | |
− | + | #bodyContent .slider button { | |
+ | position: absolute; | ||
+ | top: 0; | ||
+ | border: none; | ||
+ | height: 100%; | ||
+ | width: 50px; | ||
+ | cursor: pointer; | ||
+ | background: hsla(0, 0%, 50%, 0.5); | ||
} | } | ||
− | #bodyContent button | + | #bodyContent .slider button:hover{ |
− | + | background: hsla(0, 0%, 0%, 0.5); | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | #bodyContent | + | |
− | + | #bodyContent .btn-left{ | |
+ | left:0; | ||
} | } | ||
− | #bodyContent . | + | #bodyContent .btn-right{ |
− | + | right:0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
/************************************************************************ | /************************************************************************ | ||
− | + | Misc elements | |
************************************************************************/ | ************************************************************************/ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/************************************************************************ | /************************************************************************ | ||
Upwards arrow | Upwards arrow | ||
Line 689: | 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 696: | Line 1,421: | ||
} | } | ||
− | + | /************************************************************************ | |
− | + | Loader | |
+ | ************************************************************************/ | ||
+ | #loader-wrapper { | ||
position: fixed; | position: fixed; | ||
− | top: | + | top: 0; |
left: 0; | left: 0; | ||
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | z-index: 1000; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | z-index: | + | |
} | } | ||
− | # | + | #loader { |
− | + | ||
− | + | ||
− | + | ||
display: block; | 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- | + | -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; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 20:31, 1 November 2017