integration/css/common.css
changeset 18 bf333fd74eee
child 20 c86141a8570d
equal deleted inserted replaced
17:5229a85e53e7 18:bf333fd74eee
       
     1 body{
       
     2 	background-color: #e9ecf0;
       
     3 	height: 100%;
       
     4 }
       
     5 a{
       
     6 	color:#000;
       
     7 }
       
     8 .wrap{
       
     9 	min-height:100%;
       
    10 	background-color: #FFF;
       
    11 	width: 960px;
       
    12 	margin: 0 auto;
       
    13 	font-family: "Times New Roman";
       
    14 	font-size: 13px;
       
    15 	-moz-box-shadow: 0 0 14px 5px #888;
       
    16   	-webkit-box-shadow: 0 0 14px 5px #888;
       
    17   	box-shadow: 0 0 14px 5px #888;
       
    18   	padding-bottom: 16px;
       
    19   	height: 100%;
       
    20 }
       
    21 /* header */
       
    22 .header{
       
    23 	position: relative;
       
    24 	height: 128px;
       
    25 	margin-bottom: 1px;
       
    26 }
       
    27 /* header > logo */
       
    28 .logo{
       
    29 	width: 164px;
       
    30 	height: 105px;
       
    31 	background: url(../img/back-logo.png) 0 0 no-repeat;
       
    32 	top: 0;
       
    33 	left: 66px;
       
    34 	position: absolute;
       
    35 }
       
    36 .logo .date{
       
    37     height: 66px;
       
    38     left: 93px;
       
    39     position: absolute;
       
    40     text-align: center;
       
    41     top: 4px;
       
    42     width: 47px;
       
    43 }
       
    44 .logo .date .year{
       
    45 	font-size: 40px; 
       
    46 	display: block;
       
    47 }
       
    48 .logo .date .text{
       
    49 	font-size: 10px;
       
    50 	display: block;
       
    51 }
       
    52 /* header > recherche-wrap */
       
    53 .recherche-wrap{
       
    54 	position: absolute;
       
    55 	left: 324px;
       
    56 	padding-top: 10px;
       
    57 }
       
    58 .recherche-wrap h1{
       
    59 	margin-bottom: 4px;
       
    60 }
       
    61 
       
    62 .recherche-wrap .input-recherche{
       
    63 	width: 218px;
       
    64 	height: 24px;
       
    65 	padding: 0 30px 0 6px;
       
    66 	border: 1px solid black;
       
    67 	margin-right: 2px;
       
    68 }
       
    69 .recherche-wrap p input, .recherche-wrap p a{
       
    70 	float: left;
       
    71 }
       
    72 .recherche-wrap form p{
       
    73 	position: relative;
       
    74 }
       
    75 .recherche-wrap form p .photo{
       
    76 	position: absolute;
       
    77 	width: 18px;
       
    78 	height: 18px;
       
    79 	background: url(../img/photo.jpg) no-repeat 2px 4px;
       
    80 	left: 230px;
       
    81 	top: 2px;
       
    82 	z-index: 2;
       
    83 }
       
    84 .recherche-wrap .recherche-submit{
       
    85 	width: 54px;
       
    86 	height: 26px;
       
    87 	cursor: pointer;
       
    88 	border: none;
       
    89 	margin-right: 6px;
       
    90 	background-color: #000;
       
    91 	background-image: url(../img/zoom-button.png);
       
    92 	background-repeat: no-repeat;
       
    93 	background-position: 20px 6px;
       
    94 }
       
    95 .plus-button{
       
    96 	width: 30px;
       
    97 	height: 26px;
       
    98 	display: block;
       
    99 	background-color: #000;
       
   100 	background-image: url(../img/plus-button.png);
       
   101 	background-repeat: no-repeat;
       
   102 	background-position: 8px 6px;
       
   103 }
       
   104 .plus-button:hover, .recherche-submit:hover{
       
   105 	background-color: #333;
       
   106 }
       
   107 /* header > header-menu */
       
   108 .header-menu{
       
   109 	background: url(../img/bg-nav-left.png) repeat-x 0 0;
       
   110 	position: absolute;
       
   111 	height: 39px;
       
   112 	top: 89px;
       
   113 	width: 716px;
       
   114 	left: -2px;
       
   115 }
       
   116 .header-menu li{
       
   117 	float: left;
       
   118 	line-height: 28px;
       
   119 	padding: 8px 10px 0 10px;
       
   120 }
       
   121 .header-menu li .home{
       
   122 	width: 28px;
       
   123 	height: 28px;
       
   124 	display: block;
       
   125 	background:url(../img/home-sprite.png) 0 -28px no-repeat;
       
   126 }
       
   127 .header-menu li .home:hover{
       
   128 	background-position: 0 0;
       
   129 }
       
   130 .header-menu li a{
       
   131 	font-size: 16px;
       
   132 	color: #e4e36e;
       
   133 	text-decoration: none;
       
   134 }
       
   135 .header-menu li a:hover{
       
   136 	color: #FFF;
       
   137 }
       
   138 /* header > login-wrap */
       
   139 .login-wrap{
       
   140 	padding-top: 10px;
       
   141 	position: absolute;
       
   142 	left: 727px;
       
   143 }
       
   144 .login-wrap form p, .login-wrap h2{
       
   145 	margin-bottom: 4px;
       
   146 }
       
   147 .login-wrap input{
       
   148 	width: 160px;
       
   149 	height: 19px;
       
   150 	border: 1px solid #656565;
       
   151 	line-height: 19px;
       
   152 	padding: 0 3px;
       
   153 }
       
   154 .login-wrap .submit-wrap input{
       
   155 	float: left;
       
   156 }
       
   157 .login-wrap .password{
       
   158 	width: 134px;
       
   159 }
       
   160 .login-wrap .submit-button{
       
   161 	background-color: #000;
       
   162 	color: #FFF;
       
   163 	height: 21px;
       
   164 	width: 26px;
       
   165 	cursor: pointer;
       
   166 	border: none;
       
   167 }
       
   168 .login-wrap .submit-button:hover{
       
   169 	background-color: #333;
       
   170 }
       
   171 .password-lost{
       
   172 	padding-left: 18px;
       
   173 }
       
   174 .password-lost a {
       
   175 	color: #000;
       
   176 	text-decoration: none;
       
   177 	font-size: 10px;
       
   178 }
       
   179 .password-lost a:hover{
       
   180 	text-decoration: underline;
       
   181 }
       
   182 /* dossier-documentaire */
       
   183 .dossier-documentaire{
       
   184 	padding: 0 6px;
       
   185 	position: absolute;
       
   186 	left: 714px;
       
   187 	top:128px;
       
   188 	z-index: 10;background-color:rgba(0,125,173,.8);
       
   189 }
       
   190 .dossier-documentaire-inner{
       
   191 	padding: 12px 4px;
       
   192 	width: 224px;background: url(../img/documentaire-bg.jpg);
       
   193 }
       
   194 .dossier-documentaire h2{
       
   195 	height: 18px;
       
   196 	line-height: 18px;
       
   197 	color: #FFF;
       
   198 	border-bottom: 1px solid #FFF;
       
   199 }
       
   200 .dossier-documentaire ul{
       
   201 	padding: 6px 0;
       
   202 }
       
   203 .dossier-documentaire ul li{
       
   204 	width: 224px;
       
   205 }
       
   206 .dossier-documentaire ul li a{
       
   207 	display: block;
       
   208 	overflow: auto;
       
   209 	padding: 1px 0;
       
   210 }
       
   211 .dossier-documentaire ul li a:hover{
       
   212  	background-color:rgba(221,221,221,.6);
       
   213 }
       
   214 .dossier-documentaire .documentaire-texte, .dossier-documentaire img{
       
   215 	float: left;	
       
   216 }
       
   217 .dossier-documentaire img{
       
   218 	margin-right: 6px;
       
   219 }
       
   220 .dossier-documentaire .documentaire-texte{
       
   221 	color: #FFF;
       
   222 	max-width: 142px;
       
   223 	display: block;
       
   224 }
       
   225 .documentaire-texte h3{
       
   226 	font-weight: bold;
       
   227 	margin-bottom: 2px;
       
   228 }
       
   229 .documentaire-texte p{
       
   230 	font-size: 11px;
       
   231 }
       
   232 .documentaire-lien {
       
   233 	width: 168px;
       
   234 	display: block;
       
   235 	height: 16px;
       
   236 	background-image: url(../img/documentaire-lien.jpg);
       
   237 	background-repeat: no-repeat;
       
   238 	background-position: 0 0;
       
   239 	width: 225px;
       
   240 	margin-bottom: 10px;
       
   241 }
       
   242 .documentaire-lien:hover{
       
   243 	background-position: 0 -16px;
       
   244 }
       
   245 .dossier-button{
       
   246 	background: url("../img/dossier-icon.jpg") no-repeat scroll 6px 5px #007DAD;
       
   247     color: #FFFFFF;
       
   248     height: 27px;
       
   249     left: 714px;
       
   250     line-height: 27px;
       
   251     padding-left: 40px;
       
   252     position: absolute;
       
   253     text-decoration: none;
       
   254     top: 101px;
       
   255     width: 208px;
       
   256 }
       
   257 .dossier-button:hover{
       
   258 	color: #ddd;
       
   259 }
       
   260 /* content-wrap */
       
   261 .content-wrap{
       
   262 	width:950px;
       
   263 	padding: 0 5px;
       
   264 }
       
   265 /* content-wrap > frise */
       
   266 .frise{
       
   267 	background: #333;
       
   268 	height: 114px;
       
   269     position: relative;
       
   270 }
       
   271 .streamgraph {
       
   272     position: absolute; left: 0; width: 100%; top: 0; height: 100%;
       
   273     background: #fff;
       
   274 }
       
   275 .frise .ui-slider-horizontal {
       
   276     height: 20px;
       
   277     position: absolute;
       
   278     width: 100%;
       
   279     bottom: 0;
       
   280     background: none repeat scroll 0 0 transparent;
       
   281    	border: none;
       
   282     -webkit-border-radius: 0;
       
   283   	-moz-border-radius: 0;
       
   284   	border-radius: 0;
       
   285 }
       
   286 .frise  .ui-slider-horizontal .ui-slider-handle{
       
   287 	top: inherit;
       
   288 	bottom: 0;
       
   289 }
       
   290 .frise .ui-slider-horizontal .ui-slider-range{
       
   291 	background: none repeat scroll 0 0 transparent;
       
   292 }
       
   293 .ui-slider-handle.ui-state-default.ui-corner-all{
       
   294 	cursor: pointer;
       
   295 	width: 19px;
       
   296 	height: 28px;
       
   297 	background: url(../img/frise-cursor.png) -1px 0 no-repeat;
       
   298 	border: none;
       
   299 	-webkit-border-radius: 0;
       
   300   	-moz-border-radius: 0;
       
   301   	border-radius: 0;
       
   302 }
       
   303 /* content-wrap > cluster */
       
   304 .cluster-containment{
       
   305 	position: absolute;
       
   306 	height: 22px;
       
   307 }
       
   308 .cluster-wrap{
       
   309 	position: relative;
       
   310 	height: 22px;
       
   311 	border-top: 1px solid #313131;
       
   312 	border-bottom: 1px solid #313131;
       
   313 	margin-bottom: 1px;
       
   314 }
       
   315 .cluster-visible{
       
   316 	left: 20px;
       
   317 	position: absolute;
       
   318 	width: 912px;
       
   319 	margin: 0 auto;
       
   320 	height: 22px;
       
   321 	overflow: hidden;
       
   322 }
       
   323 .cluster li:first-child{
       
   324 	background: none;
       
   325 }
       
   326 .cluster li{
       
   327 	padding-top: 4px;
       
   328 	float: left;
       
   329 	padding: 2px 4px 0 6px;
       
   330 	line-height: 22px;
       
   331 	background: url(../img/cluster-item-bar.jpg) no-repeat 0 6px;
       
   332 }
       
   333 .cluster li a{
       
   334 	padding: 0 16px;
       
   335 	text-decoration: none;
       
   336 	color: #000;
       
   337 	font-style: italic;
       
   338 	height: 18px;
       
   339 	line-height: 18px;
       
   340 	display: block;
       
   341 }
       
   342 .cluster li a:hover{
       
   343 	background-color: #c51810;
       
   344 	color: #FFF;
       
   345 }
       
   346 
       
   347 .cluster-arrow{
       
   348 	z-index: 2;
       
   349 	position: absolute;
       
   350 	width: 19px;
       
   351 	height: 22px;
       
   352 	display: block;
       
   353 	background: url(../img/cluster-arrows.png) no-repeat;
       
   354 }
       
   355 .cluster-arrow.arrow-right{
       
   356 	right: 0;
       
   357 	background: url(../img/cluster-arrows.png) no-repeat -19px 0;
       
   358 }
       
   359 .cluster-arrow.arrow-right:hover{
       
   360 	background-position: -19px -22px;
       
   361 }
       
   362 .cluster-arrow.arrow-right:active{
       
   363 	background-position: -19px -44px;
       
   364 }
       
   365 .cluster-arrow.arrow-left:hover{
       
   366 	background-position: 0 -22px;
       
   367 }
       
   368 .cluster-arrow.arrow-left:active{
       
   369 	background-position: 0 -44px;
       
   370 }
       
   371 /* content */
       
   372 .content{
       
   373 	height: 100%;
       
   374 	width: 950px;
       
   375 	border-top:2px solid #c51810;
       
   376 	border-bottom:2px solid #c51810;
       
   377 	padding: 1px 0;
       
   378 
       
   379 }
       
   380 .content-left,.content-right{
       
   381 	float: left;
       
   382 }
       
   383 /* content > content-right */
       
   384 .content-right{
       
   385 	width: 761px;
       
   386 	padding-left: 1px;
       
   387 }
       
   388 /* content > content-left */
       
   389 .content-left{
       
   390 	width: 188px;
       
   391 }
       
   392 .content-left h2{
       
   393 	padding: 10px 0 10px 10px;
       
   394 	font-size: 26px;
       
   395 	line-height: 26px;
       
   396 	border-bottom: 1px solid #c51810;
       
   397 	margin-bottom: 1px;
       
   398 	width: 176px;
       
   399 }
       
   400 .widget-wrapper{
       
   401 	background: url(../img/border-dotted.png) repeat-y 187px 0 #eeeeee;
       
   402 	padding-right: 2px;
       
   403 }
       
   404 .widget-wrap{
       
   405 	height: 100%;
       
   406 	min-height: 320px;
       
   407 	padding: 14px 0;
       
   408 	
       
   409 	border: 5px solid #e0dde0;
       
   410 }
       
   411 .widget-wrap .widget{
       
   412 	width: 160px;
       
   413 	margin: 0 auto;
       
   414 }
       
   415 .widget-wrap .widget h3{
       
   416 	padding: 2px 0;
       
   417 	border-bottom: 1px solid  #c51810;
       
   418 	margin-bottom: 4px;
       
   419 }
       
   420 .widget-wrap .widget h3 a{
       
   421 	font-size: 16px;
       
   422 	text-decoration: none;
       
   423 	color : #c51810;
       
   424 	padding-left: 12px;
       
   425 	background-position: 0px 6px;
       
   426 	background-repeat: no-repeat;
       
   427 	background-image: url(../img/dossier-title-arrow-hide.jpg);
       
   428 
       
   429 }
       
   430 .widget-wrap .widget h3 .open{
       
   431 	background-position: 0px 7px;
       
   432 	background-image: url(../img/dossier-title-arrow-show.jpg);
       
   433 }
       
   434 /* content-left > header-documentaire */
       
   435 .content-wrap .header-documentaire{
       
   436 	height: 34px;
       
   437 	width: 100%;
       
   438 	padding-bottom: 1px;
       
   439 	border-bottom: 4px solid #313131;
       
   440 }
       
   441 .header-documentaire .retour{
       
   442 	padding-left: 12px;
       
   443 	display: block;
       
   444 	line-height: 34px;
       
   445 	font-size: 24px;
       
   446 	background-color: #007dad;
       
   447 	color: #FFF;
       
   448 	width: 176px;
       
   449 	text-decoration: none;
       
   450 }
       
   451 .header-documentaire .retour:hover{
       
   452 	background-color: #4fa3c4;
       
   453 }
       
   454 .header-documentaire h2{
       
   455 	padding-left: 50px;
       
   456 	background: url(../img/header-documentaire-titre-icon.jpg) no-repeat 12px 6px;
       
   457 	color: #007dad;
       
   458 	font-size: 24px;
       
   459 	line-height: 34px;
       
   460 }
       
   461 
       
   462 .header-documentaire .retour, .header-documentaire h2{
       
   463 	float: left;
       
   464 }
       
   465 /* widget (blue) */
       
   466 .documentaire.content-left .widget-wrap{
       
   467 	background-color: #4fa3c4;
       
   468 	border: 5px solid #007dad;
       
   469 	color: #FFF;
       
   470 }
       
   471 .documentaire.content-left .widget h3{
       
   472 	border-bottom: 1px solid #000;
       
   473 }
       
   474 .documentaire.content-left .widget h3 a,
       
   475 .documentaire.content-left .widget-inner .filtre-date label,
       
   476 .documentaire.content-left .widget-inner h4, 
       
   477 .documentaire.content-left .widget-inner a{
       
   478 	color: #FFF;
       
   479 }
       
   480 .content-left.documentaire .widget-wrap .widget h3 a{
       
   481 	background-image: url(../img/dossier-documentaire-title-arrow-hide.jpg);
       
   482 }
       
   483 .content-left.documentaire .widget-wrap .widget h3 .open{
       
   484 	background-image: url(../img/dossier-documentaire-title-arrow-show.jpg);
       
   485 }
       
   486 /* widget */
       
   487 .widget-inner{
       
   488 	padding: 8px 0 8px 16px;
       
   489 }
       
   490 .widget-inner h4{
       
   491 	color: #c51810;
       
   492 	padding: 5px 0;
       
   493 }
       
   494 .widget-inner form p{
       
   495 	margin-bottom: 4px;
       
   496 }
       
   497 .widget-inner .filtre-date label{
       
   498 	color: #c51810;
       
   499 	width:26px;
       
   500 	display: inline-block;
       
   501 }
       
   502 .widget-inner .filtre-date input[type=text]{
       
   503 	width: 90px;
       
   504 	height: 12px;
       
   505 	border: 1px solid #828282;
       
   506 }
       
   507 .widget-inner .filtre-categorie p{
       
   508 	margin-bottom: 8px;
       
   509 }
       
   510 .widget-inner .filtre-categorie input[type=checkbox]{
       
   511 	margin: 0 10px 0 0;
       
   512 }
       
   513 .widget.links .widget-inner a{
       
   514 	color: #000;
       
   515 }
       
   516 .widget.links .widget-inner a:hover{
       
   517 	text-decoration: none;
       
   518 }
       
   519 .widget.links .widget-inner ul{
       
   520 	padding-left: 16px;
       
   521 }
       
   522 .widget.links .widget-inner ul li{
       
   523 	margin-bottom: 4px;
       
   524 	list-style-image: url(../img/widget-list-item.jpg);
       
   525 }
       
   526 .widget.affichage li a .visuel{
       
   527 	width: 39px;
       
   528 	height: 36px;
       
   529 	display: block;
       
   530 	background-position: 0 0;
       
   531 	background-repeat: none;
       
   532 	margin-bottom: 4px;
       
   533 }
       
   534 .widget.affichage li{
       
   535 	float: left;
       
   536 	margin-right: 24px;
       
   537 }
       
   538 .widget.affichage li .treemap .visuel{
       
   539 	background-image: url(../img/treemap-sprite.jpg);
       
   540 }
       
   541 .widget.affichage li .liste .visuel{
       
   542 	background-image: url(../img/liste-sprite.jpg);
       
   543 
       
   544 }
       
   545 .widget.affichage .liste span, .widget.affichage .treemap span	{
       
   546 	text-align: center;
       
   547 	display: block;
       
   548 	font-size: 11px;
       
   549 }
       
   550 .treemap:hover .visuel, .treemap:hover .visuel{
       
   551 	background-position: 0 -36px;
       
   552 }
       
   553 .widget.affichage .liste:hover .visuel, .widget.affichage .treemap.active .visuel{
       
   554 	background-position: 0 -36px;
       
   555 }
       
   556 .widget.affichage li a{
       
   557 	text-decoration: none;
       
   558 	font-size: 12px;
       
   559 	color: #C51810;
       
   560 }
       
   561 .widget.recherche input[type=text]{
       
   562 	float: left;
       
   563 	width: 100px;
       
   564 	height: 17px;
       
   565 	padding: 0 2px;
       
   566 	border: 1px solid #828282;
       
   567 	margin-right: 6px;
       
   568 }
       
   569 .widget.recherche input[type=submit]{
       
   570 	float: left;
       
   571 	width: 20px;
       
   572 	height: 18px;
       
   573 	background-image: url(../img/widget-button-recherche.jpg);
       
   574 	background-repeat: no-repeat;
       
   575 	border:none;
       
   576 	cursor: pointer;
       
   577 }
       
   578 .widget.recherche input[type=submit]:hover{
       
   579 	background-position: -20px 0;
       
   580 }
       
   581 /* datepicker */
       
   582 .ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all{
       
   583 	font-size: 13px;
       
   584 }
       
   585 /* footer */
       
   586 .footer{
       
   587 	padding: 16px 0;
       
   588 	font-size: 12px;
       
   589 }
       
   590 .footer a:hover{
       
   591 	text-decoration: none;
       
   592 }
       
   593 .footer h2{
       
   594 	font-size: 20px;
       
   595 	margin-bottom: 10px;
       
   596 }
       
   597 .footer-information, .footer-raccourci ,.footer-partenaire{
       
   598 	float: left;
       
   599 }
       
   600 .footer-information {
       
   601 	width: 180px;
       
   602 	padding-left: 6px;
       
   603 	margin-right: 16px;
       
   604 }
       
   605 .footer-raccourci{
       
   606 	width: 220px;
       
   607 	margin-right: 16px;
       
   608 }
       
   609 .footer li{
       
   610 	margin-bottom: 4px;
       
   611 }
       
   612 .footer-partenaire{
       
   613 	margin-right: 12px;
       
   614 }
       
   615 .footer-partenaire li{
       
   616 	height: 55px;
       
   617 	float: left;
       
   618 	margin-right: 12px;
       
   619 	line-height: 55px;
       
   620 }
       
   621 .footer-partenaire li a{
       
   622 	overflow: hidden;
       
   623 	display: inline-block;
       
   624 	vertical-align: middle;
       
   625 }
       
   626 .footer-partenaire li a img{
       
   627 	vertical-align: middle;
       
   628 }
       
   629 .footer-partenaire .iri{
       
   630 	width: 90px;
       
   631 	height: 38px;
       
   632 	background: url(../img/logo-iri.png) 0 -38px no-repeat;
       
   633 }
       
   634 .footer-partenaire .alcatel{
       
   635 	width: 135px;
       
   636 	height: 29px;
       
   637 	background: url(../img/logo-alcatel.png) 0 -29px no-repeat;
       
   638 }
       
   639 .footer-partenaire .cea{
       
   640 	width: 50px;
       
   641 	height: 41px;
       
   642 	background: url(../img/logo-cea.png) 0 -41px no-repeat;
       
   643 }
       
   644 
       
   645 .footer-partenaire a:hover{
       
   646 	background-position: 0 0;
       
   647 }
       
   648 
       
   649 .footer-texte{
       
   650 	float: left;
       
   651 	padding-top: 30px;
       
   652 	width: 180px;
       
   653 }
       
   654 .copyright{
       
   655 	background-color: #eeeeee;
       
   656 	height: 18px;
       
   657 	width: 100%;
       
   658 	line-height: 18px;
       
   659 	text-align: center;
       
   660 }
       
   661 .copyright a{
       
   662 	text-decoration: none;
       
   663 }
       
   664 .copyright a:hover{
       
   665 	text-decoration: underline;
       
   666 }
       
   667 /*pagination*/
       
   668 .pagination{
       
   669 	height: 35px;
       
   670 	line-height: 35px;
       
   671 	text-align: center;
       
   672 	clear: both;
       
   673 	font-size: 18px;
       
   674 	border-bottom: 1px solid #E0DDE0;
       
   675 	margin-bottom: 10px;
       
   676 }
       
   677 .pagination .active,.pagination a:hover{
       
   678 	text-decoration: none;
       
   679 }