1  html, body, div, span, applet, object, iframe,
  2  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3  a, abbr, acronym, address, big, cite, code,
  4  del, dfn, em, img, ins, kbd, q, s, samp,
  5  small, strike, strong, sub, sup, tt, var,
  6  b, u, i, center,
  7  dl, dt, dd, ol, ul, li,
  8  fieldset, form, label, legend,
  9  table, caption, tbody, tfoot, thead, tr, th, td,
 10  article, aside, canvas, details, embed,
 11  figure, figcaption, footer, header, hgroup,
 12  menu, nav, output, ruby, section, summary,
 13  time, mark, audio, video {
 14  	margin: 0;
 15  	padding: 0;
 16  	border: 0;
 17  	font-size: 100%;
 18  	font: inherit;
 19  	vertical-align: baseline;
 20  }
 21  /* HTML5 display-role reset for older browsers */
 22  article, aside, details, figcaption, figure,
 23  footer, header, hgroup, menu, nav, section {
 24  	display: block;
 25  }
 26  body {
 27  	line-height: 1;
 28  }
 29  ol, ul {
 30  	list-style: none;
 31  }
 32  blockquote, q {
 33  	quotes: none;
 34  }
 35  blockquote:before, blockquote:after,
 36  q:before, q:after {
 37  	content: '';
 38  	content: none;
 39  }
 40  table {
 41  	border-collapse: collapse;
 42  	border-spacing: 0;
 43  }
 44  
 45  body {
 46      background: #E0FCFF;
 47      font-family: 'Nunito', sans-serif;
 48      font-weight: 600;
 49  }
 50  
 51  #header {
 52      height: 108px;
 53      padding: 16px;
 54      background: #85BAC0;
 55      margin-bottom: 30px;
 56  }
 57  
 58  #header-inner {
 59      max-width: 1200px;
 60      margin: 0 auto;
 61  }
 62  
 63  h1 {
 64      width: 270px;
 65      height: 106px;
 66      background: url(logo.png) no-repeat;
 67      text-indent: -9999px;
 68      float:left;
 69  }
 70  
 71  #status {
 72      float: right;
 73      padding: 10px 20px;
 74      background: #fff;
 75      border-radius: 10px;
 76      color: #3E3E3E;
 77      font-size:20px;
 78      -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
 79      -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
 80      box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
 81      margin-top: 30px;
 82  }
 83  
 84  #status-listening, #status-stopped {
 85      cursor: pointer;
 86  }
 87  
 88  #status-listening span {
 89      margin-left: 25px;
 90  }
 91  
 92  .ring-container {
 93      position: relative;
 94  }
 95  
 96  .circle {
 97      width: 15px;
 98      height: 15px;
 99      background-color: #ff0000;
100      border-radius: 50%;
101      position: absolute;
102      top: 2px;
103  }
104  
105  .ringring {
106      border: 3px solid #ff0000;
107      -webkit-border-radius: 30px;
108      border-radius: 30px;
109      height: 25px;
110      width: 25px;
111      position: absolute;
112      left: -8px;
113      top: -6px;
114      -webkit-animation: pulsate 1s ease-out;
115      -webkit-animation-iteration-count: infinite;
116      opacity: 0.0
117  }
118  @-webkit-keyframes pulsate {
119      0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
120      50% {opacity: 1.0;}
121      100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
122  }
123  
124  #status.loading #status-listening,#status.loading #status-stopped {
125      display: none;
126  }
127  #status.listening #status-loading, #status.listening #status-stopped {
128      display: none;
129  }
130  #status.stopped #status-loading, #status.stopped #status-listening {
131      display: none;
132  }
133  
134  #content {
135      max-width: 1200px;
136      margin: 0 auto;
137  }
138  
139  #health {
140      padding: 30px;
141      margin-bottom: 30px;
142      border-radius: 5px;
143      line-height: 1.4;
144  }
145  
146  #health.good {
147      color: #13431B;
148      background: #5FD273;
149  }
150  #health.warn {
151      color: #434113;
152      background: #C6D25F;
153  }
154  #health.bad {
155      color: #431313;
156      background: #D25F5F;
157  }
158  
159  
160  #health.good .warn, #health.good .bad {
161      display: none;
162  }
163  #health.warn .good, #health.warn .bad {
164      display: none;
165  }
166  #health.bad .good, #health.bad .warn {
167      display: none;
168  }
169  
170  #charts {
171      padding: 30px 40px 40px 40px;
172      background: #C1A898;
173      border-radius: 5px;
174      margin: 0 auto;
175  }
176  
177  #resolutions {
178      text-align: center;
179      margin-bottom: 30px;
180  }
181  
182  #resolutions li {
183      padding: 10px 20px;
184      background: #fff;
185      display: inline-block;
186      border-radius: 10px;
187      color: #3E3E3E;
188      font-size:20px;
189      -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
190      -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
191      box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
192  }
193  
194  #chart-container {
195      background: #756458;
196      padding: 30px;
197      border-radius: 5px;
198  }
199  
200  #testdata {
201      margin-top: 30px;
202      border-top: 1px solid #85BAC0;
203      padding-top: 30px;
204  }
205  
206  #testdata h2 {
207      font-size: 24px;
208  }
209  
210  #testdata li {
211      background: #fff;
212      display: inline-block;
213      padding: 10px 20px;
214      border-radius: 10px;
215      color: #3E3E3E;
216      font-size:20px;
217      -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
218      -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
219      box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
220      margin-right: 20px;
221      margin-top: 10px;
222  }
223  
224  #testdata li:hover {
225      cursor: pointer;
226  }
227  
228  #disclaimer {
229      margin-top: 30px;
230      border-top: 1px solid #85BAC0;
231      padding-top: 30px;
232      line-height: 1.4;
233      color: #3E3E3E;
234      font-size:12px;
235  }
236  
237  #project {
238      width: 500px;
239      display: block;
240      margin: 30px auto 0 auto;
241  }