"
Team:TU-Eindhoven/Style
From 2014.igem.org
(Difference between revisions)
Rafiqlubken (Talk | contribs) |
Rafiqlubken (Talk | contribs) |
||
| Line 176: | Line 176: | ||
position:relative; | position:relative; | ||
top:30px; | top:30px; | ||
| - | left: | + | left:55px; |
} | } | ||
Revision as of 09:28, 2 June 2014
/* Removing iGEM style */
- searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display: none;
}
- content {
height: 200px; width: 100%; border: none; padding: 0px;
}
/* Customizing standard iGEM navigation panel */
- top-section{
height: 18px; width: 100%; border: none; border-top: none;
}
- menubar {
display: table-cell; height: 30px; font-size: 12pt; position: fixed; background:black;
}
- menubar.left-menu {
width: 100%; margin-left:-12px;
}
- menubar.right-menu {
text-align: right;
}
- menubar.left-menu a {
border: none; color: #454545;
}
- menubar.right-menu a {
border: none; color: #454545;
}
- menubar * {
background: transparent;
}
- menubar * a:hover{
color: green; text-decoration: none;
}
- menubar > ul > li:last-child {
display: none;
}
/* TU-Eindhoven Style */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: none;
}
body {
font-family: 'Noto Sans', sans-serif; background: #dfff9f;
}
ol, ul {
list-style: none;
}
- navpanel {
height:75px; width:975px; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #003200)); background-image: -o-linear-gradient(bottom, #000000 0%, #003200 25%); background-image: -moz-linear-gradient(bottom, #000000 0%, #003200 25%); background-image: -webkit-linear-gradient(bottom, #000000 0%, #003200 25%); background-image: -ms-linear-gradient(bottom, #000000 0%, #003200 25%); background-image: linear-gradient(to bottom, #000000 0%, #003200 25%); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; margin-left:auto; margin-right:auto; margin-top: 0pt;
}
- header {
height: 200px;
width: 100%;
border-bottom: 2px solid black;
background-image: url("http://sgugenetics.pbworks.com/f/E.COLI.jpg");
}
.menu1 {
height:75px; width:200px; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #00C800)); background-image: -o-linear-gradient(bottom, #000000 0%, #00C800 25%); background-image: -moz-linear-gradient(bottom, #000000 0%, #00C800 25%); background-image: -webkit-linear-gradient(bottom, #000000 0%, #00C800 25%); background-image: -ms-linear-gradient(bottom, #000000 0%, #00C800 25%); background-image: linear-gradient(to bottom, #000000 0%, #00C800 25%); float:left; transition:all .4s ease-in-out 0s; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;
}
.menu2 {
height:75px; width:200px; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #009600)); background-image: -o-linear-gradient(bottom, #000000 0%, #009600 25%); background-image: -moz-linear-gradient(bottom, #000000 0%, #009600 25%); background-image: -webkit-linear-gradient(bottom, #000000 0%, #009600 25%); background-image: -ms-linear-gradient(bottom, #000000 0%, #009600 25%); background-image: linear-gradient(to bottom, #000000 0%, #009600 25%); float:left; position:relative; left:-15px; transition:all .4s ease-in-out 0s; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;
}
.menu3 {
height:75px; width:200px; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #006400)); background-image: -o-linear-gradient(bottom, #000000 0%, #006400 25%); background-image: -moz-linear-gradient(bottom, #000000 0%, #006400 25%); background-image: -webkit-linear-gradient(bottom, #000000 0%, #006400 25%); background-image: -ms-linear-gradient(bottom, #000000 0%, #006400 25%); background-image: linear-gradient(to bottom, #000000 0%, #006400 25%); float:left; position:relative; left:-30px; transition:all .4s ease-in-out 0s; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;
}
.menu4 {
height:75px; width:200px; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #003200)); background-image: -o-linear-gradient(bottom, #000000 0%, #003200 25%); background-image: -moz-linear-gradient(bottom, #000000 0%, #003200 25%); background-image: -webkit-linear-gradient(bottom, #000000 0%, #003200 25%); background-image: -ms-linear-gradient(bottom, #000000 0%, #003200 25%); background-image: linear-gradient(to bottom, #000000 0%, #003200 25%); float:left; position:relative; left:-45px; transition:all .4s ease-in-out 0s; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;
}
a.p1 {
font-size: 24px; font-weight:bold; color: rgba(255,255,255,.75); text-decoration:none; position:relative; top:30px; left:55px;
}
a.p2 {
font-size:16px; color: rgba(255,255,255,.75); margin-left: 25px; text-decoration:none;
}
.menu1:hover {
width:300px;
}
.menu2:hover {
width:300px;
}
.menu3:hover {
width:300px; height:auto; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.13, #006400)); background-image: -o-linear-gradient(bottom, #000000 0%, #006400 13%); background-image: -moz-linear-gradient(bottom, #000000 0%, #006400 13%); background-image: -webkit-linear-gradient(bottom, #000000 0%, #006400 13%); background-image: -ms-linear-gradient(bottom, #000000 0%, #006400 13%); background-image: linear-gradient(to bottom, #000000 0%, #006400 13%);
}
.menu4:hover {
width:300px; border-bottom-right-radius: 8px;
}
.menu1:hover .p1 {
color: white;
}
.menu2:hover .p1 {
color: white;
}
.menu3:hover .p1 {
color: white;
}
.menu4:hover .p1 {
color: white;
}
.menu3 ul {
display:none;
}
.menu3:hover ul {
display:inline; list-style:none; position:relative;
}
.menu3 ul li:hover .p2{
color: white;
}
