Team:TrinityCollegeDublin/css.css

body {

   margin: 0;
   padding: 0;

}

/*-------------------------NavBar-------------------------*/

nav{ z-index: 100; background-color: rgba(255,255,255,0.7); padding: 0.2em; /*NavBarHeight*/ min-height: 2em; line-height: 1em; max-height: 90px;

}

nav ul {

 margin-left: 7.5em;
 padding-right: 5em;
 text-align: right;
 transition: max-height 0.25s linear;
      

}

.menu ul > li {

 transition: visibility .5s linear;
 display: inline-block;
 text-align: left;
 padding: 0.8em 0em;
 margin: 0 .5em;
 position: relative;
 

}

nav li:hover {

   background-color: #000000;

}

/* Hide Dropdowns by Default and giving it a position of absolute */ nav ul ul {

   display: none;
   position: absolute;
   margin-left: 0;
   padding-left: 0;
   margin-top: 14 !important;
     

}

nav a, u {

   text-decoration: none;
   color: black;}

/* Display Dropdowns on Hover */ .menu li:hover > ul {

   display: block;
  

}

/* Fisrt Tier Dropdown */ nav ul ul li {

   min-width:170px;
   float:none;
   position: relative;

}

.menu > ul > li > ul > li{

 background-color: rgba(255,255,255,0.7);

} /*-------------------------Media Rules-------------------------*/ @media (max-width: 970px) {

       .menu > ul > li{
           padding-left: 1px;
       padding-right: 1px;}

}

@media (max-width: 890px) {

       .menu > ul {
       padding-right: 0;}

}

@media (max-width: 800px) {

       .menu > ul > li{
       padding-left: 0;
       padding-right: 0;
       margin-left: 0;
       margin-right: 0;}

       .logo > img {
       width: 120px;}
           .menu > ul {
       padding-left: 5;}

}

@media (max-width: 640px) {

       .logo > img {
       width: 85px;}
       
       .menu > ul {
       margin-left: 65;}

}

@media (min-width: 585px) {

   .menu li ul {
   position: absolute;
   margin-top: 1px;
   left: -1px;
   right: -1px;
 }
   
 .menu li li {
   margin: -1px 0 0 0;
   box-sizing: border-box;
   width: 100%;
 }
   
   

} @media (max-width: 584px) {

   .menu{
       max-height: 50;
   }
   
   .menu > ul > li {
   visibility: hidden;
   display: inline-block;
   padding: 0.1em 0.1em;
   border: none;

}

   .logo > img {
       width: 65px;

}

   .artemisininGIF img {
   margin-top: -60px;

}

   .menu > ul {
   max-height: 0;
   margin: 5.7em 3em 1em 3em;
   background-color: rgba(255,255,255,0.85);

}

   .menu .navBarDropdown {
   display: block;

}

   #navBarCheckbox:checked + .menu > ul {
   max-height: 500px;

}

   #navBarCheckbox:checked + .menu > ul > li {
   visibility: visible;

} }

/*-------------------------Dropdown-------------------------*/ .navBarCheckbox {

 display: none;

} .navBarDropdown {

 display: none;
 cursor: pointer;
 position: relative;
 font-size: 45px;
 padding: .5em 0;
 height: 0;
 width: 1.66666667em;
 border-top: 0.13333333em solid;

} .navBarDropdown:before, .navBarDropdown:after {

 position: absolute;
 left: 0;
 right: 0;
 content: ' ';
 border-top: 0.13333333em solid;

} .navBarDropdown:before {

 top: 0.37777778em;

} .navBarDropdown:after {

 top: 0.88888889em;

} .menu {

 position: fixed;
 top: 0;
 left: 0;
 right: 0;

} .menu .navBarDropdown {

 position: absolute;
 font-size: 1.2em;
 top: 0.7em;
 right: 12px;
 z-index: 10;

} /*-------------------------Animations-------------------------*/ .logo {

   position: fixed;
   left: 8px;
   top: 8px;
   z-index: 111;

}

@-moz-keyframes logoAnimation {

   0% {left: 44%;
       top: 42%;
       transform: scale(6.5);}

   80%{left: 44%;
       top: 42%;
       transform: scale(6);}
   
   100%{left: 8px;
       top: 8px;}

}

@keyframes logoAnimation {

   0% {left: 44%;
       top: 42%;
       transform: scale(5.5);}

   80%{left: 44%;
       top: 42%;
       transform: scale(5);}
   
   100%{left: 8px;
       top: 8px;}

}

.logoAnimation { -webkit-animation:logoAnimation ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:logoAnimation ease-in 1; animation:logoAnimation ease-in 1;

-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;

-webkit-animation-duration:2s; -moz-animation-duration:2s; animation-duration:2s;

   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   animation-delay: 0s;
   
   -webkit-transition: width 2s, height 4s; /* Safari */
   transition: width 2s, height 4s;

}

/*-------------------------NavBar-------------------------*/

/*-------------------------FadeIn-------------------------*/ @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;

-webkit-animation-duration:2s; -moz-animation-duration:2s; animation-duration:2s;

   -webkit-animation-delay: 1.5s;
   -moz-animation-delay: 1.5s;
   animation-delay: 1.5s;

} /*-------------------------FadeIn-------------------------*/

.standardMargin {

   margin-left: 10%;
   margin-right: 10%;

}

.leftSeparator img {

   float:left;
   width:50%;
   opacity: 0.4;
   filter: alpha(opacity=40); /* For IE8 and earlier */
   margin-top: 0px;
   margin-left: auto;
   margin-right: 100%;

}

.rightSeparator img {

   float:right;
   width:70%;
   opacity: 0.4;
   filter: alpha(opacity=40); /* For IE8 and earlier */
   margin-right: -5%;

}

.artemisininGIF {

   position: relative;
   width:100%;
   height: auto;
   text-align: center;
   margin-top: 130px;

}

.artemisininGIF img {

   display: inline-block;
   vertical-align: middle;
   min-width: 350px;

}