@font-face { font-family: adagio; src: url("/font/adagio.ttf"); }
@font-face { font-family: adagio; src: url("/font/adagiob.ttf"); font-weight: bold; }
@font-face { font-family: adagio; src: url("/font/adagioi.ttf"); font-style: italic; }
@font-face { font-family: adagio; src: url("/font/adagiobi.ttf"); font-weight: bold; font-style: italic; }

@font-face { font-family: lucon; src: url("/font/lucon.ttf"); }

:root {
	--trans:				rgba(0,0,0,0);
	--black:				#333333;
	--white:				#FFFFFF;
	--red:					#FF0000;

	--bg_body:			#091F2E;
	--body_text:		#333333;

	--body_width:		1230px;
	--body_font:		14px;

	--adagio:				adagio, sans-serif;
	--fixed:				lucon, monospace;
}

/* Tags */
* { margin: 0; padding: 0; box-sizing: border-box; }
h1, h2 { margin: 0 0 0.5em 0; line-height: 1em; font-weight: normal; }
h1 { font-size: 30px; }
h2 { font-size: 26px; text-align: center; }
p { margin: 0 0 1em 0; line-height: 18px; text-align: justify; }

a { text-decoration: none; color: var(--red); }
a:hover { text-shadow: 0 0 5px var(--red); }

/* Classes */
.b { font-weight: bold; }
.center { text-align: center; }
.fixed { font-family: var(--fixed); }

/* Page layout */
body { color: var(--black); background: url("/img/nav_bg.png") 0 350px repeat-x var(--bg_body); transition: 0.25s all; }
body, td { font-family: var(--adagio); font-size: var(--body_font); }

div#head { height: 350px; background: url("/img/header.jpg") 0 0 no-repeat; transition: 0.25s all; }

body.small { background-position-y: 200px; }
body.small div#head { height: 200px; background-position-y: -20px; }

nav { display: block; text-align: center; }
nav > ul { list-style-type: none; display: inline-block; padding: 0 90px 38px 90px; font-size: 0; background: url("/img/nav_l.png") 0 0 no-repeat, url("/img/nav_r.png") 100% 0 no-repeat, url("/img/nav_m.png") 0 0 repeat-x; }
nav > ul > li { display: inline-block; padding-top: 7px; font-size: var(--body_font); }
nav > ul > li:not(:last-child) { background: url("/img/nav_div.png") calc(100% + 48px) 0 no-repeat; }
nav > ul > li > a { display: block; width: 12em; margin-top: 2px; padding: 15px 0 15px 0; line-height: 1em; font-family: var(--adagio); text-transform: uppercase; color: var(--white); }

nav > ul > li > a:hover { text-shadow: 1px 1px 0 var(--black), 0 0 5px var(--white); }

div.box {
	display: flex;
	flex-flow: column;
	position: relative;
	padding: 38px 35px 25px 35px;
	background:
		url("/img/box_tl.png") 0 0 no-repeat,
		url("/img/box_tr.png") 100% 0 no-repeat,
		url("/img/box_tm.png") 0 0 repeat-x,
		url("/img/box_bl.png") 0 100% no-repeat,
		url("/img/box_br.png") 100% 100% no-repeat,
		url("/img/box_bm.png") 0 100% repeat-x,
		url("/img/box_l.png") 0 70px repeat-y,
		url("/img/box_r.png") 100% 70px repeat-y,
		url("/img/box_m.png") 0 70px repeat
	;
}
div.box > div { flex: 0 0 20px; position: relative; }
div.box > div:nth-child(1) { font-weight: bold; text-transform: uppercase; color: var(--white); }
div.box > div:nth-child(2) { flex: 1 1 auto; margin: 20px 0; }
div.box > div:nth-child(3) { text-align: right; }
/*
div.box > div:nth-child(1) { position: absolute; top: 38px; left: 35px; }
div.box > div:nth-child(2) { }
div.box > div:nth-child(3) { position: absolute; bottom: 38px; left: 35px; text-align: right; }
*/

div#body { margin: 0 1em 1em 1em; min-height: 200px; }
div#body ul { margin: 1em; }

div#footer { margin-bottom: 1em; text-align: center; font-size: calc(var(--body_font) - 2px); color: var(--white); }

/* Per-page */
div.box.map > div:nth-child(2) { min-height: 80vh; }
iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; outline: 0; }