BookReader/BookReader.css

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