Mercurial > mxd2map
annotate website/style.css @ 209:1d7fc059e538
* doku/source/functionality.txt: Added part about the translation
of umlauts into the doku.
| author | Stephan Holl <stephan.holl@intevation.de> |
|---|---|
| date | Fri, 22 Jul 2011 11:14:19 +0200 |
| parents | dd4bb5869f86 |
| children | 4f6356a908e1 |
| rev | line source |
|---|---|
|
162
dd4bb5869f86
replaced mapWOC with MXD2map
Stephan Holl <stephan.holl@intevation.de>
parents:
159
diff
changeset
|
1 /* Styles for the MXD2map Website */ |
| 155 | 2 |
| 3 body { | |
| 4 font-family: arial, helvetica, sans-serif; | |
| 5 font-size: 13px; | |
| 6 background: #FFFFFF url('img/page_bg.png') repeat-x; | |
| 7 color: #333333; | |
| 8 margin: 0px; | |
| 9 padding:0px; | |
| 10 } | |
| 11 | |
| 12 a { | |
| 13 color: #b51a22; | |
| 14 text-decoration: none; | |
| 15 } | |
| 16 | |
| 17 a:hover { | |
| 18 text-decoration: underline; | |
| 19 } | |
| 20 | |
| 21 img { | |
| 22 border: 0px; | |
| 23 } | |
| 24 | |
| 25 .imageframe { | |
| 26 border-color: #DEDEDE #AAAAAA #888888 #CECECE; | |
| 27 border-style: double; | |
| 28 border-width: 1px; | |
| 29 padding: 5px; | |
| 30 } | |
| 31 | |
| 32 .imgfloatleft { | |
| 33 float: left; | |
| 34 margin: 0px 20px 30px 0px; | |
| 35 } | |
| 36 | |
| 37 td { | |
| 38 vertical-align: top; | |
| 39 } | |
| 40 | |
| 41 .odd td { | |
| 42 background: #E6E6E6; | |
| 43 } | |
| 44 | |
| 45 .wrapper { | |
| 46 width: 900px; | |
| 47 margin: 0 auto; | |
| 48 text-align: left; | |
| 49 } | |
| 50 | |
| 51 .language_select { | |
| 52 float:right; | |
| 53 height: 100%; | |
| 54 } | |
| 55 | |
| 56 .logo { | |
| 57 margin-top: 20px; | |
| 58 margin-left: 15px; | |
| 59 } | |
| 60 | |
| 61 .header { | |
| 62 padding: 6px 0 6px 0; | |
| 63 margin-bottom: 0px; | |
| 64 height: 1em; | |
| 65 } | |
| 66 | |
| 67 .fancy_intro { | |
| 68 background: url('img/logo_wide.png') no-repeat; | |
| 69 background-position: 350px 17px; | |
| 70 height:125px; | |
| 71 margin: 30px 20px 25px 20px; | |
| 72 border-bottom:1px solid gray; | |
| 73 overflow: hidden; | |
| 74 width:860px; | |
| 75 padding-bottom: 15px; | |
| 76 } | |
| 77 | |
| 78 .mini_intro { | |
| 79 clear: both; | |
| 80 font-size: 12px; | |
| 81 line-height: 38px; | |
| 82 margin-top: 8px; | |
| 83 } | |
| 84 | |
| 85 #download_button { | |
| 86 position: relative; | |
| 87 width: 250px; | |
| 88 z-index: 0; | |
| 89 } | |
| 90 | |
| 91 #download_button a { | |
| 92 background: url('img/download_button.png'); | |
| 93 background-repeat: no-repeat; | |
| 94 display: block; | |
| 95 height: 116px; | |
| 96 width: 260px; | |
| 97 color: #FFFFFF; | |
| 98 font-weight: bold; | |
| 99 text-decoration: none; | |
| 100 font-size: 19px; | |
| 101 } | |
| 102 | |
| 103 #download_button a:hover { | |
| 104 background-position: 0px -116px; | |
| 105 } | |
| 106 | |
| 107 #download_button .text { | |
| 108 position: relative; | |
| 109 top: 23px; | |
| 110 left: 25px; | |
| 111 } | |
| 112 | |
| 113 #breadcrum { | |
| 114 float:left; | |
| 115 } | |
| 116 | |
| 117 #download_button_mini { | |
| 118 float:right; | |
| 119 text-align:right; | |
| 120 width: 189px; | |
| 121 line-height: 100%; | |
| 122 } | |
| 123 | |
| 124 #download_button_mini .links { | |
| 125 position: relative; | |
| 126 top: -13px; | |
| 127 font-size: 10px; | |
| 128 text-align: right; | |
| 129 } | |
| 130 | |
| 131 #download_button_mini .dmini_button { | |
| 132 background: url('img/download_button_mini.png'); | |
| 133 background-repeat: no-repeat; | |
| 134 display: block; | |
| 135 height: 50px; | |
| 136 width: 189px; | |
| 137 text-align:left; | |
| 138 font-size: 11px; | |
| 139 line-height:50px; | |
| 140 color: #FFFFFF; | |
| 141 font-weight:bold; | |
| 142 text-decoration:none; | |
| 143 } | |
| 144 | |
| 145 #download_button_mini .dmini_button:hover { | |
| 146 background-position: 0px -50px; | |
| 147 } | |
| 148 | |
| 149 #download_button_mini .text { | |
| 150 position: relative; | |
| 151 left: 12px; | |
| 152 } | |
| 153 | |
| 154 .download_button_links { | |
| 155 font-size:11px; | |
| 156 position: relative; | |
| 157 left: 25px; | |
| 158 top: 43px; | |
| 159 width: 250px; | |
| 160 } | |
| 161 | |
| 162 #donate_button { | |
| 163 position: relative; | |
| 164 left: 695px; | |
| 165 top: 85px; | |
| 166 width: 200px; | |
| 167 } | |
| 168 | |
| 169 #donate_button a { | |
| 170 background: url('img/donate_button.png'); | |
| 171 background-repeat: no-repeat; | |
| 172 display: block; | |
| 173 height: 79px; | |
| 174 width: 200px; | |
| 175 color: #FFFFFF; | |
| 176 font-weight: bold; | |
| 177 text-decoration: none; | |
| 178 font-size: 14px; | |
| 179 } | |
| 180 | |
| 181 #donate_button a:hover { | |
| 182 background-position: 0px -79px; | |
| 183 } | |
| 184 | |
| 185 #donate_button .text { | |
| 186 position:relative; | |
| 187 top:20px; | |
| 188 left:10px; | |
| 189 } | |
| 190 | |
| 191 .h_text { | |
| 192 position: relative; | |
| 193 top: -125px; | |
| 194 left: 669px; | |
| 195 width: 180px; | |
| 196 font-size: 11px; | |
| 197 border-left: 1px solid #CCCCCC; | |
| 198 padding-left: 10px; | |
| 199 margin-top: 12px; | |
| 200 height: 220px; | |
| 201 } | |
| 202 | |
| 203 .h_text .heading { | |
| 204 font-size: 23px; | |
| 205 font-family: georgia, times, serif; | |
| 206 padding-bottom: 9px; | |
| 207 } | |
| 208 | |
| 209 .h_text .serif_word { | |
| 210 font-size: 13px; | |
| 211 font-weight: bold; | |
| 212 } | |
| 213 | |
| 214 | |
| 215 | |
| 216 .h_text .limiter { | |
| 217 border-bottom: 3px dotted #CCCCCC; | |
| 218 width: 190px; | |
| 219 height: 10px; | |
| 220 margin-bottom: 3px; | |
| 221 } | |
| 222 .center { | |
| 223 text-align: center; | |
| 224 } | |
| 225 | |
| 226 .content { | |
| 227 width: 100%; | |
| 228 margin-top: 40px; | |
| 229 } | |
| 230 | |
| 231 #intro { | |
| 232 padding: 0px 250px 20px 20px; | |
| 233 } | |
| 234 | |
| 235 /*#intro span { | |
| 236 background: url('img/logo.png') no-repeat scroll 50px 0px transparent; | |
| 237 height: 56px; | |
| 238 margin: 0px; | |
| 239 width: 250px; | |
| 240 float: right; | |
| 241 margin: 0px; | |
| 242 line-height: 24px; | |
| 243 margin: 10px 200px 0 0; | |
| 244 }*/ | |
| 245 | |
| 246 #intro h2 { | |
| 247 font-family: georgia, times, serif; | |
| 248 font-size: 30px; | |
| 249 font-weight: normal; | |
| 250 color: #333333; | |
| 251 margin: 0px; | |
| 252 } | |
| 253 | |
| 254 #intro p { | |
| 255 color: #555555; | |
| 256 font-size: 14px; | |
| 257 font-weight: normal; | |
| 258 line-height: 26px; | |
| 259 margin: 10px 0 0; | |
| 260 padding: 0; | |
| 261 } | |
| 262 | |
| 263 .column1, .column2, .column3 { | |
| 264 display: inline; | |
| 265 float: left; | |
| 266 margin-right: 25px; | |
| 267 position: relative; | |
| 268 width: 270px; | |
| 269 } | |
| 270 | |
| 271 .column3 { | |
| 272 margin-right: 0px; | |
| 273 } | |
| 274 | |
| 275 .column1 img, .column2 img, .column3 img { | |
| 276 width: 270px; | |
| 277 } | |
| 278 | |
| 279 | |
| 280 #main { | |
| 281 float: left; | |
| 282 padding: 0px 0px 0px 20px; | |
| 283 width: 600px; | |
| 284 } | |
| 285 | |
| 286 #full { | |
| 287 float: left; | |
| 288 padding: 0px 20px 0px 20px; | |
| 289 width: 860px; | |
| 290 } | |
| 291 | |
| 292 #main h2, #full h2 { | |
| 293 font-size: 22px; | |
| 294 font-weight: normal; | |
| 295 color: #333333; | |
| 296 margin: 30px 0px 10px 0px; | |
| 297 padding: 0px; | |
| 298 clear: both; | |
| 299 } | |
| 300 | |
| 301 #main h4, #full h4 { | |
| 302 font-size: 18px; | |
| 303 color: #333333; | |
| 304 font-family: georgia, serif; | |
| 305 font-style: italic; | |
| 306 font-weight: normal; | |
| 307 } | |
| 308 | |
| 309 #main p, #full p, #main li, #full li{ | |
| 310 color: #444444; | |
| 311 line-height: 20px; | |
| 312 margin: 0px 0px 10px; | |
| 313 } | |
| 314 | |
| 315 .cleanlist li { | |
| 316 font-size: 13px; | |
| 317 list-style: none; | |
| 318 padding: 0px; | |
| 319 clear: both; | |
| 320 } | |
| 321 | |
| 322 .screenshots img { | |
| 323 width: 250px; | |
| 324 } | |
| 325 | |
| 326 #sidebar { | |
| 327 -moz-border-radius: 10px 10px 10px 10px; | |
| 328 background: #FDF1CD; | |
| 329 border: 1px solid #CCCCCC; | |
| 330 float: right; | |
| 331 margin-top: 34px; | |
| 332 padding: 20px 20px 15px; | |
| 333 width: 220px; | |
| 334 } | |
| 335 | |
| 336 #sidebar h3 { | |
| 337 color: #333333; | |
| 338 margin: 1px 0px 10px 0px; | |
| 339 } | |
| 340 | |
| 341 #sidebarsimple { | |
| 342 float: right; | |
| 343 margin-top: 34px; | |
| 344 } | |
| 345 | |
| 346 .newslist { | |
| 347 margin: 0px; | |
| 348 padding: 0px; | |
| 349 } | |
| 350 | |
| 351 .newslist li { | |
| 352 font-size: 13px; | |
| 353 list-style: none; | |
| 354 padding: 0; | |
| 355 } | |
| 356 | |
| 357 .newslist li a { | |
| 358 /*color: #555555;*/ | |
| 359 display: block; | |
| 360 font-size: 12px; | |
| 361 font-weight: bold; | |
| 362 list-style: none; | |
| 363 margin: 0px; | |
| 364 padding: 10px 0px 10px 0px; | |
| 365 text-decoration: none; | |
| 366 border-bottom: 1px solid #EFEFEF; | |
| 367 } | |
| 368 | |
| 369 .newslist li p { | |
| 370 color: #777777; | |
| 371 font-size: 10px; | |
| 372 font-weight: normal; | |
| 373 margin: 4px 0px 0px; | |
| 374 padding: 0px; | |
| 375 } | |
| 376 | |
| 377 #menu { | |
| 378 height:45px; | |
| 379 z-index: 1; | |
| 380 } | |
| 381 | |
| 382 #menu .active a { | |
| 383 background-position: 0px -180px; | |
| 384 } | |
| 385 | |
| 386 #menu ul { | |
| 387 list-style: none; | |
| 388 padding: 0px; | |
| 389 margin: 0px; | |
| 390 } | |
| 391 | |
| 392 #menu li { | |
| 393 float: left; | |
| 394 margin-right: 0px; | |
| 395 margin-left:0px; | |
| 396 padding: 0px; | |
| 397 text-align: center; | |
| 398 } | |
| 399 | |
| 400 #menu .mlogo { | |
| 401 border:0px; | |
| 402 } | |
| 403 | |
| 404 #menu .mlogo a { | |
| 405 display:block; | |
| 406 width: 198px; | |
| 407 height: 52px; | |
| 408 position: relative; | |
| 409 top: -4px; | |
| 410 background: url('img/inmenulogo.png'); | |
| 411 } | |
| 412 | |
| 413 #menu .mlogo a:hover { | |
| 414 background: url('img/inmenulogo.png'); | |
| 415 background-position: 0px -52px; | |
| 416 } | |
| 417 | |
| 418 #menu .last { | |
| 419 width:40px; | |
| 420 height: 45px; | |
| 421 background: url('img/last.png'); | |
| 422 } | |
| 423 | |
| 424 #menu .mdonate a { | |
| 425 display: block; | |
| 426 width: 110px; | |
| 427 height: 45px; | |
| 428 float:right; | |
| 429 background: url('img/inmenudonate.png'); | |
| 430 color: #FFFFFF; | |
| 431 text-indent: -23px; | |
| 432 } | |
| 433 | |
| 434 #menu .mdonate a:hover { | |
| 435 background: url('img/inmenudonate.png'); | |
| 436 background-position: 0px -45px; | |
| 437 } | |
| 438 | |
| 439 #menu li a { | |
| 440 background: #CCCCCC url('img/menubar.png') 0px -90px; | |
|
158
c4fa8e2cb5f7
mxd2map init
Karl-Heinz Ruskowski <khruskowski@intevation.de>
parents:
155
diff
changeset
|
441 color: #FFFFFF; |
| 155 | 442 line-height: 45px; |
| 443 width: 148px; | |
| 444 display: block; | |
| 445 text-decoration: none; | |
| 446 font-weight: bold; | |
| 447 font-size: 11px; | |
| 448 height: 45px; | |
| 449 overflow: hidden; | |
| 450 } | |
| 451 | |
| 452 #menu li a:hover { | |
| 453 background: #FFFFFF url('img/menubar.png') 0px -135px; | |
| 454 color:#FFFFFF; | |
| 455 } | |
| 456 | |
| 457 #menu ul li ul { | |
| 458 width: 201px; | |
| 459 list-style: none; | |
| 460 position: absolute; | |
| 461 display: none; | |
| 462 } | |
| 463 | |
| 464 #menu ul li ul li, | |
| 465 #menu .active ul li ul li { | |
| 466 width: 148px; | |
| 467 } | |
| 468 | |
| 469 #menu ul li .subcap { | |
| 470 background: url('img/sub_tail.png'); | |
| 471 display: block; | |
| 472 width: 149px; | |
| 473 height: 5px; | |
| 474 } | |
| 475 | |
| 476 #menu ul li ul li a, | |
| 477 #menu .active ul li ul li a { | |
| 478 background: url('img/sub_bg.png'); | |
| 479 line-height: 25px; | |
| 480 width: 142px; | |
| 481 height: 22px; | |
| 482 font-weight: normal; | |
| 483 color: #2A2A2A; | |
| 484 text-align: left; | |
| 485 display: block; | |
| 486 padding-left: 5px; | |
| 487 border-left: 1px solid #8B7E57; | |
| 488 border-right: 1px solid #8B7E57; | |
| 489 } | |
| 490 | |
| 491 #menu ul li ul li a:hover, | |
| 492 #menu .active ul li a:hover { | |
| 493 background: #FBCA4C; | |
| 494 color: #2A2A2A; | |
| 495 text-decoration: none; | |
| 496 font-weight: bold; | |
| 497 } | |
| 498 | |
| 499 #menu li:hover ul ul, | |
| 500 #menu li:hover ul ul ul { | |
| 501 display: none; | |
| 502 } | |
| 503 | |
| 504 #menu li:hover ul, | |
| 505 #menu li li:hover ul, | |
| 506 #menu li li li:hover ul { | |
| 507 display: block; | |
| 508 z-index:3; | |
| 509 } | |
| 510 | |
| 511 .donate_header { | |
| 512 display: block; | |
| 513 position: relative; | |
| 514 top: -40px; | |
| 515 height: 170px; | |
| 516 background: url('img/heart.png') no-repeat; | |
| 517 background-position: 550px 10px; | |
| 518 font-size: 26px; | |
| 519 border-bottom: 1px solid #CCCCCC; | |
| 520 margin-bottom: 0px; | |
| 521 z-index: -100; | |
| 522 } | |
| 523 | |
| 524 .donate_header .text { | |
| 525 position:relative; | |
| 526 left: 180px; | |
| 527 top: 40px; | |
| 528 text-align:center; | |
| 529 } | |
| 530 | |
| 531 .donate_header b { | |
| 532 color: #D50D35; | |
| 533 } | |
| 534 | |
| 535 .download_header { | |
| 536 height:160px; | |
| 537 background: url('img/download_bg.png') no-repeat; | |
| 538 background-position: 690px 10px; | |
| 539 font-size:26px; | |
| 540 border-bottom: 1px solid #CCCCCC; | |
| 541 margin-bottom:8px; | |
| 542 } | |
| 543 | |
| 544 .download_header .text { | |
| 545 position:relative; | |
| 546 left: 120px; | |
| 547 top: 40px; | |
| 548 text-align:center; | |
| 549 } | |
| 550 | |
| 551 .download_header b { | |
| 552 color: #D50D35; | |
| 553 } | |
| 554 | |
| 555 .dlbutton2 a { | |
| 556 background-color: #6AC221; | |
| 557 -moz-border-radius: 10px 10px 10px 10px; | |
| 558 display: block; | |
| 559 font-size: 150%; | |
| 560 font-weight: bold; | |
| 561 margin: 10px 20px 20px; | |
| 562 padding: 10px; | |
| 563 text-align: center; | |
| 564 color: #FFFFFF; | |
| 565 } | |
| 566 | |
| 567 .dlbutton2 a:hover { | |
| 568 background: #81C72B; | |
| 569 text-decoration: none; | |
| 570 } | |
| 571 | |
| 572 .dlbutton2 img { | |
| 573 float:right; | |
| 574 position: relative; | |
| 575 right: 45px; | |
| 576 top: 8px; | |
| 577 } | |
| 578 | |
| 579 .version { | |
| 580 color: #FFFFFF; | |
| 581 font-size: 75%; | |
| 582 font-weight: normal; | |
| 583 } | |
| 584 | |
| 585 #footer { | |
| 586 background: #EBEBEB; | |
| 587 font-size: 11px; | |
| 588 padding-bottom: 20px; | |
| 589 color: #333333; | |
| 590 text-align: center; | |
| 591 margin-top: 30px; | |
| 592 height: 15em; | |
| 593 width: 100%; | |
| 594 } | |
| 595 | |
| 596 #sitemap { | |
| 597 margin: auto; | |
| 598 width: 900px; | |
| 599 text-align: left; | |
| 600 } | |
| 601 | |
| 602 #sitemap ul { | |
| 603 list-style:none; | |
| 604 float: left; | |
| 605 width: 130px; | |
| 606 margin-left: 20px; | |
| 607 padding: 0px; | |
| 608 } | |
| 609 | |
| 610 #sitemap li { | |
| 611 font-size: 12px; | |
| 612 line-height: 19px; | |
| 613 padding: 0px; | |
| 614 } | |
| 615 | |
| 616 #sitemap li { | |
| 617 font-size: 12px; | |
| 618 line-height: 19px; | |
| 619 padding: 0px; | |
| 620 } | |
| 621 | |
| 622 #sitemap ul li a { | |
| 623 color: #555555; | |
| 624 text-decoration: none; | |
| 625 } | |
| 626 | |
| 627 #sitemap ul li a:hover { | |
| 628 text-decoration: underline; | |
| 629 } |