Team:Grenoble-EMSE-LSU/Design/Content

From 2013.igem.org

(Difference between revisions)
 
(284 intermediate revisions not shown)
Line 1: Line 1:
-
body div.back/* div.cadre*/ ul.texte
+
/********** Background **********/
 +
 
 +
body div[id="home"]
{
{
-
        z-index: 1;
+
background: #fff0e6;
-
         width: 640px;
+
}
 +
 
 +
body div[id="proj"]
 +
{
 +
background: #ffe6e6;
 +
}
 +
 
 +
body div[id="doc"]
 +
{
 +
background: #e6f5ff;
 +
}
 +
 
 +
body div[id="hp"]
 +
{
 +
background: #e6ffe6;
 +
}
 +
 
 +
body div[id="team"]
 +
{
 +
background: #f9e6ff;
 +
}
 +
 
 +
/********************/
 +
 
 +
 
 +
/********** Section **********/
 +
 
 +
body div.back
 +
{
 +
width: 100%;
 +
         min-width: 800px;
         padding: 0;
         padding: 0;
         margin: auto;
         margin: auto;
-
         /*position: relative;*/
+
         overflow: hidden;
-
         margin-top: 15px;
+
        position: absolute;
 +
         top: 0%;
 +
/*border: 1px solid blue;*/
 +
}
 +
body div.back ul.texte
 +
{
 +
    width: 70%;
 +
    padding: 0;
 +
    margin: auto;
 +
    margin-top: 28%;
 +
/*border: 1px solid red;*/
}
}
-
/***** Cadres et bordures *****/
+
/***** CEA *****/
 +
body div.back ul.texte ul.cea
 +
{
 +
    width: auto;
 +
    padding: 0;
 +
    margin: 0;
 +
    margin-left: 300px;
 +
}
 +
 
 +
body div.back ul.texte ul.list, body div.back ul.texte ol.list
 +
{
 +
    width: auto;
 +
    padding: 0;
 +
    margin: 0;
 +
    margin-left: 50px;
 +
}
 +
/********************/
 +
 
 +
/********************/
 +
 
 +
/********** Cadres et bordures **********/
-
body div.back/* div.cadre*/ ul.texte li
+
body div.back ul.texte li
{
{
-
min-height: 200px;
+
        /*min-height: 200px;*/
padding: 20px;
padding: 20px;
 +
        padding-top: 0px;
margin: 0;
margin: 0;
margin-bottom: 10px;
margin-bottom: 10px;
 +
list-style: none;
 +
text-align: justify;
border: solid 1px;
border: solid 1px;
border-radius: 5px;
border-radius: 5px;
-
list-style: none;
+
background-color: white;
-
font: normal 13px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif;
+
-
        text-align: justify;
+
-
        background-color: white;
+
}
}
-
body div.back/* div.cadre*/ ul.texte li:last-child
 
-
{
 
-
margin-bottom: 0;
 
-
}
 
-
body div/*.back div*/[id="home"] ul.texte li
+
    body div[id="team"] ul.texte li
 +
    {
 +
        min-height: 200px;
 +
    }
 +
 
 +
    body div.back ul.texte li:last-child
 +
    {
 +
        margin-bottom: 20px;
 +
    }
 +
 
 +
    body div.back ul.texte li[id="next"]
 +
    {
 +
        height: auto;
 +
        min-height: 0;
 +
        text-align: center;
 +
        border: none;
 +
        background-color: transparent;
 +
    }
 +
 
 +
/***** CEA *****/
 +
body div.back ul.texte ul.cea li, body div.back ul.texte ul.list li
{
{
-
border-color: #ff8300;
+
    min-height: 0;
 +
    padding: 0;
 +
    margin: 0;
 +
    list-style: disc;
 +
    border: none;
}
}
-
body div/*.back div*/[id="proj"] ul.texte li
+
body div.back ul.texte ol.list li
{
{
-
border-color: red;
+
    min-height: 0;
 +
    padding: 0;
 +
    margin: 0;
 +
    border: none;
}
}
-
body div.back div[id="doc"] ul.texte li
+
 
 +
body div.back ul.texte ul.list ul li
{
{
-
border-color: #00b3ff;
+
    list-style: circle;
}
}
 +
/********************/
-
body div.back div[id="hp"] ul.texte li
+
body div[id="home"] ul.texte li
{
{
-
border-color: #00c300;
+
border-color: #ff6600;
}
}
-
body div/*.back div*/[id="team"] ul.texte li
+
body div[id="proj"] ul.texte li
{
{
-
border-color: #9901c7;
+
border-color: #ff0000;
}
}
 +
body div[id="doc"] ul.texte li
 +
{
 +
border-color: #0099ff;
 +
}
-
/***** Police *****/
+
body div[id="hp"] ul.texte li
 +
{
 +
border-color: #00cc00;
 +
}
-
body div.back/* div.cadre*/ ul.texte li p, body div.back/* div.cadre*/ ul.texte li h1, body div.back/* div.cadre*/ ul.texte li h2
+
body div[id="team"] ul.texte li
 +
{
 +
border-color: #9900cc;
 +
}
 +
 
 +
/********************/
 +
 
 +
 
 +
/********** Police **********/
 +
 
 +
p, h1, h2, h3, h4, h5, ul.cea li, ul.list li, ol.list li
{
{
padding: 0;
padding: 0;
margin: 0;
margin: 0;
-
font: normal 13px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif;
+
font: normal 14px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif;
}
}
-
body div.back/* div.cadre*/ ul.texte li h1
+
/***** p et a *****/
 +
body div.back ul.texte li p strong, body div.back ul.texte li a, body div.back ul.texte li h4, body div.back ul.texte li h5
{
{
-
margin-bottom: 15px;
+
font-weight: bold;
-
font-size: 22px;
+
-
text-transform: uppercase;
+
}
}
-
body div.back/* div.cadre*/ ul.texte li h2
+
body div.back ul.texte li p em, body div.back ul.texte li h5
{
{
 +
font-style: italic;
 +
}
 +
 +
body div.back ul.texte li p sup
 +
{
 +
    vertical-align: super;
 +
    font-size: 70%;
 +
    line-height: 80%;
 +
}
 +
 +
body div.back ul.texte li p sub
 +
{
 +
    vertical-align: sub;
 +
    font-size: 70%;
 +
    line-height: 80%;
 +
}
 +
 +
body div.back ul.texte li p[id="legend"]
 +
{
 +
        margin: auto;
 +
        width: 75%;
 +
        font-size: 12px;
 +
        font-weight: bold;
 +
}
 +
 +
body div.back ul.texte li p[id="big"]
 +
{
 +
    font-size: 18px;
 +
    font-weight: bold;
 +
}
 +
 +
body div.back ul.texte li img
 +
{
 +
        padding: 0;
 +
        margin: auto;
 +
        text-align: center;
 +
/*border: 1px solid blue;*/
 +
}
 +
 +
body div.back ul.texte li a:hover
 +
{
 +
text-decoration: underline;
 +
}
 +
 +
body div.back li[id="next"] a
 +
{
 +
font: normal 18px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif;
 +
        font-weight: bold;
 +
        text-align: center;
 +
}
 +
/********************/
 +
 +
/***** h1, h2 et h3 *****/
 +
body div.back ul.texte li h1, body div.back ul.texte li h2, body div.back ul.texte li h3
 +
{
 +
        margin-top: 20px;
margin-bottom: 15px;
margin-bottom: 15px;
-
font-size: 20px;
+
font-size: 24px;
font-variant: small-caps;
font-variant: small-caps;
}
}
 +
body div.back ul.texte li h1
 +
{
 +
text-transform: uppercase;
 +
}
 +
 +
body div.back ul.texte li[id="titre"] h1[id="talke"]
 +
{
 +
text-transform: none;
 +
font-variant: small-caps;
 +
}
-
body div.back/* div.cadre*/ ul.texte li a:hover
+
body div.back ul.texte li h3
{
{
-
text-decoration: underline;
+
        font-size: 18px;
}
}
 +
/********************/
-
body div.back div[id="home"] ul.texte li h1, body div.back div[id="home"] ul.texte li h2, body div.back div[id="home"] ul.texte li a
+
/***** Couleurs *****/
 +
body div[id="home"] ul.texte li h1, body div[id="home"] ul.texte li h2, body div[id="home"] ul.texte li h3, body div[id="home"] ul.texte li a
{
{
-
color: #ff8300;
+
color: #ff6600;
}
}
-
body div.back div[id="proj"] ul.texte li h1, body div.back div[id="proj"] ul.texte li h2, body div.back div[id="proj"] ul.texte li a
+
body div[id="proj"] ul.texte li h1, body div[id="proj"] ul.texte li h2, body div[id="proj"] ul.texte li h3, body div[id="proj"] ul.texte li a
{
{
-
color: red;
+
color: #ff0000;
}
}
-
body div.back div[id="doc"] ul.texte li h1, body div.back div[id="doc"] ul.texte li h2, body div.back div[id="doc"] ul.texte li a
+
body div[id="doc"] ul.texte li h1, body div[id="doc"] ul.texte li h2, body div[id="doc"] ul.texte li h3, body div[id="doc"] ul.texte li a
{
{
-
color: #00b3ff;
+
color: #0099ff;
}
}
-
body div.back div[id="hp"] ul.texte li h1, body div.back div[id="hp"] ul.texte li h2, body div.back div[id="hp"] ul.texte li a
+
body div[id="hp"] ul.texte li h1, body div[id="hp"] ul.texte li h2, body div[id="hp"] ul.texte li h3, body div[id="hp"] ul.texte li a
{
{
-
color: #00c300;
+
color: #00cc00;
}
}
-
body div/*.back div*/[id="team"] ul.texte li h1, body div/*.back div*/[id="team"] ul.texte li h2, body div/*.back div*/[id="team"] ul.texte li a
+
body div[id="team"] ul.texte li h1, body div[id="team"] ul.texte li h2, body div[id="team"] ul.texte li h3, body div[id="team"] ul.texte li a
{
{
-
color: #9901c7;
+
color: #9900cc;
}
}
 +
/********************/
 +
 +
/********************/
 +
 +
/********** Images miniatures **********/
 +
 +
body div[id="home"] ul.texte li ul.miniature
 +
{
 +
    width: 480px;
 +
    min-height: 0;
 +
    padding: 0;
 +
    margin: auto;
 +
}
 +
 +
body div[id="home"] ul.texte li ul.miniature li
 +
{
 +
    padding: 0;
 +
    margin: 0;
 +
    border: none;
 +
    background: transparent;
 +
}
 +
 +
body div[id="home"] ul.texte li ul.miniature li a img
 +
{
 +
    width: 100px;
 +
    height: 100px;
 +
}
 +
 +
body div[id="home"] ul.texte li ul.miniature
 +
{
 +
list-style: none;
 +
        overflow: hidden;
 +
        position: relative;
 +
}
 +
 +
body div[id="home"] ul.texte li ul.miniature li
 +
        {
 +
float: left;
 +
                margin: 0 20px 0 0;
 +
}
 +
 +
body div[id="home"] ul.texte li ul.miniature li a
 +
                {
 +
                        height: 150px;
 +
display: block;
 +
                }
 +
 +
body div[id="home"] ul.texte li ul.miniature li a span
 +
                {
 +
font: normal 20px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif;
 +
position: absolute;
 +
                        left: 0px;
 +
                        top: 110px;
 +
display: none;
 +
}
 +
 +
body div[id="home"] ul.texte li ul.miniature li a:hover span
 +
                {
 +
display: block;
 +
}

Latest revision as of 03:40, 5 October 2013

/********** Background **********/

body div[id="home"] { background: #fff0e6; }

body div[id="proj"] { background: #ffe6e6; }

body div[id="doc"] { background: #e6f5ff; }

body div[id="hp"] { background: #e6ffe6; }

body div[id="team"] { background: #f9e6ff; }

/********************/


/********** Section **********/

body div.back { width: 100%; 

       min-width: 800px;
       padding: 0;
       margin: auto;
       overflow: hidden;
       position: absolute;
       top: 0%;

/*border: 1px solid blue;*/ }

body div.back ul.texte { 

   width: 70%;
   padding: 0;
   margin: auto;
   margin-top: 28%;

/*border: 1px solid red;*/ }

/***** CEA *****/ body div.back ul.texte ul.cea { 

   width: auto;
   padding: 0;
   margin: 0;
   margin-left: 300px;

}

body div.back ul.texte ul.list, body div.back ul.texte ol.list { 

   width: auto;
   padding: 0;
   margin: 0;
   margin-left: 50px;

} /********************/

/********************/

/********** Cadres et bordures **********/

body div.back ul.texte li { 

       /*min-height: 200px;*/

padding: 20px; 

       padding-top: 0px;

margin: 0; margin-bottom: 10px; list-style: none; text-align: justify; border: solid 1px; border-radius: 5px; background-color: white; } 

   body div[id="team"] ul.texte li
   {
       min-height: 200px;
   }

   body div.back ul.texte li:last-child
   {
       margin-bottom: 20px;
   }

   body div.back ul.texte li[id="next"]
   {
       height: auto;
       min-height: 0;
       text-align: center;
       border: none;
       background-color: transparent;
   }

/***** CEA *****/ body div.back ul.texte ul.cea li, body div.back ul.texte ul.list li { 

   min-height: 0;
   padding: 0;
   margin: 0;
   list-style: disc;
   border: none;

}

body div.back ul.texte ol.list li { 

   min-height: 0;
   padding: 0;
   margin: 0;
   border: none;

}


body div.back ul.texte ul.list ul li { 

   list-style: circle;

} /********************/

body div[id="home"] ul.texte li { border-color: #ff6600; }

body div[id="proj"] ul.texte li { border-color: #ff0000; }

body div[id="doc"] ul.texte li { border-color: #0099ff; }

body div[id="hp"] ul.texte li { border-color: #00cc00; }

body div[id="team"] ul.texte li { border-color: #9900cc; }

/********************/


/********** Police **********/

p, h1, h2, h3, h4, h5, ul.cea li, ul.list li, ol.list li { padding: 0; margin: 0; font: normal 14px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif; }

/***** p et a *****/ body div.back ul.texte li p strong, body div.back ul.texte li a, body div.back ul.texte li h4, body div.back ul.texte li h5 { font-weight: bold; }

body div.back ul.texte li p em, body div.back ul.texte li h5 { font-style: italic; }

body div.back ul.texte li p sup { 

   vertical-align: super;
   font-size: 70%;
   line-height: 80%;

}

body div.back ul.texte li p sub { 

   vertical-align: sub;
   font-size: 70%;
   line-height: 80%;

}

body div.back ul.texte li p[id="legend"] { 

       margin: auto;
       width: 75%;
       font-size: 12px;
       font-weight: bold;

}

body div.back ul.texte li p[id="big"] { 

   font-size: 18px;
   font-weight: bold;

}

body div.back ul.texte li img { 

       padding: 0;
       margin: auto;
       text-align: center;

/*border: 1px solid blue;*/ }

body div.back ul.texte li a:hover { text-decoration: underline; }

body div.back li[id="next"] a { font: normal 18px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif; 

       font-weight: bold;
       text-align: center;

} /********************/

/***** h1, h2 et h3 *****/ body div.back ul.texte li h1, body div.back ul.texte li h2, body div.back ul.texte li h3 { 

       margin-top: 20px;

margin-bottom: 15px; font-size: 24px; font-variant: small-caps; } body div.back ul.texte li h1 { text-transform: uppercase; }

body div.back ul.texte li[id="titre"] h1[id="talke"] { text-transform: none; font-variant: small-caps; }

body div.back ul.texte li h3 { 

       font-size: 18px;

} /********************/

/***** Couleurs *****/ body div[id="home"] ul.texte li h1, body div[id="home"] ul.texte li h2, body div[id="home"] ul.texte li h3, body div[id="home"] ul.texte li a { color: #ff6600; }

body div[id="proj"] ul.texte li h1, body div[id="proj"] ul.texte li h2, body div[id="proj"] ul.texte li h3, body div[id="proj"] ul.texte li a { color: #ff0000; }

body div[id="doc"] ul.texte li h1, body div[id="doc"] ul.texte li h2, body div[id="doc"] ul.texte li h3, body div[id="doc"] ul.texte li a { color: #0099ff; }

body div[id="hp"] ul.texte li h1, body div[id="hp"] ul.texte li h2, body div[id="hp"] ul.texte li h3, body div[id="hp"] ul.texte li a { color: #00cc00; }

body div[id="team"] ul.texte li h1, body div[id="team"] ul.texte li h2, body div[id="team"] ul.texte li h3, body div[id="team"] ul.texte li a { color: #9900cc; } /********************/

/********************/

/********** Images miniatures **********/

body div[id="home"] ul.texte li ul.miniature { 

   width: 480px;
   min-height: 0;
   padding: 0;
   margin: auto;

}

body div[id="home"] ul.texte li ul.miniature li { 

   padding: 0;
   margin: 0;
   border: none;
   background: transparent;

}

body div[id="home"] ul.texte li ul.miniature li a img { 

   width: 100px;
   height: 100px;

}

body div[id="home"] ul.texte li ul.miniature { list-style: none; 

       overflow: hidden;
       position: relative;

}

body div[id="home"] ul.texte li ul.miniature li 

       {

float: left; 

               margin: 0 20px 0 0;

}

body div[id="home"] ul.texte li ul.miniature li a 

               {
                       height: 150px;

display: block; 

               }

body div[id="home"] ul.texte li ul.miniature li a span 

               {

font: normal 20px Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif; position: absolute; 

                       left: 0px;
                       top: 110px;

display: none; }

body div[id="home"] ul.texte li ul.miniature li a:hover span 

               {

display: block; }

Retrieved from "http://2013.igem.org/Team:Grenoble-EMSE-LSU/Design/Content"