@charset=utf-8

html {
    box-sizing: border-box;
    background-color: white;
}
body{
    margin-top: 2%;
    width: 100%;
    height: 100%;
    font-family: sans-serif;
    overflow: hidden;
}
*, *:before, *:after {
                 box-sizing: border-box;
             }

#wrapper{
    margin: auto;
    width: 100%;
    height: 100%;
}
img {
    width: 100%;
    height: auto;
}
#bg{
    margin: 0 10%;
    width: 70%%;
    position: relative;
}
.info-box{
    position: absolute;
    display: box;
    width: 6vw;
    height: 1vw;
    background-color: #EDD238;
    font-size: 1vw;
    display: table;
}
.data{
    display: table-cell;
    text-align: center;
    padding: 2%;
}

#updated{
    top: -2%;
    left: 0;
    position: absolute;
    font-size: 1.5vw;
}
#p_tot{
    top: 16%;
    left: 25%;
}
#p_comp{
    top: 16%;
    left: 44%;
}
#cop{
    top: 20%;
    left: 25%;
}
#p_ccirc{
    top: 15%;
    left: 67%;
}
#p_hcirc{
    top: 58%;
    left: 50%;
}
#rad1{
    top: 63%;
    left: 42%;
}
#rad2{
    top: 79%;
    left: 42%;
}
#raddelta{
    top: 72%;
    left: 42%;
}
#radpower_old{
    top: 67%;
    left: 52%;
    width: 7vw;
}
#radpower_new{
    top: 70%;
    left: 52%;
    width: 7vw;
}
#radpower_calc{
    top: 72%;
    left: 52%;
    width: 7vw;
}
#flow{
    top: 75%;
    left: 52%;
    width: 7vw;
}
#slos{
    top: 30%;
    left: 70%;
}
#slis{
    top: 4%;
    left: 76%;
}
#sli1{
    top: 18%;
    left: 75%;
}
#sli2{
    top: 18%;
    left: 89%;
}

#whi{
    top: 63%;
    left: 27%;
}
#who{
    top: 78%;
    left: 27%;
}
#tap{
    top: 73%;
    left: 0%;
}
#cwin{
    top: 85%;
    left: 0%;
}

#pd{
    top: 62%;
    left: 90%;
    width: 8vw;
}
#outside{
    top: 67%;
    left: 92%;
}
#indoor{
    top: 74%;
    left: 75%;
}
#garage{
    top: 74%;
    left: 92%;
	width: 5vw;
}
#indt{
    top: 80%;
    left: 75%;
}
#basement{
    top: 86%;
    left: 75%;
}