website annotate slitaz.css @ rev 519
Tiny home page improvment and pics clean up
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Sat Jul 04 02:30:29 2009 +0200 (2009-07-04) |
| parents | 9493db781e4a |
| children | 4eea4b8d3511 |
| 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@1 | 6 body { |
| pankso@1 | 7 background: #222222; |
| pankso@1 | 8 color: black; |
| pankso@1 | 9 font: 13px sans-serif, vernada, arial; |
| pankso@1 | 10 margin: 0; |
| pankso@1 | 11 padding-bottom: 100%; |
| pankso@1 | 12 } |
| pankso@1 | 13 |
| pankso@1 | 14 /* Accessibility */ |
| pankso@1 | 15 |
| pankso@1 | 16 #access { |
| pankso@1 | 17 position: absolute; |
| pankso@1 | 18 top: 1px; |
| pankso@1 | 19 right: 6px; |
| pankso@1 | 20 text-align: right; |
| pankso@1 | 21 width: 100%; |
| pankso@1 | 22 margin: 0; |
| pankso@1 | 23 font-size: 12px; |
| pankso@1 | 24 font-weight: bold; |
| pankso@1 | 25 } |
| pankso@1 | 26 |
| pankso@1 | 27 #access a { |
| pankso@1 | 28 background: inherit; |
| pankso@326 | 29 color: white; |
| pankso@1 | 30 text-decoration: none; |
| pankso@1 | 31 } |
| pankso@1 | 32 |
| pankso@1 | 33 #access a:hover { |
| pankso@1 | 34 background: inherit; |
| pankso@326 | 35 color: #222222; |
| pankso@1 | 36 } |
| pankso@1 | 37 |
| pankso@1 | 38 /* Header and title */ |
| pankso@1 | 39 |
| pankso@1 | 40 #header{ |
| pankso@1 | 41 background: #f0ba08 url(pics/website/header.png) repeat-x top; |
| pankso@1 | 42 color: black; |
| pankso@1 | 43 width: 100%; |
| pankso@1 | 44 height: 50px ; |
| pankso@1 | 45 border-top: 1px solid black; |
| pankso@1 | 46 border-bottom: 1px solid black; |
| pankso@1 | 47 margin-bottom: 30px; |
| pankso@1 | 48 } |
| pankso@1 | 49 |
| pankso@1 | 50 #titre{ |
| pankso@1 | 51 font-size: 16px; |
| pankso@1 | 52 font-weight: bolder ; |
| pankso@1 | 53 margin-left: 232px; |
| pankso@1 | 54 margin-top: 4px; |
| pankso@1 | 55 padding-top: 25px ; |
| pankso@1 | 56 } |
| pankso@1 | 57 |
| pankso@1 | 58 #logo { |
| pankso@1 | 59 position: absolute; |
| pankso@1 | 60 float: left; |
| pankso@1 | 61 margin-left: 32px; |
| pankso@1 | 62 margin-right: 20px; |
| pankso@1 | 63 margin-top: 0px; |
| pankso@1 | 64 } |
| pankso@1 | 65 |
| pankso@1 | 66 /* Navigation */ |
| pankso@1 | 67 |
| pankso@1 | 68 #nav { |
| pankso@1 | 69 position: absolute; |
| pankso@1 | 70 top: 100px; |
| pankso@1 | 71 right: 6px; |
| pankso@519 | 72 background: #eeeeee url(pics/website/nav-tr.png) no-repeat top right; |
| pankso@1 | 73 color: black; |
| pankso@1 | 74 float: right; |
| pankso@1 | 75 width: 152px; |
| pankso@1 | 76 line-height: 1.3em; |
| pankso@1 | 77 text-align: left; |
| pankso@519 | 78 font-size: 11px; |
| pankso@1 | 79 font-weight: bold; |
| pankso@1 | 80 } |
| pankso@1 | 81 |
| pankso@1 | 82 #nav_top { |
| pankso@1 | 83 background: transparent url(pics/website/nav-tl.png) no-repeat top left; |
| pankso@1 | 84 height: 12px; |
| pankso@1 | 85 } |
| pankso@1 | 86 |
| pankso@1 | 87 #nav_bottom { |
| pankso@1 | 88 background: transparent url(pics/website/nav-bl.png) no-repeat bottom left; |
| pankso@1 | 89 height: 12px; |
| pankso@1 | 90 } |
| pankso@1 | 91 |
| pankso@1 | 92 #nav_bottom_img { |
| pankso@1 | 93 background: transparent url(pics/website/nav-br.png) no-repeat bottom right; |
| pankso@1 | 94 height: 12px; |
| pankso@1 | 95 } |
| pankso@1 | 96 |
| pankso@1 | 97 #nav ul{ |
| pankso@1 | 98 list-style-type: none; |
| pankso@1 | 99 margin: 0px 0px 0px 6px; |
| pankso@364 | 100 padding: 3px 2px 3px 2px; |
| pankso@1 | 101 } |
| pankso@1 | 102 |
| pankso@1 | 103 #nav li { |
| pankso@1 | 104 display: inline; |
| pankso@1 | 105 } |
| pankso@1 | 106 |
| pankso@1 | 107 #nav a { |
| pankso@1 | 108 color: #3E1220; |
| pankso@1 | 109 background: inherit; |
| pankso@1 | 110 display: block; |
| pankso@1 | 111 padding: 0.5px; |
| pankso@1 | 112 text-decoration: none; |
| pankso@1 | 113 } |
| pankso@1 | 114 |
| pankso@1 | 115 #nav a:hover { |
| pankso@1 | 116 color: #DF8F06; |
| pankso@1 | 117 text-decoration: none; |
| pankso@1 | 118 display: block; |
| pankso@1 | 119 } |
| pankso@1 | 120 |
| pankso@74 | 121 #nav hr { |
| pankso@74 | 122 margin: 2px 0px 1px 0px; |
| pankso@74 | 123 border: 0px; |
| pankso@74 | 124 border-top: 1px solid #BDBDBD; |
| pankso@519 | 125 |
| pankso@74 | 126 } |
| pankso@1 | 127 /* Page content */ |
| pankso@1 | 128 |
| pankso@1 | 129 #content, #content_bottom, #content_top { |
| pankso@1 | 130 background: white; |
| pankso@1 | 131 color: black; |
| pankso@1 | 132 text-align: justify; |
| pankso@1 | 133 } |
| pankso@1 | 134 |
| pankso@1 | 135 #content_top { |
| pankso@1 | 136 height: 14px; |
| pankso@1 | 137 margin: 0px 100px 0px 100px; |
| pankso@1 | 138 } |
| pankso@1 | 139 |
| pankso@1 | 140 #content { |
| pankso@1 | 141 height: auto; |
| pankso@1 | 142 margin: -6px 100px 0px 100px; |
| pankso@1 | 143 padding: 0px 72px 72px 72px; |
| pankso@1 | 144 /*background: white; |
| pankso@1 | 145 color: #333333;*/ |
| pankso@1 | 146 } |
| pankso@1 | 147 |
| pankso@1 | 148 #content_bottom { |
| pankso@1 | 149 height: 14px; |
| pankso@1 | 150 margin: 0px 100px 0px 100px; |
| pankso@1 | 151 /*clear: both;*/ |
| pankso@1 | 152 } |
| pankso@1 | 153 |
| pankso@1 | 154 #content li { |
| pankso@1 | 155 line-height: 1.5em; |
| pankso@1 | 156 text-align: left; |
| pankso@1 | 157 } |
| pankso@1 | 158 |
| pankso@1 | 159 /* Legal informations */ |
| pankso@1 | 160 |
| pankso@1 | 161 #copy { |
| pankso@1 | 162 font-size: 11px ; |
| pankso@1 | 163 text-align: center ; |
| pankso@1 | 164 background: transparent; |
| pankso@1 | 165 color: #a8a8a8; |
| pankso@1 | 166 padding-top: 10px; |
| pankso@1 | 167 } |
| pankso@1 | 168 |
| pankso@1 | 169 #copy a { |
| pankso@1 | 170 background: inherit; |
| pankso@1 | 171 color: #a8a8a8; |
| pankso@1 | 172 } |
| pankso@1 | 173 |
| pankso@1 | 174 #copy a:hover { |
| pankso@1 | 175 background: inherit; |
| pankso@1 | 176 color: #EDEDED; |
| pankso@1 | 177 } |
| pankso@1 | 178 |
| pankso@1 | 179 /* Footer */ |
| pankso@1 | 180 |
| pankso@1 | 181 #bottom { |
| pankso@1 | 182 float: none; |
| pankso@1 | 183 background: inherit; |
| pankso@1 | 184 color: black; |
| pankso@1 | 185 width: auto; |
| pankso@1 | 186 clear: both; |
| pankso@1 | 187 padding: 0; |
| pankso@1 | 188 margin: 0; |
| pankso@1 | 189 text-align: center; |
| pankso@1 | 190 vertical-align: middle; |
| pankso@1 | 191 } |
| pankso@1 | 192 |
| pankso@1 | 193 #news li { |
| pankso@1 | 194 list-style-type: square; |
| pankso@1 | 195 border-bottom: 1px dotted #BEBEBE; |
| pankso@1 | 196 margin-left: -25px; |
| pankso@1 | 197 padding: 4px 0px 4px 0px; |
| pankso@1 | 198 } |
| pankso@375 | 199 |
| pankso@1 | 200 #gallery { |
| pankso@1 | 201 text-align: center; |
| pankso@1 | 202 } |
| pankso@375 | 203 |
| pankso@286 | 204 #gallery table { |
| pankso@286 | 205 margin: 30px 0px 30px 0px; |
| pankso@286 | 206 } |
| pankso@1 | 207 |
| pankso@375 | 208 /* Clouds */ |
| pankso@375 | 209 |
| pankso@375 | 210 #cloud { |
| pankso@375 | 211 padding: 20px 0px 20px 0px; |
| pankso@375 | 212 line-height: 3em; |
| pankso@375 | 213 text-align: center; |
| pankso@375 | 214 } |
| pankso@375 | 215 #cloud a { padding: 4px; color: #956411; } |
| pankso@375 | 216 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; } |
| pankso@375 | 217 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; } |
| pankso@375 | 218 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; } |
| pankso@375 | 219 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; } |
| pankso@375 | 220 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; } |
| pankso@375 | 221 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; } |
| pankso@375 | 222 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; } |
| pankso@375 | 223 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; } |
| pankso@375 | 224 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; } |
| pankso@375 | 225 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; } |
| pankso@375 | 226 |
| pankso@1 | 227 /* CSS class. */ |
| pankso@1 | 228 |
| pankso@1 | 229 .top_left, .top_right, .bottom_left, .bottom_right { |
| pankso@1 | 230 height: 14px; |
| pankso@1 | 231 width: 14px; |
| pankso@1 | 232 color: white; |
| pankso@1 | 233 background-color: #333333; |
| pankso@1 | 234 background-repeat: no-repeat; |
| pankso@1 | 235 } |
| pankso@1 | 236 |
| pankso@1 | 237 .top_left { |
| pankso@1 | 238 background-image: url(pics/website/content-tl.png); |
| pankso@1 | 239 background-position: left top; |
| pankso@1 | 240 position: absolute; |
| pankso@1 | 241 } |
| pankso@1 | 242 |
| pankso@1 | 243 .top_right { |
| pankso@1 | 244 background-image: url(pics/website/content-tr.png); |
| pankso@1 | 245 float: right; |
| pankso@1 | 246 } |
| pankso@1 | 247 |
| pankso@1 | 248 .bottom_left { |
| pankso@1 | 249 background-image: url(pics/website/content-bl.png); |
| pankso@1 | 250 position: absolute; |
| pankso@1 | 251 } |
| pankso@1 | 252 |
| pankso@1 | 253 .bottom_right { |
| pankso@1 | 254 background-image: url(pics/website/content-br.png); |
| pankso@1 | 255 float: right; |
| pankso@1 | 256 } |
| pankso@1 | 257 |
| pankso@1 | 258 /* HTML styles */ |
| pankso@1 | 259 |
| pankso@1 | 260 h1 { |
| pankso@1 | 261 color: #3E1220; |
| pankso@1 | 262 background: inherit; |
| pankso@1 | 263 text-align: left; |
| pankso@1 | 264 margin: 0px 0px 16px -58px; |
| pankso@1 | 265 } |
| pankso@1 | 266 |
| pankso@1 | 267 h2 { |
| pankso@1 | 268 color: #DF8F06; |
| pankso@1 | 269 border-left: 10px solid #F3F3F3; |
| pankso@1 | 270 padding: 4px 0px 4px 4px; |
| pankso@1 | 271 margin: 0; |
| pankso@1 | 272 } |
| pankso@1 | 273 |
| pankso@1 | 274 h3 { |
| pankso@1 | 275 font-weight: bold; |
| pankso@1 | 276 color: #6c0023; |
| pankso@1 | 277 background: inherit; |
| pankso@1 | 278 } |
| pankso@1 | 279 |
| pankso@1 | 280 a { |
| pankso@1 | 281 text-decoration: underline; |
| pankso@1 | 282 color: #0F314E; |
| pankso@1 | 283 background: inherit; |
| pankso@1 | 284 } |
| pankso@1 | 285 |
| pankso@1 | 286 a:hover { |
| pankso@1 | 287 text-decoration: none; |
| pankso@1 | 288 color: blue; |
| pankso@1 | 289 background: inherit; |
| pankso@1 | 290 } |
| pankso@1 | 291 |
| pankso@1 | 292 code { |
| pankso@1 | 293 font-size: 12px; |
| pankso@1 | 294 color: #669900; |
| pankso@1 | 295 background: inherit; |
| pankso@1 | 296 } |
| pankso@1 | 297 |
| pankso@1 | 298 tt { |
| pankso@1 | 299 color: #15EE15; |
| pankso@1 | 300 background: inherit; |
| pankso@1 | 301 } |
| pankso@1 | 302 |
| pankso@1 | 303 img { |
| pankso@1 | 304 border: 0pt none; |
| pankso@1 | 305 } |
| pankso@1 | 306 |
| pankso@1 | 307 fieldset { |
| pankso@364 | 308 background: #eeeeee; |
| pankso@1 | 309 color: black; |
| pankso@1 | 310 margin-top: 25px; |
| pankso@1 | 311 border: 1px solid black; |
| pankso@1 | 312 } |
| pankso@1 | 313 |
| pankso@1 | 314 legend { |
| pankso@1 | 315 border: 1px solid black; |
| pankso@1 | 316 color: #6c0023; |
| pankso@1 | 317 background: #eaeaea; |
| pankso@1 | 318 font-weight: bold; |
| pankso@1 | 319 } |
| pankso@1 | 320 |
| pankso@1 | 321 pre { |
| pankso@1 | 322 padding: 5px; |
| pankso@1 | 323 color: black; |
| pankso@1 | 324 background: #E1E0B0; |
| pankso@1 | 325 } |
| pankso@1 | 326 |
| pankso@1 | 327 pre.script { |
| pankso@1 | 328 padding: 10px; |
| pankso@1 | 329 color: black; |
| pankso@1 | 330 background: #E8E8E8; |
| pankso@1 | 331 border: 1px inset #606060; |
| pankso@1 | 332 } |
| pankso@1 | 333 |
| pankso@1 | 334 /* Packages pages */ |
| pankso@1 | 335 |
| pankso@1 | 336 .pkg_nav { |
| pankso@1 | 337 border-top: 1px solid black; |
| pankso@1 | 338 margin-top: 10px; |
| pankso@1 | 339 padding-top: 10px; |
| pankso@1 | 340 } |
| pankso@1 | 341 |
| pankso@1 | 342 pre.package { |
| pankso@1 | 343 padding: 0px; |
| pankso@1 | 344 color: black; |
| pankso@1 | 345 background: white; |
| pankso@1 | 346 } |
| pankso@1 | 347 |
| pankso@1 | 348 p.get { |
| pankso@1 | 349 text-align: center; |
| pankso@1 | 350 padding: 10px; |
| pankso@1 | 351 color: black; |
| pankso@1 | 352 background: #F3F3F3; |
| pankso@1 | 353 border: 1px solid #DEDEDE; |
| pankso@1 | 354 } |
| pankso@286 | 355 |