Subversion Repositories Sites.obs-saisons.fr

Rev

Rev 324 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
320 aurelien 1
/* =========================== Balises ============================
31 aurelien 2
 
76 aurelien 3
 
4
 
320 aurelien 5
/* =========================== Style général ============================ */
31 aurelien 6
 
39 aurelien 7
#wrapper #container {
60 aurelien 8
	max-width:1650px;
39 aurelien 9
}
10
 
31 aurelien 11
.gauche {
320 aurelien 12
	float:left;
31 aurelien 13
}
14
 
15
.droite {
320 aurelien 16
	float:right;
31 aurelien 17
}
18
 
76 aurelien 19
.information {
320 aurelien 20
 
101 aurelien 21
	padding-left:40px;
76 aurelien 22
	border:1px solid #FF420F;
23
	max-width:600px;
24
	height: 50px;
25
	text-align: center;
26
	font-size: 1.3em;
27
	color: #000000;
28
	background: url("../images/attention.png") no-repeat scroll 1em 0.5em transparent;
29
	background-color:#EF9C86;
30
}
31 aurelien 31
 
76 aurelien 32
.information div {
33
	margin-top: 15px
34
}
35
 
116 aurelien 36
span.erreur {
320 aurelien 37
	color: red;
116 aurelien 38
}
76 aurelien 39
 
116 aurelien 40
input.erreur {
320 aurelien 41
	border: 1px solid red;
116 aurelien 42
}
43
 
44
#center {
320 aurelien 45
	width: 720px;
116 aurelien 46
}
47
 
48
 
320 aurelien 49
/* =========================== Titres ============================ */
31 aurelien 50
 
51
.titre_saisie {
320 aurelien 52
	padding-bottom: 10px;
31 aurelien 53
}
54
 
55
.etape {
56
	color: #9AC343;
57
	padding-bottom:20px;
58
}
59
 
60
 
53 aurelien 61
/* =========================== Menu et navigation ============================ */
62
 
63
#saisie_menu ul li {
64
	background: none;
65
	padding-top: 5px;
66
}
67
 
68
#saisie_menu ul li.item_menu_station {
69
	background: url("../images/station.png") no-repeat scroll 0px 0.5em transparent;
70
}
71
 
72
.item_menu_station > a {
320 aurelien 73
	padding: 5px;
53 aurelien 74
}
75
 
76
#saisie_menu ul li.item_menu_espece {
77
	background: url("../images/espece.png") no-repeat scroll 0px 0.5em transparent;
78
}
79
 
80
.item_menu_espece > a {
320 aurelien 81
	padding: 5px
53 aurelien 82
}
83
 
84
#saisie_menu ul li.station_ajout {
85
	background: url("../images/ajout.png") no-repeat scroll -9px transparent;
86
}
87
 
88
li.station_en_cours {
320 aurelien 89
	padding-top: 10px;
53 aurelien 90
}
91
 
92
li.station_en_cours > a {
93
	color: #FFFFFF;
94
	font-weight: bold;
95
	border: solid 1px #FFFFFF;
162 vio 96
	background-color: #BF3600;
320 aurelien 97
	-moz-border-radius: 0.9em;
98
	-webkit-border-radius: 0.9em;
99
	border-radius: 0.9em;
53 aurelien 100
}
101
 
110 aurelien 102
#retour_au_site {
103
	padding-top: 30px;
104
}
105
 
53 aurelien 106
#saisie_menu ul li.espece_ajout {
107
	background: url("../images/ajout.png") no-repeat scroll -9px transparent;
108
}
109
 
110
li.espece_en_cours > a {
111
	color: #FFFFFF;
112
	font-weight: bold;
113
	border: solid 1px #FFFFFF;
114
	background-color: #9AC343;
320 aurelien 115
	-moz-border-radius: 0.9em;
116
	-webkit-border-radius: 0.9em;
110 aurelien 117
	border-radius: 0.9em;
53 aurelien 118
}
119
 
60 aurelien 120
ul.liste_annees_observations {
121
	list-style-type: none;
122
}
123
 
124
.liste_annees_observations li {
125
	display: inline;
126
	list-style: none;
320 aurelien 127
	background: none;
60 aurelien 128
}
129
 
130
#annee_en_cours {
131
	font-size: 1.6em;
320 aurelien 132
	color: #9AC343;
60 aurelien 133
}
134
 
116 aurelien 135
#retour_au_site ul li {
136
	background: url("../images/retour.png") no-repeat scroll 0 30% transparent
137
}
31 aurelien 138
 
218 aurelien 139
.export_observation {
140
    background: url("../images/csv.png") no-repeat scroll 2px 4px transparent;
141
    padding-left: 17px;
142
    padding-top: 3px;
143
    padding-right: 6px;
144
}
76 aurelien 145
 
146
/* =========================== Formulaires d'inscription et d'identification ============================ */
147
 
148
#conteneur_formulaire_identification, #conteneur_formulaire_inscription {
320 aurelien 149
 
76 aurelien 150
	width:650px;
151
	border: 1px solid grey;
152
	margin-top: 10px;
153
	padding: 10px;
154
	text-align: left !important;
320 aurelien 155
	-moz-border-radius: 0.9em;
156
	-webkit-border-radius: 0.9em;
110 aurelien 157
	border-radius: 0.9em;
76 aurelien 158
}
159
 
160
#conteneur_formulaire_identification form {
320 aurelien 161
	text-align: left !important;
76 aurelien 162
}
163
 
164
#conteneur_formulaire_identification input {
165
	text-align: left !important;
320 aurelien 166
	width: 300px;
76 aurelien 167
}
168
 
169
#conteneur_formulaire_inscription input {
170
	text-align: left !important;
320 aurelien 171
	width: 300px;
76 aurelien 172
}
173
 
174
.message_identification {
175
	font-weight: bold;
176
	padding-top: 5px;
177
	color: #435F06;
320 aurelien 178
	font-size: 1.5em;
76 aurelien 179
}
180
 
181
 
182
/* =========================== Formulaires de l'application ============================ */
183
 
101 aurelien 184
#saisie_station {
320 aurelien 185
	width: 700px;
101 aurelien 186
}
187
 
188
.element_formulaire label {
166 aurelien 189
	font-weight: bold;
320 aurelien 190
	width:150px;
101 aurelien 191
}
192
 
31 aurelien 193
.element_formulaire_en_ligne {
320 aurelien 194
	padding-right: 10px;
31 aurelien 195
}
196
 
60 aurelien 197
.element_formulaire, #conteneur_liens_lat_lon, #conteneur_form_liens_lat_lon {
101 aurelien 198
	padding-bottom : 15px;
31 aurelien 199
}
200
 
201
.conteneur_carte {
89 aurelien 202
	height: 400px;
203
	width: 725px;
31 aurelien 204
}
205
 
206
.gros_bouton_validation {
207
	height: 50px;
208
	width: 200px;
209
	font-size: 20px;
210
	margin-top: 10x;
210 aurelien 211
	margin-right: 0px;
31 aurelien 212
}
213
 
101 aurelien 214
#localiser_lat_lon {
320 aurelien 215
	background: url("../images/localiser.png") no-repeat scroll 2px transparent;
101 aurelien 216
}
217
 
31 aurelien 218
#saisie_liste_evenements {
219
	text-align: center;
89 aurelien 220
	width:715px;
31 aurelien 221
}
222
 
39 aurelien 223
#saisie_modif_evenements tr, #saisie_liste_evenements tr {
320 aurelien 224
	/*height: 40px;*/
31 aurelien 225
}
226
 
39 aurelien 227
.icone_s {
228
	height: 30px;
320 aurelien 229
	width: 30px;
39 aurelien 230
}
31 aurelien 231
 
210 aurelien 232
.formulaire_en_ligne {
233
  display: inline;
234
}
235
 
53 aurelien 236
.valider_formulaire {
237
	cursor: pointer;
238
	background-color: transparent;
239
	background-image: url("../images/valider_s.png");
240
	border: none;
241
	color: rgba(0,0,0,0);
242
	background-position: center;
243
	background-repeat: no-repeat;
60 aurelien 244
	padding-top: 2px;
245
	padding-bottom: 3px;
53 aurelien 246
}
39 aurelien 247
 
53 aurelien 248
.valider_formulaire:hover, .lien_modifier:hover {
249
	background-color: #CFCFCF;
250
}
251
 
89 aurelien 252
#form_saisie_espece {
253
	margin-right: auto;
320 aurelien 254
	margin-left: auto;
89 aurelien 255
}
256
 
53 aurelien 257
.formulaire_informations_espece_mini {
60 aurelien 258
	text-align: center;
320 aurelien 259
	height:50px;
53 aurelien 260
	width: 500px;
261
	border: solid 1px #999999;
262
	background-color: #CFCFCF;
263
	padding: 10px;
264
	margin-bottom: 10px;
320 aurelien 265
	-moz-border-radius: 0.9em;
266
	-webkit-border-radius: 0.9em;
110 aurelien 267
	border-radius: 0.9em;
53 aurelien 268
}
269
 
270
.formulaire_informations_espece_mini:hover {
271
	background-color: #C0DF7D;
272
}
273
 
274
.formulaire_informations_espece_mini img {
275
	margin-top:-5px;
276
}
277
 
210 aurelien 278
#form_afficher_modification {
279
	margin-top: 10px;
337 aurelien 280
	position: absolute;
281
	right: 10px;
282
	top: 0;
210 aurelien 283
}
53 aurelien 284
 
210 aurelien 285
.formulaire_suppression_station {
320 aurelien 286
	margin-top: 10px;
287
	margin-left: 2px;
210 aurelien 288
}
289
 
290
.formulaire_suppression_individu {
291
    margin-left: 2px;
292
    margin-top: 10px;
293
}
294
 
320 aurelien 295
/* =========================== Fiches ============================== */
31 aurelien 296
 
297
.element_fiche {
298
	padding-bottom : 5px;
299
}
300
 
301
.intitule_fiche {
320 aurelien 302
 
31 aurelien 303
}
304
 
305
.valeur_fiche {
320 aurelien 306
	font-weight: bold;
31 aurelien 307
}
308
 
309
.titre_section_fiche {
310
	padding-bottom : 10px;
311
	padding-top : 10px;
312
}
313
 
314
.titre_fiche {
320 aurelien 315
 
31 aurelien 316
}
317
 
318
hr.separation_section {
320 aurelien 319
	margin-top: 25px;
31 aurelien 320
}
321
 
53 aurelien 322
.informations_espece img {
320 aurelien 323
	margin-top:-35px;
166 aurelien 324
	padding: 15px;
53 aurelien 325
}
31 aurelien 326
 
53 aurelien 327
.annee_observation {
320 aurelien 328
	padding-left: 10px;
53 aurelien 329
}
330
 
331
.observations_individu {
116 aurelien 332
    display: table-cell;
333
    height: 400px;
334
    width: 250px;
53 aurelien 335
}
336
 
337
.observations_individu {
338
	color: #000000;
339
}
340
 
166 aurelien 341
#fiche_individu .observations_individu li {
53 aurelien 342
	background: none;
343
	padding-left: 1px;
166 aurelien 344
	list-style-type: none;
345
	margin-left: 0px;
346
	padding-left: 0px;
53 aurelien 347
}
348
 
349
.observations_individu li div {
320 aurelien 350
	-moz-border-radius: 0.9em;
351
	-webkit-border-radius: 0.9em;
110 aurelien 352
	border-radius: 0.9em;
53 aurelien 353
}
354
 
166 aurelien 355
#center .observations_individu h4 {
53 aurelien 356
	padding: 5px;
166 aurelien 357
	color: black;
53 aurelien 358
}
359
 
320 aurelien 360
.ajouter_observation .date_observation {
361
	background: url("../images/ajout.png") no-repeat center center transparent;
362
	width: 20px;
363
}
364
 
324 aurelien 365
.ajouter_observation .absence_observation {
366
	background: url("../images/absence.png") no-repeat center center transparent;
367
	width: 20px;
368
}
369
 
370
.ajouter_observation.hide,
371
.ajouter_observation .conteneur_supprimer_observation,
372
.ajouter_observation .absence_observation.hide {
373
	display: none;
374
}
375
 
320 aurelien 376
.conteneur_supprimer_observation {
377
	position: absolute;
378
	right: 0px;
379
	top: 0px;
380
	width: 20px;
381
	height: 100%;
382
	display: flex;
383
	align-items: center;
384
	justify-content: center;
385
}
386
 
387
.supprimer_observation {
388
	background: url("../images/suppression.png") no-repeat center center transparent;
389
	width: 20px;
390
	display: none;
391
}
392
 
393
.date_observation_individu:not(.ajouter_observation):hover .supprimer_observation {
394
	display: block;
395
}
396
 
397
.conteneur_date_observation {
398
	padding: 0;
399
	position: relative;
400
	vertical-align: top;
401
}
402
 
60 aurelien 403
.date_observation_individu {
320 aurelien 404
	height: 100%;
405
	width: 100%;
406
	display: flex;
407
	align-items: center;
408
	justify-content: center;
409
	flex: 1;
410
	padding-top: 5px;
411
	padding-bottom: 5px;
412
	position: relative;
413
}
89 aurelien 414
 
324 aurelien 415
.date_observation:not(.icone) {
416
	padding-left: 20px;
417
	padding-right: 20px;
418
}
419
 
420
 
320 aurelien 421
.date_observation_individu .ui-datepicker {
422
	position: absolute;
423
	top: 100%;
424
	left: 0%;
425
	z-index: 1;
89 aurelien 426
}
427
 
320 aurelien 428
.icone:hover {
429
	filter: grayscale(100%);
430
}
431
 
89 aurelien 432
.calendrier {
320 aurelien 433
 
60 aurelien 434
}
435
 
116 aurelien 436
#fiche_individu {
437
	background-color: #F4F2EB;
438
	padding : 10px;
439
	margin-top: 31px;
337 aurelien 440
	position: relative;
116 aurelien 441
}
76 aurelien 442
 
324 aurelien 443
#fiche_individu .commentaire_individu {
444
	font-style: italic;
445
	white-space: pre;
446
}
116 aurelien 447
 
324 aurelien 448
textarea[name="individu_commentaire"] {
449
	width: 550px;
450
	min-height: 160px;
451
	border-radius: 5px;
452
	height: 75px;
453
	border: 1px solid #ACACAC;
454
}
455
 
320 aurelien 456
/* =========================== Tableaux d'évenements ============================ */
31 aurelien 457
 
39 aurelien 458
#saisie_liste_evenements, #saisie_modif_evenements {
320 aurelien 459
	text-align: center;
39 aurelien 460
}
461
 
197 aurelien 462
#saisie_liste_evenements .information_individu, #saisie_modif_evenements.information_individu {
320 aurelien 463
	text-align: left;
197 aurelien 464
}
465
 
31 aurelien 466
tr:nth-child(odd) {
467
  background-color: #CFCFCF ;
468
}
469
 
470
tr:nth-child(1) {
471
	color: #FFFFFF;
472
}
473
 
474
tr:nth-child(1), tr:nth-child(2) {
475
	background-color: #FFFFFF ;
476
}
477
 
320 aurelien 478
div.evenement {
31 aurelien 479
	text-align: center;
480
}
481
 
482
.stade_evenement {
483
	text-align: center;
484
}
485
 
76 aurelien 486
 
320 aurelien 487
/* =========================== Styles des différents stades ============================ */
31 aurelien 488
 
53 aurelien 489
.stade_feuillaison {
161 vio 490
	background-color: #ACC700;
31 aurelien 491
}
492
 
53 aurelien 493
.stade_floraison {
320 aurelien 494
	background-color: #B549B9;
31 aurelien 495
}
496
 
53 aurelien 497
.stade_fructification {
161 vio 498
	background-color: #FF7F00;
31 aurelien 499
}
500
 
53 aurelien 501
.stade_senescence {
161 vio 502
	background-color: #BF3600;
31 aurelien 503
}
504
 
53 aurelien 505
.stade_1ere_apparition {
161 vio 506
	background-color: #B549B9;
31 aurelien 507
}
508
 
210 aurelien 509
/* ============ Style pour l'administration ============================== */
76 aurelien 510
 
210 aurelien 511
#barre_admin {
512
    -moz-border-radius: 10px 10px 10px 10px;
513
    background-color: #F4F2EB;
514
    border: 1px solid #D1C6A8;
287 aurelien 515
    height: 60px;
210 aurelien 516
    margin-bottom: 10px;
517
    padding: 5px;
518
}
60 aurelien 519
 
210 aurelien 520
#form_changement_identite {
320 aurelien 521
	width: 330px;
210 aurelien 522
	display: inline;
523
}
524
 
218 aurelien 525
.export_observation_admin {
526
	background: url("../images/csv.png") no-repeat scroll 28px 0 transparent;
527
    padding-left: 46px;
528
    padding-top: 3px;
287 aurelien 529
}
210 aurelien 530
 
287 aurelien 531
.gestion_espece_admin {
532
	background: url("../images/espece.png") no-repeat scroll 28px 0 transparent;
533
    padding-left: 46px;
534
    padding-top: 3px;
535
}
536
 
537
.saisie_liste_especes_admin {
538
	width: 100%;
539
}
540
 
541
.saisie_liste_especes_admin tr:nth-child(1) {
542
    color: #494949;
543
    background-color: #CFCFCF;
544
}
545
 
546
.saisie_liste_especes_admin .espece_inactive {
547
    color: #494949;
548
    background-color: #FF7D73;
549
}
550
 
551
#form_modification_espece_admin label {
552
	width: 150px;
553
	padding-right: 50px;
554
}
555
 
292 aurelien 556
#form_ajout_espece_admin label.label_checkbox {
557
	font-weight: normal;
558
}
559
 
560
#saisie_espece_admin .illustration_espece {
561
    max-height: 180px;
562
    max-width: 250px;
563
	border: 1px solid grey;
564
}
565
 
566
.lien_annulation {
567
	float: left;
568
    font-size: 1.2em;
569
    margin-left: 439px;
570
    padding: 16px;
571
}
572
 
210 aurelien 573
/* ============ Styles créés par des effets javascripts automatiques ===== */
574
 
101 aurelien 575
.chargement {
576
	background: url("../images/chargement.gif") no-repeat center center #DCDCDC;
577
}
578
 
89 aurelien 579
.erreur_valeur {
320 aurelien 580
	background-color: red;
89 aurelien 581
}
582
 
53 aurelien 583
.conteneur_type {
584
	float: right;
585
	align: center;
116 aurelien 586
	width: 230px;
53 aurelien 587
}
31 aurelien 588
 
589
h4.lien_pliage {
320 aurelien 590
	text-decoration: underline;
116 aurelien 591
	display: inline;
31 aurelien 592
}
593
 
166 aurelien 594
.pliage {
595
	padding: 5px;
596
}
597
 
31 aurelien 598
h4.lien_pliage:hover {
599
	cursor: pointer;
53 aurelien 600
}
601
 
602
.element_cliquable {
320 aurelien 603
	cursor: pointer;
53 aurelien 604
}
605
 
60 aurelien 606
.element_cliquable:hover {
607
	background : #9AC343;
608
 }
609
 
53 aurelien 610
.element_clique {
320 aurelien 611
	background: #9AC343;
53 aurelien 612
}
613
 
166 aurelien 614
#saisie_espece ul.liste_onglets {
53 aurelien 615
	margin: 0;
616
	padding: 0;
617
	float: left;
618
	list-style: none;
619
	height: 32px; /*--Set height of tabs--*/
620
	border-bottom: 1px solid #999;
161 vio 621
	border-left: 1px solid #999;
320 aurelien 622
	border-top-left-radius: 10px;
623
	border-top-right-radius: 10px;
53 aurelien 624
}
60 aurelien 625
 
166 aurelien 626
#saisie_espece ul.liste_onglets li {
627
	-moz-border-radius-topleft: 0px;
628
    -moz-border-radius-topright: 0px;
53 aurelien 629
	float: left;
630
	margin: 0;
631
	padding: 0;
632
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
633
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
634
	border: 1px solid #999;
635
	border-left: none;
636
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
637
	overflow: hidden;
638
	position: relative;
639
	background: #e0e0e0;
640
}
60 aurelien 641
 
166 aurelien 642
#saisie_espece ul.liste_onglets li a {
53 aurelien 643
	text-decoration: none;
644
	color: #000;
645
	display: block;
646
	font-size: 1.2em;
647
	padding: 0 20px;
161 vio 648
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
53 aurelien 649
	outline: none;
650
}
60 aurelien 651
 
166 aurelien 652
#saisie_espece ul.liste_onglets li a:hover {
161 vio 653
	background: #ccc;
654
}
655
 
53 aurelien 656
html ul.liste_onglets li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
657
	background: #fff;
161 vio 658
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
53 aurelien 659
}
660
 
166 aurelien 661
#saisie_espece #onglets  {
89 aurelien 662
	margin-left: 85px;
663
	margin-right: auto;
664
	position: relative;
665
	bottom: -1px;
666
	z-index: 1;
667
	clear:left;
668
}
669
 
166 aurelien 670
#saisie_espece .conteneur_onglets {
53 aurelien 671
	border: 1px solid #999;
672
	overflow: hidden;
89 aurelien 673
	float: left;
53 aurelien 674
	background: #fff;
89 aurelien 675
	position: relative;
320 aurelien 676
	width: 100%;
677
	display: flex;
678
	justify-content: center;
679
	margin-left: 10px;
53 aurelien 680
}
681
 
166 aurelien 682
#saisie_espece .contenu_onglet {
53 aurelien 683
	padding: 20px;
684
	font-size: 1.2em;
89 aurelien 685
}
686
 
101 aurelien 687
 
688
.autocompletion {
320 aurelien 689
	position:relative;
101 aurelien 690
}
691
 
210 aurelien 692
.conteneur_suggestions, .conteneur_suggestions_utilisateur {
101 aurelien 693
    position: absolute;
694
    left: 107px;
695
    width: 180px;
696
    background-color: #212427;
697
    border: 2px solid #000;
698
    color: #fff;
699
    z-index: 300;
110 aurelien 700
    -moz-border-radius: 7px;
701
	-webkit-border-radius: 7px;
702
	border-radius: 7px;
101 aurelien 703
}
210 aurelien 704
 
705
.conteneur_suggestions_utilisateur {
320 aurelien 706
	left: 188px;
210 aurelien 707
}
320 aurelien 708
 
101 aurelien 709
.liste_suggestions {
710
    margin: 0px;
711
    padding: 0px;
712
}
320 aurelien 713
 
101 aurelien 714
.liste_suggestions li {
715
    margin: 0px 0px 3px 0px;
716
    padding: 3px;
717
    cursor: pointer;
718
}
197 aurelien 719
 
210 aurelien 720
.liste_suggestions li {
320 aurelien 721
	list-style-type: none;
197 aurelien 722
	margin-left: 5px;
723
	margin-right: 5px;
724
}
320 aurelien 725
 
726
 
101 aurelien 727
.liste_suggestions .element_selectionne {
728
    background-color: #659CD8;
729
}
730
 
210 aurelien 731
/* ============ Styles crées spécifiquement pour compenser les faiblesses de certains navigateurs ===== */
89 aurelien 732
 
733
.clearer {
320 aurelien 734
	clear:both;
735
}