/*
********** Global **********
*/

/* Allows specifying everything using REM instead of PX or EM etc */
body { font-size: 1rem; }
.hide-if-tiny {}
.show-if-tiny { display: none; }
@media screen and (min-resolution: 150dpi) {
	html {
		/* Allows specifying everything else using REM instead of PX or EM
		or other such absolutes (or even EM which gets finicky when nested
		multiple times)
		Note that "vw" is 1% of the viewport width, "vh" is the same for
		height, and "vmax"/"vmin" selects the greater/lesser of those two
		respectively
		Empirically, this will be somewhere in the 15-20px range for the
		laptop browser, and more like 20-25px for a phone browser */
		font-size: 1vmax;
	}
	body {
		font-size: 2rem;
	}
	.hide-if-tiny { display: none  !important; }
	.show-if-tiny { display: unset !important; }
}

/* For some reason inputs don't always follow that? Force it */
input[type="text"] {
	font-size: inherit;
}
input[type="checkbox"] {
	font-size: inherit;
}
input[type="password"] {
	font-size: inherit;
}
button {
	font-size: inherit;
}

/* Prevent text from being selected when clicked */
.no-select {
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

/*
********** Top Nav **********
*/

/* Background of the entire bar */
#topnav {
	background-color: lightgreen;
	overflow:         hidden;
}

/* Left and right floats */
#topnav-left a {
	float: left;
}
#topnav-single a {
	float: left;
}
#topnav-right a {
	float: right;
}

/* Individual links */
#topnav a {
	color:           black;
	text-align:      center;
	padding:         16px 16px;
	text-decoration: none;
}
#topnav a:hover {
	color:            white;
	background-color: darkgreen;
}

/*
********** Flash Status **********
*/

#top-flash {
	background-color: whitesmoke;
	margin:           4px 4px;
	overflow:         hidden;
}

#top-flash span {
	float:     left;
	margin:    4px 4px;
	padding:   2px 6px;
	font-size: 0.80rem;
}

.top-flash-info {
	color:            mediumblue;
	background-color: powderblue;
}

.top-flash-warning {
	color:            saddlebrown;
	background-color: moccasin;
}

.top-flash-error {
	color:            darkred;
	background-color: pink;
}

/*
********** Misc **********
*/

/* Prevent text from being selected when clicked */
.no-select {
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

/* Hide stuff */
.autohide {
	display: none !important;
}

/* Simple floating */
.autofloat-parent {
	display: float;
}
.autofloat-left {
	float: left;
}
.autofloat-right {
	float: right;
}
.autofloat-clear {
	clear: both;
}