SliTaz Repositories

     1.1 --- a/tazpkg-web/stuff/style/slitaz.css	Sun Jan 17 21:37:17 2010 +0100
     1.2 +++ b/tazpkg-web/stuff/style/slitaz.css	Mon Jan 03 00:01:34 2011 +0100
     1.3 @@ -12,6 +12,7 @@
     1.4  	color: black;
     1.5  	font: 13px sans-serif, vernada, arial;
     1.6  	margin: 0;
     1.7 +	border-top: 34px solid #f1f1f1;
     1.8  }
     1.9  
    1.10  /* Accessibility */
    1.11 @@ -19,57 +20,62 @@
    1.12  #access {
    1.13  	position: absolute;
    1.14  	top: 4px;
    1.15 -	right: 4px;
    1.16 +	right: 0px;
    1.17  	text-align: right;
    1.18 -	width: 100%;
    1.19 +	width: auto;
    1.20  	margin: 0;
    1.21 +	padding: 4px 4px 4px 20px;
    1.22  	font-size: 11px;
    1.23  	font-weight: bold;
    1.24  }
    1.25  
    1.26  #access a {
    1.27 -	background: inherit;
    1.28 -	color: white;
    1.29 +	background: transparent;
    1.30 +	color: #0F314E;
    1.31  	text-decoration: none;
    1.32  }
    1.33  
    1.34  #access a:hover {
    1.35  	background: inherit;
    1.36 -	color: #222222;
    1.37 +	color: #b64b22;
    1.38  }
    1.39  
    1.40  /* Header and title */
    1.41  
    1.42  #header{
    1.43 -	background: #f0ba08 url(pics/website/header.png) repeat-x top;
    1.44 +	/*background: #f0ba08 url(pics/website/header.png) repeat-x top;*/
    1.45 +	background: #351a0a url(pics/website/header-img.png) no-repeat top right;
    1.46  	color: black;
    1.47  	width: 100%;
    1.48 -	height: 50px;
    1.49 +	height: 42px;
    1.50  	border-top: 1px solid black;
    1.51  	border-bottom: 1px solid black;
    1.52  	margin-bottom: 30px;
    1.53 +	-moz-box-shadow: 0 1px 5px #333;
    1.54 +	-webkit-box-shadow: 0 1px 5px #333;
    1.55 +	box-shadow: 0 1px 5px #333;
    1.56  }
    1.57  
    1.58  #titre {
    1.59  	position: absolute;
    1.60 -	font-size: 16px;
    1.61 +	font-size: 14px;
    1.62  	font-weight: bolder ;
    1.63 -	margin-left: 200px;
    1.64 -	margin-top: 28px;
    1.65 +	left: 180px;
    1.66 +	top: 4px;
    1.67  }
    1.68  
    1.69  #logo {
    1.70  	position: absolute;
    1.71  	float: left;
    1.72 -	margin-left: 16px;
    1.73 -	margin-top: 0px;
    1.74 +	left: 16px;
    1.75 +	top: -10px;
    1.76  }
    1.77  
    1.78  /* Navigation */
    1.79  
    1.80  #nav {
    1.81  	position: absolute;
    1.82 -	top: 76px;
    1.83 +	top: 102px;
    1.84  	right: 80px;
    1.85  	color: #555555;
    1.86  	float: right;
    1.87 @@ -79,19 +85,11 @@
    1.88  	font-size: 12px;
    1.89  }
    1.90  
    1.91 -#nav ul {
    1.92 -	-moz-border-radius: 8px;
    1.93 -	-webkit-border-radius: 8px;
    1.94 -	list-style-type: none;
    1.95 -	margin: 10px 0;
    1.96 -	padding: 10px 24px 10px 24px;
    1.97 -	background-color: #eaeaea;
    1.98 -}
    1.99 -
   1.100  #nav .nav_box ul {
   1.101  	list-style-type: none;
   1.102  	margin: 0;
   1.103  	padding: 10px 24px 10px 0px;
   1.104 +	background-color: inherit;
   1.105  }
   1.106  
   1.107  #nav li {
   1.108 @@ -99,7 +97,7 @@
   1.109  }
   1.110  
   1.111  #nav h4 {
   1.112 -	font-size: 110%;
   1.113 +	font-size: 120%;
   1.114  	color: #666666;
   1.115  	font-weight: bold;
   1.116  	margin: 0;
   1.117 @@ -116,7 +114,7 @@
   1.118  }
   1.119  
   1.120  #nav a:hover {
   1.121 -	color: #DF8F06;
   1.122 +	color: #b64b22;
   1.123  	text-decoration: none;
   1.124  	display: block;
   1.125  }
   1.126 @@ -125,18 +123,39 @@
   1.127  	margin: 2px 0px 1px 0px;
   1.128  	border: 0px;
   1.129  	border-top: 1px solid #BDBDBD;
   1.130 +}
   1.131  
   1.132 +#nav ul {
   1.133 +	-moz-border-radius: 8px;
   1.134 +	-webkit-border-radius: 8px;
   1.135 +	list-style-type: none;
   1.136 +	margin: 10px 0;
   1.137 +	padding: 10px 24px 10px 24px;
   1.138 +	background-color: #eaeaea;
   1.139  }
   1.140  
   1.141  .nav_box {
   1.142 -	-moz-border-radius: 8px;
   1.143 -	-webkit-border-radius: 8px;
   1.144  	margin: 10px 0;
   1.145  	padding: 10px 24px 10px 24px;
   1.146  	background-color: #eaeaea;
   1.147  	text-align: justify;
   1.148 +	-moz-border-radius: 8px;
   1.149 +	-webkit-border-radius: 8px;
   1.150 +	border-radius: 8px;
   1.151 +	-moz-box-shadow: 0 1px 3px #666;
   1.152 +	-webkit-box-shadow: 0 1px 3px #666;
   1.153 +	box-shadow: 0 1px 3px #666;
   1.154 +	/* CSS3 transition */
   1.155 +	-webkit-transition-property: background-color;
   1.156 +	-webkit-transition-duration: 2s;
   1.157 +	-moz-transition-property: background-color;
   1.158 +	-moz-transition-duration: 2s;
   1.159 +	transition-property: background-color;
   1.160 +	transition-duration: 2s;
   1.161  }
   1.162  
   1.163 +.nav_box:hover { background-color: #f8f8f8; }
   1.164 +
   1.165  #nav .nav_box p {
   1.166  	line-height: 1.3em;
   1.167  }
   1.168 @@ -160,19 +179,25 @@
   1.169  
   1.170  /* Page content */
   1.171  
   1.172 -#content, #content_bottom, #content_top {
   1.173 +#content {
   1.174  	background: white;
   1.175  	color: black;
   1.176  	text-align: justify;
   1.177 -}
   1.178 -
   1.179 -#content {
   1.180  	height: auto;
   1.181  	margin: 6px 320px 0px 0px;
   1.182  	padding: 0px 40px 60px 80px;
   1.183  }
   1.184  
   1.185 -#content li {
   1.186 +#content-full {
   1.187 +	background: white;
   1.188 +	color: black;
   1.189 +	text-align: justify;
   1.190 +	height: auto;
   1.191 +	margin: 6px 0px 0px 0px;
   1.192 +	padding: 0px 80px 35% 80px;
   1.193 +}
   1.194 +
   1.195 +#content li, #content-full li {
   1.196  	line-height: 1.5em;
   1.197  	text-align: left;
   1.198  }
   1.199 @@ -219,6 +244,10 @@
   1.200  	padding: 4px 0px 4px 0px;
   1.201  }
   1.202  
   1.203 +#news a {
   1.204 +	text-decoration: none;
   1.205 +}
   1.206 +
   1.207  #gallery {
   1.208  	text-align: center;
   1.209  }
   1.210 @@ -251,37 +280,117 @@
   1.211  .infobox {
   1.212  	margin: 10px;
   1.213  	padding: 12px;
   1.214 -	background: #f2f2f2;
   1.215 -	border: 1px solid #eaeaea;
   1.216 +	background: #f8f8f8;
   1.217  	-moz-border-radius: 8px;
   1.218  	-webkit-border-radius: 8px;
   1.219 +	border-radius: 8px;
   1.220 +	-moz-box-shadow: 0 1px 3px #666;
   1.221 +	-webkit-box-shadow: 0 1px 3px #666;
   1.222 +	box-shadow: 0 1px 3px #666;
   1.223 +}
   1.224 +
   1.225 +.imagebox {
   1.226 +	min-width: 300px;
   1.227 +	margin: 10px 15%;
   1.228 +	padding: 8px;
   1.229 +	background: transparent;
   1.230 +	text-align: center;
   1.231 +	/* CSS3 transition */
   1.232 +	-webkit-transition-property: background-color;
   1.233 +	-webkit-transition-duration: 3s;
   1.234 +	-moz-transition-property: background-color;
   1.235 +	-moz-transition-duration: 3s;
   1.236 +	transition-property: background-color;
   1.237 +	transition-duration: 3s;
   1.238 +}
   1.239 +
   1.240 +.imagebox:hover, .imagebox img {
   1.241 +	-moz-border-radius: 8px;
   1.242 +	-webkit-border-radius: 8px;
   1.243 +	border-radius: 8px;
   1.244 +	-moz-box-shadow: 0 1px 3px #666;
   1.245 +	-webkit-box-shadow: 0 1px 3px #666;
   1.246 +	box-shadow: 0 1px 3px #666;
   1.247 +}
   1.248 +
   1.249 +.block {
   1.250 +	/*padding-bottom: 35%;*/
   1.251 +	color: black;
   1.252 +	min-height: 200px;
   1.253 +}
   1.254 +
   1.255 +.block h3 img {
   1.256 +	padding: 0 2px 2px 0;
   1.257 +	margin: 0;
   1.258 +}
   1.259 +
   1.260 +.block ul {
   1.261 +	list-style-type: square;
   1.262 +}
   1.263 +
   1.264 +.block_left {
   1.265 +	width: 46%;
   1.266 +	float: left;
   1.267 +	background-color: #eaeaea;
   1.268 +	margin: 4px 2px;
   1.269 +	padding: 0 6px;
   1.270 +}
   1.271 +
   1.272 +.block_right {
   1.273 +	width: 46%;
   1.274 +	float: right;
   1.275 +	background-color: #eaeaea;
   1.276 +	margin: 4px 2px;
   1.277 +	padding: 0 6px;
   1.278 +}
   1.279 +
   1.280 +.block_left, .block_right {
   1.281 +	-moz-border-radius: 8px;
   1.282 +	-webkit-border-radius: 8px;
   1.283 +	border-radius: 8px;
   1.284 +	-moz-box-shadow: 0 1px 3px #666;
   1.285 +	-webkit-box-shadow: 0 1px 3px #666;
   1.286 +	box-shadow: 0 1px 3px #666;
   1.287 +	/* CSS3 transition */
   1.288 +	-webkit-transition-property: background-color;
   1.289 +	-webkit-transition-duration: 2s;
   1.290 +	-moz-transition-property: background-color;
   1.291 +	-moz-transition-duration: 2s;
   1.292 +	transition-property: background-color;
   1.293 +	transition-duration: 2s;
   1.294 +	/* For browsers that don't support RGBa
   1.295 +	background: rgb(0, 0, 0);*/
   1.296 +	/* RGBa with 0.6 opacity
   1.297 +	background: rgba(0, 0, 0, 0.2);*/
   1.298 +}
   1.299 +
   1.300 +.block_left:hover, .block_right:hover, .imagebox:hover, #slidebox:hover {
   1.301 +	background-color: #f2b21d;
   1.302  }
   1.303  
   1.304  /* HTML styles */
   1.305  
   1.306  h1 {
   1.307 -	color: blue;
   1.308 +	color: #444444;
   1.309  	background: inherit;
   1.310  	text-align: left;
   1.311 -	margin: 0px 0px 10px 0px;
   1.312 -	font-size: 140%;
   1.313 +	margin: 0px 0px 4px 0px;
   1.314 +	font-size: 150%;
   1.315  	font-weight: bold;
   1.316  }
   1.317  
   1.318  h2 {
   1.319 -	color: #DF8F06;
   1.320 -	/* border-top: 1px solid #f3f3f3; */
   1.321 -	border-left: 8px solid #f3f3f3;
   1.322 -	padding: 4px 0px 4px 4px;
   1.323 -	margin: 0;
   1.324 -	font-size: 140%;
   1.325 +	color: #b64b22;
   1.326 +	padding: 0;
   1.327 +	margin: 4px 0 0 0;
   1.328 +	font-size: 130%;
   1.329  	font-weight: bold;
   1.330  }
   1.331  
   1.332  h3 {
   1.333  	font-weight: bold;
   1.334 -	color: #6c0023;
   1.335 -	background: inherit;
   1.336 +	color: #390012;
   1.337 +	background: transparent;
   1.338  }
   1.339  
   1.340  a {
   1.341 @@ -364,3 +473,88 @@
   1.342  	background: #F3F3F3;
   1.343  	border: 1px solid #DEDEDE;
   1.344  }
   1.345 +
   1.346 +.year:after {
   1.347 +	/* content: "2007-2010"; */
   1.348 +	content: "2010";
   1.349 +}
   1.350 +
   1.351 +/* Slideshow */
   1.352 +
   1.353 +@-webkit-keyframes 'AutoSlide' {
   1.354 +	0% {
   1.355 +		left: 0px; /*1ère image*/
   1.356 +	}
   1.357 +	10% {
   1.358 +		left: 0px; /*idem pour attente*/
   1.359 +	}
   1.360 +	25% {
   1.361 +		left: -240px; /*2ème image*/
   1.362 +	}
   1.363 +	35% {
   1.364 +		left: -240px; /*idem pour attente*/
   1.365 +	}
   1.366 +	70% {
   1.367 +		left: -480px; /*3ème image*/
   1.368 +	}
   1.369 +	75% {
   1.370 +		left: -480px; /*idem pour attente*/
   1.371 +	}
   1.372 +	80% {
   1.373 +		left: -720px; /*idem pour attente*/
   1.374 +	}
   1.375 +	90% {
   1.376 +		left: -720px; /*idem pour attente*/
   1.377 +	}
   1.378 +	100% {
   1.379 +		left: 0px; /*1ère image*/
   1.380 +	}
   1.381 +}
   1.382 +
   1.383 +#slidebox {
   1.384 +	margin: 10px 15%;
   1.385 +	padding: 8px;
   1.386 +	min-width: 300px;
   1.387 +	/* CSS3 transition */
   1.388 +	-webkit-transition-property: background-color;
   1.389 +	-webkit-transition-duration: 3s;
   1.390 +	-moz-transition-property: background-color;
   1.391 +	-moz-transition-duration: 3s;
   1.392 +	transition-property: background-color;
   1.393 +	transition-duration: 3s;
   1.394 +}
   1.395 +#slidebox:hover {
   1.396 +	-moz-box-shadow: 0 1px 3px #666;
   1.397 +	-webkit-box-shadow: 0 1px 3px #666;
   1.398 +	box-shadow: 0 1px 3px #666;
   1.399 +}
   1.400 +#slidebox:hover, #slidebox img {
   1.401 +	-moz-border-radius: 8px;
   1.402 +	-webkit-border-radius: 8px;
   1.403 +	border-radius: 8px;
   1.404 +}
   1.405 +
   1.406 +#slideshow {
   1.407 +	position: relative;
   1.408 +	width: 240px;
   1.409 +	height: 150px;
   1.410 +	margin:  10px auto;
   1.411 +	overflow: hidden;
   1.412 +}
   1.413 +
   1.414 +#sContent li {
   1.415 +	display: inline;
   1.416 +}
   1.417 +#sContent {
   1.418 +	position: absolute;
   1.419 +	top: 0;
   1.420 +	left: 0;
   1.421 +	width: 1000px;
   1.422 +	margin: 0;
   1.423 +	padding: 0;
   1.424 +	/*CSS3 keyframes animation*/
   1.425 +	-webkit-animation-name: AutoSlide;
   1.426 +	-webkit-animation-duration: 10s;
   1.427 +	-webkit-animation-iteration-count: infinite;
   1.428 +	-webkit-animation-timing-function: ease-in-out;
   1.429 +}