/* Colors for Media Stream, nicely separated out */
body {
    color: #222;
}
a, a:visited {
    color: #222;
}

.ms-app-colors {
    /* background-color:#ddd; */
}

/* -------- */
/* This creates an overlay of color 
 * on top of the underlying parent
 * element.  The single pixel image
 * is an RGBA color that will be 
 * blended on top of the underlying
 * color. If for instance, the 
 * image is a white pixel with
 * an alpha of .1, the effect wiil
 * be to add .1 of white ontop
 * of whatever is underneath.
 * Of course, this doesn't have to 
 * be limited to a image of a 
 * single color, it could be any
 * image. But in the currecnt
 * application, there can be
 * an unlimited level of 
 * recursive content embedding,
 * and I the spec is that the 
 * content contained in each
 * level has a lighter background
 * than the parent container.
 * this is the only way I could
 * find to make it work,
 * actually. */
.ms-item-colors {
    /* background-color: #555; */
    background: url('img/msI_white_80_1x1.png');
    /* background-size: cover; */
    background-blend-mode:multiply;
}

.ms-item-colors {
    border-left: #fff .2rem solid;
    border-top: #fff .2rem  solid;
}

.ms-header-colors {
    /* again the image */
    background: url('img/msI_white_30_1x1.png');
    background-size: cover;
    background-color:#dddddd;
    background-blend-mode: lighten;
}

.ms-preview-colors {
    border: solid .1rem #000;
}

 /* normal	This is default. Sets the blending mode to normal	Play it »
multiply	Sets the blending mode to multiply	Play it »
screen	Sets the blending mode to screen	Play it »
overlay	Sets the blending mode to overlay	Play it »
darken	Sets the blending mode to darken	Play it »
lighten	Sets the blending mode to lighten	Play it »
color-dodge	Sets the blending mode to color-dodge	Play it »
saturation	Sets the blending mode to saturation	Play it »
color	Sets the blending mode to color	Play it »
luminosity	Sets the blending mode to luminosity
 */

 img[src$=".gif"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    image-rendering:crisp-edges;               /* CSS4 Proposed  */
    image-rendering:pixelated;                 /* CSS4 Proposed  */
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
  }

img[src$=".png"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    image-rendering:crisp-edges;               /* CSS4 Proposed  */
    image-rendering:pixelated;                 /* CSS4 Proposed  */
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

img.nearest-neighbor { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED */
    image-rendering: -moz-crisp-edges;          /* Firefox */
    image-rendering: -o-crisp-edges;            /* Opera
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed */
    image-rendering: crisp-edges;               /* CSS4 Proposed */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
}

img.reversed {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}