Difference between revisions of "Template:ETH Zurich/template.css"
m |
m |
||
| Line 5: | Line 5: | ||
width:initial; | width:initial; | ||
float:none; | float:none; | ||
| + | } | ||
| + | #sidemenu { | ||
| + | padding:20px; | ||
| + | margin-left:auto; | ||
| + | margin-right:auto; | ||
| + | height:auto; | ||
| + | width:300px; | ||
| + | float:left; | ||
| + | background:white; | ||
| + | position:fixed; | ||
| + | z-index:-1; | ||
| + | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
} | } | ||
/* PAGE LAYOUT */ | /* PAGE LAYOUT */ | ||
Revision as of 16:50, 16 August 2015
html { overflow-y: scroll; }
- globalWrapper,#content {
width:initial; float:none; }
- sidemenu {
padding:20px; margin-left:auto; margin-right:auto; height:auto; width:300px; 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; /**/
}
- top_menu_14 {
border-bottom: 2px solid #383838 !important; }
/* Creates a container that will wrap all of the content inside your wiki pages. */
- 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;
}
- 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; }
- footerContainer img {
padding:10px; max-width:200px; max-height:70px; }
- 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; }
- 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; }
- 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; }
- mainContainer p {
font-size: 15px; color: #000000; padding-top: 5px; padding-bottom: 5px; text-align:justify; }
- contentContainer li {
font-size:15px; }
- contentContainer td,th {
font-size:15px; }
- contentContainer h1 {
text-align: center; border-bottom: none; color:#00964B; font-size:36px; font-weight: bold; }
- contentContainer h2 {font-size:24px;border-bottom:1px solid black;}
- contentContainer h3 {font-size:20px;}
- contentContainer a {
font-weight: bold; color: #00964B; /*display:block;*/ width:50px; }
- menuContainer a {
color: #565656; color:white; text-decoration:none; font-weight: bold; font-size: 16px; display:block; cursor: pointer; cursor: hand; }
- 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;*/ }