html {
  /*This would set the background of the html page to black.
    This affects anything below and above the body content.
    BUT - as our round corners are pre-rendered with a white background,
    it does NOT even help to give the html element a black background -
    this will appear below the net page content, but not be visible
    around the rounded corners.
    So we WON'T simply get "round corners" (with black outside)
    that would let our page match seamlessly with the black border
    of the iPad screen. So I won't use this at all. */

/*  background-color: black; */
    }
    
body {
/*  padding: 0px; */
/*  border: 0px;  */

  /*This makes the page content appear with 0 distance to the limits
    of the browser viewport on waterfox - which looks somewhat pathetic
    when using round corners and a white background...
    On the iPad, the Safari browser heeds this, but the Web-Application
    environment doesn't (even after clearing website data = the cache).
    So I really won't use it. */

/*  margin: 0px; */
    
  /*The followign statements would suggest some page widths and heights.
    They don't really work much better than or different from the default values.
    So I won't use them. */

/*  min-width: 99%;	*/
/*  max-width: 100%;	*/
/*  min-height: 100%;	*/


  /*The default setting (yes) displays (and allows) scrollbars when they are needed.
    Alternatives are: yes, no, hidden, auto */

/*  overflow-x: yes;
    overflow-y: yes; */

/* If we want Sans-Serif for everything... */
  font-family: Sans-Serif;
}

/* If we want Sans-Serif only for headings... */
/*
h1, h2, h3, h4 {
  font-family: Sans-Serif;
}
*/


table {
  border-collapse: separate;
  border-spacing: 0px;
  
  /*height and width specs MUST be defined at the table level
    for the page layout of www.ql-recorder.com which puts everything
    into one large table.
    If you put it into the body portion, that will make everything too big,
    so scrollbars will definitely appear and the content will definitely
    exceed the available viewport.*/
  
  /*This is needed to keep the logo positioned in the top right separate
    from the headline of the AnyQuest for Javascript configuration menu */

  width: 100%;

  /*This ensures that the frame around the page is always at least as high as the
    available viewport. Please note: min-height does NOT work. */
    
  /*However - this may y-strech table rows. And THAT will make the top and
    bottom rows with the round corners grow ugly violet handles as soon as
    the bitmaps for the corners are not sufficiently high any more to cover
    the total height of the row :-( - which happens to be the exact moment
    when the effect of this statement would kick in.
    SO we can only use this when we also use (different) valign statements
    in the definition of the first and last table rows making up our frame.
    And even after doing so - the y-enlarging of the rows would also rip
    apart the QL-Recorder logo made from 3 slices put into 3 lines in the
    top left corner of the layout. So I would have to combine table fields
    to keep the logo in one piece, and STILL the page geometry would change,
    as the headline and footer line would become higher in comparison to
    the other elements and anything written in them. :-(
    So I won't use this option either.*/
    
/*  height: 100%;*/

/*  max-width: 100%;	*/
/*  border-top: 0px; */
/*  margin-bottom: 0px; */
/*  border: 0px; */
/*  margin: 0px; */
/*  padding: 0px; */
}

a:link {
  text-decoration: none;
  color: #380078;
}

a:visited {
  text-decoration: none;
  color: #380078;
}

a:hover {
  text-decoration: underline;
  color: #380078;
}

a:active {
  text-decoration: underline;
  color: #380078;
}

/*This ensures that when we create multiple canvases from the imgv-app.js
  then they will be all at the same position, i.e. overlay each other,
  which is useful for blending an image drawn onto one canvas
  into an image drawn onto another canvas using the canvas opacity / transparency */
canvas {
  position: absolute;
/*border: 1px solid black;*/

/*Now, we disable the unwanted selection of the canvas by touching onto it and holding down a finger on the iPad.*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}


 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }