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