Difference between revisions of "Team:Aalto-Helsinki"

(adding our social media + website)
Line 1: Line 1:
−
{{Aalto-Helsinki}}
 
 
<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;
 +
}
  
−
<div class="column full_size" >
+
p {
−
<img src="https://static.igem.org/mediawiki/2017/8/8a/T--Aalto-Helsinki--Home.png">
+
  text-align: justify;
−
</div>
+
  font-family: Work Sans;
 +
}
  
 +
a {
 +
  text-decoration: none;
 +
  color: #000000;
 +
  font-weight: bold;
 +
}
  
 +
a:hover {
 +
  color: #363638;
 +
  font-weight: bolder;
 +
}
  
−
<div class="column full_size" >
+
img {
−
<h1> Our Project </h1>
+
    padding: 0;
−
<p> This year, our project topic is dermcidin-derived peptides, short anionic antimicrobial peptides (AAMP), which are secreted by the human sweat glands. They - especially one peptide: DCD-1L - have been shown to have antimicrobial activity against Staphylococcus Aureus as well as methicillin-resistant clinical strains (MRSA) of it. They also have a broad spectrum of other antimicrobial activity including Enterococcus faecalis and Propionibacterium acnes. Therefore it would be an ideal agent to be used in wound care applications, such as patches and bandages, or in medical implants. Additionally, since dermcidin is naturally present on the skin, it helps to sustain neutral skin flora, unlike other possible methods. </p>
+
    display: block;
 +
    margin: auto;
 +
    max-height: 100%;
 +
    max-width: 100%;
 +
}
  
−
<p>The primary aim of our project is to produce DCD-1L in genetically modified E.coli, and to attempt to immobilize DCD-1L on cellulose-based materials. The end product could be used for wound care or for coating medical implants. This method could significantly reduce severe infections in, for example, burn treatment. </p>
+
/* Site Map styles */
 +
.sitemap {
 +
  background-color: #339999;
 +
  color: #ffffff;
 +
}
  
−
<p>The modelling part of our project will consist of molecular dynamic simulations. Our simulated systems will include DCD-1L in solvent, as well as the hexamer embedded in the phosholipid bilayer. We are particularly interested in the effect of the lipid bilayer composition on the peptide interaction and structure. </p>
+
#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;
 +
}
  
−
<p>Find out more on our website: <a href="http://aaltohelsinki.com">Aalto-Helsinki</a>. <br>
+
/* Normal page styles */
−
You can also follow us on our social media: <a href="https://www.facebook.com/AaltoHelsinki/">Facebook</a>, <a href="https://twitter.com/aaltohelsinki?lang=en">Twitter</a>, <a href="https://www.instagram.com/aaltohelsinki_igem/">Instagram</a>.
+
.container {
−
</p>
+
  padding-top: 1%;
 +
  padding-left: 13%;
 +
  padding-right: 13%;
 +
  font-family: Work Sans;
 +
}
  
−
</div>
+
.basictext {
 +
  font-weight: lighter;
 +
  line-height: 32px;
 +
  font-family: Work Sans;
 +
}
  
−
<div class="clear"></div>
+
.introtext {
 +
  font-weight: lighter;
 +
  line-height: 32px;
 +
}
  
−
<div class="column half_size" >
+
/* Team page styles */
  
−
<h5>Before you start: </h5>
+
.person-wrap {
−
<p> Please read the following pages:</p>
+
  width: 100%;
−
<ul>
+
  padding-top: 1%;
−
<li>  <a href="https://2017.igem.org/Competition">Competition Hub</a> </li>
+
  padding-bottom: 5%;
−
<li> <a href="https://2017.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
  padding-left: 2%;
−
<li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
  padding-right: 0.5%;
−
</ul>
+
  font-family: Work Sans;
−
</div>
+
}
 +
.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%;
 +
}
  
−
<div class="column half_size" >
+
/* Icons and porifi styles */
−
<div class="highlight">
+
.some {
−
<h5> Styling your wiki </h5>
+
  display: inline-block;
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
  width: 30px;
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
+
  vertical-align: middle;
−
</div>
+
}
−
</div>
+
  
−
<div class="column full_size" >
+
.some:hover {
−
<h5> Wiki template information </h5>
+
  content: url('https://igem-qsf.github.io/Aalto-Helsinki-wiki-17/logos-icons/home_icon_hover.png');
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2017.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
}
  
−
</div>
+
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;
 +
}
  
−
<div class="column half_size" >
+
q {
−
<h5> Editing your wiki </h5>
+
  quotes: "“" "”" "‘" "’";
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
}
−
<p> <a href="https://2017.igem.org/wiki/index.php?title=Team:Example&action=edit"> </a>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
  
−
</div>
+
q:before {
 +
  content: open-quote;
 +
  font-size: 150px;
 +
}
  
 +
q:after {
 +
  content: no-close-quote;
 +
}
  
−
<div class="column half_size" >
+
.quote-mark {
−
<h5>Tips</h5>
+
  width: 0%;
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
  float: left;
−
<ul>
+
  text-align: left;
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
  font-weight: bolder;
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
  font-size: 0px;
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
  padding: 0 8%;
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
  color: #000000;
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
  margin-bottom:-100px;
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2017.igem.org/Calendar">iGEM 2017 calendar</a> </li>
+
  margin-top:-40px;
−
<li>Have lots of fun! </li>
+
}
−
</ul>
+
−
</div>
+
  
 +
.quote-text {
 +
  width: 70%;
 +
  text-align: left;
 +
  font-weight: bolder;
 +
  font-size: 30px;
 +
  padding: 0 18%;
 +
  color: #000000;
 +
}
  
−
<div class="column half_size" >
+
.quote-person {
−
<h5>Inspiration</h5>
+
  width: 69%;
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
  text-align: right;
−
<ul>
+
  font-weight: lighter;
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
  font-size: 25px;
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
  padding: 0 18%;
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
  color: #000000;
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
}
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column half_size" >
+
#color-block {
−
<h5> Uploading pictures and files </h5>
+
  width: 100%;
−
<p> You can upload your pictures and files to the iGEM 2017 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
  top: 2%;
−
When you upload, set the "Destination Filename" to <br><code>T--YourOfficialTeamName--NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)<br><br>
+
  padding: 30px 0px;
 +
  text-align: left;
 +
  background-color: #339999;
 +
  overflow: hidden;
 +
}
  
−
<a href="https://2017.igem.org/Special:Upload">
+
#color-block-mod {
−
UPLOAD FILES
+
  width: 100%;
−
</a>
+
  top: 2%;
−
</p>
+
  padding: 30px 0px;
−
</div>
+
  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