@charset 'UTF-8';
/* Copyright (C) 2014-2016 A M Bromley Limited ambromley.co.uk.
   All rights reserved. */
/* See dev.html for description of objectives, classes, work flows etc. */

/******************************************************************************/
/* Font */


    @import url(//fonts.googleapis.com/css?family=Roboto:300);


@font-face {
    font-family: mz;
    src:url('/multizone.woff');
}

html,
body,
select,
input {
    font-size: 18px;
    
        font-family: 'Roboto','Helvetica Neue',arial,sans-serif;
    
    overflow-x: hidden;
    overflow-y: auto;
}
.tab,
h1 {
    font-size: 24px;
}
h2 {
    font-size: 20px;
}
h3{
    font-size: 18px;
}
.minor,
p, ol, ul, dl, table {
    font-size: 16px;
}
.actionBar,
.actionBar input {
    font-size: 27px;
}
.iActual {
    font-size: 200%;
    font-weight: 900;
}
.iSet,
.iNow {
    font-weight: 900;
    font-size: 12px;
}
.iSet {
    position: relative;
    top: 0px;
}
.iActual .dp,
.iActual .units {
    font-size: 40%;
    position: relative; top: -15px;
}
.dp,
.units {
    font-size: 80%;
    position: relative; top: -0.2em;
}
.time .spinBox,
.time .spinBox input {
    font-size: 50px;
}
.footBar .iTimes {
    width: 9em; /* Force to max ("until 00:00 next Wed") so never resizes */
}

/******************************************************************************/
/* General preferences */

html, body{
    /* Fill full screen */
    width: 100%; height: 100%; margin: 0; padding: 0;
    position: fixed; top: 0px; bottom: 0px; /* needed on iOS7 */

    /* user selection by (mouse drag, long hold etc) is confusing so disable */
    user-select:none;
    -webkit-user-select:none; /* autoprefixer */
    -moz-user-select:none; /* autoprefixer */
    -ms-user-select:none; /* autoprefixer */

    /* Lets JavaScript handle touch events on IE */
    -ms-touch-action: none; 
}
input {
    border-width: 0; /* no border */
}
textarea:focus, input:focus{
    outline: 0; /* default blue outlines don't look right on touch devices */
}
select {
    display: inline-block;
}

/******************************************************************************/
/* Colours */

/* Primary500 is the main colour used for most things like title backgrounds.
   Primary comes in various shades going from 800 the darkest to 100 lightest.
   800 (if used at all) adds emphasis. 300 for less important things. 100 close
   but not white so you cas see this background on a white background. Accent is
   used sparingly and should contrast to draw the eye typically for a 'call to
   action' primary buttons. */
:root {
    /* Celsia is the default example: green = "primary" and orange = "accent" */
    --colourMin: #A5D7FF; /* Minimum settable temperature (currently 4) */
    --colourShivery: #C0CFAD; /* Well below comfort (currently 14) */
    --colourCool: #DBC75B; /* Lowest typical comfort temperature (currently 18) */
    --colourToasty: #FB7424; /* Highest typical comfort temperature (currently 22) */
    --colourMax: #FF4428; /* Maximum permitted (currently 30) */

    --cPageBackground: #e0e0e0;
    --cTextBackground: white;
    --cText: black;
    --cIcon: #888888;
    --cGridLine: #888888;
    --cNeutral: #CCCCCC;

    --cPrimary800: hsl(123, 41%, 45%);
    --cPrimary500: #4CAF50;
    --cPrimary300: #81C784;
    --cPrimary100: #C8E6C9;

    --cAccent500: #FF9800;
    --cWarn: #FFDD22;
    --cError: #EE2222;

}

html, body {
    background-color: var(--cPageBackground);
    color: var(--cText);
}
.iStep.active  {
    border-color: var(--cText);
}
.iWarn.icon,
.iAdjust {
    fill: var(--cText); stroke: var(--cText);
}
.icon,
.button {
    fill: var(--cIcon); stroke: var(--cIcon);
}
.cookieTable th,
.cookieTable td {
     border: 1px solid var(--cGridLine);
}
.iProgTimeline .night
.group,
input.title:focus,
.spinBox,
.iZone, /* except when JavaScript overrides colour */
input {
    border-color: var(--cNeutral);
}
.iCuiPanel .iAdjust:not(:active),
.iStep {
    background-color: var(--cNeutral);
}
input,
.iZone>div,
.popUp,
.dialog,
.card {
    background-color: var(--cTextBackground);
}
.spinBox,
.actionBar .button {
    fill: var(--cTextBackground); stroke: var(--cTextBackground);
}
.iProgTimeline>div>div:first-child {
    background-image: none !important;
}
.iProgTimeline>div>div {
    background: var(--cTextBackground);
    /* 2 pixel grey border on left */
    background-image: linear-gradient(to right,var(--cGridLine) 0%,var(--cGridLine) 2px,var(--cTextBackground) 2px);
    background-image: -webkit-linear-gradient(left,var(--cGridLine) 0%,var(--cGridLine) 2px,var(--cTextBackground) 2px); /* autoprefixer */
}
.tOptions {
    border-collapse:collapse;
}
.tOptions td,
.tOptions th {
    border-right: 1px solid var(--cTextBackground);
    border-bottom: 1px solid var(--cTextBackground);
    padding: 0.5em;
}
.iProgTimeline .night,
.iZone .title,
.iSet,
.textInput .iWarn {
    color: var(--cTextBackground);
}

.minor,
.button.minor {
    color: var(--cPrimary800);
}

.spinBox,
.button,
.progress,
.actionBar,
.actionBar .title,
.tOptions,
.tab.active {
    background-color: var(--cPrimary500);
    color: var(--cTextBackground);
}
.iExpand::before {
    color: var(--cPrimary500);
}

.group .listItem,
h1,
.button:hover,
.menu .listItem:hover,
.tab {
    background-color: var(--cPrimary300);
}
.tOptions td.active {
    background: var(--cPrimary300);
    color: var(--cText);
}

.group,
h2,
.iProg,
.iProg .footBar,
.card:hover,
.headline {
    background-color: var(--cPrimary100);
}
.colourDial {
    color: var(--cPrimary100);
    background-color: var(--cPrimary100);
}

/* Primary gradients */
.topMsg,
h1.active {
    background: linear-gradient(to bottom, var(--cPrimary300) 0%,var(--cPrimary100) 100%);
    background: -webkit-linear-gradient(top, var(--cPrimary300) 0%,var(--cPrimary100) 100%); /* autoprefixer */
}
h2.active {
    background: linear-gradient(to bottom, var(--cPrimary100) 0%,var(--cTextBackground) 100%);
    background: -webkit-linear-gradient(top, var(--cPrimary100) 0%,var(--cTextBackground) 100%); /* autoprefixer */
}

/* Primary and active buttons */
.button.iOK,
.button.iSave,
.button.iSend,
.button.iApply,
.button.iIAgree,
.button.iCreateAccount,
.button.iChangePassword,
.button.iSignOut,
.button:active,
.actionBar .button.active,
.button.active,
.progress.done,
.textInput .iWarn {
    background-color: var(--cAccent500);
}
.active.iExpand::before {
    color: var(--cAccent500);
}
input.title {
    border-color: transparent;
}
.tmp.button.active {
    box-shadow: 0px 0px 4px 4px var(--cAccent500);
}
.iBatteryLev.iOK .batt3,
.iBatteryLev.iLow .batt3,
.iBatteryLev.iFlat .batt3,
.iBatteryLev.iLow .batt2,
.iBatteryLev.iFlat .batt2 {
    fill: none;
}
.iBatteryLev.iLow .batt1 {
    fill: var(--cWarn);
}
.err input {
    border-color: var(--cError);
}
.errText,
.textInput .err {
    color: var(--cError);
}
.iBatteryLev.iFlat .batt1 {
    fill: var(--cError);
}

/* Temperatures: JavaScript needs to display temperature colours.
   We define key colours with these classes and JavaScript interpolates
   between then to get other all colours. */
.colourMin {
    color: var(--colourMin); /* Minimum settable temperature (currently 4) */
}
.colourShivery {
    color: var(--colourShivery); /* Well below comfort (currently 14) */
}
.colourCool{
    color: var(--colourCool); /* Lowest typical comfort temperature (currently 18) */
}
.colourToasty {
    color: var(--colourToasty); /* Highest typical comfort temperature (currently 22) */
}
.colourMax {
    color: var(--colourMax); /* Maximum permitted (currently 30) */
}

/* animation for StylesheetTestcard */
@keyframes colorCycle {
    0% { background-color: var(--colourMin); }
    25% { background-color: var(--colourShivery); }
    50% { background-color: var(--colourCool); }
    75% { background-color: var(--colourToasty); }
    100% { background-color: var(--colourMax); }
}
.tmpColorCycle { 
    animation: colorCycle 6s infinite linear alternate;
}

/******************************************************************************/
/* Rounded corners */

h1,
h2,
.tab,
.iZone>div,
.dialog,
.card,
.button,
.progress,
.textInput .iWarn,
.spinBox,
.tOptions {
    border-radius: 10px;
}
.dialog h1:not(.iExpand),
h1.active,
h2.active,
.tab {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.iZone>div {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
}
.iCuiPanel .iAdjust {
    border-radius: 30px;
}

/******************************************************************************/
/* Screen flexbox layout */

.screen {
    height: 100%;
    display: flex;
    display: -webkit-box; /* autoprefixer */
    display: -webkit-flex; /* autoprefixer */
    display: -ms-flexbox; /* autoprefixer */
    flex-direction: column;
    -webkit-box-orient: vertical; /* autoprefixer */
    -webkit-box-direction: normal; /* autoprefixer */
    -webkit-flex-direction: column; /* autoprefixer */
        -ms-flex-direction: column; /* autoprefixer */
}
.body {
    flex-grow: 1;
    -webkit-box-flex: 1; /* autoprefixer */
    -webkit-flex-grow: 1; /* autoprefixer */
        -ms-flex-positive: 1; /* autoprefixer */
    overflow: auto;
    padding-top: 9px;
    padding-bottom: 9px;
}
.popUp,
.footBar,
.actionBar {
    flex-shrink: 0;
    -webkit-flex-shrink: 0; /* autoprefixer */
        -ms-flex-negative: 0; /* autoprefixer */
    overflow: none; /* See stackoverflow 11072656 */
    z-index: 2; /* shadow above .body */
}
.actionBar {
    padding-top: 6px;
    padding-bottom: 6px;
}

/******************************************************************************/
/* Stuff that should be categorised */

hr {
    display: block;
    margin: 18px auto;
    border-style: inset;
    border-width: 2px;
}

.hidden, /* stackoverflow 3989388 */
.hidden2 { /* If it is hidden for a 2nd reason */
    display: none !important;
}
.invisible, /*It behaves like hidden but it places the object in the document
    as if it was there this helps if we don't want the screen jumping when we
    want to make an object hide and show when it is centre adjusted*/
.iHideDiscard .iDiscard {
    visibility: hidden;
}

.disableFloat,
.disabled {
    opacity: .5;
    pointer-events: none;
}

/* http://stackoverflow.com/questions/3705937 */
.clientTeciOS .screen { cursor: pointer; }

.group .listItem {
    min-width: 155px;
    min-height: 35px;
    display: inline-block;
    padding: 5px 45px 5px 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    cursor: pointer;
    vertical-align: top;
}

.secretButton {
    height: 25px;
    width: 25px;
}

.group .emptyList {
    text-align: center;
}
.tab {
    display: inline-block;
    margin: 5px 0px 0px 5px;
    cursor: pointer;
    padding-right: 5px;
    padding-left: 5px;
}
.tOptions td,
.tOptions th {
    width: 50%;
}
.topMsg,
.screen {
    height: 100%;
}
.screen {
    position: absolute; /* so javascript can slide it off-screen */
}
.topMsg {
    position: absolute; z-index: 4;
}
.topMsg,
.footBar,
.actionBar,
.screen {
    width: 100%;
}
.footBar {
    bottom: 0;
    display: table;
}
.footBar>div {
    /*border: solid red 1px;*/
}
.footBar .dialog {
    /* Left/Right padding avoids overlap with buttons.
       Top, bottom messes up table layout */
    padding: 0 40px 0 40px;
    min-height: 80px; /* Allow 2 image buttons vertically */
}
.footBar .spacer {
    display: table-cell;
    width: 10%;
}
.footBar .dialog>div>div {
    vertical-align: top; /* Somehow keeps table minimum height */
    display: inline-block;
}
.dialog,
.card {
    display: block;
    padding: 10px;
    max-width: 800px;
    margin: 10px auto;
}
.dialog h1:not(.iExpand) {
    margin: -10px -10px 10px -10px; /* Counteract .dialog padding. */
}
.footBar,
.dialog,
.topMsg,
.busy {
    text-align: center !important;
}
.tOptions,
.iExpand,
.iExpanded {
    padding-top: 1px;
    text-align: left !important;
}
.tCell1 div {
    display: inline-block;
}
.screen.iCreateAccount,
.screen.iSignIn>div {
    height: 100%;
    display: flex;
    display: -webkit-box; /* autoprefixer */
    display: -webkit-flex; /* autoprefixer */
    display: -ms-flexbox; /* autoprefixer */
    flex-direction: column;
    -webkit-box-orient: vertical; /* autoprefixer */
    -webkit-box-direction: normal; /* autoprefixer */
    -webkit-flex-direction: column; /* autoprefixer */
        -ms-flex-direction: column; /* autoprefixer */
    justify-content: center;
    -webkit-box-pack: center; /* autoprefixer */
    -webkit-justify-content: center; /* autoprefixer */
        -ms-flex-pack: center; /* autoprefixer */
}
.floatDialog,
.topMsg div,
.busy {
    /* Centre horizontally and vertically */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%); /* autoprefixer */
}
.iCuiPanel,
.busy {
    margin: auto;
}

.textInput {
    margin: 0.5em;
}
.textInput .err,
.textInput .prompt {
    display: block;
}
.iCaptcha,
.iLocation .body {
    text-align: center;
}
.iZone .title {
    text-align: left;
    margin: 0;
    padding: 0;
    overflow: hidden; width: 100%; /* For long names like "WWWWWWWWWWWWWWW" */
}
.iZone {
    margin: 4px 9px 0 0;
    padding: 0;
    border-width: 19px; /* 1px taller than the font. Affects stuff below... */
    border-style: solid;
    display: inline-block;
    height: 102px; /* height of .iZone>div - our border-width */
    width: 252px; /* our height / 2 - our right border-width
                     + .iZone>div width + .iZone>div padding */
    border-top-left-radius: 70px; /* our height / 2 + our border-width */
    border-bottom-left-radius: 70px;/* as above */
}
.iZone>div {
    text-align: center;
    width: 170px;
    padding-right: 40px; /* for buttons etc */
    height: 121px;
}
.actionBar input.title {
    width: 60%; /* allows title + 3 buttons on my phone */
}
.group,
input[type="number"],
input[type="time"],
input[type="text"],
input[type="password"],
input[type="email"] {
    -webkit-appearance: none; /* Otherwise looks funny on apple */
    border-width: 1px;/*CSS LINT WARNING, not with height/width*/
    border-style: solid;
}
.inputcheck {
    display: block;
}
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 17em;
}

.group {
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 5px;
    /*min-height: 10em;*/
    text-align: left;
}

input[type="time"] {
    width: 8ch;
}

h1.iExpand,
h2.iExpand,
.iStep,
.iAdjust,
input[type="button"],
.button {
    -webkit-appearance: none; /* Otherwise looks funny on apple/iOS */
    cursor: pointer;
}
input.icon {
    cursor: default;
}

/* In actionBar buttons most buttons are floated right. Specific buttons
   may have exceptions below. */
.onRight,
.actionBar .button {
    float: right;
}

/* Use same shadow style for all shadows. */
.iAdjust:hover,
.button:hover,
.card,
.dialog,
.popUp,
.headline,
.actionBar {
    box-shadow: 0 2px 2px 0 var(--cGridLine);
}
.headline {
    text-align: center;
}
.popUp {
    z-index: 3;
    padding: 0.5em;
}
label,
.menu .listItem  {
    cursor: pointer;
    white-space: nowrap;
    padding: 0.5em;
}

.progress {
    width: 15px; height: 15px;
    display: inline-block;
    margin: 0px 5px;
}
.button { /* Default button style is text */
    vertical-align: middle;
    padding: 0.3em;
    margin: 0.2em;
}
.actionBar .button { /* actionBar buttons are are exceptions to .button */
    padding: 0; margin: 0.1em 0.1em 0 0;
}

.icon {
    background: transparent center no-repeat;
}

/* These buttons are styled as text to de-emphasize them */
.button.minor {
    display: block;
    background-color: transparent;
    box-shadow: none;
}
.button.minor:hover {
    text-decoration: underline;
}

.button.iSignIn {
    width: 100%;
}
p .button.minor {
    display: inline-block;
}

.button.hasSvg,
.icon.hasSvg {
    display: inline-block;
    background-color: transparent;
    margin: 0;
    /* padding: 5px; width: 30px; height: 30px; Easy to change size */
    padding: 8px; width: 24px; height: 24px;
}
svg {
    width: 100%; height: 100%;
}
.icon.hasSvg.asText {
    padding: 0;
    vertical-align: middle;
}
.iProg .body {
    overflow: auto;
    width: 95%; margin: auto;
}
.iProgContainer {
    /* Program screen content is scrollable, vertically and horizontally */
    white-space: nowrap;
}
.iProgList {
    opacity: .8;
}
.iProgContainer,
.iProgTimeline,
.iProgList {
    height: 212px; /* iDow height * 7 + .iStep + border*2*/
}
.iProgTimeline,
.iProgList {
    z-index: 0;
    width: 100%;
    position: absolute;
}
.iProgTimeline>div>div {
    padding-top: 5px;
    height: 100%;
    display: inline-block;
}
.iDow {
    display: table;
    height: 30px; /* .iStep height+border */
    width: 100%;
}
.iDow .title {
    display: table-cell; width: 3em;
}
.iStep.active  {
    border-left-width: 8px; /* So can see overlapped steps. */
}
.busy {
    z-index: 2;
}
.iDow.active .iStep  {
    z-index: 1; /* so borders of all active .iSteps are not obscured */
}
.iStep:not(.active):first-child  {
    z-index: 0; /* below first active step of previous day */
}
.iStep.active:last-child  {
    z-index: 2; /* so last of day is not overlapped by first of next day. */
}
.iStep {
    border: solid var(--cTextBackground) 2px;
    position: absolute; right: 0;
    height: 28px; /* affects .iProgList/.iDow height */
    border-radius: 0;
    border-right-width: 0;
    border-top-left-radius: 20em;
    border-bottom-left-radius: 20em;
}
.iStep.first {
    border-radius: 0;
    border-left-width: 0;
    width: 200px;
}
.tOptions {
    width: 100%;
}
textarea.iDocument {
    width: 100%;
}
h1,h2 {
    margin: 10px 0 0 0;
}
.iExpand::before {
    font-family: "mz";
    margin: 8.5px;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    content: "\e901";
    transition: 300ms;
    -webkit-transition: 300ms; /* autoprefixer */
}
.active.iExpand::before {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg); /* autoprefixer */
}
.leaf.iExpand::before { /* Aligned with iExpand. Not actually expandable */
    content: "\25cf";/*Circle*/
}
.indent {
    text-align: left;
    padding: 0 0 0 1em;
}

.cookieTable {
   border-collapse: collapse;
}
.cookieTable td:nth-child(1) {
    font-weight: bold;
    text-align: center;
}
.cookieTable th {
    font-weight: normal;
    text-align: center;
}
.cookieTable th:nth-child(3) {
    width:75%;
}


/******************************************************************************/
/* Dragging */

.iStep.draggable {
    cursor: ew-resize;
    touch-action: pan-y; /* see draggable.js */
}

/******************************************************************************/
/* Spin box general. See original
   http://code.stephenmorley.org/javascript/spin-box-widget */
.spinBox {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
}
.spinBox input {
    padding: 0.25em;
    border-style: solid;
    border-width: 1px;
    text-align: right;
}
.spinBoxUp,
.spinBoxDown{
    position: absolute;
    display: block;
    cursor: pointer;
}
.spinBox svg {
    margin: auto;
    width: 24px; height: 34px;
}
.spinBoxUp{
    top: 0;
}
.spinBoxDown{
    bottom: 0;
}

/******************************************************************************/
/* TmpControl elements */
div.tmp,
.icon.tmp {
    vertical-align: middle;
}
.tmpAdj svg {
    width: 30px;
}
.tmpAdj {
    width: 100%; height: 30px;
    text-align: center;
}
.tmp {
    display: inline-block;
    text-align: center;
    top: 0px;
    position: relative;
}
.tmp.big .value {
    width: 10em; height: 10em; /* Read by Javascript */
}
.tmp .button.iOK { /* Round button centred in tmp value */
    position: absolute; left: 3.25em; top: 3.25em;
    width: 3em; height: 3em;
    border-radius: 1.5em;
}
.tmp.big .icon {
    width: 4.4em; height: 4.4em;
    margin: auto; /* Centre horizontally */
}
.iZone div.tmp,
.iZone div.time {
    position: relative;
    top: 15px;
    right: -5px;
}
.tmp .spinBox {
    padding-right : 0.875em; /* space for Up/Down */
}
.tmp .spinBox input {
    width: 4ch;
}
.tmp .spinBoxUp,
.tmp .spinBoxDown{
    right: 0;
    width: 0.75em;
    height: 0.75em;
}

/******************************************************************************/
/* spinBox for time.  */

.iCaptcha > div,
.time {
    display: inline-block;
}
.time .spinBox {
    padding-top: 0.875em; padding-bottom: 0.875em; /* space for Up/Down */
}
.time .spinBox input {
    /* width: 2ch; ^^^Javascript fixes width */
    border-width: 1px 0;
}
.group,
.time .spinBoxUp,
.time .spinBoxDown{
    width: 100%;
}

/******************************************************************************/
/* SVG bits and bobs  */

.iPowerLev.pct0 { visibility: hidden; }
.iPowerLev.pct1-33 .heat1,
.iPowerLev.pct34-67 .heat1,
.iPowerLev.pct68-99 .heat1,
.iPowerLev.pct1-33 .heat4,
.iPowerLev.pct34-67 .heat4,
.iPowerLev.pct1-33 .heat3 {
    stroke: none;
}

/* LED red/green on/off. The 'off' has an afterglow gives user feedback when
   flashing changes to off */
.iCuiPanel.iFlashOff .iFlash .iGwLedRed,
.iCuiPanel.iFlashOff .iFlash .iGwLedGreen { opacity: .4; }
.iCuiPanel .iLedGreen .iGwLedGreen,
.iCuiPanel .iLedRed .iGwLedRed { visibility: visible }

/* .tmp.buttons do their own thing */
.tmp.readOnly,
.tmp.button {
    background: transparent;
    min-width: 60px;
    width: 60px; height: 60px;
    border-radius: 30px;
    padding: 0; margin: 0;
}
.tmp .iSet {
    padding-top: 10px;
}

.iCuiPanel {
    margin-bottom: 30px;
}

/******************************************************************************/
/* Specific positions */

.iAdjust,
.iProgContainer,
.spinBox ,
.iCuiPanel,
.group .listItem,
td,
.textInput,
.dialog,
.card {
    position: relative; /* So elements within can be positioned absolute. */
}
.popUp {
    position: absolute;/* position set by Javascript */
}
.actionBar .iAccount,
.actionBar .iBack {
    float: left !important; /* Position left because 'system scope' */
}
.iZone .title {
    position: absolute; top: -21px; left: 61px;
    width: 208px;
}
.iZone .iWarn {
    position: absolute; top: -3px; left: 0px;
}
.iZone .iBatteryLev {
    /* position: absolute; bottom: -24px; left: 40px; /*bottom of border*/
    position: absolute; bottom: -17px; left: 219px; /* Bottom right */
    z-index: 1; padding:0; /* Ugly to avoid it masking overlapping button */
    width: 11px; height: 19px;
}
.group .listItem .iDiscard,
.footBar .dialog .iRemove,
.textInput .iWarn,
.footBar .iWarn,
.iZone .iEdit {
    position: absolute; top: 0; right: 0;
}
.footBar .dialog .iAdd {
    position: absolute; top: 0; left: 0;
}
.footBar .dialog .iPrev {
    position: absolute; bottom: 0; left: 0;
}
.footBar .dialog .iOK,
.footBar .dialog .iNext {
    position: absolute; bottom: 0; right: 0;
}
.iZone .iAdvance {
    position: absolute; top: 40px; right: 0;
}
.iZone .iRemove,
.iZone .iBoost {
    position: absolute; top: 80px; right: 0;
}
.iActual .iNow {
    position: absolute; top: -10px; left: 10px;
}
.iZone .iActual {
    position: absolute; top: 30px; left: -40px;
}
.iZone .iPowerLev {
    position: absolute; bottom: 0px; left: 0px;
    width: 36px; height: 36px; padding:0;
}
.footBar .dialog .title {
    position: absolute; top: 0; left: 0.5em;
}
.alert {
    position: absolute; top: 1px; right: 1px;
}

.iCuiPanel .iLedPowerOn,
.iCuiPanel .iLedL1,
.iCuiPanel .iLedL2,
.iCuiPanel .iLedL3 {
    position: absolute; top: 68px;
    width: 30px;height: 30px;
}
.iCuiPanel .iLedPowerOn {
    left: 37px;
}
.iCuiPanel .iLedL1 {
    left: 87px;
}
.iCuiPanel .iLedL2 {
    left: 112px;
}
.iCuiPanel .iLedL3 {
    left: 137px;
}
.iLedLines {
    position: absolute; top: 84px; left: 84px;
}
.iButtonLegend {
    position: absolute; top: 0px; left: 120px;
}
.iCuiPanel .iAdjust svg,
.iAdjust {
    width: 45px;height: 45px;
}
.iAdjust svg {
    position: absolute; top: 0; left: 0;
}
.iCuiPanel {
    width: 364px; height: 154px;
}
.iAdjust span {
    position: relative; top: 12px;
}
.iCuiPanel .iAdjust {
    position: absolute; top: 66px;
}
.iModePair {
    position: absolute; top: 7px; right: 112px;
    font-weight: bold;
    word-spacing: 30px;
}
.iCuiPanel .iLedL1 .iAdjust {
    left: -32px;
}
.iCuiPanel .iLedL2 .iAdjust {
    left: -7px;
}
.iCuiPanel .iLedL3 .iAdjust {
    left: 18px;
}
.secretButton {
    position: absolute; top: 10px; right: 10px;
}
.iZone>div {
    position: absolute; bottom: -19px; right: -19px; /* iZone border-width */
}