integration/css/style.css
changeset 2 6e47ed0c413c
parent 1 43d9dff6758a
child 3 b5b13ce6935f
equal deleted inserted replaced
1:43d9dff6758a 2:6e47ed0c413c
       
     1 
     1 body{
     2 body{
     2 	background-color: #e9ecf0;
     3 	background-color: #e9ecf0;
       
     4 	height: 100%;
     3 }
     5 }
     4 a{color:#000;}
     6 a{color:#000;}
     5 div.wrap{
     7 div.wrap{
       
     8 	min-height:100%;
     6 	background-color: #FFF;
     9 	background-color: #FFF;
     7 	width: 960px;
    10 	width: 960px;
     8 	margin: 0 auto;
    11 	margin: 0 auto;
     9 	font-family: "Times New Roman";
    12 	font-family: "Times New Roman";
    10 	font-size: 13px;
    13 	font-size: 13px;
    11 	-moz-box-shadow: 0 0 14px 5px #888;
    14 	-moz-box-shadow: 0 0 14px 5px #888;
    12   	-webkit-box-shadow: 0 0 14px 5px #888;
    15   	-webkit-box-shadow: 0 0 14px 5px #888;
    13   	box-shadow: 0 0 14px 5px #888;
    16   	box-shadow: 0 0 14px 5px #888;
    14   	padding-bottom: 16px;
    17   	padding-bottom: 16px;
       
    18   	height: 100%;
    15 }
    19 }
    16 /*header*/
    20 /*header*/
    17 div.header{
    21 div.header{
    18 	position: relative;
    22 	position: relative;
    19 	height: 128px;
    23 	height: 128px;
    60 ul.header-menu li a{
    64 ul.header-menu li a{
    61 	font-size: 16px;
    65 	font-size: 16px;
    62 	color: #e4e36e;
    66 	color: #e4e36e;
    63 	text-decoration: none;
    67 	text-decoration: none;
    64 }
    68 }
       
    69 ul.header-menu li a:hover{
       
    70 	color: #FFF;
       
    71 }
    65 div.login-wrap{
    72 div.login-wrap{
    66 	padding-top: 10px;
    73 	padding-top: 10px;
    67 	position: absolute;
    74 	position: absolute;
    68 	left: 727px;
    75 	left: 727px;
    69 }
    76 }
    97 p.password-lost a {
   104 p.password-lost a {
    98 	color: #000;
   105 	color: #000;
    99 	text-decoration: none;
   106 	text-decoration: none;
   100 	font-size: 10px;
   107 	font-size: 10px;
   101 }
   108 }
       
   109 /*dossier documentaire*/
       
   110 div.dossier-documentaire{
       
   111 	
       
   112 	padding: 0 6px;
       
   113 	
       
   114 
       
   115 	position: absolute;
       
   116 	left: 714px;
       
   117 	top:128px;
       
   118 	z-index: 10;background-color:rgba(0,125,173,.8);
       
   119 }
       
   120 div.dossier-documentaire-inner{
       
   121 	padding: 12px 4px;
       
   122 	width: 224px;background: url(../img/documentaire-bg.jpg);
       
   123 }
       
   124 div.dossier-documentaire h2{
       
   125 	height: 18px;
       
   126 	line-height: 18px;
       
   127 	color: #FFF;
       
   128 	border-bottom: 1px solid #FFF;
       
   129 }
       
   130 div.dossier-documentaire ul{
       
   131 	padding: 6px 0;
       
   132 }
       
   133 div.dossier-documentaire ul li{
       
   134 	width: 224px;
       
   135 }
       
   136 div.dossier-documentaire ul li a{
       
   137 	display: block;
       
   138 	overflow: auto;
       
   139 	padding: 1px 0;
       
   140 }
       
   141 div.dossier-documentaire ul li a:hover{
       
   142  	background-color:rgba(221,221,221,.6);
       
   143 }
       
   144 div.dossier-documentaire span.documentaire-texte,div.dossier-documentaire img{
       
   145 	float: left;	
       
   146 }
       
   147 
       
   148 div.dossier-documentaire img{
       
   149 	margin-right: 6px;
       
   150 }
       
   151 div.dossier-documentaire span.documentaire-texte{
       
   152 	color: #FFF;
       
   153 	max-width: 142px;
       
   154 	display: block;
       
   155 }
       
   156 div.dossier-documentaire span.documentaire-texte h3{
       
   157 	font-weight: bold;
       
   158 	margin-bottom: 2px;
       
   159 }
       
   160 div.dossier-documentaire span.documentaire-texte p{
       
   161 	font-size: 11px;
       
   162 }
       
   163 div.dossier-documentaire a.documentaire-lien {
       
   164 	width: 168px;
       
   165 	display: block;
       
   166 	height: 16px;
       
   167 	background-image: url(../img/documentaire-lien.jpg);
       
   168 	background-repeat: no-repeat;
       
   169 	background-position: 0 0;
       
   170 	width: 225px;
       
   171 	margin-bottom: 10px;
       
   172 }
       
   173 div.dossier-documentaire a.documentaire-lien:hover{
       
   174 	background-position: 0 -16px;
       
   175 }
   102 a.dossier-button{
   176 a.dossier-button{
   103 
   177 
   104 	padding-left: 40px;
   178 	padding-left: 40px;
   105 	background: url(../img/dossier-icon.jpg) no-repeat 6px 5px;
   179 	background: url(../img/dossier-icon.jpg) no-repeat 6px 5px;
   106 	color: #FFF;
   180 	color: #FFF;
   112 	width:205px;
   186 	width:205px;
   113 	height: 27px;
   187 	height: 27px;
   114 }
   188 }
   115 div.content-wrap{
   189 div.content-wrap{
   116 	width:950px;
   190 	width:950px;
   117 	margin: 0 auto;
   191 	padding: 0 5px;
   118 }
   192 }
   119 /*frise*/
   193 /*frise*/
   120 div.frise{
   194 div.frise{
   121 	background: #333;
   195 	background: #333;
   122 	height: 114px;
   196 	height: 114px;
   123 }
   197 }
   124 /*cluster*/
   198 /*cluster*/
       
   199 div.cluster-containment{
       
   200 	position: absolute;
       
   201 	height: 22px;
       
   202 }
   125 div.cluster-wrap{
   203 div.cluster-wrap{
   126 	position: relative;
   204 	position: relative;
   127 	height: 22px;
   205 	height: 22px;
   128 	border-top: 1px solid #313131;
   206 	border-top: 1px solid #313131;
   129 	border-bottom: 1px solid #313131;
   207 	border-bottom: 1px solid #313131;
   130 }
   208 }
   131 div.cluster-visible{
   209 div.cluster-visible{
       
   210 	left: 20px;
       
   211 	position: absolute;
   132 	width: 912px;
   212 	width: 912px;
   133 	margin: 0 auto;
   213 	margin: 0 auto;
   134 	height: 22px;
   214 	height: 22px;
   135 	overflow: hidden;
   215 	overflow: hidden;
   136 }
   216 }
   160 	background-color: #c51810;
   240 	background-color: #c51810;
   161 	color: #FFF;
   241 	color: #FFF;
   162 }
   242 }
   163 
   243 
   164 a.cluster-arrow{
   244 a.cluster-arrow{
       
   245 	z-index: 2;
   165 	position: absolute;
   246 	position: absolute;
   166 	width: 19px;
   247 	width: 19px;
   167 	height: 22px;
   248 	height: 22px;
   168 	display: block;
   249 	display: block;
   169 	background: url(../img/cluster-arrows.jpg) no-repeat;
   250 	background: url(../img/cluster-arrows.jpg) no-repeat;
   172 	right: 0;
   253 	right: 0;
   173 	background: url(../img/cluster-arrows.jpg) no-repeat -19px 0;
   254 	background: url(../img/cluster-arrows.jpg) no-repeat -19px 0;
   174 }
   255 }
   175 /*content*/
   256 /*content*/
   176 div.content{
   257 div.content{
       
   258 	height: 100%;
       
   259 	width: 950px;
   177 	border-top:2px solid #c51810;
   260 	border-top:2px solid #c51810;
   178 	border-bottom:2px solid #c51810;
   261 	border-bottom:2px solid #c51810;
       
   262 
   179 }
   263 }
   180 div.content-left,div.content-right{
   264 div.content-left,div.content-right{
   181 	float: left;
   265 	float: left;
   182 }
   266 }
   183 /*left*/
   267 /*left*/
   184 div.content-left{
   268 div.content-left{
   185 	width: 190px;
   269 	width: 188px;
   186 }
   270 }
   187 div.content-left h2{
   271 div.content-left h2{
   188 	padding: 10px 0 10px 10px;
   272 	padding: 10px 0 10px 10px;
   189 	font-size: 26px;
   273 	font-size: 26px;
   190 	line-height: 26px;
   274 	line-height: 26px;
   191 	border-bottom: 1px solid #c51810;
   275 	border-bottom: 1px solid #c51810;
   192 	margin-bottom: 1px;
   276 	margin-bottom: 1px;
   193 }
   277 }
   194 div.content-left div.widget-wrap{
   278 div.content-left div.widget-wrap{
   195 	padding-top: 8px;
   279 	height: 100%;
       
   280 	min-height: 320px;
       
   281 	padding: 14px 0;
   196 	background-color: #eeeeee;
   282 	background-color: #eeeeee;
       
   283 	border: 5px solid #e0dde0;
   197 }
   284 }
   198 div.content-left div.widget-wrap div.widget{
   285 div.content-left div.widget-wrap div.widget{
   199 	width: 160px;
   286 	width: 160px;
   200 	margin: 0 auto;
   287 	margin: 0 auto;
   201 }
   288 }
   207 div.content-left div.widget-wrap div.widget h3 a{
   294 div.content-left div.widget-wrap div.widget h3 a{
   208 	font-size: 16px;
   295 	font-size: 16px;
   209 	text-decoration: none;
   296 	text-decoration: none;
   210 	color : #c51810;
   297 	color : #c51810;
   211 	padding-left: 12px;
   298 	padding-left: 12px;
   212 	background-position: 0px 8px;
   299 	background-position: 0px 6px;
   213 	background-repeat: no-repeat;
   300 	background-repeat: no-repeat;
       
   301 	background-image: url(../img/dossier-title-arrow-hide.jpg);
       
   302 
       
   303 }
       
   304 div.content-left div.widget-wrap div.widget h3 a.open{
       
   305 	background-position: 0px 7px;
   214 	background-image: url(../img/dossier-title-arrow-show.jpg);
   306 	background-image: url(../img/dossier-title-arrow-show.jpg);
   215 
       
   216 }
   307 }
   217 .widget-inner{
   308 .widget-inner{
   218 	padding: 8px 0 8px 16px;
   309 	padding: 8px 0 8px 16px;
   219 }
   310 }
   220 .widget-inner h4{
   311 .widget-inner h4{
   241 	margin: 0 10px 0 0;
   332 	margin: 0 10px 0 0;
   242 }
   333 }
   243 .widget.links .widget-inner a{
   334 .widget.links .widget-inner a{
   244 	color: #000;
   335 	color: #000;
   245 }
   336 }
       
   337 .widget.links .widget-inner a:hover{
       
   338 	text-decoration: none;
       
   339 }
   246 .widget.links .widget-inner ul{
   340 .widget.links .widget-inner ul{
   247 	padding-left: 16px;
   341 	padding-left: 16px;
   248 }
   342 }
   249 .widget.links .widget-inner ul li{
   343 .widget.links .widget-inner ul li{
   250 	margin-bottom: 4px;
   344 	margin-bottom: 4px;
   251 	list-style-image: url(../img/widget-list-item.jpg);
   345 	list-style-image: url(../img/widget-list-item.jpg);
   252 }
   346 }
       
   347 .widget.affichage li a span.visuel{
       
   348 	width: 39px;
       
   349 	height: 36px;
       
   350 	display: block;
       
   351 	
       
   352 	background-position: 0 0;
       
   353 	background-repeat: none;
       
   354 	margin-bottom: 4px;
       
   355 }
       
   356 .widget.affichage li{
       
   357 	float: left;
       
   358 	margin-right: 24px;
       
   359 }
       
   360 .widget.affichage li a.treemap span.visuel{
       
   361 	background-image: url(../img/treemap-sprite.jpg);
       
   362 }
       
   363 .widget.affichage li a.liste span.visuel{
       
   364 	background-image: url(../img/liste-sprite.jpg);
       
   365 }
       
   366 .widget.affichage li a.treemap:hover span.visuel, .widget.affichage li a.treemap.active span.visuel{
       
   367 	background-position: 0 -36px;
       
   368 }
       
   369 .widget.affichage li a.liste:hover span.visuel, .widget.affichage li a.liste.active span.visuel{
       
   370 	background-position: 0 -36px;
       
   371 }
       
   372 .widget.affichage li a{
       
   373 	text-decoration: none;
       
   374 	font-size: 12px;
       
   375 	color: #C51810;
       
   376 }
       
   377 
   253 /*right*/
   378 /*right*/
   254 div.content-right{
   379 div.content-right{
   255 	width: 760px;
   380 	width: 762px;
   256 }
   381 }
       
   382 /*articles*/
   257 div.articles{
   383 div.articles{
   258 	padding-left: 1px;
   384 	padding-left: 1px;
   259 }
   385 }
   260 
   386 
   261 div.articles div.article{
   387 div.articles div.article{
   267 }
   393 }
   268 div.article div.inner-article{
   394 div.article div.inner-article{
   269 	width: 177px;
   395 	width: 177px;
   270 	padding-left: 12px;
   396 	padding-left: 12px;
   271 	border-right: 1px solid #e0dde0;
   397 	border-right: 1px solid #e0dde0;
   272 	min-height: 170px;
   398 	min-height: 200px;
   273 }
   399 }
   274 div.article:nth-child(4n+4) div.inner-article{  
   400 div.article:nth-child(4n+4) div.inner-article{  
   275   border-right: none;
   401   border-right: none;
   276 }
   402 }
   277 div.articles div.article h2{
   403 div.articles div.article h2{
   278 	font-size: 22px;
   404 	font-size: 22px;
   279 	margin-bottom: 6px;
   405 	margin-bottom: 6px;
   280 }
   406 }
       
   407 div.articles div.article h2 a{
       
   408 	text-decoration: none;
       
   409 }
       
   410 div.articles div.article h2 a:hover{
       
   411 	color:#C51810;
       
   412 }
   281 div.articles div.article p.author{
   413 div.articles div.article p.author{
   282 	margin-bottom: 20px;
   414 	margin-bottom: 10px;
       
   415 }
       
   416 div.articles div.article p.author a:hover{
       
   417 	text-decoration: none;
   283 }
   418 }
   284 div.articles div.article p.author, div.articles div.article p.author a{
   419 div.articles div.article p.author, div.articles div.article p.author a{
   285 	color: #c51810;
   420 	color: #c51810;
   286 }
   421 }
   287 div.article div.article-content{
   422 div.article div.article-content{
   288 	width: 168px;
   423 	width: 168px;
       
   424 	min-height: 105px;
       
   425 }
       
   426 div.article div.article-content ul.links li{
       
   427 	list-style-image: url(../img/article-link-arrow.jpg);
       
   428 }
       
   429 div.article div.article-content ul.links li a:hover{
       
   430 	text-decoration: none;
       
   431 }
       
   432 div.article div.article-content ul.links{
       
   433 	margin-top: 10px;
       
   434 	clear: both;
       
   435 	padding-left: 20px;
       
   436 }
       
   437 div.article-visuel-wrap{
       
   438 	display: block;
       
   439 	float: right;
       
   440 	margin-left: 10px;
   289 }
   441 }
   290 div.article div.article-content img.article-visuel{
   442 div.article div.article-content img.article-visuel{
   291 	float: right;
   443 	
   292 }
   444 }
   293 div.article div.article-content p.resume{
   445 div.article div.article-content p.resume{
   294 	float: left;
   446 
   295 	width: 112px;
   447 }
       
   448 /*pagination*/
       
   449 div.pagination{
       
   450 	height: 35px;
       
   451 	line-height: 35px;
       
   452 	text-align: center;
       
   453 	clear: both;
       
   454 	font-size: 18px;
       
   455 	border-bottom: 1px solid #E0DDE0;
       
   456 	margin-bottom: 10px;
       
   457 }
       
   458 div.pagination a.active,div.pagination a:hover{
       
   459 	text-decoration: none;
   296 }
   460 }
   297 /*footer*/
   461 /*footer*/
   298 div.footer{
   462 div.footer{
   299 	padding-top: 16px;
   463 	padding: 16px 0;
   300 	font-size: 12px;
   464 	font-size: 12px;
       
   465 }
       
   466 div.footer a:hover{
       
   467 	text-decoration: none;
   301 }
   468 }
   302 div.footer h2{
   469 div.footer h2{
   303 	font-size: 20px;
   470 	font-size: 20px;
   304 	margin-bottom: 10px;
   471 	margin-bottom: 10px;
   305 }
   472 }
   306 div.footer-information, div.footer-raccourci{
   473 div.footer-information, div.footer-raccourci,div.footer-partenaire{
   307 	float: left;
   474 	float: left;
       
   475 
   308 }
   476 }
   309 div.footer-information {
   477 div.footer-information {
   310 	width: 190px;
   478 	width: 180px;
   311 	padding-left: 6px;
   479 	padding-left: 6px;
   312 }
   480 	margin-right: 16px;
   313 div.footer-information ul li a{
   481 }
   314 
   482 div.footer-raccourci{
   315 }
   483 	width: 220px;
       
   484 	margin-right: 16px;
       
   485 }
       
   486 
   316 div.footer ul li{
   487 div.footer ul li{
   317 	margin-bottom: 4px;
   488 	margin-bottom: 4px;
   318 }
   489 }
   319 
   490 div.footer-partenaire{
       
   491 	margin-right: 12px;
       
   492 }
       
   493 div.footer-partenaire ul li{
       
   494 	height: 55px;
       
   495 	float: left;
       
   496 	margin-right: 12px;
       
   497 	line-height: 55px;
       
   498 
       
   499 }
       
   500 div.footer-partenaire ul li a{
       
   501 
       
   502 }
       
   503 div.footer-texte{
       
   504 	float: left;
       
   505 	padding-top: 30px;
       
   506 	width: 180px;
       
   507 }
   320 div.copyright{
   508 div.copyright{
   321 	background-color: #eeeeee;
   509 	background-color: #eeeeee;
   322 	height: 18px;
   510 	height: 18px;
   323 	width: 100%;
   511 	width: 100%;
   324 	line-height: 18px;
   512 	line-height: 18px;
   325 	text-align: center;
   513 	text-align: center;
   326 }
   514 }
   327 div.copyright a{
   515 div.copyright a{
   328 	text-decoration: none;
   516 	text-decoration: none;
   329 }
   517 }
       
   518 /* Home Actus */
       
   519 div.actu {
       
   520 	float: left;
       
   521 	position: relative;
       
   522 }
       
   523 div.actu div.inner-actu{
       
   524 	width: 100%;
       
   525 	background-color:rgba(0,0,0,.7);
       
   526 	height: 40px;
       
   527 	position: absolute;
       
   528 	bottom: 0;
       
   529 }
       
   530 div.actu div.inner-actu h2{
       
   531 	color: #FFF;
       
   532 	line-height: 40px;
       
   533 	font-size: 24px;
       
   534 	padding-left: 10px;
       
   535 }
       
   536 div.actu div.inner-actu h2 a{
       
   537 	color: #FFF;
       
   538 	text-decoration: none;
       
   539 }
       
   540 div.actu div.inner-actu div.links{
       
   541 	position: absolute;
       
   542 	bottom: 0;
       
   543 	right: 0;
       
   544 }