/*******************************************************
*
Theme Name:		Radio Homepage
Theme URI:		https://www.chatcitysoundradio.de
Description:	Streamradio with wishbox, timeplan, teampage, feedback and greeting box
Version:      	7.8.2
Author:        	KPN
License:       	none (public domain)
Tags:          	

*
*******************************************************/

/*******************************************************
*
	Standard definitions for elements
*
*******************************************************/

* {
    margin: 0px;
    padding: 0px;
	box-sizing: border-box;
}

html {
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
}

body {
    background-image: url(Bitmaps/Background-640x360.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    width: 97%;
    height: auto;
    min-height: 100vh;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
}

.mainGrid {
    display: -ms-grid;
    display: grid;
    align-content: start;
    justify-content: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    -ms-grid-columns: auto 2vw 1fr;
    grid-template-columns: auto 2vw 1fr;
    -ms-grid-rows: auto (2vh auto)[3];
    grid-template-rows: auto repeat(3,2vh auto);
    background-color: transparent;
}

/*******************************************************
*
	Definitions for elements of header section
*
*******************************************************/
.headerGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3,1fr);
    -ms-grid-rows: (auto)[4];
    grid-template-rows: repeat(4,auto);
    padding: 5px;
    align-content: center;
    justify-content: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
    width: 100%;
    height: auto;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    grid-row: 1;
}

.headerLogo {
    width: 100%;
    height: auto;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / span 2;
    align-self: end;
}

.headerDecorationBitmapLeft {
    width: 100%;
    max-width: 222px;
    height: auto;
    max-height: 90px;
    -ms-grid-column-align: end;
    justify-self: right;
    align-self: end;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 2;
    grid-row: 2;
}

.headerDecorationBitmapRight {
    width: 100%;
    max-width: 222px;
    height: auto;
    max-height: 90px;
    justify-self: left;
    align-self: end;
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 2;
    grid-row: 2;
}

.subHeader {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 9% 2vw 1fr 2vw 9%;
    grid-template-columns: 9% 2vw 1fr 2vw 9%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-column: 1 / span 5;
    -ms-grid-row: 3;
    grid-row: 3;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    margin-top: 2vh;
    width: 100%;
    height: auto;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 2vh;
    border-top: 1px solid black;
}

.lockedSongsGrid {
	display: -ms-grid;
	display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 5px auto auto;
    grid-template-rows: auto 5px auto auto;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-column: 1 / span 5;
    -ms-grid-row: 4;
    grid-row: 4;
    align-items: start;
    justify-items: start;
    align-content: start;
    justify-content: start;
    margin-top: 2vh;
    margin-left: 5vh;
    margin-right: 5vh;
    width: auto;
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.lockedSongsText {
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 1;
	grid-row: 1;
	width: 100%;
	height: auto;	
	text-align: left;
}

.lockedSongsDisplay {
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 3;
	grid-row: 3;
	width: 100%;
	height: auto;
}

.lockedSongsContent {
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 0.8em;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-top: 2px;
	width: 100%;
	color: blueviolet;
	background-color: transparent;
	list-style: none;
	text-align: center;
	white-space: nowrap;
}

.lockedSongsButton {
	display: -ms-grid;
	display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 4;
	grid-row: 4;
	margin-top: 10px;
	width: 100%;
	height: auto;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
}

/*******************************************************
*
	Definitions for elements of navigation section
*
*******************************************************/
.NavigationGrid {
    position: fixed;
    top: 60px;
    left: -250px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: max-content;
    grid-template-columns: max-content;
    -ms-grid-rows: 100%;
    grid-template-rows: 100%;
    width: auto;
    height: auto;
    -ms-grid-row: 3;
    -ms-grid-row-span: 4;
    grid-row: 3 / span 4;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    justify-content: center;
    align-content: start;
    align-items: start;
    transition: 0.7s;
    z-index: 1011;
}

/*******************************************************
	Definitions for main menu
*******************************************************/
.mainMenu {
    display: -ms-grid;
    display: grid;
    position: -webkit-sticky;
    position: sticky;
    top: 35px;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    padding: 5px;
    padding-bottom: 4px;
    width: 100%;
    height: auto;
    justify-content: left;
    align-content: start;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    background-color: transparent;
    overflow: hidden;
    z-index: 1012;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
}

.mainMenuHamburger {
    display: block;
	position: fixed;
	top: 5px;
	left: 10px;
	width: 50px;
	height: 45px;
	background-color: paleturquoise;
	color: blueviolet;
	border-width: 1px;
	border-style: solid;
	border-color: #9494ED;
	border-radius: 5px;
	padding: 3px;
	z-index: 1013;
    cursor: pointer;
}

.mainMenuHamburgerLine {
	position: absolute;
	display: inline-block;
	left: 10%;
	height: 3px;
	width: 80%;
	opacity: 1;
	transform: translateY(0px) rotate(0deg);
	background-color: #555555;
}

.mainMenuHamburgerText {
	position: absolute;
	display: inline-block;
	left: 10%;
	top: 28px;
	height: auto;
	width: 80%;
	font-size: 0.8em;
	background-color: transparent;
	color: #555555;
}

.mainMenuHamburgerLine:nth-child(1) {top: 8px}
.mainMenuHamburgerLine:nth-child(2) {top: 14px}
.mainMenuHamburgerLine:nth-child(3) {top: 20px}

/*******************************************************
	Definitions for radio player items
*******************************************************/
.radioPlayerFrame {
    display: none;
    -ms-grid-columns: auto (10px auto)[2];
    grid-template-columns: auto repeat(2,10px auto);
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    width: auto;
    height: auto;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
    align-content: center;
    -ms-grid-column-align: center;
    justify-self: center;
    margin-bottom: 10px;
    background-color: #1B1B1B;
    border: none;
    border-radius: 5px;
    opacity: 0.9;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
}

/*******************************************************
	Definitions for radio status box
*******************************************************/
.RadioStatus {
    width: 125px;
    height: auto;
    background-color: #1B1B1B;
    color: #FFBA4F;
    text-align: center;
    border: outset;
    border-color: #555555;
    border: none;
    overflow: hidden;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
    -ms-grid-rows: (auto)[5];
    grid-template-rows: repeat(5,auto);
    justify-content: left;
    align-content: start;
    justify-self: right;
    align-self: start;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / span 2;
    opacity: 0.6;
    margin-left: 1vw;
    margin-bottom: 0px;
}

.RadioStatusContainer {
	display: none;
    -ms-grid-columns: min-content;
	grid-template-columns: min-content;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
    width: auto;
    height: auto;
    justify-content: center;
    justify-self: center;
    align-self: center;
    -ms-grid-column-align: center;
}

.RadioStatusExtMobile {
	display: -ms-grid;
	display: grid;
}

.RadioStatusExtDesktop {
    width: 165px;
    display: -ms-grid;
    display: grid;
    padding: 5px;
    opacity: 0.9;
    margin-bottom: 10px;
    margin-left: 0%;
    justify-self: center;
    align-self: center;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2;
    -ms-grid-column-align: center;
}

.RadioTextHeader {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 0.8em;
    font-stretch: expanded;
    background-color: transparent;
    margin-bottom: 0.1em;
    font-weight: 600;
    text-align: left;
    color: #FFBA4F;
    border: none;
    width: auto;
    height: auto;
    overflow: hidden;
    -ms-grid-column: 1;
    grid-column: 1;
}
.RadioTextHeader:nth-child(1) {-ms-grid-row: 1; grid-row: 1}
.RadioTextHeader:nth-child(3) {-ms-grid-row: 3; grid-row: 3}


.RadioText {
    margin-bottom: 1%;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 0.7em;
    color: paleturquoise;
    background-color: transparent;
    text-align: center;
    border: none;
    width: 165px;
    height: 1.2em;
    overflow: hidden;
    -ms-grid-column: 1;
    grid-column: 1;
}
.RadioText:nth-child(2) {-ms-grid-row: 2; grid-row: 2}
.RadioText:nth-child(4) {-ms-grid-row: 4; grid-row: 4}

.RadioBitmapContainer {
	width: 100%;
	height: max-content;
	-ms-grid-row: 1;
	grid-row: 1;
}

.RadioBitmapContainer:nth-child(1) {-ms-grid-column: 1; grid-column: 1}
.RadioBitmapContainer:nth-child(2) {-ms-grid-column: 3; grid-column: 3}
.RadioBitmapContainer:nth-child(3) {-ms-grid-column: 5; grid-column: 5}

.RadioBitmap {
    justify-self: center;
    width: 100%;
    height: auto;
    border: none;
    background-color: transparent;
    -ms-grid-column: 1;
    grid-column: 1;
	-ms-grid-row: 5;
	grid-row: 5;
}

/*******************************************************
*
	Definitions for elements of right info section
*
*******************************************************/
.infoFrameGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: min-content 2vh min-content 2vh min-content;
    grid-template-rows: min-content 2vh min-content 2vh min-content;
    height: auto;
    width: 100%;
    -ms-grid-column-align: center;
    justify-items: center;
    -ms-grid-column: 3;
    -ms-grid-row: 5;
    grid-column: 3;
    grid-row: 5;
}

.lastPlayedSongsContainer {
	height: auto;
	width: 100%;
	padding: 5px;
	-ms-grid-column: 1;
	-ms-grid-row: 3;
	grid-column: 1;
	grid-row: 3;
}

.lastPlayedSongsList {
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 0.8em;
	margin-top: 5px;
	padding: 5px;
	padding-top: 10px;
	width: 100%;
	color: blueviolet;
	background-color: whitesmoke;
	list-style: none;
	border: 1px inset #555555;
	border-radius: 10px;
	text-align: left;
	overflow: auto;
	white-space: nowrap;
}

.InfoFrameWindowText {
	white-space: pre-wrap;
}

.cityEventsContainer {
	height: auto;
	width: 100%;
	padding: 5px;
	display: block;
	-ms-grid-column: 1;
	-ms-grid-row: 5;
	grid-column: 1;
	grid-row: 5;
}

.cityEventsList {
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 0.8em;
	margin-top: 5px;
	padding: 5px;
	padding-top: 10px;
	width: 100%;
    height: auto;
    min-height: 150px;
	color: blueviolet;
	background-color: whitesmoke;
	list-style: none;
	border: 1px inset #555555;
	border-radius: 10px;
	text-align: left;
	overflow: auto;
	white-space: pre-wrap;
}

/*******************************************************
*
	Definitions for elements of main section
*
*******************************************************/
.pageGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto (10px auto)[2];
    grid-template-rows: auto repeat(2,10px auto);
    align-content: start;
    align-items: center;
    justify-content: left;
    justify-items: center;
    -ms-grid-column-align: start;
    -ms-grid-row-align: start;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    grid-column: 3;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: auto;
}

/*******************************************************
	Main page
*******************************************************/
.pageWishboxGrid {
    -ms-grid-columns: max-content 5px 0.98fr;
    grid-template-columns: max-content 5px 0.98fr;
    -ms-grid-rows: (min-content)[8];
    grid-template-rows: repeat(8,min-content);
    align-content: start;
    align-items: start;
    justify-content: left;
    -ms-grid-column-align: start;
    -ms-grid-row-align: start;
    justify-items: center;
    width: 100%;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageWishboxBitmapGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 3px min-content;
    grid-template-rows: auto 3px min-content;
    width: 100%;
    height: auto;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
    -ms-grid-column: 1;
    -ms-grid-row: 6;
    grid-column: 1;
    grid-row: 6;
}

.pageWishboxBitmapContainer {
	width: auto;
	height: auto;
    padding: 5px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageWishboxBitmap {
    width: auto;
    height: auto;
}

.pageWishboxButtonGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (auto 5px)[7] auto;
    grid-template-columns: repeat(7,min-content 5px) min-content;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: 0px;
    margin-top: 5px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 7;
    grid-column: 1 / span 3;
    grid-row:  7;
    justify-content: end;
    justify-items: end;
    -ms-grid-column-align: end;
}

.wishedSongDisplayText {
	width: auto;
	height: auto;
	position: absolute;
	top: 2px;
	left: 7px;
	background-color: none;
	color: black;
	margin-left: 0px;
}

/*******************************************************
	Playlists page
*******************************************************/
.pagePlaylistsGrid {
    display: none;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: (auto)[3];
    grid-template-rows: repeat(3,auto);
    justify-content: center;
    align-content: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
    width: 100%;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pagePlaylistsPlaylist {
    margin-top: 10px;
    text-align: left;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 1em;
    border: 1px inset #555555;
    border-radius: 5px;
    width: 100%;
    max-width: 591px;
    height: 100%;
    max-height: 370px;
    color: black;
    background-color: whitesmoke;
    overflow: scroll;
    list-style-type: none;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
}

.pagePlaylistsButtonContainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 10px auto;
    grid-template-columns: auto 10px auto;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    width: auto;
    height: auto;
    justify-content: center;
    align-content: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
    margin-top: 10px;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-column-align: center;
}

.pagePlaylistsElementDjLoggedIn {
    padding-left: 10px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1em;
    width: 100%;
    height: auto;
    color: black;
    background-color: whitesmoke;
    list-style-type: none
}

    .pagePlaylistsElementDjLoggedIn:hover {
        text-decoration: underline;
        cursor: pointer;
    }

.pagePlaylistsElementNoDjLoggedIn {
    padding-left: 10px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1em;
    width: 100%;
    height: auto;
    color: black;
    background-color: whitesmoke;
    list-style-type: none
}

/*******************************************************
    Team members page
*******************************************************/
.pageTeamGrid {
    display: none;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto (15px auto)[9];
    grid-template-rows: auto repeat(9,15px auto);
    justify-content: center;
    align-content: center;
    width: 100%;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageTeamBitmap {
    width: 50px;
    height: auto;
    align-self: center;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
}

.pageTeamItemGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 10px auto;
    grid-template-columns: auto 10px auto;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    width: 100%;
    height: auto;
    justify-content: left;
    align-content: start;
    -ms-grid-column-align: start;
    -ms-grid-row-align: start;
    justify-items: left;
    align-items: start;
}

.pageTeamItemGrid:nth-child(2) {padding-left: 10px; -ms-grid-row: 3; grid-row: 3}
.pageTeamItemGrid:nth-child(3) {padding-left: 60px; -ms-grid-row: 5; grid-row: 5}
.pageTeamItemGrid:nth-child(4) {padding-left: 110px; -ms-grid-row: 7; grid-row: 7}
.pageTeamItemGrid:nth-child(5) {padding-left: 60px; -ms-grid-row: 9; grid-row: 9}
.pageTeamItemGrid:nth-child(6) {padding-left: 10px; -ms-grid-row: 11; grid-row: 11}
.pageTeamItemGrid:nth-child(7) {padding-left: 60px; -ms-grid-row: 13; grid-row: 13}
.pageTeamItemGrid:nth-child(8) {padding-left: 110px; -ms-grid-row: 15; grid-row: 15}
.pageTeamItemGrid:nth-child(9) {padding-left: 60px; -ms-grid-row: 17; grid-row: 17}

.pageTeamItemGridAutoDj {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 10px 1fr;
    grid-template-columns: auto 10px 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    justify-content: left;
    align-content: start;
    -ms-grid-column-align: start;
    -ms-grid-row-align: start;
    justify-items: left;
    align-items: start;
    height: auto;
	width: 100%;    
    padding-bottom: 5px;
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid #555555;
    padding-left: 10px;
    -ms-grid-column-align: start;
    -ms-grid-row-align: center;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 19;
    grid-row: 19;
}

.pageTeamMemberDescriptionGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: min-content 5px 1fr;
    grid-template-columns: min-content 5px 1fr;
    -ms-grid-rows: auto 2px auto;
    grid-template-rows: auto 2px auto;
    align-items: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    justify-content: left;
    align-content: center;
    -ms-grid-column-align: start;
    -ms-grid-row-align: center;
    justify-items: left;
    height: auto;
    width: 100%;
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 1;
    grid-row: 1;
}

.pageTeamMemberName {
    padding-top: 4px;
    text-align: left;
    font-size: 1em;
    width: 100%;
    height: auto;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
}

.pageTeamMemberDescription {
    padding-top: 4px;
    text-align: left;
    font-size: 0.7em;
    width: 100%;
    height: auto;
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-row-align: end;
}

.pageTeamMemberNextStream {
    text-align: left;
    font-size: 0.8em;
    width: auto;
    height: auto;
    padding-left: 15px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    -ms-grid-row: 2;
    grid-row: 2;
    white-space: pre-wrap;
    width: 100%;
    height: auto;
}

/*******************************************************
    Guestbook page
*******************************************************/
.pageGuestbookGrid {
    width: 100%;
    height: 535px;
    min-height: 535px;
    display: none;
    position: relative;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 1fr 5px min-content;
    grid-template-rows: 1fr 5px min-content;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageGuestbookPagesContainer {
    background-image: url("Bitmaps/book.png");
    background-origin: content-box;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 100%;
    grid-template-rows: 100%;
    width: 100%;
    height: 100%;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
}

.pageGuestbookPages {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 100%;
    grid-template-rows: 100%;
    grid-row: 1;
    width: 100%;
    height: 100%;
}

.pageGuestbookCanvas {
	position: absolute;
	z-index: 1000;
	grid-row: 1;
}

.pageGuestbookPage {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: min-content 5px 1fr 5px min-content;
    grid-template-rows: min-content 5px 1fr 5px min-content;
    background-image: url("Bitmaps/paper.png");
    background-origin: content-box;
    background-position: center center;
    background-size: auto auto;
    position: absolute;
    display: block;
    width: calc(50% - 18px);
    height: calc(100% - 72px);
    left: 50%;
    top: 10px;
    overflow: hidden;
    white-space: pre-wrap;
    -ms-touch-action: none;
    touch-action: none;
}

.pageGuestbookEntryHeader {
    padding: 3px 15px;
    text-align: justify;
    font-family: 'Lucida Sans Unicode';
    font-size: 1.2em;
	margin: 15px 0 10px;
    white-space: pre-wrap;
    width: 100%;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
}

.pageGuestbookEntryText {
    padding: 3px 15px;
    text-align: justify;
    font-family: 'Lucida Sans Unicode';
    font-size: 0.9em;
    white-space: pre-wrap;
    overflow-y: auto;
    width: 100%;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageGuestbookEntryFooter {
    padding: 3px 15px;
    text-align: justify;
    font-family: 'Consolas';
    font-size: 0.8em;
    white-space: pre-wrap;
    width: 100%;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
    grid-column: 1;
    grid-row: 5;
}

.pageGuestbookNavigationButtons {
	display: -ms-grid;
	display: grid;
    -ms-grid-columns: max-content (10px max-content)[4];
    grid-template-columns: max-content repeat(4,10px max-content);
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    justify-content: center;
    -ms-grid-column-align: center;
	width: auto;
	height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
    -ms-grid-column-align: center;
    justify-self: center;
}

.pageGuestbookNewEntryPage {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 5px auto 2px auto 5px auto 2px 1fr 5px auto;
    grid-template-rows: auto 5px auto 2px auto 5px auto 2px 1fr 5px auto;
    background-image: url("Bitmaps/paper.png");
    background-origin: content-box;
    background-position: center center;
    background-size: auto auto;
    position: absolute;
    width: calc(50% - 18px);
    height: calc(100% - 72px);
    padding: 10px;
    left: 50%;
    top: 10px;
    overflow: hidden;
    white-space: pre-wrap;
    -ms-touch-action: none;
    touch-action: none;
}

.pageGuestbookNewEntryButtons {
	display: -ms-grid;
	display: grid;
    -ms-grid-columns: max-content 5px max-content;
	grid-template-columns: max-content 5px max-content;
    -ms-grid-rows: max-content;
	grid-template-rows: max-content;
	width: auto;
	height: auto;
	justify-self: end;
    -ms-grid-column-align: end;
	grid-column: 1;
	grid-row: 11;
	-ms-grid-column: 1;
	-ms-grid-row: 11;
}

.pageGuestbookNewEntryText {
    padding-left: 10px;
    text-align: justify;
    font-family: 'Lucida Sans Unicode';
    font-size: 0.9em;
    white-space: nowrap;
    width: auto;
    height: auto;
}

/*******************************************************
	Feedback page
*******************************************************/
.pageFeedbackGrid {
    display: none;
    -ms-grid-columns: max-content 5px 0.98fr;
    grid-template-columns: max-content 5px 0.98fr;
    -ms-grid-rows: (min-content)[7];
    grid-template-rows: repeat(7,min-content);
    align-content: start;
    align-items: start;
    justify-content: left;
    justify-items: center;
    -ms-grid-column-align: start;
    -ms-grid-row-align: center;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageFeedbackBitmapGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 3px min-content;
    grid-template-rows: auto 3px min-content;
    width: 100%;
    height: auto;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
    grid-column: 1;
    grid-row: 5;
}

.pageFeedbackBitmapContainer {
    width: auto;
    height: auto;
    padding: 5px;
    padding-top: 20px;
    padding-bottom: 30px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageFeedbackBitmap {
    width: auto;
    height: auto;
}

.pageFeedbackButtonGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (auto 5px)[6] auto;
    grid-template-columns: repeat(6,auto 5px) auto;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    width: auto;
    height: auto;
    justify-content: end;
    justify-self: end;
    margin-left: auto;
    margin-right: 0px;
    margin-top: 5px;
    -ms-grid-column-align: end;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    grid-column: 1 / span 3;
    grid-row: 6;
    justify-content: end;
    justify-items: end;
    -ms-grid-column-align: end;
}

/*******************************************************
	Time plan page
*******************************************************/
.pageTimePlanGrid {
    display: none;
    -ms-grid-columns: max-content (1fr)[14];
    grid-template-columns: max-content repeat(14,1fr);
    -ms-grid-rows: max-content max-content (minmax(40px,1fr))[7] max-content;
    grid-template-rows: max-content max-content repeat(7,minmax(40px,1fr)) max-content;
    align-content: stretch;
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    height: auto;
}

.pageTimePlanHeaderRow {
	-ms-grid-column: 1;
	-ms-grid-column-span: 15;
	-ms-grid-row: 1;
    grid-column: 1 / span 15;
    grid-row: 1;
    width: 100%;
    height: auto;
    text-align: center;
}

.pageTimePlanTableColumnHeader {
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-flex-align: end;
    -moz-box-align: end;
    -webkit-box-align: end;
    align-items: flex-end;
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
    border-bottom: 2px solid #555555;
    width: 100%;
    height: 100%;
    background-color: transparent;
    grid-row: 2;
    -ms-grid-row: 2;
}

.pageTimePlanTableColumnHeaderText {
    text-align: center;
    font-size: 0.8em;
    font-weight: bolder;
    width: 100%;
    height: auto;
    background-color: transparent;
}

.pageTimePlanTableRowHeader {
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: end;
    -moz-box-pack: end;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -ms-flex-align: center;
    -moz-box-align: center;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
    padding-right: 10px;
    border-right: 2px solid #555555;
    width: 100%;
    height: 100%;
    grid-column: 1;
    -ms-grid-column: 1;
    background-color: transparent;
}

.pageTimePlanTableRowHeaderText {
    text-align: right;
    font-size: 0.8em;
    font-weight: bolder;
    width: 100%;
    height: auto;
    background-color: transparent;
}

.pageTimePlanTableElementGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 100%;
    grid-template-rows: 100%;
    width: 100%;
    height: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: transparent;
    -ms-grid-column-align: stretch;
    -ms-grid-row-align: stretch;
}

.pageTimePlanElementContainer {
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: start;
    -moz-box-pack: start;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -ms-flex-align: center;
    -moz-box-align: center;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.pageTimePlanTableBitmap {
    display: block;
    padding: 5px;
    width: auto;
    height: 100%;
    background-color: transparent;
}
    .pageTimePlanTableBitmap:hover {
        cursor: pointer;
    }

.pageTimePlanTableText {
    text-align: left;
    font-size: 0.8em;
    color: black;
    width: 100%;
    height: auto;
    background-color: transparent;
}

.pageTimePlanButtonContainer {
    width: auto;
    height: auto;
	-ms-grid-column-align: center;
	justify-self: center;    
}

/*******************************************************
	Pinwall page
*******************************************************/
.pagePinwallGrid {
    display: none;
    -ms-grid-columns: 1fr 10px auto;
    grid-template-columns: 1fr 10px auto;
    -ms-grid-rows: max-content 10px min-content;
    grid-template-rows: max-content 10px min-content;
    width: 100%;
    height: auto;
    justify-content: space-between;
    -ms-grid-column-align: space-between;
    overflow: visible;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pagePinwallPinsContainer {
    width: auto;
    height: 100%;
    grid-column: 3;
    grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
}

.pagePinwallPinsGrid {
    display: -ms-grid;
    display: grid;
    position: -webkit-sticky;
    position: sticky;
    top: 15px;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
    -ms-grid-rows: auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px;
    grid-template-rows: auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px auto 5px;
    align-content: start;
    align-items: start;
    width: auto;
    height: auto;
}

.pagePinwallPinsElement {
    width: 25px;
    height: auto;
    -ms-grid-row-align: start;
    -ms-grid-column: 1;
    grid-column: 1;
}
    .pagePinwallPinsElement {
        cursor: pointer;
    }

	.pagePinwallPinsElement:nth-child(1) {grid-row: 1; -ms-grid-row: 1}
	.pagePinwallPinsElement:nth-child(2) {grid-row: 3; -ms-grid-row: 3}
	.pagePinwallPinsElement:nth-child(3) {grid-row: 5; -ms-grid-row: 5}
	.pagePinwallPinsElement:nth-child(4) {grid-row: 7; -ms-grid-row: 7}
	.pagePinwallPinsElement:nth-child(5) {grid-row: 9; -ms-grid-row: 9}
	.pagePinwallPinsElement:nth-child(6) {grid-row: 11; -ms-grid-row: 11}
	.pagePinwallPinsElement:nth-child(7) {grid-row: 13; -ms-grid-row: 13}
	.pagePinwallPinsElement:nth-child(8) {grid-row: 15; -ms-grid-row: 15}
	.pagePinwallPinsElement:nth-child(9) {grid-row: 17; -ms-grid-row: 17}
	.pagePinwallPinsElement:nth-child(10) {grid-row: 19; -ms-grid-row: 19}
	.pagePinwallPinsElement:nth-child(11) {grid-row: 21; -ms-grid-row: 21}
	.pagePinwallPinsElement:nth-child(12) {grid-row: 23; -ms-grid-row: 23}
	 
.pagePinwallElementsGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 10px 1fr 10px auto;
    grid-template-rows: auto 10px 1fr 10px auto;
    background-image: url(Bitmaps/kork.jpg);
    background-origin: content-box;
    background-position: top;
    background-size: auto;
    width: 100%;
    height: auto;
    grid-column: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    padding: 10px;
}

.pagePinwallElementsContainer {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, 145px);
    grid-auto-rows: auto;
    width: 100%;
    height: auto;
    grid-column: 1;
    grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    padding-right: -10px;
    padding-bottom: -10px;
}

.pagePinwallElementContainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    width: 135px;
    height: 145px;
    background: none;
    margin-right: 10px;
    margin-bottom: 10px;
}
    .pagePinwallElementContainer:hover {
        cursor: pointer;
    }

.pagePinwallElement {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 5px 1fr;
    grid-template-rows: auto 5px 1fr;
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    background-origin: content-box;
    background-position: top;
    background-attachment: fixed;
    background-size: auto;
    background-color: transparent;
    white-space: pre-wrap;
    width: 100%;
    height: 100%;
    padding: 5px;
    z-index: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    grid-column: 1;
    grid-row: 2;
    overflow-y: auto;
    overflow-x: hide;
}

.pagePinwallElementHeader {
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    text-decoration: underline;
    color: black;
    text-align: center;
    background: none;
    white-space: nowrap;
    z-index: 2;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
}

.pagePinwallElementText {
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 0.8em;
    font-weight: normal;
    color: black;
    background: none;
    text-align: left;
    white-space: pre-wrap;
    z-index: 2;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pagePinwallPinBitmap {
    margin-left: -10px;
    margin-top: -10px;
    width: 25px;
    height: auto;
    z-index: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
}

.pagePinwallEditElementWindow {
    -ms-grid-columns: 1fr 5px auto;
    grid-template-columns: 1fr 5px auto;
    -ms-grid-rows: auto 5px auto;
    grid-template-rows: auto 5px auto;
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    padding: 10px;
    padding-bottom: 15px;
    background-origin: content-box;
    background-position: top;
    background-attachment: fixed;
    background-size: auto;
    background-color: transparent;
}

.pagePinwallEditButtonGrid {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: (auto)[4];
    grid-template-rows: repeat(4,auto);
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: start;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
	width: 100%;
	height: 100%;
	grid-row: 1 / span 3;
	grid-column: 3;
	-ms-grid-row: 1;
	-ms-grid-column: 3;
    -ms-grid-row-span: 3;
}

.pagePinwallEditTextField {
	overflow-y: scroll;
	width: 200px;
	height: 150px;
	grid-column: 1;
	grid-row: 3;
	-ms-grid-column: 1;
	-ms-grid-row: 3;
}

/*******************************************************
	Donate page
*******************************************************/
.pageDonateGrid {
    display: none;
    -ms-grid-columns: 0.96fr;
    grid-template-columns: 0.96fr;
    -ms-grid-rows: min-content 2vh min-content 2vh min-content;
    grid-template-rows: min-content 2vh min-content 2vh min-content;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.buttonDonateContainer {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: 1fr min-content 1fr;
    grid-template-columns: 1fr min-content 1fr;
    -ms-grid-rows: 100%;
    grid-template-rows: 100%;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.buttonDonate {
    text-align: center;
    border: 1px solid black;
    border-radius: 5px;
    border-style: solid;
    background-color: #555555;
    border-color: black;
    color: paleturquoise;
    cursor: pointer;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 1em;
    padding: 10px;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    min-height: 40px;
    overflow: hidden;
    z-index: 3;
    outline: none;
    grid-column: 2;
    grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
}

/*******************************************************
	Photo gallery page
*******************************************************/
.pagePhotoGalleryGrid {
    display: none;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: max-content 10px auto 10px auto;
    grid-template-rows: max-content 10px auto 10px auto;
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: center;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pagePhotoGalleryPhotoContainer {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, 120px);
    grid-auto-rows: auto;
    width: 100%;
    height: auto;
    justify-content: left;
    justify-items: center;
    align-content: start;
    align-items: baseline;
    padding-right: -10px;
    padding-bottom: -10px;
}

.pagePhotoGalleryElement {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 3px auto;
    grid-template-rows: auto 3px auto;
    width: 100%;
    height: auto;
    justify-items: center;
    align-items: start;
    -ms-grid-column-align: start;
    -ms-grid-row-align: end;
    margin-right: 10px;
    margin-bottom: 10px;
}

.pagePhotoGalleryElementBitmap {
    width: 90px;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
}
    .pagePhotoGalleryElementBitmap:hover {
        cursor: pointer;
    }

.photoGalleryElementText {
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 0.8em;
    font-weight: normal;
    color: black;
    background: none;
    text-align: center;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    white-space: pre-wrap;
    width: 100%;
    height: auto;
    min-height: 25px;
    overflow-x: hidden;
    overflow-y: auto;
    outline: none;
    border-style: none;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageDisplayImageWindow {
    display: none;
    position: absolute;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 10px auto 10px auto;
    grid-template-rows: auto 10px auto 10px auto;
    justify-content: center;
    align-content: start;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    justify-items: center;
    align-items: start;
    margin-top: auto;
    margin-left: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    z-index: 1;
    overflow-x: auto;
}

.pageDisplayImageImageContainer {
    display: block;
    width: 90%;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
}

.pageDisplayImageImage {
    width: 100%;
    height: auto;
}

.pageDisplayImageText {
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 0.8em;
    font-weight: normal;
    color: black;
    background: none;
    text-align: center;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    white-space: pre-wrap;
    width: 100%;
    height: auto;
    min-height: 25px;
    overflow-x: hidden;
    overflow-y: auto;
    outline: none;
    border-style: none;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
    grid-column: 1;
    grid-row: 5;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
}

.pageDisplayImageButtonGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (auto 5px)[4] auto;
    grid-template-columns: repeat(4,max-content 5px) max-content;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    width: auto;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
}

.newPhotoInformationGrid {
    -ms-grid-columns: auto 10px auto;
    grid-template-columns: auto 10px auto;
    -ms-grid-rows: auto 10px auto;
    grid-template-rows: auto 10px auto;
    width: auto;
    height: auto;
}

.newPhotoInformationButtonGrid{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 10px 1fr;
    grid-template-columns: 1fr 10px 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    grid-column: 1 / span 3;
    -ms-grid-column-span: 3;
    -ms-grid-column: 1;
    grid-row: 3;
    -ms-grid-row: 3;
    width: 100%;
    height: auto;
}

.newPhotoElementGrid{
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: (auto  10px)[3] auto;
    grid-template-rows: repeat(3,auto 10px) auto;
    width: auto;
    max-width: 100%
    height: auto;
    overflow-x: auto;
    justify-items: center;
}

.newPhotoElementBitmap{
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 3;
	grid-row: 3;
	-ms-grid-column-align: center;
}

.newPhotoElementDescriptionInputGrid{
    display: -ms-grid;
    display: grid;
	-ms-grid-columns: min-content 10px 1fr;
    grid-template-columns: min-content 10px 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    width: 100%;
    height: 100%;
    -ms-grid-column-align: center;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 5;
    grid-row: 5;
}

.newPhotoElementDescriptionText{
	-ms-grid-column: 1;
	grid-column: 1;
	-ms-grid-row: 1;
	grid-row: 1;
}

.newPhotoElementDescription{
	-ms-grid-column: 3;
	grid-column: 3;
	-ms-grid-row: 1;
	grid-row: 1;
}

.newPhotoElementDescriptionButtonGrid{
    display: -ms-grid;
    display: grid;
	-ms-grid-columns: 1fr 10px 1fr 10px 1fr;
    grid-template-columns: 1fr 10px 1fr 10px 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    width: auto;
    height: 100%;
    justify-content: center;
    -ms-grid-column-align: center;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 7;
    grid-row: 7;
}

.newPhotoElementUploadProgressWindow {
	-ms-grid-columns: 100%;
	grid-template-columns: 100%;
    -ms-grid-rows: auto;
	grid-template-rows: auto;
	width: 240px;
	height: auto;
	padding: 5px;		
}

.pageEditImageWindow {
    display: none;
    position: absolute;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: (auto 10px)[3] auto;
    grid-template-rows: repeat(3, auto 10px) auto;
    justify-content: center;
    align-content: start;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    justify-items: center;
    align-items: start;
    margin-top: auto;
    margin-left: auto;
    width: auto;
    height: auto;
    z-index: 2;
}

.pageEditImageButtonGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (max-content 5px)[3] max-content;
    grid-template-columns: repeat(3,max-content 5px) max-content;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    width: auto;
    height: auto;
    -ms-grid-colum: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column-align: center;
}

.pageEditImageImageContainer {
    display: block;
    width: 90%;
    height: auto;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column-align: center;
}

.pageEditImageImage {
    width: 100%;
    height: auto;
}

.photoEditImageText {
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 0.8em;
    font-weight: normal;
    color: black;
    background: none;
    text-align: center;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    white-space: pre-wrap;
    width: 100%;
    height: auto;
    min-height: 25px;
    overflow-x: hidden;
    overflow-y: auto;
    outline: none;
    border-style: none;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
    grid-column: 1;
    grid-row: 5;
    -ms-grid-column-align: center;
}

/*******************************************************
	Memorial page
*******************************************************/
.pageMemorialPageGrid {
    display: none;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto 5px min-content 5px auto;
    grid-template-rows: auto 5px min-content 15px auto;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageMemorialPageCondolenceCard {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 300px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
}

.pageMemorialPageCondolenceCandleLink {
    position: relative;
    text-align: center;
    border: 2px outset #555555;
    border-radius: 5px;
    background-color: #555555;
    color: paleturquoise;
    cursor: pointer;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    padding-right: 8px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    overflow: hidden;
    outline: none;
	width: auto;
	height: auto;
	-ms-grid-column: 1;
	-ms-grid-row: 3;
	grid-column: 1;
	grid-row: 3;
    -ms-grid-column-align: end;
    justify-self: right;
}

.pageMemorialPageCondolenceText {
	position: relative;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    color: black;
    white-space: pre-wrap;
    text-align: center;
    background-color: transparent;
    width: auto;
    height: auto;	
}

.pageMemorialPageCondolenceCandleFrame {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: auto 10px 1fr 10px min-content;
	-ms-grid-rows: auto;
	grid-template-columns: auto 10px 1fr 10px min-content;
	grid-template-rows: auto;
	-ms-grid-column: 1;
	-ms-grid-row: 5;
	grid-column: 1;
	grid-row: 5;
	width: 95%;
	height: auto;
	align-items: center;
	-ms-grid-row-align: start;
}

.pageMemorialPageCondolenceCandleBitmap {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
	grid-column: 1;
	grid-row: 1;
	width: 75%;
	height: auto;
}

.pageMemorialPageCondolenceCandleText {
	-ms-grid-column: 3;
	-ms-grid-row: 1;
	grid-column: 3;
	grid-row: 1;
	width: 100%;
	height: auto;
	text-align: left;
    font-family: "Times New Roman", Times, serif;
    font-size: 0.8em;
    color: black;
    white-space: pre-wrap;	
}

.pageMemorialPageCondolenceCandleButtonGrid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 100%;
	-ms-grid-rows: auto auto;
	grid-template-columns: 100%;
	grid-template-rows: auto auto;
	-ms-grid-column: 5;
	-ms-grid-row: 1;
	grid-column: 5;
	grid-row: 1;
	width: 100%;
	height: auto;
	align-items: center;
	-ms-grid-column-align: center;
}

.pageMemorialPageNewCondolenceCandleGrid {
    display: none;
	-ms-grid-columns: auto 15px 1fr;
    grid-template-columns: auto 15px 1fr;
    -ms-grid-rows: auto 5px auto;
    grid-template-rows: auto 5px auto;
    width: auto;
    max-width: 100%;
    height: auto;
}

.pageMemorialPageNewCondolenceCandleBitmap {
	width: 100%;
	height: auto;
	-ms-grid-column: 1;
	-ms-grid-row: 1;
	grid-column: 1;
	grid-row: 1;
}

.AddNewCondolenceCandleTextGrid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	-ms-grid-rows: auto 5px auto;
	grid-template-columns: 1fr;
	grid-template-rows: auto 5px auto;
	width: 100%;
	height: auto;
	justify-items: left;
	-ms-grid-column: 3;
	-ms-grid-row: 1;
	grid-column: 3;
	grid-row: 1;
}

.AddNewCondolenceCandleButtonGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: min-content 5px 1fr;
    grid-template-columns: min-content 5px 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: 0px;
	-ms-grid-column: 1;
	-ms-grid-row: 3;
	grid-row: 3;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    justify-content: end;
    justify-items: end;
    -ms-grid-column-align: end;
}

/*******************************************************
	Edit Memorial page
*******************************************************/
.pageEditMemorialPageGrid {
    display: none;
    -ms-grid-columns: 1fr 10px auto;
    grid-template-columns: 1fr 10px auto;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: start;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageEditMemorialPageBackgroundGrid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: auto;
	grid-template-columns: auto;
	-ms-grid-rows: (auto 5px)[7] auto;
	grid-template-rows: repeat(7,auto 5px) auto;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
	grid-column: 3;
	grid-row: 1;	
    width: 100%;
    height: auto;
}

.pageEditMemorialPageBackgroundBitmap {
	width: 65px;
	height: auto;
	-ms-grid-column: 1;
	grid-column: 1;	
    border: 1px solid black;
    cursor: pointer;
}
.pageEditMemorialPageBackgroundBitmap:nth-child(1) {-ms-grid-row: 1; grid-row: 1}
.pageEditMemorialPageBackgroundBitmap:nth-child(2) {-ms-grid-row: 3; grid-row: 3}
.pageEditMemorialPageBackgroundBitmap:nth-child(3) {-ms-grid-row: 5; grid-row: 5}
.pageEditMemorialPageBackgroundBitmap:nth-child(4) {-ms-grid-row: 7; grid-row: 7}
.pageEditMemorialPageBackgroundBitmap:nth-child(5) {-ms-grid-row: 9; grid-row: 9}
.pageEditMemorialPageBackgroundBitmap:nth-child(6) {-ms-grid-row: 11; grid-row: 11}
.pageEditMemorialPageBackgroundBitmap:nth-child(7) {-ms-grid-row: 13; grid-row: 13}
.pageEditMemorialPageBackgroundBitmap:nth-child(8) {-ms-grid-row: 15; grid-row: 15}

.pageEditMemorialPageCondolenceCardGrid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: auto 5px 1fr;
	grid-template-columns: auto 5px 1fr;
	-ms-grid-rows: auto 5px auto 10px auto;
	grid-template-rows: auto 5px auto 10px auto;
	position: relative;
	width: 100%;
	height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
}

.pageEditMemorialPageCondolenceCard {
	width: 100%;
	height: auto;
	min-height: 300px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    width: 100%;
    height: auto;
    min-height: 300px;
}

.pageEditMemorialPageCondolenceText {
	position: relative;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    color: black;
    white-space: pre-wrap;
    text-align: center;
    background-color: transparent;
    width: auto;
    height: auto;	
}

/*******************************************************
	United Radio Friends page
*******************************************************/
.pageUnitedRadioFriendsGrid {
    display: none;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: max-content 2vh max-content;
    grid-template-rows: max-content 2vh max-content;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageUnitedRadioFriendsBitmap {
    display: block;
    padding: 5px;
    width: 100%;
    height: auto;
    background-color: transparent;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
}

.pageUnitedRadioFriendsTextGrid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 100%;
	grid-template-columns: 100%;
	-ms-grid-rows: auto auto 10px auto auto 10px auto auto;
	grid-template-rows: auto auto 10px auto auto 10px auto auto;
	position: relative;
	width: 100%;
	height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageUnitedRadioFriendsText {
	white-space: pre-wrap;
	text-align: center;
}

/*******************************************************
	Edit city events page
*******************************************************/
.pageEditCityEvents {
    display: none;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 10px auto;
    grid-template-rows: auto 10px auto;
    align-content: start;
    align-items: start;
    justify-content: left;
    justify-items: center;
    -ms-grid-column-align: start;
    -ms-grid-row-align: center;
    width: 100%;
    height: auto;
    min-height: 545px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageEditCityEventsButtonGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (auto 10px)[3] auto;
    grid-template-columns: repeat(3,auto 10px) auto;
    -ms-grid-rows: max-content;
    grid-template-rows: max-content;
    width: 100%;
    height: auto;
    justify-content: left;
    justify-items: left;
    align-content: center;
    align-items: start;
    -ms-grid-column-align: start;
    -ms-grid-row-align: center;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
}

.pageEditCityEventsButtonElementGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 10px auto;
    grid-template-columns: 1fr 10px auto;
    -ms-grid-rows: auto 10px auto;
    grid-template-rows: auto 10px auto;
    width: 100%;
    height: auto;
}

    .pageEditCityEventsButtonElementGrid:nth-child(1) {-ms-grid-column: 1; grid-column: 1}
    .pageEditCityEventsButtonElementGrid:nth-child(2) {-ms-grid-column: 3; grid-column: 3}

.pageEditCityEventsColorSelectionHeader{
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0px;
}

.pageEditCityEventsColorSelection {
    width: 30px;
    height: 20px;
    border: none;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    grid-column: 3;
    grid-row: 1;
}
    .pageEditCityEventsColorSelection:hover {
        cursor: pointer;
    }

.pageEditCityEventsButtonTextDecoration{
    font-size: 1em;
    width: 40px;
    height: 40px;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-row-align: end;
    align-self: end;
}

    .pageEditCityEventsButtonTextDecoration:nth-child(1) {-ms-grid-column: 5; grid-column: 5}
    .pageEditCityEventsButtonTextDecoration:nth-child(2) {-ms-grid-column: 7; grid-column: 7}

.pageEditCityEventsItemGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 10px 1fr 10px max-content;
    grid-template-columns: auto 10px 1fr 10px max-content;
    -ms-grid-rows: min-content;
    grid-template-rows: max-content;
    width: 100%;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageEditCityEventsButtonDelete {
	width: 100%;
	height: auto;
    -ms-grid-column: 5;
    grid-column: 5;
}

/*******************************************************
	Edit time plan page
*******************************************************/
.pageEditTimePlan {
    display: none;
    -ms-grid-columns: (max-content 5px)[4] minmax(max-content, 1fr) 5px max-content;
    grid-template-columns: repeat(4,max-content 5px) minmax(max-content, 1fr) 5px max-content;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    align-content: start;
    align-items: start;
    justify-content: left;
    justify-items: center;
    -ms-grid-column-align: start;
    min-height: 545px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    height: auto;
}

.pageEditTimePlanHeader {
    text-align: center;
    font-size: 1em;
    font-stretch: normal;
    vertical-align: bottom;
    grid-row: 3;
    -ms-grid-row: 3;
    -ms-grid-row-align: end;
}

    .pageEditTimePlanHeader:nth-child(2) {-ms-grid-column: 1; grid-column: 1}
    .pageEditTimePlanHeader:nth-child(3) {-ms-grid-column: 3; grid-column: 3}
    .pageEditTimePlanHeader:nth-child(4) {-ms-grid-column: 5; grid-column: 5}
    .pageEditTimePlanHeader:nth-child(5) {-ms-grid-column: 7; grid-column: 7}
    .pageEditTimePlanHeader:nth-child(6) {-ms-grid-column: 9; grid-column: 9}
    .pageEditTimePlanHeader:nth-child(7) {-ms-grid-column: 11; grid-column: 11}

.pageEditTimePlanInputField {
    border: inset;
    width: 100%;
    height: min-content;
    text-align: left;
    vertical-align: text-top;
    background-color: whitesmoke;
    -ms-grid-row-align: start;
}

/*******************************************************
*
	Definitions for elements of statistics frame
*
*******************************************************/
.numberListenerWindow {
    font-size: 1em;
    width: auto;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    display: none;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
    grid-column: 1;
    grid-row: 5;
    -ms-grid-column-align: center;
    
}

.statisticWindowsGrid {
    display: none;
    -ms-grid-columns: auto 0.2vw 1fr;
    grid-template-columns: auto 0.2vw 1fr;
    -ms-grid-rows: min-content;
    grid-auto-rows: min-content;
    justify-content: center;
    align-content: start;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start;
    width: 100%;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 7;
    grid-column: 1;
    grid-row: 7;
}

/*******************************************************
    Country list page
*******************************************************/
.pageCountryListDesktop {
    display: -ms-grid;
    display: grid;
    width: max-content;
    height: auto;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
    -ms-grid-rows: min-content;
    grid-template-rows: min-content;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
}

.numberVisitorsTotalDisplayGrid {
    display: -ms-grid;
    display: grid;
    width: max-content;
    height: auto;
    -ms-grid-rows: min-content;
    grid-template-rows: min-content;
    -ms-grid-columns: 1fr 10px auto;
    grid-template-columns: 1fr 10px auto;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
}

.numberVisitorsTotalNumber {
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    font-family: 'digital-digits';
    font-size: 1.3em;
    border: none;
    width: auto;
    height: auto;
    color: whitesmoke;
    text-align: left;
    background-color: black;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    grid-column: 3;
    grid-row: 1;
}

/*******************************************************
    Top 10 wishes page
*******************************************************/
.pageTopTenWishedSongs {
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: auto;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: minmax(max-content, 1fr) 5px max-content;
    grid-template-columns: minmax(max-content,1fr) 5px auto;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.8em;
    margin-top: 5px;
    padding: 5px;
    padding-top: 10px;
    color: blueviolet;
    background-color: whitesmoke;
    border: 1px inset #555555;
    border-radius: 10px;
    text-align: left;
    overflow: auto;
    white-space: nowrap;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageTopTenWishedSongsMobile {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 5px minmax(max-content,1fr) 5px auto;
    grid-template-rows: auto 5px minmax(max-content,1fr) 5px auto;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
}

.pageTopTenWishedSongsDesktop {
    display: none;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 5px minmax(max-content,1fr) 5px auto;
    grid-template-rows: auto 5px minmax(max-content,1fr) 5px auto;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    height: 100%;
}

.buttonResetWishedSongsList{
    position: relative;
    text-align: center;
    border: 2px outset #555555;
    border-radius: 5px;
    background-color: #555555;
    color: paleturquoise;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 100%;
    width: 100%;
	min-width: 120px;
    height: auto;
    min-height: 25px;
    display: none;
    overflow: hidden;
    outline: none;
    grid-row: 1;
    -ms-grid-row: 1;
	-ms-grid-column: 1;
    -ms-grid-row: 5;
    grid-column: 1;
    grid-row: 5;
    -ms-grid-column-align: center;
}
    .buttonResetWishedSongsList:active {
        border-style: inset;
    }

    .buttonResetWishedSongsList:disabled {
        background-color: gainsboro;
        color: #555555;
        cursor: initial;
        cursor: default;
    }


.pageTopTenWishedSongsHeader {
    white-space: pre-wrap;
    text-align: center;
    width: 100%;
    height: auto;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    grid-column: 1;
    grid-row: 1;
}

.pageTopTenWishedSongsElements {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.8em;
    margin-top: 5px;
    padding: 5px;
    padding-top: 10px;
    width: 100%;
    height: auto;
    color: blueviolet;
    background-color: whitesmoke;
    border: 1px inset #555555;
    border-radius: 10px;
    text-align: left;
    overflow: auto;
    white-space: nowrap;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    grid-column: 1;
    grid-row: 3;
    
}

/*******************************************************
*
	Definitions for elements of footer section
*
*******************************************************/
.footerGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 100%;
    grid-template-rows: 100%;
    align-items: center;
    justify-content: center;
	padding-left: 1vw;
	padding-right: 1vw;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%;
    height: auto;
    border-top: 1px solid black;
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
    grid-row: 7;
}

.footerBox {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto 1vh auto;
    grid-template-rows: auto 1vh auto;
    background-color: black;
    color: whitesmoke;
    text-align: center;
    align-items: center;
    -ms-grid-row-align: center;
    justify-content: center;
    height: auto;
    width: 100%;
    padding: 10px;
    cursor: pointer;
    border: none;
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-row: 1;
	grid-column: 1;
}

.footerBitmapLeft {
	width: 100%;
	height: auto;
	display: none;
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-row: 1;
	grid-column: 1;
}

.footerBitmapRight {
	width: 100%;
	height: auto;
	display: none;
	-ms-grid-row: 1;
	-ms-grid-column: 5;
	grid-row: 1;
	grid-column: 5;
}

.ImpressumBoxButton {
    background-color: black;
    color: whitesmoke;
    font-family: serif;
	font-size: 0.6em;
    text-align: center;
    height: auto;
    width: 100%;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
}

.DatenschutzBoxButton {
    background-color: black;
    color: whitesmoke;
    font-family: serif;
    font-size: 0.8em;
    text-align: center;
    height: auto;
    width: 100%;
    border: none;
    cursor: pointer;
    white-space: nowrap;
	overflow: hidden;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
}

@media screen and (min-width: 680px){
    .headerGrid {
        -ms-grid-columns: 1fr auto 1fr;
        grid-template-columns: 1fr auto 1fr;
    }

    .mainHeader {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / span 2;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .NavigationGrid {
        position: relative;
        top: 0px;
        left: 0px;
        margin-left: 0px;
        -ms-grid-rows: min-content 1.5vh 1fr;
        grid-template-rows: min-content 1.5vh 1fr;
    }

    .mainMenu {
        background-color: paleturquoise;
        color: blueviolet;
        border-width: 3px;
        border-style: solid;
        border-color: #9494ED;
        border-radius: 10px;
        -ms-grid-row: 3;
        grid-row: 3;
    }

	.radioPlayerFrame {
		display: -ms-grid;
		display: grid;
	}
	
	.RadioStatusContainer {
		display: -ms-grid;
		display: grid;	
	}
	
	.RadioStatusExtMobile {
		display: none;
	}
	
	.RadioBitmap {
		margin-top: 5px;
	}
	
	.RadioText {
		margin-bottom: 10px;
	}
	
	.mainMenuHamburger{
		display: none;
	}

    .pageDisplayImageWindow {
        width: auto;
    }

    .pageDisplayImageImageContainer {
        width: auto;
        height: auto;
    }

    .pageDisplayImageImage {
        width: auto;
        height: 70%;
    }


    .footerGrid {
        -ms-grid-columns: 32% 2vw 32% 2vw 32%;
        grid-template-columns: 32% 2vw 32% 2vw 32%;
        -ms-grid-rows: 100%;
        grid-template-rows: 100%;
    }

	.footerBox {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
		grid-row: 1;
		grid-column: 3;
	}

    .footerBitmapLeft {
        display: block;
    }

    .footerBitmapRight {
        display: block;
    }
}

@media screen and (min-width: 900px){
    .mainGrid {
        -ms-grid-columns: auto 2vw 1fr 2vw 25%;
        grid-template-columns: auto 2vw 1fr 2vw 25%;
        -ms-grid-rows: auto 2vh auto 2vh auto;
        grid-template-rows: auto 2vh auto 2vh auto;
    }

    .mainHeader {
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
        grid-column: 1 / span 5;
        padding-left: 5vw;
        padding-right: 5vw;
    }

	.headerGrid {
	    -ms-grid-column-span: 5;
	    grid-column: 1 / span 5;
	    grid-row: 1;
	}
	
    .pageGrid {
        -ms-grid-rows: auto 10px auto 10px auto 10px auto;
        grid-template-rows: auto 10px auto 10px auto 10px auto;
    }

	.pageCountryListDesktop {
		width: 100%;
	}
	
	.numberVisitorsTotalDisplayGrid {
	    width: 100%;
	}
	
    .pageTopTenWishedSongsDesktop {
        display: -ms-grid;
        display: grid;
    }

    .pageTopTenWishedSongsMobile {
        display: none;
    }

	.cityEventsSongsContainer {
		display: block;
	}

    .statisticWindowsGrid {
        display: -ms-grid;
        display: grid;
    }

	.infoFrameGrid {
		-ms-grid-column: 5;
	    -ms-grid-row: 3;
	    grid-column: 5;
	    grid-row: 3;
	}

	.footerGrid {
	    -ms-grid-row: 5;
	    -ms-grid-column: 1;
	    -ms-grid-column-span: 5;
	    grid-column: 1 / span 5;
	    grid-row: 5;
	}
}

@media screen and (min-resolution: 1440dpi) {
	body {
		background-image: url(Bitmaps/Background-1280x720.gif);
	}
}
	
@media screen and	(min-width: 640px) and
					(orientation: landscape) {
	body {
		background-image: url(Bitmaps/Background-1280x720.gif);
	}	   
}

@media screen and	(min-width: 640px) and
					(orientation: portrait) {
	body {
		background-image: url(Bitmaps/Background-2560x1440.gif);
	}	   
}

@media screen and	(min-width: 640px) and
					(-webkit-min-device-pixel-ratio: 1.5) {
	body {
		background-image: url(Bitmaps/Background-2560x1440.gif);
	}	   
}

@media screen and	(min-width: 640px) and
					(min-resolution: 1440dpi) {
	body {
		background-image: url(Bitmaps/Background-2560x1440.gif);
	}	   
}

@media screen and	(min-width: 1280px) and
					(orientation: landscape) {
	body {
		background-image: url(Bitmaps/Background-2560x1440.gif);
	}	   
}

@media screen and	(min-width: 1280px) and
					(orientation: portrait) {
	body {
		background-image: url(Bitmaps/Background-5120x2880.gif);
	}	   
}

@media screen and	(min-width: 1280px) and
					(-webkit-min-device-pixel-ratio: 1.5) {
	body {
		background-image: url(Bitmaps/Background-5120x2880.gif);
	}	   
}

@media screen and	(min-width: 1280px) and
					(min-resolution: 1440dpi) {
	body {
		background-image: url(Bitmaps/Background-5120x2880.gif);
	}	   
}

@media screen and	(min-width: 2560px) and
					(orientation: landscape) {
	body {
		background-image: url(Bitmaps/Background-5120x2880.gif);
	}	   
}