/* -- Clean, Lovely, Happy Rainbow Colors -- */
.hope {
  color: #00afc9;
}
.clear {
  color: #69d2e7;
}
.confused {
  color: #b4e8f3;
}
.virgin {
  color: #d9f4f9;
}
.forrest {
  color: #00a652;
}
.marijuana {
  color: #50b849;
}
.young {
  color: #c0d731;
}
.easter {
  color: #fef200;
}
.holland {
  color: #fcb913;
}
.fire {
  color: #f37020;
}
.danger {
  color: #ed1b24;
}
.barbie {
  color: #fe4365;
}
.hope-bg {
  background-color: #00afc9;
}
.clear-bg {
  background-color: #69d2e7;
}
.confused-bg {
  background-color: #b4e8f3;
}
.virgin-bg {
  background-color: #d9f4f9;
}
.forrest-bg {
  background-color: #00a652;
}
.marijuana-bg {
  background-color: #50b849;
}
.young-bg {
  background-color: #c0d731;
}
.easter-bg {
  background-color: #fef200;
}
.holland-bg {
  background-color: #fcb913;
}
.fire-bg {
  background-color: #f37020;
}
.danger-bg {
  background-color: #ed1b24;
}
.barbie-bg {
  background-color: #fe4365;
}
/* -- The Dark Side -- */
.sith {
  color: #1a2526;
}
.anakin {
  color: #273738;
}
.darth-vader {
  color: #33484a;
}
.jabba {
  color: #4f6162;
}
.darth-maul {
  color: #53777a;
}
.sith-bg {
  background-color: #1a2526;
}
.anakin-bg {
  background-color: #273738;
}
.darth-vader-bg {
  background-color: #33484a;
}
.jabba-bg {
  background-color: #4f6162;
}
.darth-maul-bg {
  background-color: #53777a;
}
.auto-clear:after {
  content: " ";
  display: table;
  clear: both;
}
.hide-text {
  text-transform: capitalize;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}
.overflow-ellipsis {
  display: block;
  -o-text-overflow: ellipsis;
  /* Opera */
  text-overflow: ellipsis;
  /* IE, Safari (WebKit) */
  overflow: hidden;
  /* don't show excess chars */
  white-space: nowrap;
  /* force single line */
}
.reset-basic {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
}
.top-left {
  position: absolute;
  top: 0px;
  left: 0px;
}
.top-right {
  position: absolute;
  top: 0px;
  right: 0px;
}
.bottom-left {
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.bottom-right {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.full-size {
  width: 100%;
  height: 100%;
}
.block {
  display: block;
}
.content-box {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.border-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* Fonts */
@font-face {
  font-family: 'ec_square_sans_probold';
  src: url('/Content/Fonts/ecsquaresanspro-bold-webfont.eot');
  src: url('/Content/Fonts/ecsquaresanspro-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/Content/Fonts/ecsquaresanspro-bold-webfont.woff') format('woff'), url('/Content/Fonts/ecsquaresanspro-bold-webfont.ttf') format('truetype'), url('/Content/Fonts/ecsquaresanspro-bold-webfont.svg#ec_square_sans_probold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ec_square_sans_proregular';
  src: url('/Content/Fonts/ecsquaresanspro-regular-webfont.eot');
  src: url('/Content/Fonts/ecsquaresanspro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/Content/Fonts/ecsquaresanspro-regular-webfont.woff') format('woff'), url('/Content/Fonts/ecsquaresanspro-regular-webfont.ttf') format('truetype'), url('/Content/Fonts/ecsquaresanspro-regular-webfont.svg#ec_square_sans_proregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
img,
div,
span,
p,
a,
h1,
h2,
h3,
h4,
h5 {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
html,
body {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
span {
  font-family: 'ec_square_sans_proregular';
  font-size: 15px;
}
p {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  font-family: 'ec_square_sans_proregular';
  font-size: 15px;
  padding: 13px 0 4px 0;
}
h1 {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  font-family: 'ec_square_sans_probold';
  font-size: 26px;
  line-height: 14px;
  color: #1a2526;
}
h2 {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  font-family: 'ec_square_sans_probold';
  font-size: 25px;
  line-height: 28px;
  color: white;
}
h3 {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  font-family: 'ec_square_sans_proregular';
  font-size: 34px;
  line-height: 34px;
  color: white;
}
h4 {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  font-family: 'ec_square_sans_probold';
  font-size: 18px;
  line-height: 12px;
  color: #1a2526;
}
.navigate-button {
  width: 32px;
  height: 32px;
  display: block;
  cursor: pointer;
}
.navigate-button span {
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
}
.navigate-button span.color {
  background-color: #33484a;
  opacity: 0.8;
}
.navigate-button.up span.direction {
  background-image: url(/Content/Images/UI/arrow-white-up.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .navigate-button.up span.direction {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/arrow-white-up@2x.png);
    background-size: 32px 32px;
  }
}
.navigate-button.right span.direction {
  background-image: url(/Content/Images/UI/arrow-white-right.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .navigate-button.right span.direction {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/arrow-white-right@2x.png);
    background-size: 32px 32px;
  }
}
.navigate-button.down span.direction {
  background-image: url(/Content/Images/UI/arrow-white-down.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .navigate-button.down span.direction {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/arrow-white-down@2x.png);
    background-size: 32px 32px;
  }
}
.navigate-button.left span.direction {
  background-image: url(/Content/Images/UI/arrow-white-left.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .navigate-button.left span.direction {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/arrow-white-left@2x.png);
    background-size: 32px 32px;
  }
}
.topbar {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #4f6162;
  z-index: 50;
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  behavior: url(/Content/Css/PIE.htc);
}
.topbar .tab {
  width: 225px;
  height: 40px;
  position: absolute;
  top: 30px;
  left: 400px;
  display: block;
  background-color: #53777a;
  padding: 10px 0 0 0;
  text-align: center;
  cursor: pointer;
}
.topbar .tab span {
  color: white;
  font-size: 21px;
}
.topbar .tab.active {
  background-color: #00afc9;
}
.topbar .tab .active-arrow {
  width: 23px;
  height: 11px;
  display: block;
  position: absolute;
  top: 50px;
  left: 46%;
  background-image: url(/Content/Images/UI/tab-arrow-water.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .topbar .tab .active-arrow {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/tab-arrow-water@2x.png);
    background-size: 23px 12px;
  }
}
.topbar .tab:last-child {
  left: 660px;
}
.sidebar {
  width: 320px;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  min-height: 688px;
  background-color: #69d2e7;
  z-index: 100;
  -moz-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
  behavior: url(/Content/Css/PIE.htc);
}
.sidebar .top-block {
  width: 320px;
  height: 415px;
}
.sidebar .top-block .white-block {
  width: 100%;
  height: 80px;
  display: block;
  background-color: white;
  z-index: 101;
}
.sidebar .top-block .logo-european-commission {
  width: 139px;
  height: 101px;
  position: absolute;
  top: 11px;
  left: 92px;
  display: block;
  z-index: 102;
}
.sidebar .top-block .navigate-button {
  display: block;
  position: absolute;
  top: 25px;
  left: 30px;
  z-index: 103;
}
.sidebar .top-block .description {
  position: absolute;
  color: white;
  padding: 30px;
}
.sidebar .top-block .description h2 {
  margin: 10px 0 0 0;
}
.sidebar .bottom-block {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 30px 0 0 30px;
}
.sidebar .bottom-block h3 {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  width: 200px;
}
.sidebar .bottom-block span {
  color: white;
  font-size: 10px;
  line-height: 14px;
  display: inline-block;
}
.sidebar .bottom-block .score-label {
  width: 96px;
  height: 82px;
  position: absolute;
  top: 6px;
  left: 210px;
  background-image: url(/Content/Images/UI/score-label.png);
  background-repeat: no-repeat;
  display: none;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .sidebar .bottom-block .score-label {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/score-label@2x.png);
    background-size: 96px 82px;
  }
}
.sidebar .bottom-block .scores {
  width: 290px;
  height: 240px;
}
.sidebar .bottom-block .scores .score-panel {
  width: 256px;
  height: 60px;
  margin: 16px 0 10px 0;
  background-color: #1a2526;
  border-radius: 8px;
}
.sidebar .bottom-block .scores .score-panel .block {
  float: left;
  margin: 2px 0 0 2px;
  background-color: #33484a;
  background-position: -345px 10px;
  background-image: url(/Content/Images/UI/digits-jabba.png);
  background-repeat: no-repeat;
  border-radius: 6px;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .sidebar .bottom-block .scores .score-panel .block {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/digits-jabba@2x.png);
    background-size: 410px 35px;
  }
}
.sidebar .bottom-block .scores .score-panel .block .plus-minus {
  width: 30px;
  height: 56px;
  display: block;
  background-image: url(/Content/Images/UI/digits-white.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .sidebar .bottom-block .scores .score-panel .block .plus-minus {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/digits-white@2x.png);
    background-size: 410px 35px;
  }
}
.sidebar .bottom-block .scores .score-panel .block .plus-minus.minus {
  background-position: 3px 10px;
}
.sidebar .bottom-block .scores .score-panel .block .plus-minus.plus {
  background-position: -32px 10px;
}
.sidebar .bottom-block .scores .score-panel .block .digit {
  width: 30px;
  height: 56px;
  display: block;
  background-position: -65px 10px;
  background-image: url(/Content/Images/UI/digits-white.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .sidebar .bottom-block .scores .score-panel .block .digit {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/digits-white@2x.png);
    background-size: 410px 35px;
  }
}
.sidebar .bottom-block .scores .score-panel .block .digit.negative {
  background-image: url(/Content/Images/UI/digits-danger.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .sidebar .bottom-block .scores .score-panel .block .digit.negative {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/digits-danger@2x.png);
    background-size: 410px 35px;
  }
}
.sidebar .bottom-block .scores .score-panel .block .digit.positive {
  background-image: url(/Content/Images/UI/digits-young.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .sidebar .bottom-block .scores .score-panel .block .digit.positive {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/digits-young@2x.png);
    background-size: 410px 35px;
  }
}
.sidebar .bottom-block .scores .score-panel .unit {
  width: 60px;
  height: 56px;
  float: left;
  margin: 2px 0 0 2px;
  background-color: #273738;
  border-radius: 6px;
}
.sidebar .bottom-block .scores .score-panel .unit.consumption {
  background-image: url(/Content/Images/UI/unit-kwh-year.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .sidebar .bottom-block .scores .score-panel .unit.consumption {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/unit-kwh-year@2x.png);
    background-size: 60px 56px;
  }
}
.sidebar .bottom-block .scores .score-panel .unit.currency {
  background-image: url(/Content/Images/UI/unit-euro.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .sidebar .bottom-block .scores .score-panel .unit.currency {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/unit-euro@2x.png);
    background-size: 60px 56px;
  }
}
.sidebar .bottom-block .white-block {
  width: 320px;
  height: 64px;
  display: block;
  background-color: white;
  margin: 0 0 0 -30px;
}
.sidebar .bottom-block .white-block .logo-joint-research-centre {
  width: 55px;
  height: 37px;
  display: block;
  padding: 27px 0 0 0;
  margin: 0 auto;
}
.energy-label {
  width: 80px;
  height: 32px;
  display: block;
  background-position: 100% 50%;
  border-bottom: 1px solid #b4e8f3;
}
.energy-label span.label {
  width: 64px;
  height: 16px;
  display: block;
  position: relative;
  top: 8px;
  left: 8px;
  padding: 0 0 0 4px;
  background-image: url(/Content/Images/UI/energy-label-connector-inactive.png);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  font-family: 'ec_square_sans_probold';
  color: white;
  font-size: 13px;
  cursor: pointer;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .energy-label span.label {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/energy-label-connector-inactive@2x.png);
    background-size: 11px 18px;
  }
}
.energy-label span.image {
  width: 80px;
  height: 52px;
  display: block;
  background-repeat: no-repeat;
  cursor: pointer;
}
.energy-label.average {
  background-image: url(/Content/Images/UI/average-energy-label-pattern.png);
  background-repeat: repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .energy-label.average {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/average-energy-label-pattern@2x.png);
    background-size: 11px 18px;
  }
}
.environment {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  display: block;
  position: absolute;
  top: 80px;
  left: 320px;
  overflow: hidden;
  background: white;
  display: none;
}
.environment .navigate-button.up {
  position: absolute;
  top: 30px;
  right: auto;
  bottom: auto;
  left: 50%;
}
.environment .navigate-button.right {
  position: absolute;
  top: 50%;
  right: 30px;
  bottom: auto;
  left: auto;
}
.environment .navigate-button.down {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 30px;
  left: 50%;
}
.environment .navigate-button.left {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 30px;
}
.environment .surrounding {
  position: absolute;
}
.environment .house {
  position: absolute;
}
.environment .house .room {
  position: absolute;
}
.environment .house .room img {
  width: 100%;
  height: 100%;
}
.environment .spot-label {
  width: 384px;
  height: 264px;
  position: absolute;
  top: 200px;
  left: 200px;
  display: none;
  z-index: 1000;
}
.environment .spot-label .block {
  width: 350px;
  height: 230px;
  position: absolute;
  top: 17px;
  left: 17px;
  background-color: white;
  overflow: hidden;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  behavior: url(/Content/Css/PIE.htc);
  /*.energy-top-label {
				.size(32px, 74px);
				.position-full(0px, auto, auto, auto);
				right:20px;
                padding:10px 0 0 0;
				text-align:center;
				.image-2x('/Content/Images/UI/energy-label-down.png', 32px, 16px);
				background-position:-1% 101%;
				font-family: 'ec_square_sans_probold';
				font-size:20px;
				color:white;
                display:none;
			}*/
}
.environment .spot-label .block .energy-labels {
  width: 88px;
  height: 100%;
  background-color: #d9f4f9;
  background-position: 100% 0%;
  background-image: url(/Content/Images/UI/energy-label-content-connector-inactive.png);
  background-repeat: repeat-y;
  float: left;
  /* a.energy-label
                   
                    See declarations before environment class 
                     
                */
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .environment .spot-label .block .energy-labels {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/energy-label-content-connector-inactive@2x.png);
    background-size: 8px 100%;
  }
}
.environment .spot-label .block .energy-labels a.energy-label.active {
  width: 88px;
  height: 32px;
  background-image: url(/Content/Images/UI/energy-label-content-connector-active.png);
  background-repeat: no-repeat;
  background-color: #69d2e7;
  background-position: 100% 50%;
  border-bottom: 1px solid white;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .environment .spot-label .block .energy-labels a.energy-label.active {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/energy-label-content-connector-active@2x.png);
    background-size: 8px 34px;
  }
}
.environment .spot-label .block .energy-labels a.energy-label.active span.label {
  background-image: url(/Content/Images/UI/energy-label-connector-active.png);
  background-repeat: no-repeat;
  position: relative;
  top: 8px;
  left: 8px;
  cursor: pointer;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .environment .spot-label .block .energy-labels a.energy-label.active span.label {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/energy-label-connector-active@2x.png);
    background-size: 11px 18px;
  }
}
.environment .spot-label .block .energy-labels a.energy-label.active span.image {
  cursor: pointer;
}
.environment .spot-label .block .content {
  width: 190px;
  height: 300px;
  padding: 20px 20px 20px 12px;
  float: left;
}
.environment .spot-label .block .content h4 {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
}
.environment .spot-label .block .content p {
  width: 190px;
  height: 200px;
}
.environment .spot-label .block .content p span {
  display: block;
  font-size: 13px;
}
.environment .spot-label .block .content p span.header {
  color: #00afc9;
  font-size: 12px;
}
.environment .spot-label .block .content p span.sized {
  font-size: 18px;
  font-family: 'ec_square_sans_probold';
  color: #1a2526;
  padding: 0 0 10px 0;
}
.environment .spot-label .block .content p span.text {
  font-size: 13px;
  padding: 0 0 18px 0;
}
.environment .spot-label .connection {
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}
.environment .spot-label .connection.up,
.environment .spot-label .connection.down {
  width: 37px;
  height: 17px;
  left: 120px;
}
.environment .spot-label .connection.right,
.environment .spot-label .connection.left {
  width: 17px;
  height: 37px;
  top: 110px;
}
.environment .spot-label .connection.up {
  background-image: url(/Content/Images/UI/spot-label-connector-up.png);
  background-repeat: no-repeat;
  top: 0px;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .environment .spot-label .connection.up {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/spot-label-connector-up@2x.png);
    background-size: 37px 17px;
  }
}
.environment .spot-label .connection.right {
  background-image: url(/Content/Images/UI/spot-label-connector-right.png);
  background-repeat: no-repeat;
  right: 0px;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .environment .spot-label .connection.right {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/spot-label-connector-right@2x.png);
    background-size: 17px 37px;
  }
}
.environment .spot-label .connection.down {
  background-image: url(/Content/Images/UI/spot-label-connector-down.png);
  background-repeat: no-repeat;
  bottom: 0px;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .environment .spot-label .connection.down {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/spot-label-connector-down@2x.png);
    background-size: 37px 17px;
  }
}
.environment .spot-label .connection.left {
  background-image: url(/Content/Images/UI/spot-label-connector-left.png);
  background-repeat: no-repeat;
  left: 0px;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .environment .spot-label .connection.left {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/spot-label-connector-left@2x.png);
    background-size: 17px 37px;
  }
}
.environment .spot {
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
}
.environment .spot * {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
}
.environment .spot .inner {
  width: 18px;
  height: 18px;
  margin: 7px 7px;
  z-index: 201;
}
.environment .spot .outer {
  width: 32px;
  height: 32px;
  z-index: 202;
  background-image: url(/Content/Images/UI/spot-outer.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .environment .spot .outer {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/spot-outer@2x.png);
    background-size: 32px 32px;
  }
}
.environment .map {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 30px 140px 0 0;
}
.environment .map .back {
  width: 102px;
  height: 70px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #4f6162;
  opacity: .6;
}
.environment .map .map-house {
  width: 86px;
  height: 54px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(/Content/Images/UI/map.png);
  background-repeat: no-repeat;
  margin: 8px;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .environment .map .map-house {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/map@2x.png);
    background-size: 86px 54px;
  }
}
.environment .map .map-house .map-room {
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
}
.environment .map .map-house .map-room .map-spot {
  width: 4px;
  height: 4px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(/Content/Images/UI/map-spot.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .environment .map .map-house .map-room .map-spot {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/map-spot@2x.png);
    background-size: 4px 4px;
  }
}
.environment .map .map-house .map-room-active {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #f37020;
  cursor: default;
}
.devices {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  width: 100%;
  height: 100%;
  background-color: #b4e8f3;
  overflow: scroll;
  display: none;
}
.devices .button {
  width: 32px;
  height: 32px;
  display: block;
  cursor: pointer;
}
.devices .intro {
  padding: 130px 0 0 400px;
}
.devices .intro p {
  padding: 20px 0 0 0;
  width: 480px;
}
.devices .device-groups-container {
  margin: 20px 0 0 400px;
}
.devices .device-groups-container .device-group {
  width: 300px;
  height: auto;
  float: left;
}
.devices .device-groups-container .device-group .device {
  margin: 0 0 20px 0;
}
.devices .device-groups-container .device-group .device .title-block {
  width: 256px;
  height: 32px;
  background-color: white;
  position: relative;
}
.devices .device-groups-container .device-group .device .title-block .title {
  font-family: 'ec_square_sans_probold';
  padding: 0 0 0 10px;
  line-height: 33px;
  color: #273738;
}
.devices .device-groups-container .device-group .device .title-block .count {
  font-family: 'ec_square_sans_proregular';
  color: #00afc9;
  padding: 0 0 0 5px;
}
.devices .device-groups-container .device-group .device .title-block .button.add {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #00a652;
  background-image: url(/Content/Images/UI/add-device.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .devices .device-groups-container .device-group .device .title-block .button.add {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/add-device@2x.png);
    background-size: 32px 32px;
  }
}
.devices .device-groups-container .device-group .device .device-block {
  width: 256px;
  height: 0px;
  padding: 1px 0 0 1px;
  margin: 0 0 0 32px;
  position: relative;
  opacity: 0;
}
.devices .device-groups-container .device-group .device .device-block .button.delete {
  position: absolute;
  top: 0px;
  right: 0px;
  top: 1px;
  right: 33px;
  background-color: #ed1b24;
  background-image: url(/Content/Images/UI/delete-device.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .devices .device-groups-container .device-group .device .device-block .button.delete {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/delete-device@2x.png);
    background-size: 32px 32px;
  }
}
.devices .device-groups-container .device-group .device .device-block .content-block {
  width: 223px;
  height: 32px;
  position: absolute;
  top: 0px;
  left: 0px;
  line-height: 32px;
  background-color: #d9f4f9;
  position: relative;
}
.devices .device-groups-container .device-group .device .device-block .content-block .title {
  font-family: 'ec_square_sans_proregular';
  padding: 0 0 0 10px;
  line-height: 32px;
  color: #273738;
}
.devices .device-groups-container .device-group .device .device-block .content-block .number {
  width: 32px;
  height: 32px;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: 'ec_square_sans_probold';
  text-align: center;
  line-height: 33px;
  background-color: #00afc9;
}
.devices .device-groups-container .device-group .device .device-block .content-block .count {
  width: 32px;
  height: 32px;
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  right: 16px;
  font-family: 'ec_square_sans_probold';
  text-align: center;
  line-height: 33px;
  background-color: #00afc9;
}
.devices .device-groups-container .device-group .device .device-block .content-block .energy-labels-block {
  width: 180px;
  height: 32px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.devices .device-groups-container .device-group .device .device-block .content-block .energy-labels-block .energy-labels-collection {
  width: 180px;
  height: 180px;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0 0 0 34px;
}
.devices .device-groups-container .device-group .device .device-block .content-block .energy-labels-block .energy-labels-collection .energy-label {
  border: none;
  padding: 8px;
  height: 16px;
}
.devices .device-groups-container .device-group .device .device-block .content-block .energy-labels-block .energy-labels-collection .energy-label span.label {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  line-height: 17px;
  padding: 0 0 0 5px;
  top: auto;
  left: auto;
}
.devices .device-groups-container .device-group .device .device-block .content-block .button {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #f37020;
}
.devices .device-groups-container .device-group .device .device-block .content-block .button.edit {
  background-image: url(/Content/Images/UI/edit-device.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .devices .device-groups-container .device-group .device .device-block .content-block .button.edit {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/edit-device@2x.png);
    background-size: 32px 32px;
  }
}
.devices .device-groups-container .device-group .device .device-block .content-block .button.small {
  width: 16px;
}
.devices .device-groups-container .device-group .device .device-block .content-block .button.minus {
  right: 48px;
  background-image: url(/Content/Images/UI/minus-device.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .devices .device-groups-container .device-group .device .device-block .content-block .button.minus {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/minus-device@2x.png);
    background-size: 16px 32px;
  }
}
.devices .device-groups-container .device-group .device .device-block .content-block .button.plus {
  background-image: url(/Content/Images/UI/plus-device.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .devices .device-groups-container .device-group .device .device-block .content-block .button.plus {
    /* on retina, use image that's scaled by 2 */
    background-image: url(/Content/Images/UI/plus-device@2x.png);
    background-size: 16px 32px;
  }
}