Difference between revisions of "Template:ETH Zurich/template.css"

m
 
(886 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<html>
 +
<style>
 +
/* TAGS */
 
html {
 
html {
−
overflow-y: scroll;
+
    overflow-y: scroll;
 +
    min-height:100%;
 
}
 
}
−
#globalWrapper,#content {
+
body {  
−
width:initial;
+
    zoom:1;
−
float:none;
+
    width:100%;
 +
    background: #383838;
 
}
 
}
 +
body:after {
 +
  content: url(https://static.igem.org/mediawiki/2015/7/76/ETH_babybeacon.png);
 +
  display: none;
 +
}
 +
#bodyContent {
 +
    width: 100%;
 +
}
 +
#globalWrapper {
 +
    background-image: url("https://static.igem.org/mediawiki/2015/d/d8/ETH_Zurich_background.png");
 +
    background-position: 25px 25px;
 +
    background-attachment: fixed;
 +
}
 +
 +
 +
h1#loading {
 +
    border-bottom:none;
 +
    color:white;
 +
}
 +
 +
/* IDs */
 +
#content {
 +
    font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
    width:100%;
 +
}
 +
 +
#topContainer {
 +
    height: 100px;
 +
    display:table-header-group;
 +
}
 +
@media screen and (max-device-width:480px) {
 +
#topContainer {
 +
    height:314px;
 +
}
 +
}
 +
#mobileMenu {
 +
    display:none;
 +
}
 +
 +
#sideFiller {
 +
    width:20%;
 +
    height:100px;
 +
    float:left;
 +
}
 +
@media screen and (max-device-width:480px) {
 +
#sideFiller {
 +
    width:80%;
 +
    height:auto;
 +
}
 +
}
 +
 +
#sidemenuContainer {
 +
    margin-right:1%;
 +
    width:19%;
 +
    float:left;
 +
    display:table-cell;
 +
    position:absolute;
 +
    top:103px;
 +
    bottom:0px;
 +
/*    height:100%;*/
 +
/*    position:relative;*/
 +
/*    overflow:auto;*/
 +
}
 +
 
#sidemenu {
 
#sidemenu {
−
padding:20px;
+
    padding:11%;
−
margin-left:auto;
+
    height:auto;
−
margin-right:auto;
+
    background:white;
−
height:auto;
+
    border: 1px solid black;
−
width:10%;
+
    border-radius: 4px;
−
float:left;
+
    width: 77%;
−
background:white;
+
    position:absolute;
−
position:fixed;
+
−
z-index:-1;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
 
}
 
}
−
/* PAGE LAYOUT */
 
  
−
/* Change Background color*/
+
#mainContainer {
−
body {  
+
    width:80%;
−
                          background: transparent;
+
    max-width: 1020px;
−
background:transparent url("https://static.igem.org/mediawiki/2015/b/b6/Green_dots.png");
+
    margin:auto;
−
                          background: -webkit-linear-gradient(top,rgba(78,78,78,0.7),rgba(78,78,78,0.7)),url("https://static.igem.org/mediawiki/2015/b/b6/Green_dots.png");
+
    position:relative;
−
background: -moz-linear-gradient(top,rgba(78,78,78,0.7),rgba(78,78,78,0.7)),url("https://static.igem.org/mediawiki/2015/b/b6/Green_dots.png");
+
    min-height:400px;
−
background: linear-gradient(to bottom,rgba(78,78,78,0.7),rgba(78,78,78,0.7)),url("https://static.igem.org/mediawiki/2015/b/b6/Green_dots.png");
+
    height:100%;
−
filter: progid:DXImageTransform.Microsoft.Gradient(
+
    overflow-y: visible;
−
            StartColorStr='#b24e4e4e', EndColorStr='#b24e4e4e', GradientType=0);
+
    display:table;
−
                          background: -webkit-linear-gradient(top,rgba(56,56,56,1),rgba(56,56,56,1)),url("https://static.igem.org/mediawiki/2015/b/b6/Green_dots.png");
+
}
−
background: -moz-linear-gradient(top,rgba(56,56,56,1),rgba(56,56,56,1)),url("https://static.igem.org/mediawiki/2015/b/b6/Green_dots.png");
+
−
background: linear-gradient(to bottom,rgba(56,56,56,1),rgba(56,56,56,1)),url("https://static.igem.org/mediawiki/2015/b/b6/Green_dots.png");
+
−
filter: progid:DXImageTransform.Microsoft.Gradient(
+
−
            StartColorStr='#ff383838', EndColorStr='#ff383838', GradientType=0);
+
−
zoom:1;
+
−
/**/
+
  
−
}
+
#menuButton {
−
#top_menu_14 {
+
    padding:30px;
−
border-bottom: 2px solid #383838 !important;
+
    margin:85px 30px 0px 0px;
 +
    background:#383838;
 +
    display:none;
 +
    width:90px;
 +
    height:90px;
 +
    float:right;
 +
}
 +
@media screen and (max-device-width: 480px) {
 +
#menuButton {
 +
    display:block;
 +
}
 +
}
 +
#menuButton img {
 +
    width:100%;
 
}
 
}
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
#footerContainer {
−
                       
+
    width:80%;
−
#socialmedia{
+
    max-width: 1020px;
−
float:right;
+
    text-align:center;
−
position: relative;
+
    background-color: #C0C0C0;
−
right:2%;
+
/*   padding: 10px;*/
−
/* top: 15%;*/
+
    border: 1px solid black;
 +
    border-radius: 4px;
 +
    margin:auto;
 +
/*   display:table-footer-group;*/
 
}
 
}
−
.mediabutton{
+
 
−
height:48px;
+
#socialmedia {
−
width:48px;
+
    width:100%;
−
padding-top: 3px;
+
    margin:auto;
−
padding-bottom: 3px;
+
/*   text-align:center;*/
−
/*display:inline-block;*/
+
    float:right;
−
/*border: 1px solid red;*/
+
−
border-radius: 50%;
+
 
}
 
}
−
.mediabutton a{
+
 
 +
.expContainer {
 +
    padding: 4%;
 +
    background: #fff;
 +
    border-radius: 4px;
 +
    float:right;
 +
    clear:right;
 +
    display:table-cell;
 +
    width:72%;
 +
    margin:0 0 1% 0;
 
}
 
}
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
@media screen and (max-width:1100px) {
 +
#sidemenuContainer {
 +
    display:none;
 +
}
 +
.expContainer {
 +
    width:92%;
 +
}
 +
}
 +
@media print {
 +
#sidemenuContainer {
 +
    display:none;
 +
}
 +
.expContainer {
 +
    width:92%;
 +
}
 +
}
  
−
/*Change the styling of text for everything inside main container*/
+
@media screen and (max-device-width:480px) {
−
+
#mainMenu {
−
#contentContainer *{
+
    display:none;
−
z-index:1;
+
}
−
/*margin-left:2.5%;*/
+
}
−
};
+
−
/*This changes the color and font family */
+
  
−
#contentContainer h1, h2, h3, h4, h5, h6 {  
+
 
−
color: #000000;
+
/* CLASSES */
−
border-bottom: none;
+
 
−
font-weight: bold;
+
.mediabutton {
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
    width:48px;
−
margin-top:10px;
+
    margin:3px;
−
}
+
    border-radius: 50%;
−
+
    display:inline-block;
−
#contentContainer h2, h3, h4, h5, h6 {  
+
}
−
color:#000000;
+
@media screen and (max-device-width:480px) {
−
border-bottom: none;
+
.mediabutton {
−
font-weight:bold;
+
    width:120px;
 +
    height:120px;
 +
}
 
}
 
}
  
−
/*Style of the links - links are different inside the menu */
+
/*Clear class for all the pages, adds spacing too*/
−
+
.clear{
 +
    clear:both;
 +
    height: 10px;
 +
}
  
−
  /* Styling links on hover- links are different inside the menu */
+
/* highlight box for special messages */
−
#contentContainer a:hover {  
+
.highlightBox {
−
color: #59bf92;
+
    width:80%;
−
}
+
    margin:auto;
 +
    margin-bottom: 15px;
 +
    margin-top: 15px;
 +
    padding: 15px;
 +
    padding-top: 5px;
 +
    border:1px solid #383838;
 +
    border-radius:4px;
 +
}
  
−
/*Change the styling of tables */
+
.info {
−
        #contentContainer table {
+
    max-height:70px;
−
    border: 1px solid #565656;
+
    overflow:hidden;
−
    border-collapse: collapse;
+
    position:relative;
−
/*   width: 90%;*/
+
    margin-bottom: 20px;
−
    margin: auto;
+
/*   padding-bottom:35px;*/
−
/*   margin-bottom: 15px;
+
}
−
    margin-top: 15px;
+
.open-info {
−
    margin-right: 10px;
+
    max-height:99999px !important;
−
    margin-left: 10px;*/
+
    padding-bottom:35px;
−
    }
+
}
 +
/*.closed-info {
 +
    height:70px;
 +
    max-height:70px !important;
 +
    padding-bottom:auto;
 +
}*/
 +
.expander {
 +
    position:absolute;
 +
    bottom:0px;
 +
    width:100% !important;
 +
    display:inline-block;
 +
    padding:5px 0px 5px 0;
 +
    text-align:center;
 +
    background: linear-gradient(rgba(192,192,192,0), #ccc);
 +
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cccccc, endColorstr=#ffcccccc);
 +
    border-radius: 4px;
 +
    outline : none;
 +
}
  
−
/*Change the styling of table cells*/
+
/* SIDEMENU STYLES */
−
    #contentContainer  td {
+
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
−
/*Change the styling of table headers */
+
#mainContainer #sidemenu ul {
−
    #contentContainer th {
+
    margin: 0em 0em 0em 1em;
−
    background-color: #93c6ac;
+
}
−
    padding: 10px;
+
#mainContainer #sidemenu ul ul {
−
    border: 1px solid #565656;
+
    margin: 0 0 0 0.5em;
−
    border-collapse: collapse;
+
}
−
    vertical-align: text-top;
+
#mainContainer #sidemenu ul ul ul {
−
    }
+
    margin: 0 0 0 0.8em;
−
    #contentContainer img {
+
}
−
    display:block;
+
#mainContainer #sidemenu ul li {
−
    margin:auto;
+
    list-style: none;
−
    text-align:center;
+
    color: #00964B;
−
    }
+
    margin-left:-1em;
−
#contentContainer p {
+
    font-size:17px;
−
margin-left:1%;
+
}
−
margin-right:1%;
+
#mainContainer #sidemenu ul li a {
−
/*width:94%;*/
+
    font-weight: bold;
 +
}
 +
#mainContainer #sidemenu ul ul li {
 +
    list-style: initial;
 +
    color: #000000;
 +
    margin:0;
 +
    font-size:15px;
 +
}
 +
#mainContainer #sidemenu ul ul li a {
 +
    font-weight:normal;
 
}
 
}
−
    #contentContainer p.caption {
 
−
    display:block;
 
−
    margin:auto;
 
−
    text-align:center;
 
−
    }
 
  
 +
#mainContainer #sidemenu a {
 +
    color: #00964B;
 +
    font-weight: normal;
 +
}
  
−
/*MENU STYLING */
+
#mainContainer #sidemenu a:hover,#mainContainer #sidemenu a.current {
 +
    color: #006EB4;
 +
}
  
−
/*Styling for the links in the menu */
 
−
 
  
−
/* Sets the style for lists inside menuContainer  */
+
/* MAIN STYLE */
−
+
#mainContainer p {
 +
    font-size: 15px;
 +
    padding-top: 5px;
 +
    padding-bottom: 5px;
 +
    text-align:justify;
 +
    margin:0 1% 0 1%;
 +
}
 +
#mainContainer p.caption {
 +
    display:block;
 +
    margin:auto;
 +
    text-align:center;
 +
}
  
−
/*For the menu buttons, changes the color when hovering*/
+
#mainContainer h1,#mainContainer h2,#mainContainer h3,#mainContainer h4,#mainContainer h5,#mainContainer h6 {
−
#menuContainer li:hover {
+
    color: #000000;
−
color: #FFF;
+
    border-bottom: none;
−
background-color: #00964B;
+
    font-weight: bold;
−
/*box-shadow: 5px 5px 5px 0px #444444;*/
+
    line-height:normal;
−
z-index:1000;
+
}
−
}
+
#mainContainer h1 p,#mainContainer h2 p,#mainContainer h3 p,#mainContainer h4 p,#mainContainer h5 p,#mainContainer h6 p {
−
#menuContainer li:hover a{
+
    font-weight:normal;
−
color:  #FFF;
+
    text-align:left;
−
z-index:1000;
+
}
−
+
−
}
+
−
#menuContainer li.sub:hover {
+
−
border-radius: 20px 20px 0px 0px;
+
−
/*filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#00964B', EndColorStr='#00B058', GradientType=0);
+
−
background: linear-gradient(#00964B,#00B058);*/
+
−
/* box-shadow: 5px 7px 5px 0px #444444;*/
+
−
z-index:1000;
+
  
−
}
+
#mainContainer h1 {
 +
    text-align: center;
 +
    color:#00964B;
 +
    font-size:36px;
 +
    padding-top:0px;
 +
    clear:both;
 +
/*    margin-bottom: 0px;*/
 +
}
  
−
/*Submenus are not displayed as default*/
+
#mainContainer h2 {
−
#menuContainer li ul {
+
    font-size:24px;
−
/* opacity: 0;
+
    padding-top: 40px;
−
transition:opacity 10ms;
+
    border-bottom:1px solid black;
−
-webkit-transition: opacity 10ms;
+
    clear:both;
−
-o-transition: opacity 10ms;
+
}
−
-moz-transition: opacity 10ms;
+
−
-ms-transition: opacity 10ms;*/
+
−
visibility:hidden;
+
−
box-shadow: 5px 5px 5px 0px #444444;
+
−
margin-top:8px;
+
−
border-radius: 0px 0px 20px 20px;
+
−
overflow: hidden;
+
−
max-height:0;
+
−
display:inherit;
+
−
transition: max-height 0ms;
+
−
-webkit-transition: max-height 0ms;
+
−
-o-transition: max-height 0ms;
+
−
-moz-transition: max-height 0ms;
+
−
-ms-transition: max-height 0ms;
+
−
z-index:10;
+
−
width:148px;
+
−
}
+
  
−
/*Submenus are displayed when hovering the menu button */
+
#mainContainer h2:first-child {
−
#menuContainer li:hover ul {
+
    padding-top: 0px;
−
background-color: #00B058;
+
}
−
max-height:700px;
+
−
/* opacity: 0.95;*/
+
−
visibility:visible;
+
−
position: relative;
+
−
float:left;
+
−
transition: max-height 0ms;
+
−
-webkit-transition: max-height 0ms;
+
−
-o-transition: max-height 0ms;
+
−
-moz-transition: max-height 0ms;
+
−
-ms-transition: max-height 0ms;
+
−
z-index:1000;
+
−
}
+
  
−
/*Style the submenu buttons*/
+
#mainContainer h3 {
−
#menuContainer li ul li{
+
    font-size:20px;
−
background-color: #00B058;  
+
    clear:both;
−
background-clip: border-box;
+
−
color: #565656;
+
−
border-radius: 0px;
+
−
z-index:10;
+
−
                                text-transform:capitalize;
+
−
cursor: pointer; cursor: hand;
+
−
}
+
−
#footerContainer img {
+
−
padding:10px;
+
−
max-width:200px;
+
−
max-height:70px;
+
 
}
 
}
−
#footerContainer p {
+
 
−
text-align:center;
+
#mainContainer li,td,th {
 +
    font-size:15px;
 
}
 
}
  
−
img#runnerImg {
+
.expContainer a {  
−
        animation: run 10s linear;
+
    font-weight: bold;
−
                animation-fill-mode: forwards;
+
    color: #00964B;
−
                position:relative;
+
−
                float:left;
+
−
                left:50px;
+
 
}
 
}
−
                                        @keyframes run {
 
−
                                                from {left:0;}
 
−
                                                to {left:100%;display:none;}
 
−
                                        }
 
  
−
/*CLASSES */
+
.expContainer a:hover {
 +
    color: #59bf92;
 +
}
  
−
/*Clear class for all the pages, adds spacing too*/
+
.expContainer ul {
−
.clear{
+
    margin: .3em 0 0 2.5em;
−
clear:both;
+
}
−
height: 10px;
+
−
}
+
  
 +
/*Change the styling of tables */
 +
#mainContainer table {
 +
    border: 3px solid #565656;
 +
    border-collapse: collapse;
 +
    margin: auto;
 +
    margin-bottom:20px;
 +
}
  
−
/* highlight box for special messages */
+
/*Change the styling of table cells*/
−
    .highlightBox {
+
#mainContainer td,th {
−
        width:500px;
+
    padding: 10px;
−
        margin:auto;
+
    vertical-align:middle;
−
        background-color: #E8E8E9;
+
     border: 3px solid #565656;
−
margin-bottom: 15px;
+
    max-width:100%;
−
margin-top: 15px;
+
}
−
padding: 15px;
+
−
padding-top: 5px;
+
−
    }
+
−
/*#globalWrapper, #content {
+
−
                          float: none;
+
−
          margin: 0 auto;      
+
−
                          width: 1100px;
+
−
                        }*/
+
−
                        #mainContainer { 
+
−
width:70%;
+
−
max-width: 1100px;
+
−
overflow:hidden;
+
  
−
margin-left:auto;
+
/*Change the styling of table headers */
−
margin-right:auto;
+
#mainContainer th {
 +
    background-color: #93c6ac;
 +
}
  
−
margin-bottom: 10px;
+
#mainContainer .imgBox {
−
background-color: #fff;
+
    padding:3px;
−
/* border-bottom: 14px solid #565656;
+
    height:auto;
−
border-right: 2px solid #565656;
+
    border: 1px solid #ccc;
−
border-left: 2px solid #565656;
+
    font-family: "Trebuchet MS", Helvetica, sans-serif;
−
border-top: 2px solid #565656;*/
+
    margin: 20px 0 20px 0;
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
    background-color:#f9f9f9;
−
min-height:100%;
+
}
−
position:relative;
+
#mainContainer .imgBox a {
−
padding-bottom:310px;
+
    display:block;
−
background:transparent;
+
}
−
z-index:100;
+
#mainContainer .imgBox > :not(p) {
−
}
+
    background-color:#fff;
−
#topContainer{
+
}
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
#mainContainer .imgBox #mag {
 +
    width:15px;
 +
    height:11px;
 +
    float:right;
 +
    margin: 3px;
 +
}
 +
#mainContainer .imgBox #mag img {
 +
    border:none !important;
 +
}
 +
#mainContainer .imgBox p {
 +
    font-size: 10pt;
 +
    padding:3px;
 +
    margin: 0px;
 +
    text-align:left;
 +
}
 +
 
 +
#mainContainer .imgBox object,.imgBox img {
 +
    width:100%;
 +
    border: 1px solid #ccc;
 +
}
 +
#mainContainer .imgBox > table, #mainContainer .imgBox > table td,#mainContainer .imgBox > table th {
 +
    border: 0;
 +
}
 +
#mainContainer .imgBox > table table, #mainContainer .imgBox > table table td, #mainContainer .imgBox > table table th {
 +
    border: 3px solid black;
 
}
 
}
  
−
/* Creates the container for the menu */
 
−
#menuContainer  {
 
−
/* border-top: 10px solid #565656;*/
 
−
background-color: #fff;
 
−
text-align: center;
 
−
padding-top:10px;
 
−
padding-bottom:10px;
 
−
width: 1100px;
 
−
margin:auto;
 
−
z-index: 10;
 
−
                          background:transparent;
 
−
}
 
  
−
/* Creates the container for the content */
+
.expContainer img,.expContainer object.svg {
−
#contentContainer {
+
    display:block;
−
/* padding-top:20px;
+
    margin:auto;
−
padding-bottom:20px;
+
    text-align:center;
−
padding-left:20px;
+
}
−
padding-right:20px;
+
.expContainer ul {
−
padding:5%;
+
    list-style: square;
−
margin-bottom: 20px;
+
}
−
margin-left:auto;
+
a.expander img {
−
margin-right:auto;
+
    background: url("https://static.igem.org/mediawiki/2015/b/b1/Updownarrows.png") no-repeat;
−
width: 95%;*/
+
    outline : none;
−
border: 4em solid white;
+
    height:100%;
−
background: #fff;
+
    background-size:100%;
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
/*    background-position: 0 100%;*/
−
height:auto;
+
}
−
z-index:1 !important;
+
.open-info a.expander img {
−
}
+
    background-position: 0 100%;
−
#contentContainer:after{
+
}
−
background:#fff;
+
/*.closed-info a.expander img {
 +
    background-position: 0 0;
 +
}*/
 +
.expContainer b.TODO {
 +
    color: #F660AB;
 
}
 
}
  
−
/*Set up height place holder for the banner*/
+
@media screen and (max-device-width: 480px) {
−
#bannerContainer {
+
    a.expander {
−
height:200px;
+
        height: 10em;
−
margin:auto;
+
    }
−
text-align:center;
+
    .info {
−
color: #24B694;
+
        padding-bottom:20em;
−
                                width: 1100px;
+
    }
−
                          background:transparent;
+
    .open-info {
−
}
+
        padding-bottom:20em;
−
#footerContainer {
+
    }
−
                                min-height: 1px;
+
    .info {
−
                                width: 1100px;
+
        max-height:10em;
−
                                margin: auto;
+
    }
−
                                text-align:center;
+
/*    .closed-info {
−
background-color: #E8E8E9;
+
        max-height:10em;
−
padding: 10px;
+
        height:10em;
−
position:absolute;
+
    }*/
−
bottom:0;
+
}
−
display:block;
+
−
}
+
  
  
−
#mainContainer p {
 
−
font-size: 15px;
 
−
color: #000000;
 
−
padding-top: 5px;
 
−
padding-bottom: 5px;
 
−
text-align:justify;
 
−
}
 
  
−
#contentContainer li {
+
 
−
font-size:15px;
+
 
 +
 
 +
/* MENU STYLE */
 +
 
 +
#sideFiller img {
 +
    width:95%;
 
}
 
}
  
−
#contentContainer td,th {
+
.hideMenu a {
−
font-size:15px;
+
    color: white;
 +
    text-decoration:none;
 +
    display:block;
 +
    cursor: pointer;
 +
    cursor: hand;
 +
    outline : none;
 
}
 
}
  
  
−
#contentContainer h1 {
+
.hideMenu {
−
        text-align: center;
+
    list-style: none;
−
border-bottom: none;
+
    font-weight: bold;
−
color:#00964B;
+
    cursor: pointer;
−
font-size:36px;
+
    outline : none;
−
font-weight: bold;
+
    -moz-user-select:-moz-none;
−
}
+
    -moz-user-select:none;
−
#contentContainer h2 {font-size:24px;border-bottom:1px solid black;}
+
      -o-user-select:none;
−
#contentContainer h3 {font-size:20px;}
+
  -khtml-user-select:none;
 +
-webkit-user-select:none;
 +
    -ms-user-select:none;
 +
        user-select:none;
 +
    text-align: center;
 +
    height: 100px;
 +
    width:80%;
 +
    float:left;
 +
    position:relative;
 +
    margin: 0px;
 +
    -webkit-transition: z-index 0s;
 +
      -moz-transition: z-index 0s;
 +
        -ms-transition: z-index 0s;
 +
        -o-transition: z-index 0s;
 +
            transition: z-index 0s;
 +
    -webkit-transition-delay: 1s;
 +
      -moz-transition-delay: 1s;
 +
        -ms-transition-delay: 1s;
 +
        -o-transition-delay: 1s;
 +
            transition-delay: 1s;
 +
}
  
−
#contentContainer a {  
+
#menuContainer .hideMenu {
−
font-weight: bold;
+
    margin:0.3em 0 0 0;
−
color: #00964B;
+
}
−
/*display:block;*/
+
−
width:50px;
+
−
}
+
  
−
#menuContainer a {
+
.hideMenu li {
−
color: #565656;
+
    color: #fff;
−
color:white;
+
    text-transform:uppercase;
−
text-decoration:none;
+
    cursor: pointer;
−
font-weight: bold;
+
    margin:auto;
−
font-size: 16px;
+
    outline : none;
−
display:block;
+
/*    width:14.2857%;*/
−
cursor: pointer; cursor: hand;
+
    width:16.66666666%;
−
}
+
    float:left;
 +
    z-index:10;
 +
    padding:10px 0 10px 0;
 +
    border-radius: 20px;
 +
    line-height:40px;
 +
}
  
−
#menuContainer ul {  
+
.hideMenu li ul {
−
list-style: none;
+
    overflow:hidden;
−
margin-left:auto;
+
    border-radius: 0px 0px 20px 20px;
−
margin-right:auto;
+
    background: #00B058;
−
                                display:inline-block;
+
    display:none;
−
font-weight: bold;
+
    position:relative;
−
                                z-index: 10;
+
    margin: 10px 0 0 0;
−
width:1040px;
+
    z-index:100;
−
cursor: pointer; cursor: hand;
+
    list-style: none;
−
}
+
    width:100%;
−
#menuContainer li {
+
}
−
                                width:148px;
+
−
                                float:left; 
+
−
                                text-transform:uppercase;
+
−
cursor: pointer; cursor: hand;
+
−
}
+
  
−
/*Styles the list items to become menu buttons */
+
 
−
#menuContainer ul li {  
+
 
−
text-align: center;
+
 
−
height:30px;
+
.hideMenu li.sub {
−
padding-top:10px;
+
    height:60px;
−
position:relative;
+
}
−
border-radius: 20px;
+
.hideMenu li.ignoreSwitch {
−
cursor: pointer; cursor: hand;
+
    line-height:normal;
−
/*behavior: url("https://2015.igem.org/Template:ETH_Zurich/border-radius.htc?action=raw&ctype=text/javascript");
+
}
−
zoom:1;*/
+
.hideMenu li:hover {
−
}
+
    color:  #FFF;
 +
    background-color: #00964B;
 +
    cursor: pointer;
 +
}
 +
.hideMenu li.sub:hover {
 +
    border-radius: 20px 20px 0px 0px;
 +
    background:      -o-linear-gradient(top,#00964B,#19b768);
 +
    background: -webkit-linear-gradient(top,#00964B,#19b768);
 +
    background:    -moz-linear-gradient(top,#00964B,#19b768);
 +
    background:        linear-gradient(top,#00964B,#19b768);
 +
}
 +
.hideMenu li:hover a{
 +
    color:  #FFF;
 +
}
 +
.hideMenu li:hover ul {
 +
    display:block;
 +
}
 +
/*Style the submenu buttons*/
 +
.hideMenu li ul li {
 +
    text-transform:capitalize;
 +
    line-height:30px;
 +
    border-radius: 0px;
 +
    color: #383838;
 +
    background-clip: border-box;
 +
    padding:5px 0 5px 0;
 +
    width:100%;
 +
}
 +
 
 +
 
 +
@media only screen and (max-device-width: 480px) {
 +
.hideMenu {
 +
    text-align: left;
 +
    height:auto;
 +
    float:none;
 +
    margin: .3em 0 0 2em;
 +
    background-color:#383838;
 +
    position:absolute;
 +
    width:100%;
 +
}
 +
#menuContainer .hideMenu {
 +
    display:none;
 +
}
 +
 
 +
.hideMenu li {
 +
    font-size:70px;
 +
    width:auto;
 +
    line-height:120px;
 +
    float:left;
 +
    display:inline-block;
 +
    clear:both;
 +
    padding: 50px 0 50px 0;
 +
}
 +
.hideMenu li:hover {
 +
    background:transparent;
 +
}
 +
.hideMenu li.ignoreSwitch br {
 +
    display:none;
 +
}
 +
 
 +
.hideMenu li.sub {
 +
    height:auto;
 +
    line-height:60px;
 +
}
 +
.hideMenu li.sub:hover {
 +
    border-radius: 20px 20px 0px 0px;
 +
    background: transparent;
 +
}
 +
.hideMenu li ul {
 +
    margin: 0 0 0 20%;
 +
    background:transparent;
 +
    float:none;
 +
    width:100%;
 +
    display:none;
 +
}
 +
.hideMenu li:hover ul {
 +
    display:none;
 +
}
 +
.hideMenu li ul li {
 +
    line-height:120px;
 +
    color: #fff;
 +
}
 +
.hideMenu li ul li:hover {
 +
    line-height:120px;
 +
    color: #fff;
 +
    background-color: #00964B;
 +
}
 +
}
 +
 
 +
 
 +
/* FOOTER STYLE */
 +
#footerContainer img {
 +
    padding:10px;
 +
    max-width:200px;
 +
    max-height:70px;
 +
}
 +
#footerContainer h2 {
 +
    text-align:center;
 +
    border: none;
 +
    color: black;
 +
    overflow: initial;
 +
}
 +
 
 +
#lives {
 +
    position:fixed;
 +
    left:5px;
 +
    top:16px;
 +
    display:none;
 +
}
 +
#runner {
 +
    position:fixed;
 +
    left:5px;
 +
    bottom:0px;
 +
    display:none;
 +
    width:100%;
 +
    z-index:100;
 +
}
 +
#sandbox {
 +
}
 +
 
 +
img#runnerImg {
 +
    animation: run 10s linear;
 +
    animation-fill-mode: forwards;
 +
    position:relative;
 +
    float:left;
 +
    left:50px;
 +
}
 +
@keyframes run {
 +
    from {left:0;}
 +
    to {left:100%;display:none;}
 +
}
 +
 
 +
/* CHANGE MEDIAWIKI STUFF */
 +
div.thumb div div.thumbcaption {
 +
    font-size: 10pt;
 +
}
 +
</style>
 +
</html>

Latest revision as of 23:58, 18 September 2015