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