legere modif
[ific.git] / project / static / css / style2.css
index dd0fb73..4754c3a 100644 (file)
@@ -100,7 +100,6 @@ nav li a{
 /*************************************************************Slideshow********************************************************************************/
 
 #slideshow{  
-    position: relative;  
     width: 360px;  
     height: 219px;  
     padding: 10px;  
@@ -130,75 +129,22 @@ nav li a{
        color: #5E5E5E;
 }      
 
-#slideshow:before, #slideshow:after{  
-    position: absolute;  
-    bottom:16px;  
-    z-index: -10;  
-    width: 50%;  
-    height: 20px;  
-    content: " ";  
-    background: rgba(0,0,0,0.1);  
-    border-radius: 50%;  
-}  
-
-#slideshow:before{  
-       left:0;  
-       transform: rotate(-4deg);  
-}  
-
-#slideshow:after{  
-       right:0;  
-       transform: rotate(4deg);  
-}  
-
-       /* gestion des dimensions et débordement du conteneur */  
-#slideshow .container{  
-       position:relative;  
-       width: 360px;  
-       height: 219px;  
-       overflow: hidden;  
-}  
-       
-    /* un petit espace gris pour la timeline */  
-#slideshow .container:after{  
-       position:absolute;  
-       bottom: 0; left:0;  
-       content: " ";  
-       width: 100%;  
-       /*height: 1px;  */
-       background: #999;  
-}  
-    /* 
-       le conteneur des slides 
-       en largeur il fait 100% x le nombre de slides 
-    */  
-#slideshow .slider{  
-       position: absolute;  
-       left:0; top:0;  
-       width: 400%;  
-       height: 219px;  
-}  
+#marquee a:hover{
+       color: #911735;
+}      
 
-       /* annulation des marges sur figure */  
-#slideshow figure{  
-       position:relative;  
-       display:inline-block;  
+.banner { position: relative; overflow: auto; }
+    .banner li { list-style: none; }
+        .banner ul li { float: left; }
+               
+/* annulation des marges sur figure */  
+.banner figure{  
        padding:0; margin:0;  
-}  
-       
-    /* petit effet de vignette sur les images */  
-#slideshow figure:after{  
-       position: absolute;  
-       display:block;  
-       content: " ";  
-       top:0; left:0;  
-       width: 100%; 
-       height: 100%;  
-       box-shadow: 0 0 30px rgba(0,0,0, 0.3) inset;  
+       position: relative;
 }  
 
-           /* styles des légendes */  
-#slideshow figcaption{  
+/* styles des légendes */  
+.banner figcaption{  
        position:absolute;  
        left:0; right:0; bottom: 0;  
        padding: 10px;  
@@ -209,51 +155,17 @@ nav li a{
        height:auto;
 }  
 
-#slideshow figcaption h5{  
+.banner figcaption h5{  
        margin: 0px 0px 5px 0px;
        font-size:14px;
        color: #fff;  
 }  
 
-#slideshow figcaption p{  
+.banner figcaption p{  
        margin: 0px;
        font-size:12px;
        color: #fff;  
 }  
-       
-       /* fonction d'animation, faut pas que j'oublie de prefixer ! */  
-@keyframes slider{  
-       0%, 20%, 100%   { left: 0 }  
-       25%, 45%        { left: -100% }  
-       50%, 70%        { left: -200% }  
-       75%, 95%        { left: -300% }  
-}  
-
-#slideshow .slider{  
-       animation: slider 22s infinite;  
-}  
-
-#timeline{  
-       position: absolute;  
-       background: #999;  
-       bottom: 8px;  
-       left: 10px;  
-       height: 1px;  
-       background: rgb(214,98,13);  
-       background: rgba(214,98,13,.8);  
-       width: 0;  
-       /* fonction d'animation  
-       animation: timeliner 22s infinite;  */ 
-}  
-
-@keyframes timeliner{  
-       0%, 25%, 50%, 75%, 100% { width: 0;     }  
-       20%, 45%, 70%, 90%      { width: 360px; }  
-}  
-
-#slideshow figcaption{  
-       animation: figcaptionner 32s infinite;  
-}  
   
 
 /*************************************************************Slideshow********************************************************************************/ 
@@ -263,6 +175,14 @@ bandeau{
        display: block;
 }
 
+table{
+       font-size: 12px;
+}
+
+table td{
+       padding: 12px 20px 12px 8px;
+}
+
 article, section, .outil{
 display:inline-block;
 }
@@ -341,6 +261,15 @@ p{
 .gauche p{
        line-height: 20px;
 }
+
+.reseau a{
+       text-decoration: none;
+       color:#5e5e5e;
+}
+
+.reseau a:hover{
+       color: #911735;
+}
        
 /* Cibler les éléments <li> appartenant à un élément de classe "icone" */
 .icone li{
@@ -488,7 +417,15 @@ input, textarea{
 
 
 /*********************************************************************** Bloc de Gauche / Droite ***************************************************************************/
-
+.gauche input[type="submit"]{
+ cursor:pointer;
+ background-color: #911735;
+ border: 0 none;
+ padding: 8px;
+ color: #fff;
+ font-weight: bold;
+}
+       
 #containt_principal .gauche{
        float: left;
        max-width: 700px;
@@ -556,15 +493,38 @@ margin-top: 20px;
        line-height:20px;
 }
 
+%vertical-align {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.droit a{
+       text-decoration:none;
+       font-size:13px;
+       color:#5e5e5e;
+       font-weight: normal;
+       width: 100%;
+       padding-right: 6px;
+       vertical-align:middle;
+    display: table-cell;
+}
+
+.droit a:hover, .bloc_right a:hover{
+       color: #911735;
+}
+
 .bloc_right a{
        text-decoration:none;
        font-size:13px;
        color:#5e5e5e;
-       margin-top: 20px;
        font-weight: normal;
-       display: block;
+       padding-right: 6px;
 }
 
+
 bloc-left li, bloc-right li{
        padding-left:20px;
 }
@@ -612,13 +572,78 @@ bloc-left li, bloc-right li{
        /*overflow:hidden;*/
 }
 
+#filariane{
+       margin-top: -4px;
+}
+
+#filariane li {
+       margin: 0px 6px 8px 0px;
+       list-style: none;
+       display: inline-block;
+       font-size: 11px;
+}
+
+#filariane li a{
+       text-decoration: none;
+       color: #5E5E5E;
+       margin-right: 6px;
+}
+
+#filariane li a:hover{
+       color: #911735;
+}
+
+.gauche h1{
+       margin-bottom: 4px;
+}
+
+.gauche .date{
+       margin-bottom: 20px;
+}
+
+.texte img{
+       max-width: 688px;
+       padding: 5px;
+       background-color: #FFFFFF;
+       border: 1px solid #DDDDDD;
+}
+
+.texte ul{
+       margin-left: 20px;
+       padding-top: 11px;
+       padding-bottom: 7px;
+       list-style: none;
+}
+
+.texte ul li{
+       margin-bottom: 6px;
+       font-size: inherit;
+       padding-left: 20px;
+       font-size: 12px;
+       background: url(../img/puce.png) left center no-repeat;
+       line-height: 20px;
+}
+
+.texte ul li a{
+       color: #5E5E5E;
+       text-decoration: none;
+}
+
+
+.texte .imgD{
+       max-width: 300px;
+       float: left;
+       margin-right: 16px;
+}
+
 .droit{
-       width:218px;
        height:71px;
        background-color:#fdfdfd;
        margin-top:20px;
        border-radius: 2px 2px 2px 2px;  
        border: 1px solid #DDDDDD;
+       display: table;
+    width: 100%;
 }
 
 .side{
@@ -630,7 +655,7 @@ bloc-left li, bloc-right li{
        text-align:justify;
 }
 
-.side_last{
+.side:last-child{
        margin-left:20px;
        margin-right:20px;
        margin-top:12px;