website annotate slitaz.css @ rev 1241

add fr/support.php and small fixes
author Christophe Lincoln <pankso@slitaz.org>
date Sun Dec 21 00:18:39 2014 +0100 (2014-12-21)
parents d98db40d8b63
children eeb457606799
rev   line source
pankso@1 1 /*
pascal@1170 2 CSS style for SliTaz Network - (C) 2014 SliTaz GNU/Linux
pankso@1 3 */
pankso@1 4
pankso@555 5 html {
pankso@710 6 min-height: 102%;
pankso@555 7 }
pankso@768 8
pankso@1 9 body {
pankso@555 10 background: #ffffff;
pankso@1 11 color: black;
pankso@1 12 font: 13px sans-serif, vernada, arial;
pankso@1 13 margin: 0;
pankso@818 14 min-width: 780px;
pankso@815 15 height: 100%;
pankso@1 16 }
pankso@768 17
pankso@768 18 a { text-decoration: underline; color: #215090; }
pankso@1200 19 a:hover { text-decoration: none; }
pankso@768 20 img { border: 0pt none; vertical-align: middle; }
pankso@1241 21 h2 { color: #444; font-size: 180%; }
pankso@768 22 h3 { color: #666; font-size: 140%; }
pankso@768 23 h4 { color: #888; font-size: 120%; }
pankso@1200 24 h2, h3 { border-bottom: 1px dashed #afafaf; padding-bottom: 5px; }
pankso@1241 25 li { list-style-type: square; }
pankso@768 26 pre {
pankso@768 27 background-color: #f8f8f8;
pankso@768 28 border: 1px solid #ddd;
pankso@768 29 padding: 10px;
pankso@1 30 }
pankso@1 31
pankso@741 32 /* Header */
pankso@1 33
pankso@768 34 #header {
pankso@768 35 height: 40px;
pankso@1200 36 background: #111 url(images/logo.png) no-repeat left;
pankso@1 37 }
pankso@768 38
pankso@768 39 #header h1 {
pankso@768 40 margin: 0;
pankso@1200 41 padding: 8px 0 8px 42px;
pankso@1200 42 width: 280px;
pankso@1200 43 font-size: 20px;
pankso@1200 44 font-style: italic;
pankso@1 45 }
pankso@768 46
pankso@768 47 #header h1 a {
pankso@768 48 color: white;
pankso@768 49 text-decoration: none;
pankso@768 50 }
pankso@768 51
pankso@1175 52 #header h1 a:hover, #network a:hover, #network span {
pankso@1175 53 color: #afafaf;
pankso@768 54 }
pankso@768 55
pankso@1200 56 #searchbtn {
pankso@1200 57 position: absolute;
pankso@1200 58 right: 8px;
pankso@1200 59 top: 48px;
pankso@1200 60 }
pankso@1200 61
pankso@768 62 /* Logo */
pankso@768 63
pankso@1 64 #logo {
pankso@768 65 background: url(images/logo.png) no-repeat left;
pankso@1 66 position: absolute;
pankso@1 67 float: left;
pankso@768 68 left: 0px;
pankso@768 69 top: 0px;
pankso@768 70 width: 40px;
pankso@768 71 height: 40px;
pankso@1 72 }
pankso@1 73
pankso@768 74 /* SliTaz Network */
pankso@1 75
pankso@768 76 #network {
pankso@768 77 float: right;
pankso@1175 78 padding: 14px 5px 0;
pankso@555 79 font-size: 12px;
pankso@1 80 }
pankso@768 81
pankso@1175 82 #network a, #network span { padding: 0 4px; }
pankso@1175 83 #network span { font-weight: bold; }
pankso@768 84
pankso@768 85 /* Block */
pankso@768 86
pankso@768 87 #block {
pankso@1175 88 min-height: 180px;
pankso@1175 89 background: #ccc;
pankso@1175 90 padding: 20px 10% 0px;
pankso@768 91 text-align: center;
pankso@1044 92 color: #222;
pankso@1175 93 border-bottom: 1px solid #afafaf;
pankso@768 94 }
pankso@768 95
pankso@768 96 #block_info {
pankso@768 97 text-align: justify;
pankso@768 98 width: 48%;
pankso@768 99 padding: 10px 10px 0 0;
pankso@768 100 }
pankso@768 101
pankso@768 102 #block a, #network a {
pankso@1175 103 color: #fff;
pankso@555 104 font-weight: bold;
pankso@768 105 text-decoration: none;
pankso@555 106 }
pankso@768 107
pankso@768 108 #block h4 {
pankso@1175 109 color: #222;
pankso@768 110 margin: 0px;
pankso@768 111 font-weight: bold;
pankso@768 112 font-size: 110%;
pankso@768 113 }
pankso@768 114
pankso@768 115 #block_info p { margin: 6px 0; padding: 0 12px 0 0; }
pankso@1175 116 #block_info a { font-weight: normal; color: #215090; }
pankso@1175 117 #block_info a:hover { text-decoration: underline; }
pankso@768 118 #block ul { list-style-type: square; }
pankso@1175 119 #block_nav a:hover { color: #afafaf; }
pankso@768 120
pankso@768 121 /* Navigation */
pankso@768 122
pankso@768 123 #block_nav {
pankso@1175 124 background: #666;
pankso@1175 125 padding: 10px 10px 20px;
pankso@768 126 text-align: justify;
pankso@768 127 width: 48%;
pankso@768 128 float: right;
pankso@768 129 }
pankso@768 130
pankso@768 131 #block_nav ul {
pankso@768 132 list-style-type: none;
pankso@768 133 margin: 6px 0;
pankso@768 134 padding: 0;
pankso@768 135 }
pankso@768 136
pankso@784 137 #block_nav h4 img {
pankso@784 138 margin: 0 4px 0 0;
pankso@784 139 padding: 0;
pankso@784 140 }
pankso@784 141
pankso@1200 142 .dlbutton {
pankso@1200 143 background: #333 url("/images/download-30.png") no-repeat 4px center;
pankso@1200 144 padding-left: 38px;
pankso@1200 145 -webkit-transition: background-color 0.6s;
pankso@1200 146 transition: background-color 0.5s;
pankso@1200 147 }
pankso@1200 148 .dldiv { margin: 30px 0; }
pankso@1200 149
pankso@1200 150 /*
pankso@1200 151 *
pankso@1200 152 *
pankso@1200 153 * Navigation NG
pankso@1200 154 *
pankso@1200 155 *
pankso@1200 156 * */
pankso@1200 157
pankso@1200 158 nav {
pankso@1200 159 font-size: 120%;
pankso@1200 160 min-height: 100px;
pankso@1200 161 background: #ddd;
pankso@1200 162 padding: 56px 6% 0;
pankso@1200 163 text-align: center;
pankso@1200 164 color: #222;
pankso@1200 165 border-bottom: 1px solid #afafaf;
pankso@1200 166 top: 40px;
pankso@1200 167 }
pankso@1200 168
pankso@1200 169 nav ul {
pankso@1200 170 margin: 0; padding: 0;
pankso@1200 171 list-style: none;
pankso@1200 172 }
pankso@1200 173 nav li { display: inline; }
pankso@1200 174
pankso@1200 175 nav a, .dlbutton {
pankso@1200 176 text-decoration: none;
pankso@1200 177 padding: 12px;
pankso@1200 178 color: #fff;
pankso@1200 179 font-weight: bold;
pankso@1200 180 vertical-align: middle;
pankso@1200 181 -webkit-transition: background-color 0.6s;
pankso@1200 182 transition: background-color 0.5s;
pankso@1200 183 }
pankso@1200 184 nav p { padding: 8px; color: #333; font-size: 92%; }
pankso@1200 185
pankso@1200 186 .nav1 { background-color: #333; }
pankso@1200 187 .nav1:hover { background-color: #128da9; }
pankso@1200 188 .nav2 { background-color: #ab3c00; }
pankso@1200 189 .nav2:hover { background-color: #ff9b00; }
pankso@1200 190 .navpi { background-color: #444; }
pankso@1200 191 .navpi:hover { background-color: #bc1142; }
pankso@1200 192
pankso@768 193 /* Languages */
pankso@768 194
pankso@768 195 #lang {
pankso@1200 196 padding: 8px;
pankso@1200 197 font-size: 12px;
pankso@1044 198 position: absolute;
pankso@1044 199 right: 0px;
pankso@1200 200 color: #666;
pankso@768 201 }
pankso@1200 202 #lang .flag { font-size: 14px; }
pankso@1200 203 #lang .flag:hover { text-decoration: none; }
pankso@768 204
pankso@1200 205 #lang a, #lang strong, #lang span {
pankso@1 206 text-decoration: none;
pankso@768 207 padding: 0 2px;
pankso@1 208 }
pankso@768 209
pankso@768 210 #lang a:hover {
pankso@768 211 text-decoration: underline;
pankso@1 212 }
pankso@768 213
pankso@1044 214 .box #lang { text-align: center; position: relative;
pankso@1044 215 font-size: 13px; } /* for /i18n page */
al@1033 216
pankso@768 217 /* Content */
pankso@768 218
pankso@768 219 #content {
pankso@768 220 padding: 30px 80px;
pankso@555 221 text-align: justify;
pankso@741 222 }
pankso@1241 223 #content li { line-height: 1.6em; }
pankso@741 224
pankso@809 225 .news li {
pankso@741 226 border-bottom: 1px dotted #BEBEBE;
pankso@741 227 margin-left: -25px;
pankso@741 228 padding: 4px 0px 4px 0px;
pankso@741 229 }
pankso@741 230
pankso@809 231 .news a, .feed-grid a { text-decoration: none; }
pankso@809 232 .news p a { text-decoration: underline; }
pankso@809 233 .news p a:hover { text-decoration: none; }
pankso@1171 234 #twitter { margin: 20px 0; text-align: center; }
pankso@768 235 #gallery { text-align: center; }
pankso@741 236
pankso@945 237 #sponsor {
pankso@945 238 font-size: 90%;
pankso@975 239 background-color: #fbfbfb;
pankso@975 240 border: 2px solid #ddd;
pankso@945 241 width: 200px;
pankso@975 242 height: 160px;
pankso@945 243 float: right;
pankso@945 244 text-align: center;
pankso@1241 245 margin: 20px 0px 20px 20px;
pankso@945 246 }
pankso@945 247
pankso@768 248 /* Classes */
pankso@768 249
pankso@1200 250 .mobile { display: none !important; }
pankso@1200 251
pankso@768 252 .right_box { width: 48%; float: right; }
pankso@768 253 .left_box { width: 48%; float: left; }
pankso@768 254
pankso@768 255 .box {
pankso@741 256 margin: 20px 60px;
pankso@741 257 padding: 12px;
pankso@768 258 background: #efefef;
pankso@768 259 border: 1px solid #ddd;
pankso@768 260 }
pankso@768 261
al@1032 262 .box-dl, .box-up {
pankso@1200 263 margin: 20px 0;
al@1019 264 min-height: 48px;
al@1019 265 border: 1px solid #ddd;
al@1019 266 vertical-align: middle;
al@1019 267 }
al@1032 268 .box-dl {
pankso@1200 269 background: url("/images/download.png") no-repeat 12px center;
pankso@1200 270 padding: 16px 16px 16px 72px;
al@1032 271 }
al@1032 272 .box-up {
pankso@1200 273 background: url("/images/update.png") no-repeat 12px center;
pankso@1200 274 padding: 16px 16px 16px 62px;
al@1032 275 }
pankso@1200 276 .box-dl a { font-weight: bold; text-decoration: none; }
pankso@1200 277 .dlbutton { padding-left: 38px; }
pankso@1200 278 pre, .box, .box-dl, .box-up, .box-share, .box-rpi {
pankso@1200 279 background-color: #efefef;
pankso@1200 280 border: 1px solid #ddd;
pankso@1200 281 }
al@1019 282
pankso@768 283 .searchbox {
pankso@768 284 margin: 20px 80px;
pankso@768 285 padding: 12px;
pankso@741 286 background: #f8f8f8;
pankso@768 287 text-align: center;
pankso@768 288 border: 1px solid #ddd;
pankso@741 289 }
pankso@768 290
pankso@796 291 /* Activity Box */
pankso@796 292
pankso@796 293 .activity {
pankso@796 294 margin: 0 0 20px;
pankso@945 295 background: #efefef;
pankso@807 296 padding: 5px 2px 0;
pankso@796 297 border: 1px solid #ddd;
pankso@796 298 }
pankso@807 299 .activity div { padding: 5px 10px; background: #fff; margin-top: 5px; }
pankso@796 300 .activity p { margin: 0; padding: 5px 10px; font-weight: bold; }
pankso@796 301 .activity a { text-decoration: none; }
pankso@1241 302 .activity ul { margin: 4px 0; padding: 0 4px; line-height: 150%; }
pankso@1241 303 .activity li { list-style-type: none; }
pankso@796 304 .activity_more { text-align: right; }
pankso@796 305 .activity_more a { font-weight: normal; color: #000; padding: 0 4px; }
pankso@796 306 .activity_more a:hover { text-decoration: underline; }
pankso@768 307
pankso@809 308 .activity span, .news span {
pankso@809 309 color: #666;
pankso@809 310 font-size: 11px;
pankso@809 311 font-weight: normal;
pankso@809 312 }
pankso@809 313
pankso@768 314 /* Button */
pankso@768 315
pankso@1175 316 #block_info .button a {
pankso@1175 317 background-color: #666;
pankso@768 318 color: #ffffff;
pankso@1175 319 margin: 0px 4px;
pankso@768 320 padding: 6px 10px;
pankso@768 321 font-size: 12px;
pankso@768 322 text-decoration: none;
pankso@768 323 font-weight: bold;
pankso@741 324 }
pankso@1175 325 #block_info .button a:hover, input[type=submit]:hover {
pankso@1175 326 background-color: #444;
pankso@768 327 color: #ffffff;
pankso@741 328 }
pankso@768 329
pankso@768 330 /* Round corner */
pankso@768 331
pankso@1200 332 #block_nav, pre, .box, .box-dl, .box-up, .searchbox, .button a,
pankso@1200 333 #twitter, .activity, .activity div, #sponsor, nav a, .dlbutton {
pankso@768 334 -moz-border-radius: 4px;
pankso@768 335 -webkit-border-radius: 4px;
pankso@768 336 border-radius: 4px;
pankso@741 337 }
pankso@768 338
pankso@768 339 /* Form */
pankso@768 340
pankso@715 341 input[type=submit] {
pankso@1175 342 border: 1px solid #666;
pankso@1175 343 background-color: #666;
pankso@715 344 color: white;
pankso@715 345 font-weight: bold;
pankso@715 346 cursor: pointer;
pankso@768 347 padding: 4px 10px;
pankso@715 348 font-size: 14px;
pankso@734 349 margin-left: -5px;
pankso@768 350 -webkit-border-top-right-radius: 4px;
pankso@768 351 -webkit-border-bottom-right-radius: 4px;
pankso@768 352 -moz-border-radius-topright: 4px;
pankso@768 353 -moz-border-radius-bottomright: 4px;
pankso@768 354 border-top-right-radius: 4px;
pankso@768 355 border-bottom-right-radius: 4px;
pankso@715 356 }
pankso@768 357
pankso@1175 358 input[type=submit]:hover { background-color: #444; }
pankso@768 359
pankso@715 360 input[type=text] {
pankso@715 361 border: 1px solid #333333;
pankso@768 362 padding: 4px;
pankso@768 363 height: 17px;
pankso@737 364 width: 100%;
pankso@768 365 -webkit-border-top-left-radius: 4px;
pankso@768 366 -webkit-border-bottom-left-radius: 4px;
pankso@768 367 -moz-border-radius-topleft: 4px;
pankso@768 368 -moz-border-radius-bottomleft: 4px;
pankso@768 369 border-top-left-radius: 4px;
pankso@768 370 border-bottom-left-radius: 4px;
pankso@715 371 }
pankso@715 372
pankso@710 373 /* Footer */
pankso@710 374
pankso@710 375 #footer {
pankso@768 376 background: #f1f1f1;
pankso@768 377 text-align: center;
pankso@768 378 border-top: 1px solid #ddd;
pankso@768 379 padding: 40px;
pankso@768 380 color: #666;
pankso@814 381 clear: both;
pankso@814 382 margin-bottom: -2%;
pankso@710 383 }
pankso@768 384
pankso@768 385 #footer a { color: #666; padding: 0 2px; }
pankso@741 386
pankso@741 387 .year:after {
pascal@1170 388 /* content: "2007-2014"; */
pascal@1170 389 content: "2014";
pankso@710 390 }
al@1019 391
al@1019 392 p, li {
al@1019 393 -moz-hyphens: auto;
al@1019 394 -webkit-hyphens: auto;
al@1019 395 hyphens: auto;
al@1019 396 }
al@1019 397
al@1019 398 /* --- SEARCH --- */
al@1019 399
al@1019 400 input.gsc-search-button {
al@1019 401 border: 1px solid #b64b22;
al@1019 402 background-color: #b64b22;
al@1019 403 color: white;
al@1019 404 font-weight: bold;
al@1019 405 cursor: pointer;
al@1019 406 padding: 2px 10px;
al@1019 407 font-size: 14px;
al@1019 408 margin-left: -4px;
al@1019 409 -webkit-border-top-right-radius: 4px;
al@1019 410 -webkit-border-bottom-right-radius: 4px;
al@1019 411 -moz-border-radius-topright: 4px;
al@1019 412 -moz-border-radius-bottomright: 4px;
al@1019 413 border-top-right-radius: 4px;
al@1019 414 border-bottom-right-radius: 4px;
al@1019 415 }
al@1019 416
al@1019 417 .gs-webResult.gs-result a.gs-title:link,
al@1019 418 .gs-webResult.gs-result a.gs-title:link b {
al@1019 419 color: #103a5e;
al@1019 420 }
al@1019 421
al@1023 422 #cse {
al@1023 423 margin-bottom: 120px;
al@1023 424 width:100%;
al@1023 425 }
al@1019 426
al@1019 427
al@1019 428 /* --- GALLERY --- */
al@1019 429
al@1019 430 #gallery div {
al@1019 431 width: 496px;
al@1019 432 border: none;
al@1019 433 border-radius: 12px;
al@1019 434 padding-bottom: 8px;
al@1019 435 margin: 12px auto;
al@1019 436 webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
al@1019 437 -moz-box-shadow: 0 0 6px rgba(0,0,0,0.5);
al@1019 438 box-shadow: 0 0 6px rgba(0,0,0,0.5);
al@1019 439 }
al@1019 440 #gallery img {
al@1019 441 width: 480px;
al@1019 442 margin: 8px;
al@1019 443 }