@charset "utf-8";
/* CSS Document */

/* copyright Lochinvar, LLC. 2019 for more info contact echase@lochinvar.com */




body{
height:100%;
width:100%;
margin:0;
padding:0;
border:0;
background-color:#333;
font-family: 'Calibri', Fallback, sans-serif;
}

@font-face {
  font-family: 'Calibri';
  src: url('Calibri.eot'); /* IE9 Compat Modes */
  src: url('Calibri.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Calibri.woff') format('woff'), /* Modern Browsers */
       url('Calibri.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('Calibri.svg#svgFontName') format('svg'); /* Legacy iOS */
}

.plate{
position:relative;
margin-left:auto;
margin-right:auto;
height:auto;
width:900px;
}
	
	
.label{
position:relative;
width:100%;
z-index:0;
}
	

 .logo{
position:relative;
max-width:375px;
margin-left:auto;
margin-right:auto;
z-index:99;
margin-top:1%;
margin-bottom:1%;
}

#left{
position:absolute;
height:10%;
width:8%;
left:21.7%;
bottom:12em;
opacity:0;
border:none;
border-radius:60em;
-webkit-tap-highlight-color: rgba(0,0,0,0);
cursor:pointer;
}

#right{
position:absolute;
height:10%;
width:8%;
right:21.7%;
bottom:12em;
opacity:0;
border:none;
border-radius:60em;
-webkit-tap-highlight-color: rgba(0,0,0,0);
cursor:pointer;
}

#knob{
position:absolute;
height:10%;
width:8%;
right:46%;
bottom:7.7em;
opacity:0;
border:none;
border-radius:60em;
-webkit-tap-highlight-color: rgba(0,0,0,0);
cursor:pointer;
}

#up{
position:absolute;
height:10%;
width:15%;
left:30.5%;
bottom:7.7em;
border:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
cursor:pointer;
color:#FFF;
text-align:right;
opacity:0;
}

#down{
position:absolute;
height:10%;
width:15%;
right:30.5%;
bottom:7.7em;
border:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
cursor:pointer;
color:#FFF;
text-align:left;
opacity:0;
}

.instructions{
position:relative;
margin-left:auto;
margin-right:auto;
width:100%;
color:grey;
margin-top:1%;
text-align:center;
}

#startupScreen{
position:absolute;
height:15em;
width:26%;
top:16.5em;
left:37.15%;
opacity:1;
}

.blueBoy{
position:absolute;
height:65%;
left:3%;
top:20%;
}


#screen{
position:absolute;
height:15em;
width:26%;
top:16.5em;
left:37.15%;
opacity:0;
}



.house{
color:#2318B3;
text-shadow:1px 1px 2px #333;
top:20px;
}

#house{
color:#2318B3;
text-shadow:1px 1px 2px #333;
top:20px;
}

#status{
position:absolute;
top:0;
left:.25em;
z-index:1;
font-size:1.8em;
padding:0;
border:0;
margin:0;
color:#2318B3;
text-shadow:1px 1px 2px #333;
}

/*-----------------shutdown----------*/

#shutdownPrompt{
position:absolute;
height:15em;
width:230px;
top:16.5em;
left:37.15%;
opacity:0;
}

#shutdownStatus{
position:absolute;
top:0;
left:.25em;
z-index:1;
font-size:1.8em;
padding:0;
border:0;
margin:0;
color:#2318B3;
text-shadow:1px 1px 2px #333;
}


#shutdownLine1{
position:absolute;
top:100px;
left:0;
	width:230px;
	text-align:center;
z-index:1;
font-size:100%;
padding:0;
border:0;
margin:0;
color:#2318B3;
text-shadow:1px 1px 2px #333;
	opacity:0;
}

#shutdownLine2{
position:absolute;
top:120px;
left:0;
	width:230px;
	text-align: center;
z-index:1;
font-size:100%;
padding:0;
border:0;
margin:0;
color:#2318B3;
text-shadow:1px 1px 2px #333;
	opacity:0;
}

/*-----------wizard---------------------------*/

#wizard{
position:absolute;
height:15em;
width:26%;
top:16.5em;
left:37.15%;
opacity:0;
}

#statusW{
position:absolute;
top:0;
left:.25em;
z-index:1;
font-size:1.8em;
padding:0;
border:0;
margin:0;
color:#2318B3;
text-shadow:1px 1px 2px #333;
}

#wbottomline{
position:absolute;
bottom:0%;
left:2.5%;
width:95%;
height:10%;
border-top:2px solid #2318B3;
}

#wbottomLineLeft{
position:absolute;
text-align:left;
bottom:2%;
left:1%;
width:30%;
height:100%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#wbottomLineMiddle{
position:absolute;
text-align:center;
bottom:2%;
left:30%;
width:40%;
height:100%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#wbottomLineRight{
position:absolute;
text-align:right;
bottom:2%;
right:1%;
width:30%;
height:100%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#wizardTitle{
position:absolute;
top:25%;
left:16%;
z-index:1;
font-size:150%;
padding:0;
border:0;
margin:0;
color:#2318B3;
text-shadow:1px 1px 2px #333;
opacity:1;
}

#wizLine1{
position:absolute;
top:45%;
left:42.5%;
z-index:1;
font-size:100%;
padding:0;
border:0;
margin:0;
color:#2318B3;
text-shadow:1px 1px 2px #333;
}

#wizChangeLine{
position:absolute;
display:inline-block;
top:55%;
left:0%;
width:100%;
z-index:1;
text-align:center;
font-size:120%;
padding:0;
border:0;
margin:0;
color:#2318B3;
text-shadow:1px 1px 2px #333;
}

#wizHour{
position:absolute;
left:30%;
opacity:1;
}

#wizSpacer1{
position:absolute;
left:40%;
}

#wizMinute{
position:absolute;
left:45%;
}

#amPm{
position:absolute;
left:60%;
}

/*----------end wizard------------------*/



#pumpone{
position:absolute;
top:2.5em;
left:.5em;
z-index:1;
font-size:1em;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#pumptwo{
position:absolute;
top:2.5em;
left:7em;
z-index:1;
font-size:1em;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#pumpthree{
position:absolute;
top:4.2em;
left:.5em;
z-index:1;
font-size:1em;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#pumpfour{
position:absolute;
top:4.2em;
left:7em;
z-index:1;
font-size:1em;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#circleone{
position:absolute;
top:1.4em;
left:3em;
z-index:1;
font-size:1.5em;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#circletwo{
position:absolute;
top:1.4em;
left:8em;
z-index:1;
font-size:1.5em;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#circlethree{
position:absolute;
top:2.5em;
left:3em;
z-index:1;
font-size:1.5em;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#circlefour{
position:absolute;
top:2.5em;
left:8em;
z-index:1;
font-size:1.5em;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#bottomline{
position:absolute;
bottom:0%;
left:2.5%;
width:95%;
height:10%;
border-top:2px solid #2318B3;
}

#wbottomline{
position:absolute;
bottom:175px;
left:337px;
width:230px;
height:10%;
border-top:2px solid #2318B3;
opacity:0;
}

#bottomLineLeft{
position:absolute;
text-align:left;
bottom:2%;
left:1%;
width:30%;
height:100%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#bottomLineMiddle{
position:absolute;
text-align:center;
bottom:2%;
left:30%;
width:40%;
height:100%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#bottomLineRight{
position:absolute;
text-align:right;
bottom:2%;
right:1%;
width:30%;
height:100%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#bigsix{
height:50%;
width:100%;
position:absolute;
top:40%;
}

#arrow{
position:absolute;
top:0%;
left:1.5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
	opacity:0;
	font-size:.8em;
}

#passOne{
position:absolute;
width:100%;
text-align:center;
top:10%;
left:0%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:1em;
opacity:0;
}

#passTwo{
position:absolute;
width:100%;
text-align:center;
top:24%;
left:0%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:1em;
opacity:0;
}

#line1{
position:absolute;
top:0%;
left:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#line2{
position:absolute;
top:14%;
left:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#line3{
position:absolute;
top:28%;
left:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#line4{
position:absolute;
top:42%;
left:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#line5{
position:absolute;
top:56%;
left:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#line6{
position:absolute;
top:70%;
left:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#line7{
position:absolute;
top:84%;
left:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
opacity:0;
}



#tempTypeLine1{
position:absolute;
top:0%;
right:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempTypeLine2{
position:absolute;
top:14%;
right:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempTypeLine3{
position:absolute;
top:28%;
right:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempTypeLine4{
position:absolute;
top:42%;
right:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempTypeLine5{
position:absolute;
top:56%;
right:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempTypeLine6{
position:absolute;
top:70%;
right:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempTypeLine7{
position:absolute;
top:84%;
right:5%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
opacity:0;
}


#tempLine1{
position:absolute;
top:0%;
right:15%;
text-align:right;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempLine2{
position:absolute;
top:14%;
right:15%;
text-align:right;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempLine3{
position:absolute;
top:28%;
right:15%;
text-align:right;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempLine4{
position:absolute;
top:42%;
right:15%;
text-align:right;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempLine5{
position:absolute;
top:56%;
right:15%;
text-align:right;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempLine6{
position:absolute;
top:70%;
right:15%;
text-align:right;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
}

#tempLine7{
position:absolute;
top:84%;
right:15%;
text-align:right;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
font-size:.8em;
opacity:0;
}




/*----------------------------------------------------------IPAD AIR-------------------------------------------------------*/


@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  

#status{

top:.2em;
font-size:1.5em;

}

.pumpone{
position:absolute;
top:18%;
left:5%;
z-index:1;
font-size:80%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

.pumptwo{
position:absolute;
top:18%;
left:50%;
z-index:1;
font-size:80%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

.pumpthree{
position:absolute;
top:28%;
left:5%;
z-index:1;
font-size:80%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

.pumpfour{
position:absolute;
top:28%;
left:50%;
z-index:1;
font-size:80%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

.circleone{
position:absolute;
top:15%;
left:35%;
z-index:1;
font-size:120%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

.circletwo{
position:absolute;
top:15%;
left:87%;
z-index:1;
font-size:120%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

.circlethree{
position:absolute;
top:26%;
left:87%;
z-index:1;
font-size:120%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

.circlefour{
position:absolute;
top:26%;
left:35%;
z-index:1;
font-size:120%;
color:#2318B3;
text-shadow:.3px .3px 2px #333;
}

#bottomLineLeft{
position:absolute;
text-align:left;
bottom:2%;
left:1%;
width:30%;
height:100%;
color:#2318B3;
font-size:80%;
text-shadow:.3px .3px 2px #333;
}

#bottomLineMiddle{
position:absolute;
text-align:center;
bottom:2%;
left:30%;
width:40%;
height:100%;
color:#2318B3;
font-size:80%;
text-shadow:.3px .3px 2px #333;
}

#bottomLineRight{
position:absolute;
text-align:right;
bottom:2%;
right:1%;
width:30%;
height:100%;
color:#2318B3;
font-size:80%;
text-shadow:.3px .3px 2px #333;
}

#line1{
font-size:80%;
}

#line2{
font-size:80%;
}

#line3{
font-size:80%;
}

#line4{
font-size:80%;
}

#line5{
font-size:80%;
}

#line6{
font-size:80%;
}

#tempTypeLine1{
font-size:80%;
}

#tempTypeLine2{
font-size:80%;
}

#tempTypeLine3{
font-size:80%;
}

#tempTypeLine4{
font-size:80%;
}

#tempTypeLine5{
font-size:80%;
}

#tempTypeLine6{
font-size:80%;
}

#tempLine1{
font-size:80%;
}

#tempLine2{
font-size:80%;
}

#tempLine3{
font-size:80%;
}

#tempLine4{
font-size:80%;
}

#tempLine5{
font-size:80%;
}

#tempLine6{
font-size:80%;
}

#wizardTitle{
font-size:120%;
left:18%;
}

#wizLine1{
font-size:80%;
left:42.5%;

}

  
  }