Template:Paris Bettencourt/Templetes:Header
<style type="text/css">
/*Bordel CSS de iGEM*/
/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/
/* Clear the default wiki settings */
#home_logo, #sideMenu { display:none; } #sideMenu, #top_title, .patrollink {display:none;} #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} body {background-color:white; } #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
/*anti igem css*/
- HQ_page h1, h2, h3, h5 {
font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif;
font-weight: 400;
border : none;
border : white;
}
- mw-content-text h1 {
border : none;
border : white;
}
- HQ_page h4 {
color : rgb(64,64,64);
}
- HQ_page table {
border : none;
border-collapse : separate;
margin : 0;
}
- HQ_page ul {
list-style-type:disc;
list-style-image : none;
} groupparts {
margin :margin-left : 50%;
} /*General CSS*/ body { margin : 0; padding:0;
width : 100%;
} @media only screen and (max-width: 1200px) {
} @media only screen and (max-width: 800px) {
body {
width : 800px;
}
#menu {
height : 130px !important;
}
.menulist {
width : 400px !important;
overflow : visible !important;
}
#fbnoticon{
}
#instanoticon {
}
#twnoticon{
}
}
- top-button {
position : fixed; right : 20px; bottom : 10px;
width : 25px;
height : 25px;
z-index : 100; }
- top-button img {
width : 100%;
height : 100%;
} .textbody img {
width : 100%;
} .textbody span {
font-size : 12px;
text-align : justify;
} .textbody h4 {
text-align : left;
font-size : 20px;
margin-bottom : 20px;
color : rgb(64,64,64);
} .textbody h6 {
text-align : center;
font-size : 15px;
} .textbody table {
width : 100%;
word-wrap : break-word;
} .textbody table tr td {
border : rgb(94,94,94) solid 1px;
text-align : left;
} .textbody table tr td img {
width : 100%;
margin : 0;
} .header { width : 100%; height : 100vh; background-attachment: fixed; background-position : center; background-repeat : no-repeat; background-size : cover; background-color : rgb(200,200,200); text-align : center;
line-height : 100px;
font-family : "Avenir", Lato, sans-serif; font-size : 100px; color : white; font-weight : bold;
display: flex; align-items: center;
justify-content: center; } .textbody { width : 75%; margin : 0 auto; text-align : justify; padding-top : 75px; display : block; font-family : "Avenir", Lato, sans-serif; color : rgb(64,64,64); font-size : 15px;
margin-bottom : 50px;
text-indent : 15px;
}
- HQ_page .textbody p {
font-family : "Avenir", Lato, sans-serif;
color : rgb(64,64,64); font-size : 15px; }
@supports (-webkit-appearance:none) { .textbody { color : #404040; font-weight : 150; } } .textbody h1 { text-align : center; font-size : 50px;
line-height : 50px;
margin-bottom : 75px; font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif; color : rgb(56,78,119);
}
.textbody h2 {
font-size : 30px;
font-variant: small-caps;
line-height : 30px;
text-decoration : none;
} .textbody ul {
list-style-position: inside;
list-style-type: circle;
} .textbody a {
text-style : none;
color : rgb(64,64,64);
} /* text in one block*/ .text1 { width : 100%; display : inline-block; margin-top : 25px;
position : relative;
font-size : 16px;
} .text1 img {
width : 50%;
margin-left : 25%;
margin-right : 25%;
} .text1 span {
width : 50%;
margin-left : 25%;
margin-right : 25%;
display : inline-block;
} /*Text in two equal block*/ .text2 { width : 100%; display : inline-block; margin-top : 25px;
position : relative;
} .text2left { width : 45%; display : inline-block; margin-top : 20px; margin-bottom : 20px; float : left; } .text2right { width : 45%; display : inline-block; float : right; margin-top : 20px; margin-bottom : 20px; } /*Text in three equal block*/ .text3 { width : 100%; display : inline-block; margin-top : 25px;
position : relative;
} .text3left { width : 30%; display : inline-block; margin-top : 20px; margin-bottom : 20px; float : left; } .text3center { width : 30%; display : inline-block; margin-left : 5%; margin-top : 20px; margin-bottom : 20px; float : left; } .text3right { width : 30%; float : right; display : inline-block; margin-top : 20px; margin-bottom : 20px; } /*Text in two block with the left one larger*/ .text4 { width : 100%; display : inline-block; margin-top : 25px;
position : relative;
} .text4left { width : 65%; display : inline-block; margin-top : 20px; margin-bottom : 20px; } .text4right { width : 30%; display : inline-block; float : right; margin-top : 20px; margin-bottom : 20px; } /*Text in two block with the right one larger*/ .text5 { width : 100%; display : inline-block; margin-top : 25px;
position : relative;
} .text5left { width : 30%; display : inline-block; margin-top : 20px; margin-bottom : 20px; } .text5right { width : 65%; display : inline-block; float : right; margin-top : 20px; margin-bottom : 20px; } .text6 {
width : 60%;
display : inline-block
margin-top : 20px;
margin-bottom : 20px;
margin-left : 20%;
margin-rigth : 20%;
}
.divseparator {
width : 20%;
height : 0px;
border : solid 0.5px rgb(64,64,64);
margin : 25px auto;
position : relative;
display : block;
} .horiline {
height: 3px; width: 300px; margin: -0.5em 0; color: rgb(64,64,64) ; display: block; margin-left: auto; margin-right: auto
} /*Nav bar CSS*/ /*
- menu {
position : fixed; width : 100%; background : rgb(94,94,94); height : 65px;
z-index : 100;
}
- home {
width : 60px; top : 0;
margin-left : 10px;
}
- mainpage {
float : left;
}
- menu ul li {
display: inline-block; vertical-align: top; }
- menu ul li a {
display: inline-block; }
.menulist { overflow: hidden; margin : auto; background : rgb(94,94,94);
margin-left : 100px !important;
padding : 0px;
margin-top : 0px;
height : 60px;
font-size : 16px;
}
.menulist .list a { display: block; text-align: center; text-decoration : none; color: white;
padding-left : 5px;
padding-right : 5px;
padding-top : 15px;
padding-bottom : 15px;
} .menulist .list a:hover { background-color: rgb(124, 124, 124); /*here to change the color when you pass the mouse over, look down a bit*/ } .menulist .list .dropdownlist { display: none; position: absolute; text-align : left;
margin-top : 0px;
padding-left : 5px;
padding-right : 5px;
background : rgb(94,94,94);
list-style-position : inside;
margin-left : 0px;
z-index : 99;
}
.dropdownlist li .droprightlist { display: none; position: absolute; background : rgb(94,94,94);
padding-left : 5px;
padding-right : 5px;
margin-top : 0px;
text-align : left;
z-index : 100;
margin-left : 0px;
}
.menulist .list:hover .dropdownlist { display: block; }
.menulist .list .dropdownlist li { display: block; position: relative; text-align : center; background : rgb(94,94,94); z-index: 90; padding : auto; } .menulist .list .dropdownlist li a:hover { background-color: rgb(124, 124, 124); /*And here also*/ } .dropdownlist li .droprightlist li a { color: white; }
- menu u.dropdownlist li .droprightlist li {
display: block; position: relative; text-align : center; background : rgb(94,94,94); padding : auto; }
.menulist .list .dropdownlist li a { display: table-cell; text-align: left; text-align : center; color: white; text-decoration : none;
z-index : 99;
vertical-align : middle; } .dropdownlist li .droprightlist li a { display: table-cell; text-align: left; text-align : center; text-decoration : none; color: white;
} .list ul li {
display : table-cell;
} .dropdownlist li .droprightlist { top: 0; left: 100%; z-index: -1; } .dropdownlist li:hover .droprightlist { display: block; }
- exception {
line-height : normal;
}
- fbnoticon{
margin-left : 90px; }
- instanoticon {
margin-left : 135px;
margin-top : -19px;
}
- twnoticon{
margin-left : 45px; }
- igemlogo{
} .sidelogos { }
- logolist {
float : right; display : inline-block; height : 60px; width : 175px; margin-top : -50px; margin-right : 50px; }
- twnoticon img, #fbnoticon img, #igemlogo img, #instanoticon img{
width : 40px; position : absolute; display : inline-block; }
- twitapp, #fbapp {
display:none; width:250px; height:auto; background: white; }
- fbapp{
}
- twitapp{
}
- /
.image-span{
display:block;
}
.top50 {
margin-top: 50px;
}
body
{
margin: 0; padding: 0; font-family: sans-serif;
} nav {
width: 100%; background: #66b24c;
} ul {
width: 80%; margin: 0 auto; padding: 0;
} ul li {
list-style: none; display: inline-block; padding: 20px;
} ul li:hover {
background: #339933;
} ul li a {
color: #fff; text-decoration: none;
} ul.wtf-menu{
height:65px;
padding-bottom: 0;
margin-bottom: 0;
margin-top: 0;
margin-right: 30px;
}
ul.wtf-menu li{
list-style: none;
float: left;
padding: 0px 0px;
margin: 0px 0px;
line-height: 65px;
display: block;
position: relative;
text-transform: uppercase;
}
ul.wtf-menu li a{
color: #66b24c;;
text-decoration: none;
display:block;
padding: 0px 15px;
margin: 0px 0px;
display: block;
}
ul.wtf-menu li:hover, ul.wtf-menu li:hover >a{
background-color /*:#66b24c*/:rgb(51, 153, 51);
color: white;
}
ul.wtf-menu li.parent:hover:after {
color:white;
}
.wtf-menu ul.submenu{
width: 200px;
padding: 0px 0px;
margin: 0px;
background: #fff;
position: absolute;
top:65px;
left:0px;
display:none;
/* Dropdown shadow */
-webkit-box-shadow: 0 2px 2px 0 rgb(217, 255, 179);
box-shadow: 0 2px 2px 0 rgb(217, 255, 179);
}
.wtf-menu li.main-item >a{
color: white;
}
.wtf-menu ul.submenu ul{
left: 200px;
top:0px;
}
.wtf-menu ul.submenu li{
padding: 0px;
margin: 0px;
display: block;
float: none;
border-bottom: 1px solid #eee;
line-height: 40px;
text-transform: none;
}
.wtf-menu ul.submenu li:last-child{
border: none;
}
ul.wtf-menu ul li.parent:after {
font-family: 'Fontawesome';
content: "\f0da";
color: #bdf5bd;
position: absolute;
right: 10px;
top: 0px;
margin-left: 5px;
}
.wtf-menu li:hover > ul{
display: block;
-moz-animation: zoomIn .3s ease-in;
-webkit-animation: zoomIn .3s ease-in ;
animation: zoomIn .3s ease-in;
}
.wtf-menu ul li:hover > ul{
display:block;
-moz-animation: zoomIn .3s ease-in ;
-webkit-animation: zoomIn .3s ease-in ;
animation: zoomIn .3s ease-in;
}
.top-menu{
background-color: rgb(94,94,94); color:white;
z-index: 2000;
position: fixed;
width: 100%;
padding-right: 30px;
}
.top5{
margin-top: 5px;
}
#logoigem img{
width:38px;
height:38px;
}
- home{
margin-top: 2px; margin-right: 10px;
width : 60px;
top : 0;
margin-left : 10px;
}
- logolist2 div {
margin-right: 20px; width: 38px;
}
- logolist2{
float: right; display: flex; width: 175px; margin-top: -54px; margin-right: 50px;
}
#logolist2 a{
color: white;
text-decoration: none;
}
#logolist2 a i {
font-size: 30px;
}
- mainpage {
float: left;
}
</style>
<nav class="row top-menu">
<a href="https://2018.igem.org/Team:Paris_Bettencourt" id="mainpage"><img id="home" src="" class=" b-error"></a>
<a href="https://2018.igem.org/Main_Page" title="iGEM 2018" target="_blank"> <img src="" class=" b-error"> </a>
<a href="http://twitter.com/iGEM_Paris" target="_blank"></a>
</a><a class="twitter-timeline" width="250" height="400" data-dnt="true" href="https://twitter.com/iGEM_Paris" data-widget-id="368144501119795201">@iGEM_Paris</a>
</nav>