themes/baggy/css/main.css

   1 /* ==========================================================================
   2    Sommaire
   3
   4    1 = Style Guide
   5    2 = Layout
   6    3 = Pictos
   7    4 = Messages
   8    5 = Article
   9    6 = Media queries
  10
  11    ========================================================================== */
  12
  13 html {
  14   min-height: 100%;
  15 }
  16
  17 body {
  18   background: #EEE;
  19 }
  20
  21 .login {
  22   background: #333;
  23 }
  24
  25 .login #main {
  26   padding: 0;
  27   margin: 0;
  28 }
  29
  30 .login form {
  31   background: #FFF;
  32   padding: 1.5em;
  33   box-shadow: 0 1px 8px rgba(0,0,0,0.9);
  34   width: 20em;
  35   position: absolute;
  36   top: 8em;
  37   left: 50%;
  38   margin-left: -10em;
  39 }
  40
  41 .login .logo {
  42   position: absolute;
  43   top: 2em;
  44   left: 50%;
  45   margin-left: -55px;
  46 }
  47
  48 /* ==========================================================================
  49    1 = Style Guide
  50    ========================================================================== */
  51
  52 ::selection {
  53   color: #FFF;
  54   background: #000;
  55 }
  56
  57 .desktopHide {
  58   display: none;
  59 }
  60
  61 .logo {
  62   position: fixed;
  63   z-index: 20;
  64   top: 0.4em;
  65   left: 0.6em;
  66 }
  67
  68 h2, h3, h4 {
  69   font-family: 'PT Sans', sans-serif;
  70   text-transform: uppercase;
  71 }
  72
  73 p, li {
  74   color: #666;
  75 }
  76
  77 a {
  78   color: #000;
  79   font-weight: bold;
  80 }
  81
  82 a:hover, a:focus {
  83   text-decoration: none;
  84 }
  85
  86 form fieldset {
  87   border:0;
  88   padding: 0;
  89   margin: 0;
  90 }
  91
  92 form input[type="text"], select, form input[type="password"], form input[type="url"] {
  93   border: 1px solid #999;
  94   padding: 0.5em 1em;
  95   min-width: 12em;
  96   color: #666;
  97 }
  98
  99 @media screen and (-webkit-min-device-pixel-ratio:0){
 100   select{
 101     -webkit-appearance: none;
 102     border-radius: 0;
 103     background: #FFF url(../img/bg-select.png) no-repeat right center;
 104   }
 105 }
 106
 107 fieldset label {
 108   min-width: 12.5em;
 109 }
 110
 111 .inline .row {
 112   display: inline-block;
 113   margin-right: 0.5em;
 114 }
 115
 116 .inline label {
 117   min-width: 6em;
 118 }
 119
 120 fieldset label {
 121   display: inline-block;
 122   margin-right: 0.5em;
 123   color: #666;
 124 }
 125
 126 form .row {
 127   margin-bottom: 0.5em;
 128 }
 129
 130 form button, input[type="submit"] {
 131   cursor:pointer;
 132   background: #000;
 133   color: #FFF;
 134   border:0;
 135   padding: 0.5em 1em;
 136   display: inline-block;
 137   border:1px solid #000;
 138 }
 139
 140   form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus {
 141     background: #FFF;
 142     color: #000;
 143     -webkit-transition: all 0.5s ease;
 144      -moz-transition: all 0.5s ease;
 145       -ms-transition: all 0.5s ease;
 146        -o-transition: all 0.5s ease;
 147           transition: all 0.5s ease;
 148   }
 149
 150 #bookmarklet {
 151   cursor: move;
 152 }
 153
 154 h2:after {
 155   content: "";
 156   height: 4px;
 157   width: 70px;
 158   background: #000;
 159   display: block;
 160 }
 161
 162 .links {
 163   padding: 0;
 164   margin: 0;
 165 }
 166   .links li {
 167     list-style: none;
 168     margin: 0;
 169     padding: 0;
 170   }
 171
 172
 173 #links {
 174   position: fixed;
 175   top: 0;
 176   width: 10em;
 177   left: 0;
 178   text-align: right;
 179   background: #333;
 180   padding-top: 9.5em;
 181   height: 100%;
 182   box-shadow:inset -4px 0 20px rgba(0,0,0,0.6);
 183   z-index: 10;
 184 }
 185
 186 #main {
 187   margin-left: 13em;
 188   position: relative;
 189   z-index: 10;
 190   padding-right: 5%;
 191   padding-bottom: 1em;
 192 }
 193
 194   #links a {
 195     display: block;
 196     padding: 0.5em 2em 0.5em 1em;
 197     color: #FFF;
 198     position: relative;
 199     text-transform: uppercase;
 200     text-decoration: none;
 201     font-weight: normal;
 202     font-family: 'PT Sans', sans-serif;
 203     -webkit-transition: all 0.5s ease;
 204      -moz-transition: all 0.5s ease;
 205       -ms-transition: all 0.5s ease;
 206        -o-transition: all 0.5s ease;
 207           transition: all 0.5s ease;
 208   }
 209
 210   #links a:hover, #links a:focus {
 211     background: #999;
 212     color: #000;
 213   }
 214
 215   #links .current:after {
 216     content: "";
 217     width: 0;
 218     height: 0;
 219     position: absolute;
 220     border-style: solid;
 221     border-width: 10px;
 222     border-color:  transparent #EEE transparent transparent;
 223     right: 0;
 224     top: 50%;
 225     margin-top: -10px;
 226   }
 227
 228   #links li:last-child {
 229     position: fixed;
 230     bottom: 1em;
 231     width: 10em;
 232   }
 233
 234   #links li:last-child a:before {
 235     font-size: 1.2em;
 236     position: relative;
 237     top: 2px;
 238   }
 239
 240
 241 #sort {
 242     padding: 0;
 243     list-style-type: none;
 244     opacity: 0.5;
 245     display: inline-block;
 246 }
 247
 248 #sort li {
 249     display: inline;
 250     font-size: 0.9em;
 251 }
 252
 253 #sort li + li {
 254     margin-left: 10px;
 255 }
 256
 257 #sort a {
 258     padding: 2px 2px 0;
 259     vertical-align: middle;
 260 }
 261
 262 #sort img {
 263     vertical-align: baseline;
 264 }
 265 #sort img:hover {
 266     cursor: pointer;
 267 }
 268
 269 #display-mode {
 270   float: right;
 271   vertical-align: middle;
 272   margin-top: 10px;
 273   margin-bottom: 10px;
 274   opacity: 0.5;
 275 }
 276 #listmode {
 277   width: 16px;
 278   display: inline-block;
 279   text-decoration: none;
 280 }
 281 #listmode a:hover {
 282   opacity: 1;
 283 }
 284 .tablemode {
 285   background-image: url("../img/baggy/table.png");
 286   background-repeat: no-repeat;
 287   background-position: bottom;
 288 }
 289 .listmode {
 290   background-image: url("../img/baggy/list.png");
 291   background-repeat: no-repeat;
 292   background-position: bottom;
 293 }
 294
 295
 296 /* ==========================================================================
 297    2 = Layout
 298    ========================================================================== */
 299
 300 #content {
 301   margin-top: 5em;
 302   min-height: 30em;
 303 }
 304
 305 footer {
 306   text-align: right;
 307   position: relative;
 308   bottom: 0;
 309   right: 5em;
 310   color: #999;
 311   font-size: 0.8em;
 312   font-style: italic;
 313   z-index: 20;
 314 }
 315
 316 footer a {
 317   color: #999;
 318   font-weight: normal;
 319 }
 320
 321 .list-entries {
 322   letter-spacing:-5px;
 323 }
 324
 325 .listmode .entrie {
 326   width: 100%!important;
 327   margin-left: 0!important;
 328 }
 329
 330 .listmode .entrie p {
 331   display: none;
 332 }
 333
 334 .list-entries + .results {
 335   margin-bottom: 2em;
 336 }
 337
 338 .estimatedTime a {
 339   color: #999;
 340   font-style: italic;
 341   font-weight: normal;
 342   font-size: 0.9em;
 343 }
 344
 345 .estimatedTime small {
 346   position: relative;
 347   top: -1px;
 348 }
 349
 350 .entrie {
 351   background: #FFF;
 352   letter-spacing:normal;
 353   box-shadow: 0 3px 7px rgba(0,0,0,0.3);
 354   display: inline-block;
 355   width: 32%!important;
 356   margin-bottom: 1.5em;
 357   vertical-align: top;
 358   margin-left: 1.5%!important;
 359   position: relative;
 360   overflow: hidden;
 361   padding: 1.5em 1.5em 3em 1.5em;
 362   -webkit-transition: all 0.5s ease;
 363      -moz-transition: all 0.5s ease;
 364       -ms-transition: all 0.5s ease;
 365        -o-transition: all 0.5s ease;
 366           transition: all 0.5s ease;
 367 }
 368
 369 .entrie:before {
 370   content: "";
 371   width: 0;
 372   height: 0;
 373   border-style:solid;
 374   border-color: transparent transparent #000 transparent;
 375   border-width: 10px;
 376   position: absolute;
 377   bottom: 0.3em;
 378   z-index: 10;
 379   right: 1.5em;
 380   -webkit-transition: all 0.5s ease;
 381      -moz-transition: all 0.5s ease;
 382       -ms-transition: all 0.5s ease;
 383        -o-transition: all 0.5s ease;
 384           transition: all 0.5s ease;
 385 }
 386
 387 .entrie:after {
 388   content: "";
 389   position: absolute;
 390   height: 7px;
 391   width: 100%;
 392   bottom: 0;
 393   left: 0;
 394   background: #000;
 395   -webkit-transition: all 0.5s ease;
 396      -moz-transition: all 0.5s ease;
 397       -ms-transition: all 0.5s ease;
 398        -o-transition: all 0.5s ease;
 399           transition: all 0.5s ease;
 400 }
 401
 402 .entrie:hover {
 403   box-shadow: 0 3px 10px rgba(0,0,0,1);
 404 }
 405
 406 .entrie:hover:after {
 407   height: 40px;
 408 }
 409
 410 .entrie:hover:before {
 411   bottom: 2.4em;
 412 }
 413
 414 .entrie:hover h2 a {
 415   color: #666;
 416 }
 417
 418 .entrie h2 {
 419   text-transform: none;
 420   margin-bottom: 0;
 421 }
 422
 423   .entrie h2:after {
 424     content: none;
 425   }
 426
 427 .entrie h2 a {
 428   display: block;
 429   text-decoration: none;
 430   color: #000;
 431   word-wrap: break-word;
 432   -webkit-transition: all 0.5s ease;
 433      -moz-transition: all 0.5s ease;
 434       -ms-transition: all 0.5s ease;
 435        -o-transition: all 0.5s ease;
 436           transition: all 0.5s ease;
 437 }
 438
 439 .entrie h2 a:after {
 440   content: "";
 441   position: absolute;
 442   top: 0;
 443   width: 100%;
 444   height: 100%;
 445   left: 0;
 446 }
 447
 448 .entrie p {
 449   color: #666;
 450   font-size: 0.9em;
 451   line-height: 1.7;
 452 }
 453
 454   .entrie h2 a:first-letter {
 455     text-transform: uppercase;
 456   }
 457
 458 .entrie:hover .tools {
 459   bottom: 0;
 460 }
 461
 462 .entrie .tools {
 463   position: absolute;
 464   bottom: -50px;
 465   left: 0;
 466   width: 100%;
 467   z-index: 10;
 468   padding-right: 0.5em;
 469   text-align: right;
 470   -webkit-transition: all 0.5s ease;
 471      -moz-transition: all 0.5s ease;
 472       -ms-transition: all 0.5s ease;
 473        -o-transition: all 0.5s ease;
 474           transition: all 0.5s ease;
 475 }
 476
 477   .entrie .tools a {
 478     color: #666;
 479     text-decoration: none;
 480     display: block;
 481     padding: 0.4em;
 482   }
 483
 484   .entrie .tools a:hover {
 485     color: #FFF;
 486   }
 487
 488   .entrie .tools li {
 489     display: inline-block;
 490   }
 491
 492 .entrie:nth-child(3n+1) {
 493   margin-left: 0!important;
 494 }
 495
 496 .results {
 497   letter-spacing: -5px;
 498   padding: 0 0 0.5em;
 499 }
 500
 501 .results > * {
 502   display: inline-block;
 503   vertical-align: top;
 504   letter-spacing: normal;
 505   width: 50%;
 506 }
 507
 508 .pagination {
 509   text-align: right;
 510   margin-bottom:50px;
 511 }
 512
 513 .nb-results {
 514   text-align: left;
 515   font-style: italic;
 516   color: #999;
 517 }
 518
 519 .pagination > * {
 520   display: inline-block;
 521   margin-left: 0.5em;
 522 }
 523
 524 .pagination a {
 525   color: #999;
 526   text-decoration: none;
 527 }
 528
 529   .pagination a:hover, .pagination a:focus {
 530     text-decoration: underline;
 531   }
 532
 533 .pagination .disabled {
 534   display: none;
 535 }
 536
 537 /* ==========================================================================
 538   2.1 = "save a link" popup div related styles
 539   ========================================================================== */
 540
 541 #bagit-form {
 542   background: rgba(0,0,0,0.5);
 543   position: absolute;
 544   top: 0;
 545   left: 10em;
 546   z-index: 20;
 547   height: 100%;
 548   width: 100%;
 549   margin: 0;
 550   margin-top: -30%;
 551   padding: 2em;
 552   display: none;
 553   border-left: 1px #EEE solid;
 554 }
 555
 556 #bagit-form form {
 557   background: #FFF;
 558   position: absolute;
 559   top: 0;
 560   left: 0;
 561   z-index: 20;
 562   border: 10px solid #000;
 563   width: 400px;
 564   height: 200px;
 565   /* margin: -150px 0 0 -300px; */
 566   padding: 2em;
 567 }
 568
 569 a#bagit-form-close {
 570   background: #000;
 571   color: #FFF;
 572   padding: 0.2em 0.5em;
 573   text-decoration: none;
 574   display: inline-block;
 575   float: right;
 576   font-size: 0.6em;
 577 }
 578 a#bagit-form-close:hover {
 579   background: #999;
 580   color: #000;
 581 }
 582
 583 .active-current {
 584   background-color: #999;
 585 }
 586
 587 .active-current:after {
 588   content: "";
 589   width: 0;
 590   height: 0;
 591   position: absolute;
 592   border-style: solid;
 593   border-width: 10px;
 594   border-color:  transparent #EEE transparent transparent;
 595   right: 0;
 596   top: 50%;
 597   margin-top: -10px;
 598 }
 599
 600 .opacity03 {
 601   opacity: 0.3;
 602 }
 603
 604 .add-to-wallabag-link-after {
 605   background-color: #000;
 606   color: #fff;
 607   padding: 0 3px 2px 3px;
 608 }
 609
 610 #add-link-result {
 611   font-weight: bold;
 612   margin-top: 10px;
 613 }
 614
 615 /* ==========================================================================
 616   2.2 = "search for articles" popup div related styles
 617   ========================================================================== */
 618 #search-form {
 619   background: rgba(0,0,0,0.5);
 620   position: absolute;
 621   top: 0;
 622   left: 10em;
 623   z-index: 20;
 624   height: 100%;
 625   width: 100%;
 626   margin: 0;
 627   margin-top: -30%;
 628   padding: 2em;
 629   display: none;
 630   border-left: 1px #EEE solid;
 631 }
 632
 633 #search-form form {
 634   background: #FFF;
 635   position: absolute;
 636   top: 0;
 637   left: 0;
 638   z-index: 20;
 639   border: 10px solid #000;
 640   width: 400px;
 641   height: 200px;
 642   /* margin: -150px 0 0 -300px; */
 643   padding: 2em;
 644 }
 645
 646 a#search-form-close {
 647   background: #000;
 648   color: #FFF;
 649   padding: 0.2em 0.5em;
 650   text-decoration: none;
 651   display: inline-block;
 652   float: right;
 653   font-size: 1.2em;
 654 }
 655 a#search-form-close:hover {
 656   background: #999;
 657   color: #000;
 658 }
 659
 660 #submit-search{
 661 margin-left: 4em;
 662 margin-top:1em;
 663 }
 664
 665 /* ==========================================================================
 666    3 = Pictos
 667    ========================================================================== */
 668
 669 @font-face {
 670   font-family: 'icomoon';
 671   src:url('../fonts/icomoon.eot?-s0mcsx');
 672   src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
 673     url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
 674     url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
 675     url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
 676   font-weight: normal;
 677   font-style: normal;
 678 }
 679
 680 .icon span {
 681   position: absolute;
 682   top: -9999px;
 683 }
 684
 685 [class^="icon-"]:before, [class*=" icon-"]:before {
 686   font-family: 'icomoon';
 687   speak: none;
 688   font-style: normal;
 689   font-weight: normal;
 690   font-variant: normal;
 691   text-transform: none;
 692   line-height: 1;
 693
 694   /* Better Font Rendering =========== */
 695   -webkit-font-smoothing: antialiased;
 696   -moz-osx-font-smoothing: grayscale;
 697 }
 698
 699 .icon-flattr:before {
 700   content: "\e800";
 701 }
 702 .icon-mail:before {
 703   content: "\e80a";
 704 }
 705 .icon-up-open:before {
 706   content: "\e80b";
 707 }
 708 .icon-star:before {
 709   content: "\e805";
 710 }
 711 .icon-check:before {
 712   content: "\e804";
 713 }
 714 .icon-link:before {
 715   content: "\e801";
 716 }
 717 .icon-reply:before {
 718   content: "\e806";
 719 }
 720 .icon-menu:before {
 721   content: "\e802";
 722 }
 723 .icon-clock:before {
 724   content: "\e803";
 725 }
 726 .icon-twitter:before {
 727   content: "\e807";
 728 }
 729 .icon-down-open:before {
 730   content: "\e809";
 731 }
 732 .icon-trash:before {
 733   content: "\e80c";
 734 }
 735 .icon-delete:before {
 736   content: "\e600";
 737 }
 738 .icon-power:before {
 739   content: "\e601";
 740 }
 741 .icon-arrow-up-thick:before {
 742   content: "\e602";
 743 }
 744 .icon-rss:before {
 745   content: "\e808";
 746 }
 747
 748 /* ==========================================================================
 749    Icon selected
 750    ========================================================================== */
 751
 752 .icon-star.fav:before {
 753   color: #FFF;
 754 }
 755
 756 /* ==========================================================================
 757    4 = Messages
 758    ========================================================================== */
 759
 760 .messages {
 761   text-align: left;
 762   margin-top: 1em;
 763 }
 764
 765 .messages > * { display: inline-block;}
 766
 767 .closeMessage {
 768   background: #000;
 769   color: #FFF;
 770   padding: 0.2em 0.5em;
 771   text-decoration: none;
 772 }
 773
 774   .closeMessage:hover, .closeMessage:focus {
 775     background: #FFF;
 776     color: #000;
 777   }
 778
 779 .warning {
 780   /* font-size: 3em;
 781   color: #999;
 782   font-style: italic;
 783   position: absolute;
 784   top: 50%;
 785   left: 0;
 786   width: 100%;
 787   text-align: center;
 788   padding-right: 5%;
 789   margin-top: -2em;*/
 790   font-weight: bold;
 791   display: block;
 792   width: 100%;
 793 }
 794
 795 /* ==========================================================================
 796    5 = Article
 797    ========================================================================== */
 798
 799 #article {
 800   width: 70%;
 801   margin-bottom: 3em;
 802   text-align: justify;
 803 }
 804
 805 #article .tags {
 806   margin-bottom: 1em;
 807 }
 808
 809 #article i {
 810   font-style: normal;
 811 }
 812
 813 blockquote {
 814   border:1px solid #999;
 815   background: #FFF;
 816   padding: 1em;
 817   margin: 0;
 818 }
 819
 820 #article h2, #article h3, #article h4 {
 821   text-transform: none;
 822 }
 823
 824 #article h2:after {
 825   content: none;
 826 }
 827
 828 .topPosF {
 829   position: fixed;
 830   right: 20%;
 831   bottom: 2em;
 832   font-size: 1.5em;
 833 }
 834
 835 #article_toolbar {
 836   margin-bottom: 1em;
 837 }
 838
 839 #article_toolbar li {
 840   display: inline-block;
 841 }
 842
 843 #article_toolbar a {
 844   background: #000;
 845   padding: 0.3em 0.5em 0.2em;
 846   color: #FFF;
 847   text-decoration: none;
 848 }
 849
 850   #article_toolbar a:hover, #article_toolbar a:focus {
 851     background: #999;
 852   }
 853
 854 .shaarli:before {
 855   content: "*";
 856 }
 857
 858 .return {
 859   text-decoration: none;
 860   margin-top: 1em;
 861   display: block;
 862 }
 863
 864 .return:before {
 865   margin-right: 0.5em;
 866 }
 867
 868 .notags {
 869   font-style: italic;
 870   color: #999;
 871 }
 872
 873 .icon-rss {
 874   background: #000;
 875   color: #FFF;
 876   padding: 0.2em 0.5em;
 877 }
 878
 879 .icon-rss:before {
 880   position: relative;
 881   top: 2px;
 882 }
 883
 884 .list-tags li {
 885   margin-bottom: 0.5em;
 886 }
 887
 888 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
 889   background: #FFF;
 890   color: #000;
 891   text-decoration: none;
 892 }
 893
 894 .list-tags a {
 895   text-decoration: none;
 896 }
 897
 898 .list-tags a:hover, .list-tags a:focus {
 899   text-decoration: underline;
 900 }
 901
 902 /* ==========================================================================
 903    6 = Media Queries
 904    ========================================================================== */
 905
 906 @media screen and (max-width: 1050px) {
 907   .entrie {
 908     width: 49%;
 909   }
 910   .entrie:nth-child(3n+1) {
 911     margin-left: 1.5%;
 912   }
 913   .entrie:nth-child(2n+1) {
 914     margin-left: 0;
 915   }
 916 }
 917
 918 @media screen and (max-width: 900px) {
 919   #article {
 920     width: 80%;
 921   }
 922   .topPosF {
 923     right: 2.5em;
 924   }
 925 }
 926
 927 @media screen and (max-width: 700px) {
 928   .entrie {
 929     width: 100%;
 930     margin-left: 0;
 931   }
 932   #display-mode {
 933     display: none;
 934   }
 935 }
 936
 937 @media screen and (max-width: 500px) {
 938   .entrie {
 939     width: 100%;
 940     margin-left: 0;
 941   }
 942   body > header {
 943     background: #333;
 944     position: fixed;
 945     top: 0;
 946     width: 100%;
 947     height: 3em;
 948     z-index: 11;
 949   }
 950   #links li:last-child {
 951     position: static;
 952     width: auto;
 953   }
 954   #links li:last-child a:before {
 955     content: none;
 956   }
 957   .logo {
 958     width: 1.5em;
 959     height: 1.5em;
 960     left: 0;
 961     top: 0;
 962   }
 963   .login > header {
 964     position: static;
 965   }
 966   .login form {
 967     width: 100%;
 968     position: static;
 969     margin-left: 0;
 970   }
 971   .login .logo {
 972     width: auto;
 973     height: auto;
 974     top: 0.5em;
 975     width: 75px;
 976     height: 75px;
 977     margin-left: -37.5px;
 978   }
 979   .desktopHide {
 980     display: block;
 981     position: fixed;
 982     z-index: 20;
 983     top: 0;
 984     right: 0;
 985     border:0;
 986     width: 2.5em;
 987     height: 2.5em;
 988     cursor: pointer;
 989     background: #999;
 990     font-size: 1.2em;
 991   }
 992     .desktopHide:hover, .desktopHide:focus {
 993       background: #FFF;
 994     }
 995   #links {
 996     display: none;
 997     width: 100%;
 998     height: auto;
 999     padding-top: 3em;
1000   }
1001   footer  {
1002     position: static;
1003     margin-right: 3em;
1004   }
1005   #main {
1006     margin-left: 1.5em;
1007     padding-right: 1.5em;
1008     position: static;
1009   }
1010   #article_toolbar .topPosF {
1011     display: none;
1012   }
1013
1014   #article {
1015     width: 100%;
1016   }
1017
1018   #article h1 {
1019     font-size: 1.5em;
1020   }
1021   #article_toolbar a {
1022     padding: 0.3em 0.4em 0.2em;
1023   }
1024
1025   #display-mode {
1026     display: none;
1027   }
1028
1029   #bagit-form {
1030     left: 0;
1031   }
1032 }