slitaz-forge annotate pkgs/style/slitaz.css @ rev 582

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