body {
  background-color:#b9d9eb;
  font-family: sans-serif;
  padding: 30px;
  height:100%;
}

.headLine {
    opacity: 1;
    position: absolute; 
    margin: auto;
	top:0px;
	left:0px;
    width:333px;
    height:580px;

}
#buttons {
    opacity: 1;
    position: relative; 
	display:block;
	z-index: 0;
	top:30px;
	left:0px;
	width: 300px;
    cursor: pointer;
}

.frameContent {
	width: 276px;
	height: 580px;
	position: absolute;    
	margin:auto;

	top:0;
	left:415px;
}

#swatch {position:absolute; display:block; bottom:0; left:400px; background:url(../images/watch.png) 50% no-repeat; width:184px; height:300px;}

#device {
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
    width:276px;
    height:580px;

    background: url("../images/jetBlack-chrome.png");
	background-size: 276px 580px; 
}

#background {
    position: absolute; 
	display:block;
	z-index: 0;
	overflow:hidden;
	top:0px;
	left:-415px;
    width:250px;
    height:445px;

    background: url("../images/s1f1-graph.png");
	background-size: 250px 445px; 
}
#backgroundOverlay {
	opacity: 1;
    position: absolute; 
	display:block;
	z-index: 1;
	overflow:hidden;
	top:0px;
	left:251px;
    width:250px;
    height:445px;

    background: url("../images/s1f2-eventLog.png"); /* the used image will be set by individual page JS */
	background-size: 250px 445px; 
}

#container {
	z-index: 110;
	top:130px;
	left:0px;
	height:290px;/*  gets recalculated in .js before written to page */
	overflow:hidden; 
	padding:0; 
	position:absolute;
}

#lineAmain {opacity: 0}
#lineAsupply {opacity: 0}
#lineA2main {opacity: 0}
#lineA2supply {opacity: 0}
#lineA3main {opacity: 0}
#lineA3supply {opacity: 0}
#lineA4main {opacity: 0}
#lineA4supply {opacity: 0}
#lineA5main {opacity: 0}
#lineA5supply {opacity: 0}
#lineA6main {opacity: 0}
#lineA6supply {opacity: 0}
#lineA7main {opacity: 0}
#lineA7supply {opacity: 0}
#lineBmain {opacity: 0}
#lineBsupply1 {opacity: 0}
#lineBsupply2 {opacity: 0}
#lineBsupply3 {opacity: 0}
#lineB5main {opacity: 0}
#lineB5supply {opacity: 0}
#lineB7main {opacity: 0}
#lineB7supply {opacity: 0}
#lineCmain {opacity: 0}
#lineCsupply {opacity: 0}
#lineC5main {opacity: 0}
#lineC5supply {opacity: 0}

#textA {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
    width:277px;
    height:137px;

    background: url("../images/s1f1-txtA_currentGlucose.svg");
	background-size: 277px 137px; 
}
#textB {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
    width:235px;
    height:136px;

    background: url("../images/s1f1-txtB_eventMarkers.svg");
	background-size: 235px 136px; 
}
#textC {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
    width:272px;
    height:95px;

    background: url("../images/s1f1-txtC_glucoseHistory.svg");
	background-size: 272px 95px; 
}

#yellowDot-previous {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
	cursor: pointer;
}
#yellowDot-next {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
	cursor: pointer;
}
#greenDot-next {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
	cursor: pointer;
}
#sugariq {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
	cursor: pointer;
}
#topLeftDot {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
	cursor: pointer;
}
#topRightDot {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
	cursor: pointer;
}
#alertClick {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
	width:250px;
	cursor: pointer;
}
#alertClick.pulse {
border-radius:10px; cursor: pointer;
box-shadow: 0 0 0 rgba(255,206,0, 1);
background:rgba(204,169,44, 0.7);
animation: pulse 2s infinite;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,0, 1);
    -webkit-background:rgba(204,169,44, 0.7);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204,169,0, 0);
      -webkit-background:rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,0, 0);
      -webkit-background:rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,0, 1);
    box-shadow: 0 0 0 0 rgba(204,169,44, 1);
    background:rgba(204,169,44, 0.7);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,0, 0);
      box-shadow: 0 0 0 10px rgba(204,169,0, 0);
      background:rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,0, 0);
      box-shadow: 0 0 0 0 rgba(204,169,0, 0);
      background:rgba(204,169,44, 0);
  }
}
#iconClick {
    opacity: 0;
    position: absolute; 
	display:block;
	z-index: 0;
	top:0px;
	left:0px;
	width:40px;
	height:40px;
	cursor: pointer;
}

.box {
	top:0px;
	left:-787px;
/* 	right:0px; */
	position: relative;
	display:block;
	width:1002px;
	height:290px;
    background: url("../images/graphOnly.png");
	background-size: 1002px 290px; 
}