slitaz-dev-tools annotate tazpkg-web/style/slitaz.css @ rev 13

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