koha-tmpl/opac-tmpl/ccsr/en/css/colors.css

   1 /* ================================
   2  * !Main
   3  * ================================*/
   4
   5 div.clear {
   6     clear: both;
   7 }
   8
   9 body {
  10     min-width:1000px;
  11     font-family: "Lucida Grande", Arial;
  12     padding:0;
  13     background-color : #eaeae6;
  14 }
  15
  16 #container {
  17     background: #fff;
  18     border:1px solid #d2d2cf;
  19     -webkit-border-radius: 8px;
  20     -moz-border-radius: 8px;
  21     border-radius: 8px;
  22     margin:0 20px;
  23     padding: 10px;
  24     overflow: hidden;
  25 }
  26
  27 a:link,
  28 a:visited {
  29     color: #007fae;
  30 }
  31 a:hover {
  32     color: #00a5e2;
  33 }
  34
  35 #container #ctn_lt {
  36     padding-left: 15px;
  37 }
  38
  39 #opacnav {
  40     width:240px;
  41 }
  42
  43 #opacmainuserblock, #news {
  44     margin-left:7em;
  45 }
  46
  47 /* ================================
  48  * !Header
  49  * ================================*/
  50
  51 #header-wrapper {
  52     background: none;
  53 }
  54
  55 #opac-main-search {
  56     background: none;
  57     border: none;
  58     display: table;
  59     margin: 40px 0 0 !important;
  60     padding: 0.7em 0 0 0.5em;
  61     width: 100%;
  62 }
  63 *:first-child+html #opac-main-search {
  64     display: block;
  65 }
  66 #opac-main-search a.logo {
  67     display: table-cell;
  68     padding: 8px 0 0 13px;
  69     vertical-align: top;
  70     width: 145px;
  71 }
  72
  73 #opac-main-search #fluid {
  74     display: table-cell;
  75     margin: 0;
  76     padding: 0;
  77     position: relative;
  78     vertical-align: top;
  79 }
  80
  81 #opac-main-search div#libraryname {
  82     display: table-cell;
  83     float: none;
  84     vertical-align: top;
  85     overflow: hidden;
  86     text-align: center;
  87     padding: 0 11px 17px;
  88     width: 128px;
  89 }
  90
  91 /* IE 7 Hack */
  92 *:first-child+html #opac-main-search a.logo,
  93 *:first-child+html #opac-main-search #fluid,
  94 *:first-child+html #opac-main-search div#libraryname {
  95     display: block;
  96     float: left;
  97     height: 100px;
  98 }
  99 *:first-child+html #opac-main-search #fluid {
 100     width: 800px;
 101 }
 102 #opac-main-search div#libraryname h1 {
 103     background-repeat: no-repeat;
 104     background-position: 0 0;
 105     display: block;
 106     margin: 0;
 107     position: relative;
 108 }
 109 #opac-main-search div#libraryname h1 img {
 110     display: block;
 111     margin: 0 0 7px;
 112     max-height: 80px;
 113 }
 114
 115 #opac-main-search div#libraryname span#official-website {
 116     background: url("../../images/arrow-right-grey-logo.png") no-repeat scroll 0 50%;
 117     font: 11px/14px Arial;
 118     padding: 0 0 0 10px;
 119 }
 120 #opac-main-search div#libraryname span#official-website a {
 121     color: #696965;
 122     text-decoration: none;
 123 }
 124 #opac-main-search div#libraryname span#official-website a:hover {
 125     text-decoration: underline;
 126 }
 127
 128
 129 /* search form */
 130
 131 form#searchform {
 132     background: #a7a7a2 url("../../images/bg-search-bar.png") repeat-x scroll 0 0;
 133     -webkit-border-radius: 8px;
 134     -moz-border-radius: 8px;
 135     border-radius: 8px;
 136     display: block;
 137     padding: 12px 10px;
 138     position: relative;
 139 }
 140
 141 form#searchform label {
 142     display: none;
 143 }
 144
 145 form.single-library .input-wrapper {
 146     margin: 0 237px 0 0;
 147 }
 148 form.multi-libraries .input-wrapper {
 149     margin: 0 416px 0 0;
 150 }
 151 form#searchform .input-wrapper input[type="text"] {
 152     background: #fff;
 153     border: 1px solid #A0A09A;
 154     -webkit-border-radius: 8px;
 155     -moz-border-radius: 8px;
 156     border-radius: 8px;
 157     color: #868684;
 158     font-size: 12px !important;
 159     padding: 8px 8px 9px;
 160     width: 100% !important;
 161 }
 162
 163 form#searchform select {
 164     left: -9999em;
 165     position: absolute;
 166 }
 167
 168 form.multi-libraries #filters .jqTransformSelectWrapper {
 169     position: absolute;
 170     right: 229px;
 171     top: 12px;
 172 }
 173
 174 form.single-library  #filters .jqTransformSelectWrapper,
 175 form.multi-libraries #libraries .jqTransformSelectWrapper {
 176     position: absolute;
 177     right: 50px;
 178     top: 12px;
 179 }
 180
 181 form#searchform input[type="submit"] {
 182     background: #619bb5 url("../../images/btn-search-bar.png") no-repeat 50% 50%;
 183     border: 1px solid #adadaa;
 184     -webkit-border-radius: 5px;
 185     -moz-border-radius: 5px;
 186     border-radius: 5px;
 187     color: #fff;
 188     cursor: pointer;
 189     font-size: 0;
 190     font-weight: normal;
 191     height: 33px;
 192     margin-left: 4px;
 193     margin-top: 0;
 194     padding: 0;
 195     position: absolute;
 196     right: 10px;
 197     top: 12px;
 198     width: 34px;
 199 }
 200
 201 #moresearches {
 202     margin: 7px 10px 0;
 203 }
 204 #moresearches a:link,
 205 #moresearches a:visited {
 206     background: url("../../images/arrow-right-grey-11x6.png") no-repeat scroll left center transparent;
 207     color: #007fae;
 208     font-size: 12px;
 209     font-weight: normal;
 210     margin-right: 12px;
 211     padding-left: 12px;
 212     text-decoration: none;
 213 }
 214 #moresearches a:hover {
 215     color: #00a5e2;
 216 }
 217
 218 #moresearches span.pipe {
 219     display: none;
 220 }
 221
 222 .transparent {
 223     zoom: 1;
 224     filter: alpha(opacity=50);
 225     opacity: 0.5;
 226 }
 227
 228 div#top-bar {
 229     z-index: 9999999;
 230     position: fixed;
 231     top:0;
 232     left:0;
 233     margin: 0;
 234     padding: 0;
 235     width: 100%;
 236     height: 29px;
 237     background: #454543 url("../../images/img_bg_header.png") repeat-x 0 0;
 238 }
 239
 240
 241 ul#menu-left {
 242     margin: 0 0 0 30px;
 243     padding: 0;
 244     display: block;
 245     float: left;
 246     width: auto;
 247     height: 29px;
 248 }
 249 ul#menu-left li {
 250     margin: 0;
 251     padding: 0 8px 0 10px;
 252     float: left;
 253     height: 29px;
 254     list-style-type: none;
 255     background: url("../../images/img_sep_header.png") no-repeat left top;
 256 }
 257 ul#menu-left li#listsmenulink {
 258     padding: 1px 0 0 12px;
 259     border: none;
 260 }
 261 ul#menu-left #listsmenulink:hover {
 262     background: url("../../images/img_sep_header.png") no-repeat left top !important;
 263 }
 264 ul#menu-left li a#cartmenulink,
 265 ul#menu-left li#listsmenulink a {
 266     margin: 2px 0 0 0;
 267     color: #9EE1FF;
 268     font-family: Arial;
 269     font-size: 13px;
 270     font-weight: bold;
 271     text-decoration: none;
 272     border: none;
 273 }
 274 ul#menu-left li a#cartmenulink:hover,
 275 ul#menu-left li#listsmenulink a:hover {
 276     color: #9EE1FF;
 277 }
 278
 279 ul#menu-left li#listsmenulink a {
 280     padding: 2px 0 0;
 281 }
 282
 283 ul#menu-left li a#cartmenulink span,
 284 ul#menu-left li#listsmenulink a span {
 285     margin: 0;
 286     padding: 0;
 287 }
 288 ul#menu-left li a#cartmenulink span#basketcount {
 289     margin: 0 0 0 5px;
 290     padding: 0;
 291     background: none;
 292 }
 293 ul#menu-left li a#cartmenulink span img,
 294 ul#menu-left li#listsmenulink a span img {
 295     display: none;
 296 }
 297
 298 ul#menu-left li a#cartmenulink {
 299     padding: 0 0 0 30px;
 300     background: url("../../images/img_toolbar-button-cart.png") no-repeat left center;
 301 }
 302 ul#menu-left li#listsmenulink a {
 303     padding: 0 0 0 20px;
 304     background: url("../../images/img_toolbar-button-lists.png") no-repeat left center;
 305 }
 306
 307 div#cartDetails,
 308 div#listsmenu {
 309     z-index: 9999999;
 310     top: 29px !important;
 311     margin: 0;
 312     padding: 10px !important;
 313     background: #649EB8;
 314     border-left: 1px solid #A0A09A !important;
 315     border-right: 1px solid #A0A09A !important;
 316     border-bottom: 1px solid #A0A09A !important;
 317     -webkit-border-radius: 0 0 7px 7px;
 318     -moz-border-radius: 0 0 7px 7px;
 319     border-radius: 0 0 7px 7px;
 320 }
 321 div#cartDetails {
 322     margin-left: -9px;
 323 }
 324
 325
 326 #members {
 327     background: none;
 328     margin: 0;
 329     padding: 0;
 330     float: right;
 331 }
 332 #members ul {
 333     margin: 0;
 334     margin-right: 20px;
 335     float: right;
 336 }
 337 #members li {
 338     background: none;
 339     margin:0;
 340     float: left;
 341     border-right: none;
 342 }
 343 #members ul li a {
 344     background: url("../../images/img_sep_header.png") no-repeat scroll right top transparent;
 345     color: #9EE1FF;
 346     display: block;
 347     font-family: Arial;
 348     font-size: 13px;
 349     height: 22px;
 350     padding: 7px 14px 0 3px;
 351     text-decoration: none;
 352 }
 353
 354 #members li span.members {
 355     color:#fff;
 356     padding:7px 14px 0 9px;
 357     float: left;
 358     background: url(../../images/img_sep_header.png) no-repeat right top;
 359     height: 22px;
 360 }
 361
 362 #members li span.members a {
 363     display:inline;
 364     background: none;
 365     padding: 0;
 366 }
 367
 368 #members li a {
 369     padding:7px 14px 0 9px;
 370 }
 371
 372 #members li a.logout {
 373     color:#ff825b;
 374     font-weight: normal;
 375     padding:7px 14px 0 9px;
 376 }
 377
 378 div#listsmenu {
 379     margin-left: 1px;
 380 }
 381 div#listsmenu h4 {
 382     margin: 0 !important;
 383     color: #fff;
 384 }
 385 div#listsmenu ul li {
 386     margin: 0 !important;
 387     padding: 0 !important;
 388     height: auto !important;
 389     background: none !important;
 390 }
 391 div#listsmenu ul li {
 392     float: none !important;
 393     margin: 0 !important;
 394     padding: 0 !important;
 395     list-style-type: none !important;
 396     background: none !important;
 397 }
 398 div#listsmenu a {
 399     margin: 0 !important;
 400     padding: 0 !important;
 401     color: #fff !important;
 402     font-weight: normal  !important;
 403     text-decoration: none;
 404     background: none !important;
 405 }
 406 div#listsmenu a:hover {
 407     text-decoration: underline;
 408 }
 409
 410 #cartDetails,#cartUpdate,#holdDetails,#listsDetails {
 411     background-color : #FFF;
 412     border: 1px solid #739acf;
 413     color : #fff;
 414     display : none;
 415     margin : 0;
 416     padding : 10px;
 417     text-align : center;
 418     width : 180px;
 419     box-shadow: 1px 1px 3px #666;
 420     -moz-box-shadow: 1px 1px 3px #666;
 421     -webkit-box-shadow: 1px 1px 3px #666;
 422
 423 }
 424
 425 #cartmenulink, #listsmenulink {
 426     display : block;
 427     position : relative;
 428     background : #aaa;
 429     padding : 5px;
 430     float : left;
 431     color : #333;
 432     text-decoration : none;
 433     cursor : pointer;
 434 }
 435
 436 #cartmenulink {
 437     background : #98CB58;
 438     color : #336600;
 439     font-size : 105%;
 440 }
 441
 442 #cartmenulink[class], #listsmenulink[class] {
 443     background-image : ;
 444     background-position : ;
 445 }
 446
 447 #cartmenulink span, #listsmenulink span {
 448     padding : 0 0 5px 10px;
 449     background-position:;
 450     left:;
 451     margin-bottom:;
 452 }
 453
 454 #cartmenulink *, #listsmenulink * {
 455     background-image : none;
 456 }
 457
 458 #cartmenulink span#basketcount span {
 459     color:#fff;
 460     margin:0 0 0 5px;
 461     padding:0;
 462     background:none;
 463     font-size:15px;
 464     font-weight:bold;
 465 }
 466
 467
 468 /* ================================
 469  * !jQtransform
 470  * ================================*/
 471
 472 .jqTransformSelectWrapper {
 473     background: none repeat scroll 0 0 #FFFFFF;
 474     border: 1px solid #A0A09A;
 475     border-radius: 8px 8px 8px 8px;
 476     color: #252525;
 477     font-family: Arial,Helvetica,sans-serif;
 478     font-size: 13px;
 479     float: left;
 480     margin-left: 5px;
 481     padding: 0;
 482     position: relative;
 483     width: 171px !important;
 484 }
 485 .jqTransformSelectWrapper div {
 486     height: 19px;
 487     padding: 9px 5px 4px;
 488     text-indent: 4px;
 489 }
 490 .jqTransformSelectWrapper div span {
 491     cursor: pointer;
 492     float: left;
 493 }
 494
 495 .jqTransformSelectWrapper div a {
 496     background: url("../../images/img_select-puce.png") no-repeat scroll 0 50% transparent;
 497     display: block;
 498     height: 26px;
 499     outline: medium none;
 500     position: absolute;
 501     right: 3px;
 502     top: 3px;
 503     width: 25px;
 504 }
 505
 506 .jqTransformSelectWrapper ul {
 507     background: none repeat scroll 0 0 #FFFFFF;
 508     border: 1px solid #A0A09A;
 509     -webkit-border-radius: 7px;
 510     -moz-border-radius: 7px;
 511     border-radius: 7px;
 512     height: auto !important;
 513     padding: 5px 0 !important;
 514     position: absolute;
 515     width: 100% !important;
 516 }
 517 .jqTransformSelectWrapper ul li {
 518     background: none repeat scroll 0 0 transparent !important;
 519     list-style: none outside none !important;
 520     margin: 0 !important;
 521     padding: 0 5px !important;
 522 }
 523 .jqTransformSelectWrapper ul li a {
 524     color: #252525 !important;
 525     display: block;
 526     font-family: Arial,Helvetica,sans-serif;
 527     font-size: 13px;
 528     font-weight: normal;
 529     padding-left: 5px;
 530     text-decoration: none;
 531 }
 532 .jqTransformSelectWrapper ul li a:hover {
 533     background: none repeat scroll 0 0 #F5F5F4;
 534 }
 535
 536
 537 /* ================================
 538  * !Footer
 539  * ================================*/
 540
 541 #main_footer {
 542     padding:0 30px;
 543     font-family:"Lucida Grande", Arial;
 544     margin-bottom: 65px;
 545 }
 546
 547 #main_footer .colleft {
 548     float:left;
 549     margin-top:8px;
 550 }
 551
 552 #main_footer .colleft ul {
 553     padding:0;
 554 }
 555
 556 #main_footer .colleft li {
 557     display:inline;
 558     list-style:none;
 559 }
 560
 561 #main_footer .colleft li.first {
 562     background:url(../../images/img_sep_footer.png) no-repeat right top;
 563     padding-right: 8px;
 564     margin-right: 10px;
 565 }
 566
 567 #main_footer .colleft li a {
 568     color:#4f91b0;
 569     text-decoration:none;
 570     font-size:14px;
 571     font-weight: normal;
 572 }
 573 #main_footer .colleft li a:hover {
 574     color:#00a5e2;
 575 }
 576
 577 #main_footer .colleft .copy {
 578     font-size:12px;
 579     color:#5f5f5f;
 580     margin-top:10px;
 581 }
 582
 583 #main_footer .colright {
 584     float:right;
 585     width: auto;
 586 }
 587
 588 #main_footer .colright .koha {
 589     float:left;
 590     background: url(../../images/img_logo_koha.jpg) no-repeat bottom right;
 591     width: 168px;
 592     height: 40px;
 593 }
 594 #main_footer .colright .koha a {
 595     display:block;
 596     padding:0;
 597     width: 168px;
 598     height: 40px;
 599     color:#5f5f5f;
 600     text-decoration: none;
 601     font-weight: normal;
 602 }
 603
 604 div#changelanguage {
 605     padding-bottom: 2em;
 606 }
 607
 608
 609 /* ================================
 610  * !Page : Search results
 611  * ================================*/
 612
 613 /* breacrumbs */
 614
 615 body#results #breadcrumbs {
 616     margin: -1px 0 17px 2px;
 617     padding: 0;
 618 }
 619 body#results #breadcrumbs p {
 620     font: normal 11px/11px Arial;
 621     margin: 0;
 622     padding: 0;
 623 }
 624 body#results #breadcrumbs p a {
 625     color: #007fae;
 626     display: inline;
 627     text-decoration: none;
 628 }
 629 body#results #breadcrumbs p a:hover {
 630     color: #00a5e2;
 631 }
 632
 633 body#results #breadcrumbs p a img {
 634     vertical-align: middle;
 635 }
 636
 637 body#results #breadcrumbs p .rsaquo {
 638     color: #8d8d89;
 639     font-size: 20px;
 640     line-height: 11px;
 641     vertical-align: sub;
 642 }
 643
 644 /* IE7 Hack */
 645 *:first-child+html body#results #breadcrumbs p span {
 646     display: inline;
 647     font-size: 11px;
 648     font-weight: bold;
 649     vertical-align: top;
 650 }
 651
 652 body#results #breadcrumbs p strong {
 653     color: #5f5f5f;
 654 }
 655
 656 .nb_results {
 657     font-weight: bold;
 658 }
 659
 660 /* search-facets */
 661
 662 body#results #search-facets {
 663     border: none;
 664 }
 665 body#results #search-facets h4 {
 666     background: none;
 667     border-bottom: 1px solid #E8E8E8;
 668     font-size: 90%;
 669     margin: 0 9px 10px 0;
 670     padding: 13px 0 7px;
 671     text-align: left;
 672 }
 673
 674 body#results #search-facets a {
 675     color: #007fae;
 676 }
 677 body#results #search-facets a:hover {
 678     color: #00a5e2;
 679 }
 680
 681
 682 /* userresults */
 683
 684 body#results div#userresults {
 685     border-left: 1px solid #c8c8c4;
 686     padding: 0 20px 0;
 687 }
 688
 689
 690 /* searchresults */
 691
 692 body#results tr {
 693     border: none;
 694 }
 695 body#results tr td {
 696     background: #fff url("../../images/bg-result-light.png") repeat-x 0 0;
 697     border-top: 1px solid #c8c8c4;
 698     border-bottom: none;
 699     height: 115px;
 700     padding-top: 15px;
 701 }
 702
 703 body#results .searchresults td.resultscontrol {
 704     background: #ddddda url("../../images/bg-results-control.png") repeat-x 0 100%;
 705     -moz-border-radius-topleft: 6px;
 706     -moz-border-radius-topright: 6px;
 707     -moz-border-radius-bottomright: 0px;
 708     -moz-border-radius-bottomleft: 0px;
 709     -webkit-border-radius: 6px 6px 0px 0px;
 710     border-radius: 6px 6px 0px 0px;
 711     border: none;
 712     border-bottom: 1px solid #b0b0ae;
 713     padding: 2px 7px 6px;
 714     height: auto;
 715 }
 716
 717
 718 /* Navigation */
 719
 720 body#results a.nav:link, div.pages a:link {
 721     background-color: #EEEEEE;
 722     border: 1px solid #CCCC99;
 723     color: #007FAE;
 724     font-weight: bold;
 725     padding: 1px 5px;
 726     text-decoration: none;
 727 }
 728 body#results a.nav:hover, div.pages a:hover {
 729     color: #00A5E2;
 730 }
 731
 732
 733
 734 /* ================================
 735  * !Page : Opac detail
 736  * ================================*/
 737
 738 body#opac-detail .nav_results ul.pg_menu {
 739     display: table;
 740     height: auto;
 741     overflow: hidden;
 742     padding: 0;
 743     width: 100%;
 744 }
 745 body#opac-detail .nav_results ul.pg_menu li {
 746     display: table-cell;
 747     float: none;
 748 }