website annotate slitaz.css @ rev 694
CSS: small fix to nav list
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Fri Dec 24 15:38:16 2010 +0100 (2010-12-24) |
| parents | 772b09e644ea |
| children | 415024d9fe10 |
| rev | line source |
|---|---|
| pankso@1 | 1 /* |
| pankso@1 | 2 CSS style for SliTaz GNU/Linux website |
| pankso@1 | 3 www.slitaz.org - (c) 2007 Pankso |
| pankso@1 | 4 */ |
| pankso@1 | 5 |
| pankso@555 | 6 html { |
| pankso@555 | 7 height: 102%; |
| pankso@555 | 8 } |
| pankso@555 | 9 |
| pankso@1 | 10 body { |
| pankso@555 | 11 background: #ffffff; |
| pankso@1 | 12 color: black; |
| pankso@1 | 13 font: 13px sans-serif, vernada, arial; |
| pankso@1 | 14 margin: 0; |
| pankso@1 | 15 } |
| pankso@1 | 16 |
| pankso@1 | 17 /* Accessibility */ |
| pankso@1 | 18 |
| pankso@1 | 19 #access { |
| pankso@1 | 20 position: absolute; |
| pankso@693 | 21 top: 0px; |
| pankso@693 | 22 right: 0px; |
| pankso@1 | 23 text-align: right; |
| pankso@693 | 24 width: auto; |
| pankso@1 | 25 margin: 0; |
| pankso@693 | 26 padding: 4px 4px 4px 20px; |
| pankso@555 | 27 font-size: 11px; |
| pankso@1 | 28 font-weight: bold; |
| pankso@693 | 29 /* CSS3 transition */ |
| pankso@693 | 30 -webkit-transition-property: background-color; |
| pankso@693 | 31 -webkit-transition-duration: 1s; |
| pankso@693 | 32 -moz-transition-property: background-color; |
| pankso@693 | 33 -moz-transition-duration: 1s; |
| pankso@693 | 34 transition-property: background-color; |
| pankso@693 | 35 transition-duration: 1s; |
| pankso@693 | 36 } |
| pankso@693 | 37 |
| pankso@693 | 38 #access:hover { |
| pankso@693 | 39 background-color: #b64b22; |
| pankso@693 | 40 -moz-border-radius-bottomleft: 8px; |
| pankso@693 | 41 -webkit-border-radius-bottomleft: 8px; |
| pankso@693 | 42 border-bottom-left-radius: 8px; |
| pankso@693 | 43 -moz-box-shadow: 0 1px 3px #666; |
| pankso@693 | 44 -webkit-box-shadow: 0 1px 3px #666; |
| pankso@693 | 45 box-shadow: 0 1px 3px #666; |
| pankso@1 | 46 } |
| pankso@1 | 47 |
| pankso@1 | 48 #access a { |
| pankso@1 | 49 background: inherit; |
| pankso@326 | 50 color: white; |
| pankso@1 | 51 text-decoration: none; |
| pankso@1 | 52 } |
| pankso@1 | 53 |
| pankso@1 | 54 #access a:hover { |
| pankso@1 | 55 background: inherit; |
| pankso@326 | 56 color: #222222; |
| pankso@1 | 57 } |
| pankso@1 | 58 |
| pankso@1 | 59 /* Header and title */ |
| pankso@1 | 60 |
| pankso@1 | 61 #header{ |
| pankso@1 | 62 background: #f0ba08 url(pics/website/header.png) repeat-x top; |
| pankso@1 | 63 color: black; |
| pankso@1 | 64 width: 100%; |
| pankso@557 | 65 height: 50px; |
| pankso@1 | 66 border-top: 1px solid black; |
| pankso@1 | 67 border-bottom: 1px solid black; |
| pankso@1 | 68 margin-bottom: 30px; |
| pankso@1 | 69 } |
| pankso@1 | 70 |
| pankso@555 | 71 #titre { |
| pankso@555 | 72 position: absolute; |
| pankso@1 | 73 font-size: 16px; |
| pankso@1 | 74 font-weight: bolder ; |
| pankso@555 | 75 margin-left: 200px; |
| pankso@555 | 76 margin-top: 28px; |
| pankso@1 | 77 } |
| pankso@1 | 78 |
| pankso@1 | 79 #logo { |
| pankso@1 | 80 position: absolute; |
| pankso@1 | 81 float: left; |
| pankso@555 | 82 margin-left: 16px; |
| pankso@1 | 83 margin-top: 0px; |
| pankso@1 | 84 } |
| pankso@1 | 85 |
| pankso@1 | 86 /* Navigation */ |
| pankso@1 | 87 |
| pankso@1 | 88 #nav { |
| pankso@1 | 89 position: absolute; |
| pankso@555 | 90 top: 76px; |
| pankso@565 | 91 right: 80px; |
| pankso@555 | 92 color: #555555; |
| pankso@1 | 93 float: right; |
| pankso@555 | 94 width: 250px; |
| pankso@563 | 95 line-height: 1.5em; |
| pankso@1 | 96 text-align: left; |
| pankso@555 | 97 font-size: 12px; |
| pankso@1 | 98 } |
| pankso@1 | 99 |
| pankso@555 | 100 #nav .nav_box ul { |
| pankso@1 | 101 list-style-type: none; |
| pankso@555 | 102 margin: 0; |
| pankso@555 | 103 padding: 10px 24px 10px 0px; |
| pankso@694 | 104 background-color: inherit; |
| pankso@1 | 105 } |
| pankso@1 | 106 |
| pankso@1 | 107 #nav li { |
| pankso@1 | 108 display: inline; |
| pankso@1 | 109 } |
| pankso@1 | 110 |
| pankso@555 | 111 #nav h4 { |
| pankso@693 | 112 font-size: 120%; |
| pankso@555 | 113 color: #666666; |
| pankso@555 | 114 font-weight: bold; |
| pankso@555 | 115 margin: 0; |
| pankso@555 | 116 padding: 0 0 1px 0; |
| pankso@555 | 117 border-bottom: 1px solid #cecece; |
| pankso@555 | 118 } |
| pankso@555 | 119 |
| pankso@1 | 120 #nav a { |
| pankso@555 | 121 color: #0F314E; |
| pankso@1 | 122 background: inherit; |
| pankso@1 | 123 display: block; |
| pankso@1 | 124 text-decoration: none; |
| pankso@555 | 125 font-weight: bold; |
| pankso@1 | 126 } |
| pankso@1 | 127 |
| pankso@1 | 128 #nav a:hover { |
| pankso@1 | 129 color: #DF8F06; |
| pankso@1 | 130 text-decoration: none; |
| pankso@1 | 131 display: block; |
| pankso@1 | 132 } |
| pankso@1 | 133 |
| pankso@74 | 134 #nav hr { |
| pankso@74 | 135 margin: 2px 0px 1px 0px; |
| pankso@74 | 136 border: 0px; |
| pankso@74 | 137 border-top: 1px solid #BDBDBD; |
| pankso@74 | 138 } |
| pankso@555 | 139 |
| pankso@694 | 140 #nav ul { |
| pankso@694 | 141 -moz-border-radius: 8px; |
| pankso@694 | 142 -webkit-border-radius: 8px; |
| pankso@694 | 143 list-style-type: none; |
| pankso@694 | 144 margin: 10px 0; |
| pankso@694 | 145 padding: 10px 24px 10px 24px; |
| pankso@694 | 146 background-color: #eaeaea; |
| pankso@694 | 147 } |
| pankso@694 | 148 |
| pankso@694 | 149 .nav_box { |
| pankso@555 | 150 margin: 10px 0; |
| pankso@555 | 151 padding: 10px 24px 10px 24px; |
| pankso@555 | 152 background-color: #eaeaea; |
| pankso@555 | 153 text-align: justify; |
| pankso@693 | 154 -moz-border-radius: 8px; |
| pankso@693 | 155 -webkit-border-radius: 8px; |
| pankso@693 | 156 border-radius: 8px; |
| pankso@693 | 157 -moz-box-shadow: 0 1px 3px #666; |
| pankso@693 | 158 -webkit-box-shadow: 0 1px 3px #666; |
| pankso@693 | 159 box-shadow: 0 1px 3px #666; |
| pankso@693 | 160 /* CSS3 transition */ |
| pankso@693 | 161 -webkit-transition-property: background-color; |
| pankso@693 | 162 -webkit-transition-duration: 2s; |
| pankso@693 | 163 -moz-transition-property: background-color; |
| pankso@693 | 164 -moz-transition-duration: 2s; |
| pankso@693 | 165 transition-property: background-color; |
| pankso@693 | 166 transition-duration: 2s; |
| pankso@555 | 167 } |
| pankso@555 | 168 |
| pankso@694 | 169 .nav_box:hover { background-color: #f8f8f8; } |
| pankso@693 | 170 |
| pankso@563 | 171 #nav .nav_box p { |
| pankso@563 | 172 line-height: 1.3em; |
| pankso@563 | 173 } |
| pankso@563 | 174 |
| pankso@555 | 175 #nav .nav_box p a { |
| pankso@555 | 176 display: inline; |
| pankso@555 | 177 font-weight: normal; |
| pankso@555 | 178 text-decoration: underline; |
| pankso@555 | 179 } |
| pankso@555 | 180 |
| pankso@555 | 181 #nav .nav_box p a:hover { |
| pankso@555 | 182 text-decoration: none; |
| pankso@555 | 183 color: blue; |
| pankso@555 | 184 background: inherit; |
| pankso@555 | 185 } |
| pankso@555 | 186 |
| pankso@555 | 187 #nav hr { |
| pankso@555 | 188 height: 0px; |
| pankso@555 | 189 border: 0px solid #eaeaea; |
| pankso@555 | 190 } |
| pankso@555 | 191 |
| pankso@1 | 192 /* Page content */ |
| pankso@1 | 193 |
| pankso@693 | 194 #content { |
| pankso@1 | 195 background: white; |
| pankso@1 | 196 color: black; |
| pankso@1 | 197 text-align: justify; |
| pankso@1 | 198 height: auto; |
| pankso@565 | 199 margin: 6px 320px 0px 0px; |
| pankso@565 | 200 padding: 0px 40px 60px 80px; |
| pankso@1 | 201 } |
| pankso@1 | 202 |
| pankso@693 | 203 #content-full { |
| pankso@693 | 204 background: white; |
| pankso@693 | 205 color: black; |
| pankso@693 | 206 text-align: justify; |
| pankso@693 | 207 height: auto; |
| pankso@693 | 208 margin: 6px 0px 0px 0px; |
| pankso@693 | 209 padding: 0px 80px 35% 80px; |
| pankso@693 | 210 } |
| pankso@693 | 211 |
| pankso@693 | 212 #content li, #content-full li { |
| pankso@1 | 213 line-height: 1.5em; |
| pankso@1 | 214 text-align: left; |
| pankso@1 | 215 } |
| pankso@1 | 216 |
| pankso@1 | 217 /* Legal informations */ |
| pankso@1 | 218 |
| pankso@1 | 219 #copy { |
| pankso@1 | 220 font-size: 11px ; |
| pankso@565 | 221 text-align: left ; |
| pankso@1 | 222 background: transparent; |
| pankso@1 | 223 color: #a8a8a8; |
| pankso@1 | 224 padding-top: 10px; |
| pankso@565 | 225 margin: 0 0 0 80px; |
| pankso@1 | 226 } |
| pankso@1 | 227 |
| pankso@1 | 228 #copy a { |
| pankso@1 | 229 background: inherit; |
| pankso@1 | 230 color: #a8a8a8; |
| pankso@1 | 231 } |
| pankso@1 | 232 |
| pankso@1 | 233 #copy a:hover { |
| pankso@1 | 234 background: inherit; |
| pankso@555 | 235 color: #666666; |
| pankso@1 | 236 } |
| pankso@1 | 237 |
| pankso@1 | 238 /* Footer */ |
| pankso@1 | 239 |
| pankso@1 | 240 #bottom { |
| pankso@1 | 241 float: none; |
| pankso@1 | 242 background: inherit; |
| pankso@1 | 243 color: black; |
| pankso@1 | 244 width: auto; |
| pankso@1 | 245 clear: both; |
| pankso@1 | 246 padding: 0; |
| pankso@565 | 247 margin: 0 0 0 80px; |
| pankso@565 | 248 text-align: left; |
| pankso@1 | 249 vertical-align: middle; |
| pankso@1 | 250 } |
| pankso@1 | 251 |
| pankso@1 | 252 #news li { |
| pankso@1 | 253 list-style-type: square; |
| pankso@1 | 254 border-bottom: 1px dotted #BEBEBE; |
| pankso@1 | 255 margin-left: -25px; |
| pankso@1 | 256 padding: 4px 0px 4px 0px; |
| pankso@1 | 257 } |
| pankso@375 | 258 |
| pankso@678 | 259 #news a { |
| pankso@678 | 260 text-decoration: none; |
| pankso@678 | 261 } |
| pankso@678 | 262 |
| pankso@1 | 263 #gallery { |
| pankso@1 | 264 text-align: center; |
| pankso@1 | 265 } |
| pankso@375 | 266 |
| pankso@286 | 267 #gallery table { |
| pankso@286 | 268 margin: 30px 0px 30px 0px; |
| pankso@286 | 269 } |
| pankso@1 | 270 |
| pankso@375 | 271 /* Clouds */ |
| pankso@375 | 272 |
| pankso@375 | 273 #cloud { |
| pankso@375 | 274 padding: 20px 0px 20px 0px; |
| pankso@375 | 275 line-height: 3em; |
| pankso@375 | 276 text-align: center; |
| pankso@375 | 277 } |
| pankso@375 | 278 #cloud a { padding: 4px; color: #956411; } |
| pankso@375 | 279 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; } |
| pankso@375 | 280 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; } |
| pankso@375 | 281 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; } |
| pankso@375 | 282 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; } |
| pankso@375 | 283 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; } |
| pankso@375 | 284 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; } |
| pankso@375 | 285 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; } |
| pankso@375 | 286 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; } |
| pankso@375 | 287 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; } |
| pankso@375 | 288 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; } |
| pankso@375 | 289 |
| pankso@1 | 290 /* CSS class. */ |
| pankso@1 | 291 |
| pankso@555 | 292 .infobox { |
| pankso@555 | 293 margin: 10px; |
| pankso@555 | 294 padding: 12px; |
| pankso@693 | 295 background: #f8f8f8; |
| pankso@555 | 296 -moz-border-radius: 8px; |
| pankso@555 | 297 -webkit-border-radius: 8px; |
| pankso@693 | 298 border-radius: 8px; |
| pankso@693 | 299 -moz-box-shadow: 0 1px 3px #666; |
| pankso@693 | 300 -webkit-box-shadow: 0 1px 3px #666; |
| pankso@693 | 301 box-shadow: 0 1px 3px #666; |
| pankso@693 | 302 } |
| pankso@693 | 303 |
| pankso@693 | 304 .block { |
| pankso@693 | 305 /*padding-bottom: 35%;*/ |
| pankso@693 | 306 color: black; |
| pankso@693 | 307 } |
| pankso@693 | 308 |
| pankso@693 | 309 .block h3 img { |
| pankso@693 | 310 padding: 2px; |
| pankso@693 | 311 } |
| pankso@693 | 312 |
| pankso@693 | 313 .block_left { |
| pankso@693 | 314 width: 46%; |
| pankso@693 | 315 float: left; |
| pankso@693 | 316 background-color: #f5f5f5; |
| pankso@693 | 317 margin: 4px 2px; |
| pankso@693 | 318 padding: 0 6px; |
| pankso@693 | 319 } |
| pankso@693 | 320 |
| pankso@693 | 321 .block_right { |
| pankso@693 | 322 width: 46%; |
| pankso@693 | 323 float: right; |
| pankso@693 | 324 background-color: #f5f5f5; |
| pankso@693 | 325 margin: 4px 2px; |
| pankso@693 | 326 padding: 0 6px; |
| pankso@693 | 327 } |
| pankso@693 | 328 |
| pankso@693 | 329 .block_left, .block_right { |
| pankso@693 | 330 -moz-border-radius: 8px; |
| pankso@693 | 331 -webkit-border-radius: 8px; |
| pankso@693 | 332 border-radius: 8px; |
| pankso@693 | 333 -moz-box-shadow: 0 1px 3px #666; |
| pankso@693 | 334 -webkit-box-shadow: 0 1px 3px #666; |
| pankso@693 | 335 box-shadow: 0 1px 3px #666; |
| pankso@693 | 336 /* CSS3 transition */ |
| pankso@693 | 337 -webkit-transition-property: background-color; |
| pankso@693 | 338 -webkit-transition-duration: 2s; |
| pankso@693 | 339 -moz-transition-property: background-color; |
| pankso@693 | 340 -moz-transition-duration: 2s; |
| pankso@693 | 341 transition-property: background-color; |
| pankso@693 | 342 transition-duration: 2s; |
| pankso@693 | 343 } |
| pankso@693 | 344 |
| pankso@693 | 345 .block_left:hover, .block_right:hover { |
| pankso@693 | 346 background-color: #f2b21d; |
| pankso@1 | 347 } |
| pankso@1 | 348 |
| pankso@1 | 349 /* HTML styles */ |
| pankso@1 | 350 |
| pankso@1 | 351 h1 { |
| pankso@555 | 352 color: blue; |
| pankso@1 | 353 background: inherit; |
| pankso@1 | 354 text-align: left; |
| pankso@555 | 355 margin: 0px 0px 10px 0px; |
| pankso@555 | 356 font-size: 140%; |
| pankso@555 | 357 font-weight: bold; |
| pankso@1 | 358 } |
| pankso@1 | 359 |
| pankso@1 | 360 h2 { |
| pankso@555 | 361 color: #DF8F06; |
| pankso@555 | 362 /* border-top: 1px solid #f3f3f3; */ |
| pankso@555 | 363 border-left: 8px solid #f3f3f3; |
| pankso@555 | 364 padding: 4px 0px 4px 4px; |
| pankso@555 | 365 margin: 0; |
| pankso@555 | 366 font-size: 140%; |
| pankso@555 | 367 font-weight: bold; |
| pankso@1 | 368 } |
| pankso@1 | 369 |
| pankso@1 | 370 h3 { |
| pankso@1 | 371 font-weight: bold; |
| pankso@1 | 372 color: #6c0023; |
| pankso@1 | 373 background: inherit; |
| pankso@1 | 374 } |
| pankso@1 | 375 |
| pankso@1 | 376 a { |
| pankso@1 | 377 text-decoration: underline; |
| pankso@1 | 378 color: #0F314E; |
| pankso@1 | 379 background: inherit; |
| pankso@1 | 380 } |
| pankso@1 | 381 |
| pankso@1 | 382 a:hover { |
| pankso@1 | 383 text-decoration: none; |
| pankso@1 | 384 color: blue; |
| pankso@1 | 385 background: inherit; |
| pankso@1 | 386 } |
| pankso@1 | 387 |
| pankso@1 | 388 code { |
| pankso@1 | 389 font-size: 12px; |
| pankso@1 | 390 color: #669900; |
| pankso@1 | 391 background: inherit; |
| pankso@1 | 392 } |
| pankso@1 | 393 |
| pankso@1 | 394 tt { |
| pankso@1 | 395 color: #15EE15; |
| pankso@1 | 396 background: inherit; |
| pankso@1 | 397 } |
| pankso@1 | 398 |
| pankso@1 | 399 img { |
| pankso@1 | 400 border: 0pt none; |
| pankso@1 | 401 } |
| pankso@1 | 402 |
| pankso@1 | 403 fieldset { |
| pankso@555 | 404 background: #E2ECf6; |
| pankso@1 | 405 color: black; |
| pankso@1 | 406 margin-top: 25px; |
| pankso@1 | 407 border: 1px solid black; |
| pankso@1 | 408 } |
| pankso@1 | 409 |
| pankso@1 | 410 legend { |
| pankso@1 | 411 border: 1px solid black; |
| pankso@1 | 412 color: #6c0023; |
| pankso@1 | 413 background: #eaeaea; |
| pankso@1 | 414 font-weight: bold; |
| pankso@1 | 415 } |
| pankso@1 | 416 |
| pankso@1 | 417 pre { |
| pankso@1 | 418 padding: 5px; |
| pankso@1 | 419 color: black; |
| pankso@1 | 420 background: #E1E0B0; |
| pankso@1 | 421 } |
| pankso@1 | 422 |
| pankso@1 | 423 pre.script { |
| pankso@1 | 424 padding: 10px; |
| pankso@1 | 425 color: black; |
| pankso@1 | 426 background: #E8E8E8; |
| pankso@1 | 427 border: 1px inset #606060; |
| pankso@1 | 428 } |
| pankso@1 | 429 |
| pankso@555 | 430 textarea { |
| pankso@555 | 431 background: #E5E5E5; |
| pankso@555 | 432 margin-top: 12px; |
| pankso@555 | 433 } |
| pankso@555 | 434 |
| pankso@1 | 435 /* Packages pages */ |
| pankso@1 | 436 |
| pankso@1 | 437 .pkg_nav { |
| pankso@1 | 438 border-top: 1px solid black; |
| pankso@1 | 439 margin-top: 10px; |
| pankso@1 | 440 padding-top: 10px; |
| pankso@1 | 441 } |
| pankso@1 | 442 |
| pankso@1 | 443 pre.package { |
| pankso@1 | 444 padding: 0px; |
| pankso@1 | 445 color: black; |
| pankso@1 | 446 background: white; |
| pankso@1 | 447 } |
| pankso@1 | 448 |
| pankso@1 | 449 p.get { |
| pankso@1 | 450 text-align: center; |
| pankso@1 | 451 padding: 10px; |
| pankso@1 | 452 color: black; |
| pankso@1 | 453 background: #F3F3F3; |
| pankso@1 | 454 border: 1px solid #DEDEDE; |
| pankso@1 | 455 } |
| pascal@669 | 456 |
| pascal@669 | 457 .year:after { |
| pascal@669 | 458 /* content: "2007-2010"; */ |
| pascal@669 | 459 content: "2010"; |
| pascal@669 | 460 } |