/*
 CSS file for Belchertown weather website.
 This website was originally created in WordPress on Genesis WP. 
 A lot of this CSS here is from the Genesis WP Child Theme.
 License URI: http://www.gnu.org/licenses/gpl-2.0.html  
*/

/* ## Float Clearing
--------------------------------------------- */

.author-box:before,
.clearfix:before,
.entry:before,
.entry-content:before,
.nav-primary:before,
.nav-secondary:before,
.pagination:before,
.site-container:before,
.site-footer:before,
.site-header:before,
.site-inner:before,
.wrap:before {
	content: " ";
	display: table;
}

.author-box:after,
.clearfix:after,
.entry:after,
.entry-content:after,
.nav-primary:after,
.nav-secondary:after,
.pagination:after,
.site-container:after,
.site-footer:after,
.site-header:after,
.site-inner:after,
.wrap:after {
	clear: both;
	content: " ";
	display: table;
}


/* # Defaults
---------------------------------------------------------------------------------------------------- */

/* ## Typographical Elements
--------------------------------------------- */

/*						ANFANG Stylesheet by Max 							
========================================================================*/


body {
	background-color: #222;
	color: white;
	font-family: Lato, sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.625;
	margin: 0;
}

#page-max {
	max-width: 1280px;
	display: table;
	text-align: center;
}
#page-max-sm {
	max-width: 750px;
	display: table;
	text-align: center;
}


#WindData {
    float: left;
 }

#ObservationData {
	float: left;
}

#Aktualisierung {
	float: left;
}

#TemperatureData {
    float: left;
    width: 450px;
    height: 350px;
    color: white;
    display: inherit;
}

#SensorStatus {
	float: left;
}

.Inhalt {
	font-size: 20px;
	margin-left: 5px;
	float: left;
	display: inline;
	margin-right: 10px;
	width: 100%;
}

.Karte {
	text-align: center;
	margin-left: 5px;
	width: 1285px !important;
}

.Vorhersage {
	text-align: center;
	margin-left: 5px;
	width: 600px !important;
}

.Datenblock {
	float: left;
	margin-left: 5px;
	width: 400px !important;
}

.Datenblock-breit {
	float: left;
	margin-left: 5px;
	width: 500px !important;
}

.Graphen {
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	max-width: 700px !important;
}

.DatenblockSchmal {
	float: left;
	margin-left: 5px;
	width: 350px;
}

.Temperaturzeile {
	display: table;
	text-align: center;
	width: 450px;
	border-top: 5px;
}

.TempTableRow {
	width: 450px;
	height: 40px;
	text-align: center;
	border-bottom: 0px;
	margin-left: 30px;
}

.TempTableCell {
	width: 50%;
	font-size: 30px;
}

.TTC-label {
	color: #808080;
}

.smtemp {
	font-size:25px;
}
.smtemp-label {
	text-align: left;
	font-size:25px;
	color: #808080;
	font-weight: bold;
	display: table-cell;
}


.black {
	color: black;
}

.p05 { width: 5%; }
.p10 { width: 10%; text-align: inherit; }
.p15 { width: 15%; text-align: inherit; }
.p20 { width: 20%; text-align: inherit; }
.p25 { width: 25%; text-align: inherit; }
.p30 { width: 30%; text-align: inherit; }
.p35 { width: 35%; text-align: inherit; }
.p40 { width: 40%; text-align: inherit; }
.p45 { width: 45%; text-align: inherit; }
.p50 { width: 50%; text-align: inherit; }
.p55 { width: 55%; text-align: inherit; }
.p60 { width: 60%; text-align: inherit; }
.p65 { width: 65%; text-align: inherit; }
.p70 { width: 70%; text-align: inherit; }
.p75 { width: 75%; text-align: inherit; }
.p80 { width: 80%; text-align: inherit; }
.p85 { width: 85%; text-align: inherit; }
.p90 { width: 90%; text-align: inherit; }
.p95 { width: 95%; text-align: inherit; }

.right {
	float: right;
}

.left {
	float: left;
}

.center {
	text-align: center;
}


.Instrument {
	width: 325px;
	float: left; 
	margin-left: 20px;
}

.Blockheader {
	font-size:30px;
	text-align:left;
	padding-bottom: 3px;
	margin-left: 5px;
	color: white;
	font-weight:bold;
}

.Blockheader-small {
	font-size:20px;
	text-align:left;
	padding-bottom: 1px;
	margin-left: 5px;
	color: white;
}


.Datenzeile {
	height: 27px;
	width: 100% !important;
	margin-left: 5px;
	display: table-row;
}

.Datenzeile-small {
	height: 15px;
	width: 100% !important;
	margin-left: 5px;
	display: table-row;
}

.GraphMenu {
	width: 600px;
	text-align: center;
	display: block;
}

.ButtonZeile {
	text-align: center;
	width: 600px !important;
}

.label {
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	font-size: 25px;
	color: #808080;
	margin-left: 5px;
	display: table-cell;
}

.label-small {
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	font-size: 12px;
	color: #808080;
	margin-left: 10px;
	display: table-cell;
	overflow: hidden;
	white-space: nowrap;
}

.ok {
	font-size: 12px;
	color:white;
	background-color:green;
	font-size: 12px;
}


.warning {
   background-color:red;
   font-size: 12px;
   color:white;
   font-weight:bold;
   animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate; 
}

@keyframes blinker {
	to { opacity: 0; } 
}

.value {
	font-weight: lighter;
	text-align: right;
	vertical-align: middle;
	color: white;
	font-size: 25px;
 	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	display: table-cell;
}

.value-small {
	font-weight: lighter;
	text-align: right;
	vertical-align: middle;
	color: white;
	font-size: 12px;
	margin-left: 5px;
	display: table-cell;
}

.Sonne {
	width: 178px;
	text-align: left;
	vertical-align: middle;
	font-size: 22px;
	color: white;
	display: table-cell;
	
	padding-left: 15px;
}
.Mond {
	text-align: right;
	vertical-align: middle;
	font-size: 22px;
	color: white;
	display: table-cell;
}

.mondviertel {
	 font-size: 17px;
	 text-align: right;
	 color: white;
	 vertical-align: 5%;
	 width: 250px;
}

.sunrise {
	 font-size: 25px;
	 text-align: right;
	 color: white;
	 vertical-align: 5%;
	 width: 178px;
}

.AktualisierungsZeile {
	height: 15px;
	font-size: 12px;
	font-weight: 200;
	position: relative;
	margin-left: 20px;
/*	margin-top: -20px;*/
}


p.back {
    clear: both;
    text-align: center;
    height: 1px;
    visibility: hidden;
}

.Menubar {
	height: 30px;
	width: 100% !important;
	margin-left: 5px;
	text-align: left;
}


a {
	color: #808080;
	padding-left: 10px;
	padding-right: 10px;
}

.link {
	font-size: 22px;
	font-weight: 150;
	float: left;
}

/*p {
	font-size: 20px;
	font-weight: normal;
	color: white;
}*/

.copy {
	font-size: 12px;
}

.wetterlage {
	background-color: #fff;
	color: #000;
	text-align: left;
	font-size: 20px;
	font-weight: normal;
	width: 510px !important;
}

#container { width:950px; height:700px; margin:auto; }

 /* Dropdown Button */
.dropdown-item {
	text-align: left;
	font-size: 16px;
	display: block;
	color: #222;
	padding-top: 12px;
}

.dropdown-item:active,
.dropdown-item:hover {
	background-color: #222;
	color: #808080;
	text-decoration: none;
}

.btn-max {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
	background-color: transparent;
	border-color: transparent;
}

.btn-max-primary {
	background-color: transparent;
	border-color: transparent;
}

.btn-max:hover .overlay,
.btn-max-primary:hover .overlay,
.btn-max:focus .overlay,
.btn-max-primary:focus .overlay,
.btn-max:active .overlay,
.btn-max-primary:active .overlay {
	background-color: transparent;
	border-color: transparent;
	background-image: url(/images/hamburger-hover.png) no-repeat;
	opacity: 1;
	text-align: left;
}

.overlay {
  position: absolute;
  top: 7px;
  bottom: 0;
  left: 13px;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .8s ease;
  background-color: #222;
  text-align: left;
}


/*

========================================================================
						ENDE Stylesheet by Max 							*/

a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button {
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition:    all 0.1s ease-in-out;
	-ms-transition:     all 0.1s ease-in-out;
	-o-transition:      all 0.1s ease-in-out;
	transition:         all 0.1s ease-in-out;
}

::-moz-selection {
	color: #fff;
}

::selection {
	background-color: #333;
	color: #fff;
}

a {
	text-decoration: none;
}

a:hover {
	color: #333;
}

p {
	margin: 0 0 28px;
	padding: 0;
}

ol,
ul {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

b,
strong {
	font-weight: 700;
}

blockquote,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 40px;
}

blockquote::before {
	content: "\201C";
	display: block;
	font-size: 30px;
	height: 0;
	left: -20px;
	position: relative;
	top: -10px;
}


/* ## Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #333;
	font-family: Lato, sans-serif;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 10px;
}

h1 {
	font-size: 36px;
}

h2 {
	font-size: 30px;
	color: white;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

/* ## Objects
--------------------------------------------- */

embed,
iframe,
img,
object,
video {
	max-width: 100%;
}

img {
	height: auto;
}

/* ## Forms
--------------------------------------------- */

input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #333;
	font-size: 18px;
	font-weight: 300;
	padding: 16px;
	width: 100%;
}

input:focus,
textarea:focus {
	border: 1px solid #999;
	outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

::-moz-placeholder {
	color: #333;
	font-weight: 300;
	opacity: 1;
}

::-webkit-input-placeholder {
	color: #333;
	font-weight: 300;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 300;
	padding: 16px 24px;
	text-transform: uppercase;
	width: auto;
}

button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button:hover {
	color: #fff;
}

.entry-content .button:hover {
	color: #fff;
}

.button {
	display: inline-block;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
	display: none;
}

/* ## Tables
--------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	line-height: 2;
	margin-bottom: 40px;
	width: 100%;
	border: none;
}

tbody {
	border-bottom: 0px solid #ddd;
}

td,
th {
	text-align: left;
}

td {
	border-top: 0px solid #ddd;
	padding: 6px 2px;
}

th {
	font-weight: 400;
}


/* # Structure and Layout
---------------------------------------------------------------------------------------------------- */

/* ## Site Containers
--------------------------------------------- */

.site-inner,
.wrap {
	margin: 0 auto;
	max-width: 1050px;
}

.site-inner {
	clear: both;
}

/* ## Column Widths and Positions
--------------------------------------------- */

/* ### Wrapping div for .content and .sidebar-primary */

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
	width: 980px;
}

.content-sidebar-sidebar .content-sidebar-wrap {
	float: left;
}

.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
	float: right;
}

/* ### Content */

.content {
	width: 800px;
}

.content-sidebar .content,
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content {
	float: left;
}

.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content {
	width: 580px;
}

.full-width-content .content {
	width: 100%;
}

/* ### Primary Sidebar */

.sidebar-primary {
	float: right;
	width: 360px;
}

.sidebar-content .sidebar-primary,
.sidebar-sidebar-content .sidebar-primary {
	float: left;
}

/* ### Secondary Sidebar */

.sidebar-secondary {
	float: left;
	width: 180px;
}

.content-sidebar-sidebar .sidebar-secondary {
	float: right;
}

/* ## Column Classes
--------------------------------------------- */
/* Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
	float: left;
	margin-left: 2.564102564102564%;
}

.one-half,
.three-sixths,
.two-fourths {
	width: 48.717948717948715%;
}

.one-third,
.two-sixths {
	width: 31.623931623931625%;
}

.four-sixths,
.two-thirds {
	width: 65.81196581196582%;
}

.one-fourth {
	width: 23.076923076923077%;
}

.three-fourths {
	width: 74.35897435897436%;
}

.one-sixth {
	width: 14.52991452991453%;
}

.five-sixths {
	width: 82.90598290598291%;
}

.first {
	clear: both;
	margin-left: 0;
}


/* # Common Classes
---------------------------------------------------------------------------------------------------- */

/* ## Avatar
--------------------------------------------- */

.avatar {
	float: left;
}

.alignleft .avatar,
.author-box .avatar {
	margin-right: 24px;
}

.alignright .avatar {
	margin-left: 24px;
}

.comment .avatar {
	margin: 0 16px 24px 0;
}

.breadcrumb {
	margin-bottom: 20px;
}

.archive-description,
.author-box {
	background-color: #fff;
	font-size: 16px;
	margin-bottom: 40px;
	padding: 40px;
}

.author-box-title {
	font-size: 16px;
	margin-bottom: 4px;
}

.archive-description p:last-child,
.author-box p:last-child {
	margin-bottom: 0;
}

/* ## Search Form
--------------------------------------------- */

.search-form {
	overflow: hidden;
}

.site-header .search-form {
	/**float: right;**/
	margin-top: 12px;
	color: #808080;
}

.entry-content .search-form,
.site-header .search-form {
	width: 50%;
}

/* ## Titles
--------------------------------------------- */

.archive-title {
	font-size: 20px;
}

.entry-title {
	font-size: 36px;
}

.entry-title a,
.sidebar .widget-title a {
	color: #333;
}

.entry-title a:hover {
	color: #e5554e;
}


a.aligncenter img {
	display: block;
	margin: 0 auto;
}

a.alignnone {
	display: inline-block;
}

.alignleft {
	float: left;
	text-align: left;
}

.alignright {
	float: right;
	text-align: right;
}

a.alignleft,
a.alignnone,
a.alignright {
	max-width: 100%;
}

img.centered,
.aligncenter {
	display: block;
	margin: 0 auto 24px;
}

img.alignnone,
.alignnone {
	margin-bottom: 12px;
}

a.alignleft,
img.alignleft {
	margin: 0 24px 24px 0;
}

a.alignright,
img.alignright {
	margin: 0 0 24px 24px;
}

.sticky {
}

/* # Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
	background-color: #222;
	min-height: 75px;
}

.site-header .wrap {
	padding: 5px 0px;
}

/* ## Title Area
--------------------------------------------- */

.title-area {
	float: left;
	width: 330px;
}

.header-full-width .title-area {
	width: 100%;
}

.site-title {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
}

.site-title a,
.site-title a:hover {
	color: #333;
}

.header-image .site-title > a {
	background: url('https://belchertownweather.com/images/content/btownwx-logo-slim.png') no-repeat left;
	float: left;
	min-height: 80px;
	width: 100%;
}

.site-description {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

.site-description,
.site-title {
	margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
	display: block;
	text-indent: -9999px;
}

/* ## Widget Area
--------------------------------------------- */

.site-header .widget-area {
	float: right;
	text-align: right;
	width: 800px;
}


/* # Site Navigation
---------------------------------------------------------------------------------------------------- */

/* ## Site Header Navigation
--------------------------------------------- */

.site-header .sub-menu {
	border-top: 1px solid #eee;
}

.site-header .sub-menu .sub-menu {
	margin-top: -56px;
}

/* ## Primary Navigation
--------------------------------------------- */

.nav-primary {
	background-color: #333;
}

/* ## Secondary Navigation
--------------------------------------------- */

.nav-secondary {
	background-color: #fff;
}


/* # Content Area
---------------------------------------------------------------------------------------------------- */

/* ## Entries
--------------------------------------------- */

.entry {
	margin-bottom: 40px;
	padding: 10px;
}

.content .entry {
	background-color: #333
}

.entry-content ol,
.entry-content ul {
	margin-bottom: 28px;
	margin-left: 40px;
}

.entry-content ol > li {
	list-style-type: decimal;
}

.entry-content ul > li {
	list-style-type: disc;
}

.entry-content ol ol,
.entry-content ul ul {
	margin-bottom: 0;
}

.entry-content code {
	background-color: #333;
	color: #ddd;
}

/* ## Entry Meta
--------------------------------------------- */

p.entry-meta {
	font-size: 16px;
	margin-bottom: 0;
}

.entry-header .entry-meta {
	margin-bottom: 24px;
}

.entry-footer .entry-meta {
	border-top: 2px solid #f5f5f5;
	padding-top: 24px;
}

.entry-categories,
.entry-tags {
	display: block;
}

.entry-comments-link::before {
	content: "\2014";
	margin: 0 6px 0 2px;
}

/* ## Pagination
--------------------------------------------- */

.pagination {
	clear: both;
	margin: 40px 0;
}

.adjacent-entry-pagination {
	margin-bottom: 0;
}

.archive-pagination li {
	display: inline;
}

.archive-pagination li a {
	background-color: #333;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	padding: 8px 12px;
}

.archive-pagination li a:hover,
.archive-pagination .active a {
	background-color: #e5554e;
}

/* ## Comments
--------------------------------------------- */

.comment-respond,
.entry-comments,
.entry-pings {
	background-color: #fff;
	margin-bottom: 40px;
}

.comment-respond,
.entry-pings {
	padding: 40px 40px 16px;
}

.entry-comments {
	padding: 40px;
}

.comment-header {
	font-size: 16px;
}

li.comment {
	background-color: #f5f5f5;
	border: 2px solid #fff;
	border-right: none;
}

.comment-content {
	clear: both;
}

.comment-list li {
	margin-top: 24px;
	padding: 32px;
}

.comment-list li li {
	margin-right: -32px;
}

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
	width: 50%;
}

.comment-respond label {
	display: block;
	margin-right: 12px;
}

.entry-comments .comment-author {
	margin-bottom: 0;
}

.entry-pings .reply {
	display: none;
}

.bypostauthor {
}

.form-allowed-tags {
	background-color: #f5f5f5;
	font-size: 16px;
	padding: 24px;
}


/* # Sidebars
---------------------------------------------------------------------------------------------------- */

.sidebar {
	font-size: 16px;
}

.sidebar li {
	border-bottom: 1px dotted #ddd;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.sidebar p:last-child,
.sidebar ul > li:last-child {
	margin-bottom: 0;
}

.sidebar .widget {
	background-color: #333;
	/*background-color: #fff;*/
	margin-bottom: 40px;
	padding: 40px;
}


/* # Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background-color: #333;
	color:#fff;
	font-size: 16px;
	line-height: 1;
	padding: 20px 0;
	text-align: center;
}

.site-footer p {
	margin-bottom: 0;
}

.site-footer a:hover {
    color: #e5554e;
}




/* # POB Custom Styles
---------------------------------------------------------------------------------------------------- */

/* Responsive Menu
--------------------------------------------- */
.responsive-menu-icon {
	cursor: pointer;
	display: none;
}

.responsive-menu-icon::before {
	content: "\f0c9";
	display: block;
	font: normal 30px/1 'FontAwesome';
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	color: #000;
}


/* Main */

.clear { clear:both; }

.center { 
    text-align: center;
    margin: 0 auto;
}

.footer { text-align: center
}
/* Custom wx page */

.weewx table { 
	margin-bottom:0px;
	line-height:inherit;
}

.weewx tbody, .weewx td {
	border:none;
	padding:0;
}

.wx-content { 
	width:100%; 
}

.toprow-height {
	min-height:375px !important;
}

.border-top {
	border-top: 0px solid #D7D7D7 !important;
}

.border-bottom {
	border-bottom: 0px solid #D7D7D7 !important;
}

.border-left {
	border-left: 1px solid #D7D7D7 !important;
}

.border-right {
	border-right:1px solid #D7D7D7 !important;
}

.weather-obs-top {
	min-height:234px !important;
}

.updated-wrapper {
	/*float:left;*/
}

.updated {
	/*display: inline-block;
	margin-bottom:3px;
	text-indent: 40px;
	color: #808080;
	font-size: 17px;*/
}

.onlineMarkerOuter {
    padding: 6px 0 0 15px;
    float: left;
    text-indent: 35px;
}

.loadingMarker:before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    margin: 4px 0 0 -13px;
    background: #ffbe00;
    border-color: #ffbe00;
    border-radius: 50%;
}

.offlineMarker:before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    margin: 4px 0 0 -13px;
    background: #ff0000;
    border-color: #ff0000;
    border-radius: 50%;
}

.onlineMarker:before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    margin: 4px 0 0 -13px;
    background: #00bb00;
    border-color: #00bb00;
    border-radius: 50%;
}

.onlineMarker:after {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -8px 0 0 -25px;
    border: 1px solid #00bb00;
    border-radius: 50%;
    box-shadow: 0 0 4px #00bb00, inset 0 0 4px rgb(56, 111, 169);
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite;
}

@-webkit-keyframes online {
  0%{
    -webkit-transform:scale(.1);
    opacity:1;
  }
  70%{
    -webkit-transform:scale(2.5);
    opacity:0;
  }
  100%{
    opacity:0;
  }
}

@keyframes online {
  0%{
    transform:scale(.1);
    opacity:1;
  }
  70%{
    transform:scale(2.5);
    opacity:0;
  }
  100%{
    opacity:0;
  }
}

.wx-header-temperature { 
    float:left;
    width:90px;
    text-align:center;
    margin:0 auto;
}

.wx-header-temperature img { 
    height:50px;
}

.wx-stn-info-container {
	width:100%;
	border-bottom: 1px solid #D7D7D7;
    padding-bottom: 10px;
}

.wx-stn-info-current-obs {
    text-align: center;
}

.obs-header-icon, .obs-header-outtemp, .wx-stn-info, .wx-stn-info-social {
    display:block;
}

.wx-stn-name {
	float:left;
}
.wx-stn-name h1 { 
	font-size:32px;
}

.wx-stn-share, .wx-stn-info {
	float:right;
	margin-right:10px;
}

.wx-stn-share { 
}

.wx-stn-share iframe { max-width:initial !important; }

.wx-stn-alert {
    display: none;
    width: 100%;
}

.wx-stn-alert i { color: red; }

.wx-fb, .wx-share-sep, .wx-twitter {
    display:inline-block;
}

.wx-share-sep {
    margin:0px 5px;
}

/* Custom styling for the share buttons */
.fb_iframe_widget span, .twitter-share-button {
    vertical-align: middle !important;
}


.temperature-row, .forecastrow, .eq-stats-row {
}

.temp-observation {
}

.current_temp, .current_wind {
	text-align:center;
	line-height:1;
	font-size:34px !important;
	padding: 0px !important;
}

.current-obs-container {
	text-align:center;
	padding:0px !important;
}

.current_obs_top {
	padding-top:4px !important;
}

.current-obs-text {
    text-align:center;
	font-size:20px;
}

#wxicon {
    display: block;
    margin: 0 auto;
}

.current_temp {
	padding-top:20px !important;
}

.current_temp .temp {
	font-size:105px;
}

.current_temp h1 {
	font-size:40px;
}

.tempsup { 
	top:-1.0em;
	font-size:50%;
}


.wx-pressure-trend { 
	color: #808080; 
	font-size:20px;
	line-height:1;
	padding-left:5px;
}

.barometer-up {
	transform: rotate(45deg);
}

.barometer-down {
	transform: rotate(315deg);
}

.wx-rainrate-value {
	padding-left:5px;
}

.small-almanac {
    padding:15px;
}


.sunrise-set-image {
	width:22px;
	margin-right:5px;
}

.radar-map {
	padding:5px 5px 0px 5px !important;
}

.forecastrow {
	text-align:center;
}

.forecast-title {
	text-align:left;
	font-size:25px;
	margin-bottom:5px;
}

.forecast-subtitle {
	font-size:14px;
}

.wuforecast {
	min-height:250px !important;
}

.forecast-conditions {
	min-height:133px;
    word-wrap:break-word;
}

.forecast-high, .forecast-low {
	font-size:20px;
	font-weight:500;
}

.forecast-precip, .forecast-wind {
	font-size:15px;
}

.snow-precip, .rain-precip {
	color:#42b5e7;
}

.rain-no-precip {
	color:#808080;
}

.earthquake-container {
	font-size:18px;
	text-align:center;
}

.snapshot-records-text, .eq-title {
    font-size:24px;
    text-align:center;
    margin: 10px 0px;
}

.stats-title {
    font-size:20px;
}

.magnitude {
}

.eq-source {
	font-size:12px;
}

.wx-graph-front {
    font-size:25px;
    padding-top:20px;
    padding-bottom:20px;
    text-align:center;
}

.highcharts-row {
}

.wx-buttons { 
    margin:0 auto;
    text-align:center;
    margin-top:20px;
}

.wx-buttons-description {
    font-size:30px;
    font-weight:400;
    text-align:center;
    padding:10px 0px;
}

.wx-records-description {
    margin:25px 0px;
    background-color: #fff;
}

.records table {
    border:1px solid #D7D7D7;
    background-color: #fff;
}

.records td {
    padding:0px 10px;
}

.records .leftborder {
    border-left: 1px solid #D7D7D7;
}

.records-header {
    text-align:center;
    background:#D7D7D7;
    color:#000;
    font-weight:400;
}

.records-header-alltime {
    text-align:center;
    background:#1f3365;
    color:#fff;
    font-weight:400;
}

.wx-year-row {
	background-color: #333;
	text-align:center;
}

.noaa_reports {
	color: white;
	margin-top:40px;
}

.wuforecast {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block;
    width: 148px;
}

@media only screen and (max-width: 800px) {
	
    .header-image .site-title > a {
        background-position-x: center;
        background-position-y: center;
        margin-bottom: 20px;
    }
    
	.site-footer { text-align:center !important; }
	.footerLeft { 
		float:none !important; 
		display:block;
		padding:0px !important;
	}
	.footerRight { 
		float:none !important; 
		display:block;
		margin-top:10px;
		padding:0px !important;
	}
    
    .current_obs_top img {
        float: left;
        width: 30%;
        height: auto;
    }
    
    .current_temp {
        padding-top: 0px !important;
    }
    
    .current_temp .temp {
        font-size: 75px;
        color: #808080;
    }
	
	.wx-content {
	}
    
    .windrow {
        padding-top:0px;
    }
	
	.weewx h1 {
		font-size:27px;
	}
    
	.breadcrumb { 
		display:none;
	}

	.border-left {
		border-left: 0px !important;
	}
	
	.border-right {
		border-right: 0px !important;
	}
	
	.wx-stn-info-container {
		text-align:center;
	}
    
    .obs-header-icon, .obs-header-outtemp {
        display: inline-block;
    }
    
    .obs-header-icon { width:25%; }
	
	.wx-stn-name {
		float:none;
	}
	
	.wx-stn-share, .wx-stn-info {
		display:none;
		float: none !important;
		text-align:center;
	}
	
    .updated-wrapper {
        float:none;
        margin-bottom:5px;
    }
    
	.updated {
		display: initial;
	}
	
	.station-observations {
	}
	
	.current_obs {
		padding:10px 0px !important;
	}
		
	.forecast-subtitle {
		display: block;
	}
	
	.wuforecast {
		font-size:28px;
		padding-bottom:15px;
        min-height: 170px !important;
		border-bottom:1px solid #D7D7D7;
	}
    	
	.forecast-condition-text {
		display:block;
	}
	
	.forecast-high, .forecast-low {
	}
	
	.forecast-precip, .forecast-wind {
		font-size: 16px;
	}
        
    .forecast-conditions {
        min-height: 70px;
    }
    
    .forecast-conditions img {
        width:30%;
        height:auto;
    }
	
	.stn-quick-stats  {
		padding-left: 0px !important;
		padding-right: 0px !important;
        padding-top: 15px;
	}
    
    .records-table {
        word-break: break-all;
    }
    
    .records table {
        table-layout: fixed;
        width: 100%;
    }
	
	/* Responsive tables from: https://css-tricks.com/responsive-data-tables/ */
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { 
		border: 0px;
	}
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
    
    .col-sm-1-5 {
        padding-left: 0px;
        padding-right: 0px;
        width: 45%;
        font-size: 18px;
    }
    
    .row {
        margin-right: 0px;
        margin-left: 0px;
        background-color: #fff;
    }

}

/* End custom wx page */