:root
{
	--accent-h: 349deg;
	--accent-s: 80%;
	--accent-l: 50%;
	
	--navbar-height: 42px;
	--subnav-height: 30px;
}

* {	font-family: 'Inter', sans-serif; font-size: 13px; }
body { text-align: center; }
pre { margin: 0; font-family: monospace; white-space: pre-wrap; width: 100%; padding: 5px; border: var(--thin-line); overflow: auto; background: black; color: #ddd; }

/*@font-face { font-family: 'gsmtr'; src: url('gill-sans-mt-reg.ttf'); }*/

.navbar,
	.subnav { border-bottom: 1px solid var(--accent-trans-plus1); background: var(--bg-lighten-plus2); position: fixed; width: 100%; z-index: 9; white-space: nowrap; text-align: center; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); overflow-x: auto; }
.navbar i,
	.subnav i { margin-right: 4px; }
.navbar ul { padding: 0; margin: 0; display: inline-block; }
.navbar li { display: inline-block; margin: 0; padding: 0; }
.navbar a, .navbar form,
	.subnav a, .subnav a { padding: 0 16px; }
.navbar a,
	.subnav a { display: inline-block; font-weight: bold; }
	
.navbar a { line-height: var(--navbar-height); }
.subnav a { line-height: var(--subnav-height); }
.navbar a:hover,
	.subnav a:hover,
	.navbar .selected,
	.subnav .selected { background: var(--accent-trans-plus1); }

.subnav { margin-top: calc(var(--navbar-height) + 1px); }
.subnav ul { padding: 0; margin: 0; display: inline-block; }
.subnav li { display: inline-block; margin: 0; padding: 0; }

.navbar + .main-container { padding-top: calc(var(--navbar-height) + var(--margin)); }
.subnav + .main-container { padding-top: calc(var(--navbar-height) + var(--subnav-height) + var(--margin)); }

.main-container { padding: var(--margin); display: inline-block; text-align: left; position: relative; min-width: 800px; }




i { margin-right: var(--icon-margin); }



.striped { background: #efefef; }
.striped thead { text-align: left; }

/*input[type="submit"], .button { color: white; background: linear-gradient( to bottom, #7CA4D9 0%, #446B9E 100% ); border-radius: 16px; padding: 4px 12px; text-shadow: 0 1px 0px black; border: none; }
input[type="submit"]:hover, .button:hover { background: linear-gradient( to bottom, #88AFE3 0%, #4C74A8 100% ); color: white; }
.button.danger { color: white; background: linear-gradient(#dc5f59, #b33630); box-shadow: 0 1px 1px #661a16; }
.button.danger:hover { background: linear-gradient(#EA716B, #C8463F); }
.button.danger:active { background: linear-gradient(#bf524d, #9c2e28); box-shadow: inset 0 0 3px #541411, 0 1px 1px #661a16; }
*/

.label { color: white; border-radius: 5px; padding: 0 4px; white-space: nowrap; margin-left: 5px; }
.label.sold { background: red; }

.minibox_blue
{
	border-top: 1px solid #ccc;
	padding-top: var(--margin-s);
	margin-top: var(--margin);
}

.minibox_grey
{
	background: linear-gradient(to bottom, rgb(252, 252, 252), rgb(236, 236, 236));
	padding: 3px 6px 3px 6px;
	
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.box_grey
{
	background: linear-gradient(to bottom, rgb(252, 252, 252), rgb(236, 236, 236));
	padding: 10px;
	
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.box_grey-noborder
{
	background: linear-gradient(to bottom, rgb(252, 252, 252), rgb(236, 236, 236));
}

.box_error
{
	background: #F4D0D0;
	border: 1px solid #BC4343;
	padding: 5px;
	margin-bottom: 20px;
}

.box_success
{
	border: 1px solid #ACD7AF;
	background: #D2F3D4;
	padding: 5px;
	margin-bottom: 20px;
}

.box_neutral
{
	border: 1px solid #ddd;
	background: #f6f6f6;
	padding: 5px;
	margin-bottom: 20px;
}

/* listings-edit.php */

.panel_switcher * { font-size: 18px; }

.panel_switcher
{
	
	list-style: none;
	padding: 0;
	margin: 0;
	color: #ccc;
	
}

.panel_switcher li
{
	display: inline-block;
	margin: 0 10px 10px 0;
}

.panel_switcher_on
{
	color: #7095C0;
}

/* webpages - front page */

.photopicker
{
	margin: 2px;
}

.photopicker:hover, .photopicker_selected
{
	border: 2px solid darkorange;
	margin: 0;
}
