slitaz-forge annotate mirror/root/static/slitaz.css @ rev 175

mirror: add favicon to static files and small CSS improvments
author Christophe Lincoln <pankso@slitaz.org>
date Tue Mar 20 19:49:53 2012 +0100 (2012-03-20)
parents d2a35762c34d
children d31df0170214
rev   line source
pankso@154 1 /*
pankso@154 2 CSS style for SliTaz Network - (C) 2012 SliTaz GNU/Linux
pankso@154 3 */
pankso@154 4
pankso@154 5 html {
pankso@154 6 min-height: 102%;
pankso@154 7 }
pankso@154 8
pankso@154 9 body {
pankso@154 10 background: #ffffff;
pankso@154 11 color: black;
pankso@154 12 font: 13px sans-serif, vernada, arial;
pankso@154 13 margin: 0;
pankso@154 14 min-width: 780px;
pankso@154 15 height: 100%;
pankso@154 16 }
pankso@154 17
pankso@154 18 a { text-decoration: underline; color: #215090; }
pankso@154 19 a:hover { text-decoration: none; color: blue; }
pankso@154 20 img { border: 0pt none; vertical-align: middle; }
pankso@154 21 h2 { color: #444; }
pankso@154 22 h3 { color: #666; font-size: 140%; }
pankso@154 23 h4 { color: #888; font-size: 120%; }
pankso@154 24 pre {
pankso@154 25 background-color: #f8f8f8;
pankso@154 26 border: 1px solid #ddd;
pankso@154 27 padding: 10px;
pankso@154 28 }
pankso@154 29 table {
pankso@154 30 background-color: #f8f8f8;
pankso@154 31 border: 1px solid #ddd;
pankso@154 32 width: 100%;
pankso@154 33 margin: 0px 0px 20px 0px;
pankso@154 34 padding: 10px;
pankso@154 35 }
pankso@154 36
pankso@154 37 /* Header */
pankso@154 38
pankso@154 39 #header {
pankso@154 40 height: 40px;
pankso@154 41 background: #351a0a;
pankso@175 42 color: #ffffff;
pankso@154 43 }
pankso@154 44
pankso@154 45 #header h1 {
pankso@154 46 margin: 0;
pankso@154 47 padding: 8px 0 0 42px;
pankso@154 48 width: 250px;
pankso@154 49 }
pankso@154 50
pankso@154 51 #header h1 a {
pankso@154 52 color: white;
pankso@154 53 text-decoration: none;
pankso@154 54 font-size: 20px;
pankso@154 55 font-style: italic;
pankso@154 56 }
pankso@154 57
pankso@154 58 #header h1 a:hover, #network a:hover {
pankso@154 59 color: #d66018;
pankso@154 60 }
pankso@154 61
pankso@154 62 /* Logo */
pankso@154 63
pankso@154 64 #logo {
pankso@174 65 background: url(logo.png) no-repeat left;
pankso@154 66 position: absolute;
pankso@154 67 float: left;
pankso@154 68 left: 0px;
pankso@154 69 top: 0px;
pankso@154 70 width: 40px;
pankso@154 71 height: 40px;
pankso@154 72 }
pankso@154 73
pankso@154 74 /* SliTaz Network */
pankso@154 75
pankso@154 76 #network {
pankso@154 77 float: right;
pankso@154 78 padding: 10px 5px 0;
pankso@154 79 font-size: 12px;
pankso@154 80 }
pankso@154 81
pankso@154 82 #network a { padding: 0 6px; }
pankso@154 83
pankso@154 84 /* Block */
pankso@154 85
pankso@154 86 #block {
pankso@154 87 min-height: 200px;
pankso@154 88 background: #d66018;
pankso@154 89 padding: 26px 10% 0px;
pankso@154 90 text-align: center;
pankso@154 91 color: #333;
pankso@154 92 border-bottom: 1px solid #f5f5f5;
pankso@154 93 }
pankso@154 94
pankso@154 95 #block_info {
pankso@154 96 text-align: justify;
pankso@154 97 width: 48%;
pankso@154 98 padding: 10px 10px 0 0;
pankso@154 99 }
pankso@154 100
pankso@154 101 #block a, #network a {
pankso@154 102 color: #fff;
pankso@154 103 font-weight: bold;
pankso@154 104 text-decoration: none;
pankso@154 105 }
pankso@154 106
pankso@154 107 #block h4 {
pankso@154 108 color: #351a0a;
pankso@154 109 margin: 0px;
pankso@154 110 font-weight: bold;
pankso@154 111 font-size: 110%;
pankso@154 112 }
pankso@154 113
pankso@154 114 #block_info p { margin: 6px 0; padding: 0 12px 0 0; }
pankso@154 115 #block_info a { font-weight: normal; }
pankso@154 116 #block ul { list-style-type: square; }
pankso@154 117 #block a:hover { color: #351a0a; }
pankso@154 118
pankso@154 119 /* Navigation */
pankso@154 120
pankso@154 121 #block_nav {
pankso@154 122 background: #cc5b17;
pankso@154 123 padding: 10px 10px 40px;
pankso@154 124 text-align: justify;
pankso@154 125 width: 48%;
pankso@154 126 float: right;
pankso@154 127 }
pankso@154 128
pankso@154 129 #block_nav ul {
pankso@154 130 list-style-type: none;
pankso@154 131 margin: 6px 0;
pankso@154 132 padding: 0;
pankso@154 133 }
pankso@154 134
pankso@154 135 #block_nav h4 img {
pankso@154 136 margin: 0 4px 0 0;
pankso@154 137 padding: 0;
pankso@154 138 }
pankso@154 139
pankso@154 140 /* Languages */
pankso@154 141
pankso@154 142 #lang {
pankso@154 143 position: absolute;
pankso@154 144 right: 0;
pankso@154 145 padding: 6px;
pankso@154 146 font-size: 11px;
pankso@154 147 }
pankso@154 148
pankso@154 149 #lang a {
pankso@154 150 text-decoration: none;
pankso@154 151 padding: 0 2px;
pankso@154 152 }
pankso@154 153
pankso@154 154 #lang a:hover {
pankso@154 155 text-decoration: underline;
pankso@154 156 }
pankso@154 157
pankso@154 158 /* Content */
pankso@154 159
pankso@154 160 #content {
pankso@154 161 padding: 30px 80px;
pankso@154 162 text-align: justify;
pankso@154 163 }
pankso@154 164
pankso@154 165 .news li {
pankso@154 166 list-style-type: square;
pankso@154 167 border-bottom: 1px dotted #BEBEBE;
pankso@154 168 margin-left: -25px;
pankso@154 169 padding: 4px 0px 4px 0px;
pankso@154 170 }
pankso@154 171
pankso@154 172 .news a, .feed-grid a { text-decoration: none; }
pankso@154 173 .news p a { text-decoration: underline; }
pankso@154 174 .news p a:hover { text-decoration: none; }
pankso@154 175 #twitter { margin: 20px 0; }
pankso@154 176 #gallery { text-align: center; }
pankso@154 177
pankso@154 178 #sponsor {
pankso@154 179 font-size: 90%;
pankso@154 180 background-color: #fbfbfb;
pankso@154 181 border: 2px solid #ddd;
pankso@154 182 width: 200px;
pankso@154 183 height: 160px;
pankso@154 184 float: right;
pankso@154 185 text-align: center;
pankso@154 186 margin: 10px 0px 20px 20px;
pankso@154 187 }
pankso@154 188
pankso@175 189 #mirrors {
pankso@175 190 padding: 10px;
pankso@175 191 margin: 10px 0px 20px;
pankso@175 192 text-align: center;
pankso@175 193 background: #f1f1f1;
pankso@175 194 border: 2px solid #ddd;
pankso@175 195 }
pankso@175 196
pankso@154 197 /* Classes */
pankso@154 198
pankso@154 199 .right_box { width: 48%; float: right; }
pankso@154 200 .left_box { width: 48%; float: left; }
pankso@154 201
pankso@154 202 .box {
pankso@154 203 margin: 20px 60px;
pankso@154 204 padding: 12px;
pankso@154 205 background: #efefef;
pankso@154 206 border: 1px solid #ddd;
pankso@154 207 }
pankso@154 208
pankso@154 209 .searchbox {
pankso@154 210 margin: 20px 80px;
pankso@154 211 padding: 12px;
pankso@154 212 background: #f8f8f8;
pankso@154 213 text-align: center;
pankso@154 214 border: 1px solid #ddd;
pankso@154 215 }
pankso@154 216
pankso@154 217 /* Activity Box */
pankso@154 218
pankso@154 219 .activity {
pankso@154 220 margin: 0 0 20px;
pankso@154 221 background: #efefef;
pankso@154 222 padding: 5px 2px 0;
pankso@154 223 border: 1px solid #ddd;
pankso@154 224 }
pankso@154 225 .activity div { padding: 5px 10px; background: #fff; margin-top: 5px; }
pankso@154 226 .activity p { margin: 0; padding: 5px 10px; font-weight: bold; }
pankso@154 227 .activity a { text-decoration: none; }
pankso@154 228 .activity ul { list-style-type: none;
pankso@154 229 margin: 4px 0; padding: 0 4px; line-height: 150%; }
pankso@154 230 .activity_more { text-align: right; }
pankso@154 231 .activity_more a { font-weight: normal; color: #000; padding: 0 4px; }
pankso@154 232 .activity_more a:hover { text-decoration: underline; }
pankso@154 233
pankso@154 234 .activity span, .news span {
pankso@154 235 color: #666;
pankso@154 236 font-size: 11px;
pankso@154 237 font-weight: normal;
pankso@154 238 }
pankso@154 239
pankso@154 240 /* Button */
pankso@154 241
pankso@154 242 .button a {
pankso@154 243 background-color: #b64b22;
pankso@154 244 color: #ffffff;
pankso@154 245 margin-right: 6px;
pankso@154 246 padding: 6px 10px;
pankso@154 247 font-size: 12px;
pankso@154 248 text-decoration: none;
pankso@154 249 font-weight: bold;
pankso@154 250 }
pankso@154 251 .button a:hover, input[type=submit]:hover {
pankso@154 252 background-color: #a3431f;
pankso@154 253 color: #ffffff;
pankso@154 254 }
pankso@154 255
pankso@154 256 /* Round corner */
pankso@154 257
pankso@154 258 #block_nav, pre, .box, .searchbox, .button a, #twitter, .activity,
pankso@175 259 .activity div, #sponsor, #mirrors, table, input, textarea, select {
pankso@154 260 -moz-border-radius: 4px;
pankso@154 261 -webkit-border-radius: 4px;
pankso@154 262 border-radius: 4px;
pankso@154 263 }
pankso@154 264
pankso@154 265 /* Form */
pankso@154 266
pankso@154 267 form { display: inline; }
pankso@154 268 input[type="submit"], input[type="text"], textarea, select {
pankso@154 269 color: #444444;
pankso@154 270 border: 1px solid #cccccc;
pankso@154 271 padding: 4px;
pankso@154 272 margin: 4px 0px;
pankso@154 273 font-size: 14px;
pankso@154 274 line-height: 1.2em;
pankso@154 275 background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
pankso@154 276 background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
pankso@154 277 -webkit-appearance: none;
pankso@154 278 -webkit-padding-end: 6px;
pankso@154 279 -webkit-padding-start: 6px;
pankso@154 280 }
pankso@154 281
pankso@154 282 input[type="text"], textarea { background: #fefefe; border: 2px solid #ccc;
pankso@154 283 width: 460px; }
pankso@154 284 /*input[type="file"] { border: 2px solid #ddd; }*/
pankso@154 285 /*input[type="checkbox"] { background: #fefefe; }*/
pankso@154 286
pankso@154 287 /* Be compatible with old FF and Webkit version. */
pankso@154 288 input[type="submit"] {
pankso@154 289 -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
pankso@154 290 -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
pankso@154 291 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
pankso@154 292 }
pankso@154 293
pankso@154 294 input[type="submit"]:hover {
pankso@154 295 cursor: pointer;
pankso@154 296 color: black;
pankso@154 297 }
pankso@154 298
pankso@154 299 select {
pankso@154 300 background-image: url(images/down.png),
pankso@154 301 -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
pankso@154 302 background-position: center right;
pankso@154 303 background-repeat: no-repeat;
pankso@154 304 }
pankso@154 305
pankso@154 306 .searchbox input[type=submit] {
pankso@154 307 border: 1px solid #b64b22;
pankso@154 308 background-color: #b64b22;
pankso@154 309 color: white;
pankso@154 310 font-weight: bold;
pankso@154 311 cursor: pointer;
pankso@154 312 padding: 4px 10px;
pankso@154 313 font-size: 14px;
pankso@154 314 margin-left: -5px;
pankso@154 315 -webkit-border-top-right-radius: 4px;
pankso@154 316 -webkit-border-bottom-right-radius: 4px;
pankso@154 317 -moz-border-radius-topright: 4px;
pankso@154 318 -moz-border-radius-bottomright: 4px;
pankso@154 319 border-top-right-radius: 4px;
pankso@154 320 border-bottom-right-radius: 4px;
pankso@154 321 }
pankso@154 322
pankso@154 323 .searchbox input[type=submit]:hover { background-color: #a3431f; }
pankso@154 324
pankso@154 325 .searchbox input[type=text] {
pankso@154 326 border: 1px solid #333333;
pankso@154 327 padding: 4px;
pankso@154 328 height: 17px;
pankso@154 329 width: 100%;
pankso@154 330 -webkit-border-top-left-radius: 4px;
pankso@154 331 -webkit-border-bottom-left-radius: 4px;
pankso@154 332 -moz-border-radius-topleft: 4px;
pankso@154 333 -moz-border-radius-bottomleft: 4px;
pankso@154 334 border-top-left-radius: 4px;
pankso@154 335 border-bottom-left-radius: 4px;
pankso@154 336 }
pankso@154 337
pankso@154 338 /* Footer */
pankso@154 339
pankso@154 340 #footer {
pankso@154 341 background: #f1f1f1;
pankso@154 342 text-align: center;
pankso@154 343 border-top: 1px solid #ddd;
pankso@154 344 padding: 40px;
pankso@154 345 color: #666;
pankso@154 346 clear: both;
pankso@154 347 margin-bottom: -2%;
pankso@154 348 }
pankso@154 349
pankso@154 350 #footer a { color: #666; padding: 0 2px; }
pankso@154 351
pankso@154 352 .year:after {
pankso@154 353 /* content: "2007-2012"; */
pankso@154 354 content: "2012";
pankso@154 355 }