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