Subversion Repositories Sites.obs-saisons.fr

Rev

Rev 89 | Rev 110 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 89 Rev 101
1
/* =========================== Balises ============================ 
1
/* =========================== Balises ============================ 
2
 
2
 
3
 
3
 
4
 
4
 
5
/* =========================== Style général ============================ */ 
5
/* =========================== Style général ============================ */ 
6
 
6
 
7
#wrapper #container {
7
#wrapper #container {
8
	max-width:1650px;
8
	max-width:1650px;
9
}
9
}
10
 
10
 
11
.gauche {
11
.gauche {
12
	float:left;	
12
	float:left;	
13
}
13
}
14
 
14
 
15
.droite {
15
.droite {
16
	float:right;	
16
	float:right;	
17
}
17
}
18
 
18
 
19
.information {
19
.information {
20
	
20
	
21
	padding-left: 10px;
21
	padding-left:40px;
22
	border:1px solid #FF420F;
22
	border:1px solid #FF420F;
23
	max-width:600px;
23
	max-width:600px;
24
	height: 50px;
24
	height: 50px;
25
	text-align: center;
25
	text-align: center;
26
	font-size: 1.3em;
26
	font-size: 1.3em;
27
	color: #000000;
27
	color: #000000;
28
	background: url("../images/attention.png") no-repeat scroll 1em 0.5em transparent;
28
	background: url("../images/attention.png") no-repeat scroll 1em 0.5em transparent;
29
	background-color:#EF9C86;
29
	background-color:#EF9C86;
30
}
30
}
31
 
31
 
32
.information div {
32
.information div {
33
	margin-top: 15px
33
	margin-top: 15px
34
}
34
}
35
 
35
 
36
 
36
 
37
/* =========================== Titres ============================ */ 
37
/* =========================== Titres ============================ */ 
38
 
38
 
39
.titre_saisie {
39
.titre_saisie {
40
	padding-bottom: 10px;	
40
	padding-bottom: 10px;	
41
}
41
}
42
 
42
 
43
.etape {
43
.etape {
44
	color: #9AC343;
44
	color: #9AC343;
45
	padding-bottom:20px;
45
	padding-bottom:20px;
46
}
46
}
47
 
47
 
48
 
48
 
49
/* =========================== Menu et navigation ============================ */
49
/* =========================== Menu et navigation ============================ */
50
 
50
 
51
#saisie_menu ul li {
51
#saisie_menu ul li {
52
	background: none;
52
	background: none;
53
	padding-top: 5px;
53
	padding-top: 5px;
54
}
54
}
55
 
55
 
56
#saisie_menu ul li.item_menu_station {
56
#saisie_menu ul li.item_menu_station {
57
	background: url("../images/station.png") no-repeat scroll 0px 0.5em transparent;
57
	background: url("../images/station.png") no-repeat scroll 0px 0.5em transparent;
58
}
58
}
59
 
59
 
60
.item_menu_station > a {
60
.item_menu_station > a {
61
	padding: 5px;	
61
	padding: 5px;	
62
}
62
}
63
 
63
 
64
#saisie_menu ul li.item_menu_espece {
64
#saisie_menu ul li.item_menu_espece {
65
	background: url("../images/espece.png") no-repeat scroll 0px 0.5em transparent;
65
	background: url("../images/espece.png") no-repeat scroll 0px 0.5em transparent;
66
}
66
}
67
 
67
 
68
.item_menu_espece > a {
68
.item_menu_espece > a {
69
	padding: 5px	
69
	padding: 5px	
70
}
70
}
71
 
71
 
72
#saisie_menu ul li.station_ajout {
72
#saisie_menu ul li.station_ajout {
73
	background: url("../images/ajout.png") no-repeat scroll -9px transparent;
73
	background: url("../images/ajout.png") no-repeat scroll -9px transparent;
74
}
74
}
75
 
75
 
76
li.station_en_cours {
76
li.station_en_cours {
77
	padding-top: 10px;	
77
	padding-top: 10px;	
78
}
78
}
79
 
79
 
80
li.station_en_cours > a {
80
li.station_en_cours > a {
81
	color: #FFFFFF;
81
	color: #FFFFFF;
82
	font-weight: bold;
82
	font-weight: bold;
83
	border: solid 1px #FFFFFF;
83
	border: solid 1px #FFFFFF;
84
	background-color: #800000;
84
	background-color: #800000;
85
	-moz-border-radius: 0.9em;	
85
	-moz-border-radius: 0.9em;	
86
}
86
}
87
 
87
 
88
#saisie_menu ul li.espece_ajout {
88
#saisie_menu ul li.espece_ajout {
89
	background: url("../images/ajout.png") no-repeat scroll -9px transparent;
89
	background: url("../images/ajout.png") no-repeat scroll -9px transparent;
90
}
90
}
91
 
91
 
92
li.espece_en_cours > a {
92
li.espece_en_cours > a {
93
	color: #FFFFFF;
93
	color: #FFFFFF;
94
	font-weight: bold;
94
	font-weight: bold;
95
	border: solid 1px #FFFFFF;
95
	border: solid 1px #FFFFFF;
96
	background-color: #9AC343;
96
	background-color: #9AC343;
97
	-moz-border-radius: 0.9em;
97
	-moz-border-radius: 0.9em;
98
}
98
}
99
 
99
 
100
ul.liste_annees_observations {
100
ul.liste_annees_observations {
101
	list-style-type: none;
101
	list-style-type: none;
102
}
102
}
103
 
103
 
104
.liste_annees_observations li {
104
.liste_annees_observations li {
105
	display: inline;
105
	display: inline;
106
	list-style: none;
106
	list-style: none;
107
	background: none; 
107
	background: none; 
108
}
108
}
109
 
109
 
110
#annee_en_cours {
110
#annee_en_cours {
111
	font-size: 1.6em;
111
	font-size: 1.6em;
112
	color: #9AC343;	
112
	color: #9AC343;	
113
}
113
}
114
 
114
 
115
 
115
 
116
 
116
 
117
 
117
 
118
/* =========================== Formulaires d'inscription et d'identification ============================ */
118
/* =========================== Formulaires d'inscription et d'identification ============================ */
119
 
119
 
120
#conteneur_formulaire_identification, #conteneur_formulaire_inscription {
120
#conteneur_formulaire_identification, #conteneur_formulaire_inscription {
121
	
121
	
122
	width:650px;
122
	width:650px;
123
	border: 1px solid grey;
123
	border: 1px solid grey;
124
	margin-top: 10px;
124
	margin-top: 10px;
125
	padding: 10px;
125
	padding: 10px;
126
	text-align: left !important;
126
	text-align: left !important;
127
	-moz-border-radius: 0.9em;
127
	-moz-border-radius: 0.9em;
128
}
128
}
129
 
129
 
130
#conteneur_formulaire_identification form {
130
#conteneur_formulaire_identification form {
131
	text-align: left !important;	
131
	text-align: left !important;	
132
}
132
}
133
 
133
 
134
#conteneur_formulaire_identification input {
134
#conteneur_formulaire_identification input {
135
	text-align: left !important;
135
	text-align: left !important;
136
	width: 300px;	
136
	width: 300px;	
137
}
137
}
138
 
138
 
139
#conteneur_formulaire_inscription input {
139
#conteneur_formulaire_inscription input {
140
	text-align: left !important;
140
	text-align: left !important;
141
	width: 300px;	
141
	width: 300px;	
142
}
142
}
143
 
143
 
144
.message_identification {
144
.message_identification {
145
	font-weight: bold;
145
	font-weight: bold;
146
	padding-top: 5px;
146
	padding-top: 5px;
147
	color: #435F06;
147
	color: #435F06;
148
	font-size: 1.5em;	
148
	font-size: 1.5em;	
149
}
149
}
150
 
150
 
151
 
151
 
152
/* =========================== Formulaires de l'application ============================ */
152
/* =========================== Formulaires de l'application ============================ */
-
 
153
 
-
 
154
#saisie_station {
-
 
155
	width: 700px;	
-
 
156
}
-
 
157
 
-
 
158
.element_formulaire label {
-
 
159
	width:150px;	
-
 
160
}
153
 
161
 
154
.element_formulaire_en_ligne {
-
 
155
	padding-left: 10px;
162
.element_formulaire_en_ligne {
156
	padding-right: 10px;	
163
	padding-right: 10px;	
157
}
164
}
158
 
165
 
159
.element_formulaire, #conteneur_liens_lat_lon, #conteneur_form_liens_lat_lon {
166
.element_formulaire, #conteneur_liens_lat_lon, #conteneur_form_liens_lat_lon {
160
	padding-bottom : 5px;
167
	padding-bottom : 15px;
161
}
168
}
162
 
169
 
163
.conteneur_carte {
170
.conteneur_carte {
164
	height: 400px;
171
	height: 400px;
165
	width: 725px;
172
	width: 725px;
166
}
173
}
167
 
174
 
168
.gros_bouton_validation {
175
.gros_bouton_validation {
169
	height: 50px;
176
	height: 50px;
170
	width: 200px;
177
	width: 200px;
171
	font-size: 20px;
178
	font-size: 20px;
172
	margin-top: 10x;
179
	margin-top: 10x;
173
	margin-right:10px;
180
	margin-right:10px;
174
}
181
}
-
 
182
 
-
 
183
#localiser_lat_lon {
-
 
184
	background: url("../images/localiser.png") no-repeat scroll 2px transparent;	
-
 
185
}
175
 
186
 
176
#saisie_liste_evenements {
187
#saisie_liste_evenements {
177
	text-align: center;
188
	text-align: center;
178
	width:715px;
189
	width:715px;
179
}
190
}
180
 
191
 
181
#saisie_modif_evenements tr, #saisie_liste_evenements tr {
192
#saisie_modif_evenements tr, #saisie_liste_evenements tr {
182
	height: 40px;	
193
	height: 40px;	
183
}
194
}
184
 
195
 
185
.icone_s {
196
.icone_s {
186
	height: 30px;
197
	height: 30px;
187
	width: 30px;	
198
	width: 30px;	
188
}
199
}
189
 
200
 
190
.valider_formulaire {
201
.valider_formulaire {
191
	cursor: pointer;
202
	cursor: pointer;
192
	background-color: transparent;
203
	background-color: transparent;
193
	background-image: url("../images/valider_s.png");
204
	background-image: url("../images/valider_s.png");
194
	border: none;
205
	border: none;
195
	color: rgba(0,0,0,0);
206
	color: rgba(0,0,0,0);
196
	background-position: center;
207
	background-position: center;
197
	background-repeat: no-repeat;
208
	background-repeat: no-repeat;
198
	padding-top: 2px;
209
	padding-top: 2px;
199
	padding-bottom: 3px;
210
	padding-bottom: 3px;
200
}
211
}
201
 
212
 
202
.valider_formulaire:hover, .lien_modifier:hover {
213
.valider_formulaire:hover, .lien_modifier:hover {
203
	background-color: #CFCFCF;
214
	background-color: #CFCFCF;
204
}
215
}
205
 
216
 
206
#form_saisie_espece {
217
#form_saisie_espece {
207
	margin-right: auto;
218
	margin-right: auto;
208
	margin-left: auto;	
219
	margin-left: auto;	
209
}
220
}
210
 
221
 
211
.formulaire_informations_espece_mini {
222
.formulaire_informations_espece_mini {
212
	text-align: center;
223
	text-align: center;
213
	height:40px; 
224
	height:40px; 
214
	width: 500px;
225
	width: 500px;
215
	border: solid 1px #999999;
226
	border: solid 1px #999999;
216
	-moz-border-radius: 0.9em;
227
	-moz-border-radius: 0.9em;
217
	background-color: #CFCFCF;
228
	background-color: #CFCFCF;
218
	padding: 10px;
229
	padding: 10px;
219
	margin-bottom: 10px;
230
	margin-bottom: 10px;
220
}
231
}
221
 
232
 
222
.formulaire_informations_espece_mini:hover {
233
.formulaire_informations_espece_mini:hover {
223
	background-color: #C0DF7D;
234
	background-color: #C0DF7D;
224
}
235
}
225
 
236
 
226
.formulaire_informations_espece_mini img {
237
.formulaire_informations_espece_mini img {
227
	margin-top:-5px;
238
	margin-top:-5px;
228
}
239
}
229
 
240
 
230
 
241
 
231
/* =========================== Fiches ============================== */ 
242
/* =========================== Fiches ============================== */ 
232
 
243
 
233
.element_fiche {
244
.element_fiche {
234
	padding-bottom : 5px;
245
	padding-bottom : 5px;
235
}
246
}
236
 
247
 
237
.intitule_fiche {
248
.intitule_fiche {
238
		
249
		
239
}
250
}
240
 
251
 
241
.valeur_fiche {
252
.valeur_fiche {
242
	font-weight: bold;	
253
	font-weight: bold;	
243
}
254
}
244
 
255
 
245
.titre_section_fiche {
256
.titre_section_fiche {
246
	padding-bottom : 10px;
257
	padding-bottom : 10px;
247
	padding-top : 10px;
258
	padding-top : 10px;
248
}
259
}
249
 
260
 
250
.titre_fiche {
261
.titre_fiche {
251
	
262
	
252
}
263
}
253
 
264
 
254
hr.separation_section {
265
hr.separation_section {
255
	margin-top: 25px;	
266
	margin-top: 25px;	
256
}
267
}
257
 
268
 
258
.informations_espece img {
269
.informations_espece img {
259
	margin-top:-35px;	
270
	margin-top:-35px;	
260
}
271
}
261
 
272
 
262
.annee_observation {
273
.annee_observation {
263
	padding-left: 10px;	
274
	padding-left: 10px;	
264
}
275
}
265
 
276
 
266
.observations_individu {
277
.observations_individu {
267
	display: inline;
278
	display: inline;
268
	float: left;	
279
	float: left;	
269
	width: 200px;
280
	width: 200px;
270
	height: 400px;
281
	height: 400px;
271
}
282
}
272
 
283
 
273
.observations_individu {
284
.observations_individu {
274
	color: #000000;
285
	color: #000000;
275
}
286
}
276
 
287
 
277
.observations_individu li {
288
.observations_individu li {
278
	background: none;
289
	background: none;
279
	padding-left: 1px;
290
	padding-left: 1px;
280
}
291
}
281
 
292
 
282
.observations_individu li div {
293
.observations_individu li div {
283
	-moz-border-radius: 0.9em;	
294
	-moz-border-radius: 0.9em;	
284
}
295
}
285
 
296
 
286
.observations_individu h4 {
297
.observations_individu h4 {
287
	padding: 5px;
298
	padding: 5px;
288
}
299
}
289
 
300
 
290
.date_observation_individu {
301
.date_observation_individu {
291
 
302
 
292
}
303
}
293
 
304
 
294
.calendrier {
305
.calendrier {
295
	
306
	
296
}
307
}
297
 
308
 
298
 
309
 
299
/* =========================== Tableaux d'évenements ============================ */ 
310
/* =========================== Tableaux d'évenements ============================ */ 
300
 
311
 
301
#saisie_liste_evenements, #saisie_modif_evenements {
312
#saisie_liste_evenements, #saisie_modif_evenements {
302
	text-align: center;	
313
	text-align: center;	
303
}
314
}
304
 
315
 
305
tr:nth-child(odd) {
316
tr:nth-child(odd) {
306
  background-color: #CFCFCF ;
317
  background-color: #CFCFCF ;
307
}
318
}
308
 
319
 
309
tr:nth-child(1) {
320
tr:nth-child(1) {
310
	color: #FFFFFF;
321
	color: #FFFFFF;
311
}
322
}
312
 
323
 
313
tr:nth-child(1), tr:nth-child(2) {
324
tr:nth-child(1), tr:nth-child(2) {
314
	background-color: #FFFFFF ;
325
	background-color: #FFFFFF ;
315
}
326
}
316
 
327
 
317
div.evenement { 
328
div.evenement { 
318
	text-align: center;
329
	text-align: center;
319
}
330
}
320
 
331
 
321
.stade_evenement {
332
.stade_evenement {
322
	text-align: center;
333
	text-align: center;
323
}
334
}
324
 
335
 
325
 
336
 
326
/* =========================== Styles des différents stades ============================ */ 
337
/* =========================== Styles des différents stades ============================ */ 
327
 
338
 
328
.stade_feuillaison {
339
.stade_feuillaison {
329
	background-color: #9AC343;
340
	background-color: #9AC343;
330
}
341
}
331
 
342
 
332
.stade_floraison {
343
.stade_floraison {
333
	background-color: #C60800;	
344
	background-color: #C60800;	
334
}
345
}
335
 
346
 
336
.stade_fructification {
347
.stade_fructification {
337
	background-color: #8B008B;
348
	background-color: #8B008B;
338
}
349
}
339
 
350
 
340
.stade_senescence {
351
.stade_senescence {
341
	background-color: #800000;
352
	background-color: #800000;
342
}
353
}
343
 
354
 
344
.stade_1ere_apparition {
355
.stade_1ere_apparition {
345
	background-color: #F08080;
356
	background-color: #F08080;
346
}
357
}
347
 
358
 
348
 
359
 
349
/* ============ Styles crées par des effets javascripts automatiques ===== */
360
/* ============ Styles crées par des effets javascripts automatiques ===== */
-
 
361
 
-
 
362
.chargement {
-
 
363
	background: url("../images/chargement.gif") no-repeat center center #DCDCDC;
-
 
364
}
350
 
365
 
351
.erreur_valeur {
366
.erreur_valeur {
352
	background-color: red;	
367
	background-color: red;	
353
}
368
}
354
 
369
 
355
.conteneur_type {
370
.conteneur_type {
356
	float: right;
371
	float: right;
357
	align: center;
372
	align: center;
358
	width: 250px;
373
	width: 250px;
359
}
374
}
360
 
375
 
361
h4.lien_pliage {
376
h4.lien_pliage {
362
	text-decoration: underline;	
377
	text-decoration: underline;	
363
}
378
}
364
 
379
 
365
h4.lien_pliage:hover {
380
h4.lien_pliage:hover {
366
	cursor: pointer;
381
	cursor: pointer;
367
}
382
}
368
 
383
 
369
.element_cliquable {
384
.element_cliquable {
370
	cursor: pointer;	
385
	cursor: pointer;	
371
}
386
}
372
 
387
 
373
.element_cliquable:hover {
388
.element_cliquable:hover {
374
	background : #9AC343;
389
	background : #9AC343;
375
 }
390
 }
376
 
391
 
377
.element_clique {
392
.element_clique {
378
	background: #9AC343;	
393
	background: #9AC343;	
379
}
394
}
380
 
395
 
381
ul.liste_onglets {
396
ul.liste_onglets {
382
	margin: 0;
397
	margin: 0;
383
	padding: 0;
398
	padding: 0;
384
	float: left;
399
	float: left;
385
	list-style: none;
400
	list-style: none;
386
	height: 32px; /*--Set height of tabs--*/
401
	height: 32px; /*--Set height of tabs--*/
387
	border-bottom: 1px solid #999;
402
	border-bottom: 1px solid #999;
388
	border-left: 1px solid #999;
403
	border-left: 1px solid #999;
389
}
404
}
390
 
405
 
391
ul.liste_onglets li {
406
ul.liste_onglets li {
392
	float: left;
407
	float: left;
393
	margin: 0;
408
	margin: 0;
394
	padding: 0;
409
	padding: 0;
395
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
410
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
396
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
411
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
397
	border: 1px solid #999;
412
	border: 1px solid #999;
398
	border-left: none;
413
	border-left: none;
399
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
414
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
400
	overflow: hidden;
415
	overflow: hidden;
401
	position: relative;
416
	position: relative;
402
	background: #e0e0e0;
417
	background: #e0e0e0;
403
}
418
}
404
 
419
 
405
ul.liste_onglets li a {
420
ul.liste_onglets li a {
406
	text-decoration: none;
421
	text-decoration: none;
407
	color: #000;
422
	color: #000;
408
	display: block;
423
	display: block;
409
	font-size: 1.2em;
424
	font-size: 1.2em;
410
	padding: 0 20px;
425
	padding: 0 20px;
411
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
426
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
412
	outline: none;
427
	outline: none;
413
}
428
}
414
 
429
 
415
ul.liste_onglets li a:hover {
430
ul.liste_onglets li a:hover {
416
	background: #ccc;
431
	background: #ccc;
417
}
432
}
418
 
433
 
419
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--*/
434
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--*/
420
	background: #fff;
435
	background: #fff;
421
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
436
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
422
}
437
}
423
 
438
 
424
#onglets  {
439
#onglets  {
425
	margin-left: 85px;
440
	margin-left: 85px;
426
	margin-right: auto;
441
	margin-right: auto;
427
	position: relative;
442
	position: relative;
428
	bottom: -1px;
443
	bottom: -1px;
429
	z-index: 1;
444
	z-index: 1;
430
	clear:left;
445
	clear:left;
431
}
446
}
432
 
447
 
433
.conteneur_onglets {
448
.conteneur_onglets {
434
	border: 1px solid #999;
449
	border: 1px solid #999;
435
	overflow: hidden;
450
	overflow: hidden;
436
	float: left;
451
	float: left;
437
	background: #fff;
452
	background: #fff;
438
	position: relative;
453
	position: relative;
439
	width:565px;
454
	width:565px;
440
}
455
}
441
 
456
 
442
.contenu_onglet {
457
.contenu_onglet {
443
	padding: 20px;
458
	padding: 20px;
444
	font-size: 1.2em;
459
	font-size: 1.2em;
445
}
460
}
-
 
461
 
-
 
462
 
-
 
463
.autocompletion {
-
 
464
	position:relative;	
-
 
465
}
-
 
466
 
-
 
467
.conteneur_suggestions {
-
 
468
    position: absolute;
-
 
469
    left: 107px;
-
 
470
    width: 180px;
-
 
471
    background-color: #212427;
-
 
472
    -moz-border-radius: 7px;
-
 
473
    -webkit-border-radius: 7px;
-
 
474
    border: 2px solid #000;
-
 
475
    color: #fff;
-
 
476
    z-index: 300;
-
 
477
}
-
 
478
 
-
 
479
.liste_suggestions {
-
 
480
    margin: 0px;
-
 
481
    padding: 0px;
-
 
482
}
-
 
483
 
-
 
484
.liste_suggestions li {
-
 
485
    margin: 0px 0px 3px 0px;
-
 
486
    padding: 3px;
-
 
487
    cursor: pointer;
-
 
488
}
-
 
489
 
-
 
490
.liste_suggestions .element_selectionne {
-
 
491
    background-color: #659CD8;
-
 
492
}
446
 
493
 
447
/* ============ Styles crées spécifiquement pour compenser les faiblesses de certains navigateurs ===== */
494
/* ============ Styles crées spécifiquement pour compenser les faiblesses de certains navigateurs ===== */
448
 
495
 
449
.clearer {
496
.clearer {
450
	clear:both;	
497
	clear:both;	
451
}
498
}