project/static/css/style2.css

   1 @charset "utf-8";
   2 /* CSS Document */
   3
   4
   5 body{
   6         margin:0 auto;
   7         font-size: 62.5%;
   8         background-image:url(../img/fond.jpg);
   9         font-family: Arial, Helvetica, sans-serif;
  10         color: #5E5E5E;
  11 }
  12
  13 #containt_principal{
  14         width:940px;
  15         margin:0 auto;
  16 }
  17
  18 header{
  19         width:940px;
  20         height:184px;
  21         background-image:url(../img/header2.jpg);
  22 }
  23
  24 ul{
  25         margin:0;
  26         padding:0;
  27 }
  28
  29 nav{
  30         margin-bottom:30px;
  31         border-up: 1px solid #cccccc;
  32         border-left: 1px solid #cccccc;
  33         border-bottom: 1px solid #cccccc;
  34         border-radius: 2px 2px 2px 2px;
  35     box-shadow: 0 0 2px rgba(0,0,0, 0.1);
  36         overflow: hidden;
  37 }
  38
  39 nav li{
  40         width:13%;
  41         background:url(../img/bgmenu2.png) right;
  42         opacity:1;
  43         float: left;
  44         list-style: none;
  45 }
  46
  47 nav li:hover{
  48         opacity:0.70;
  49 }
  50
  51 nav li a{
  52         font-size: 14px;
  53         color:#585858;
  54         text-decoration:none;
  55         line-height:43px;
  56         height: 43px;
  57         display: block;
  58         text-align: center;
  59 }
  60
  61 .rub1{
  62         border-top:4px solid #74b0d4;
  63         width:9%;
  64 }
  65
  66 .rub1 img{
  67         margin-top: 13px;
  68 }
  69
  70
  71 .rub2{
  72         border-top:4px solid #ebc634;
  73 }
  74
  75 .rub3{
  76         border-top:4px solid #88b43e;
  77 }
  78
  79 .rub4{
  80         border-top:4px solid #744b82;
  81 }
  82
  83 .rub5{
  84         border-top:4px solid #d82a36;
  85 }
  86
  87 .rub6{
  88         border-top:4px solid #6ea2c1;
  89 }
  90
  91 .rub7{
  92         border-top:4px solid #f7d034;
  93 }
  94
  95 .rub8{
  96         border-top:4px solid #88b43e;
  97         /*border-right:1px solid #cdcdcd;*/
  98 }
  99
 100 /*************************************************************Slideshow********************************************************************************/
 101
 102 #slideshow{
 103     width: 360px;
 104     height: 219px;
 105     padding: 10px;
 106     margin: 0 auto;
 107     border: 1px solid #ddd;
 108     background: #FFF;
 109     border-radius: 2px 2px 2px 2px;
 110     /*box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);*/
 111 }
 112
 113 .kk ul{
 114         background-color:#000099;
 115 }
 116
 117 #marquee{
 118     height: 36px;
 119         padding:0 10px;
 120     margin-top: 21px;
 121     background: #FFF;
 122     border-radius: 2px 2px 2px 2px;
 123          border: 1px solid #ddd;
 124     /*box-shadow: 0 0 3px rgba(0,0,0, 0.2);  */
 125 }
 126
 127 #marquee a{
 128         text-decoration: none;
 129         color: #5E5E5E;
 130 }
 131
 132 #marquee a:hover{
 133         color: #911735;
 134 }
 135
 136 .banner { position: relative; overflow: auto; }
 137     .banner li { list-style: none; }
 138         .banner ul li { float: left; }
 139
 140 /* annulation des marges sur figure */
 141 .banner figure{
 142         padding:0; margin:0;
 143         position: relative;
 144 }
 145
 146 /* styles des légendes */
 147 .banner figcaption{
 148         position:absolute;
 149         left:0; right:0; bottom: 0;
 150         padding: 10px;
 151         margin:0;
 152         text-align:left;
 153         background: #8c0829;
 154         opacity:0.9;
 155         height:auto;
 156 }
 157
 158 .banner figcaption h5{
 159         margin: 0px 0px 5px 0px;
 160         font-size:14px;
 161         color: #fff;
 162 }
 163
 164 .banner figcaption p{
 165         margin: 0px;
 166         font-size:12px;
 167         color: #fff;
 168 }
 169
 170
 171 /*************************************************************Slideshow********************************************************************************/
 172 bandeau{
 173         overflow: hidden;
 174         margin-bottom: 34px;
 175         display: block;
 176 }
 177
 178 table{
 179         font-size: 12px;
 180 }
 181
 182 table td{
 183         padding: 12px 20px 12px 8px;
 184 }
 185
 186 article, section, .outil{
 187 display:inline-block;
 188 }
 189
 190 .forml{
 191         float:right;
 192         width:215px;
 193         position:relative;
 194 }
 195
 196 .forml, .reseau{
 197         display:block;
 198 }
 199
 200 #containt_principal bandeau .outil{
 201         float:right;
 202 }
 203
 204 article{
 205         position:absolute;
 206         width:300px;
 207         height:240px;
 208         text-align:justify;
 209         margin-left:21px;
 210         background-color:#fff;
 211         border-radius: 2px 2px 2px 2px;
 212     border: 1px solid #ddd;
 213 }
 214
 215 .reseau{
 216         width:215px;
 217         height:180px;
 218         text-align:justify;
 219         margin-left:21px;
 220         margin-top:60px;
 221         padding-top:1px;
 222         margin-right:0px;
 223         background-color:#fff;
 224         border-radius: 2px 2px 2px 2px;
 225         border: 1px solid #ddd;
 226     /*box-shadow: 0 0 3px rgba(0,0,0, 0.2); */
 227 }
 228
 229 aside .reseau{
 230         margin-left: 0px;
 231 }
 232
 233 aside .outil{
 234         margin-bottom: 34px;
 235 }
 236
 237 article h4, article p, .reseau h4, .reseau p{
 238         padding-left:11px;
 239         padding-right:11px;
 240         line-height:18px;
 241 }
 242
 243 h1{
 244         color:#5e5e5e;
 245         margin-bottom:32px;
 246 }
 247
 248 h4{
 249         font-size:15px;
 250         font-weight:bold;
 251         color:#5e5e5e;
 252         margin-bottom:3px;
 253         margin-top: 10px;
 254 }
 255
 256 p{
 257         font-size:12px;
 258         color:#5e5e5e;
 259 }
 260
 261 .gauche p{
 262         line-height: 20px;
 263 }
 264
 265 .reseau a{
 266         text-decoration: none;
 267         color:#5e5e5e;
 268 }
 269
 270 .reseau a:hover{
 271         color: #911735;
 272 }
 273
 274 /* Cibler les éléments <li> appartenant à un élément de classe "icone" */
 275 .icone li{
 276         width: 27px;
 277         height: 35px;
 278         display: block;
 279         background: url("../img/rs6.gif") no-repeat;
 280         margin-left:11px;
 281         margin-right:11px;
 282 }
 283
 284 .icone .icone-1 { background-position: left top; }
 285 .icone .icone-2 { background-position: left -35px; }
 286 .icone .icone-3 { background-position: left -70px; }
 287 .icone .icone-4 { background-position: left -105px; }
 288
 289 .icone .icone-1:hover { background-position: right top; }
 290 .icone .icone-2:hover { background-position: right -35px; }
 291 .icone .icone-3:hover { background-position: right -70px; }
 292 .icone .icone-4:hover { background-position: right -105px; }
 293
 294 .rs li{
 295         list-style:none;
 296 }
 297
 298 .rs{
 299         font-size:13px;
 300         line-height:35px;
 301         vertical-align:top;
 302         color:#5e5e5e;
 303 }
 304
 305 .icone,.rs{
 306         display:inline-block;
 307 }
 308
 309
 310
 311 /**************************************************************************** Recherche ***************************************************************************************/
 312 ::selection{
 313         background: #a4dcec;
 314 }
 315
 316 ::-moz-selection{
 317         background: #a4dcec;
 318 }
 319
 320 ::-webkit-selection{
 321         background: #a4dcec;
 322 }
 323
 324 ::-webkit-input-placeholder{ /* WebKit pour les navigateurs */
 325         color: #999;
 326         font-style: normal;
 327 }
 328
 329 :-moz-placeholder{ /* Support de Mozilla Firefox 4 to 18 */
 330         color: #999;
 331         font-style: normal;
 332 }
 333
 334 ::-moz-placeholder{ /* Support de Mozilla Firefox 19+ */
 335         color: #999;
 336         font-style: normal;
 337 }
 338
 339 :-ms-input-placeholder{ /* Support Pour Internet Explorer 10+ */
 340         color: #999 !important;
 341         font-style: normal;
 342 }
 343
 344 input, textarea{
 345         -webkit-font-smoothing: antialiased;
 346         -webkit-text-size-adjust: 100%;
 347         -ms-text-size-adjust: 100%;
 348         -webkit-box-sizing: border-box;
 349         -moz-box-sizing: border-box;
 350         box-sizing: border-box;
 351         outline: none;
 352 }
 353
 354 /************************************************************************* Formulaire de Recherche *******************************************************************************/
 355
 356 #searchform{
 357         display: block;
 358         margin-bottom: 15px;
 359 }
 360
 361 .fieldcontainer{
 362         display: block;
 363         position: relative;
 364         width: 100%;
 365         margin: 0 auto;
 366 }
 367
 368 .searchfield{
 369         -webkit-box-sizing: border-box;
 370         -moz-box-sizing: border-box;
 371         box-sizing: border-box;
 372         display: block;
 373         width: 215px;
 374         height:35px;
 375         float:right;
 376         padding: 5px 7px;
 377         padding-right: 43px;
 378         background-color: #fff;
 379         color: #ccc;
 380          border: 1px solid #ddd;
 381         -webkit-border-radius: 1px;
 382         -moz-border-radius: 1px;
 383         border-radius: 1px;
 384         -webkit-transition: all 0.4s linear;
 385         -moz-transition: all 0.4s linear;
 386         transition: all 0.4s linear;
 387         border-radius: 2px 2px 2px 2px;
 388         /*box-shadow: 0 0 2px rgba(0,0,0, 0.2);  */
 389 }
 390
 391 .searchfield:focus{
 392         width: 100%;
 393         color: #666;
 394 }
 395
 396 #searchbtn{
 397         position: absolute;
 398         right: 0px;
 399         top: 0px;
 400         height: 35px;
 401         width: 35px;
 402         border: 0;
 403         cursor: pointer;
 404         zoom: 1;
 405         filter: alpha(opacity=100);
 406         opacity: 1;
 407         background: transparent url('../img/search.png') top left no-repeat;
 408         -webkit-transition: all 0.4s linear;
 409         -moz-transition: all 0.4s linear;
 410         transition: all 0.4s linear;
 411 }
 412
 413 #searchbtn:hover, #searchbtn:focus{
 414         filter: alpha(opacity=65);
 415         opacity: 0.65;
 416 }
 417
 418
 419 /*********************************************************************** Bloc de Gauche / Droite ***************************************************************************/
 420 .gauche input[type="submit"]{
 421  cursor:pointer;
 422  background-color: #911735;
 423  border: 0 none;
 424  padding: 8px;
 425  color: #fff;
 426  font-weight: bold;
 427 }
 428
 429 #containt_principal .gauche{
 430         float: left;
 431         max-width: 700px;
 432         margin-right: 20px;
 433 }
 434
 435 #containt_principal aside{
 436         float: right;
 437         max-width: 220px;
 438 }
 439
 440 .bloc_left h2{
 441         padding-left: 25px;
 442         margin-top:0px;
 443         display:block;
 444         height:41px;
 445         background:url(../img/bg_bloc.jpg) left;
 446         border-bottom:1px solid #cdcdcd;
 447         border-radius: 2px 2px 2px 2px;
 448         /*border-top:1px solid #cdcdcd;
 449         box-shadow: 0 0 2px rgba(0,0,0, 0.2);  */
 450 }
 451
 452 .bloc_right h2{
 453         display:block;
 454         height:41px;
 455         line-height: 41px;
 456         background:url(../img/bg_bloc2.jpg) left;
 457         border:1px solid #ddd;
 458         border-radius: 2px 2px 2px 2px;
 459         margin: 0px;
 460         padding-left: 25px;
 461 }
 462
 463 .bloc_right .kk{
 464 background-image:none;
 465 border:none;
 466 }
 467
 468 #tagsphere{
 469 margin-top: 20px;
 470 }
 471
 472 .bloc_left a{
 473         text-decoration:none;
 474         font-size:14px;
 475         font-weight:bold;
 476         color:#5e5e5e;
 477         line-height:42px;
 478 }
 479
 480 .bloc_left span a{
 481         text-decoration:none;
 482         font-size:14px;
 483         font-weight:bold;
 484         color: #0E5481;
 485         line-height:20px;
 486 }
 487
 488 .bloc_left h3 a{
 489         text-decoration:none;
 490         font-size:13px;
 491         font-weight:bold;
 492         color:#5e5e5e;
 493         line-height:20px;
 494 }
 495
 496 %vertical-align {
 497   position: relative;
 498   top: 50%;
 499   -webkit-transform: translateY(-50%);
 500   -ms-transform: translateY(-50%);
 501   transform: translateY(-50%);
 502 }
 503
 504 .droit a{
 505         text-decoration:none;
 506         font-size:13px;
 507         color:#5e5e5e;
 508         font-weight: normal;
 509         width: 100%;
 510         padding-right: 6px;
 511         vertical-align:middle;
 512     display: table-cell;
 513 }
 514
 515 .droit a:hover, .bloc_right a:hover{
 516         color: #911735;
 517 }
 518
 519 .bloc_right a{
 520         text-decoration:none;
 521         font-size:13px;
 522         color:#5e5e5e;
 523         font-weight: normal;
 524         padding-right: 6px;
 525 }
 526
 527
 528 bloc-left li, bloc-right li{
 529         padding-left:20px;
 530 }
 531
 532 .flott {
 533         float: left;
 534         width:74px;
 535         height:55px;
 536         margin: 5px 15px 6px 0;
 537         padding:2px;
 538         border:1px solid #e4e4e4;
 539 }
 540
 541 .droite{
 542         float:left;
 543         width:96px;
 544         height:71px;
 545         margin:0 12px 0 0;
 546         vertical-align:middle;
 547 }
 548
 549 .flux{
 550         float:right;
 551         margin:12px;
 552 }
 553
 554 .bloc_left ul li.rub11{
 555         border-left:10px solid #639ec2;
 556         box-shadow: 2px 0 0 rgba(0,0,0, 0.2);
 557 }
 558
 559 .bloc_left{
 560         float:left;
 561         margin-bottom:27px;
 562         overflow:hidden;
 563         background-color:#fdfdfd;
 564         border-radius: 2px 2px 2px 2px;
 565         border: 1px solid #DDDDDD;
 566         /*box-shadow: 0 0 2px rgba(0,0,0, 0.2);  */
 567 }
 568
 569 .bloc_right{
 570         float:right;
 571         margin-bottom:34px;
 572         /*overflow:hidden;*/
 573 }
 574
 575 #filariane{
 576         margin-top: -4px;
 577 }
 578
 579 #filariane li {
 580         margin: 0px 6px 8px 0px;
 581         list-style: none;
 582         display: inline-block;
 583         font-size: 11px;
 584 }
 585
 586 #filariane li a{
 587         text-decoration: none;
 588         color: #5E5E5E;
 589         margin-right: 6px;
 590 }
 591
 592 #filariane li a:hover{
 593         color: #911735;
 594 }
 595
 596 .gauche h1{
 597         margin-bottom: 4px;
 598 }
 599
 600 .gauche .date{
 601         margin-bottom: 20px;
 602 }
 603
 604 .texte img{
 605         max-width: 688px;
 606         padding: 5px;
 607         background-color: #FFFFFF;
 608         border: 1px solid #DDDDDD;
 609 }
 610
 611 .texte ul{
 612         margin-left: 20px;
 613         padding-top: 11px;
 614         padding-bottom: 7px;
 615         list-style: none;
 616 }
 617
 618 .texte ul li{
 619         margin-bottom: 6px;
 620         font-size: inherit;
 621         padding-left: 20px;
 622         font-size: 12px;
 623         background: url(../img/puce.png) left center no-repeat;
 624         line-height: 20px;
 625 }
 626
 627 .texte ul li a{
 628         color: #5E5E5E;
 629         text-decoration: none;
 630 }
 631
 632
 633 .texte .imgD{
 634         max-width: 300px;
 635         float: left;
 636         margin-right: 16px;
 637 }
 638
 639 .droit{
 640         height:71px;
 641         background-color:#fdfdfd;
 642         margin-top:20px;
 643         border-radius: 2px 2px 2px 2px;
 644         border: 1px solid #DDDDDD;
 645         display: table;
 646     width: 100%;
 647 }
 648
 649 .side{
 650         margin-left:20px;
 651         margin-right:20px;
 652         margin-top:12px;
 653         padding-bottom:12px;
 654         border-bottom:1px solid #dcdcdc;
 655         text-align:justify;
 656 }
 657
 658 .side:last-child{
 659         margin-left:20px;
 660         margin-right:20px;
 661         margin-top:12px;
 662         padding-bottom:12px;
 663         border-bottom: none;
 664         text-align:justify;
 665 }
 666
 667 span{
 668         font-size:14px;
 669         font-weight:bold;
 670         color:#0e5481;
 671         line-height:20px;
 672 }
 673
 674 .txt{
 675         font-size:13px;
 676         font-weight:normal;
 677         color:#5e5e5e;
 678         vertical-align:middle;
 679 }
 680
 681 .text{
 682         font-size:13px;
 683         font-weight:bold;
 684         color:#616161;
 685 }
 686
 687 .text a{
 688 vertical-align:middle;
 689 }
 690
 691 h3{
 692         font-size:13px;
 693         font-weight:bold;
 694         color:#5e5e5e;
 695         margin-top:3px;
 696         margin-bottom:2px;
 697 }
 698
 699 /************************************************************************** Footer ********************************************************************************************/
 700
 701 .col1, .col2{
 702         font-size:12px;
 703         color:#7d7d7d;
 704 }
 705
 706 .foot li{
 707         display:inline-block;
 708         height:3px;
 709         width:20%;
 710 }
 711
 712 footer{
 713         width:100%;
 714         float:left;
 715         margin-bottom: 32px;
 716 }
 717
 718 footer span{
 719     font-size: 12px;
 720         font-weight: normal;
 721         padding: 0px 10px;
 722 }
 723
 724 footer span a{
 725         color: #7D7D7D;
 726         text-decoration: none;
 727 }
 728
 729 .col1{
 730         float:left;
 731 }
 732
 733 .col2{
 734         float:right;
 735 }