SliTaz Repositories

     1.1 --- a/pkgs/style/slitaz.css	Sun Feb 16 16:23:27 2014 +0100
     1.2 +++ b/pkgs/style/slitaz.css	Wed Mar 22 18:50:18 2017 +0100
     1.3 @@ -1,374 +1,488 @@
     1.4  /*
     1.5 -	CSS style for SliTaz Network - (C) 2014 SliTaz GNU/Linux
     1.6 +	CSS style for SliTaz Network - (C) 2015 SliTaz GNU/Linux
     1.7  */
     1.8  
     1.9  html {
    1.10 -	min-height:  102%;
    1.11 +	min-height: 102%;
    1.12 +}
    1.13 +body {
    1.14 +	height: 100%;
    1.15 +	margin: 0;
    1.16 +	box-sizing: border-box;
    1.17 +	color: #222;
    1.18 +	background: #FFF;
    1.19 +	font-size: 90%;
    1.20 +	font-family: Arimo, Ubuntu, "Droid Sans", "DejaVu Sans", FreeSans, "Liberation Sans", sans-serif;
    1.21 +	-moz-hyphens: auto; -epub-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
    1.22 +}
    1.23 +code, pre, samp, kbd {
    1.24 +	color: #000;
    1.25 +	background-color: rgba(0, 0, 0, .05);
    1.26 +	font-size: 0.9rem;
    1.27 +}
    1.28 +a {
    1.29 +	text-decoration: none;
    1.30 +	color: #215090;
    1.31 +}
    1.32 +a:hover {
    1.33 +	text-decoration: underline;
    1.34 +}
    1.35 +img {
    1.36 +	border: 0 none;
    1.37 +	vertical-align: middle;
    1.38 +}
    1.39 +.large {
    1.40 +	overflow-x: auto;
    1.41 +}
    1.42 +h2 {
    1.43 +	color: #444;
    1.44 +	font-size: 22px;
    1.45 +	font-weight: 300;
    1.46 +	margin: 18px auto 6px;
    1.47 +	border-bottom: 1px solid #CCC;
    1.48 +}
    1.49 +h3 {
    1.50 +	color: #193;
    1.51 +	font-size: 19px;
    1.52 +	font-weight: 300;
    1.53 +	margin: 12px auto 0;
    1.54 +	line-height: 1;
    1.55 +}
    1.56 +pre {
    1.57 +	background-color: #F8F8F8;
    1.58 +	border: 1px solid #DDD;
    1.59 +	padding: 10px;
    1.60 +	white-space: pre-wrap;
    1.61 +	overflow-x: auto;
    1.62 +	line-height: 1;
    1.63 +}
    1.64 +.hard {
    1.65 +	white-space: pre;
    1.66 +	resize: both;
    1.67 +}
    1.68 +.scroll {
    1.69 +	max-height: 40ex;
    1.70  }
    1.71  
    1.72 -body {
    1.73 -	background: #ffffff;
    1.74 -	color: black;
    1.75 -	font: 13px sans-serif, vernada, arial;
    1.76 -	margin: 0;
    1.77 -	min-width: 780px;
    1.78 -	height: 100%;
    1.79 +
    1.80 +
    1.81 +
    1.82 +/* Page header */
    1.83 +
    1.84 +body > header {
    1.85 +	display: block;
    1.86 +	background: #444;
    1.87 +	text-align: justify;
    1.88 +	line-height: 0;
    1.89 +	box-shadow: 0 -8px 8px #333 inset;
    1.90  }
    1.91 -
    1.92 -a { text-decoration: underline; color: #215090; }
    1.93 -a:hover { text-decoration: none; color: blue; }
    1.94 -img { border: 0pt none; vertical-align: middle; }
    1.95 -h2 { color: #444; }
    1.96 -h3 { color: #666; font-size: 140%; }
    1.97 -h4 { color: #888; font-size: 120%; }
    1.98 -pre { 
    1.99 -	background-color: #f8f8f8; 
   1.100 -	border: 1px solid #ddd; 
   1.101 -	padding: 10px;
   1.102 +h1 {
   1.103 +	display: inline-block;
   1.104 +	margin: auto 0;
   1.105 +	height: 40px;
   1.106 +	white-space: nowrap;
   1.107 +	vertical-align: middle;
   1.108  }
   1.109 -
   1.110 -/* Header */
   1.111 -
   1.112 -#header { 
   1.113 -	height: 40px; 
   1.114 -	background: #222;
   1.115 +h1::before {
   1.116 +	display: inline-block;
   1.117 +	content: url(logo.png);
   1.118 +	vertical-align: middle;
   1.119  }
   1.120 -
   1.121 -#header h1 {
   1.122 -	margin: 0;
   1.123 -	padding: 8px 0 0 42px;
   1.124 -	width: 250px;
   1.125 -}
   1.126 -
   1.127 -#header h1 a { 
   1.128 -	color: white; 
   1.129 -	text-decoration: none;
   1.130 +h1 a {
   1.131 +	color: #FFF;
   1.132  	font-size: 20px;
   1.133  	font-style: italic;
   1.134  }
   1.135 -
   1.136 -#header h1 a:hover, #network a:hover, #network span { 
   1.137 -	color: #afafaf;
   1.138 +body > header::before, body > header::after, .block > div::before, .block > div::after {
   1.139 +	display: inline-block;
   1.140 +	width: 100%;
   1.141 +	height: 0;
   1.142 +	visibility: hidden;
   1.143 +	overflow: hidden;
   1.144 +	content: '';
   1.145 +}
   1.146 +.network {
   1.147 +	display: inline-block;
   1.148 +	text-align: left;
   1.149 +	vertical-align: middle;
   1.150 +	font-size: 12px;
   1.151 +	line-height: normal;
   1.152 +	color: #999;
   1.153 +}
   1.154 +.network a {
   1.155 +	display: inline-block;
   1.156 +	padding: 0 6px;
   1.157 +	vertical-align: middle;
   1.158 +	color: #FFF;
   1.159 +}
   1.160 +.home::before {
   1.161 +	content: url(home.png);
   1.162  }
   1.163  
   1.164 -/* Logo */
   1.165  
   1.166 -#logo {
   1.167 -	background: url(images/logo.png) no-repeat left;
   1.168 -	position: absolute;
   1.169 -	float: left;
   1.170 -	left: 0px;
   1.171 -	top: 0px;
   1.172 -	width: 40px;
   1.173 -	height: 40px;
   1.174 +
   1.175 +
   1.176 +/* Info block and navigation */
   1.177 +
   1.178 +.block {
   1.179 +	padding: 6px;
   1.180 +	background: #CCC;
   1.181 +	border-bottom: 1px solid #AAA;
   1.182 +}
   1.183 +.block > div {
   1.184 +	max-width: 700px;
   1.185 +	margin: 0 auto;
   1.186 +	text-align: justify;
   1.187 +	line-height: 0;
   1.188 +}
   1.189 +.block_info {
   1.190 +	padding: 6px 12px 0 0;
   1.191 +	line-height: normal;
   1.192 +	width: 60%;
   1.193 +}
   1.194 +.block_info input {
   1.195 +	width: 100%;
   1.196 +}
   1.197 +.block header {
   1.198 +	font-weight: 400;
   1.199 +	font-size: 18px;
   1.200 +	line-height: 18px;
   1.201 +}
   1.202 +.block_info p {
   1.203 +	margin: 7px 0;
   1.204 +	padding: 0;
   1.205 +	text-align: justify;
   1.206 +}
   1.207 +nav {
   1.208 +	background: #666;
   1.209 +	color: #FFF;
   1.210 +	padding: 6px;
   1.211 +	line-height: normal;
   1.212 +}
   1.213 +nav a {
   1.214 +	white-space: nowrap;
   1.215 +	color: #FFF;
   1.216 +}
   1.217 +nav header img {
   1.218 +	margin: 0 4px 0 0;
   1.219 +	padding: 0;
   1.220 +}
   1.221 +nav, .block_info {
   1.222 +	display: inline-block;
   1.223 +	vertical-align: top;
   1.224  }
   1.225  
   1.226 -/* SliTaz Network */
   1.227  
   1.228 -#network { 
   1.229 -	float: right; 
   1.230 -	padding: 14px 5px 0; 
   1.231 -	font-size: 12px;
   1.232 +
   1.233 +
   1.234 +/* Languages selector */
   1.235 +
   1.236 +.lang {
   1.237 +	margin: 0;
   1.238 +	text-align: right;
   1.239 +	padding: 6px;
   1.240 +	font-size: 0.9rem;
   1.241 +}
   1.242 +.lang a {
   1.243 +	padding: 0 2px;
   1.244 +}
   1.245 +[dir="rtl"] .lang {
   1.246 +	text-align: left;
   1.247  }
   1.248  
   1.249 -#network a, #network span { padding: 0 4px; }
   1.250 -#network span { font-weight: bold; }
   1.251  
   1.252 -/* Block */
   1.253  
   1.254 -#block { 
   1.255 -	min-height: 180px; 
   1.256 -	background: #ccc; 
   1.257 -	padding: 20px 10% 0px;
   1.258 -	text-align: center;
   1.259 -	color: #222;
   1.260 -	border-bottom: 1px solid #afafaf;
   1.261 +/* Main content block */
   1.262 +
   1.263 +main {
   1.264 +	display: block;
   1.265 +	max-width: 700px;
   1.266 +	margin: 6px auto;
   1.267 +	padding: 0 6px;
   1.268 +	text-align: justify;
   1.269 +	line-height: 1.5rem;
   1.270 +}
   1.271 +p, ul, ol, h2, h3, pre, table {
   1.272 +	max-width: 700px;
   1.273 +}
   1.274 +p, ul, ol, pre, table {
   1.275 +	margin: 6px auto;
   1.276 +}
   1.277 +p, ul, ol {
   1.278 +	display: block;
   1.279 +}
   1.280 +ul, ol, dd {
   1.281 +	padding: 0 2ex 0 4ex;
   1.282 +}
   1.283 +ul ul, ol ol, ul ol, ol ul {
   1.284 +	margin: 0;
   1.285  }
   1.286  
   1.287 -#block_info {
   1.288 -	text-align: justify; 
   1.289 -	width: 48%;
   1.290 -	padding: 10px 10px 0 0;
   1.291 +
   1.292 +
   1.293 +
   1.294 +/* Countries flags */
   1.295 +
   1.296 +.br::before { content: url(BR.png); }
   1.297 +.ch::before { content: url(CH.png); }
   1.298 +.cn::before { content: url(CN.png); }
   1.299 +.de::before { content: url(DE.png); }
   1.300 +.es::before { content: url(ES.png); }
   1.301 +.fr::before { content: url(FR.png); }
   1.302 +.ir::before { content: url(IR.png); }
   1.303 +.it::before { content: url(IT.png); }
   1.304 +.pl::before { content: url(PL.png); }
   1.305 +.ru::before { content: url(RU.png); }
   1.306 +.se::before { content: url(SE.png); }
   1.307 +.tw::before { content: url(TW.png); }
   1.308 +.ua::before { content: url(UA.png); }
   1.309 +.us::before { content: url(US.png); }
   1.310 +
   1.311 +
   1.312 +
   1.313 +
   1.314 +/* SliTaz mirrors list */
   1.315 +
   1.316 +.mirrors {
   1.317 +	padding: 6px;
   1.318 +	text-align: center;
   1.319 +	background: #F1F1F1;
   1.320 +	border-bottom: 1px solid #DDD;
   1.321 +}
   1.322 +.mirrors a, .mirrors a::before {
   1.323 +	display: inline-block;
   1.324 +	padding: 0 3px;
   1.325 +}
   1.326 +.mirrors a::before {
   1.327 +	vertical-align: -4px;
   1.328  }
   1.329  
   1.330 -#block a, #network a { 
   1.331 -	color: #fff;
   1.332 -	font-weight: bold;
   1.333 -	text-decoration: none;
   1.334 +
   1.335 +
   1.336 +
   1.337 +/* Table */
   1.338 +
   1.339 +table {
   1.340 +	background-color: #F8F8F8;
   1.341 +	border: 1px solid #BBB;
   1.342 +	width: 100%;
   1.343 +	margin-bottom: 20px;
   1.344 +	padding: 0;
   1.345 +	border-spacing: 0;
   1.346 +	line-height: 1;
   1.347 +}
   1.348 +caption {
   1.349 +	caption-side: bottom;
   1.350 +	text-align: left;
   1.351 +	padding: 6px 0;
   1.352 +}
   1.353 +thead tr{
   1.354 +	background-color: #DDD;
   1.355 +}
   1.356 +thead th {
   1.357 +	border-bottom: 1px solid #BBB;
   1.358 +}
   1.359 +td {
   1.360 +	text-align: left;
   1.361 +}
   1.362 +td, th {
   1.363 +	padding: 4px;
   1.364 +}
   1.365 +/* Zebra stripes */
   1.366 +tbody tr:nth-child(odd) {
   1.367 +	background-color: #FFF;
   1.368 +}
   1.369 +tbody tr:nth-child(even) {
   1.370 +	background-color: #EEE;
   1.371 +}
   1.372 +/* Mirror file list table */
   1.373 +.list td:nth-child(1) {
   1.374 +	vertical-align: middle;
   1.375 +}
   1.376 +.list td:nth-child(1)::before {
   1.377 +	display: inline-block;
   1.378 +	vertical-align: middle;
   1.379 +	padding-right: 3px;
   1.380 +}
   1.381 +.list th:nth-child(3), .list td:nth-child(3) {
   1.382 +	text-align: right;
   1.383 +}
   1.384 +.first {
   1.385 +	width: 1%;
   1.386 +	white-space: nowrap;
   1.387  }
   1.388  
   1.389 -#block h4 {
   1.390 -	color: #222;
   1.391 -	margin: 0px;
   1.392 -	font-weight: bold;
   1.393 -	font-size: 110%;
   1.394 -}
   1.395  
   1.396 -#block_info p { margin: 6px 0; padding: 0 12px 0 0; }
   1.397 -#block_info a { font-weight: normal; color: #215090; }
   1.398 -#block_info a:hover { text-decoration: underline; }
   1.399 -#block ul { list-style-type: square; }
   1.400 -#block_nav a:hover { color: #afafaf; }
   1.401  
   1.402 -/* Navigation */
   1.403 -
   1.404 -#block_nav {
   1.405 -	background: #666;
   1.406 -	padding: 10px 10px 20px;
   1.407 -	text-align: justify;
   1.408 -	width: 48%;
   1.409 -	float: right;
   1.410 -}
   1.411 -
   1.412 -#block_nav ul { 
   1.413 -	list-style-type: none; 
   1.414 -	margin: 6px 0; 
   1.415 -	padding: 0;
   1.416 -}
   1.417 -
   1.418 -#block_nav h4 img { 
   1.419 -	margin: 0 4px 0 0; 
   1.420 -	padding: 0;
   1.421 -}
   1.422 -
   1.423 -/* Languages */
   1.424 -
   1.425 -#lang {
   1.426 -	padding: 6px;
   1.427 -	font-size: 11px;
   1.428 -	position: absolute;
   1.429 -	right: 0px;
   1.430 -}
   1.431 -
   1.432 -#lang a {
   1.433 -	text-decoration: none;
   1.434 -	padding: 0 2px;
   1.435 -}
   1.436 -
   1.437 -#lang a:hover {
   1.438 -	text-decoration: underline;
   1.439 -}
   1.440 -
   1.441 -.box #lang { text-align: center; position: relative; 
   1.442 -	font-size: 13px; }	 /* for /i18n page */
   1.443 -
   1.444 -/* Content */
   1.445 -
   1.446 -#content {
   1.447 -	padding: 30px 80px;
   1.448 -	text-align: justify;
   1.449 -}
   1.450 +/* Misc blocks */
   1.451  
   1.452  .news li {
   1.453  	list-style-type: square;
   1.454  	border-bottom: 1px dotted #BEBEBE;
   1.455  	margin-left: -25px;
   1.456 -	padding: 4px 0px 4px 0px;
   1.457 +	padding: 4px 0;
   1.458  }
   1.459 -
   1.460 -.news a, .feed-grid a { text-decoration: none; }
   1.461 -.news p a { text-decoration: underline; }
   1.462 -.news p a:hover { text-decoration: none; }
   1.463 -#twitter { margin: 20px 0; text-align: center; }
   1.464 -#gallery { text-align: center; }
   1.465 -
   1.466 -#sponsor {
   1.467 +.twitter {
   1.468 +	margin: 20px 0;
   1.469 +}
   1.470 +.gallery {
   1.471 +	text-align: center;
   1.472 +}
   1.473 +.sponsor {
   1.474  	font-size: 90%;
   1.475 -	background-color: #fbfbfb;
   1.476 -	border: 2px solid #ddd;
   1.477 +	background-color: #FBFBFB;
   1.478 +	border: 2px solid #DDD;
   1.479  	width: 200px;
   1.480  	height: 160px;
   1.481  	float: right;
   1.482  	text-align: center;
   1.483 -	margin: 10px 0px 20px 20px;
   1.484 +	margin: 10px 0 20px 20px;
   1.485 +}
   1.486 +.right_box {
   1.487 +	width: 48%;
   1.488 +	float: right;
   1.489 +}
   1.490 +.left_box {
   1.491 +	width: 48%;
   1.492 +	float: left;
   1.493 +}
   1.494 +.box {
   1.495 +	margin: 6px 0;
   1.496 +	padding: 6px;
   1.497 +	background: #F4F4F4;
   1.498 +	border: 1px solid #DDD;
   1.499 +}
   1.500 +.searchbox {
   1.501 +	margin: 20px 80px;
   1.502 +	padding: 12px;
   1.503 +	background: #F8F8F8;
   1.504 +	text-align: center;
   1.505 +	border: 1px solid #DDD;
   1.506 +}
   1.507 +.activity {
   1.508 +	margin: 0 0 20px;
   1.509 +	background: #EFEFEF;
   1.510 +	padding: 5px 2px 0;
   1.511 +	border: 1px solid #DDD;
   1.512 +}
   1.513 +.activity div {
   1.514 +	padding: 5px 10px;
   1.515 +	background: #FFF;
   1.516 +	margin-top: 5px;
   1.517 +}
   1.518 +.activity p {
   1.519 +	margin: 0;
   1.520 +	padding: 5px 10px;
   1.521 +	font-weight: 700;
   1.522 +}
   1.523 +.activity ul {
   1.524 +	list-style-type: none;
   1.525 +	margin: 4px 0;
   1.526 +	padding: 0 4px;
   1.527 +	line-height: 150%;
   1.528 +}
   1.529 +.activity_more {
   1.530 +	text-align: right;
   1.531 +}
   1.532 +.activity_more a {
   1.533 +	font-weight: 400;
   1.534 +	color: #000;
   1.535 +	padding: 0 4px;
   1.536 +}
   1.537 +.activity span, .news span {
   1.538 +	color: #666;
   1.539 +	font-size: 11px;
   1.540 +	font-weight: 400;
   1.541  }
   1.542  
   1.543 -/* Classes */
   1.544  
   1.545 -.right_box { width: 48%; float: right; }
   1.546 -.left_box { width: 48%; float: left; }
   1.547 -
   1.548 -.box {
   1.549 -	margin: 20px 60px;
   1.550 -	padding: 12px;
   1.551 -	background: #efefef;
   1.552 -	border: 1px solid #ddd;
   1.553 -}
   1.554 -
   1.555 -.box-dl, .box-up {
   1.556 -	margin: 20px 60px;
   1.557 -	padding: 12px 12px 12px 66px;
   1.558 -	min-height: 48px;
   1.559 -	border: 1px solid #ddd;
   1.560 -	vertical-align: middle;
   1.561 -}
   1.562 -.box-dl {
   1.563 -	background: url("/images/download.png") no-repeat 12px 12px #efefef;
   1.564 -}
   1.565 -.box-up {
   1.566 -	background: url("/images/update.png") no-repeat  center left #efefef;
   1.567 -}
   1.568 -.box-dl p { color: #456; }
   1.569 -
   1.570 -.searchbox { 
   1.571 -	margin: 20px 80px; 
   1.572 -	padding: 12px; 
   1.573 -	background: #f8f8f8;
   1.574 -	text-align: center;
   1.575 -	border: 1px solid #ddd;
   1.576 -}
   1.577 -
   1.578 -/* Activity Box */
   1.579 -
   1.580 -.activity { 
   1.581 -	margin: 0 0 20px; 
   1.582 -	background: #efefef; 
   1.583 -	padding: 5px 2px 0; 
   1.584 -	border: 1px solid #ddd; 
   1.585 -}
   1.586 -.activity div { padding: 5px 10px; background: #fff; margin-top: 5px; }
   1.587 -.activity p { margin: 0; padding: 5px 10px; font-weight: bold; }
   1.588 -.activity a { text-decoration: none; }
   1.589 -.activity ul { list-style-type: none; 
   1.590 -	margin: 4px 0; padding: 0 4px; line-height: 150%; }
   1.591 -.activity_more { text-align: right;  }
   1.592 -.activity_more a { font-weight: normal; color: #000; padding: 0 4px; }
   1.593 -.activity_more a:hover { text-decoration: underline; }
   1.594 -
   1.595 -.activity span, .news span { 
   1.596 -	color: #666; 
   1.597 -	font-size: 11px; 
   1.598 -	font-weight: normal;
   1.599 -}
   1.600 -
   1.601 -/* Button */
   1.602 -
   1.603 -#block_info .button a { 
   1.604 -	background-color: #666;
   1.605 -	color: #ffffff;
   1.606 -	margin: 0px 4px;
   1.607 -	padding: 6px 10px;
   1.608 -	font-size: 12px;
   1.609 -	text-decoration: none;
   1.610 -	font-weight: bold;
   1.611 -}
   1.612 -#block_info .button a:hover, input[type=submit]:hover { 
   1.613 -	background-color: #444;
   1.614 -	color: #ffffff;
   1.615 -}
   1.616  
   1.617  /* Round corner */
   1.618  
   1.619 -#block_nav, pre, .box, .box-dl, .box-up, .searchbox, .button a, #twitter, .activity,
   1.620 -.activity div, #sponsor {
   1.621 +nav, pre, textarea, fieldset, .box, .searchbox, .activity, .activity div, .twitter, .sponsor {
   1.622  	-moz-border-radius: 4px;
   1.623  	-webkit-border-radius: 4px;
   1.624  	border-radius: 4px;
   1.625  }
   1.626 -
   1.627 -/* Form */
   1.628 -
   1.629 -input[type=submit] {
   1.630 -	border: 1px solid #666;
   1.631 -	background-color: #666;
   1.632 -	color: white;
   1.633 -	font-weight: bold;
   1.634 -	cursor: pointer;
   1.635 -	padding: 4px 10px;
   1.636 -	font-size: 14px;
   1.637 -	margin-left: -5px;
   1.638 -	-webkit-border-top-right-radius: 4px;
   1.639 -	-webkit-border-bottom-right-radius: 4px;
   1.640 -	-moz-border-radius-topright: 4px;
   1.641 -	-moz-border-radius-bottomright: 4px;
   1.642 -	border-top-right-radius: 4px;
   1.643 -	border-bottom-right-radius: 4px;
   1.644 +fieldset {
   1.645 +	border: 1px solid #999;
   1.646 +	max-width: 100%;
   1.647  }
   1.648  
   1.649 -input[type=submit]:hover { background-color: #444; }
   1.650  
   1.651 -input[type=text] {
   1.652 -	border: 1px solid #333333;
   1.653 -	padding: 4px;
   1.654 -	height: 17px;
   1.655 -	width: 100%;
   1.656 -	-webkit-border-top-left-radius: 4px;
   1.657 -	-webkit-border-bottom-left-radius: 4px;
   1.658 -	-moz-border-radius-topleft: 4px;
   1.659 -	-moz-border-radius-bottomleft: 4px;
   1.660 -	border-top-left-radius: 4px;
   1.661 -	border-bottom-left-radius: 4px;
   1.662 +
   1.663 +
   1.664 +/* Page footer */
   1.665 +
   1.666 +body > footer {
   1.667 +	background: #F1F1F1;
   1.668 +	text-align: center;
   1.669 +	border-top: 1px solid #CCC;
   1.670 +	padding: 6px;
   1.671 +	color: #666;
   1.672 +	clear: both;
   1.673 +	box-shadow: 0 4px 8px #CCC inset;
   1.674 +}
   1.675 +body > footer div {
   1.676 +	margin: 12px;
   1.677 +}
   1.678 +.year:after {
   1.679 +	content: "2015";
   1.680  }
   1.681  
   1.682 -/* Footer */
   1.683  
   1.684 -#footer {
   1.685 -	background: #f1f1f1;
   1.686 -	text-align: center;
   1.687 -	border-top: 1px solid #ddd;
   1.688 -	padding: 40px;
   1.689 -	color: #666;
   1.690 -	clear: both;
   1.691 -	margin-bottom: -2%;
   1.692 +
   1.693 +
   1.694 +/* Mimetype icons */
   1.695 +
   1.696 +.x-bzip::before       { content: url(application-x-bzip.png); }
   1.697 +.x-gzip::before       { content: url(application-x-gzip.png); }
   1.698 +.plain::before        { content: url(text-plain.png); }
   1.699 +.x-bittorrent::before { content: url(application-x-bittorrent.png); }
   1.700 +.octet-stream::before { content: url(application-octet-stream.png); }
   1.701 +.jpeg::before         { content: url(image-jpeg.png); }
   1.702 +.png::before          { content: url(image-png.png); }
   1.703 +.javascript::before   { content: url(text-x-javascript.png); }
   1.704 +.css::before          { content: url(text-css.png); }
   1.705 +.dir::before          { content: url(folder.png); }
   1.706 +.up::before           { content: url(go-up.png); }
   1.707 +.zip::before          { content: url(application-zip.png); }
   1.708 +.iso::before          { content: url(application-x-cd-image.png); }
   1.709 +.krn::before          { content: url(application-x-executable.png); }
   1.710 +.exe::before          { content: url(application-x-ms-dos-executable.png); }
   1.711 +.rme::before          { content: url(text-x-readme.png); }
   1.712 +.log::before          { content: url(text-x-changelog.png); }
   1.713 +.x-flavor::before     { content: url(slitaz-icon.png); }
   1.714 +.pkg::before          { content: url(package-x-generic.png); }
   1.715 +.server::before       { content: url(network-server.png); }
   1.716 +.locale::before       { content: url(preferences-desktop-locale.png); display: inline-block; vertical-align: middle; }
   1.717 +.locale2::before      { content: url(preferences-desktop-locale2.png); display: inline-block; vertical-align: middle; }
   1.718 +
   1.719 +
   1.720 +
   1.721 +
   1.722 +/* Responsive rules */
   1.723 +
   1.724 +/* More space for touchscreen links */
   1.725 +
   1.726 +.touch td, .touch th {
   1.727 +	padding: 6px;
   1.728 +}
   1.729 +.touch .network a, .touch nav a, .touch .mirrors a, .touch footer a,
   1.730 +.touch .info a {
   1.731 +	display: inline-block;
   1.732 +	padding: 6px;
   1.733  }
   1.734  
   1.735 -#footer a { color: #666; padding: 0 2px; }
   1.736 +/* Full width for block_info and navigation */
   1.737  
   1.738 -.year:after {
   1.739 -	/* content: "2007-2014"; */
   1.740 -	content: "2014";
   1.741 +@media (max-width: 510px) {
   1.742 +	.block_info, nav {
   1.743 +		display: block;
   1.744 +		width: inherit;
   1.745 +		max-width: 100%;
   1.746 +	}
   1.747 +	.block_info {
   1.748 +		padding: 6px;
   1.749 +	}
   1.750  }
   1.751 -
   1.752 -p, li {
   1.753 -	-moz-hyphens: auto;
   1.754 -	-webkit-hyphens: auto;
   1.755 -	hyphens: auto;
   1.756 -}
   1.757 -
   1.758 -
   1.759 -/* --- SEARCH --- */
   1.760 -
   1.761 -input.gsc-search-button {
   1.762 -	border: 1px solid #b64b22;
   1.763 -	background-color: #b64b22;
   1.764 -	color: white;
   1.765 -	font-weight: bold;
   1.766 -	cursor: pointer;
   1.767 -	padding: 2px 10px;
   1.768 -	font-size: 14px;
   1.769 -	margin-left: -4px;
   1.770 -	-webkit-border-top-right-radius: 4px;
   1.771 -	-webkit-border-bottom-right-radius: 4px;
   1.772 -	-moz-border-radius-topright: 4px;
   1.773 -	-moz-border-radius-bottomright: 4px;
   1.774 -	border-top-right-radius: 4px;
   1.775 -	border-bottom-right-radius: 4px;
   1.776 -}
   1.777 -
   1.778 -.gs-webResult.gs-result a.gs-title:link,
   1.779 -.gs-webResult.gs-result a.gs-title:link b {
   1.780 -	color: #103a5e;
   1.781 -}
   1.782 -
   1.783 -#cse {
   1.784 -	margin-bottom: 120px;
   1.785 -	width:100%;
   1.786 -}
   1.787 -
   1.788 -
   1.789 -/* --- GALLERY --- */
   1.790 -
   1.791 -#gallery div {
   1.792 -	width: 496px;
   1.793 -	border: none;
   1.794 -	border-radius: 12px;
   1.795 -	padding-bottom: 8px;
   1.796 -	margin: 12px auto;
   1.797 -	webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
   1.798 -	-moz-box-shadow: 0 0 6px rgba(0,0,0,0.5);
   1.799 -	box-shadow: 0 0 6px rgba(0,0,0,0.5);
   1.800 -}
   1.801 -#gallery img {
   1.802 -	width: 480px;
   1.803 -	margin: 8px;
   1.804 -}