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 .hidden {
  85   display: none;
  86 }
  87
  88 .BRpageform {
  89     display: inline;
  90 }
  91 #BRpagenum {
  92     border: none;
  93     background-color: #939598;
  94     color: #ccc;
  95     font-family: arial, sans-serif;
  96     font-size: 12px;
  97     font-weight: 700;
  98 }
  99
 100 .BRicon {
 101     display: block;
 102     float: left;
 103     width: 50px;
 104     height: 50px;
 105     padding: 0;
 106     margin: 0;
 107     vertical-align: middle;
 108     border: none;
 109     cursor: pointer;
 110     background-color: transparent;
 111     background-image: url("BRicons.png");
 112     background-repeat: no-repeat;
 113 }
 114
 115 /* Absolute path used since the html might be generated at /stream/id or elsewhere */
 116 .BRicon.logo {background-position:0 0;}
 117 .BRicon.fit {background-position:-50px 0;}
 118 .BRicon.fit:hover {background-position:-100px 0;}
 119 .BRicon.glass {background-position:-150px 0;cursor:default;}
 120 /*.BRicon.glass:hover {background-position:-200px 0;}*/
 121 .BRicon.bookmark {background-position:-250px 0;}
 122 .BRicon.bookmark:hover {background-position:-300px 0;}
 123 .BRicon.print {background-position:-350px 0;}
 124 .BRicon.print:hover {background-position:-400px 0;}
 125 .BRicon.link {background-position:-450px 0;}
 126 .BRicon.link:hover {background-position:-500px 0;}
 127 .BRicon.embed {background-position:-550px;}
 128 .BRicon.embed:hover {background-position:-600px 0;}
 129 .BRicon.read {background-position:-650px 0;}
 130 .BRicon.read:hover {background-position:-700px 0;}
 131 .BRicon.full {background-position:-750px 0;}
 132 .BRicon.full:hover {background-position:-800px 0;}
 133 .BRicon.thumb {background-position:-850px 0;}
 134 .BRicon.thumb:hover {background-position:-900px 0;}
 135 .BRicon.twopg {background-position:-950px 0;display:none;}
 136 .BRicon.twopg:hover {background-position:-1000px 0;}
 137
 138 /* NOT CURRENTLY IN USE
 139 .BRicon.zoom_out {background-position:;}
 140 .BRicon.zoom_out:hover {background-position:;}
 141 .BRicon.zoom_in {background-position:;}
 142 .BRicon.zoom_in:hover {background-position:;}
 143 .BRicon.one_page_mode {background-position:;}
 144 .BRicon.two_page_mode {background-position:;}
 145 .BRicon.thumbnail_mode {background-position:;}
 146 .BRicon.book_left {background-position:;}
 147 .BRicon.book_right {background-position:;}
 148 .BRicon.book_up {background-position:;}
 149 .BRicon.book_down {background-position:;}
 150 .BRicon.book_leftmost {background-position:;}
 151 .BRicon.book_rightmost {background-position:;}
 152 .BRicon.book_top {background-position:;}
 153 .BRicon.book_bottom {background-position:;}
 154 .BRicon.play {background-position:;}
 155 .BRicon.pause {background-position:;}
 156 */
 157 a.logo {
 158     display: block;
 159     float: left;
 160     width: 57px;
 161     height: 46px;
 162     background: transparent url("icon_home.png") no-repeat 0 0;
 163     margin: 12px 10px 0 10px;
 164 }
 165 a.popOff {
 166     position: absolute;
 167     top: 5px;
 168     right: 5px;
 169     width: 24px;
 170     height: 24px;
 171     background-image: url("BRicons.png");
 172     background-color: transparent;
 173     background-repeat: no-repeat;
 174     background-position: -1050px 0;
 175     outline: none;
 176 }
 177 a.popOff:hover {
 178     background-position: -1100px 0;
 179 }
 180 a.popOff span {
 181     position: absolute;
 182     left: -10000px;
 183 }
 184
 185 form#booksearch {
 186     float: left;
 187     margin-right: 40px;
 188 }
 189 form#booksearch input[type=search] {
 190     width: 216px;
 191     height: 24px;
 192     line-height: 24px;
 193     font-family: "Arial", sans-serif;
 194     font-size: 12px;
 195     -webkit-appearance: textfield;
 196     -moz-appearance: textfield;
 197     appearance: field;
 198     margin-top: 13px;
 199 }
 200 form#booksearch button {
 201     width: 30px;
 202     height: 24px;
 203     line-height: 24px;
 204     border: none;
 205     background-color: #000;
 206     text-align: center;
 207     color: #fff;
 208     font-family: "News Gothic MT","Trebuchet MS",Geneva,Helvetica,sans-serif;
 209     font-weight: 700;
 210     font-size: 11px;
 211     text-transform: uppercase;
 212     margin: 10px 0 0 5px;
 213     -webkit-border-radius: 3px;
 214     -moz-border-radius: 3px;
 215     border-radius: 3px;
 216 }
 217
 218 .BRlogotype {
 219     float:left;
 220     font-weight: bold;
 221     height: 25px;
 222     line-height: 25px;
 223     vertical-align: middle;
 224 }
 225
 226 a.BRwhite               { color: #fff }
 227 a.BRwhite:hover         { text-decoration: none; }
 228 a.BRwhite:visited       { color: #fff }
 229
 230 a.BRblack           { color: #000; }
 231 a.BRblack:hover     { text-decoration: none; }
 232 a.BRblack:visited   { color: #000; }
 233
 234 a.BRgrey           { color: #999; }
 235 a.BRgrey:hover     { text-decoration: none; }
 236 a.BRgrey:visited   { color: #666; }
 237
 238 .BRnavlinks {
 239     float:right;
 240     padding: 0 20px 0 0;
 241     margin: 0;
 242     height: 25px;
 243     line-height: 25px;
 244     vertical-align: middle;
 245 }
 246
 247 /* thumnbail view, from Rebecca's demo */
 248 .BRpdstatus-footer {
 249     position:absolute;
 250     height: 65px;
 251     bottom: 25px;
 252     width: 100%;
 253     background-color: #222;
 254     text-align: right;
 255     padding: 0px 0px 0px 0px;
 256 }
 257
 258 .BRwidgetlabel {
 259     color: #919070;
 260     padding: 8px 8px 4px 8px;
 261     font-family: verdana, arial, helvetica, sans-serif;
 262     font-size: 10px;
 263     float: left;
 264 }
 265
 266 .BRfliparea {
 267     background-image: url(images/transparent.png); # Required to capture mouse on IE
 268 }
 269 /* COLORBOX POP-UP */
 270
 271 #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;}
 272 #cboxOverlay{position:fixed; width:100%; height:100%;background:#000;opacity:0.75;filter:Alpha(Opacity=75);}
 273 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 274 #cboxContent{position:relative;}
 275 #cboxLoadedContent{overflow:visible!important;}
 276 #cboxLoadedContent iframe{display:block;border:0;}
 277 #cboxTitle{margin:0;display:none!important;}
 278 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:25px; left:25px; width:100%;}
 279 #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
 280 #cboxClose{display:none!important;}
 281
 282 #colorBox{}
 283     #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;}
 284         #cboxLoadedContent{background:#fff;margin:0;}
 285         #cboxLoadingOverlay{background:transparent;}
 286         #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;}
 287         #cboxClose:hover{background-position:0 -32px;}
 288
 289 div#BRnav {
 290     position: fixed;
 291     bottom: 0;
 292     left: 0;
 293     width: 100%;
 294     height: 50px;
 295     overflow: visible;
 296     z-index: 100;
 297     background-color: #e2dcc5;
 298 }
 299 div#BRnavpos {
 300     position: relative;
 301     width: 100%;
 302     height: 50px;
 303 }
 304 div#BRnavline {
 305     position: relative;
 306     margin: 0 20px;
 307     height: 2px;
 308     width: auto;
 309     background-color: #000;
 310     top: 24px;
 311 }
 312 div.chapter {
 313     position: absolute;
 314     top: 0;
 315     width: 18px;
 316     height: 27px;
 317     background: transparent url("marker_chap.png") no-repeat;
 318     cursor: pointer;
 319 }
 320 div.chapter div.title {
 321     display: none;
 322 }
 323 div.title span {
 324     color: #666;
 325     padding: 0 5px;
 326 }
 327 div.search {
 328     position: absolute;
 329     top: 0;
 330     width: 18px;
 331     height: 27px;
 332     background-color: transparent;
 333     background-image: url("marker_srch-off.png");
 334     background-repeat: no-repeat;
 335     cursor: pointer;
 336 }
 337 div.search.front {
 338     background: transparent url("marker_srch-on.png") no-repeat;
 339 }
 340 div.search div.query,div.searchChap div.query {
 341     display: none;
 342 }
 343 div.query {
 344     position: relative;
 345 }
 346 div.query strong {
 347     color: #000;
 348     font-weight: 700;
 349 }
 350 div.query span {
 351     font-size: 10px;
 352     color: #666;
 353     font-style: italic;
 354 }
 355 div.query div.queryChap {
 356     position: absolute;
 357     top: -40px;
 358     left: -13px;
 359     width: 256px;
 360     overflow: hidden;
 361     text-align: center;
 362     background: #000;
 363     padding: 5px 10px;
 364     color: #fff;
 365     font-weight: 700;
 366     font-size: 11px;
 367 }
 368 div.query div.queryChap span {
 369     color: #666;
 370     padding: 0 5px;
 371     font-style: normal;
 372 }
 373 div.search div.pointer {
 374     position: absolute;
 375     left: 121px;
 376     bottom: -14px;
 377     width: 18px;
 378     height: 27px;
 379     background: transparent url("marker_srch-on.png") no-repeat;
 380 }
 381 div.searchChap {
 382     position: absolute;
 383     top: 0;
 384     width: 18px;
 385     height: 27px;
 386     background-color: transparent;
 387     background-image: url("marker_srchchap-off.png");
 388     background-repeat: no-repeat;
 389     cursor: pointer;
 390 }
 391 div.searchChap.front {
 392     background-image: url("marker_srchchap-on.png");
 393 }
 394 #BRnav .front {
 395     z-index: 10001;
 396 }
 397 div#pager {
 398     position: absolute;
 399     top: 11px;
 400     left: 5px;
 401     width: 30px;
 402     height: 30px;
 403     background: transparent url("focus_chap.png") no-repeat 0 0;
 404     cursor: e-resize;
 405 }