website annotate slitaz.css @ rev 1200

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