body { width: 90%; max-width: 1000px; margin: 10px auto; background: white; font-size: 16px; }

h1, h2, h3 { text-align: center; }
a { text-decoration: none; color: inherit; }
input { width: 230px; font-size: 100%; }

#back-home { position: absolute; top: 32px; }
button, #back-home a { background: #333; color: #FFF; border-radius: 5px; border: 1px solid #CCC; padding: 6px 10px; cursor: pointer; line-height: normal; font-size: 16px; margin: 0 10px; vertical-align: baseline; text-align: center; }
@media screen and (max-width: 783px) { #back-home a, button { font-size: 24px; } }
button:hover, #back-home a:hover { color: #FF8833; }

#input { padding: 10px; border: 1px solid #CCC; }
.left { float: left; }
.footer { font-size: small; color: #AAA; }
.input-field { padding: 4px 10px; }
.input-label { padding: 0 0 4px 0; }
.action-buttons { padding-top: 20px; padding-bottom: 6px; }
#progress_bar { margin: 60px 10px 6px 10px; padding: 3px; border: 1px solid #000; font-size: 14px; clear: both; opacity: 0;
  -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -webkit-transition: opacity 1s linear; }
#progress_bar.loading { opacity: 1.0; }
#progress_bar .percent { background-color: #99ccff; height: auto; width: 0; }

#output { display: none; max-width: 1000px; }
#summary { clear: both; width: 100%; margin: 10px auto 70px auto; }
#details { clear: both; width: 100%; margin: 10px auto; }
#google-map { margin-top: 20px; }
#chart-wrapper { width: 100%; margin: 30px auto 10px auto; }
#chart-legend { width: 100%; margin: 0 auto; padding-left: 40px; padding-bottom: 10px; }
.chart-legend-item { float: left; border: 1px solid #DDD; padding: 6px 8px; border-radius: 5px; margin-right: 10px; }
.chart-legend-item:hover { background-color: #222222; }

table { width: 100%; border-collapse: collapse; margin: 0 auto; }
th, td { border: 1px solid #ccc; padding: 10px; margin: 0; }
td { text-align: center; }
td.kml-folder { font-weight: bold; }
td.kml-placemark { text-align: left; }