@charset "utf-8";
/* CSS Document */
html,body {
  	width: 100%;
  	height: 100%;
  	margin: 0;
}
body {
  	overflow: hidden;
	background: #111 !important;
	padding: 10px;
	color: #ccc;
}
table {
	background: #fff !important
}
h2 {
	color: #fff
}
#login_form {
	z-index: 400;
	height: 100%;
  	position: absolute;
  	width: 100%;
}
.wcom-default a, .wcom-default div, .wcom-default img {
	border:0;
	margin:0;
	padding:0;
	float:none;
	clear:none;
	outline:0;
	font:inherit;
	font-size:100%;
	vertical-align:baseline;
	position:static;
	display:inline;
	line-height:normal;
	text-decoration:none
}
.wcom-default a {
	display:none
}
.wcom-default div {
	display:block;
	width:auto;
	height:auto;
}
.wcom-default {
	font-family:"Open Sans", Verdana, Geneva, sans-serif;
	color: #fff;
	overflow:hidden;
	position:relative;
	box-sizing:content-box !important
}
.wcom-city {
	max-height:28px !important;
	overflow:hidden
}
.wcom-city, .wcom-city a {
	font-size:15px;
	text-align:center;
	margin-bottom:5px;
	text-decoration:none
}
.wcom-city a:hover {
	text-decoration:none
}
.w300x250 {
	font-size:11px;
	padding:10px !important;
	max-width:280px !important;
	max-height:230px !important;
	width:280px !important;
	height:230px !important
}
.w300x250 .wcom-city {
	max-height:18px !important;
	overflow:hidden
}
.w150x150 {
	font-size:10px;
	padding:5px !important;
	max-width:140px !important;
	max-height:140px !important;
	width:140px !important;
	height:140px !important
}
.w150x150 .wcom-city {
	min-height:20px !important;
	max-height:28px !important;
	overflow:hidden
}
.w150x150 .wcom-city, .w150x150 .wcom-city a {
	font-size:12px;
	width:auto;
	height:auto;
}
#date {
	margin-top:0px;
	color:silver;
	font-size:14px;
}
#time {
	font-size:24px;
	color:silver;
}
/*Margin and Padding helpers*/
.pl-5 {
	padding-left: 5px;
}
.pl-10 {
	padding-left: 10px;
}
.pl-20 {
	padding-left: 20px;
}
.pr-5 {
	padding-right: 5px;
}
.pr-10 {
	padding-right: 10px;
}
.pr-20 {
	padding-right: 20px;
}
.pt-5 {
	padding-top: 5px;
}
.pt-10 {
	padding-top: 10px;
}
.pt-15 {
	padding-top: 15px;
}
.pt-20 {
	padding-top: 20px;
}
.pb-5 {
	padding-bottom: 5px;
}
.pb-10 {
	padding-bottom: 10px;
}
.pb-15 {
	padding-bottom: 15px;
}
.pb-20 {
	padding-bottom: 20px;
}
.mr-10 {
	margin-right: 10px;
}
.mr-20 {
	margin-right: 20px;
}
.ml-10 {
	margin-left: 10px;
}
.ml-20 {
	margin-left: 20px;
}
.mt-5 {
	margin-top: 5px;
}
.mt-10 {
	margin-top: 10px;
}
.mt-15 {
	margin-top: 15px;
}
.mt-20 {
	margin-top: 20px;
}
.mb-5 {
	margin-bottom: 5px;
}
.mb-10 {
	margin-bottom: 10px;
}
.mb-15 {
	margin-bottom: 15px;
}
.mb-20 {
	margin-bottom: 20px;
}
.alert {
	font-size: 1.2em;
}
/*progress*/
#progressBar {
  width: 100%;
  margin: 0px auto;
  height: 10px;
  background-color: none !important;
  position: fixed;
  bottom: 0;
  z-index: 999;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 0px;
  line-height: 10px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: red;
  box-sizing: border-box;
}
/*table */
table {
	color: #000;
}
#hsr th {
	text-transform: uppercase;
	background-color: #0056ac;
	color: #fff;
}
#ob th {
	text-transform: uppercase;
	background-color: #118900;
	color: #fff;
}
ul {
	list-style:none;
	padding-left: 0 !important
}
li {
	padding: 5px 0;
	border-bottom: 1px dotted #ccc
}
.day-highlight {
	background-color: red !important;
}
@media (min-width: 1200px) {
	
	.alert {margin-top:70px;}

}

/***************************
BEGIN OF FLYING SANTA
***************************/
.santa {
  width:20vw;
  min-width:175px;
  z-index: 600;
  cursor: pointer;
  -webkit-animation: FlyingSanta 38s infinite linear;
  -moz-animation: FlyingSanta 38s infinite linear;
  -ms-animation: FlyingSanta 38s infinite linear;
  -o-animation: FlyingSanta 38s infinite linear;
  animation: FlyingSanta 38s infinite linear;
  bottom: 0%;
  left: 0%;
  position: absolute;
}
@keyframes FlyingSanta {
  25% {
    bottom: 80%;
    left: 85%;
    transform: rotateY(0deg);
  }
  26% {
    transform: rotateY(180deg);
  }
  50% {
    bottom: 60%;
    left: 0%;
    transform: rotateY(180deg);
  }
  51% {
    transform: rotateY(0deg);
  }
  75% {
    bottom: 40%;
    left: 85%;
    transform: rotateY(0deg);
  }
  76% {
    bottom: 40%;
    left: 85%;
    transform: rotateY(180deg);
  }
  99% {
    transform: rotateY(180deg);
  }
}

/***************************
//// END OF FLYING SANTA ///
***************************/

/***************************
BEGINN OF SNOW
***************************/
#snow {
  background: none;
  z-index: 200;
  background-image: url("../flake1.png"),
    url("../flake2.png"),
    url("../flake3.png");
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -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;
  }
}
/***************************
END OF SNOW
***************************/