:root {

	--taille-sprite: 32px;
}

body {

	margin:  0;
	padding:  0;
}


#aside {
	width:  33vw;
}

#mapview {

	width:  66vw;
}


#go-back-home {

	position: fixed;
	top: 0;
	left: 0;
	padding: 0.5rem;
	margin: 0.5rem;
	z-index: 200;
}

#mapview #geoPoint {

	padding: 1rem;
	position: absolute;
	bottom: 0;
	left: 0;
	display: inline-block;
}



main {

	overflow: auto;
}


#map {

	margin:  auto;

	margin-top: 2vh;
	height: 94vh;
	width: 94vh;

	border-width: 0.125rem;
	border-radius:  33vw;

	position:  relative;

	overflow: hidden;
}

#map-deco {

	position:  absolute;
	left:  0%;
	top: 0%;
	width: 100%;
	height: 100%;
	border-radius:  33vw;
}


#mapview {

	position: relative;
}

#mapview #zoom {

	position: absolute;
	bottom: 0;
	right: 0;

	padding:  0.5rem 1rem;
}

#map .place, 
#map .player {

	position:  absolute;
}



#map .place header {

	z-index: 50;
}


#map .place a:active + article,
#map .place a:focus + article {

	z-index: 100;

	display:  block;
	
	position:  fixed;
	top:  0;
	right:  0;

	width:  33vw;
	overflow: hidden;
	/*box-shadow:  0.125rem 0.125rem 1em black;*/
}






#place-details {

	position:  fixed;
	top:  0;
	right: 0;
	width:  33vw;
	height:  100vh;
	overflow-y: auto;
	
	padding:  0rem;
	
}

#place-details > * {

	margin-left: 1rem;
	margin-right: 1rem;
}

#place-details > .place-name {

	margin:  0;
	padding:  1rem;

	text-align:  center;
}

#place-details > address {

	text-align: center;

	margin-top: 0.5rem;
}

#place-details > h4 {

	margin-left: 0;
	margin-right: 0;
	padding: 0.5rem 1rem;
	background: var(--panel-place-name-bg-color);
}



#place-details ul.visitors {

	margin: 0;
	padding: 0;
	list-style: none;
}

#place-details ul.visitors li {

	margin: 0;
	padding: 0;
}

#place-details .visitors {

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#place-details .visitors .visitor {

	margin-right: 1rem;
	flex-basis: 64px;
	text-align: center;
}

#place-details .visitors .visitor img {

	display: block;
} 


























#messenger-page > footer {
	display: none;
}

#messenger-page main {

  display: flex;
  height: 100vh;
}

#messenger-page #conversations-list {

  width: 33.333vw;
  height:  100%;
  overflow-y: auto;
}

#messenger-page ul#conversations-list {

	list-style: none;
	margin: 0;
	padding: 0;
}

#messenger-page ul#conversations-list li {

	margin: 0;
	padding: 0.5rem 1rem;
	overflow: hidden;
}

#messenger-page #conversations-list .conversation {

	position: relative;
}

#messenger-page #conversations-list .conversation .conv-link, 
#messenger-page #conversations-list .conversation .conv-link a {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#messenger-page #conversations-list .conversation .avatar {

	float:  left;
}

#messenger-page #conversations-list .conversation .conv-link a span {

	display: none;
}


#messenger-page #conversations-list .conversation blockquote {

	margin:  0;
}


#messenger-page #conversations-list .conversation blockquote time {

	position:  absolute;
	top: 0;
	right: 0;
	padding-right: 0.5rem;
	padding-top: 0.5rem;
}




#messenger-page #conversation {

	height: 100vh;
	overflow-y: auto;
  width: 66.666vw;
}

#messenger-page #msgList {

	overflow: hidden;
}

#messenger-page ul#msgList {

	list-style: none;
	margin: 0;
	padding: 0;
}

#messenger-page ul#msgList li {

	margin: 0;
	padding: 0;
	margin-bottom: 2rem;
	width:  50%;
}

#messenger-page .penpal {

	padding: 1rem 1rem;
	margin-top: 0;
}

#messenger-page #msgList .message.in {

	float: left;
	margin-left: 2%;
}

#messenger-page #msgList .message.out {

	float: right;
	margin-right: 2%;
}

#messenger-page #msgList .message > * {

	margin-left: 1rem;
	margin-right: 1rem;
}

#messenger-page #msgList .message .date {

	text-align: right;
}

#messenger-page #conversation {

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#messenger-page #conversation #msgList {

	overflow-y: auto;
	flex-grow: 1;
}

#messenger-page #conversation form {

	align-self: flex-end;

	display: flex;
	width: 100%;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#messenger-page #conversation label {

	display: none;
}

#messenger-page #conversation textarea {

	flex-basis: 100%;
	flex-grow: 1;
	margin-left: 1rem;
	margin-right: 1rem;
	border: 0;
}

#messenger-page #conversation textarea:focus {

	outline: 0;
}

#messenger-page #conversation .submit-button-wrapper {

	margin-left: 1rem;
	margin-right: 1rem;
	display: flex;
	align-items: center;
}

#messenger-page #conversation .submit-button-wrapper input {

	border: 0;
}






















#login-page input {

	border-radius: 0;
}

#login-page {

	height: 100vh;

	display: flex;
	flex-direction: column;

	align-items: center;
	flex-shrink: 1;
	flex-basis: 100%;
}

#login-page footer {

	justify-self: flex-end;
}

#login-page main {

	flex-basis: 100vh;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

#login-page fieldset {

	border-width: 0;
}