Subversion Repositories eFlore/Applications.cel

Rev

Rev 1564 | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 1564 Rev 1577
1
@CHARSET "UTF-8";
1
@CHARSET "UTF-8";
2
/*+--------------------------------------------------------------------------------------------------------+*/
2
/*+--------------------------------------------------------------------------------------------------------+*/
3
/* Polices d'écriture*/
3
/* Polices d'écriture*/
4
@font-face {
4
@font-face {
5
	font-family: florileges;
5
	font-family: florileges;
6
	src: url(fonts/caflisch_scriptw_web.ttf) format('ttf'),
6
	src: url(fonts/caflisch_scriptw_web.ttf) format('ttf'),
7
		url(fonts/caflisch_scriptw_web.woff) format('woff');
7
		url(fonts/caflisch_scriptw_web.woff) format('woff');
8
}
8
}
9
 
9
 
10
/*+--------------------------------------------------------------------------------------------------------+*/
10
/*+--------------------------------------------------------------------------------------------------------+*/
11
/* Balises */
11
/* Balises */
12
body {
12
body {
13
	background: url("../img/background/noise.png") repeat scroll 0 0, none repeat scroll 0 0 #524C47;
13
	background: url("../img/background/noise.png") repeat scroll 0 0, none repeat scroll 0 0 #524C47;
14
}
14
}
15
footer p{
15
footer p{
16
	color:white;
16
	color:white;
17
	text-align:center;
17
	text-align:center;
18
}
18
}
19
button img {
19
button img {
20
	display:block;
20
	display:block;
21
}
21
}
22
h1, h2 {
22
h1, h2 {
23
	font-size: 40px;
23
	font-size: 40px;
24
	font-family:florileges;
24
	font-family:florileges;
25
	font-weight: normal;
25
	font-weight: normal;
26
}
26
}
27
/*+--------------------------------------------------------------------------------------------------------+*/
27
/*+--------------------------------------------------------------------------------------------------------+*/
28
/* Générique */
28
/* Générique */
29
.discretion {
29
.discretion {
30
	color:white;
30
	color:white;
31
	font-family:arial;
31
	font-family:arial;
32
	font-size:11px;
32
	font-size:11px;
33
	line-height: 13px;
33
	line-height: 13px;
34
}
34
}
35
.droite {
35
.droite {
36
	text-align:right;
36
	text-align:right;
37
}
37
}
38
.centre {
38
.centre {
39
	text-align:center;
39
	text-align:center;
40
}
40
}
41
.modal-fenetre {
41
.modal-fenetre {
42
	position:fixed;
42
	position:fixed;
43
	z-index:1000;
43
	z-index:1000;
44
	top:0;
44
	top:0;
45
	left:0;
45
	left:0;
46
	height:100%;
46
	height:100%;
47
	width:100%;
47
	width:100%;
48
	background:#777;
48
	background:#777;
49
	background:rgba(90,86,93,0.7);
49
	background:rgba(90,86,93,0.7);
50
	text-align:center;
50
	text-align:center;
51
}
51
}
52
.modal-contenu {
52
.modal-contenu {
53
	position:relative;
53
	position:relative;
54
	width:30%;
54
	width:30%;
55
	margin:0 auto;
55
	margin:0 auto;
56
	top:30%;
56
	top:30%;
57
}
57
}
58
.nom-sci {
58
.nom-sci {
59
	font-style: italic;
59
	font-style: italic;
60
}
60
}
61
/*+--------------------------------------------------------------------------------------------------------+*/
61
/*+--------------------------------------------------------------------------------------------------------+*/
62
/* Gestion des photos */
62
/* Gestion des photos */
63
 
63
 
64
/* Form d'ajout des photos */
64
/* Form d'ajout des photos */
65
#form-upload .miniature {
65
#form-upload .miniature {
66
	float: left;
66
	float: left;
67
	height: 130px;
67
	height: 130px;
68
	margin: 5px;
68
	margin: 5px;
69
}
69
}
70
#form-upload .miniature-img {
70
#form-upload .miniature-img {
71
	display: block;
71
	display: block;
72
	height: 100px;
72
	height: 100px;
73
}
73
}
74
#form-upload .miniature-chargement {
74
#form-upload .miniature-chargement {
75
	height:100px;
75
	height:100px;
76
	width: 100px;	
76
	width: 100px;	
77
}
77
}
78
 
78
 
79
/* Bouton de sélection des fichiers */
79
/* Bouton de sélection des fichiers */
80
#fichier {
80
/*#fichier {
81
	visibility: hidden;
81
	visibility: hidden;
82
	height:0;
82
	height:0;
83
	width:0;
83
	width:0;
84
}
84
}*/
85
#photos-conteneur {
85
#photos-conteneur {
86
	height: 120px;
86
	height: 120px;
87
}
87
}
88
#photo-placeholder {
-
 
89
	background: url("../img/icones/icone-photo.png");
-
 
90
	background-size: 89px;
-
 
91
	cursor: pointer;
-
 
92
	margin-bottom: 15px;
-
 
93
	margin-right: 15px;
-
 
94
	float:left;
-
 
95
	border: 5px dashed #CCCCCC;
-
 
96
	border-radius: 8px 8px 8px 8px;
-
 
97
	height: 100px;
-
 
98
	margin: 2px 0 2px 2px;
-
 
99
	text-align: center;
-
 
100
	width: 98px;
-
 
101
	box-sizing:border-box;
-
 
102
	-moz-box-sizing:border-box;
-
 
103
	-webkit-box-sizing:border-box;
-
 
104
}
-
 
105
#photo-placeholder:hover {
-
 
106
	background: url("../img/icones/icone-photo-hover.png");
-
 
107
	background-size: 89px;
-
 
108
	border: 5px dashed #111; 
-
 
109
	border-radius: 8px;
-
 
110
}
-
 
111
 
88
 
112
/* Images d'une observation */
89
/* Images d'une observation */
113
.obs .obs-miniatures {
90
.obs .obs-miniatures {
114
	min-width: 150px;
91
	min-width: 150px;
115
	margin-right: 5px;
92
	margin-right: 5px;
116
	background-color:#524C47;
93
	background-color:#524C47;
117
	padding: 4px 0;
94
	padding: 4px 0;
118
}
95
}
119
.obs .miniature {
96
.obs .miniature {
120
	display: block;
97
	display: block;
121
	height: 100px;
98
	height: 100px;
122
	margin: 0 auto;
99
	margin: 0 auto;
123
}
100
}
124
.defilement {
101
.defilement {
125
	position: relative;
102
	position: relative;
126
	padding: 8px 0;
103
	padding: 8px 0;
127
}
104
}
128
.defilement-control-zone {
105
.defilement-control-zone {
129
	display: block;
106
	display: block;
-
 
107
	z-index:2;
130
	position: absolute;
108
	position: absolute;
131
    top: 0;
109
	top: 0;
132
	width: 50%;
110
	width: 50%;
133
	height: 116px;
111
	height: 116px;
134
}
112
}
135
.defilement-control-zone.gauche{
113
.defilement-control-zone.gauche{
136
	left: 0;
114
	left: 0;
137
}
115
}
138
.defilement-control-zone.droite {
116
.defilement-control-zone.droite {
139
	right: 0;
117
	right: 0;
140
}
118
}
141
.defilement-control {
119
.defilement-control {
142
    display: block;
120
	display: block;
143
    position: absolute;
121
	position: absolute;
144
    top: 35%;
122
	top: 35%;
145
    width:20px;
123
	width:20px;
146
    height: 20px;
124
	height: 20px;
147
    line-height: 20px;
125
	line-height: 20px;
148
    font-size: 17px;
126
	font-size: 17px;
149
    font-weight: 100;
127
	font-weight: 100;
150
    text-align: center;
128
	text-align: center;
151
    vertical-align: middle;
129
	vertical-align: middle;
152
    border: 3px solid white;
130
	border: 3px solid white;
153
    border-radius: 20px;
131
	border-radius: 20px;
154
	color: white;
132
	color: white;
155
    opacity: 1;
133
	opacity: 1;
156
	background: none repeat scroll 0 0 #524C47;
134
	background: none repeat scroll 0 0 #524C47;
157
}
135
}
158
.defilement-control.gauche {
136
.defilement-control.gauche {
159
	left: 3%;
137
	left: 3%;
160
}
138
}
161
.defilement-control.droite {
139
.defilement-control.droite {
162
	right: 3%;
140
	right: 3%;
163
}
141
}
164
 
142
 
165
.defilement-miniatures-cache {
143
.defilement-miniatures-cache {
166
	visibility: hidden;
144
	visibility: hidden;
167
}
145
}
168
.obs .miniature-cachee {
146
.obs .miniature-cachee {
169
	display: none;
147
	display: none;
170
}
148
}
171
 
149
 
172
.defilement-indicateurs {
150
.defilement-indicateurs {
173
    list-style: none outside none;
151
    list-style: none outside none;
174
    margin: 0;
152
    margin: 0;
175
    position: absolute;
153
    position: absolute;
176
    left: 0;
154
    left: 0;
177
    bottom: 2px;
155
    bottom: 2px;
178
    z-index: 5;
156
    z-index: 5;
179
}
157
}
180
.defilement-indicateurs li {
158
.defilement-indicateurs li {
181
    background-color: rgba(255, 255, 255, 0.25);
159
    background-color: rgba(255, 255, 255, 0.25);
182
    border-radius: 2px;
160
    border-radius: 2px;
183
    border: 1px solid lightgrey;
161
    border: 1px solid lightgrey;
184
    display: block;
162
    display: block;
185
    float: left;
163
    float: left;
186
    height: 4px;
164
    height: 4px;
187
    margin-left: 2px;
165
    margin-left: 2px;
188
    text-indent: -999px;
166
    text-indent: -999px;
189
    width: 4px;
167
    width: 4px;
190
}
168
}
191
.defilement-indicateurs .active {
169
.defilement-indicateurs .active {
192
	background-color: #FFFFFF;
170
	background-color: #FFFFFF;
193
}
171
}
194
 
172
 
195
/*+--------------------------------------------------------------------------------------------------------+*/
173
/*+--------------------------------------------------------------------------------------------------------+*/
196
/* Correction style CSS Bootstrap */
174
/* Correction style CSS Bootstrap */
197
.well {
175
.well {
198
	margin-bottom: 5px;
176
	margin-bottom: 5px;
199
	padding: 4px;
177
	padding: 4px;
200
	background: url("../img/background/noise.png") repeat scroll 0 0 white;
178
	background: url("../img/background/noise.png") repeat scroll 0 0 white;
201
}
179
}
202
@media (min-width: 575px) and (max-width: 767px){
180
@media (min-width: 575px) and (max-width: 767px){
203
	.forcer-colonne [class*="span"] {
181
	.forcer-colonne [class*="span"] {
204
		float: left;
182
		float: left;
205
		margin-left: 2.12766%;
183
		margin-left: 2.12766%;
206
	}
184
	}
207
	.forcer-colonne .span4 {
185
	.forcer-colonne .span4 {
208
		width: 31.6239%;
186
		width: 31.6239%;
209
	}
187
	}
210
	.forcer-colonne .span6 {
188
	.forcer-colonne .span6 {
211
		width: 48.9362%;
189
		width: 48.9362%;
212
	}
190
	}
213
	.forcer-colonne .span8 {
191
	.forcer-colonne .span8 {
214
		width: 65.9574%;
192
		width: 65.9574%;
215
	}
193
	}
216
}
194
}
217
@media (min-width: 1600px) {
195
@media (min-width: 1600px) {
218
	.container {
196
	.container {
219
		width: 1580px;
197
		width: 1580px;
220
	}
198
	}
221
}
199
}
222
/*+--------------------------------------------------------------------------------------------------------+*/
200
/*+--------------------------------------------------------------------------------------------------------+*/
223
/* Spécifique Florilèges */
201
/* Spécifique Florilèges */
224
.entete .intro {
202
.entete .intro {
-
 
203
	background-color: #689E4B;
225
	background: url("../img/background/noise.png") repeat scroll 0 0, radial-gradient(ellipse farthest-corner at center center , #A1C886 0%, #689E4B 100%) repeat scroll 0 0 transparent;
204
	background: url("../img/background/noise.png") repeat scroll 0 0, radial-gradient(ellipse farthest-corner at center center , #A1C886 0%, #689E4B 100%) repeat scroll 0 0 transparent;
226
	color: white;
205
	color: white;
227
	padding:5px;
206
	padding:5px;
228
}
207
}
229
.entete .intro a {
208
.entete .intro a {
230
	color: #524C47;
209
	color: #524C47;
231
}
210
}
232
 
211
 
233
/* Géolocalisation */
212
/* Géolocalisation */
234
#map-canvas {
213
#map-canvas {
235
	height: 240px;
214
	height: 280px;
236
	margin-bottom:5px;
215
	margin-bottom:5px;
237
}
216
}
238
.coordonnees-geo, .lat-lon-info {
217
.coordonnees-geo, .lat-lon-info {
239
	font-size: 10px;
218
	font-size: 10px;
240
}
219
}
241
#info-commune {
220
#info-commune {
242
	text-align:right;
221
	text-align:right;
243
	font-size:10px;
222
	font-size:10px;
244
}
223
}
245
.afficher-coord {
224
.afficher-coord {
246
	font-size:10px;
225
	font-size:10px;
247
}
226
}
248
 
227
 
249
/* Observations */
228
/* Observations */
250
#obs-titre {
229
#obs-titre {
251
	margin-right: 20px;
230
	margin-right: 20px;
252
}
231
}
253
#form-date {
232
#form-date {
254
	margin: 10px 0;
233
	margin: 10px 0;
255
	line-height: 40px;
234
	line-height: 40px;
256
}
235
}
257
.ns-retenu {
236
.ns-retenu {
258
	font-weight:bold;	
237
	font-weight:bold;	
259
}
238
}
260
.nn{
239
.nn{
261
	color:#3B9D3B;
240
	color:#3B9D3B;
262
}
241
}
263
.obs .nom-sci{
242
.obs .nom-sci{
264
	font-size:1.5em;
243
	font-size:1.5em;
265
	font-weight:bold;
244
	font-weight:bold;
266
}
245
}
267
.commune, .date{
246
.commune, .date{
268
	font-size:1.3em;
247
	font-size:1.3em;
269
	font-weight:bold;
248
	font-weight:bold;
270
}
249
}
271
.obs-action{
250
.obs-action{
272
	opacity:1;
251
	opacity:1;
273
}
252
}
274
 
253
 
275
/* Validation du formulaire */
254
/* Validation du formulaire */
276
label.valid {
255
label.valid {
277
	display: inline-block;
256
	display: inline-block;
278
	text-indent: -9999px;
257
	text-indent: -9999px;
279
	color: #468847;
258
	color: #468847;
280
}
259
}
281
label.error {
260
label.error {
282
	font-weight: bold;
261
	font-weight: bold;
283
	font-style:italic;
262
	font-style:italic;
284
	color: #B94A48;
263
	color: #B94A48;
285
	padding: 0 8px;
264
	padding: 0 8px;
286
}
265
}
287
.control-group.error label {
266
.control-group.error label {
288
	font-weight: bold;
267
	font-weight: bold;
289
}
268
}
290
.error .horizontal-slider{
269
.error .horizontal-slider{
291
	background: #B94A48;
270
	background: #B94A48;
292
}
271
}
293
.slider-holder + select + label.error {
272
.slider-holder + select + label.error {
294
	clear: both;
273
	clear: both;
295
}
274
}
296
#form-date .input-prepend input {
275
#form-date .input-prepend input {
297
	vertical-align:top;
276
	vertical-align:top;
298
}
277
}
299
#form-date .input-prepend  input + label.error {
278
#form-date .input-prepend  input + label.error {
300
	display: block;
279
	display: block;
301
}
280
}
302
/*+--------------------------------------------------------------------------------------------------------+*/
281
/*+--------------------------------------------------------------------------------------------------------+*/
303
/* SLIDERs */
282
/* SLIDERs */
304
.slider-on {
283
.slider-on {
305
	display:none;
284
	display:none;
306
}
285
}
307
.slider-holder {
286
.slider-holder {
308
	height: 25px;
287
	height: 25px;
309
	margin-left: -20px;
288
	margin-left: -20px;
310
	margin-right: 20px;
289
	margin-right: 20px;
311
	padding-left: 40px;
290
	padding-left: 40px;
312
	padding-top: 30px;
291
	padding-top: 30px;
313
}
292
}
314
.ui-widget-header {
293
.ui-widget-header {
315
	background: url("../img/background/noise.png") #A1C886;
294
	background: url("../img/background/noise.png") #A1C886;
316
}
295
}
317
.horizontal-slider {
296
.horizontal-slider {
318
	margin: 0 3%;
297
	margin: 0 3%;
319
	height: 9px !important;
298
	height: 9px !important;
320
	width: 90%;
299
	width: 90%;
321
}
300
}
322
.horizontal-slider.ui-slider-horizontal .ui-slider-range-min {
301
.horizontal-slider.ui-slider-horizontal .ui-slider-range-min {
323
	border-radius: 5px 0 0 5px;
302
	border-radius: 5px 0 0 5px;
324
}
303
}
325
.slider-holder p {
304
.slider-holder p {
326
	float: left;
305
	float: left;
327
	font-size: 10px;
306
	font-size: 10px;
328
	text-align: center;
307
	text-align: center;
329
	top: 10px;
308
	top: 10px;
330
}
309
}
331
.slider-holder p + p {
310
.slider-holder p + p {
332
	line-height: 1.5em;
311
	line-height: 1.5em;
333
}
312
}
334
.slider-holder .slider-legend {
313
.slider-holder .slider-legend {
335
	margin: 0 3%;
314
	margin: 0 3%;
336
}
315
}
337
.slider-holder .slider-legend p {
316
.slider-holder .slider-legend p {
338
	padding-top: 5px;
317
	padding-top: 5px;
339
	overflow: hidden;
318
	overflow: hidden;
340
	word-wrap: break-word;
319
	word-wrap: break-word;
341
}
320
}
342
.horizontal-slider a.ui-slider-handle {
321
.horizontal-slider a.ui-slider-handle {
343
	background: url("../img/icones/selecteur.png") no-repeat scroll 23px 20px transparent;
322
	background: url("../img/icones/selecteur.png") no-repeat scroll 23px 20px transparent;
344
	border: medium none;
323
	border: medium none;
345
	border-radius: 0;
324
	border-radius: 0;
346
	display: block;
325
	display: block;
347
	font-size: 14px;
326
	font-size: 14px;
348
	font-weight: bold;
327
	font-weight: bold;
349
	height: 60px;
328
	height: 60px;
350
	margin: 5px 5px 5px -35px;
329
	margin: 5px 5px 5px -35px;
351
	padding: 0;
330
	padding: 0;
352
	position: relative;
331
	position: relative;
353
	text-align: center;
332
	text-align: center;
354
	text-decoration: none;
333
	text-decoration: none;
355
	top: -40px;
334
	top: -40px;
356
	width: 70px;
335
	width: 70px;
357
	white-space: nowrap;
336
	white-space: nowrap;
358
}
337
}
359
.ui-slider .ui-slider-handle {
338
.ui-slider .ui-slider-handle {
360
	font-size: 12px;
339
	font-size: 12px;
361
}
340
}
362
.ui-datepicker {
341
.ui-datepicker {
363
	z-index: 2;
342
	z-index: 2;
364
}
343
}