added jstore path
[bookreader.git] / 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 }