BookReader/BookReader.css

   1 body {
   2  background-color: #939598;
   3  font-size: 67.5%;
   4  margin: 0;
   5  padding: 0;
   6 }
   7 h3 {
   8   font-size: 20px;
   9   font-family:  "News Gothic MT","Trebuchet MS",Geneva,Helvetica,sans-serif;
  10   font-weight: 700;
  11   color: #dedede;
  12 }
  13 a {
  14     outline: none;
  15 }
  16 #BookReader {
  17  position:absolute;
  18  font-family: arial, sans-serif;
  19  left:0;
  20  right:0;
  21  top:0;
  22  bottom:0;
  23 }
  24 #BRtoolbar {
  25     position: relative;
  26     top: 0;
  27     left: 0;
  28     height: 40px;
  29     padding: 0;
  30     width: 100%;
  31     z-index: 100;
  32     background-color: #e2dcc5;
  33     overflow: hidden;
  34 }
  35 #BRtoolbar .label {
  36     font-size: 1.1em;
  37     color: #999;
  38 }
  39 #BRtoolbar a {
  40     color: #ccc;
  41     text-decoration: underline;
  42 }
  43 #BRtoolbarbuttons {
  44     float: right;
  45 }
  46 #BRcontainer {
  47     top:5px;
  48     bottom:5px;
  49     width:100%;
  50     z-index: 1;
  51     overflow-x:auto;
  52     overflow-y:scroll;
  53     position:absolute;
  54     background-color: #939598;
  55 }
  56
  57 #BRpageview {
  58     background-color: #939598;
  59 }
  60
  61 .BRpagediv1up {
  62     background-color: #939598;
  63     overflow:hidden;
  64     cursor: move;
  65 }
  66
  67 .BRpagedivthumb {
  68     background-color: #939598;
  69     overflow:hidden;
  70 }
  71
  72 .BRpagedivthumb a {
  73     border: 0;
  74 }
  75
  76 .BRpagedivthumb img {
  77     border: 0;
  78 }
  79
  80 /* Must come after .BRpagedivthumb rules in order to override them */
  81 .BRpagedivthumb_highlight {
  82     background-color: #939598;
  83     overflow:hidden;
  84 }
  85
  86 .BRpagediv2up {
  87     background-color: rgb(234, 226, 205);
  88     overflow:hidden;
  89 }
  90
  91 #BRbookcover {
  92     /* border: 1px solid rgb(68, 25, 17); */
  93     /* background-color: #663929; */
  94     position: absolute;
  95     background-image: url(images/back_pages.png);
  96     -moz-box-shadow: 1px 0 3px #000;
  97     -webkit-box-shadow: 1px 0 3px #000;
  98     /* -moz-border-radius: 6px; */
  99     /* -webkit-border-radius: 6px; */
 100 }
 101
 102 .BRpageimage {
 103     background-color: rgb(234, 226, 205);
 104 }
 105
 106 /* Disable selection on Firefox and WebKit */
 107 .BRnoselect {
 108     -moz-user-select: none;
 109     -webkit-user-select: none;
 110     -webkit-user-drag: none;
 111 }
 112
 113 .BRleafEdgeR {
 114     /*
 115     border-style: solid solid solid none;
 116     border-color: rgb(51, 51, 34);
 117     border-width: 1px 1px 1px 0px;
 118     */
 119     background: transparent url(images/back_pages.png) repeat scroll 0% 0%;
 120     position: absolute;
 121 }
 122
 123 .BRleafEdgeL {
 124     /*
 125     border-style: solid none solid solid;
 126     border-color: rgb(51, 51, 34);
 127     border-width: 1px 0px 1px 1px;
 128     */
 129     /* background: transparent url(images/left_edges.png) repeat scroll 0% 0%; */
 130     background: transparent url(images/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
 131     position: absolute;
 132 }
 133
 134 .BRleafEdgeTmp {
 135     border-style: solid none solid solid;
 136     border-color: rgb(51, 51, 34);
 137     border-width: 1px 0px 1px 1px;
 138     /* background: transparent url(images/left_edges.png) repeat scroll 0% 0%; */
 139     background: transparent url(images/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
 140     position: absolute;
 141 }
 142
 143 #BRbookspine {
 144     /* border: 1px solid rgb(68, 25, 17); */
 145     background-color: rgb(68, 25, 17);
 146     position: absolute;
 147 }
 148
 149 .BookReaderSearchHilite {
 150     opacity: 0.20;
 151     filter: alpha(opacity = 20);
 152     background-color: #00f;
 153     position:absolute;
 154 }
 155
 156 .hidden {
 157   display: none;
 158 }
 159
 160 .BRpageform {
 161     display: inline;
 162 }
 163 #BRpagenum {
 164     border: none;
 165     background-color: #939598;
 166     color: #ccc;
 167     font-family: arial, sans-serif;
 168     font-size: 12px;
 169     font-weight: 700;
 170 }
 171 #BRreturn {
 172     /* display: block; */
 173     /* float: left; */
 174     /* margin: 0 10px 0 5px; */
 175     font-family: "Lucida Grande","Arial",sans-serif;
 176     color: #333;
 177     height: 20px;
 178 }
 179 #BRreturn span {
 180     font-size: 11px;
 181     display: block;
 182     height: 12px;
 183     padding-top: 3px;
 184 }
 185 #BRreturn a {
 186     font-size: 14px;
 187     display: block;
 188     color: #036daa;
 189     height: 18px;
 190     overflow: hidden;
 191 }
 192 .BRicon {
 193     display: block;
 194     float: left;
 195     width: 40px;
 196     height: 40px;
 197     padding: 0;
 198     margin: 0;
 199     vertical-align: middle;
 200     border: none;
 201     cursor: pointer;
 202     background-color: transparent;
 203     background-image: url(images/BRicons.png);
 204     background-repeat: no-repeat;
 205 }
 206
 207 .BRicon.logo {background-position:0 0;}
 208 .BRicon.info {background-position:-40px 0;}
 209 .BRicon.info:hover {background-position:-80px 0;}
 210 .BRicon.share {background-position:-120px 0;}
 211 .BRicon.share:hover {background-position:-160px 0;}
 212 .BRicon.read {background-position:-200px 0;}
 213 .BRicon.read:hover {background-position:-240px 0;}
 214 .BRicon.unread {background-position:-280px 0;}
 215 .BRicon.unread:hover {background-position:-320px 0;}
 216 .BRicon.full {background-position:-360px 0;}
 217 .BRicon.full:hover {background-position:-400px 0;}
 218 .BRicon.book_left {background-position:-440px 0;}
 219 .BRicon.book_left:hover {background-position:-480px 0;}
 220 .BRicon.book_right {background-position:-520px 0;}
 221 .BRicon.book_right:hover {background-position:-560px 0;}
 222 .BRicon.zoom_out {background-position:-600px 0;}
 223 .BRicon.zoom_out:hover {background-position:-640px 0;}
 224 .BRicon.zoom_in {background-position:-680px 0;}
 225 .BRicon.zoom_in:hover {background-position:-720px 0;}
 226 .BRicon.play {background-position:-760px 0;}
 227 .BRicon.play:hover {background-position:-800px 0;}
 228 .BRicon.pause {background-position:-840px 0;}
 229 .BRicon.pause:hover {background-position:-880px 0;}
 230 .BRicon.twopg {background-position:-920px 0;}
 231 .BRicon.twopg:hover {background-position:-960px 0;}
 232 .BRicon.onepg {background-position:-1000px 0;}
 233 .BRicon.onepg:hover {background-position:-1040px 0;}
 234 .BRicon.thumb {background-position:-1080px 0;}
 235 .BRicon.thumb:hover {background-position:-1120px 0;}
 236 .BRicon.fit {background-position:-1160px 0;}
 237 .BRicon.fit:hover {background-position:-1200px 0;}
 238
 239
 240 a.logo {
 241     display: block;
 242     float: left;
 243     width: 40px;
 244     height: 40px;
 245     margin: 0 5px;
 246     background: transparent url(images/icon_home.png) no-repeat 0 0;
 247 }
 248 a.popOff {
 249     position: absolute;
 250     top: 5px;
 251     right: 5px;
 252     width: 24px;
 253     height: 24px;
 254     background-image: url(images/BRicons.png);
 255     background-color: transparent;
 256     background-repeat: no-repeat;
 257     background-position: -1050px 0;
 258 }
 259 a.popOff:hover {
 260     background-position: -1100px 0;
 261 }
 262 a.popOff span {
 263     position: absolute;
 264     left: -10000px;
 265 }
 266
 267 form#booksearch {
 268     float: left;
 269     margin-right: 10px;
 270 }
 271 form#booksearch input[type=search] {
 272     min-width: 16em;
 273     height: 22px;
 274     line-height: 22px;
 275     font-family: "Arial", sans-serif;
 276     font-size: 13px;
 277     -webkit-appearance: textfield;
 278     -moz-appearance: textfield;
 279     appearance: field;
 280     margin: 9px 0 0 0;
 281     padding: 0;
 282     border: 1px inset #ccc;
 283     outline: none;
 284 }
 285 form#booksearch button {
 286     width: 30px;
 287     height: 24px;
 288     line-height: 24px;
 289     border: none;
 290     background-color: #000;
 291     text-align: center;
 292     color: #fff;
 293     font-family: "News Gothic MT","Trebuchet MS",Geneva,Helvetica,sans-serif;
 294     font-weight: 700;
 295     font-size: 11px;
 296     text-transform: uppercase;
 297     margin: 10px 0 0 5px;
 298     -webkit-border-radius: 3px;
 299     -moz-border-radius: 3px;
 300     border-radius: 3px;
 301 }
 302
 303 .BRlogotype {
 304     float:left;
 305     font-weight: bold;
 306     height: 25px;
 307     line-height: 25px;
 308     vertical-align: middle;
 309 }
 310
 311 a.BRwhite               { color: #fff }
 312 a.BRwhite:hover         { text-decoration: none; }
 313 a.BRwhite:visited       { color: #fff }
 314
 315 a.BRblack           { color: #000; }
 316 a.BRblack:hover     { text-decoration: none; }
 317 a.BRblack:visited   { color: #000; }
 318
 319 a.BRgrey           { color: #999; }
 320 a.BRgrey:hover     { text-decoration: none; }
 321 a.BRgrey:visited   { color: #666; }
 322
 323 .BRnavlinks {
 324     float:right;
 325     padding: 0 20px 0 0;
 326     margin: 0;
 327     height: 25px;
 328     line-height: 25px;
 329     vertical-align: middle;
 330 }
 331
 332 /* thumnbail view, from Rebecca's demo */
 333 .BRpdstatus-footer {
 334     position:absolute;
 335     height: 65px;
 336     bottom: 25px;
 337     width: 100%;
 338     background-color: #222;
 339     text-align: right;
 340     padding: 0px 0px 0px 0px;
 341 }
 342
 343 .BRwidgetlabel {
 344     color: #919070;
 345     padding: 8px 8px 4px 8px;
 346     font-family: verdana, arial, helvetica, sans-serif;
 347     font-size: 10px;
 348     float: left;
 349 }
 350
 351 .BRfliparea {
 352     background-image: url(images/transparent.png); # Required to capture mouse on IE
 353 }
 354
 355 .BRtwoPagePopUp {
 356     padding: 6px;
 357     position: absolute;
 358     font-family: Arial, sans-serif;
 359     font-size: 11px;
 360     color: white;
 361     background-color: #939598;
 362     opacity: 0.85,
 363     -webkit-border-radius: 4px;
 364     -moz-border-radius: 4px;
 365     border-radius: 4px;
 366     white-space: nowrap;
 367 }
 368
 369 /* COLORBOX POP-UP */
 370
 371 #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;}
 372 #cboxOverlay{position:fixed; width:100%; height:100%;background:#000;opacity:0.75;filter:Alpha(Opacity=75);}
 373 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 374 #cboxContent{position:relative;}
 375 #cboxLoadedContent{overflow:visible!important;}
 376 #cboxLoadedContent iframe{display:block;border:0;}
 377 #cboxTitle{margin:0;display:none!important;}
 378 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:25px; left:25px; width:100%;}
 379 #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
 380 #cboxClose{display:none!important;}
 381
 382 #colorBox{}
 383     #cboxContent{background:#fff;padding:0;border:10px solid #615132;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;-moz-box-shadow: 1px 3px 10px #000;-webkit-box-shadow: 1px 3px 10px #000;box-shadow: 1px 3px 10px #000;}
 384         #cboxLoadedContent{background:#fff;margin:0;}
 385         #cboxLoadingOverlay{background:transparent;}
 386 .BRfloat * {
 387     margin: 0;
 388     padding: 0;
 389 }
 390 .BRfloat {
 391     position: relative;
 392     background: #fff;
 393     text-align: left;
 394     min-width: 600px;
 395     font-family: "Lucida Grande", "Verdana", "Arial", sans-serif;
 396     color: #000;
 397 }
 398 .BRfloat a {
 399     color: #036daa;
 400 }
 401 .BRfloat a:hover {
 402     color: #35672e;
 403 }
 404 .BRfloat a.title {
 405     color: #000;
 406     text-decoration: none;
 407 }
 408 .BRfloat a.title:hover {
 409     color: #036daa;
 410     text-decoration: underline;
 411 }
 412 .BRfloatHead {
 413     background-color: #615132;
 414     height: 32px;
 415     line-height: 32px;
 416     padding: 0 10px 10px 0;
 417     font-family: "News Gothic MT","Trebuchet MS",Geneva,Helvetica,sans-serif;
 418     font-size: 3em;
 419     font-weight: 700;
 420     color: #fff;
 421 }
 422 .BRfloat a.floatShut {position:absolute;top:0;right:0;display:block;width:32px;height:32px;background-image:url("images/icon_close-pop.png");background-position:0 0;background-repeat:no-repeat;}
 423 .BRfloat a.floatShut:hover {background-position:0 -32px;}
 424 .BRfloat fieldset {
 425     margin-top: 20px;
 426     padding: 10px 20px;
 427     border: none;
 428 }
 429 .BRfloat fieldset.sub {
 430     margin-top: 0px;
 431     padding: 10px;
 432 }
 433 .BRfloat fieldset.center {
 434     text-align: center;
 435     padding: 10px 20px 30px;
 436 }
 437 .BRfloat label {
 438     display: block;
 439     font-weight: 700;
 440     font-size: 1.6em;
 441     margin: 5px 0;
 442 }
 443 .BRfloat label.sub {
 444     display: inline;
 445     padding: 10px 30px 10px 0;
 446     font-weight: normal;
 447     font-size: 1.4em;
 448     color: #666;
 449 }
 450 .BRfloat input[type=text],
 451 .BRfloat textarea {
 452     display: block;
 453     margin-top: 10px;
 454     width: 570px;
 455     padding: 3px;
 456     border: 2px inset;
 457     font-family: "Lucida Grande", "Verdana", "Arial", sans-serif;
 458     font-size: 1.4em;
 459     line-height: 1.5em;
 460     font-weight: normal;
 461 }
 462 .BRfloat textarea {
 463     height: 85px;
 464 }
 465 .BRfloat button[type=button] {
 466     font-size: 2em;
 467     padding: 5px;
 468     margin: 0 auto;
 469 }
 470 .BRfloat p {
 471     width: 575px;
 472     font-size: 1.6em;
 473     margin: 20px 20px 0;
 474 }
 475 .BRfloat p.meta {
 476     font-size: 1.1em;
 477     color: #748d36;
 478     margin: 10px 0 0;
 479 }
 480 .shift{
 481     position:absolute!important;
 482     left:-10000px!important;
 483 }
 484 .BRfloatBody {
 485     float: left;
 486     width: 570px;
 487     padding: 30px;
 488     color: #333;
 489 }
 490 .BRfloatCover {
 491     float: left;
 492     padding: 0 20px 80px 0;
 493 }
 494 .BRfloatTitle {
 495     font-size: 1.2em;
 496 }
 497 .BRfloatTitle h2 {
 498     display: inline;
 499     font-size: 1.3em;
 500 }
 501 .BRfloatMeta p {
 502     margin: 0;
 503     padding: 0;
 504     font-size: 1.1em;
 505     line-height: 1.5em;
 506 }
 507 .BRfloatMeta p.moreInfo {
 508     line-height: 15px;
 509     margin-top: 30px;
 510 }
 511 .BRfloatMeta p.moreInfo span {
 512     background: url("images/icon_OL-logo-xs.png") no-repeat;
 513     display: block;
 514     float: left;
 515     width: 26px;
 516     height: 15px;
 517 }
 518 .BRfloatMeta h3 {
 519     font-size: 1.1em;
 520     font-weight: 700;
 521     line-height: 1.5em;
 522     margin-top: 30px;
 523     color: #333;
 524 }
 525 .BRfloatMeta ul.links {
 526     float: left;
 527     clear: right;
 528 }
 529 .BRfloatMeta ul.links li {
 530     list-style-type: none;
 531     display: block;
 532     float: left;
 533     font-size: 1.1em;
 534     line-height: 1.5em;
 535 }
 536 .BRfloatMeta ul.links li span {
 537     padding: 0 10px;
 538 }
 539 .BRfloatFoot a, .BRfloatFoot span {
 540     display: block;
 541     float: left;
 542     line-height: 16px;
 543     margin: 0 0 10px 10px;
 544 }
 545 .BRfloatFoot a.problem {
 546     background: url("images/icon_alert-xs.png") no-repeat;
 547     padding-left: 20px;
 548 }
 549 div#BRpage {
 550     float: right;
 551     width: 320px;
 552     padding-left:12px;
 553     text-align: right;
 554 }
 555 div#BRnav {
 556     position: fixed;
 557     bottom: 0;
 558     left: 0;
 559     width: 100%;
 560     height: 40px;
 561     overflow: visible;
 562     z-index: 100;
 563     background-color: #e2dcc5;
 564 }
 565 div#BRnavpos {
 566     position: relative;
 567     margin-right: 320px;
 568     height: 40px;
 569 }
 570 div#BRpager {
 571     position: relative;
 572     /* Account for padding around nav line */
 573     margin-left: 10px;
 574     margin-right: 10px;
 575     height: 40px;
 576 }
 577 div#BRslider {
 578     position: absolute;
 579     top: 13px;
 580     height: 27px;
 581 }
 582
 583 /* XXXmang verify correct use of handle class */
 584 #BRpager .ui-slider-handle {
 585     position: absolute;
 586     width: 23px;
 587     height: 27px;
 588     top: 13px;
 589     margin-left: -12px; /* Center icon */
 590     background: url(images/slider.png);
 591     z-index: 103;
 592 }
 593 #BRpager a {
 594     text-decoration: none;
 595 }
 596  /*
 597   width: 8px;
 598   height: 14px;
 599   position: absolute;
 600   top: -4px;
 601   background: #478AFF;
 602   border: solid 1px black;
 603 }
 604 */
 605
 606 div#BRfiller {
 607     position: absolute;
 608     height: 40px;
 609     width: 10px;
 610     background-color: #e2dcc5;
 611     top: 0;
 612     left: 0;
 613     z-index: 102;
 614 }
 615 div#slider {
 616     position: absolute;
 617     width: 2500px;
 618     height: 27px;
 619     top: 0;
 620     left: -2478px;
 621     background-color: #000;
 622     opacity: .1;
 623     z-index: 101;
 624 }
 625 div#pager {
 626     position: absolute;
 627     width: 23px;
 628     height: 27px;
 629     top: 0;
 630     left: 8px;
 631     background: url(images/slider.png);
 632     z-index: 103;
 633 }
 634 div#pagenum {
 635     display: none;
 636     position: absolute;
 637     left: 24px;
 638     top: 4px;
 639     color: #999;
 640     font-size: 11px;
 641     line-height: 19px;
 642     font-weight: 700;
 643     padding: 0 5px;
 644     width: 80px;
 645     text-align: right;
 646     background-color: #000;
 647     font-family: "Lucida Grande", "Arial", sans-serif;
 648 }
 649 div#pagenum span {
 650     color: #ffa337;
 651     font-style: italic;
 652 }
 653 div#BRnavline {
 654     position: relative;
 655     height: 2px;
 656     width: auto;
 657     background-color: #000;
 658     top: -29px;
 659     margin: 0 10px;
 660 }
 661 .BRnavend {
 662     position: absolute;
 663     top: -2px;
 664     width: 1px;
 665     height: 6px;
 666     background-color: #000;
 667 }
 668 #BRnavleft {
 669     left: 0;
 670 }
 671 #BRnavright {
 672     right: 0;
 673 }
 674 div.chapter {
 675     position: absolute;
 676     top: -24px; /* Relative to nav line */
 677     width: 18px;
 678     margin-left: -9px; /* Center marker triangle */
 679     height: 27px;
 680     background: transparent url(images/marker_chap-off.png) no-repeat;
 681     cursor: pointer;
 682 }
 683 div.chapter.front {
 684     background: transparent url(images/marker_chap-on.png) no-repeat;
 685 }
 686 div.chapter div.title {
 687     display: none;
 688 }
 689 div.title span {
 690     color: #666;
 691     padding: 0 5px;
 692 }
 693 div.search {
 694     position: absolute;
 695     width: 18px;
 696     margin-left: -9px; /* Center icon */
 697     height: 27px;
 698     bottom: 0;  /* Relative to nav line */
 699     background-color: transparent;
 700     background-image: url(images/marker_srch-off.png);
 701     background-repeat: no-repeat;
 702     cursor: pointer;
 703 }
 704 div.search.front {
 705     background: transparent url(images/marker_srch-on.png) no-repeat;
 706 }
 707 div.search div.query,div.searchChap div.query {
 708     display: none;
 709 }
 710 div.query {
 711     position: relative;
 712 }
 713 div.query strong {
 714     color: #000;
 715     font-weight: 700;
 716 }
 717 div.query span {
 718     font-size: 10px;
 719     color: #666;
 720     font-style: italic;
 721 }
 722 div.query div.queryChap {
 723     position: absolute;
 724     top: -40px;
 725     left: -13px;
 726     width: 256px;
 727     overflow: hidden;
 728     text-align: center;
 729     background: #000;
 730     padding: 5px 10px;
 731     color: #fff;
 732     font-weight: 700;
 733     font-size: 11px;
 734 }
 735 div.query div.queryChap span {
 736     color: #666;
 737     padding: 0 5px;
 738     font-style: normal;
 739 }
 740 div.search div.pointer {
 741     position: absolute;
 742     left: 121px;
 743     bottom: -14px;
 744     width: 18px;
 745     height: 27px;
 746     background: transparent url(images/marker_srch-on.png) no-repeat;
 747 }
 748 div.searchChap {
 749     position: absolute;
 750     top: -13px;
 751     width: 18px;
 752     height: 27px;
 753     background-color: transparent;
 754     background-image: url(images/marker_srchchap-off.png);
 755     background-repeat: no-repeat;
 756     cursor: pointer;
 757 }
 758 div.searchChap.front {
 759     background-image: url(images/marker_srchchap-on.png);
 760 }
 761 #BRnav .front {
 762     z-index: 10001;
 763 }
 764 div#BRzoomer {
 765     position: fixed;
 766     bottom: 40px;
 767     right: 0;
 768     width: 26px;
 769     height: 190px;
 770     z-index: 100;
 771 }
 772 div#BRzoompos {
 773     position: relative;
 774     width: 26px;
 775     height: 190px;
 776     top: 0;
 777     left: 0;
 778 }
 779 div#BRzoomer button {
 780     position: absolute;
 781     left: 0;
 782     background-color: #e2dcc5;
 783     width: 26px;
 784 }
 785 div#BRzoomer button:hover {
 786     background-color: #000;
 787 }
 788 div#BRzoomer .zoom_out {
 789     top: 0;
 790     -webkit-border-top-left-radius: 6px;
 791     -webkit-border-bottom-left-radius: 6px;
 792     -moz-border-radius-topleft: 6px;
 793     -moz-border-radius-bottomleft: 6px;
 794     border-top-left-radius: 6px;
 795     border-bottom-left-radius: 6px;
 796     -webkit-box-shadow: 2px 2px 2px #333;
 797     -moz-box-shadow: 2px 2px 2px #333;
 798     box-shadow: 2px 2px 2px #333;
 799 }
 800 div#BRzoomer .zoom_in {
 801     bottom: 0;
 802     -webkit-border-top-left-radius: 6px;
 803     -moz-border-radius-topleft: 6px;
 804     border-top-left-radius: 6px;
 805 }
 806 div#BRzoomcontrol {
 807     position: relative;
 808     top: 40px;
 809     left:3px;
 810     width: 23px;
 811     height: 110px;
 812 }
 813 div#BRzoomstrip {
 814     position: absolute;
 815     top: 0;
 816     left: 0;
 817     width: 23px;
 818     height: 110px;
 819     background-color: #000;
 820     opacity: .1;
 821 }
 822 div#BRzoombtn {
 823     position: absolute;
 824     width: 23px;
 825     height: 23px;
 826     top: 0;
 827     left: 0;
 828     background: url("images/icon_zoomer.png");
 829 }
 830
 831 .BRprogresspopup {
 832     position: absolute;
 833     background-color: #E6E4E1;
 834     font-size: 1.5em;
 835     z-index: 3;
 836     padding: 5px;
 837     text-align: center;
 838 }
 839
 840 .BRprogressbar {
 841     background-image: url(images/progressbar.gif);
 842     background-repeat:no-repeat;
 843     background-position:center top;
 844 }
 845
 846 .BRnavCntl {
 847     background-color: #e2dcc5;
 848     position: absolute;
 849     right: 20px;
 850     width: 40px;
 851     height: 30px;
 852     cursor: pointer;
 853 }
 854 #BRnavCntlBtm {
 855     bottom: 40px;
 856     -moz-border-radius-topright: 8px;
 857     -webkit-border-top-right-radius: 8px;
 858     -moz-border-radius-topleft: 8px;
 859     -webkit-border-top-left-radius: 8px;
 860 }
 861 .BRup {
 862     background-image: url("images/nav_control-up.png");
 863     background-position: 8px 4px;
 864     background-repeat: no-repeat;
 865 }
 866 .BRdn {
 867     background-image: url("images/nav_control-dn.png");
 868     background-position: 8px 4px;
 869     background-repeat: no-repeat;
 870 }