﻿* {
	box-sizing:border-box;
}
body {
	background-color:#000;
	padding:0px;
	text-align:center;
	}
div.Container {
	width:810px;
	position: relative;
	height:auto;
	background-color:#FFFFFF;
	padding: 0px;
	text-align:center;
	color: gray;
	border: 5px silver solid;
	margin: auto;
	margin-top:-7px;
	margin-bottom:0px;
}
h1{
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
}
div#CalendarContainer {
	border:black 2px solid;
	margin:auto;
	position:relative;
	background-color:whitesmoke;
}
div#SecondContainer {
	width:810px;
	position: relative;
	height:330px;
	background-color:#FFFFFF;
	padding: 0px;
	text-align:center;
	color: gray;
	border: 5px silver solid;
	margin: auto;
	margin-top:10px;
}
div#ThirdContainer {
	width:810px;
	position: relative;
	height:auto;
	background-color:#FFFFFF;
	padding: 0px;
	text-align:center;
	color: gray;
	border: 5px silver solid;
	margin: auto;
	margin-top:10px;
}

p#Description {
	margin:10px 10px 30px;
}
div#RightAdPanel, div#LeftAdPanel {
	width:210px;
	height:290px;
	position:absolute;
	border:0px silver solid;
	top:15px;
}
div#MiddlePanel {
	width:320px;
	height:300px;
	position:absolute;
	border:1px silver solid;
	top:15px;
	left:240px;
	overflow:hidden;	
}
div#MiddlePanel h2{
	display:none;
}
div#MiddlePanel h3{
	margin:5px auto;
}
div#MiddlePanel img{
	visibility:hidden;
}
div#MiddlePanel p{
	line-height:22px;
	margin:10px auto;
}
div#LeftAdPanel {
	left:10px;
}
div#RightAdPanel {
	right:10px;
}
.SomeSpaceAroundDiv, .SomeSpaceAround {
	margin-top:-10px;
}
.Butt {
	display: inline-block;
	white-space: nowrap;
	background-color: red;
	border: 1px solid #777;
	padding: 3px 6px;
	margin: 15px 2px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	text-decoration: none;
	color: white;
	border-radius: 4px;
	/*background: repeating-linear-gradient(0deg, red 20px, pink 50px);*/
	background: linear-gradient(0deg, maroon 1%, red 20%, pink);
	cursor:pointer;
	width:108px;
}
.ButtContainer1 .Butt { width:128px;}
.ButtContainer2 .Butt { width:128px;}
.Butt:hover
    {
	background-color: #eee;        
	background: linear-gradient(0deg, maroon 9%, red 70%, pink);
}
@keyframes alertPulse {
    0% {box-shadow:0px 0px 7px 5px pink;}
    70% {box-shadow:0px 0px 7px 5px red; }
    100% {box-shadow:0px 0px 7px 5px pink;}
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

div.Cell {
	border:1px black solid;
	position:absolute;
	background-color:#DC143C;
	cursor:pointer;
	border-radius:5px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}
div.Cell:hover  {
	background-color:navy;
	animation: shake 0.5s;
}
div.Cell p{
	font-family: 'DM Serif Display', serif;
	color:white;
	font-weight:bold;
	font-size:36px;
	text-align:center;
	margin:4px auto 0px;
}
div.DayTitle {
	position:absolute;
	top:-20px;
	color:black;
	font-family:Arial, Helvetica, sans-serif;
}
div.TodaysCell{
	background-color:red !important;
	animation: alertPulse 1s ease-out;
    animation-iteration-count: infinite;
    box-shadow:0px 0px 7px 5px yellow;
}
#MonthYear {
	margin-top:-20px;
}
