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