/*===========================================================================
  CONTROLS

  The standard Monocle stylesheet for the optional Monocle controls. See
  comments for monocore.css, which apply here too.
---------------------------------------------------------------------------*/

/* Contents */

div.monelem_controls_contents_container {
  position: absolute;
  width: 75%;
  height: 75%;
  left: 12.5%;
  top: 12.5%;
  background: #EEE;
  border: 2px solid #F7F7F7;
  border-radius: 9px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
  -moz-box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
}

ol.monelem_controls_contents_list {
  margin: 6px;
  padding: 0;
}

li.monelem_controls_contents_chapter {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  list-style: none;
  line-height: 220%;
  padding-left: 1em;
  padding-right: 2em;
  border-bottom: 2px groove #FEFEFE;
  cursor: pointer;
}

li.monelem_controls_contents_chapter_active {
  background: #999;
  color: white;
}

/* Magnifier */

.monelem_controls_magnifier_button {
  cursor: pointer;
  color: #555;
  position: absolute;
  top: 2px;
  right: 10px;
  padding: 0 2px;
}

.monelem_controls_magnifier_a {
  font-size: 11px;
}

.monelem_controls_magnifier_A {
  font-size: 18px;
  opacity: 0.3;
}


/* Spinner */

.monelem_controls_spinner_anim {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center center;
}
.monelem_controls_spinner_anim.monelem_dormant {
  width: 0;
  height: 0;
}


/* Scrubber */

div.monelem_controls_scrubber_container {
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 4px;
  height: 30px;
  background: rgba(255,255,255,0.8);
}

div.monelem_controls_scrubber_track {
  margin-top: 10px;
  height: 5px;
  border: 1px solid #999;
  cursor: pointer;
}

div.monelem_controls_scrubber_needle {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 5px;
  background: #CCC;
  border: 1px solid #999;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

div.monelem_controls_scrubber_trail {
  position: absolute;
  background: #DDD;
  top: 11px;
  left: 1px;
  height: 5px;
}

div.monelem_controls_scrubber_bubble {
  display: none;
  position: absolute;
  padding: 1em;
  min-width: 20%;
  max-width: 30%;
  bottom: 2.5em;
  background: rgba(0, 0, 0, 0.9);
  color: #CCC;
  font: bold 12px Lucida Grande, Tahoma, Helvetica, Arial, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}


/* Stencil */
div.monelem_controls_stencil_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.monelem_controls_stencil_mask {
  display: block;
  position: absolute;
}

div.monelem_controls_stencil_highlighted .monelem_controls_stencil_mask {
  background: rgba(0,0,255,0.15);
}


/*===========================================================================
  DATA URIs

  These are data-uri packed images, inlined for loading speed and simplicity.
  Placed at the end of this file because they're visually noisy...
---------------------------------------------------------------------------*/

div.monelem_controls_spinner_anim {
  background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaeaaaaa0camaaaanbm47aaaaa3ncsvqicajb4u/gaaaacxbiwxmaaassaaaleghs3x78aaaahhrfwhrtb2z0d2fyzqbbzg9izsbgaxjld29ya3mgq1m1cbxjngaaabv0rvh0q3jlyxrpb24gvgltzqaxny81lzewnohokaaaae5qtfrfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxkkmwqaaabp0uk5taaecawqfbgcicqolda0odxarehmufryxgbl0wlilaaac8kleqvqygzxbb2ljoaadqfcimtvfeod//9hlbrjxipzozobtoyptuwv8v/xrsc8rp6i7adupxhi69mwiar9uy6is5rncutbswxelkijbtfolf7okw6r8zxenwphskfirifjdw4u/rtlpbglsdjohfdnksztsng192w3jchsjetcawcrzdvgjlpinx1sbssvnxcc7enulxpqutfbp8czkh/isys68h0paf+0iuzxonni33hpar51uxdhgrlobsllew3tpft7okpqieoimurs+wj0chlqkxgloxl4ngyrqxbuqemndxurpobnwsokqurrp+gevozwcllpwjmx3wvjuy2zri1ezfobhdnggu52zhrlobzqsucklerdlxltiklc4nd9la6wuntc5aabqzzs3efhe9tg3mw2wqkqghczrtjk3iicoasmtvxx0e30eak2k+wbrho8mky2eclslsz3+2erkucvhizsbnqp2wwxex60ossmnrakep+jgocabg9sgzyaxhhdrpoio/zrjdwctnlzvsljfm4bodape33bzoke8mvy8oqxy4rlnxvfmenxdkjyaly3sjlchksowicngstfmedxle4cvyggx3e6fawugzfikanbihhdz7u4ql7c5swzxyqfywgxjvvd3f3zu8ccs5gqxzeyx7cttwoovnmtezzu0itsxrvamzrrhzyme8dkhlbiqlkudplvma1cniim+613y4kjnsviiprtgmrrqm75arvzhklluxfetqblxvexa8d0hmekcxvsh73rrg37xidpxzlxrin9uhyutztrfvi+fhupfe851klshn4tnxtuegu2yx3pvbipvegpxiaeaj2iynrv8yhep3inojrrdgvxotgjonb7pd7m4rfyik6zclhyf1bddprrw+fw9szsulqgtq1bvttftrakce1zs7bipwyw/ok0i38tu4apupwyrsijkvhoj/o+6w45cjeoqar+bgp8txh5a1nuz2gq/+q/51t5mhug3fqaaaabjru5erkjggg==);
}