Team:Grenoble/Templates/Css.css
From 2011.igem.org
JeanBaptiste (Talk | contribs) |
JeanBaptiste (Talk | contribs) |
||
Line 2: | Line 2: | ||
<head> | <head> | ||
<style> | <style> | ||
+ | |||
+ | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > | ||
+ | <head> | ||
+ | <style> | ||
+ | |||
+ | } | ||
+ | #globalWrapper {/* le wiki */ | ||
+ | background-color: #ffffff; | ||
+ | -bottom:0px; | ||
+ | } | ||
+ | #top-section{/* la barre titre (baniere igem+ menu haut)*/ | ||
+ | height: auto; | ||
+ | margin-top: 0 px; | ||
+ | margin-left: 0 px; | ||
+ | margin-right: auto; | ||
+ | margin-bottom: 0 !important; | ||
+ | /* margin-bottom: 10px; */ | ||
+ | padding:0; | ||
+ | border: none; | ||
+ | display: display; | ||
+ | } | ||
+ | #p-logo{/*le conteneur de la banière igem avec un lien vers igem*/ | ||
+ | display:none; | ||
+ | border:none; | ||
+ | margin:none; | ||
+ | } | ||
+ | #menubar{/* la barre de menu du haut */ | ||
+ | /*display:none;*/ | ||
+ | } | ||
+ | #menubar a{/*les lien de la barre de menu du haut */ | ||
+ | text-decoration:none; | ||
+ | color:#FFFFFF; | ||
+ | } | ||
+ | |||
body { | body { | ||
Line 22: | Line 56: | ||
} | } | ||
+ | |||
+ | |||
/* utilisé dans la banière */ | /* utilisé dans la banière */ | ||
Line 49: | Line 85: | ||
} | } | ||
- | + | h1.firstheading { | |
background: url(http://farm4.static.flickr.com/3067/3084131521_36c059f6f0_b.jpg); | background: url(http://farm4.static.flickr.com/3067/3084131521_36c059f6f0_b.jpg); | ||
} | } | ||
Line 156: | Line 192: | ||
}*/ | }*/ | ||
#dolphinnav ul li.sfhover a.level1{ | #dolphinnav ul li.sfhover a.level1{ | ||
- | |||
color:#fff; | color:#fff; | ||
padding:0 20px 0 20px; | padding:0 20px 0 20px; | ||
background:#006c05 url(https://static.igem.org/mediawiki/2011/d/d4/Dolphin_left-ON.png) no-repeat top left; | background:#006c05 url(https://static.igem.org/mediawiki/2011/d/d4/Dolphin_left-ON.png) no-repeat top left; | ||
line-height:275%; | line-height:275%; | ||
+ | } | ||
+ | |||
+ | #dolphinnav ul li.sfhover a.level1 span{ | ||
+ | display:block; | ||
+ | padding:0 20px 0 20px; | ||
+ | width:auto; | ||
+ | background:#006c05 url(https://static.igem.org/mediawiki/2011/b/b5/Dolphin_right-ON.png) no-repeat top right; | ||
+ | height:33px; | ||
+ | } | ||
+ | |||
+ | #dolphinnav ul li.sfhover ul{ | ||
+ | |||
+ | left: 0; | ||
+ | min-height: 0; | ||
+ | height: 23px; | ||
+ | background:#006c05; | ||
+ | background-image:none; | ||
+ | margin: 33px 0 0 0 ; | ||
+ | overflow: hidden; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | /* ---------------------- END Dolphin nav ---------------------- */ | ||
+ | /*en cas d'emmerde avec image flottante*/ | ||
+ | .clearboth { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | .body { | ||
+ | |||
+ | margin:0; | ||
+ | |||
+ | padding:0; | ||
+ | |||
+ | } | ||
+ | |||
+ | .body h2 { | ||
+ | |||
+ | font:bold 24px Arial, Helvetica, sans-serif; | ||
+ | |||
+ | color:#323a3f; | ||
+ | |||
+ | padding:10px 5px; | ||
+ | |||
+ | margin:5px 2px 12px 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | .body h1 { | ||
+ | |||
+ | font:bold 34px Arial, Helvetica, sans-serif; | ||
+ | |||
+ | color:#323a3f; | ||
+ | |||
+ | padding:10px 5px; | ||
+ | |||
+ | margin:5px 2px 12px 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .body h3 { | ||
+ | |||
+ | font:bold 24px Arial, Helvetica, sans-serif; | ||
+ | |||
+ | color:#323a3f; | ||
+ | |||
+ | padding:10px 5px; | ||
+ | |||
+ | margin:5px 0 10px 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | .body h3 span.vert{ | ||
+ | |||
+ | color:#8fc400; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .body h2 span { | ||
+ | |||
+ | float:right; | ||
+ | |||
+ | color:#959595; | ||
+ | |||
+ | font:normal 12px Arial, Helvetica, sans-serif; | ||
+ | |||
+ | } | ||
+ | |||
+ | .body p { | ||
+ | |||
+ | font:normal 12px Arial, Helvetica, sans-serif; | ||
+ | |||
+ | color:#5f5f5f; | ||
+ | |||
+ | padding:5px; | ||
+ | |||
+ | margin:0; | ||
+ | |||
+ | line-height:1.8em; | ||
+ | |||
+ | text-indent: 30px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .body img { | ||
+ | |||
+ | clear:both; | ||
+ | |||
+ | padding:0; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | /*exemple: photo memnbre équipe, c'est un flottant, utiliser .clearboth en cas de besoin*/ | ||
+ | |||
+ | .body img.icon { | ||
+ | |||
+ | |||
+ | float:left; | ||
+ | |||
+ | margin: 15px 5px 2px 0; | ||
+ | |||
+ | width:80px; | ||
+ | |||
+ | height:auto; | ||
+ | |||
+ | } | ||
+ | /* | ||
+ | pour renbdre flottant une image qui n'est pas flottante si elle n'est pas un icon car .body img luiu met le clearboth du coup elle est plus flottante*/ | ||
+ | |||
+ | .body img.floated { | ||
+ | |||
+ | float:right; | ||
+ | |||
+ | margin:5px 10px 5px 0; | ||
+ | |||
+ | padding:0; | ||
+ | |||
+ | width:auto; | ||
+ | |||
+ | height:auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | .body a { | ||
+ | |||
+ | color:#97c950; | ||
+ | |||
+ | text-decoration:underline; | ||
+ | |||
+ | } | ||
+ | |||
+ | .body a:hover { | ||
+ | |||
+ | color:#90c950; | ||
+ | |||
+ | text-decoration:underline; | ||
+ | |||
+ | } | ||
+ | |||
+ | /*marge à vérif*/ | ||
+ | |||
+ | .body h2.lien:hover{ | ||
+ | |||
+ | margin: 0px 80px 0 0 ; | ||
+ | |||
+ | background-color: #D8FFC8; | ||
+ | |||
+ | } | ||
+ | /* | ||
+ | limite taille de l'intérieur de la page pour pas dépasser sur le menu/colonne de droite*/ | ||
+ | |||
+ | .left { | ||
+ | |||
+ | float:left; | ||
+ | |||
+ | width:65%; | ||
+ | |||
+ | margin:40px 0px 10px 25px; | ||
+ | |||
+ | padding: 0 25px; | ||
+ | |||
+ | background:url(images/l_bg.gif) top left no-repeat; | ||
+ | |||
+ | } | ||
+ | /* | ||
+ | width: alloue une certaine portion de la pge, un cadre possiblement rempli (calculé à partir de la gauche probablement du au float lefgt) les marges réduise l'occupation dans ce cadre*/ | ||
+ | |||
+ | .right { | ||
+ | |||
+ | |||
+ | |||
+ | float:right; | ||
+ | |||
+ | width:20%; | ||
+ | |||
+ | margin:40px 10px 0 0; | ||
+ | |||
+ | padding:0 25px; | ||
+ | |||
+ | background:url(images/r_bg.gif) top center no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .right ul { | ||
+ | |||
+ | list-style:none; | ||
+ | |||
+ | margin:5px 0; | ||
+ | |||
+ | padding:0; | ||
+ | |||
+ | } | ||
+ | |||
+ | .right li { | ||
+ | |||
+ | background:10px 10px no-repeat; | ||
+ | |||
+ | font:normal 14px Arial, Helvetica, sans-serif; | ||
+ | |||
+ | color:#464646; | ||
+ | |||
+ | padding:5px 0; | ||
+ | |||
+ | margin:3px 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | .right li a { | ||
+ | |||
+ | padding:0 0 0 5px; | ||
+ | |||
+ | margin:0; | ||
+ | |||
+ | font:bold 17px Arial, Helvetica, sans-serif; | ||
+ | |||
+ | color:#5f5f5f; | ||
+ | |||
+ | text-decoration:none; | ||
+ | |||
+ | } | ||
+ | |||
+ | .right li a:hover { | ||
+ | |||
+ | color:#97c950; | ||
+ | |||
+ | margin:5px; | ||
+ | |||
+ | /*background-color:#a2cd9a;*/ | ||
+ | |||
+ | text-decoration:none; | ||
+ | |||
+ | } | ||
+ | /* | ||
+ | .right ul.sponsors { | ||
+ | |||
+ | list-style:none; | ||
+ | |||
+ | margin:5px 0; | ||
+ | |||
+ | padding:0; | ||
+ | |||
+ | } | ||
+ | |||
+ | .right li.sponsors { | ||
+ | |||
+ | background:none; | ||
+ | |||
+ | font:normal 12px Arial, Helvetica, sans-serif; | ||
+ | |||
+ | color:#5f5f5f; | ||
+ | |||
+ | padding:8px 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | .right li.sponsors a { | ||
+ | |||
+ | padding:0 0 0 0px; | ||
+ | |||
+ | margin:0; | ||
+ | |||
+ | font:normal 13px Arial, Helvetica, sans-serif; | ||
+ | |||
+ | color:#97c950; | ||
+ | |||
+ | text-decoration:none; | ||
+ | |||
+ | } | ||
+ | |||
+ | .right li.sponsors strong { | ||
+ | |||
+ | color:#97c950q; | ||
+ | |||
+ | }*/ | ||
+ | |||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | </html> | ||
+ | |||
+ | body { | ||
+ | |||
+ | margin:0; | ||
+ | |||
+ | padding:0; | ||
+ | |||
+ | width:100%; | ||
+ | |||
+ | background:#fcf6ee; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | html { | ||
+ | |||
+ | padding:0; | ||
+ | |||
+ | margin:0; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* utilisé dans la banière */ | ||
+ | img.blabla { | ||
+ | |||
+ | width:100%; | ||
+ | |||
+ | height:auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | h1 { | ||
+ | |||
+ | margin:0; | ||
+ | |||
+ | padding:30px 0 30px 32px; | ||
+ | |||
+ | color:#5c5c5c; | ||
+ | |||
+ | font:bold 45px/1.1em Arial, Helvetica, sans-serif; | ||
+ | |||
+ | text-transform:uppercase; | ||
+ | |||
+ | letter-spacing:-3px; | ||
+ | |||
+ | } | ||
+ | |||
+ | h1 a, h1 a:hover { | ||
+ | |||
+ | color:#5c5c5c; | ||
+ | |||
+ | text-decoration:none; | ||
+ | |||
+ | } | ||
+ | |||
+ | h1 span { | ||
+ | |||
+ | font-weight:bold; | ||
+ | |||
+ | color:#8fc400; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* in tartiflette we trust */ | ||
+ | h1 small { | ||
+ | |||
+ | font:normal 13px/1.2em Arial, Helvetica, sans-serif; | ||
+ | |||
+ | color:#888; | ||
+ | |||
+ | letter-spacing:normal; | ||
+ | |||
+ | } | ||
+ | /* ---------------------- Dolphin nav ---------------------- */ | ||
+ | #dolphincontainer{ | ||
+ | position:relative; | ||
+ | height:60px; | ||
+ | color:#000000; | ||
+ | background:#006c05; | ||
+ | width:100%; | ||
+ | font-family:Helvetica,Arial,Verdana,sans-serif; | ||
+ | } | ||
+ | |||
+ | #dolphinnav{ | ||
+ | position:relative; | ||
+ | height:33px; | ||
+ | font-size:12px; | ||
+ | text-transform:uppercase; | ||
+ | font-weight:bold; | ||
+ | background:#fff url(https://static.igem.org/mediawiki/2011/b/b7/Dolphin_bg.png) repeat-x bottom left; | ||
+ | padding:0 0 0 20px; | ||
+ | } | ||
+ | #dolphinnav ul{ | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | list-style:none; | ||
+ | width:auto; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | #dolphinnav ul li{ | ||
+ | display:block; | ||
+ | float:left; | ||
+ | margin:0 1px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #dolphinnav ul li a{ | ||
+ | display:block; | ||
+ | float:left; | ||
+ | color:#eaf8ea; | ||
+ | text-decoration:none; | ||
+ | /*padding:12px 20px 0 20px;*/ | ||
+ | height:33px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #dolphinnav ul li a.level1{ | ||
+ | |||
+ | padding:12px 20px 0 20px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #dolphinnav ul li.sfhover ul li a.level2{ | ||
+ | |||
+ | color:#eaf8ea; | ||
+ | margin: 5px 5px 15px 5px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #dolphinnav ul li ul{ | ||
+ | position: absolute; | ||
+ | left: -999em; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*#dolphinnav ul li a:hover{ | ||
+ | color:#fff; | ||
+ | background:transparent url(images/dolphin_bg-OVER.png) repeat-x bottom left; | ||
+ | } | ||
+ | #dolphinnav ul li a:hover span{ | ||
+ | display:block; | ||
+ | width:auto; | ||
+ | cursor:pointer; | ||
+ | }*/ | ||
+ | #dolphinnav ul li.sfhover a.level1{ | ||
+ | color:#fff; | ||
+ | padding:0 20px 0 20px; | ||
+ | background:#006c05 url(https://static.igem.org/mediawiki/2011/d/d4/Dolphin_left-ON.png) no-repeat top left; | ||
+ | line-height:275%; | ||
} | } | ||
Revision as of 13:56, 4 August 2011
body {
margin:0;
padding:0;
width:100%;
background:#fcf6ee;
}
html {
padding:0;
margin:0;
}
/* utilisé dans la banière */ img.blabla {
width:100%;
height:auto;
}
h1 {
margin:0;
padding:30px 0 30px 32px;
color:#5c5c5c;
font:bold 45px/1.1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing:-3px;
}
h1 a, h1 a:hover {
color:#5c5c5c;
text-decoration:none;
}
h1 span {
font-weight:bold;
color:#8fc400;
}
/* in tartiflette we trust */ h1 small {
font:normal 13px/1.2em Arial, Helvetica, sans-serif;
color:#888;
letter-spacing:normal;
} /* ---------------------- Dolphin nav ---------------------- */
- dolphincontainer{
position:relative; height:60px; color:#000000; background:#006c05; width:100%; font-family:Helvetica,Arial,Verdana,sans-serif;
}
- dolphinnav{
position:relative; height:33px; font-size:12px; text-transform:uppercase; font-weight:bold; background:#fff url() repeat-x bottom left; padding:0 0 0 20px;
}
- dolphinnav ul{
margin:0; padding:0; list-style:none; width:auto; float:left;
}
- dolphinnav ul li{
display:block; float:left; margin:0 1px;
}
- dolphinnav ul li a{
display:block; float:left; color:#eaf8ea; text-decoration:none; /*padding:12px 20px 0 20px;*/ height:33px;
}
- dolphinnav ul li a.level1{
padding:12px 20px 0 20px;
}
- dolphinnav ul li.sfhover ul li a.level2{
color:#eaf8ea;
margin: 5px 5px 15px 5px;
}
- dolphinnav ul li ul{
position: absolute; left: -999em;
}
/*#dolphinnav ul li a:hover{
color:#fff; background:transparent url(images/dolphin_bg-OVER.png) repeat-x bottom left;
}
- dolphinnav ul li a:hover span{
display:block; width:auto; cursor:pointer;
}*/
- dolphinnav ul li.sfhover a.level1{
color:#fff; padding:0 20px 0 20px; background:#006c05 url() no-repeat top left; line-height:275%;
}
- dolphinnav ul li.sfhover a.level1 span{
display:block; padding:0 20px 0 20px; width:auto; background:#006c05 url() no-repeat top right; height:33px;
}
- dolphinnav ul li.sfhover ul{
left: 0; min-height: 0;
height: 23px; background:#006c05; background-image:none; margin: 33px 0 0 0 ; overflow: hidden;
}
/* ---------------------- END Dolphin nav ---------------------- */
/*en cas d'emmerde avec image flottante*/
.clearboth {
clear:both;
}
.body {
margin:0;
padding:0;
}
.body h2 {
font:bold 24px Arial, Helvetica, sans-serif;
color:#323a3f;
padding:10px 5px;
margin:5px 2px 12px 0;
}
.body h1 {
font:bold 34px Arial, Helvetica, sans-serif;
color:#323a3f;
padding:10px 5px;
margin:5px 2px 12px 0;
}
.body h3 {
font:bold 24px Arial, Helvetica, sans-serif;
color:#323a3f;
padding:10px 5px;
margin:5px 0 10px 0;
}
.body h3 span.vert{
color:#8fc400;
}
.body h2 span {
float:right;
color:#959595;
font:normal 12px Arial, Helvetica, sans-serif;
}
.body p {
font:normal 12px Arial, Helvetica, sans-serif;
color:#5f5f5f;
padding:5px;
margin:0;
line-height:1.8em;
text-indent: 30px;
}
.body img {
clear:both;
padding:0;
}
/*exemple: photo memnbre équipe, c'est un flottant, utiliser .clearboth en cas de besoin*/
.body img.icon {
float:left;
margin: 15px 5px 2px 0;
width:80px;
height:auto;
} /* pour renbdre flottant une image qui n'est pas flottante si elle n'est pas un icon car .body img luiu met le clearboth du coup elle est plus flottante*/
.body img.floated {
float:right;
margin:5px 10px 5px 0;
padding:0;
width:auto;
height:auto;
}
.body a {
color:#97c950;
text-decoration:underline;
}
.body a:hover {
color:#90c950;
text-decoration:underline;
}
/*marge à vérif*/
.body h2.lien:hover{
margin: 0px 80px 0 0 ;
background-color: #D8FFC8;
} /* limite taille de l'intérieur de la page pour pas dépasser sur le menu/colonne de droite*/
.left {
float:left;
width:65%;
margin:40px 0px 10px 25px;
padding: 0 25px;
background:url(images/l_bg.gif) top left no-repeat;
} /* width: alloue une certaine portion de la pge, un cadre possiblement rempli (calculé à partir de la gauche probablement du au float lefgt) les marges réduise l'occupation dans ce cadre*/
.right {
float:right;
width:20%;
margin:40px 10px 0 0;
padding:0 25px;
background:url(images/r_bg.gif) top center no-repeat;
}
.right ul {
list-style:none;
margin:5px 0;
padding:0;
}
.right li {
background:10px 10px no-repeat;
font:normal 14px Arial, Helvetica, sans-serif;
color:#464646;
padding:5px 0;
margin:3px 0;
}
.right li a {
padding:0 0 0 5px;
margin:0;
font:bold 17px Arial, Helvetica, sans-serif;
color:#5f5f5f;
text-decoration:none;
}
.right li a:hover {
color:#97c950;
margin:5px;
/*background-color:#a2cd9a;*/
text-decoration:none;
} /* .right ul.sponsors {
list-style:none;
margin:5px 0;
padding:0;
}
.right li.sponsors {
background:none;
font:normal 12px Arial, Helvetica, sans-serif;
color:#5f5f5f;
padding:8px 0;
}
.right li.sponsors a {
padding:0 0 0 0px;
margin:0;
font:normal 13px Arial, Helvetica, sans-serif;
color:#97c950;
text-decoration:none;
}
.right li.sponsors strong {
color:#97c950q;
}*/
</style>
</head>
</html>