/* The widget adds some styling that needs to be computed at run-time (min-height of scroller
 * content so that pull-up will be hidden, and scroller margin transferred from wrapper padding.)
 * All styles that are added staticly are added through this stylesheet, for maximum flexibility
 *
 * The widget adds these styles to page elements when it is constructed, and removes them when
 * it is destroyed. The styling itself is added by this style sheet. So, any styles added here
 * will be removed when the widget is destroyed. (For example, if you call "destroy" on the widget.)
 */

/* The iscroll-page style is added to the page when the first iscrollview widget is created
 * on the page, and removed when the last iscrollview widget on the page is destroyed.
 */

 .iscroll-page {
    /* Add any styles that you want on pages that use iScroll */
  }
  
  /* The wrapper is the element that contains the scroller. In the most typical usage, this
   * is .ui-content, but could be any element. */
  .iscroll-wrapper {
      min-height:    0;  /* Override any min-height, for example, in case a background image is
                            used on ui-content div used as wrapper. */
      
      /* The wrapper needs to be positioned relative or absolute for proper positioning of the 
         scrollbar with iscroll4 default styling of the scrollbar. Either relative or absolute on the 
         wrapper will cause the absolute positioning  of the scrollbar in iScroll to be relative to 
         the wrapper. */ 
      position: relative;   
    
      /* iScroll examples all show the z-index of the wrapper raised to 1 (default is 0). There may
         be an issue related to touch/click that this solves on specific platforms or depending on 
         the ordering of elements in the HTML source if elements are fixed positioned. 
         This would make sure that the wrapper sees click before underlying content. '
         
         Howver, raising the wrapper Z-index creates a serious problem on page transitions on
         iPhone, so I don't use it here. */ 
                      
  }
  
  /* The scroller is the element that contains the elements that are scrolled. The height of this
   * element is typically longer than the wrapper. (It's the stuff that we scroll.) The widget
   * creates this element for you. It wraps all of the children of the wrapper.
   */
  .iscroll-scroller {
    /* Add any styles that you want to add to scrollers */
  }
  
  /* The "fixed" elements are the elements that are outside of the wrapper. The widget will
   * set headers and footers to this style, as well as any element that has a data-iscroll-fixed
   * attribute. The widget adds-up the height of these elements when it sizes the wrapper.
   */
  .iscroll-fixed {
    /* One often sees headers/footers/etc. raised to a z-index of 1000 in iScroll examples. This
       is probably because the scroll bar has been mis-placed, and raising the z-index of the
       header/footer masks the problem. I don't do it here. */
       
    /* Add any styles that you want to add to fixed elements */
  }
  
  /* iscroll-content is the content that is scrolled - NOT including any pull-down and pull-up
   * element, and also not including a special placeholder element used when there is a pull-up.
   */
  .iscroll-content {
    /* Add any styles that you want to add to iscroll content */
  }
  
  
  /* Note on scrollbar styles: iscroll4 adds inline CSS to the scrollbar when it creates it.
     It sets the z-index to 100 and positions it relative to the wrapper, at the right edge of
     the wrapper. If you want to override this behaviour, set the scrollBarClass option, and then
     style that class as you please */
  
  /* See jquery.mobile.iscroll-pulldown.css for styling of pull-down and pull-up elements */