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