body {
	height:95%;
	color: #222;
	background: #F5F4EF;
	background-image: -webkit-gradient(
		 linear,
		 left top,
		 left bottom,
		 color-stop(0, rgb(218,231,235)),
		 color-stop(0.1, rgb(245,244,239)),
		 color-stop(0.96, rgb(245,244,239)),
		 color-stop(1, rgb(224,224,224))
	);
	background-image: -moz-linear-gradient(
		 center top,
		 rgb(218,231,235) 0%,
		 rgb(245,244,239) 10%,
		 rgb(245,244,239) 96%,
		 rgb(224,224,224) 100%
	);
	background-repeat:no-repeat;
	background-attachment:fixed;
	font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: .8em;
    text-shadow: 1px 1px 2px #CCC;
}

td {
	padding-right: 10px;
}

table {
	margin-left:auto;
	margin-right:auto;
}

.box{
	background: #fff;
	background-image: -webkit-gradient(
		 linear,
		 left top,
		 left bottom,
		 color-stop(0, rgb(255,255,255)),
		 color-stop(0.58, rgb(227,227,227)),
		 color-stop(0.71, rgb(199,199,199)),
		 color-stop(1, rgb(255,255,255))
	);
	background-image: -moz-linear-gradient(
		 center top,
		 rgb(255,255,255) 0%,
		 rgb(227,227,227) 58%,
		 rgb(199,199,199) 71%,
		 rgb(255,255,255) 100%
	);
	background-size:100% 4px;
	background-repeat:no-repeat;
	background-position:center bottom;
	padding: 20px;
	clear:both;
   margin-top: 2em;
   margin-bottom: 2em;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.mapbox{
	height:90%;
	background: #fff;
	background-image: -webkit-gradient(
		 linear,
		 left top,
		 left bottom,
		 color-stop(0, rgb(255,255,255)),
		 color-stop(0.58, rgb(227,227,227)),
		 color-stop(0.71, rgb(199,199,199)),
		 color-stop(1, rgb(255,255,255))
	);
	background-image: -moz-linear-gradient(
		 center top,
		 rgb(255,255,255) 0%,
		 rgb(227,227,227) 58%,
		 rgb(199,199,199) 71%,
		 rgb(255,255,255) 100%
	);
	background-size:100% 4px;
	background-repeat:no-repeat;
	background-position:center bottom;
	padding: 20px;
	clear:both;
   padding: 10px;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.box h2 {
	color: #4464c7; 
	font-size: 1.714em; 
	margin-bottom: 0.333em;
}

.timestamp {
	color: #999;
	font-size: 11px;
}

.image {
	float:right;
}

.thumbnail {
	width:48px;
	height:48px;
}

.overlay
{
   -webkit-animation-duration: 0.5s;
   -moz-animation-duration: 0.5s;
   -o-animation-duration: 0.5s;
   animation-duration: 0.5s;
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;   
   -webkit-animation-name: fadeIn;
   -moz-animation-name: fadeIn;
   -o-animation-name: fadeIn;
   animation-name: fadeIn;
   background-color: #000;
   filter: alpha(opacity=70);
   position: absolute; top: 0; left: 0;
   width: 100%; height: 100%;
   z-index: 10;
}

.message {
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;   
   -webkit-animation-name: bounceIn;
   -moz-animation-name: bounceIn;
   -o-animation-name: bounceIn;
   animation-name: bounceIn;
   width: 50%;
   position:absolute;
   top:30%;
   left:25%;
   margin:auto;
   z-index: 11;
   float:center;
   border:10px solid #aaaaaa;
	background: #F5F4EF;
	background-image: -webkit-gradient(
		 linear,
		 left top,
		 left bottom,
		 color-stop(0, rgb(218,231,235)),
		 color-stop(0.1, rgb(245,244,239)),
		 color-stop(0.96, rgb(245,244,239)),
		 color-stop(1, rgb(224,224,224))
	);
	background-image: -moz-linear-gradient(
		 center top,
		 rgb(218,231,235) 0%,
		 rgb(245,244,239) 10%,
		 rgb(245,244,239) 96%,
		 rgb(224,224,224) 100%
	);
	background-repeat:no-repeat;
	padding: 20px;
	clear:both;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.message h2 {
	color: #4464c7; 
	font-size: 1.714em; 
	margin-bottom: 0.333em;
}

.feed {
  margin-left: 3px;
  padding: 0 0 0 19px;
  background: url("img/feed-icon-14x14.png") no-repeat 0 50%;
}

#page{
	max-width:800px;
	clear: both; 
	margin: 0 auto;
}

#top{
	width:auto;
	padding-left:10px;
	padding-right:10px;
	margin-top: 3em;
	margin-bottom: 3em;
	font-size:large;
}

#bottom {
	margin-left:5%;
	padding-bottom:2em;
	font-size:small;
}

#logo{
	float:left;
	padding-right:10px;
	padding-bottom:10px;
}

#info{
	width:auto;
	min-height:36px;
	height:5%;
	padding-left:10px;
	padding-right:10px;
	font-size:large;
}

#state{
	padding-left:10px;
}

#backlink{
	float:right;
}

#backlink a{
	float:right;
    font-size:medium;
    padding-left:10px;
}

#map{
	height:100%;
	width:auto;
	z-index:1;
}

#permalink{
    margin-left:6px;
    margin-right:6px;
    background-image:url(img/link.png);
	float:right;
	width:24px;
	height:24px;
}

#permalink:hover{
    background-image:url(img/link_highlight.png);
}

#locate{
    margin-left:6px;
    margin-right:6px;
    background-image:url(img/locate.png);
	float:right;
	width:24px;
	height:24px;
}

#locate:hover{
    background-image:url(img/locate_highlight.png);
}

#city_select {
	font-size:large;
}

#footer{
	margin-top:10px;
	min-height:30px;
}

#github-commits-osm2pov ul {
    list-style-type: none;
}

#github-commits-osm-isometric-3d ul {
    list-style-type: none;
}



@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.03);
	}

	70% {
		-webkit-transform: scale(.95);
	}

	100% {
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}

	50% {
		opacity: 1;
		-moz-transform: scale(1.03);
	}

	70% {
		-moz-transform: scale(.95);
	}

	100% {
		-moz-transform: scale(1);
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}

	50% {
		opacity: 1;
		-o-transform: scale(1.03);
	}

	70% {
		-o-transform: scale(.95);
	}

	100% {
		-o-transform: scale(1);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50% {
		opacity: 1;
		transform: scale(1.03);
	}

	70% {
		transform: scale(.95);
	}

	100% {
		transform: scale(1);
	}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: .7;}
}

@-moz-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: .7;}
}

@-o-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: .7;}
}

@keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: .7;}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
	0% {opacity: .7;}
	100% {opacity: 0;}
}

@-moz-keyframes fadeOut {
	0% {opacity: .7;}
	100% {opacity: 0;}
}

@-o-keyframes fadeOut {
	0% {opacity: .7;}
	100% {opacity: 0;}
}

@keyframes fadeOut {
	0% {opacity: .7;}
	100% {opacity: 0;}
}

.fadeOut {
	-webkit-animation-name: fadeOut;
	-moz-animation-name: fadeOut;
	-o-animation-name: fadeOut;
	animation-name: fadeOut;
}