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

(Created page with "html { overflow-y: scroll; } #logo { float:left; position:absolute; width:30px; height:30px; top:130px; left:0px; } #path { /*stroke-dasharray: 5000; stroke-dashoffset: 5000; st...")
 
Line 1: Line 1:
 
html {
 
html {
 
overflow-y: scroll;
 
overflow-y: scroll;
−
}
 
−
#logo {
 
−
float:left;
 
−
position:absolute;
 
−
width:30px;
 
−
height:30px;
 
−
top:130px;
 
−
left:0px;
 
−
}
 
−
#path {
 
−
/*stroke-dasharray: 5000;
 
−
stroke-dashoffset: 5000;
 
−
stroke-linecap: round;
 
−
-webkit-transition: stroke-dashoffset 0.6s;*/
 
 
}
 
}
 
/* PAGE LAYOUT */
 
/* PAGE LAYOUT */
Line 41: Line 27:
  
 
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
/* Creates a container that will wrap all of the content inside your wiki pages. */
−
                         #globalWrapper, #content {
+
                          
−
                          float: none;
+
−
          margin: 0 auto;   
+
−
                          width: 1100px;
+
−
                        }
+
−
                        #mainContainer { 
+
−
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;
+
−
}
+
−
 
+
−
/* 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;
+
−
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%;
+
−
background: #fff;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
/* min-height:700px;*/
+
−
z-index:1 !important;
+
−
}
+
−
#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;
+
−
}
+
 
#socialmedia{
 
#socialmedia{
 
float:right;
 
float:right;
Line 140: Line 49:
  
 
/*Change the styling of text for everything inside main container*/
 
/*Change the styling of text for everything inside main container*/
−
#mainContainer p {
+
−
font-size: 15px;
+
−
color: #000000;
+
−
padding-top: 5px;
+
−
padding-bottom: 5px;
+
−
text-align:justify;
+
−
}
+
 
#contentContainer *{
 
#contentContainer *{
 
z-index:1;
 
z-index:1;
Line 160: Line 63:
 
margin-top:10px;
 
margin-top:10px;
 
}
 
}
−
#contentContainer h1 {
+
−
        text-align: center;
+
−
border-bottom: none;
+
−
color:#00964B;
+
−
font-size:36px;
+
−
font-weight: bold;
+
−
}
+
−
#contentContainer h2 {font-size:24px;}
+
−
#contentContainer h3 {font-size:20px;}
+
 
#contentContainer h2, h3, h4, h5, h6 {  
 
#contentContainer h2, h3, h4, h5, h6 {  
 
color:#000000;
 
color:#000000;
Line 176: Line 71:
  
 
/*Style of the links - links are different inside the menu */
 
/*Style of the links - links are different inside the menu */
−
#contentContainer a {
+
−
font-weight: bold;
+
−
color: #00964B;
+
−
/*display:block;*/
+
−
width:50px;
+
−
}
+
  
 
  /* Styling links on hover- links are different inside the menu */
 
  /* Styling links on hover- links are different inside the menu */
Line 235: Line 125:
  
 
/*Styling for the links in the menu */
 
/*Styling for the links in the menu */
−
#menuContainer a {
+
−
color: #565656;
+
−
color:white;
+
−
text-decoration:none;
+
−
font-weight: bold;
+
−
font-size: 16px;
+
−
display:block;
+
−
cursor: pointer; cursor: hand;
+
−
}
+
  
 
/* Sets the style for lists inside menuContainer  */
 
/* Sets the style for lists inside menuContainer  */
−
#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;*/
+
−
}
+
  
 
/*For the menu buttons, changes the color when hovering*/
 
/*For the menu buttons, changes the color when hovering*/

Revision as of 08:24, 14 August 2015

html { overflow-y: scroll; } /* PAGE LAYOUT */

/* Change Background color*/ body { 

                          background: transparent;

background:transparent url("Green_dots.png"); 

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

background: -moz-linear-gradient(top,rgba(78,78,78,0.7),rgba(78,78,78,0.7)),url("Green_dots.png"); background: linear-gradient(to bottom,rgba(78,78,78,0.7),rgba(78,78,78,0.7)),url("Green_dots.png"); 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("Green_dots.png");

background: -moz-linear-gradient(top,rgba(56,56,56,1),rgba(56,56,56,1)),url("Green_dots.png"); background: linear-gradient(to bottom,rgba(56,56,56,1),rgba(56,56,56,1)),url("Green_dots.png"); 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%; width:93%; } 

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

   			 }