:root {
	--headerBlue: #6e99c9;
	
	--headerBlueDark: #4D7FA1;
	--headerBlueDarkBorder: #477594;
}
a {
	color: #00F;
	text-decoration: none;
}
html.dark a {
	color: #AFCDE0;
}
a:hover, nav>ul>li>button:hover {
	text-decoration: underline;
}
html, body {
	font-family: Verdana, sans-serif;
	font-size: 8pt; /* 11px */
	color: black;
}
html {
	/*background: linear-gradient(180deg, rgba(72,130,203,1) 0%, rgba(248,252,255,1) 100%) repeat-x;*/
	background: #F8FCFF url(img/bg_gradient.jpg) repeat-x;
}
html.dark {
	background-color: #333;
	background-image: url(img/dark/carbon6.png);
	background-repeat: repeat;
	background-position: center;
}
html.dark, html.dark body {
	color: white;
}
body {
	background-image: url(img/bg_clouds.jpg);
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: top;
	margin-top: 0;
}
html.dark body {
	background: transparent;
}
#banner {
	content: url(img/WoodBanner.png);
}
html.dark #banner {
	content: url(img/dark/robloxmidnight.png);
}
nav {
	background-color: inherit;
	border-bottom: 2px solid var(--headerBlue);
	text-align: center;
	padding: 15px 0 0;
	margin: -15px 0 10px;
	position: sticky;
	top: 0;
}
html.dark nav {
	border-color: var(--headerBlueDarkBorder);
}
nav>h1, nav>ul {
	background-color: var(--headerBlue);
}
html.dark nav>h1, html.dark nav>ul {
	background-color: var(--headerBlueDarkBorder);
}
nav img {
	width: 100%;
}
nav, nav a {
	color: white !important;
}
nav>ul {
	padding: 0;
	list-style: none;
}
nav>ul, nav>h1 {
	margin: 0;
}
nav>ul>li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 2em;
	padding: 0 9px;
	display: inline-block;
}
nav>ul>li>button, nav>ul>li>button:hover {
	background-color: transparent;
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	padding: 0;
}
nav>ul>li:not(:last-of-type) {
	border-right: 1px solid white;
}
button {
	background-color: #B6CCE4;
	border: 1px solid #ccc;
	color: #435D77;
	padding: 3px 10px;
	font-size: inherit;
	font-weight: bold;
	cursor: pointer;
}
button:hover {
	background-color: #5F84A8;
	color: white;
}
li>button {
	padding: 3px 8px;
}
details>summary {
	background-color: #ccc;
	border: 1px solid black;
	letter-spacing: 0.1em;
	margin: 1px 0;
	font-weight: bold;
	cursor: pointer;
	padding: 1px 1em;
	list-style: none;
}
details>summary:hover {
	background-color: var(--headerBlue) !important;
	color: white;
}
details>div {
	color: #555;
}
details>div>.visitLabel, details>div>div {
	border: 1px dashed #555;
	line-height: 1.7em;
}
details>div>.visitLabel {
	border-bottom: 0;
	display: block;
	letter-spacing: 0.1em;
	margin-top: 10px;
	width: -moz-available;
	width: -webkit-fill-available;
}
html.dark details>div>.visitLabel, html.dark details>div>div {
	border: 1px solid #777;
	background-color: #222;
	color: white;
	padding: 5px 10px;
}
details>div>div {
	max-height: 75px;
	overflow: auto;
	padding: 5px 10px;
}
details>div>div>p {
	margin: 0;
}
html.dark details>summary {
	background-color: #444;
}

.container {
	background-color: #e5f1fd;
	border: 5px solid #DDD;
	border-top: 0;
	border-bottom: 0;
	margin: 0 auto;
	padding: 15px 10px 0;
	max-width: 900px;
}
html.dark .container {
	background-color: #424A4F;
	border-color: black;
}
.flex {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 0.8rem;
}
.flex>div, .flex>section {
	flex-grow: 1;
	flex-shrink: 1;
	margin: 0;
}
.flex.column {
	flex-flow: column;
	align-items: stretch;
	justify-content: start;
}
.flex.column>div, .flex.column>section {
	flex-grow: 0;
}
.infoBox.badges>div {
	gap: 20px 11px;
}
.infoBox.badges>div>ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.infoBox.badges>div>figure {
	flex-basis: 75px;
}
.infoBox.badges>div>ul>li {
	flex-basis: 94px;
	margin: 20px 0 !important;
}
.infoBox.badges>div>figure, .infoBox.badges>div>ul>li {
	margin: 0;
	flex-grow: 0;
	flex-shrink: 1;
	text-align: center;
}
.infoBox.badges img {
	width: 100%;
	max-width: 75px;
	margin: 0 auto;
}
.info.flex {
	gap: 0 20px;
}
.info.flex>div { /* left and right column */
	flex-basis: 360px;
	gap: 10px;
}
.info.flex>div>div {
	margin: 0;
}
.infoBox {
	background-color: white;
	/*box-shadow: 3px 3px 3px #00000035;*/
	margin: 10px 0;
}
html.dark .infoBox {
	background-color: transparent;
}
.infoBox>h1, .infoBox>h2, .infoBox>h3, .infoBox>h4, .infoBox>h5, .infoBox>h6 {
	/*background: linear-gradient(90deg, rgba(110,153,201,1) 0.875%, rgba(91,128,165,1) 98.25%);*/
	background-color: var(--headerBlue);
	border: 2px solid var(--headerBlue);
	color: white;
	text-align: center;
	margin: 0;
	width: -moz-available;
	width: -webkit-fill-available;
	font-size: 1.4rem;
	line-height: 1.9rem;
	height: 1.9rem;
}
.infoBox>h1>a, .infoBox>h2>a, .infoBox>h3>a, .infoBox>h4>a, .infoBox>h5>a, .infoBox>h6>a {
	color: yellow;
}
html.dark .infoBox>h1, html.dark .infoBox>h2, html.dark .infoBox>h3, html.dark .infoBox>h4, html.dark .infoBox>h5, html.dark .infoBox>h6 {
	background-color: var(--headerBlueDark);
	border-color: var(--headerBlueDarkBorder)
}
.infoBox>h1, .infoBox>h2, .infoBox>h3 {
	padding: 5px 12px;
	font-size: 16px;
}
.infoBox>div {
	border: 2px solid var(--headerBlue);
	padding: 10px;
}
html.dark .infoBox>div {
	background: url(img/dark/standardboxback.png);
	background-size: contain;
	border-color: var(--headerBlueDarkBorder);
}
.infoBox>div>p:only-of-type, .infoBox>div>p:last-of-type {
	margin: 2px 0;
}
.infoBox>div>p {
	margin: 0 0 10px;
}

ul.placeButtons {
	list-style: none;
	margin: 10px 0;
	padding: 0;
	justify-content: left;
}
ul.placeButtons>li {
	display: inline-block;
}
ul.placeButtons>li.edit {
	flex-basis: 143px;
}
ul.placeButtons>li.play {
	flex-basis: 250px;
}
a.play {
	max-width: 250px;
}
a.edit {
	max-width: 143px;
}
.edit, .edit a, .edit a:hover, .edit button, .edit button:hover, .play, .play a, .play a:hover, .play button, .play button:hover {
	color: transparent;
	text-decoration: none !important;
}
a.play, a.edit, .play button, .edit button  {
	display: block;
	width: 100%;
}
.play button, .edit button {
	background-color: transparent;
	border: 0;
	width: 100%;
}
.play button {
	aspect-ratio: 125/24;
	background-image: url(img/btn/Play.png);
}
.edit button {
	aspect-ratio: 143/48;
	background-image: url(img/btn/EditMode2.png);
}

.profile {
	text-align: center;
}
.profile>div>ul:first-of-type {
	list-style: none;
	padding: 0;
	margin: 0 auto;
}
.profile>div #status:before {
	content: "[ ";
}
.profile>div #status:after {
	content: " ]";
}
.profile>div #status.offline {
	color: gray;
}
.profile>div #status.online {
	
}
.profile>div #link {
	font-size: 1.25rem;
}
.profile .bioBox {
	margin: 0 auto;
	max-height: 450px;
	overflow-y: auto;
	border: 1px solid black;
	line-height: 20px;
	padding: 5px;
	max-width: 348px;
}
html.dark .profile .bioBox {
	border-color: white;
	background-color: #497696;
}
html.dark .profile .bioBox a {
	color: yellow;
}
.profile .bioBox>p {
	margin: 0;
}
.profile img {
	max-width: 150px;
	width: 100%;
}

.placeThumb { /* place link */
	margin-bottom: 4px;
}
.placeThumb>img {
	max-width: 414px;
	width: 100%;
	border: 1px solid black;
	box-sizing: border-box;
}
.accessLabel {
	color: black;
}
html.dark .accessLabel {
	color: white;
}
.accessLabel:before {
	display: inline-block;
	content: '';
	width: 16px;
	height: 16px;
	margin-right: 3px;
}
.accessLabel.lock:before {
	background-image: url(img/games/access/locked.png);
}
.accessLabel.open:before {
	background-image: url(img/games/access/public.png);
}
#fav .flex, #games .flex {
	padding-right: 0;
	gap: 10px;
}
#fav .flex>figure, #games .flex>figure {
	flex-basis: 118px;
	flex-shrink: 1;
	max-width: 118px;
	margin: 0;
}
#fav .flex>figure img, #games .flex>figure img {
	width: 100%;
	max-width: 110px;
	object-fit: cover;
	aspect-ratio: 1;
}
html.dark #fav .flex>figure img, html.dark #games .flex>figure img {
	border: 4px double black;
	background-color: white;
}
#fav .flex>figure h, #games .flex>figure h{
	display: block;
	text-overflow: ellipsis;
}
#fav .flex>figure p, #games .flex>figure p {
	margin: 0;
}
#fav .flex>figure span, #games .flex>figure span {
	font-weight: bold;
}
html.dark #fav .flex>figure figcaption, html.dark #games .flex>figure figcaption {
	background-color: black;
	border-bottom: 4px double white;
	padding: 5px;
}
html.dark #fav .flex>figure figcaption h, html.dark #games .flex>figure figcaption h {
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.5em;
}
#friends {
	text-align: center;
}
#friends .flex {
	gap: 20px 2px;
}
#friends figure {
	margin: 0;
	flex-basis: 120px;
}
#friends figure figcaption>span:before {
	content: url(img/offline.png);
	width: 16px;
	height: 16px;
	margin-right: 2px;
}
#friends img {
	width: 100%;
	max-width: 120px;
	box-sizing: border-box;
}
html.dark #friends img {
	border: 3px double white;
	background-color: #497696;
}
html.dark #friends figure figcaption {
	border: 1px solid white;
	background: black;
	padding: 2px;
	margin-top: -2px;
}