#TpmsContainer {
    font-family:Tipperary,verdana;
    top:0px;
    right:0;
    bottom:0;
    left:0;
    height:416px;
    width:800px;
    position:relative;
    font-family: 'Titillium', Arial, sans-serif;
}

#TpmsContainer .MBG1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 800px;
    height: 209px;
    background: url('http://192.168.0.10/page?var=file&val=/ui/TPMS/img/background1.jpg.gz') no-repeat scroll center center transparent;
}
#TpmsContainer .MBG2 {
    position: absolute;
    left: 0px;
    top: 208px;
    width: 800px;
    height: 208px;
    background: url('http://192.168.0.10/page?var=file&val=/ui/TPMS/img/background2.jpg.gz') no-repeat scroll center center transparent;
}
/* 

/* ************
 * Info Layer */
#TpmsContainer #InfoLayer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    font-family: 'Titillium', Arial, sans-serif;
}
/* Tire Containers */
#TpmsContainer #InfoLayer .tireContainer {
    position: absolute;
    width: 150px;
    height: 59px;
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .tireContainer.front {
    top: 64px;
}
#TpmsContainer #InfoLayer .tireContainer.rear {
    top: 286px;
}
#TpmsContainer #InfoLayer .tireContainer.left {
    text-align: right;
    direction: rtl;
    left: auto;
    right: 461px;
}
#TpmsContainer #InfoLayer .tireContainer.right {
    text-align: left;
    direction: ltr;
    right: auto;
    left: 462px;
}

#TpmsContainer #InfoLayer .tireContainer.FrontLeft {
    text-align: right;
    direction: rtl;
    left: auto;
    right: 490px;
	top: 87px;
}
#TpmsContainer #InfoLayer .tireContainer.RearLeft {
    text-align: right;
    direction: rtl;
    left: auto;
    right: 490px;
	top: 300px;
}
#TpmsContainer #InfoLayer .tireContainer.FrontRight {
    text-align: left;
    direction: ltr;
    left: auto;
    right: 159px;
	top: 87px;
}
#TpmsContainer #InfoLayer .tireContainer.RearRight {
    text-align: left;
    direction: ltr;
    left: auto;
    right: 159px;
	top: 300px;
}





/* Tire */
#TpmsContainer #InfoLayer .tireContainer .tire {
    position: relative;
    display: inline-block;
    width: 19px;
    height: 57px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 3px;
}
#TpmsContainer #InfoLayer .tireContainer .tire.warning {
    box-shadow: 10px 0 20px 0 rgba(200,0,0,.5), 0 -5px 10px 0 rgba(200,0,0,.5), 0 5px 10px 0 rgba(200,0,0,.5);
}
/* Bar Graph */
#TpmsContainer #InfoLayer .tireContainer .barGraph {
    position: relative;
    display: inline-block;
    width: 6px;
    height: 57px;
    background: rgba(255,255,255,.1);
    margin-left: 5px;
    margin-right: 5px;
    border-top: rgba(255,255,255,.5);
    border-bottom: rgba(255,255,255,.5);
    overflow: hidden;
}
#TpmsContainer #InfoLayer .tireContainer .barGraph .bar {
    position: absolute;
    width: 100%;
    bottom: 0;
    max-height: 57px;
    transition: all 1s ease;
}
#TpmsContainer #InfoLayer .tireContainer .barGraph .scale {
    display: none;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,1);
    display: block;
    z-index: 99;
    position: absolute;
    opacity: .5;
}
#TpmsContainer #InfoLayer .tireContainer .barGraph .scale.black {
    background: rgba(0,0,0,1);
}
#TpmsContainer #InfoLayer .tireContainer .barGraph .scale.scalewarn {
    display: none;
    background: rgba(255,0,0,1);
}
/* Pressure */
#TpmsContainer #InfoLayer .tireContainer .pressure {
    display: inline-block;
    position: absolute;
    font-family: sans-serif;
    color: #FFF;
    margin: 28px 5px auto;
    direction: ltr;
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .tireContainer .pressure .pressureValue {
    font-size: 35px;
    line-height: 15px;
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .tireContainer .pressure .pressureUnit {
    display: block;
    font-size: 16px;
    line-height: 16px;
    color: rgba(255,255,255,.5);
    font-family: 'Titillium', Arial, sans-serif;
}
/* Temperature */
#TpmsContainer #InfoLayer .tireContainer .temperature {
    display: inline-block;
    position: absolute;
    font-family: sans-serif;
    color: #FFF;
    margin: -2px 10px auto;
    direction: ltr;
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .tireContainer .temperatureValue {
    font-size: 20px;
    line-height: 20px;
    opacity: .6;
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .tireContainer .temperatureUnit {
    margin-left: 1px;
    font-size: 20px;
    line-height: 20px;
    opacity: .4;
    font-family: 'Titillium', Arial, sans-serif;
}


/* Voltage */
#TpmsContainer #InfoLayer .tireContainer .voltage {
    position: relative;
    font-family: sans-serif;
    color: #FFF;
    margin: -80px 2px auto;
    direction: ltr;
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .tireContainer .voltageValue {
    font-size: 10x;
    line-height: 10x;
   /* opacity: .8;*/
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .tireContainer .voltageUnit {
    margin-left: 1px;
    font-size: 10x;
    line-height: 10x;
    /* opacity: .8; */
    font-family: 'Titillium', Arial, sans-serif;
}




/* ************
 * Side Items */
#TpmsContainer #InfoLayer .sideItem {
    position: absolute;
    width: 125px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0);
    transition: all 1s ease;
}
#TpmsContainer #InfoLayer .sideItemLeft {
    left: 0;
    text-align: right;
    padding-left: 0;
    border-left: none;
}
#TpmsContainer #InfoLayer .sideItemRight {
    right: 0;
    text-align: left;
    padding-right: 0;
    border-right: none;
}
#TpmsContainer #InfoLayer .sideItemOne {
    top: 25px;
}
#TpmsContainer #InfoLayer .sideItem .sideItemTop {
    margin-bottom: 2px;
}
#TpmsContainer #InfoLayer .sideItem .sideItemTop .sideItemValue {
    font-size: 30px;
    line-height: 30px;
    color: rgba(255,255,255,1);
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .sideItem .sideItemTop .sideItemUnit {
    margin-left: 2px;
    font-size: 16px;
    line-height: 16px;
    color: rgba(255,255,255,.5);
    font-family: 'Titillium', Arial, sans-serif;
}




#TpmsContainer #InfoLayer .sideItem .sideItemBottom {
    border-top: 1px solid #fff;
    color: rgba(255,255,255,.5);
    font-size: 14px;
    line-height: 22px;
    font-family: 'Titillium', Arial, sans-serif;
}

/* ************
/* Voltage */

#TpmsContainer #InfoLayer .tireContainer .voltage {
    position: relative;
    font-family: sans-serif;
    color: #FFF;
    margin: -80px 2px auto;
    direction: ltr;
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .tireContainer .voltageValue {
    font-size: 10x;
    line-height: 10x;
   /* opacity: .8;*/
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .tireContainer .voltageUnit {
    margin-left: 1px;
    font-size: 10x;
    line-height: 10x;
    /* opacity: .8; */
    font-family: 'Titillium', Arial, sans-serif;
}


#TpmsContainer #InfoLayer .voltage2 .voltageValue {
	position: relative;
    font-size: 10x;
    line-height: 10x;
 /*	opacity: .8; */
    color: #FFF;
    font-family: 'Titillium', Arial, sans-serif;
}
#TpmsContainer #InfoLayer .voltage2 .voltageUnit {
    margin-left: 2px;
    font-size: 10x;
    line-height: 10x;
/*	opacity: .8; */
    color: #FFF;
    font-family: 'Titillium', Arial, sans-serif;
}


/* *************
 * Setup Layer */
 
#TpmsContainer #SetupLayer {
    display: none;
}

a.button {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
      line-height: 28px;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;

}


.button1 
{
	left: 670px;
    top: 370px;
	width: 100px;
    height: 30px;
	position: absolute;
	background-color: grey;
	z-index: 10;
} 