Template:ETH Zurich/template.css

html { overflow-y: scroll; }

1. globalWrapper,#content {

width:initial; float:none; }

1. sidemenu {

padding:20px; margin-left:auto; margin-right:auto; height:auto; width:10%; float:left; background:white; position:fixed; z-index:-1; font-family: "Trebuchet MS", Helvetica, sans-serif; } /* PAGE LAYOUT */

/* Change Background color*/ body {

                          background: transparent;

background:transparent url("");

                          background: -webkit-linear-gradient(top,rgba(78,78,78,0.7),rgba(78,78,78,0.7)),url("");

background: -moz-linear-gradient(top,rgba(78,78,78,0.7),rgba(78,78,78,0.7)),url(""); background: linear-gradient(to bottom,rgba(78,78,78,0.7),rgba(78,78,78,0.7)),url(""); filter: progid:DXImageTransform.Microsoft.Gradient(

           StartColorStr='#b24e4e4e', EndColorStr='#b24e4e4e', GradientType=0);
                          background: -webkit-linear-gradient(top,rgba(56,56,56,1),rgba(56,56,56,1)),url("");

background: -moz-linear-gradient(top,rgba(56,56,56,1),rgba(56,56,56,1)),url(""); background: linear-gradient(to bottom,rgba(56,56,56,1),rgba(56,56,56,1)),url(""); filter: progid:DXImageTransform.Microsoft.Gradient(

           StartColorStr='#ff383838', EndColorStr='#ff383838', GradientType=0);

zoom:1; /**/

}

1. top_menu_14 {

border-bottom: 2px solid #383838 !important; }

/* Creates a container that will wrap all of the content inside your wiki pages. */

1. socialmedia{

float:right; position: relative; right:2%; /* top: 15%;*/ } .mediabutton{ height:48px; width:48px; padding-top: 3px; padding-bottom: 3px; /*display:inline-block;*/ /*border: 1px solid red;*/ border-radius: 50%; } .mediabutton a{ }

/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */

/*Change the styling of text for everything inside main container*/

#contentContainer *{ z-index:1; /*margin-left:2.5%;*/ }; /*This changes the color and font family */

#contentContainer h1, h2, h3, h4, h5, h6 { color: #000000; border-bottom: none; font-weight: bold; font-family: "Trebuchet MS", Helvetica, sans-serif; margin-top:10px; }

#contentContainer h2, h3, h4, h5, h6 { color:#000000; border-bottom: none; font-weight:bold; }

/*Style of the links - links are different inside the menu */

/* Styling links on hover- links are different inside the menu */ #contentContainer a:hover { color: #59bf92; }

/*Change the styling of tables */

   	    		#contentContainer table {
   				border: 1px solid #565656;
   				border-collapse: collapse;

/* width: 90%;*/

   				margin: auto;

/* margin-bottom: 15px;

   				margin-top: 15px;
   				margin-right: 10px;
   				margin-left: 10px;*/
   			}

/*Change the styling of table cells*/

   			#contentContainer  td {
   				padding: 10px;
   				border: 1px solid #565656;
   				border-collapse: collapse;
   				vertical-align: text-top;
   			}

/*Change the styling of table headers */

   			#contentContainer th {
   				background-color: #93c6ac;
   				padding: 10px;
   				border: 1px solid #565656;
   				border-collapse: collapse;
   				vertical-align: text-top;
   			}
   			#contentContainer img {
   				display:block;
   				margin:auto;
   				text-align:center;
   			}

1. contentContainer p {

margin-left:1%; margin-right:1%; /*width:94%;*/ }

   			#contentContainer p.caption {
   				display:block;
   				margin:auto;
   				text-align:center;
   			}

/*MENU STYLING */

/*Styling for the links in the menu */

/* Sets the style for lists inside menuContainer */

/*For the menu buttons, changes the color when hovering*/ #menuContainer li:hover { color: #FFF; background-color: #00964B; /*box-shadow: 5px 5px 5px 0px #444444;*/ z-index:1000; } #menuContainer li:hover a{ color: #FFF; 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;

}

/*Submenus are not displayed as default*/ #menuContainer li ul { /* opacity: 0; transition:opacity 10ms; -webkit-transition: opacity 10ms; -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 */ #menuContainer li:hover ul { 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*/ #menuContainer li ul li{ background-color: #00B058; background-clip: border-box; color: #565656; border-radius: 0px; z-index:10;

                               text-transform:capitalize;

cursor: pointer; cursor: hand; }

1. footerContainer img {

padding:10px; max-width:200px; max-height:70px; }

1. footerContainer p {

text-align:center; }

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;}
                                       }

/*CLASSES */

/*Clear class for all the pages, adds spacing too*/ .clear{ clear:both; height: 10px; }

/* highlight box for special messages */

   			.highlightBox {
   			    	width:500px; 
   			    	margin:auto; 
   			    	background-color: #E8E8E9; 

margin-bottom: 15px; 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; margin-right:auto;

margin-bottom: 10px; background-color: #fff; /* border-bottom: 14px solid #565656; border-right: 2px solid #565656; border-left: 2px solid #565656; border-top: 2px solid #565656;*/ font-family: "Trebuchet MS", Helvetica, sans-serif; min-height:100%; position:relative; padding-bottom:310px; background:transparent; z-index:100; }

1. topContainer{

font-family: "Trebuchet MS", Helvetica, sans-serif; }

/* 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 */ #contentContainer { /* padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px; padding:5%; margin-bottom: 20px; margin-left:auto; margin-right:auto; width: 95%;*/ border: 4em solid white; background: #fff; font-family: "Trebuchet MS", Helvetica, sans-serif; height:auto; z-index:1 !important; }

1. contentContainer:after{

background:#fff; }

/*Set up height place holder for the banner*/ #bannerContainer { height:200px; margin:auto; text-align:center; color: #24B694;

                               width: 1100px;
                          background:transparent;

} #footerContainer {

                               min-height: 1px;
                               width: 1100px;
                               margin: auto;
                               text-align:center;

background-color: #E8E8E9; padding: 10px; position:absolute; bottom:0; display:block; }

1. mainContainer p {

font-size: 15px; color: #000000; padding-top: 5px; padding-bottom: 5px; text-align:justify; }

1. contentContainer li {

font-size:15px; }

1. contentContainer td,th {

font-size:15px; }

1. contentContainer h1 {

text-align: center; border-bottom: none; color:#00964B; font-size:36px; font-weight: bold; }

1. contentContainer h2 {font-size:24px;border-bottom:1px solid black;}
2. contentContainer h3 {font-size:20px;}

1. contentContainer a {

font-weight: bold; color: #00964B; /*display:block;*/ width:50px; }

1. menuContainer a {

color: #565656; color:white; text-decoration:none; font-weight: bold; font-size: 16px; display:block; cursor: pointer; cursor: hand; }

1. menuContainer ul {

list-style: none; margin-left:auto; margin-right:auto;

                               display:inline-block;

font-weight: bold;

                               z-index: 10;

width:1040px; cursor: pointer; cursor: hand; } #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; padding-top:10px; position:relative; border-radius: 20px; cursor: pointer; cursor: hand; /*behavior: url("https://2015.igem.org/Template:ETH_Zurich/border-radius.htc?action=raw&ctype=text/javascript"); zoom:1;*/ }