body {
  margin:0px;
  padding: 0;
  /*width:2052px;*/
  text-align:left;
  background-color: rgba(255, 255, 255, 0);
}

#pump_aspect_control {
	width:100%;
	padding-bottom:75%;
	position:fixed;
    background-color:rgba(255, 255, 255, 0);
}

#pump_container {
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	max-width: 2048px;
	max-height: 1536px;
	position:absolute;
    background-color:rgba(255, 255, 255, 0);
}

#Map {
	width:2048rem;
	height:1536rem;
}

#Map area {
    outline: none;
}

#Led {
    position: absolute;
	top:769rem;
	left:252rem;
	width:396rem;
	height:466rem;	
	pointer-events: none;	
}

#Led img {
	width:396rem;
	height:466rem;
}

#display {
    margin: 0; padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
/* sizing */
#display {
    position: absolute;
    left: 720rem;
    top: 775rem;
    width: 604rem;
    height: 454rem;
}

#whiteScreen {
    position: absolute;
    left: 0rem;
    top: 0rem;
    right: 0rem;
    bottom: 0rem;
    background-color: white;
}

#onButtonMessage {
    position: absolute;
    left: 0rem;
    top: 0rem;
    right: 0rem;
    bottom: 0rem;
    background-color: purple;
    color: white;
    font-size: 40rem;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
    padding: 20% 10% 20% 10%;
    text-align: center;
}


/*.on { background-image:  url("../screenshots/HomeScreen.PNG");}*/
.on { background-image:  url("../images/u19.png"); }
.off {  background-color: #333; }
/*.run { background-image: url("../screenshots/HomeScreen.PNG"); }*/
.run { background-image: url("../images/u16.png"); }
.selftest { background-image: url("../images/logo_back.png"); background-size:cover;}
/*.menu2 {  background-size:cover; background-image: url("../screenshots/HomeIntermittent.PNG"); }*/
.menu2 {  background-size:cover; background-image: url("../images/u13.png");}
.none {background-image: none;}

/*** Temporary -- week 31 -- History ***/
.history {background-image: url("../images/hx_3day.png");}

/************* Status Bar ************/
#statusbar {
    font-family: Arial, Helvetica, sans-serif;
    color: #ccc;
    vertical-align: middle;
    padding: 0rem;
    margin: 5rem 0rem 0rem 25rem; /* top right bottom left */
    height: 40rem;
    font-size: 30rem;
}
#statusbar_text {
    display: inline-block;
    padding: 0; margin: 0;
    vertical-align: middle;
    height: 30rem;
    line-height: 30rem;
} 
#statusbar .batt { 
    display: inline-block;
    height: 100%;
    margin: 2rem 0rem 0rem 402rem; /* top right bottom left */
}
#statusbar .batt img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    width:auto;
    height: 25rem;
    padding: 0;
    max-height: 80%;
}
#batt_percentage {
    display: inline-block;
    vertical-align: middle;
    padding-left: 4rem;
    margin: 0;
    height: 24rem;
    line-height: 24rem;
    font-size: 24rem;
}

/***************** Footer  ************/
footer {
    color: #A0A0A0;
    position:absolute; top: 410rem;
    height: 32rem;
    font-family: "Arial Narrow", Arial;
    font-stretch: condensed;
    font-size: 32rem;  
}

footer > div {
    display: inline-block;
    text-align: center;
    width: 144rem;
    height: 32rem;
}

#orbit { width: 60rem;   position:absolute; top:15rem; left:50rem; }

/*************** Run / Pause Screen *************/
#run_screen {
    height:385rem;
}

#run_screen div {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    display: block;
	position: absolute;
}

#run_screen div.arrow {
    padding-left: 5rem;
    text-align: right;
}
#run_screen div.arrow img {
    display: block;
    vertical-align: middle;
    margin: 0 auto;
}
#run_screen div.firstrow {
    position:absolute; top: 0rem;
    width:100%;
    height: 160rem;
}
#run_screen div.secondrow {
    position:absolute; top: 160rem;
    height: 125rem;
    width:100%;
    line-height: 125rem;
}
#run_screen div.thirdrow {
    position: absolute; top: 302rem;
    height: 100rem;
    width:100%;
    line-height: 100rem;
}
#run_screen div.label {
    text-align: left;
    left: 4rem;
    width: 245rem;
    padding-left: 12rem;
    padding-top: 12rem;
    font-size: 56rem;
}
#run_screen div.value { 
    text-align: right;
    left: 364rem;
    width: 190rem;
    padding-top: 15rem;
    font-size: 90rem; 
}
#run_screen div.units { 
    font-size: 32rem;
    /*padding-left: 10rem*/
    font-family: "Arial Narrow", Arial;
    font-stretch: condensed;
    left: 286rem;
    width: 78rem;
    padding-top: 14rem;
    color: #BBBBBB;
}

/* run progress bar */
#runProgBar {
  position: absolute; left: 22rem; top: 57rem;
  width: 512rem;
  height: 52rem;
}

.runProgLayer {
	position: absolute;left:0rem;right:0rem;top:0rem;bottom:0rem;
}

#run_prog_img1 {
  position: absolute;
  width: 508rem;
  height: 38rem;
  border-style: solid;
  border-width: 2rem;
  border-color: white;
  border-radius: 9rem;
}
#run_prog_img2 {
  height: 38rem;
  width: 0rem;
  border-style: solid;
  border-width: 2rem;
  border-color: white;
  border-radius: 9rem 6rem 6rem 9rem;
  background-color: white;
}
#run_prog_img3 {
  width: 254rem;
  height: 38rem;
  border-style: solid none solid solid;
  border-width: 2rem;
  border-color: black;
  border-radius: 9rem 0rem 0rem 9rem;
}
#run_prog_text {
  position: absolute; left: 34rem; top: 61rem;
  font-size: 34rem;
  color:#2597d5!important;
  font-weight: 300;
}

.runProgIntP {
  position: absolute;
  width: 115rem;
  height: 38rem;
}

.runProgIntPCntnr {
  position: absolute; top: 0rem; bottom:0rem; left:0rem; right:0rem;
  border-style: solid;
  border-width: 2rem;
  border-color: white;
  border-radius: 9rem;
}

#runProgIntP1 {
	left: 46rem;
}
#runProgIntP2 {
	left: 196rem;
}
#runProgIntP3 {
	left: 346rem;
}

.runProgIntText {
  position: absolute; left: 10rem; top: 0rem; right: 10rem; bottom:0rem;
  font-size: 34rem;
  color:#2597d5!important;
  font-weight: 300;
}

.runProgIntFiller {
  position: absolute; top: 0rem; bottom:0rem; width:30rem;
}

.runProgIntPBar {
  left:0rem; top:0rem; bottom:0rem;
  width: 0rem;
  border-style: solid;
  border-width: 2rem;
  border-color: white;
  border-radius: 9rem 6rem 6rem 9rem;
  background-color: white;
}

#runProgIntPrev {
	left:0rem; width:46rem;
	background-image:url("../images/runProgIntMore.png");
}
#runProgIntGap1 {
	left:166rem;
	background-image:url("../images/runProgIntGap.png");
}
#runProgIntGap2 {
	left:316rem;
	background-image:url("../images/runProgIntGap.png");
}
#runProgIntNext {
	left:466rem; width:46rem;
	background-image:url("../images/runProgIntMore.png");
}

#run_mag_img {
  position: absolute; left: 470rem; top: 55rem;
  width: 68rem;
  height: 68rem;
}
/* run screen top right arrow - push down */
#right_img_1 { margin-top: 6rem;}

/* 'Portion' above 'Volume' if intermittent */
.run-portion {
    position: absolute;
    top: -40rem;
    left: 5rem;  
    font-size: 32rem; color: #eee!important;
}
/* Intermittent screens - below "total volume" shows portion info */
.run-row2-subtext {
    position: absolute; top: 55rem;  left: 20rem;   
    font-size: 32rem; color: #bbb!important;
}

/* xx:xx h to go */
#runprog_time_rem_holder {
    position: absolute; top: 108rem; left: 234rem;
    font-size: 32rem;
    color: white;
}

/**** Details ****/
.det_prog_img {
  position: absolute; left: 5rem; top: 34rem;
  height: 24rem;
}
#det_prog_img1 {width: 490rem;}
#det_prog_img2 {/*width: 85rem;*/}

.details_text {position: absolute; font-size: 24rem; /*margin-top: -4rem;*/}
#det_deliv_txt {left: 5rem; top: 4rem; font-size: 24rem;}
#det_vol_txt {left: 310rem;top: 4rem;}
#det_rem_txt {left: 250rem;top: 64rem;text-align: right;}

/*************** Self Test Screen *************/
.selftest-content-1 {
      position: absolute; left: 108rem; top: 160rem;
      height: 125rem; width: 390rem;  
      text-align: center;
      color: rgb(204, 204, 204);
      font-family: Arial;
      font-size: 24rem;
    }   
    .selftest-service { padding: 15rem; }
    .selftest-content-2 {
      position: absolute; left: 110rem; top: 324rem;
      height: 77rem; width: 390rem;         
      text-align: center;
      color: rgb(204, 153, 102);
      font-family: Arial; font-size: 24rem;
    }
    .selftest-101-img-1 {
      position: absolute; top: 368rem; left: 210rem;
      width: 193rem; height: 4rem;     
    }
    .selftest-101-img-2 {
      position: absolute; top: 368rem; left: 211rem;      
      height: 4rem;  /*width: 80rem;*/
    }

/*************** Fill Set Screen *************/
.fillset-content-1 {
      position: absolute; top: 150rem; left: 150rem;
      height: 100rem; width: 280rem;     
      text-align: center;
      color: white;
      font-family: Arial; font-size: 28rem;
      text-align: left;
}
/* 'stop' */
.fillset-content-2 {
    position: absolute;  top: 370rem; left: 50rem;
    height: 30rem; width: 335rem;
    text-align: center;
    color: white;
    font-family: Arial; font-size: 24rem;
}
#fs_img1 { position:absolute; left: 180rem; top: 24rem; width:237rem;height:342rem;}
#fs_anim { position:absolute; left: 332rem; top: 138rem; width:86rem;height:228rem;display:none;}

/*************** Error/Warning/Info Screens *************/
.error-header {
    position: absolute; top:20rem;
    height: 120rem; width: 599rem;
    text-align: center;
    color: yellow;
    font-family: Arial; font-size: 28rem;
}
.error-header img {
	height: 80rem;
}
.info-header {
    position: absolute; left: 20rem; top: 5rem;
    height: 50rem; width: 400rem;
    text-align: left;
    color: yellow;
    font-family: Arial; font-size: 32rem;
    display:inline block;
}
.info-header-img { position: absolute; left: 0rem; top: 5rem; height:42rem;}
/*#error_img { position: absolute; left: 210rem; top: 120rem;}*/
.err-text {
    position:absolute; top: 170rem;
    width: 599rem;
    text-align: center;
    color: yellow;
    font-family: Arial; font-size: 96rem;
}

.info-header-text { position: absolute; left: 60rem; top: 10rem;}
.info-text {
        font-family:Arial; font-size: 32rem;
        color: white;
        padding: 10rem;
        position: absolute; top: 40rem;
        margin: 20rem;
}
hr {
    width: 90%;
    height: 1rem;
    border:0;
    background:#909090;
    margin-top: 25rem; margin-bottom: 25rem;
}

/*************** Intermittent Review/Confirm screen *************/
/** TODO: Remove, no longer using **/
.intreview-header {
    position:absolute; top:5rem; left:20rem;
    font-size:30rem;  color: #ccc;
}
.intreview-content {
    font-family:Arial; font-size: 36rem; color: white;
    margin-top: 25rem; margin-left: 35rem;
}
.intreview-row {  margin:0; padding:0; width:515rem; }

.intreview-param { 
    display:inline-block;
    margin-bottom: 6rem; 
    width: 220rem;     
    padding-left: 10rem;
}
.intreview-value {
    display:inline-block;
    text-align:right;           
    width: 170rem;
    font-size: 38rem;
}
.intreview-units {
    display:inline-block;
    font-size: 28rem; color: #eee;          
    width: 75rem;       
    margin-left: 20rem;
}
.intreview-rtbutton {
    position:absolute; top: 370rem; left: 450rem;
    font-family:Arial; font-size: 38rem; color: #ddd;
}
.intreview-selectarrow {
    position: absolute; top: 370rem; left: 570rem;     
    height: 47rem; width: 21rem;
}

/*************** Portion Details Screen *************/
#p1white, #p1grey, #p2grey, #p3  {
    position: absolute; top: 55rem;
    width: 135rem; height: 42rem;
}
#p1white, #p1grey { left: 30rem; }
#p2grey { left: 200rem; }
#p3 { left: 370rem; }
#p2white {
    position: absolute; top: 55rem;
    width: 45rem; height: 42rem;
    left: 200rem;
}
#p1_line, #p2_line, #p3_line { 
    position: absolute; top: 90rem;
}
#p1_line { left: 164rem;}
#p2_line { left: 334rem;}
#p3_line { left: 505rem;}
#pdots {
    position: absolute; top: 25rem; left: 545rem;
    font-size: 76rem;
    color:#bbb;
}
#p1_text, #p2_text, #p3_text {
    position:absolute; top: 55rem;
    font-size:36rem; 
    color:black;
}
#p1_text { left: 45rem;}
#p2_text { left: 215rem;}
#p3_text { left: 385rem; }
#p1border, #p2border, #p3border {  
   position: absolute;
   top: 45rem;
   width: 160rem; height: 58rem;
   border: 3px solid yellow;
   border-radius: 5rem;
}
#p1border { left: 15rem; }
#p2border { left: 185rem; }
#p3border { left: 355rem; }

.pdetails-content1 {
    position:absolute; top: 106rem; left: 16rem;
    font-family:Arial; font-size:35rem; color: white;
    border: 3px solid yellow;
    border-radius: 5rem;
    padding: 10rem 20rem 5rem 20rem; /* top right bottom left */
}
.pdetails-content2 {
    position:absolute; top: 315rem; left: 30rem;
    font-size:35rem;
     /*color: #E5E4E2;*/ 
    /*color: #FEFFF5;*/
    color:  #FFFFD2;
}
.pdetails-param {
    display:inline-block;
    width: 310rem; 
    padding-bottom: 5rem; 
}
.pdetails-value {
    display:inline-block;
    width: 150rem; 
    text-align:right; 
}
/* arrows */
.pdetails-leftarrow { position: absolute;  top: 195rem; left: 550rem;  height:55rem}
.pdetails-rightarrow { position: absolute;  top: 345rem; left: 550rem;  height:55rem}


/*************** 'External' buttons *************/
#startstop_div {
    position: absolute; top:1280rem; left: 120rem;
}
#elapsed_time {
    position: absolute; top: 1380rem; left: 120rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size:48rem;
    color:#333;
}
#elapsed {
    font-family:Consolas;
    font-size:56rem;
}
#alarm_buttons {
    position: absolute; top: 1100rem; left: 1765rem;
}

.mybtn { 
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 22rem;
    width: 195rem; height: 70rem;
    margin: 10rem;
    padding: 2rem;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 6rem;
    background-image: none;
    border: 1px solid transparent;
    -webkit-appearance: button;
    cursor:pointer;
}
.mybtn:focus { outline:0;}
.mybtn:hover{color:#333;text-decoration:none}
.mybtn[disabled]{cursor:default;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}

/* blue buttons */
.mybtn-ltblue {color: #fff;background-color: #5bc0de;border-color: #46b8da;}
.mybtn-ltblue:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.mybtn-ltblue:active {color:#fff;background-color:#269abc;border-color:#1b6d85}
.mybtn-ltblue[disabled],.mybtn-ltblue[disabled]:active,
.mybtn-ltblue[disabled]:focus,.mybtn-ltblue[disabled]:hover{background-color:#5bc0de;border-color:#46b8da}
.mybtn-blue {color:#fff;background-color:#337ab7;border-color:#2e6da4}
.mybtn-blue:hover{color:#fff;background-color:#286090;border-color:#204d74}
.mybtn-blue:active {color:#fff;background-color:#204d74;border-color:#122b40}
.mybtn-blue[disabled],.mybtn-blue[disabled]:active,
.mybtn-blue[disabled]:focus,.mybtn-blue[disabled]:hover{background-color:#337ab7;border-color:#2e6da4}

/* grey/white buttons */
.mybtn-white {color:#333;background-color:#fff;border-color:#ccc;}
.mybtn-white:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}
.mybtn-white:active {color:#333;background-color:#d4d4d4;border-color:#8c8c8c}
.mybtn-white[disabled],.mybtn-white[disabled]:active,.mybtn-white[disabled]:focus,
.mybtn-white[disabled]:hover{background-color:#fff;border-color:#ccc}

/***************  Temporary *************/
#under-construction{
    display:none;
    position:absolute;
    top:600rem; left: 840rem;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style:italic;
    color:orange;
    font-size:28rem;
    text-align:center;
}

#btnDbg {
    position:absolute; top:200rem; left:100rem; height:45rem; width:160rem;
    font-size:30rem;
    margin: 5rem;
    padding: 2rem;
    background-color:white; border: 1px solid #ddd; color: #ddd;
}
#btnDbg2 {
    position:absolute; top:250rem; left:100rem; height:45rem; width:160rem; 
    font-size:30rem;
    margin: 5rem;
    padding: 2rem;
    background-color:white; border: 1px solid #ddd; color: #ddd;
}