/*body {
  background-color: #1A243F;
  padding: 30px;
  margin: 0px;
  position: relative;
}*/
*,html { margin:0; padding:0; }

body {
	background: #eee;
	font-size: 100%;
}

img {
  background: url(loading.gif) 50% no-repeat;
  min-height: 100px;
  min-width: 100px;
}

#header, #gas, #page, #footer, #errors {
	clear: both;
	width: 95%;
	margin: 0 auto 0 auto;
}

#header {
	margin: 0 auto 0 auto;
	text-align: center;
	overflow: hidden;
	padding: 3px 0 3px 0;
	border-bottom: 1px solid #fff;
	height: 200px;
	box-shadow: 3px 3px 6px -2px #bbb;
	-moz-box-shadow: 3px 3px 6px -2px #bbb;
	-webkit-box-shadow: 3px 3px 6px -2px #bbb;
	-o-box-shadow: 3px 3px 6px -2px #bbb;
	background: linear-gradient(#fff, #eee);
	background: -moz-linear-gradient(center top, #fff 30%, #eee 70%) repeat;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background: -o-linear-gradient(#fff, #eee);
	background-image: url("/aqi/bikeheader.jpg");
	background-position: center;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 2.5%;
	z-index: 10;
}

#header a#logo {
	float: left; width: 146px; height: 34px;
}

#header a:link, #header a:visited {
  background-color: #000000;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

#header a:hover, #header a:active {
  background-color: #555555;
}

#page {
	overflow: hidden;
	position: relative;
	margin-top: 200px;
	background-color: #fff;
	border: 1px solid #ccc;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	-o-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

#content {
	/*float: right;*/
	width: 100%;
	min-height: 500px;
	padding: 10px;
	color: #333;
	background-color: #fff;
	/*position: relative;*/
	/*margin: 0 auto;*/
	z-index: 1000;
}

#content h4 {
	width: 97%;
	margin-bottom: 5px;
	padding: 3px;
	color: #696065;
	font-weight: normal;
	background-color: #EBECF0;
	border: 1px solid #C5C5D1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

#content hr {
	margin: 4px 0 4px 0;
}

#sidebar {
	/*float: left;*/
	width: 45%;
	/*height: auto;*/
	padding: 10px;
	background-color: #f5f5f5;
	position: absolute;
	right: 0;
	left: 53%;
}

#sidebarhist {
	display: none;
}

#leftsidebarhist {
	display: none;
}

#aqihist {
	display: none;
}

#leftsidebar {
	/*float: left;*/
	width: 50%;
	padding: 10px;
	background-color: #f5f5f5;
	left: 0;
}

#sidebar select {
	width: 100%;
	height: 200px;
	border: 1px solid #ccc;
}

#sidebar .group {
	padding-top: 4px;
	color: #777; text-align: center;
	border-top: 1px solid #c4c5ca;
}

#sidebar .option {
	padding: 2px 0 2px 0;
	border-top: 1px solid #c4c5ca;
	color: #444; text-align: left;
	background-color: #eee;
}

#sidebar .option:hover {
	background-color: #d4d5da;
	color: #000;
}

#sidebar .button {
	width: 100%;
	height: 30px;
	margin-top: 10px;
}

#footer {
	margin-bottom: 20px;
	padding: 10px;
	color: #000;
	font: 90% sans-serif;
}

#footer a { color: #61809D; }
#footer a:hover { color: #11809A; }

.left { float: left; }
.right { float: right; }

h1 {
  font-size: 32px;
  font-family: sans-serif;
  background-color: #0D1221;
  padding: 15px;
  color: #FFF;
  margin: 0px;
}

h3 {
  font-size: 18px;
  font-family: sans-serif;
  background-color: #0D1221;
  padding: 15px;
  color: #FFF;
  margin: 0px;
}

/*p,
ol {
  font-family: sans-serif;
  font-size: 24px;
  color: #EEE;
}*/

a:link {
  color: #61809D;
}

a:visited {
  color: #61809D;
}

a:hover {
  color: red;
}

a:active {
  color: red;
}

a.stravalink:link {
  color: silver;
}

a.stravalink:visited {
  color: silver;
}

a.stravalinkmain:link {
  color: black;
}

a.stravalinkmain:visited {
  color: gray;
}

a.stravalink:hover {
  color: red;
}

a.stravalink:active {
  color: red;
}

li {
  margin-bottom: 24px;
  padding-left: 10px;
}
#camera3 {

	left: 10px;
	right: 0;
	top: 30px;
}
	
.aqi-container {
    border: 3px solid;
    border-radius: 10px;
    width: 180px;
    float: left;
    /*margin: 10px;*/
    text-align: center;
    padding: 10px;
}

.aqi {
    font-size: 5em;
    font-weight: bold;
}

.pm-label {
    font-style: italic;
}

.countdown-container {
    border: 3px solid;
    border-radius: 10px;
    margin: 10px;
	float: left;
	position: relative;
    text-align: center;
    padding: 10px;
}

.countdown-clear {
	clear: left;
}

.countdown {
    font-size: 5em;
    font-weight: bold;
}

.countdown-label {
    font-style: italic;
}

.countdown-center {
	text-align: center;
	display:flex;
	justify-content:space-around;
	flex-wrap: wrap;
}

.time, .link {
    text-align: center;
	font-size: 12px;
	color: #000;
}

table {
    border: 2px solid #acada8;
}

table thead tr {
    background-color: #e8e9eb;
    color: #fff;
}

table th {
    padding: 4px 4px;
    text-align: center;
	color: silver;
	background-color: #5f5f5f;
}

table td {
    padding: 4px 4px;
    text-align: left;
}

table tbody tr:nth-of-type(even) {
    background-color: #e8e9eb;
}

table tbody tr:nth-of-type(odd) {
    background-color: #acada8;
}

table tbody tr:hover {
    color: #fff;
    background-color: #acada8;
	cursor: default;
}

h2 {
    text-align: center;
}

/* @media only screen and (min-width: 1650px) {	
	.container {
		margin-left: auto;
		margin-right: 10px;
		max-width: 460px;
		position: absolute;
		left: 0;
		right: 0;
		top: 30px;
	}

	#strava {
		margin-left: auto;
		margin-right: 490px;
		max-width: 230px;
		position: absolute;
		left: 0;
		right: 0;
		top: 30px;
	}
}

@media only screen and (min-width: 1000px) {	
	.container {
		margin-left: auto;
		margin-right: 10px;
		max-width: 460px;
		position: absolute;
		left: 0;
		right: 0;
		top: 30px;
	}
}*/

.snowflake {
	position: absolute;
	width: 10px;
	height: 10px;
	background: white;
	border-radius: 50%;
}

/* MERGING TWO FILES */

button {
  padding: 8px;
}

.containerwebcam {
  /*width: 800px;
  margin: 20px auto;*/
  width: 100%;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#slider {
  position: relative;
  height: 495px;
  margin-bottom: 5px;
}

#slider.strava {
  position: relative;
  /*height: 495px;*/
  height: 317px;
  margin-bottom: 5px;
}

.buttons .current-link {
    color:#ff0000;
	text-decoration: none;
	text-transform: none;
}

#sliderImage img {
	width: 100%;
	background: url(loading.gif) 50% no-repeat;
	min-height: 100px;
	min-width: 100px;
	/*height: 495px;*/
	transition: all .5s;
}

.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

#source {
	text-align: center;
}

.hourStuff {
	text-align: center;
}

#errors {
	color: #ffffff;
	background-color: #ff0000;
	border: 1px solid black;
	/*width: 100%;
	position: relative;
	bottom: 0;*/
	text-align: center;
	vertical-align : bottom
	/*width: 800px;
	text-align: center;
	align-items: center;
	margin: 0 auto;
	vertical-align : bottom;
	bottom: 0px;*/
}

#successes {
	color: #ffffff;
	background-color: #005a00;
	border: 1px solid black;
	width: 95%;
	/*width: 100%;
	position: relative;
	bottom: 0;*/
	text-align: center;
	vertical-align : bottom;
	text-align: center;
	align-items: center;
	margin: 0 auto;
	/*width: 800px;
	text-align: center;
	align-items: center;
	margin: 0 auto;
	vertical-align : bottom;
	bottom: 0px;*/
}

.text {
  background-color: #ff0000;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.middleleft {
  transition: .5s ease;
  opacity: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  height: 100%;
  border: 0px solid green;
}

.middleright {
  transition: .5s ease;
  opacity: 0;
  display: flex;
  justify-content: right;
  align-items: center;
  height: 100%;
  border: 0px solid green;
}

#sliderImage:hover .image {
  opacity: 0.3;
}

#slider:hover .middleleft {
  opacity: 0.5;
}

#slider:hover .middleright {
  opacity: 0.5;
}

#prevoverlay {
  z-index:1000;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  overflow: hidden;
  width: 50%;
  height: 100%;
  transition: .5s ease;
}
#nextoverlay {
  z-index:1000;
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 0;
  margin-left: 0px;
  background-color: transparent;
  overflow: hidden;
  width: 50%;
  height: 100%;
  transition: .5s ease;
}
.divTable
{
	float: left;
	display:  table;
	width:auto;
	background-color:#eee;
	border:1px solid  #666666;
	border-spacing:5px;/*cellspacing:poor IE support for  this*/
   /* border-collapse:separate;*/
}

.divRow
{
   display:table-row;
   width:auto;
}

.divCell
{
	float:left;/*fix for  buggy browsers*/
	display:table-column;
	width:50%;
	background-color:#ccc;
}

.activity
{
	min-width: 550px;
}

#map
{
	width: 100%;
	height: 500px;
}

.comics {
	margin-bottom: 10px;
}
.comics img {
	max-width: 95%;
	background: url(loading.gif) 50% no-repeat;
	min-height: 100px;
	min-width: 100px;
}

/* Add a black background color to the top navigation */
.topnav {
	margin: auto;
	text-align: center;
	overflow: hidden;
	padding: 3px 0 3px 0;
	border-bottom: 1px solid #fff;
	height: 200px;
	box-shadow: 3px 3px 6px -2px #bbb;
	-moz-box-shadow: 3px 3px 6px -2px #bbb;
	-webkit-box-shadow: 3px 3px 6px -2px #bbb;
	-o-box-shadow: 3px 3px 6px -2px #bbb;

	background: linear-gradient(#fff, #eee);
	background: -moz-linear-gradient(center top,
		#fff 30%, #eee 70%) repeat;
	background: -webkit-gradient(linear, 
		left top, left bottom, from(#fff), to(#eee));
	background: -o-linear-gradient(#fff, #eee);
	background-image: url("/aqi/bikeheader.jpg");
	background-position: center;
	background-size: cover;
	width:95%;
	position: fixed;
	top: 0;
	left: 2.5%;
	z-index: 10;
}

/* Style the links inside the navigation bar */
.topnav a {
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnav a:link, .topnav a:visited {
  background-color: #000000;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}

/* Change the color of links on hover */
.topnav a:hover {
	background-color: #ddd;
	color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
	background-color: #04AA6D;
	color: white;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
	float: left;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
.topnav.responsive {
	width:95%;
	position: fixed;
	top: 0;
	height: auto;
	z-index: 10;
}
.topnav.responsive a.icon {
	position: absolute;
	left: 0;
	top: 0;
}
.topnav.responsive a {
	float: none;
	display: block;
	text-align: left;
	width: 100%;
	top: 50px;
}

.topnav .submenunav {
	display: none;
}

.misc-nav {
	display: none;
	margin-block: -10px 0px;
	text-align: left;
}

.misc-nav.responsive {
	display: inherit;
	margin-block: 0px 0px;
	text-align: left;
}

.misc-nav.responsive a{
	display: none;
}

.submenunav.responsive {
	display: inline;
	position: relative;
	margin: -10px 0 0 0;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.submenunav.responsive a {
	color: white;
	text-decoration: none;
	display: block;
	text-align: left;
}

.topnav .misc-nav:hover .submenunav.responsive {
	/*display: block;*/
	position: relative;
	margin: 0px 0px 0px 0;
	width: 100%;
}

#snow{
	background: none;
	font-family: Androgyne;
	background-image: url('/images/s1.png'), url('/images/s2.png'), url('/images/s3.png');
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:1;
	pointer-events: none;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}