/* ukolegija - default.css */

/* 2017-11-24 grawity: note that this causes Android to complain about SSL failures */
/*
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&subset=latin,latin-ext) all;
*/
@import url(/etc/fonts.css) all;

/* primary logo colors:
 *
 * blue:
 * 	rgb(21, 44, 112);	hsl(225, 68%, 26%);	(from .cdr logo)
 *
 * orange:
 * 	rgb(255, 203, 0);	hsl(48, 100%, 50%);	(Pantone Uncoated 109 U)
 * 	rgb(255, 199, 0);	hsl(47, 100%, 50%);	(from .cdr logo)
 */

html {
	overflow-y: scroll;
}

body, html {
	background: #eeeeea;
	color: black;
	font: 12pt "Source Sans Pro", "Calibri", sans-serif;
}

body, div#ie-content {
	background: white;
	max-width: 700px;
	margin: 1.5em auto;
	padding: 1em;
	border-radius: 2px;
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),
	            0 1px 10px 0 rgba(0,0,0,.12),
	            0 2px 4px -1px rgba(0,0,0,.2);
}

body.fullsize {
	/* Used by cacti summary pages, captive admin page */
	max-width: none;
	margin: 0;
	padding: 1.5em;
}

body.narrow {
	/* Used by SSO login form, captive login form */
	max-width: 25em;
}

/* content: common block elements */

h1, h2, h3 {
	font-family: "Linux Libertine", "Georgia", "Constantia", serif;
	font-weight: normal;
}

h2 {
	font-size: 1.6em;
	/*
	border-bottom: 1px solid #ccc;
	*/
	/*background: white;*/
}

h3 {
	font-size: 1.3em;
	font-style: italic;
	margin-bottom: 0;
}

body, p, dl {
	line-height: 1.5em;
}

hr {
	border: none;
	border-bottom: 1px dashed #ccc;
}

hr.light {
	border-bottom-color: #ddd;
}

pre {
	line-height: 1.4;
}

pre.border {
	margin-left: 0.3em;
	border-left: 1px dashed #ccc;
	padding-left: 1em;
	overflow: auto;
}

ul {
	line-height: 1.5em;
}

ul.spaced li {
	margin: 0.75em 0;
}

/* content: common inline elements */

a:link, a:visited {
	color: hsl(36.4, 100%, 40%);
}

u {
	font-weight: bold;
	text-decoration: none;
}

code, kbd, samp, tt {
	font-family: "Cousine", "Source Code Pro", "Consolas", monospace;
	font-size: 0.9em;
}

/* assorted classes */

.left { float: left; }

.right { float: right; }

.note, p.expand { font-size: smaller; }

.note2 { font-style: italic; }

/* inline: missing-translation chips */

.tr {
	font: smaller sans-serif;
	color: white !important;
	background: #0969a2 !important;
	padding: 0 0.2em;
	border-radius: 3px;
}

.tr.missing {
	background: #f00026 !important;
}

/* shared header for all pages */

#header {
	display: table;
	width: 100%;
	padding-bottom: 0.4cm;
	border-bottom: 1px dashed #bbb;
	margin-bottom: 0.4cm;
	/* dark: */
	/*
	color: white;
	background: #0e3881;
	border-bottom: 3px solid #d4b124;
	padding: 1em;
	box-sizing: border-box;
	*/
}

#header div {
	display: table-cell;
	vertical-align: middle;
}

#header div#h-logo {
	padding-right: 0.3cm;
}

#header div#h-logo img {
	width: 2.7cm;
	border: none;
	/* dark: */
	/*
	padding: 0.3em;
	background: white;
	border-radius: 999999px;
	*/
}

#header div#h-text {
	color: rgb(21, 44, 112);
	width: 100%;
	font-size: 90%;
	/* dark: */
	/*
	color: white;
	*/
}

#header h1 {
	margin: 0.12em 0;
	line-height: 1.3em;
	font-size: 17pt;
}

#header h1 .bottom {
	/* bottom half (actual page title) */
	font-weight: bold;
	font-size: 20pt;
}

#languagebar {
	font-size: 10.5pt;
	color: #aaa;
}

#languagebar * { color: inherit; }

/* shared footer for all pages */

#footer {
	width: 100%;
	padding-top: 0.3cm;
	border-top: 1px dashed #bbb;
	margin-top: 0.3cm;
	color: gray;
	font-size: 10.5pt;
}

#footer * { color: inherit; }

/* block: errors and other highlights */

.infobar {
	/* default gray blocks */
	margin: 0.2cm 0;
	padding: 0.2cm 0.2cm;
	border: 0px solid #bbb;
	border-left-width: 3px;
	background: #eee;
	/*
	box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.1);
	*/
}

.infobar h2, .infobar p {
	margin: 0;
}

.infobar p + p {
	margin-top: 0.4em;
}

.message,
.infobar.success {
	/* mixin: blue 'success' notices */
	border-color: #80b780;
	background: #b8e2b8;
}
.infobar.notice {
	border-color: #80b7ff;
	background: #b8e2ff;
}
.warning {
	border-color: #ffb700;
	background: #ffe298;
}
.error {
	border-color: #ffb700;
	background: #ffe298;
}
.critical {
	border-color: #ff0000;
	background: #ffa8a8;
}
.critical a {
	color: #580000;
}

/* generic forms */

input, button, textarea {
	/* unify input & textarea dimensions */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
}

input[type=text],
textarea {
	font: 13pt "Linux Libertine", "Georgia", "Constantia", serif;
}

input::placeholder {
	color: #aaaaaa;
	font: 13pt "Linux Libertine", "Georgia", "Constantia", serif;
}

/* 2021-03-19 grawity: webkit-autofill is a hack for Chrome, which otherwise enforces
 *                     a different style for autofill suggestions. ~security~
 *                     https://stackoverflow.com/q/56026043 */
:-webkit-autofill::first-line,
input#username,
input#portal_username,
input.mono,
input[type=email],
input[type=password],
input[type=tel],
textarea.mono {
	font: 12pt monospace;
}

input[type=email],
input[type=password],
input[type=tel],
input[type=text],
textarea {
	padding: 2px 4px;
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.07) inset;
	outline: none;
	border: 1px solid rgba(134, 145, 144, 0.50);
	margin-bottom: 1px;
	border-radius: 2px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:focus,
textarea:focus {
	border-color: hsla(225, 70%, 26%, 0.7);
}

/*.infobar.error + form input:invalid {*/
input.invalid,
.validate input:invalid,
input.validate:invalid {
	border-color: rgba(200, 21, 44, 0.7);
	background-color: rgba(200, 21, 44, 0.07);
}

form .field {
	margin: 0.6em 0;
}

form h2,
form .field p {
	margin: 0.3em 0;
}

form .field input[type=email],
form .field input[type=password],
form .field input[type=tel],
form .field input[type=text],
form .field textarea {
	width: 100%;
}

input[type=submit],
button,
.button {
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	min-width: 5em;
	padding: 4px 10px;
	border-radius: 3px;

	color: black;
	background: hsl(0, 0%, 92%);
	border: 1px solid hsl(0, 0%, 72%);

	/*
	border: none;
	box-shadow:
		0 2px 2px 0 rgba(0,0,0,0.14),
		0 1px 5px 0 rgba(0,0,0,0.12),
		0 3px 1px -2px rgba(0,0,0,0.2);
	*/

	/* Disable the iOS Safari widget styling that makes the buttons rounded
	 * and with an ugly gradient. */
	-webkit-appearance: none;
}

.button.small,
button.small,
input[type=submit].small {
	font-size: smaller;
	padding: 2px 5px;
	min-width: 3.5em;
}

input[type=submit]:active,
button:active,
.button:active {
	outline: none;
	background: hsl(0, 0%, 85%);
	/*
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.26);
	*/
}

input[type=submit]:disabled,
button:disabled,
.button:disabled {
	opacity: 0.6;
}

#login-form input[type=submit],
.login-form input[type=submit],
.button.orange,
button.orange,
input[type=submit].orange {
	background: hsl(47, 100%, 61%); /* UK orange */
	border-color: hsl(47, 100%, 43%);
}

#login-form input[type=submit]:active,
.login-form input[type=submit]:active,
.button.orange:active,
button.orange:active,
input[type=submit].orange:active {
	background: hsl(47, 100%, 48%);
}

.button.blue,
button.blue,
input[type=submit].blue {
	color: white;
	background: hsl(225, 68%, 56%); /* UK blue + */
	border-color: hsl(225, 68%, 43%);
}

.button.blue:active,
button.blue:active,
input[type=submit].blue:active {
	background: hsl(225, 68%, 47%); /* UK blue ++ */
}

input#yesbutton,
.button.green,
button.green,
input[type=submit].green {
	background: hsl(120, 68%, 70%);
	border-color: hsl(120, 68%, 45%);
}

input#yesbutton:active,
.button.green:active,
button.green:active,
input[type=submit].green:active {
	background: hsl(120, 68%, 55%);
}

.button.red,
button.red,
input[type=submit].red {
	background: hsl(4, 90%, 75%);
	border-color: hsl(4, 90%, 60%);
}

.button.red:active,
button.red:active,
input[type=submit].red:active {
	background: hsl(4, 90%, 67%);
}

/* login form */

#login-form, .login-form {
	/* the class is used by pages/captive */
	margin: 1em 0;
}

form .login-button-container {
	font-style: italic;
	text-align: right;
	margin: 1em 0;
}

/* form layouts (single and two column) */

@media (max-width: 650px) {
	h1 {
		font-size: 18pt;
	}

	#header div#h-logo img {
		width: 2.2cm;
	}
}

h2.acid code {
	text-shadow: 0 0 2px rgb(0, 255, 0);
}

h2.acid a {
	color: inherit;
}

ul.acid a {
	color: rgb(0, 30, 0);
	text-shadow: 0 0 2px rgba(0, 255, 0, 0.4);
}

/* guardian sleeps */

#pi {
	position: fixed;
	bottom: 10px;
	right: 10px;
}
#pi a {
	text-decoration: none;
	font: "Consolas", monospace;
	font-size: 13pt;
	user-select: none;
}
#pi a.sleeps {
	color: gray;
	opacity: 0.2;
}