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