body {	
	background-color: Ivory;
	}
	
h1 {	
	border-radius: 50px 5px 5px 5px;
	background-color: DarkGrey;
	background-size: 100%;
	font-family: verdana, arial, sans-serif;
	color: white;
	font-size: 1.5em;
	text-align: center;
	margin-left: 50px
	}

table {
	font-family: verdana, arial, sans-serif;
	border-collapse: collapse;
	font-size: 14px;
	width: 100%;
}

th {
	border: 10px solid LightGrey;
	text-align: center;
	vertical-align: middle;
}

td {
	border: 1px solid #dddddd;
	text-align: center;
	padding: 8px;
}

tr:nth-child(even) {
	background-color: #dddddd;
}

.topheader-col-1{
	border: none;
	background-color: transparent;
}

.topheader-col-2{
	background-color: LightGrey;
}


.PopUpWindow{
	position: absolute;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0px 0px 20px #aaa;
	height: auto;
    left: 0px; 
	max-width: 500px; 
	min-width: 120px;
    top: 0px;	
	background: rgb(255,255,240);
	opacity: 1;
	visibility: hidden;
	cursor: pointer;
	z-index: -1;	
}

.PopUpWindow table {
 	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	width:auto;
	font-size: 12px;
}

.PopUpWindow table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 5px;
}

.PopUpWindow .icon {
	 text-align: center;
}

.PopUpWindow img {
	width: 100px;
}

.PopUpWindow  .Header {
	border: 5px solid DarkGrey;
	text-align: center;
	background-color: DarkGrey;
	color: white;
	font-size: 14px;
	font-weight: bold;
}

.PopUpWindow .LocationName {

}
.PopUpWindow  .WeekNum {

}

.PopUpWindow .loading {
	font-size: 2em;
	font-style: bold;
	font-family: verdana;
}

.DataCollection  {
		cursor: pointer;
}

.level-na {
	background-color: DarkGrey;
}

.level-50 {
	background-color: FireBrick;
}

.level-50-55 {
	background-color: Crimson;
}

.level-55-60 {
	background-color: DarkSalmon;
}

.level-60-65 {
	background-color: LightCoral;
}

.level-65-70 {
	background-color: NavajoWhite;
}

.level-70-75 {
	background-color: Khaki;
}

.level-75-80 {
	background-color: LemonChiffon;
}

.level-80-82 {
	background-color: PaleGreen;
}

.level-82-84 {
	background-color: SpringGreen;
}

.level-84-86 {
	background-color: Lime;
}

.level-86-88 {
	background-color: Chartreuse;
}

.level-88 {
	background-color: GreenYellow;
}

.level-default {
	background-color: white;
}
				
.DataCollection .current-week {
	background-color: yellow;

}

.DataCollection .location {
	font-style: italic;
}

.DataCollection .WeekDate {
	display: block;
	font-style: italic;
	font-weight: normal;
	font-size: 0.5em;
}

.DataCollection td[country="Luxembourg"] {
	font-weight: bold;
}

.DataCollection .area {
	
}

.DataCollection td[ranking="1"] {
	outline: dashed 4px GoldenRod;
	outline-offset: -5px;
}
.DataCollection td[ranking="2"] {
	outline: dashed 4px Crimson;
	outline-offset: -5px;
}
.DataCollection td[ranking="3"] {
	outline: dashed 4px Brown;
	outline-offset: -5px;
}

.HelpWindow td[ranking="1"] {
	border-width: 3px ;
	border-color: red;
	border-style: dashed;
}

.HelpWindow{
	position: absolute;
	border-style: solid;
	border-width: 6px;
	border-color: LightGrey;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0px 0px 20px #aaa;
	width: auto;
	max-width: 66%;
	height: auto;
    left: 0px; 
    top: 0px;	
	background: rgb(255,255,240);
	opacity: 1;
	visibility: hidden;
	z-index: -1;
	cursor: pointer;
	opacity: 1;
}

.HelpAnchor{
	position: absolute;
	height: auto;
	background: transparent;
    left: 10px; 
	max-width: 100px; 
	max-height: 100px;
    top: 5px;	
	opacity: 1;
	visibility: visible;
	z-index: auto;
}

.HelpAnchor img {
		width: 40px;
		cursor: pointer;
}

.HelpWindow	h1 {
	all: revert;
	font-family: verdana, arial, sans-serif;
	font-size: 1.5em;
	text-align: center;
}
		
.HelpWindow	p {
	font-family: verdana, arial, sans-serif;
	font-size: 1em;
	text-align: justify;
	margin: 10px;
}

.HelpWindow	th {
	background-color: DarkGrey;
	color: white;
}

footer p {
	display: inline-block;
	border-radius: 5px 5px 5px 5px;
	font-family: verdana, arial, sans-serif;
	color: Ivory;
	background-color: DimGray;
	line-height: 30px;
	font-size: 0.8em;
	text-align: justify;
	padding-left: 10px;
	padding-right: 10px;
}

footer p::before { 
	content: "Dev - ©Bruno de Séré - June 2020 - Version 1.06 - Hits: ";
}

footer img {
	vertical-align: middle;
	width: 12px;
}

.DayLight{
	text-align: center;
	font-weight: bold;
}

.DaylightTitle
{
	background-color: DarkGrey;
}

.DayLightValue{
	background-color: DarkGrey;
}