|
1 /* Copyright (c) 2011 Raphaël Velt |
|
2 * Licensed under the MIT License |
|
3 * */ |
|
4 |
|
5 body { |
|
6 font-family: Helvetica, Arial, sans-serif; font-size: 12px; |
|
7 background-color: #e0e0e8; color: #204020; margin: 0; |
|
8 } |
|
9 |
|
10 .clear { |
|
11 clear: both; |
|
12 } |
|
13 |
|
14 .gradient { |
|
15 background-color: #f0f0f8; |
|
16 background-image: -webkit-radial-gradient(#ffffff, #d8d8e0); background-image: -moz-radial-gradient(#ffffff, #d8d8e0); |
|
17 } |
|
18 |
|
19 /* EN HAUT */ |
|
20 |
|
21 #titlebar { |
|
22 background: #ffffff; border-bottom: 1px solid #CCC; position: fixed; margin: 0; padding: 0; left: 0; top: 0; right: 0; height: 45px; overflow: hidden; |
|
23 } |
|
24 |
|
25 #maintitle { |
|
26 position: absolute; left: 0; top: 0; width: 250px; text-align: center; |
|
27 } |
|
28 |
|
29 |
|
30 h1 { |
|
31 margin:0; |
|
32 } |
|
33 |
|
34 h1 a { |
|
35 background: url(../img/gephi.png) no-repeat; |
|
36 color: #208020; |
|
37 display: block; |
|
38 height:45px; |
|
39 margin: 0; |
|
40 text-indent: -9999px; |
|
41 width: 195px; |
|
42 } |
|
43 |
|
44 #searchinput { |
|
45 background: #fff url(../img/search.gif) no-repeat right; |
|
46 border: 1px solid #DDD; |
|
47 font-size: 14px; line-height: 14px, height: 14px; |
|
48 left: 250px; |
|
49 padding: 1px 4px; margin: 0; |
|
50 position: absolute; |
|
51 top: 10px; |
|
52 width: 320px; |
|
53 } |
|
54 |
|
55 #searchinput:focus, #searchinput:active { |
|
56 border-color:#aaa; |
|
57 } |
|
58 |
|
59 #searchsubmit { |
|
60 position: absolute; left: 560px; top: 13px; width: 20px; height: 20px; margin: 0; padding: 0; height: 16px; border: none; background: none; text-indent: -999px; cursor: pointer; cursor: hand; |
|
61 } |
|
62 |
|
63 .grey { |
|
64 color: #cccccc; font-style: italic; |
|
65 } |
|
66 |
|
67 /* AU CENTRE */ |
|
68 |
|
69 #zonecentre { |
|
70 position: fixed; top: 45px; bottom: 0; left: 0; right: 0; overflow: hidden; |
|
71 } |
|
72 |
|
73 |
|
74 #carte { |
|
75 position: absolute; left: 0px; |
|
76 } |
|
77 |
|
78 /* ZOOM IN OUT */ |
|
79 |
|
80 #ctlzoom { |
|
81 position: absolute; left: 5px; bottom: 5px; list-style: none; padding: 0; margin: 0; |
|
82 } |
|
83 |
|
84 #ctlzoom li { |
|
85 padding: 0; margin: 10px 0; width: 36px; text-align: center; |
|
86 } |
|
87 |
|
88 #zoomSliderzone { |
|
89 height: 120px; |
|
90 } |
|
91 |
|
92 #zoomMinusButton, #zoomPlusButton { |
|
93 display: block; width: 24px; height: 24px; background:url(../img/plusmoins.png); margin: 0 auto; |
|
94 } |
|
95 |
|
96 #zoomMinusButton { |
|
97 background-position: 0 -24px; |
|
98 } |
|
99 |
|
100 #zoomMinusButton:hover { |
|
101 background-position: -24px -24px; |
|
102 } |
|
103 |
|
104 #zoomPlusButton { |
|
105 background-position: 0 0; |
|
106 } |
|
107 |
|
108 #zoomPlusButton:hover { |
|
109 background-position: -24px 0; |
|
110 } |
|
111 |
|
112 #lensButton, #edgesButton { |
|
113 display: block; width: 36px; height: 36px; background:url(../img/loupe-edges.png); margin: 0 auto; |
|
114 } |
|
115 |
|
116 #lensButton { |
|
117 background-position: -72px 0; |
|
118 } |
|
119 |
|
120 #lensButton:hover { |
|
121 background-position: -36px 0; |
|
122 } |
|
123 |
|
124 #lensButton.off { |
|
125 background-position: 0 0; |
|
126 } |
|
127 |
|
128 #lensButton.off:hover { |
|
129 background-position: -108px 0; |
|
130 } |
|
131 |
|
132 #edgesButton { |
|
133 background-position: -72px -36px; |
|
134 } |
|
135 |
|
136 #edgesButton:hover { |
|
137 background-position: -36px -36px; |
|
138 } |
|
139 |
|
140 #edgesButton.off { |
|
141 background-position: 0 -36px; |
|
142 } |
|
143 |
|
144 #edgesButton.off:hover { |
|
145 background-position: -108px -36px; |
|
146 } |
|
147 |
|
148 #zoomSlider { |
|
149 background:#fff; |
|
150 border:1px solid #aaa; |
|
151 height: 120px; margin: 0 auto; |
|
152 } |
|
153 |
|
154 /* EN BAS A GAUCHE */ |
|
155 |
|
156 #overviewzone { |
|
157 position: fixed; right: 0; bottom: 0; |
|
158 border-style: solid none none solid; border-width: 5px; border-color: #ffffff; |
|
159 } |
|
160 |
|
161 /* COLONNE DE GAUCHE */ |
|
162 |
|
163 #leftcolumn { |
|
164 position: absolute; top: 45px; bottom: 0px; left: -250px; width: 250px; background-color: rgb(250, 250, 252); box-shadow: 2px 0 2px #808090; padding: 0; |
|
165 } |
|
166 |
|
167 |
|
168 /* GESTION DE LA BARRE DE GAUCHE */ |
|
169 |
|
170 #unfold { |
|
171 position: absolute; top: 16px; right: -14px; width: 12px; height: 12px; background: rgb(250, 250, 252); padding: 2px 2px 2px 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 1px 1px 2px #808090; |
|
172 } |
|
173 |
|
174 #aUnfold { |
|
175 float: left; width: 12px; height: 12px; background-image: url(../img/fleches-horiz.png); |
|
176 } |
|
177 |
|
178 .leftarrow { |
|
179 background-position: -12px 0; |
|
180 } |
|
181 |
|
182 .rightarrow { |
|
183 background-position: 0 0; |
|
184 } |
|
185 |
|
186 .leftarrow:hover { |
|
187 background-position: -12px -12px; |
|
188 } |
|
189 |
|
190 .rightarrow:hover { |
|
191 background-position: 0 -12px; |
|
192 } |
|
193 |
|
194 |
|
195 /* ZONE GAUCHE */ |
|
196 |
|
197 #leftcontent { |
|
198 position: absolute; left: 0; top: 0; bottom: 0; right: 0; overflow: auto; list-style: none; margin: 0; padding: 0; border-top: 1px solid #cccccc; |
|
199 } |
|
200 |
|
201 div.largepill { |
|
202 float: left; width: 16px; height: 16px; border-radius: 8px; margin: 0 5px 0 0; |
|
203 } |
|
204 |
|
205 div.smallpill { |
|
206 float: left; width: 12px; height: 12px; border-radius: 6px; margin: 0 5px 0 0; |
|
207 } |
|
208 |
|
209 #leftcontent h3 { |
|
210 font-size: 16px; |
|
211 } |
|
212 |
|
213 #leftcontent h4 { |
|
214 font-size: 14px; |
|
215 } |
|
216 |
|
217 #leftcontent h3, #leftcontent h4, #leftcontent p, #leftcontent ul { |
|
218 margin: 5px; |
|
219 } |
|
220 |
|
221 #leftcontent ul { |
|
222 list-style: none; padding: 0; |
|
223 } |
|
224 |
|
225 #leftcontent li { |
|
226 margin: 2px 0; padding: 0; font-size: 12px; |
|
227 } |
|
228 |
|
229 a { |
|
230 color: #06a8de; font-weight: bold; text-decoration: none; |
|
231 } |
|
232 |
|
233 a:hover { |
|
234 color: #000080; |
|
235 } |
|
236 |
|
237 /* AUTOCOMPLETE */ |
|
238 |
|
239 #autocomplete { |
|
240 position: absolute; display: none; padding: 0; margin: 0; |
|
241 border-style: none solid; border-color: #ccc; border-width: 1px; |
|
242 } |
|
243 |
|
244 #autocomplete div { |
|
245 border-bottom: 1px solid #ccc; padding: 0; margin: 0; float: left; clear: both; background: #fff; |
|
246 } |
|
247 |
|
248 #autocomplete h4 { |
|
249 float: left; width: 80px; margin: 5px; font-size: 12px; |
|
250 } |
|
251 |
|
252 #autocomplete ul { |
|
253 float: left; width: 240px; list-style: none; padding: 0; margin: 0; |
|
254 } |
|
255 |
|
256 #autocomplete li { |
|
257 margin: 0; width: 240px; height: 28px; font-size: 12px; clear: both; |
|
258 } |
|
259 |
|
260 #autocomplete li a { |
|
261 display: block; width: 240px; height: 28px; background: #fff; color: #06a8de; |
|
262 } |
|
263 |
|
264 #autocomplete li.hover a { |
|
265 color: #fff; background: #06a8de; |
|
266 } |
|
267 |
|
268 #autocomplete span { |
|
269 float: left; margin: 0; padding: 6px 2px 0; |
|
270 } |
|
271 |
|
272 #autocomplete img { |
|
273 float: left; border: 0; width: 24px; height: 24px; margin: 2px 6px; |
|
274 } |