/*
//
// Style sheet - Select a blend
// ============================
//
// NB - tile sizes also set in javascript
// 
*/

DIV.ControlBlockContainer {
  overflow:                                     hidden;
  border:                                       2px solid #F37A1F;
  border-radius:                                10px;
  -webkit-border-radius:                        10px;
  -moz-border-radius:                           10px}
  
DIV.RoofContainer {
  background-color:                             #333333;
  overflow:                                     hidden;
  box-shadow:                                   10px 10px 5px #999999}
  
DIV.RoofTile {
  overflow:                                     hidden;
  box-shadow:                                   0px 2px 3px #333333}
  
IMG.RoofTile {
  width:                                        40px;
  height:                                       17px}

DIV.RoofTileSkewLeft20 {
  -ms-transform:                                skewX(-20deg); /* IE 9 */
  -webkit-transform:                            skewX(-20deg); /* Safari 3-8 */
  transform:                                    skewX(-20deg)}
  
DIV.RoofTileSkewLeft19 {
  -ms-transform:                                skewX(-19deg); /* IE 9 */
  -webkit-transform:                            skewX(-19deg); /* Safari 3-8 */
  transform:                                    skewX(-19deg)}
  
DIV.RoofTileSkewLeft18 {
  -ms-transform:                                skewX(-18deg); /* IE 9 */
  -webkit-transform:                            skewX(-18deg); /* Safari 3-8 */
  transform:                                    skewX(-18deg)}
  
DIV.RoofTileSkewLeft17 {
  -ms-transform:                                skewX(-17deg); /* IE 9 */
  -webkit-transform:                            skewX(-17deg); /* Safari 3-8 */
  transform:                                    skewX(-17deg)}
  
DIV.RoofTileSkewLeft16 {
  -ms-transform:                                skewX(-16deg); /* IE 9 */
  -webkit-transform:                            skewX(-16deg); /* Safari 3-8 */
  transform:                                    skewX(-16deg)}
  
DIV.RoofTileSkewLeft15 {
  -ms-transform:                                skewX(-15deg); /* IE 9 */
  -webkit-transform:                            skewX(-15deg); /* Safari 3-8 */
  transform:                                    skewX(-15deg)}
  
DIV.RoofTileSkewLeft14 {
  -ms-transform:                                skewX(-14deg); /* IE 9 */
  -webkit-transform:                            skewX(-14deg); /* Safari 3-8 */
  transform:                                    skewX(-14deg)}
  
DIV.RoofTileSkewLeft13 {
  -ms-transform:                                skewX(-13deg); /* IE 9 */
  -webkit-transform:                            skewX(-13deg); /* Safari 3-8 */
  transform:                                    skewX(-13deg)}
  
DIV.RoofTileSkewLeft12 {
  -ms-transform:                                skewX(-12deg); /* IE 9 */
  -webkit-transform:                            skewX(-12deg); /* Safari 3-8 */
  transform:                                    skewX(-12deg)}
  
DIV.RoofTileSkewLeft11 {
  -ms-transform:                                skewX(-11deg); /* IE 9 */
  -webkit-transform:                            skewX(-11deg); /* Safari 3-8 */
  transform:                                    skewX(-11deg)}
  
DIV.RoofTileSkewLeft10 {
  -ms-transform:                                skewX(-10deg); /* IE 9 */
  -webkit-transform:                            skewX(-10deg); /* Safari 3-8 */
  transform:                                    skewX(-10deg)}
  
DIV.RoofTileSkewLeft9 {
  -ms-transform:                                skewX(-9deg); /* IE 9 */
  -webkit-transform:                            skewX(-9deg); /* Safari 3-8 */
  transform:                                    skewX(-9deg)}
  
DIV.RoofTileSkewLeft8 {
  -ms-transform:                                skewX(-8deg); /* IE 9 */
  -webkit-transform:                            skewX(-8deg); /* Safari 3-8 */
  transform:                                    skewX(-8deg)}
  
DIV.RoofTileSkewLeft7 {
  -ms-transform:                                skewX(-7deg); /* IE 9 */
  -webkit-transform:                            skewX(-7deg); /* Safari 3-8 */
  transform:                                    skewX(-7deg)}
  
DIV.RoofTileSkewLeft6 {
  -ms-transform:                                skewX(-6deg); /* IE 9 */
  -webkit-transform:                            skewX(-6deg); /* Safari 3-8 */
  transform:                                    skewX(-6deg)}
  
DIV.RoofTileSkewLeft5 {
  -ms-transform:                                skewX(-5deg); /* IE 9 */
  -webkit-transform:                            skewX(-5deg); /* Safari 3-8 */
  transform:                                    skewX(-5deg)}
  
DIV.RoofTileSkewLeft4 {
  -ms-transform:                                skewX(-4deg); /* IE 9 */
  -webkit-transform:                            skewX(-4deg); /* Safari 3-8 */
  transform:                                    skewX(-4deg)}
  
DIV.RoofTileSkewLeft3 {
  -ms-transform:                                skewX(-3deg); /* IE 9 */
  -webkit-transform:                            skewX(-3deg); /* Safari 3-8 */
  transform:                                    skewX(-3deg)}
  
DIV.RoofTileSkewLeft2 {
  -ms-transform:                                skewX(-2deg); /* IE 9 */
  -webkit-transform:                            skewX(-2deg); /* Safari 3-8 */
  transform:                                    skewX(-2deg)}
  
DIV.RoofTileSkewLeft1 {
  -ms-transform:                                skewX(-1deg); /* IE 9 */
  -webkit-transform:                            skewX(-1deg); /* Safari 3-8 */
  transform:                                    skewX(-1deg)}
  
DIV.RoofTileSkewRight1 {
  -ms-transform:                                skewX(1deg); /* IE 9 */
  -webkit-transform:                            skewX(1deg); /* Safari 3-8 */
  transform:                                    skewX(1deg)}
  
DIV.RoofTileSkewRight2 {
  -ms-transform:                                skewX(2deg); /* IE 9 */
  -webkit-transform:                            skewX(2deg); /* Safari 3-8 */
  transform:                                    skewX(2deg)}
  
DIV.RoofTileSkewRight3 {
  -ms-transform:                                skewX(3deg); /* IE 9 */
  -webkit-transform:                            skewX(3deg); /* Safari 3-8 */
  transform:                                    skewX(3deg)}
  
DIV.RoofTileSkewRight4 {
  -ms-transform:                                skewX(4deg); /* IE 9 */
  -webkit-transform:                            skewX(4deg); /* Safari 3-8 */
  transform:                                    skewX(4deg)}
  
DIV.RoofTileSkewRight5 {
  -ms-transform:                                skewX(5deg); /* IE 9 */
  -webkit-transform:                            skewX(5deg); /* Safari 3-8 */
  transform:                                    skewX(5deg)}
  
DIV.RoofTileSkewRight6 {
  -ms-transform:                                skewX(6deg); /* IE 9 */
  -webkit-transform:                            skewX(6deg); /* Safari 3-8 */
  transform:                                    skewX(6deg)}
  
DIV.RoofTileSkewRight7 {
  -ms-transform:                                skewX(7deg); /* IE 9 */
  -webkit-transform:                            skewX(7deg); /* Safari 3-8 */
  transform:                                    skewX(7deg)}
  
DIV.RoofTileSkewRight8 {
  -ms-transform:                                skewX(8deg); /* IE 9 */
  -webkit-transform:                            skewX(8deg); /* Safari 3-8 */
  transform:                                    skewX(8deg)}
  
DIV.RoofTileSkewRight9 {
  -ms-transform:                                skewX(9deg); /* IE 9 */
  -webkit-transform:                            skewX(9deg); /* Safari 3-8 */
  transform:                                    skewX(9deg)}
  
DIV.RoofTileSkewRight10 {
  -ms-transform:                                skewX(10deg); /* IE 9 */
  -webkit-transform:                            skewX(10deg); /* Safari 3-8 */
  transform:                                    skewX(10deg)}
  
DIV.RoofTileSkewRight11 {
  -ms-transform:                                skewX(11deg); /* IE 9 */
  -webkit-transform:                            skewX(11deg); /* Safari 3-8 */
  transform:                                    skewX(11deg)}
  
DIV.RoofTileSkewRight12 {
  -ms-transform:                                skewX(12deg); /* IE 9 */
  -webkit-transform:                            skewX(12deg); /* Safari 3-8 */
  transform:                                    skewX(12deg)}
  
DIV.RoofTileSkewRight13 {
  -ms-transform:                                skewX(13deg); /* IE 9 */
  -webkit-transform:                            skewX(13deg); /* Safari 3-8 */
  transform:                                    skewX(13deg)}
  
DIV.RoofTileSkewRight14 {
  -ms-transform:                                skewX(14deg); /* IE 9 */
  -webkit-transform:                            skewX(14deg); /* Safari 3-8 */
  transform:                                    skewX(14deg)}
  
DIV.RoofTileSkewRight15 {
  -ms-transform:                                skewX(15deg); /* IE 9 */
  -webkit-transform:                            skewX(15deg); /* Safari 3-8 */
  transform:                                    skewX(15deg)}
  
DIV.RoofTileSkewRight16 {
  -ms-transform:                                skewX(16deg); /* IE 9 */
  -webkit-transform:                            skewX(16deg); /* Safari 3-8 */
  transform:                                    skewX(16deg)}
  
DIV.RoofTileSkewRight17 {
  -ms-transform:                                skewX(17deg); /* IE 9 */
  -webkit-transform:                            skewX(17deg); /* Safari 3-8 */
  transform:                                    skewX(17deg)}
  
DIV.RoofTileSkewRight18 {
  -ms-transform:                                skewX(18deg); /* IE 9 */
  -webkit-transform:                            skewX(18deg); /* Safari 3-8 */
  transform:                                    skewX(18deg)}
  
DIV.RoofTileSkewRight19 {
  -ms-transform:                                skewX(19deg); /* IE 9 */
  -webkit-transform:                            skewX(19deg); /* Safari 3-8 */
  transform:                                    skewX(19deg)}
  
DIV.RoofTileSkewRight20 {
  -ms-transform:                                skewX(20deg); /* IE 9 */
  -webkit-transform:                            skewX(20deg); /* Safari 3-8 */
  transform:                                    skewX(20deg)}
  
P.TileSliderTitle {
  font-weight:                                  bold;
  padding-top:                                  0px;
  padding-left:                                 0px;
  padding-right:                                0px;
  padding-bottom:                               0px}  
  
P.TileSliderPercentage {
  font-weight:                                  bold;
  text-align:                                   right;
  padding-top:                                  0px;
  padding-left:                                 0px;
  padding-right:                                0px;
  padding-bottom:                               0px}  
  
.TileSlider {
  -webkit-appearance: none;
  width:                                        100%;
  height:                                       20px;
  border-radius:                                5px;
  background:                                   #d3d3d3;
  outline:                                      none;
  opacity:                                      0.7;
  -webkit-transition:                           .2s;
  transition:                                   opacity .2s}

.TileSlider:hover {
  opacity:                                      1}

.TileSlider::-webkit-slider-thumb {
  -webkit-appearance:                           none;
  appearance:                                   none;
  width:                                        20px;
  height:                                       20px;
  border-radius:                                5px;
  background:                                   #F37A1F;
  cursor:                                       pointer}

.TileSlider::-moz-range-thumb {
  width:                                        20px;
  height:                                       20px;
  border-radius:                                5px;
  background:                                   #F37A1F;
  cursor:                                       pointer}
  
DIV.UpdateRequiredIndicator {
  border-radius:                                10px;
  background-color:                             #AAAAAA}  
   

/* ==================== END ==================== */