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 #BookReader {
  14  position:absolute;
  15  font-family: arial, sans-serif;
  16  left:0;
  17  right:0;
  18  top:0;
  19  bottom:0;
  20 }
  21 #BRtoolbar {
  22     position: fixed;
  23     top: 0;
  24     left: 0;
  25     height: 50px;
  26     padding: 0;
  27     width: 100%;
  28     z-index: 100;
  29     background-color: #e2dcc5;
  30 }
  31 #BRtoolbar .label {
  32     font-size: 1.1em;
  33     color: #999;
  34 }
  35 #BRtoolbar a {
  36     color: #ccc!important;
  37     text-decoration: underline;
  38 }
  39
  40 #BRcontainer {
  41     top:5px;
  42     bottom:5px;
  43     width:100%;
  44     z-index: 1;
  45     overflow-x:auto;
  46     overflow-y:scroll;
  47     position:absolute;
  48 }
  49
  50 #BRpageview {
  51     background-color: #939598;
  52 }
  53
  54 .BRpagediv1up {
  55     background-color: #939598;
  56     overflow:hidden;
  57     cursor: move;
  58 }
  59
  60 .BRpagedivthumb {
  61     background-color: #939598;
  62     overflow:hidden;
  63 }
  64
  65 .BRpagedivthumb a {
  66     border: 0;
  67 }
  68
  69 .BRpagedivthumb img {
  70     border: 0;
  71 }
  72
  73 /* Must come after .BRpagedivthumb rules in order to override them */
  74 .BRpagedivthumb_highlight {
  75     background-color: #939598;
  76     overflow:hidden;
  77 }
  78
  79 .BRpagediv2up {
  80     background-color: rgb(234, 226, 205);
  81     overflow:hidden;
  82 }
  83
  84 #BRbookcover {
  85     border: 1px solid rgb(68, 25, 17);
  86     background-color: #663929;
  87     -moz-border-radius: 6px;
  88     -moz-box-shadow: 3px 3px 8px #222;
  89     -webkit-border-radius: 6px;
  90     -webkit-box-shadow: 2px 2px 8px #222;
  91 }
  92
  93 .BRpageimage {
  94     background-color: rgb(234, 226, 205);
  95 }
  96
  97 .BRleafEdgeR {
  98     border-style: solid solid solid none;
  99     border-color: rgb(51, 51, 34);
 100     border-width: 1px 1px 1px 0px;
 101     background: transparent url(images/right_edges.png) repeat scroll 0% 0%;
 102     position: absolute;
 103 }
 104
 105 .BRleafEdgeL {
 106     border-style: solid none solid solid;
 107     border-color: rgb(51, 51, 34);
 108     border-width: 1px 0px 1px 1px;
 109     /* background: transparent url(images/left_edges.png) repeat scroll 0% 0%; */
 110     background: transparent url(image/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
 111     position: absolute;
 112 }
 113
 114 .BRleafEdgeTmp {
 115     border-style: solid none solid solid;
 116     border-color: rgb(51, 51, 34);
 117     border-width: 1px 0px 1px 1px;
 118     /* background: transparent url(images/left_edges.png) repeat scroll 0% 0%; */
 119     background: transparent url(images/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
 120     position: absolute;
 121 }
 122
 123 #BRbookspine {
 124     border: 1px solid rgb(68, 25, 17);
 125     background-color: rgb(68, 25, 17);
 126     position: absolute;
 127 }
 128
 129 /* search sidebar */
 130 #BookReaderSearch {
 131     border:1px solid black;
 132     position:absolute;
 133     background-color: #E6E4E1;
 134     font-family: arial, sans-serif;
 135 }
 136
 137 #BookReaderSearchResults {
 138     background-color: #FCFCFC;
 139     top: 25px;
 140     bottom: 0px;
 141     overflow:auto;
 142     position: absolute;
 143     left: 0px;
 144     right: 0px;
 145     font-family: arial, san-serif;
 146     font-size: 0.85em;
 147     padding: 2px;
 148 }
 149
 150 .BookReaderSearchHilite {
 151     opacity: 0.20;
 152     filter: alpha(opacity = 20);
 153     background-color: #00f;
 154     position:absolute;
 155
 156 .hidden {
 157   display: none;
 158 }
 159
 160 .BRpageform {
 161     display: inline;
 162 }
 163 #BRpagenum {
 164     border: none;
 165     background-color: #939598;
 166     color: #ccc;
 167     font-family: arial, sans-serif;
 168     font-size: 12px;
 169     font-weight: 700;
 170 }
 171
 172 .BRicon {
 173     display: block;
 174     float: left;
 175     width: 50px;
 176     height: 50px;
 177     padding: 0;
 178     margin: 0;
 179     vertical-align: middle;
 180     border: none;
 181     cursor: pointer;
 182     background-color: transparent;
 183     background-image: url(images/BRicons.png);
 184     background-repeat: no-repeat;
 185 }
 186
 187 /* Absolute path used since the html might be generated at /stream/id or elsewhere */
 188 .BRicon.logo {background-position:0 0;}
 189 .BRicon.fit {background-position:-50px 0;}
 190 .BRicon.fit:hover {background-position:-100px 0;}
 191 .BRicon.glass {background-position:-150px 0;cursor:default;}
 192 /*.BRicon.glass:hover {background-position:-200px 0;}*/
 193 .BRicon.bookmark {background-position:-250px 0;}
 194 .BRicon.bookmark:hover {background-position:-300px 0;}
 195 .BRicon.print {background-position:-350px 0;}
 196 .BRicon.print:hover {background-position:-400px 0;}
 197 .BRicon.link {background-position:-450px 0;}
 198 .BRicon.link:hover {background-position:-500px 0;}
 199 .BRicon.embed {background-position:-550px;}
 200 .BRicon.embed:hover {background-position:-600px 0;}
 201 .BRicon.read {background-position:-650px 0;}
 202 .BRicon.read:hover {background-position:-700px 0;}
 203 .BRicon.full {background-position:-750px 0;}
 204 .BRicon.full:hover {background-position:-800px 0;}
 205 .BRicon.thumb {background-position:-850px 0;}
 206 .BRicon.thumb:hover {background-position:-900px 0;}
 207 .BRicon.twopg {background-position:-950px 0;display:none;}
 208 .BRicon.twopg:hover {background-position:-1000px 0;}
 209
 210 /* NOT CURRENTLY IN USE
 211 .BRicon.zoom_out {background-position:;}
 212 .BRicon.zoom_out:hover {background-position:;}
 213 .BRicon.zoom_in {background-position:;}
 214 .BRicon.zoom_in:hover {background-position:;}
 215 .BRicon.one_page_mode {background-position:;}
 216 .BRicon.two_page_mode {background-position:;}
 217 .BRicon.thumbnail_mode {background-position:;}
 218 .BRicon.book_left {background-position:;}
 219 .BRicon.book_right {background-position:;}
 220 .BRicon.book_up {background-position:;}
 221 .BRicon.book_down {background-position:;}
 222 .BRicon.book_leftmost {background-position:;}
 223 .BRicon.book_rightmost {background-position:;}
 224 .BRicon.book_top {background-position:;}
 225 .BRicon.book_bottom {background-position:;}
 226 .BRicon.play {background-position:;}
 227 .BRicon.pause {background-position:;}
 228 */
 229 a.logo {
 230     display: block;
 231     float: left;
 232     width: 57px;
 233     height: 46px;
 234     background: transparent url(images/icon_home.png) no-repeat 0 0;
 235     margin: 12px 10px 0 10px;
 236 }
 237 a.popOff {
 238     position: absolute;
 239     top: 5px;
 240     right: 5px;
 241     width: 24px;
 242     height: 24px;
 243     background-image: url(images/BRicons.png);
 244     background-color: transparent;
 245     background-repeat: no-repeat;
 246     background-position: -1050px 0;
 247     outline: none;
 248 }
 249 a.popOff:hover {
 250     background-position: -1100px 0;
 251 }
 252 a.popOff span {
 253     position: absolute;
 254     left: -10000px;
 255 }
 256
 257 form#booksearch {
 258     float: left;
 259     margin-right: 40px;
 260 }
 261 form#booksearch input[type=search] {
 262     width: 216px;
 263     height: 24px;
 264     line-height: 24px;
 265     font-family: "Arial", sans-serif;
 266     font-size: 12px;
 267     -webkit-appearance: textfield;
 268     -moz-appearance: textfield;
 269     appearance: field;
 270     margin-top: 13px;
 271 }
 272 form#booksearch button {
 273     width: 30px;
 274     height: 24px;
 275     line-height: 24px;
 276     border: none;
 277     background-color: #000;
 278     text-align: center;
 279     color: #fff;
 280     font-family: "News Gothic MT","Trebuchet MS",Geneva,Helvetica,sans-serif;
 281     font-weight: 700;
 282     font-size: 11px;
 283     text-transform: uppercase;
 284     margin: 10px 0 0 5px;
 285     -webkit-border-radius: 3px;
 286     -moz-border-radius: 3px;
 287     border-radius: 3px;
 288 }
 289
 290 .BRlogotype {
 291     float:left;
 292     font-weight: bold;
 293     height: 25px;
 294     line-height: 25px;
 295     vertical-align: middle;
 296 }
 297
 298 a.BRwhite               { color: #fff }
 299 a.BRwhite:hover         { text-decoration: none; }
 300 a.BRwhite:visited       { color: #fff }
 301
 302 a.BRblack           { color: #000; }
 303 a.BRblack:hover     { text-decoration: none; }
 304 a.BRblack:visited   { color: #000; }
 305
 306 a.BRgrey           { color: #999; }
 307 a.BRgrey:hover     { text-decoration: none; }
 308 a.BRgrey:visited   { color: #666; }
 309
 310 .BRnavlinks {
 311     float:right;
 312     padding: 0 20px 0 0;
 313     margin: 0;
 314     height: 25px;
 315     line-height: 25px;
 316     vertical-align: middle;
 317 }
 318
 319 /* thumnbail view, from Rebecca's demo */
 320 .BRpdstatus-footer {
 321     position:absolute;
 322     height: 65px;
 323     bottom: 25px;
 324     width: 100%;
 325     background-color: #222;
 326     text-align: right;
 327     padding: 0px 0px 0px 0px;
 328 }
 329
 330 .BRwidgetlabel {
 331     color: #919070;
 332     padding: 8px 8px 4px 8px;
 333     font-family: verdana, arial, helvetica, sans-serif;
 334     font-size: 10px;
 335     float: left;
 336 }
 337
 338 .BRfliparea {
 339     background-image: url(images/transparent.png); # Required to capture mouse on IE
 340 }
 341
 342 /* XXXmang still needed? */
 343 .BRtwoPagePopUp {
 344     border: 1px solid black;
 345     padding: 2px 6px;
 346     position: absolute;
 347     font-family: sans-serif;
 348     font-size: 14px;
 349     background-color: rgb(255, 255, 238);
 350     opacity: 0.85;
 351 }
 352
 353 /* COLORBOX POP-UP */
 354
 355 #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;}
 356 #cboxOverlay{position:fixed; width:100%; height:100%;background:#000;opacity:0.75;filter:Alpha(Opacity=75);}
 357 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 358 #cboxContent{position:relative;}
 359 #cboxLoadedContent{overflow:visible!important;}
 360 #cboxLoadedContent iframe{display:block;border:0;}
 361 #cboxTitle{margin:0;display:none!important;}
 362 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:25px; left:25px; width:100%;}
 363 #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
 364 #cboxClose{display:none!important;}
 365
 366 #colorBox{}
 367     #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;}
 368         #cboxLoadedContent{background:#fff;margin:0;}
 369         #cboxLoadingOverlay{background:transparent;}
 370         /* XXXmang where is icon_close? */
 371         #cboxClose{position:absolute;top:20px;right:20px;display:block;width:32px;height:32px;background-image:url(/images/icons/icon_close-pop.png);background-position:0 0;background-repeat:no-repeat;}
 372         #cboxClose:hover{background-position:0 -32px;}
 373
 374 div#BRnav {
 375     position: fixed;
 376     bottom: 0;
 377     left: 0;
 378     width: 100%;
 379     height: 50px;
 380     overflow: visible;
 381     z-index: 100;
 382     background-color: #e2dcc5;
 383 }
 384 div#BRnavpos {
 385     position: relative;
 386     width: 100%;
 387     height: 50px;
 388 }
 389 div#BRnavline {
 390     position: relative;
 391     margin: 0 20px;
 392     height: 2px;
 393     width: auto;
 394     background-color: #000;
 395     top: 24px;
 396 }
 397 div.chapter {
 398     position: absolute;
 399     top: 0;
 400     width: 18px;
 401     height: 27px;
 402     background: transparent url(images/marker_chap.png) no-repeat;
 403     cursor: pointer;
 404 }
 405 div.chapter div.title {
 406     display: none;
 407 }
 408 div.title span {
 409     color: #666;
 410     padding: 0 5px;
 411 }
 412 div.search {
 413     position: absolute;
 414     top: 0;
 415     width: 18px;
 416     height: 27px;
 417     background-color: transparent;
 418     background-image: url(images/marker_srch-off.png);
 419     background-repeat: no-repeat;
 420     cursor: pointer;
 421 }
 422 div.search.front {
 423     background: transparent url(images/marker_srch-on.png) no-repeat;
 424 }
 425 div.search div.query,div.searchChap div.query {
 426     display: none;
 427 }
 428 div.query {
 429     position: relative;
 430 }
 431 div.query strong {
 432     color: #000;
 433     font-weight: 700;
 434 }
 435 div.query span {
 436     font-size: 10px;
 437     color: #666;
 438     font-style: italic;
 439 }
 440 div.query div.queryChap {
 441     position: absolute;
 442     top: -40px;
 443     left: -13px;
 444     width: 256px;
 445     overflow: hidden;
 446     text-align: center;
 447     background: #000;
 448     padding: 5px 10px;
 449     color: #fff;
 450     font-weight: 700;
 451     font-size: 11px;
 452 }
 453 div.query div.queryChap span {
 454     color: #666;
 455     padding: 0 5px;
 456     font-style: normal;
 457 }
 458 div.search div.pointer {
 459     position: absolute;
 460     left: 121px;
 461     bottom: -14px;
 462     width: 18px;
 463     height: 27px;
 464     background: transparent url(images/marker_srch-on.png) no-repeat;
 465 }
 466 div.searchChap {
 467     position: absolute;
 468     top: 0;
 469     width: 18px;
 470     height: 27px;
 471     background-color: transparent;
 472     background-image: url(images/marker_srchchap-off.png);
 473     background-repeat: no-repeat;
 474     cursor: pointer;
 475 }
 476 div.searchChap.front {
 477     background-image: url(images/marker_srchchap-on.png);
 478 }
 479 #BRnav .front {
 480     z-index: 10001;
 481 }
 482 div#pager {
 483     position: absolute;
 484     top: 11px;
 485     left: 5px;
 486     width: 30px;
 487     height: 30px;
 488     background: transparent url(images/focus_chap.png) no-repeat 0 0;
 489     cursor: e-resize;
 490 }