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