Team:Grenoble/Templates/Css current.css

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/* I <3 Paris */
+
.blocbackground {
-
#globalWrapper {/* le wiki */
+
 
-
    background-color: #ffffff;
+
border: 1px solid #666D99;
-
    -bottom:0px;
+
-
}
+
 +
margin: 5px 0 20px 0;
 +
padding: 0 0 20px 5px;
-
#top-section{/* la barre titre (baniere igem+ menu haut)*/
+
-webkit-box-shadow: #666666 0px 2px 3px;
-
    height: auto;
+
-moz-box-shadow: #666666 0px 2px 3px;
-
    margin-top: 0 px;
+
-
    margin-left: 0 px;
+
-webkit-border-radius: 8px;
-
    margin-right: auto;
+
-moz-border-radius: 8px;
-
    margin-bottom: 0 ;
+
border-radius: 8px;
-
   
+
-
    border: none;
+
background: #EEF0FC;
-
    display: display;
+
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEF0FC), to(#FFFFFF));
-
}
+
background: -webkit-linear-gradient(#EEF0FC, #FFFFFF);
 +
background: -moz-linear-gradient(#EEF0FC, #FFFFFF);
 +
background: -ms-linear-gradient(#EEF0FC, #FFFFFF);
 +
background: -o-linear-gradient(#EEF0FC, #FFFFFF);
 +
background: linear-gradient(#EEF0FC, #FFFFFF);
-
#p-logo{/*le conteneur de la banière igem avec un lien vers igem*/
 
-
    display:none;
 
-
    border:none;
 
-
    margin:none;
 
}
}
-
#menubar a{/*les lien de la barre de menu du haut */
+
/*    
-
    margin:5px 5px 0 0;
+
///////////////////////////////////////////////////////////
-
    text-decoration:none;
+
///////////////////////////////////////////////////////////
-
    color:#FFFFFF;
+
Tableau
-
}
+
///////////////////////////////////////////////////////////
 +
///////////////////////////////////////////////////////////
 +
*/
-
.legend{
 
-
font:normal 12px Arial, Helvetica, sans-serif;
+
table {
 +
border: none;
-
font-style:italic;
+
border-collapse: collapse;
 +
 +
width: 615px;
 +
 +
font:normal 13px Arial, Helvetica, sans-serif;
color:#0F174D;
color:#0F174D;
-
 
-
text-align: center;
 
-
 
-
}
 
-
 
-
body {
 
-
 
-
margin:0;
 
-
 
-
padding:0;
 
-
 
-
width:100%;
 
 +
padding:3px;
 +
line-height:1.8em;
}
}
-
html {
+
th {
-
 
+
font-family: monospace;
-
padding:0;
+
-
 
+
border: thin solid #6495ed;
-
margin:0;
+
 +
padding: 5px;
 +
 +
background-color: #D0E3FA;
}
}
-
 
+
td {
-
 
+
border: thin solid #6495ed;
-
/* utilisé dans la banière */
+
-
img.blabla  {
+
-
 
+
-
width:100%;
+
-
 
+
-
height:auto;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
h1 {
+
-
 
+
-
margin:0;
+
-
 
+
-
padding:30px 0 30px 32px;
+
-
 
+
-
color:#9c9c9c;
+
-
 
+
-
font:bold 45px/1.1em Arial, Helvetica, sans-serif;
+
-
 
+
-
text-transform:uppercase;
+
-
 
+
-
letter-spacing:-3px;
+
-
/*
+
padding: 5px;
-
background:#000000 url(http://farm4.static.flickr.com/3067/3084131521_36c059f6f0_b.jpg) no-repeat top left;
+
-
*/
+
-
background:#FFFFFF url(https://static.igem.org/mediawiki/2011/2/20/Banderolle_wiki.png) no-repeat top left;
+
text-align: center;
-
 
+
-
 
+
background-color: #ffffff;
}
}
-
h1 a, h1 a:hover {
+
table.nobordure td, table.nobordure th, table.nobordure
-
 
+
{
-
color:#9c9c9c;
+
  border: none;  
-
 
+
-
text-decoration:none;
+
-
 
+
-
}
+
-
 
+
-
h1 span {
+
-
 
+
-
font-weight:bold;
+
-
 
+
/*
/*
-
color:#8fc400; vert ici, bleu en dessous
+
  background-color: none;
*/
*/
-
 
+
  background: none;
-
color:#2F48EE;
+
}
}
-
/* in tartiflette we trust */
 
-
h1 small {
 
-
font:normal 13px/1.2em Arial, Helvetica, sans-serif;
+
body {
-
color:#888;
+
margin:0;
-
letter-spacing:normal;
+
padding:0;
-
 
+
-
}
+
 +
width:100%;
-
/* ---------------------- Dolphin nav ---------------------- */
 
-
#dolphincontainer{
 
-
    position:relative;
 
-
    height:70px;
 
-
    color:#000000;
 
-
    background:#F4F6FD;
 
-
    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;
+
Classe body
*/
*/
-
    background:#fff url(https://static.igem.org/mediawiki/2011/a/a4/Dolphin_bg_blue.png) repeat-x bottom left;
 
-
   
 
-
    padding:0 0 0 3px;
 
-
   
 
-
}
 
-
   
 
-
#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:#EAECF8;
 
-
    text-decoration:none;
 
-
    /*padding:12px 20px 0 20px;*/
 
-
    height:33px;
 
-
   
 
-
}
 
-
 
-
#dolphinnav .scriptina{
 
-
 
-
    font-family: scriptina, Helvetica,Arial,Verdana,sans-serif;
 
-
}
 
-
 
-
#dolphinnav ul li li a{
 
-
color:#5F5F5F;
 
-
}
 
-
 
-
#dolphinnav ul li a.level1{
 
-
 
 
-
    padding:12px 20px 0 20px;
 
-
   
 
-
}
 
-
 
-
#dolphinnav ul li.sfhover ul li a.level2{
 
-
   
 
-
   
 
-
color:#5F5F5F;
 
-
    margin: 5px 5px 15px 5px;
 
-
    font-size:16px;
 
-
 
-
}
 
-
 
-
#dolphinnav ul li.sfhover ul li a.level2:hover{
 
-
   
 
-
color:#8F8F8F;
 
-
/*
 
-
font-size:18px;
 
-
*/
 
-
font-size:16px;
 
-
 
-
 
-
}
 
-
 
-
#dolphinnav ul li ul{
 
-
    position: absolute;
 
-
    left: -999em;
 
-
}
 
-
 
-
#dolphinnav ul li.sfhover a.level1{
 
-
    color:#5F5F5F;
 
-
    padding:0 20px 0 20px;
 
-
    background: #EEF0FC;
 
-
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEF0FC), to(#F4F6FD));
 
-
background: -webkit-linear-gradient(#F4F6FD, #F4F6FD);
 
-
background: -moz-linear-gradient(#F4F6FD, #F4F6FD);
 
-
background: -ms-linear-gradient(#F4F6FD, #F4F6FD);
 
-
background: -o-linear-gradient(#F4F6FD, #F4F6FD);
 
-
background: linear-gradient(#F4F6FD, #F4F6FD);
 
-
 
-
 
-
/*
 
-
    border: 1px solid #696;
 
-
*/
 
-
    border: 1px solid #525D9E;
 
-
    border-bottom: none;
 
-
 
-
 
-
    -moz-box-shadow: -2px -2px 2px #888;
 
-
    -webkit-box-shadow: -2px -2px 2px #888;
 
-
    box-shadow: -2px -2px 2px #888;
 
-
 
-
-webkit-border-radius: 5px 5px 0 0 ;
 
-
-moz-border-radius: 5px 5px 0 0 ;
 
-
border-radius: 5px 5px 0 0 ;
 
-
 
-
    line-height:275%;
 
-
}
 
-
 
-
 
-
 
-
#dolphinnav ul li.sfhover ul{
 
-
 
-
        left: 0;
 
-
        min-height: 0;
 
-
height: 23px;
 
-
background: #F4F6FD;
 
-
color:#5F5F5F;
 
-
margin: 43px 0 0 0 ;
 
-
overflow: hidden;
 
-
 
-
}
 
-
 
-
 
-
 
-
/* ---------------------- END Dolphin nav ---------------------- */
 
-
/*en cas d'emmerde avec image flottante*/
 
-
.clearboth {
 
-
clear:both;
 
-
}
 
.body {
.body {
Line 278: Line 104:
}
}
-
 
+
/*    
-
.blocbackground {
+
///////////////////////////////////////////////////////////
-
 
+
///////////////////////////////////////////////////////////
-
border: 1px solid #666D99;
+
Body Titres
-
+
///////////////////////////////////////////////////////////
-
+
///////////////////////////////////////////////////////////
-
margin: 5px 0 20px 0;
+
-
padding: 0 0 20px 5px;
+
-
 
+
-
-webkit-box-shadow: #666666 0px 2px 3px;
+
-
-moz-box-shadow: #666666 0px 2px 3px;
+
-
+
-
-webkit-border-radius: 8px;
+
-
-moz-border-radius: 8px;
+
-
border-radius: 8px;
+
-
+
-
background: #EEF0FC;
+
-
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEF0FC), to(#FFFFFF));
+
-
background: -webkit-linear-gradient(#EEF0FC, #FFFFFF);
+
-
background: -moz-linear-gradient(#EEF0FC, #FFFFFF);
+
-
background: -ms-linear-gradient(#EEF0FC, #FFFFFF);
+
-
background: -o-linear-gradient(#EEF0FC, #FFFFFF);
+
-
background: linear-gradient(#EEF0FC, #FFFFFF);
+
-
 
+
-
}
+
-
 
+
-
/*
+
-
.blocbackground img {
+
-
width="610"
+
-
 
+
-
J'ai mesuré sur une capture d'écran une largeure de 626 pixels pour le blocbackground, donc on peut mettre un peu plus
+
-
 
+
-
}
+
*/
*/
Line 369: Line 168:
}
}
-
 
+
/*     
 +
///////////////////////////////////////////////////////////
 +
///////////////////////////////////////////////////////////
 +
Body paragraphe
 +
///////////////////////////////////////////////////////////
 +
///////////////////////////////////////////////////////////
 +
*/
.body p{
.body p{
Line 393: Line 198:
text-indent: 0px;
text-indent: 0px;
}
}
 +
 +
/*     
 +
///////////////////////////////////////////////////////////
 +
///////////////////////////////////////////////////////////
 +
Body Image
 +
///////////////////////////////////////////////////////////
 +
///////////////////////////////////////////////////////////
 +
*/
.body img.centerwidenoshadow {
.body img.centerwidenoshadow {
Line 466: Line 279:
}
}
 +
 +
/*     
 +
///////////////////////////////////////////////////////////
 +
///////////////////////////////////////////////////////////
 +
Body Lien
 +
///////////////////////////////////////////////////////////
 +
///////////////////////////////////////////////////////////
 +
*/
.body a {
.body a {
Line 502: Line 323:
}
}
 +
 +
 +
/*     
 +
///////////////////////////////////////////////////////////
 +
///////////////////////////////////////////////////////////
 +
Left
 +
///////////////////////////////////////////////////////////
 +
///////////////////////////////////////////////////////////
 +
*/
 +
/*
/*
-
limite taille de l'intérieur de la page pour pas dépasser sur le menu/colonne de droite*/
+
limite taille de l'intérieur de la page pour pas dépasser sur le menu/colonne de droite
 +
*/
.left {
.left {
Line 547: Line 379:
line-height:1.8em;
line-height:1.8em;
-
}
 
-
 
-
table {
 
-
border: none;
 
-
 
-
border-collapse: collapse;
 
-
 
-
width: 615px;
 
-
 
-
font:normal 13px Arial, Helvetica, sans-serif;
 
-
 
-
color:#0F174D;
 
-
 
-
padding:3px;
 
-
 
-
line-height:1.8em;
 
-
 
-
}
 
-
 
-
th {
 
-
font-family: monospace;
 
-
 
-
border: thin solid #6495ed;
 
-
 
-
padding: 5px;
 
-
 
-
background-color: #D0E3FA;
 
-
 
-
}
 
-
 
-
td {
 
-
border: thin solid #6495ed;
 
-
 
-
padding: 5px;
 
-
 
-
text-align: center;
 
-
 
-
background-color: #ffffff;
 
-
 
-
}
 
-
 
-
table.nobordure td, table.nobordure th, table.nobordure
 
-
{
 
-
  border: none;
 
-
/*
 
-
  background-color: none;
 
-
*/
 
-
  background: none;
 
-
}
 
-
 
-
/*
 
-
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:10px 10px 0 0;
 
-
 
-
padding:0 25px;
 
-
 
-
position:relative;
 
-
 
-
/*
 
-
right:0;
 
-
*/
 
-
 
-
z-index:2;
 
-
 
-
}
 
-
 
-
.right ul {
 
-
 
-
list-style:none;
 
-
 
-
margin:5px 0;
 
-
 
-
padding:5px 0px 5px 0px;
 
-
 
-
 
-
 
-
}
 
-
 
-
.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:#464646;
 
-
 
-
text-decoration:none;
 
-
 
-
}
 
-
 
-
.right li a:hover {
 
-
 
-
color:#001CD5;
 
-
 
-
}
 
-
 
-
.right ul ol li a{
 
-
 
-
padding:0 0 0 3px;
 
-
 
-
margin:0;
 
-
 
-
font: normal 13px Arial, Helvetica, sans-serif;
 
-
 
-
color:#38427D;
 
-
 
-
}
 
-
 
-
.right ul ol ol li a{
 
-
 
-
padding:0 0 0 3px;
 
-
 
-
margin:0;
 
-
 
-
font: normal 11px Arial, Helvetica, sans-serif;
 
-
 
-
color:#2A3996;
 
-
 
-
}
 
-
 
-
h3 .monthbook a{
 
-
 
-
text-decoration: none;
 
-
 
-
font:bold 24px Arial, Helvetica, sans-serif;
 
-
 
-
color:#0B1971;
 
-
}
 
-
h3 .monthbook a:hover{
 
-
 
-
color:#001CD5;
 
-
 
-
}
 
-
/*
 
-
Cadre du bas :
 
-
*/
 
-
 
-
.bottom {
 
-
 
-
position:relative;
 
-
 
-
bottom:0;
 
-
 
-
z-index:1;
 
-
 
-
text-align:center;
 
-
 
-
float:center;
 
-
 
-
width:98%;
 
-
 
-
height:5%;
 
-
 
-
margin:0px 15px 0 0px;
 
-
 
-
padding:0 5px;
 
-
 
}
}

Revision as of 18:08, 21 October 2011

.blocbackground {

border: 1px solid #666D99;


margin: 5px 0 20px 0; padding: 0 0 20px 5px;

-webkit-box-shadow: #666666 0px 2px 3px; -moz-box-shadow: #666666 0px 2px 3px;

-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;

background: #EEF0FC; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEF0FC), to(#FFFFFF)); background: -webkit-linear-gradient(#EEF0FC, #FFFFFF); background: -moz-linear-gradient(#EEF0FC, #FFFFFF); background: -ms-linear-gradient(#EEF0FC, #FFFFFF); background: -o-linear-gradient(#EEF0FC, #FFFFFF); background: linear-gradient(#EEF0FC, #FFFFFF);

}

/* /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// Tableau /////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////

  • /


table { border: none;

border-collapse: collapse;

width: 615px;

font:normal 13px Arial, Helvetica, sans-serif;

color:#0F174D;

padding:3px;

line-height:1.8em;

}

th { font-family: monospace;

border: thin solid #6495ed;

padding: 5px;

background-color: #D0E3FA;

}

td { border: thin solid #6495ed;

padding: 5px;

text-align: center;

background-color: #ffffff;

}

table.nobordure td, table.nobordure th, table.nobordure {

  border: none; 

/*

  background-color: none;
  • /
  background: none;

}


body {

margin:0;

padding:0;

width:100%;

}

/* Classe body

  • /

.body {

margin:0;

padding:0;

}

/* /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// Body Titres /////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////

  • /

.body h1 {

font:bold 34px Arial, Helvetica, sans-serif;

color:#060D58;

padding:10px 5px;

margin:5px 2px 12px 0;

background : none;

}

.body h2 {

font:bold 24px Arial, Helvetica, sans-serif;

color:#323a3f;

padding:10px 5px;

margin:5px 2px 12px 0;

}

.body h2 span {

float:right;

color:#959595;

font:normal 12px Arial, Helvetica, sans-serif;

}

.body h3 {

font:bold 24px Arial, Helvetica, sans-serif;

color:#323a3f;

padding:10px 5px;

margin:5px 0 10px 0;

}

.body h3 span.vert{

color:#2038D8;

text-decoration:none;

}

/* /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// Body paragraphe /////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////

  • /

.body p{

font:normal 13px Arial, Helvetica, sans-serif;

color:#0F174D;

padding:5px 15px;

margin:0px 5px;

line-height:1.8em;

text-indent: 30px;

text-align: justify;

}

.noindent p{

text-indent: 0px; }

/* /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// Body Image /////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////

  • /

.body img.centerwidenoshadow {

       width:90%;

height:auto;

       /*margin:5px 10px 5px 10px;*/

padding:0;


-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;


}

.body img.centerwide{


       width:90%;

height:auto;

-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;

-webkit-box-shadow: #666666 0px 2px 3px; -moz-box-shadow: #666666 0px 2px 3px; }

/*exemple: photo memnbre équipe, c'est un flottant, utiliser .clearboth en cas de besoin*/

.body img.icon {


float:left;

margin: 8px 5px 2px 0;

width:80px;

height:auto;

border: 1px solid #666D99;

-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

-webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px;

} /* 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:left;

margin:5px 10px 5px 0;

padding:0;

width:auto;

height:auto;

}

/* /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// Body Lien /////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////

  • /

.body a {

color:#5060C9;

text-decoration:underline;

}

.body a.menu {

font:bold Arial, Helvetica, sans-serif;

margin-left:10px;

color:#060D58;

text-decoration:none;

}

.body a:hover {

color:#182AA3;

text-decoration:underline;

}

/*marge à vérif*/

.body h2.lien:hover{

background-color: #5769EA;

}


/* /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// Left /////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////

  • /


/* 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:10px 0px 10px 25px;

padding: 0 25px;

}


.left ul { /* list-style-image: url("Igem_logo.png");

  • /

list-style-image: url("Puce.png");

padding:0px 0px 0px 5px;

margin: 0px 0px 0px 30px;

clear:both; }

.left ul ul{ list-style: circle;

clear:both; }

.left ul, .left li, .left dl, .left ol { font:normal 13px Arial, Helvetica, sans-serif;

color:#0F174D;

padding:3px;

line-height:1.8em; }