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