(adding our social media + website) |
|||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <style> | ||
+ | html { | ||
+ | position: relative; | ||
+ | height: 100%; | ||
+ | min-width: 950px; | ||
+ | text-align: center; | ||
+ | background-color: white; | ||
+ | background-size: cover; | ||
+ | -webkit-font-smoothing: antialiased; /* font smoothing */ | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | font-family: 'Quicksand', Work Sans; font-size:16px; | ||
+ | } | ||
+ | header, body { | ||
+ | height: 100%; | ||
+ | margin: 0 0 35px; | ||
+ | padding: 0; | ||
+ | } | ||
− | + | p { | |
− | + | text-align: justify; | |
− | + | font-family: Work Sans; | |
+ | } | ||
+ | a { | ||
+ | text-decoration: none; | ||
+ | color: #000000; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | a:hover { | ||
+ | color: #363638; | ||
+ | font-weight: bolder; | ||
+ | } | ||
− | + | img { | |
− | + | padding: 0; | |
− | + | display: block; | |
+ | margin: auto; | ||
+ | max-height: 100%; | ||
+ | max-width: 100%; | ||
+ | } | ||
− | + | /* Site Map styles */ | |
+ | .sitemap { | ||
+ | background-color: #339999; | ||
+ | color: #ffffff; | ||
+ | } | ||
− | + | #map-column-styles { | |
+ | clear:left; | ||
+ | float:left; | ||
+ | text-align: left; | ||
+ | width:100%; | ||
+ | overflow:hidden; | ||
+ | background:#339999; | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | #map-column-1 { | ||
+ | float:left; | ||
+ | min-width:16%; | ||
+ | position:relative; | ||
+ | left:14%; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #map-column-1 a { | ||
+ | list-style: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #map-column-1 a:hover { | ||
+ | color: #066; | ||
+ | } | ||
+ | #map-column-2 { | ||
+ | float:left; | ||
+ | min-width:16%; | ||
+ | position:relative; | ||
+ | left:14%; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #map-column-2 a { | ||
+ | list-style: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #map-column-2 a:hover { | ||
+ | color: #066; | ||
+ | } | ||
+ | #map-column-3 { | ||
+ | float:left; | ||
+ | min-width:16%; | ||
+ | position:relative; | ||
+ | left:14%; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #map-column-3 a { | ||
+ | list-style: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #map-column-3 a:hover { | ||
+ | color: #066; | ||
+ | } | ||
+ | #map-column-4 { | ||
+ | float:left; | ||
+ | min-width:16%; | ||
+ | position:relative; | ||
+ | left:14%; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #map-column-4 a { | ||
+ | list-style: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #map-column-4 a:hover { | ||
+ | color: #066; | ||
+ | } | ||
+ | #map-column-5 { | ||
+ | float:left; | ||
+ | min-width:16%; | ||
+ | position:relative; | ||
+ | left:14%; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #map-column-5 a { | ||
+ | list-style: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #map-column-5 a:hover { | ||
+ | color: #066; | ||
+ | } | ||
− | + | /* Normal page styles */ | |
− | + | .container { | |
− | + | padding-top: 1%; | |
+ | padding-left: 13%; | ||
+ | padding-right: 13%; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
− | + | .basictext { | |
+ | font-weight: lighter; | ||
+ | line-height: 32px; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
− | + | .introtext { | |
+ | font-weight: lighter; | ||
+ | line-height: 32px; | ||
+ | } | ||
− | + | /* Team page styles */ | |
− | + | .person-wrap { | |
− | + | width: 100%; | |
− | + | padding-top: 1%; | |
− | + | padding-bottom: 5%; | |
− | + | padding-left: 2%; | |
− | + | padding-right: 0.5%; | |
− | + | font-family: Work Sans; | |
− | + | } | |
+ | .person-photo { | ||
+ | padding: 2% 0 2% 0; | ||
+ | float: left; | ||
+ | width: 25%; | ||
+ | } | ||
+ | .person-texts { | ||
+ | float: right; | ||
+ | width: 68%; | ||
+ | font-weight: lighter; | ||
+ | line-height: 28px; | ||
+ | font-family: Work Sans; | ||
+ | text-align: justify; | ||
+ | margin-right: 2%; | ||
+ | } | ||
− | + | /* Icons and porifi styles */ | |
− | + | .some { | |
− | + | display: inline-block; | |
− | + | width: 30px; | |
− | + | vertical-align: middle; | |
− | + | } | |
− | + | ||
− | + | .some:hover { | |
− | + | content: url('https://igem-qsf.github.io/Aalto-Helsinki-wiki-17/logos-icons/home_icon_hover.png'); | |
− | + | } | |
− | + | p.porify { | |
+ | padding-top: 6%; | ||
+ | text-align: center; | ||
+ | width: 30%; | ||
+ | margin: auto; | ||
+ | } | ||
+ | #roll-o { | ||
+ | position: absolute; /* Sit on top of the page content */ | ||
+ | display: block; /* none: Hidden by default */ | ||
+ | width: 6%; | ||
+ | top: 5%; | ||
+ | left: 9%; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | background-color: rgba(0,0,0,0); | ||
+ | z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */ | ||
+ | cursor: default; | ||
+ | } | ||
+ | .o { | ||
+ | position: relative; | ||
+ | top: 0 !important; | ||
+ | left: 0 !important; | ||
+ | } | ||
+ | #quote-block { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | #quote-block-mod { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #CC9933; | ||
+ | overflow: hidden; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | #quote-block-hp { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #c63; | ||
+ | overflow: hidden; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | #quote-block-com { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #006699; | ||
+ | overflow: hidden; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | #quote-block-peo { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #336633; | ||
+ | overflow: hidden; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
− | + | q { | |
− | + | quotes: "“" "”" "‘" "’"; | |
− | + | } | |
− | + | ||
− | + | q:before { | |
+ | content: open-quote; | ||
+ | font-size: 150px; | ||
+ | } | ||
+ | q:after { | ||
+ | content: no-close-quote; | ||
+ | } | ||
− | + | .quote-mark { | |
− | + | width: 0%; | |
− | + | float: left; | |
− | + | text-align: left; | |
− | + | font-weight: bolder; | |
− | + | font-size: 0px; | |
− | + | padding: 0 8%; | |
− | + | color: #000000; | |
− | + | margin-bottom:-100px; | |
− | + | margin-top:-40px; | |
− | + | } | |
− | + | ||
− | + | ||
+ | .quote-text { | ||
+ | width: 70%; | ||
+ | text-align: left; | ||
+ | font-weight: bolder; | ||
+ | font-size: 30px; | ||
+ | padding: 0 18%; | ||
+ | color: #000000; | ||
+ | } | ||
− | + | .quote-person { | |
− | + | width: 69%; | |
− | + | text-align: right; | |
− | + | font-weight: lighter; | |
− | + | font-size: 25px; | |
− | + | padding: 0 18%; | |
− | + | color: #000000; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #color-block { | |
− | + | width: 100%; | |
− | + | top: 2%; | |
− | + | padding: 30px 0px; | |
+ | text-align: left; | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | } | ||
− | + | #color-block-mod { | |
− | + | width: 100%; | |
− | + | top: 2%; | |
− | + | padding: 30px 0px; | |
− | + | text-align: left; | |
+ | background-color: #CC9933; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #color-block-com { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #006699; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #parts-text { | ||
+ | padding: 1% 0% 1% 13%; | ||
+ | color: #ffffff; | ||
+ | width: 46%; | ||
+ | float: left; | ||
+ | text-align: justify; | ||
+ | font-weight: bold; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #parts-photo { | ||
+ | padding: 1% 13% 1% 5%; | ||
+ | float: right; | ||
+ | width: 23%; | ||
+ | } | ||
+ | .color-block-container { | ||
+ | min-height: 68%; /*fills the remaining space of the page*/ | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | /*position: relative; | ||
+ | width: 100%;*/ | ||
+ | background-color: #f36; | ||
+ | } | ||
+ | .color-block-container > div { | ||
+ | flex: 1 1 auto; | ||
+ | display: flex; | ||
+ | } | ||
+ | .color-block-container > div > div { | ||
+ | flex: 1 1 auto; | ||
+ | } | ||
+ | .color-block-hp > div { | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | .color-block-hp > div:nth-child(1) { | ||
+ | background-color: #c63; | ||
+ | } | ||
+ | .color-block-hp > div:nth-child(2) { | ||
+ | background-color: #c63; | ||
+ | } | ||
+ | .color-block-hp > div:nth-child(3) { | ||
+ | background-color: #c63; | ||
+ | } | ||
+ | .color-block-hp > div:hover { | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | .color-block-hp > div:hover:nth-child(1) { | ||
+ | background-color: #b85c2e; | ||
+ | /*on hover darker shade of same color*/ | ||
+ | } | ||
+ | .color-block-hp > div:hover:nth-child(2) { | ||
+ | background-color: #b85c2e; | ||
+ | /*on hover darker shade of same color*/ | ||
+ | } | ||
+ | .color-block-hp > div:hover:nth-child(3) { | ||
+ | background-color: #b85c2e; | ||
+ | /*on hover darker shade of same color*/ | ||
+ | } | ||
+ | #color-block-hp { | ||
+ | /*height: 200px;*/ | ||
+ | /*min-height: 100px;*/ | ||
+ | /*width: 100%; | ||
+ | top: 0%; | ||
+ | height: 80%; | ||
+ | padding: 3% 0px;*/ | ||
+ | text-align: left; | ||
+ | background-color: #c63; | ||
+ | /*overflow: hidden;*/ | ||
+ | } | ||
+ | #color-block-team { | ||
+ | /*scroll effect: background: url("./img/1group crop+.jpg") no-repeat center center fixed;*/ | ||
+ | background: url("./img/1group crop+.jpg") no-repeat center center; /* attention, no dash */ | ||
+ | /*background-size: 100%;*/ | ||
+ | background-size: cover; | ||
+ | height: 55%; | ||
+ | /*width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #c63; | ||
+ | overflow: hidden;*/ | ||
+ | } | ||
+ | #color-block:hover { | ||
+ | background-color: #066; | ||
+ | /*on hover darker shade of same color*/ | ||
+ | } | ||
+ | #color-block-mod:hover { | ||
+ | background-color: #b88a2e; | ||
+ | /*on hover darker shade of same color*/ | ||
+ | } | ||
+ | #color-block-hp:hover { | ||
+ | background-color: #b85c2e; | ||
+ | /*on hover darker shade of same color*/ | ||
+ | } | ||
+ | #color-block-com:hover { | ||
+ | background-color: #036; | ||
+ | /*on hover darker shade of same color*/ | ||
+ | } | ||
+ | .text1 { | ||
+ | width: 60%; | ||
+ | /*text closer to center*/ | ||
+ | float: left; | ||
+ | padding: 2% 0; | ||
+ | text-align: center; | ||
+ | font-weight: bolder; | ||
+ | font-size: 30px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .text2 { | ||
+ | left: 50%; | ||
+ | width: 40%; | ||
+ | /*so the text doesn't start immediately from 50% of page*/ | ||
+ | float: right; | ||
+ | font-size: 16px; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .text2-hp { | ||
+ | /*left: 50%;*/ | ||
+ | /*padding: 2% 0;*/ | ||
+ | width: 40%; | ||
+ | text-align: left; | ||
+ | /*so the text doesn't start immediately from 50% of page*/ | ||
+ | /*float: right; | ||
+ | font-size: 16px; | ||
+ | color: #ffffff;*/ | ||
+ | text-decoration: none; | ||
+ | display: flex; | ||
+ | /*The links will flex in the vertical direction*/ | ||
+ | flex-direction: column; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | .text2 a { | ||
+ | font-weight: bold; | ||
+ | color: #ffffff; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | } | ||
+ | .text2-hp a { | ||
+ | font-weight: bold; | ||
+ | color: #ffffff; | ||
+ | line-height: 6px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | } | ||
+ | .text2 a:hover { | ||
+ | color: #eeeeee; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .text2-hp a:hover { | ||
+ | color: #eeeeee; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: Quicksand; | ||
+ | src: url(Adam.otf); | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | color: #000000; | ||
+ | padding: 10px; | ||
+ | font-size: 250%; | ||
+ | text-align: center; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | color: #000000; | ||
+ | padding: 10px; | ||
+ | font-size: 80px; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | color: #000000; | ||
+ | font-size: 200%; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | h4 { | ||
+ | color: #000000; | ||
+ | font-size: 130%; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | h5 { | ||
+ | color: #ffffff; | ||
+ | font-size: 130%; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | #dropdown { | ||
+ | position: relative; | ||
+ | height: 24px; | ||
+ | background: #ffffff; | ||
+ | width: auto; | ||
+ | } | ||
+ | #dropdown ul { | ||
+ | list-style: none; | ||
+ | padding: 0; | ||
+ | margin: auto; /*this was 0*/ | ||
+ | /*text-align: center; this was added*/ | ||
+ | line-height: 1; | ||
+ | } | ||
+ | #dropdown > ul { | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | text-align: center; /*test, this was added*/ | ||
+ | background: #ffffff; /*This is the heading1 background*/ | ||
+ | width: 100%; | ||
+ | z-index: 500; | ||
+ | } | ||
+ | #dropdown:after, | ||
+ | #dropdown > ul:after { | ||
+ | content: "."; | ||
+ | display: block; | ||
+ | clear: both; | ||
+ | visibility: hidden; | ||
+ | line-height: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | #dropdown.align-right > ul > li { | ||
+ | float: right; | ||
+ | } | ||
+ | #dropdown.align-center ul { | ||
+ | text-align: center; | ||
+ | } | ||
+ | #dropdown.align-center ul ul { | ||
+ | text-align: center; /*this was left*/ | ||
+ | } | ||
+ | #dropdown > ul > li { | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #dropdown > ul > #menu-button { | ||
+ | display: none; | ||
+ | } | ||
+ | #dropdown ul li a { | ||
+ | display: block; | ||
+ | font-family: 'Quicksand', Work Sans; | ||
+ | src: url(Adam.otf); | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #dropdown > ul > li > a { | ||
+ | font-size: 18px; | ||
+ | font-weight: bold; | ||
+ | text-align: center; /* this was added */ | ||
+ | padding: 5px 45px; /* heading sizes */ | ||
+ | color: #363638; /*previous color #7a8189;*/ | ||
+ | -webkit-transition: color 0.25s ease-out; | ||
+ | -moz-transition: color 0.25s ease-out; | ||
+ | -ms-transition: color 0.25s ease-out; | ||
+ | -o-transition: color 0.25s ease-out; | ||
+ | transition: color 0.25s ease-out; | ||
+ | } | ||
+ | #dropdown > ul > li.has-sub > a { | ||
+ | padding-right: 40px; | ||
+ | } | ||
+ | /*Dropdown parent links give different colours when hovered*/ | ||
+ | #dropdown > ul > li:hover > a.lab { | ||
+ | color: #339999; | ||
+ | border-bottom: 3px solid currentColor; | ||
+ | } | ||
+ | #dropdown > ul > li:hover > a.mod { | ||
+ | color: #CC9933; | ||
+ | border-bottom: 3px solid currentColor; | ||
+ | } | ||
+ | #dropdown > ul > li:hover > a.hp { | ||
+ | color: #CC6633; | ||
+ | border-bottom: 3px solid currentColor; | ||
+ | } | ||
+ | #dropdown > ul > li:hover > a.com { | ||
+ | color: #336699; | ||
+ | border-bottom: 3px solid currentColor; | ||
+ | } | ||
+ | #dropdown > ul > li:hover > a.peo { | ||
+ | color: #336633; | ||
+ | border-bottom: 3px solid currentColor; | ||
+ | } | ||
+ | #dropdown li.has-sub::after { | ||
+ | display: block; | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | |||
+ | #dropdown ul ul { | ||
+ | position: absolute; | ||
+ | left: -9999px; | ||
+ | top: 70px; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity .3s ease, top .25s ease; | ||
+ | -moz-transition: opacity .3s ease, top .25s ease; | ||
+ | -ms-transition: opacity .3s ease, top .25s ease; | ||
+ | -o-transition: opacity .3s ease, top .25s ease; | ||
+ | transition: opacity .3s ease, top .25s ease; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | #dropdown ul ul ul { | ||
+ | top: 37px; | ||
+ | padding-left: 5px; | ||
+ | } | ||
+ | #dropdown ul ul li { | ||
+ | position: relative; | ||
+ | } | ||
+ | /* This defines how much space between heading and drop down menu */ | ||
+ | #dropdown > ul > li:hover > ul { | ||
+ | width: 95%; /* this makes the dropdown menus widths 100% */ | ||
+ | left: auto; | ||
+ | right: auto; | ||
+ | top: 31px; /*this was 44px -> too far away, 31px is right under */ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #dropdown.align-right > ul > li:hover > ul { | ||
+ | left: auto; | ||
+ | right: 0; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | /*Specifies how the link opened by hovering dropdown looks*/ | ||
+ | #dropdown ul ul li:hover > ul { | ||
+ | left: 175px; /* how far from the dropdown menu the submenu opens */ | ||
+ | top: 0; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #dropdown.align-right ul ul li:hover > ul { | ||
+ | left: auto; | ||
+ | /*right: 170px;*/ | ||
+ | width: 100%; /*added*/ | ||
+ | top: 0; | ||
+ | opacity: 1; | ||
+ | padding-right: 5px; | ||
+ | } | ||
+ | #dropdown ul ul li a { | ||
+ | /*width: 170px;*/ | ||
+ | width: 100%; /*the width of the subelement of subheadings */ | ||
+ | border-bottom: 1px solid #eeeeee; /* horiz. line colour */ | ||
+ | padding: 4px 2.6%; | ||
+ | font-size: 13px; | ||
+ | font-weight: bold; | ||
+ | color: #363638; /* colour of the drop down menu subheadings */ | ||
+ | background: #ffffff; | ||
+ | -webkit-transition: all .5s ease; | ||
+ | -moz-transition: all .5s ease; | ||
+ | -ms-transition: all .5s ease; | ||
+ | -o-transition: all .5s ease; | ||
+ | transition: all .5s ease; | ||
+ | } | ||
+ | #dropdown.align-right ul ul li a { | ||
+ | text-align: center; /* this was right prev. */ | ||
+ | } | ||
+ | |||
+ | #dropdown ul ul li:hover > a { | ||
+ | background: #f2f2f2; /* colour of dropdown menu links when hovered - light grey */ | ||
+ | color: #363638; | ||
+ | } | ||
+ | |||
+ | #dropdown ul ul li:last-child > a, | ||
+ | #dropdown ul ul li.last > a { | ||
+ | border-bottom: 0; | ||
+ | } | ||
+ | |||
+ | footer .footer-social { | ||
+ | position: static; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | padding: 5px 0; | ||
+ | bottom: 0; | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | footer .footer-social ul { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | footer .footer-social ul li { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | footer .footer-social ul li a { | ||
+ | display: block; | ||
+ | font-size: 16px; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: background-color 0.3s; | ||
+ | transition: background-color 0.3s; | ||
+ | } | ||
+ | footer .footer-social ul li a:hover { | ||
+ | color: #363638 !important; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | footer .footer-social a:hover { | ||
+ | color: #363638 !important; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | /*Footer for main page*/ | ||
+ | |||
+ | footer .footer-mainpage { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | padding: 5px 0; | ||
+ | bottom: 0; | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | footer .footer-mainpage ul { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | footer .footer-mainpage ul li { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | footer .footer-mainpage ul li a { | ||
+ | display: block; | ||
+ | font-size: 16px; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: background-color 0.3s; | ||
+ | transition: background-color 0.3s; | ||
+ | } | ||
+ | footer .footer-mainpage ul li a:hover { | ||
+ | color: #363638 !important; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | footer .footer-mainpage a:hover { | ||
+ | color: #363638 !important; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | footer .texts ul a { | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | color: #ffffff; | ||
+ | padding: 15px 30px; | ||
+ | } | ||
+ | |||
+ | |||
+ | @media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { | ||
+ | #dropdown { | ||
+ | width: auto; | ||
+ | } | ||
+ | #dropdown.align-center ul { | ||
+ | text-align: center; /* this was left */ | ||
+ | } | ||
+ | #dropdown.align-right > ul > li { | ||
+ | float: none; | ||
+ | } | ||
+ | #dropdown ul { | ||
+ | width: auto; | ||
+ | } | ||
+ | #dropdown .submenuArrow, | ||
+ | #dropdown #indicatorContainer { | ||
+ | display: none; | ||
+ | } | ||
+ | #dropdown > ul { | ||
+ | height: auto; | ||
+ | display: block; | ||
+ | } | ||
+ | #dropdown > ul > li { | ||
+ | float: none; | ||
+ | } | ||
+ | #dropdown li, | ||
+ | #dropdown > ul > li { | ||
+ | display: none; | ||
+ | } | ||
+ | #dropdown ul ul, | ||
+ | #dropdown ul ul ul, | ||
+ | #dropdown ul > li:hover > ul, | ||
+ | #dropdown ul ul > li:hover > ul, | ||
+ | #dropdown.align-right ul ul, | ||
+ | #dropdown.align-right ul ul ul, | ||
+ | #dropdown.align-right ul > li:hover > ul, | ||
+ | #dropdown.align-right ul ul > li:hover > ul { | ||
+ | position: relative; | ||
+ | width: 100%; /*added*/ | ||
+ | left: auto; | ||
+ | top: auto; | ||
+ | opacity: 1; | ||
+ | padding-left: 0; | ||
+ | padding-right: 0; | ||
+ | right: auto; | ||
+ | } | ||
+ | #dropdown ul .has-sub::after { | ||
+ | display: none; | ||
+ | } | ||
+ | #dropdown ul li a { | ||
+ | padding: 12px 20px; | ||
+ | } | ||
+ | #dropdown ul ul li a { | ||
+ | border: 0; | ||
+ | background: none; | ||
+ | width: auto; | ||
+ | padding: 28px 35px; | ||
+ | } | ||
+ | #dropdown.align-right ul ul li a { | ||
+ | text-align: center; /*this was left*/ | ||
+ | } | ||
+ | #dropdown ul ul li:hover > a.lab > a.mod { | ||
+ | background: none; | ||
+ | color: #363638; | ||
+ | } | ||
+ | #dropdown ul ul ul a { | ||
+ | padding: 8px 50px; | ||
+ | } | ||
+ | #dropdown ul ul ul ul a { | ||
+ | padding: 8px 65px; | ||
+ | } | ||
+ | #dropdown ul ul ul ul ul a { | ||
+ | padding: 8px 80px; | ||
+ | } | ||
+ | #dropdown ul ul ul ul ul ul a { | ||
+ | padding: 8px 95px; | ||
+ | } | ||
+ | #dropdown > ul > #menu-button { | ||
+ | display: block; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | #dropdown #menu-button > a { | ||
+ | padding: 14px 20px; | ||
+ | } | ||
+ | #dropdown ul.open li, | ||
+ | #dropdown > ul.open > li { | ||
+ | display: block; | ||
+ | } | ||
+ | #dropdown > ul.open > li#menu-button > a { | ||
+ | color: #fff; | ||
+ | border-bottom: 1px solid rgba(150, 150, 150, 0.1); | ||
+ | } | ||
+ | #dropdown ul ul::after { | ||
+ | display: none; | ||
+ | } | ||
+ | #dropdown #menu-button::after { | ||
+ | display: block; | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | height: 3px; | ||
+ | width: 22px; | ||
+ | border-top: 2px solid #7a8189; | ||
+ | border-bottom: 2px solid #7a8189; | ||
+ | right: 20px; | ||
+ | top: 0px; /* this was 15px */ | ||
+ | } | ||
+ | #dropdown #menu-button::before { | ||
+ | display: block; | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | height: 3px; | ||
+ | width: 22px; | ||
+ | border-top: 2px solid #7a8189; | ||
+ | right: 20px; | ||
+ | top: 0px; /*this was 25px*/ | ||
+ | } | ||
+ | #dropdown ul.open #menu-button::after, | ||
+ | #dropdown ul.open #menu-button::before { | ||
+ | border-color: #fff; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
</html> | </html> |
Revision as of 14:03, 18 September 2017