/* Author: Jonas Lindeberg, jonas.lindeberg@drivereklam.se */

html {
	margin: 		0;
	padding: 		0;
	width: 			100%;
	min-height: 	100%;
	}
	
	body {
		margin: 		0;
		padding: 		0;
		font-size: 		2vw;
		font-family: 	sans-serif;
		}
		
		img {
			max-width: 	100%;
			}
			
		form {
			margin: 	0;
			padding: 	0;
			width: 		100%;
			}
			
			label {
				float: 				left;
				padding-bottom: 	.5em;
				padding-left: 		.75em;
				width: 				100%;
				height: 			1em;
				text-transform: 	uppercase;
				font-size: 			.75em;
				}
				
			textarea, input, button, select { 
				font-family: 	inherit; 
				font-size: 		inherit; 
				line-height: 	.75em;
				}
				
			input {
				margin: 				0 0 1em 0;
				padding: 				0 .5em;
				width: 					100%;
				height: 				2em;
				font-size: 				1em;
				border: 				0;
				-webkit-appearance: 	none;
				box-shadow: 			inset 0 0 0 1px black;
				border-radius: 			.25em;
				}
				input[type="submit"] {
					padding: 			1.5em;
					height: 			4em;
					text-transform: 	uppercase;
					color: 				white;
					background: 		rgb(183,45,49);
					box-shadow: 		none;
					}
				input[type="file"] {
					padding: 	1em;
					height: 	3em;
					}
		
/*				 	--------------------------- */
/*	Header			--------------------------- */
/*					--------------------------- */

header {
	position: 		fixed;
	top: 			0;
	left: 			0;
	margin: 		0;
	padding: 		0 2%;
	width: 			96%;
	min-height: 	7em;
	background: 	rgb(183,45,49);
	font-size: 		.5em;
	z-index: 		100;
	}
	
	nav {
		position: absolute;
		width: 		96%;
		height: 	100%;
		z-index: 	110;
		}
		
		nav ul {
			margin: 			0;
			padding: 			0;
			min-height: 		3em;
			max-height: 		4em;
			height: 			100%;
			list-style: 		none;
			display: 			flex;
			align-items: 		center;
			justify-content: 	center;
			}
			
			nav li {
				display: 		block;
				margin: 		auto;
				padding: 		.5em 0;
				height: 		auto;
				max-height: 	1em;
				flex: 			1 0 0px;
				text-align: 	center;
				font-weight: 	bold;
				}
				nav li ul {
					display: 			block;
					position: 			relative;
					visibility: 		hidden;
					height: 			0;
					flex-grow: 			1;
					flex-direction: 	column;
					transition: 		.25s background ease;
					}
					nav li:hover ul {
						margin-top: 	-.5em;
						margin-left: 	-25%;
						padding: 		.25em 0 .25em 0;
						visibility: 	visible;
						width: 			150%;
						min-height: 	1em;
						height:			auto;
						background: 	rgb(183,45,49);
						border-radius: 	.85em;
						}
					nav li ul li {
						margin: 		-1em 0 3em 0;
						padding: 		0;
						width: 			100%;
						height: 		inherit;
						font-weight: 	normal;
						}
						nav li ul li a:link {
							margin-top: 	1.75em;
							margin-bottom: 	-1em;
							padding: 		.5em 0;
							height: 		inherit;
							}
						nav li ul:last-child::after {
							clear: both;
							}
							
				li a:link, li a:visited {
					display: 			block;
					padding: 			1em 0;
					margin: 			.5em 5%;
					width: 				90%;
					height: 			auto;
					color: 				white;
					text-decoration: 	none;
					border-radius: 		.25em;
					}
					li a:hover, li a:active {
						box-shadow: inset 0 0 0 1px rgb(255,255,255);
						}
				li.logo {
					padding: 		0;
					flex: 			1 0 0px;
					max-height: 	100%;
					}
					li.logo a:hover, li.logo a:active {
						box-shadow: none;
						}
					li.logo img {
						margin: 		1em 0;
						margin-right: 	18%;
						max-height: 	4em;
						max-width: 		80%;
						width: 			auto;
						}
						
	header > .background {
		position: 		fixed;
		top: 			0;
		left: 			0;
		width: 			100vw;
		max-height: 	9em;
		overflow: 		hidden;
		background: 	transparent;
		}
		header > .background img {
			width: 	100%;
			}

/*				 	--------------------------- */
/*	Content			--------------------------- */
/*					--------------------------- */

#container {
	padding-top: 		8em;
	padding-bottom: 	2em;
	width: 				100%;
	min-height: 		100vh;
	}
	#container article {
		margin: 	0 auto;
		max-width: 	60%;
		font-size: 	.75em;
		}
	img.banner {
		width: 			100%;
		max-width: 		100vw;
		position: 		relative;
		top: 			-5em;
		left: 			0;
		margin-bottom: 	-10em;
		z-index: 		-1;
		}
/*				 	--------------------------- */
/*	Columns			--------------------------- */
/*					--------------------------- */

.c_2 > * {
	float: 			left;
	width: 			48%;
	margin-right: 	2%;
	}
	.c_2 > *:nth-child(even) {
		margin-right: 	0;
		margin-left: 	2%;
		}
		.c_2 > *:nth-child(even):after {
			clear: both;
			}
			#page .c_2, #page .c_4, #page .c_5 {
				border: none;
			}
			
#page .c_4 div, #page .c_4 > *, #page .c_4 > *:nth-child(4n+1) {
	float: 			left;
	min-width: 		0;
	max-width: 		23%;
	width: 			23%;
	margin-right: 	2.666666%;
	border: 		none;
	margin-top: 	1em;
	margin-bottom: 	1em;
	}
	#page .c_4 > *:nth-child(4n) {
		margin-right: 	0;
		margin-left: 	0;
		margin-top: 	1em;
		margin-bottom: 	1em;
		}
		#page .c_4 > *:nth-child(4n+1) {
			clear: both;
			}
			
#page .c_5 div, #page .c_5 > *, #page .c_5 > *:nth-child(5n+1) {
	float: 			left;
	min-width: 		0;
	max-width: 		18%;
	width: 			18%;
	margin-right: 	2.5%;
	border: 		none;
	margin-top: 	1em;
	margin-bottom: 	1em;
	}
	#page .c_5 > *:nth-child(5n) {
		margin-right: 	0;
		margin-left: 	0;
		margin-top: 	1em;
		margin-bottom: 	1em;
		}
		#page .c_5 > *:nth-child(5n+1) {
			clear: both;
			}
	
/*				 	--------------------------- */
/*	Meta			--------------------------- */
/*					--------------------------- */

.notice {
	color: rgb(50,150,0);
	}

/*				 	--------------------------- */
/*	Footer			--------------------------- */
/*					--------------------------- */

footer {
//	position: 		fixed;
	bottom: 		0;
//	margin-top: 	2em;
	border-top: 	1em solid white;
	width: 			90%;
	padding: 		0 5%;
	font-size: 		.5em;
	background: 	rgb(183,45,49);
	text-align: 	center;
	color: 			white;
	
	opacity: 	1;
	height: 	auto;
	overflow: 	hidden;
	
	display: 			flex;
	align-items: 		center;
	justify-content: 	center;
	}
	
	footer p {
		width: 	20%;
		float: 	left;
		}
		
	footer ul {
		float: 				right;
		width: 				80%;
		display: 			flex;
		align-items: 		center;
		justify-content: 	center;
		list-style: 		none;
		padding: 			0;
		margin: 			0;
		}
		
		footer ul li {
				flex: 		1 0 0px;
				padding: 	0;
				margin: 	0;
				}
	
/*				 	--------------------------- */
/*	Document list	--------------------------- */
/*					--------------------------- */

.document_list {
	float: 			left;
	width: 			32%;
	margin-right: 	1%;
	margin-bottom: 	1em;
	}
	.document_list h2 {
		text-align: center;
		}
form.document {
	width: 	100%;
	float: 	left;
	}
	form.document input {
		margin: 	0 0 4% 0;
		width: 		98%;
		font-size: 	.75em;
		}
		form.document input:hover {
			color: 		rgb(50,50,50);
			background:	white;
			box-shadow: inset 0 0 0 1px rgb(50,50,50);
			}

/*				 	--------------------------- */
/*	Page			--------------------------- */
/*					--------------------------- */

#page {
	font-size: 8pt;
	}
	#page div {
		overflow: 		hidden;
		margin: 		1em 0;
		padding: 		0;
		width: 			100%;
		border: 		1px solid rgba(207,41,49,1);
		border-radius: 	.25em;
		}
		#page #page_header {
			margin: 	0 0 3em 0;
			border: 	none;
			}
	#page h1 {
		text-align: center;
		}
	#page h2 {
		display: 			block;
		margin: 			0 0 .25em 0;
		padding: 			.75em 1.5em;
		font-size: 			1em;
		background: 		rgba(214,90,72,1);
		text-transform: 	uppercase;
		font-family: 		sans-serif;
		color: 				white;
		}
	#page textarea {
		margin: 	0;
		padding: 	0;
		outline: 	0;
		border: 	0;
		resize: 	none;
		}
	#page p, #page textarea, #page input {
		margin: 			0;
		padding: 			.5em 1em;
		width: 				100%;
		min-height: 		1em;
		-webkit-appearance:	none;
		-webkit-box-sizing:	border-box;
		-moz-box-sizing:	border-box;
		box-sizing:			border-box;
		line-height: 		1.2em;
		font-size: 			1.5em;
		}
	
	#page_header {
		background: 	rgb(183,45,49);
		color: 			white;
		border-radius: 	1em;
		}
	#page, #page_header, #meta {
		margin: 	0;
		padding: 	0;
		border: 	none;
		}
	#page_header img {
		max-width: 	35%;
		max-height:	10vw;
		float: 		left;
		padding: 	2em;
		}
	#page_header p {
		padding: 	1em;
		max-width: 	40%;
		float: 		right;
		}
	#page_header hr, form hr {
		clear: 	both;
		height:	0;
		border:	none;
		}
		button.print {
			position: 				fixed;
			bottom: 				2.75em;
			right: 					5%;
			width: 					20%;
			margin-left: 			15%;
			height: 				4em;
			-webkit-appearance: 	none;
			border: 				none;
			background: 			rgba(0,0,0,.5);
			color: 					white;
			transition: 			.25s background ease;
			text-transform: 		uppercase;
			font-size: 				.75em;
			font-weight: 			bold;
			background: 			rgba(255,255,255,.9);
			color: 					black;
			border: 				1px solid black;
			}
			button.print:hover {
				background:	rgba(0,0,0,.75);
				color: 		white;
				}
#page_content {
	position: 	relative;
	min-height:	95em;
	overflow: 	hidden;
	}
.fixed {
	position: 	absolute;
	top: 		0;
	}
		#page > h1.title {
			float: 			left;
			max-width: 		70%;
			text-align: 	left;
			}
		#page > input.pet_name {
			float: 			left;
			margin-left: 	1em;
			margin-top: 	.5em;
			padding: 		.25em;
			max-width: 		25%;
			height: 		1.5em;
			box-shadow: 	inset 0 0 0 1px rgba(0,0,0,.25);
			font-size: 		2em;
			font-weight: 	bold;
			text-align: 	left;
			}
	
/*				 	--------------------------- */
/*	Page chart		--------------------------- */
/*					--------------------------- */
#page .chart {
	position: 	relative;
	min-height:	3.25em;
	overflow: 	visible;
	}
	.chart > textarea {
		background:	transparent;
		box-shadow:	inset 0 0 1em 1px rgba(0,0,0,.1);
		text-align:	center;
		}
	#page .chart .chart_connection {
		position: 		relative;
		margin: 		0;
		padding: 		0;
		width: 			inherit;
		height: 		inherit;
		margin-bottom: 	-100%;
		border-radius: 	100em;
		
		min-width: 		2.5em;
		min-height: 	2.5em;
		margin-top: 	-1.75%;
		margin-left: 	-15.75%;
		}
		#page .chart .chart_connection:hover {
			background: yellow;
			}
	.chart_connection > hr {
		position: 		absolute;
		margin: 		auto auto;
		padding: 		0;
		border: 		none;
		border-top: 	.25em solid red;
		display: 		block;
		bottom: 		0;
		height: 		0;
		top: 			50%;
		bottom: 		50%;
		width: 			100%;
		left: 			0;
		}
		#page .chart .l_1 {
			min-width: 3.75em;
			min-height: 3.75em;
			margin-top: -6%;
			margin-left: -20%;
			}
		#page .chart .l_2 {
			min-width: 7.5em;
			min-height: 7.5em;
			margin-top: -19%;
			margin-left: -33%;
			}
		#page .chart .l_3 {
			min-width: 11.25em;
			min-height: 11.25em;
			margin-top: -32%;
			margin-left: -46%;
			}
		#page .chart .l_4 {
			min-width: 15em;
			min-height: 15em;
			margin-top: -44.75%;
			margin-left: -59.25%;
			}
			
		.r_0 	{	transform: rotate(180deg); }
		.r_45 	{	transform: rotate(45deg); }
		.r_90 	{	transform: rotate(90deg); }
		.r_135 	{	transform: rotate(-45deg); }
		
@media screen {
/*
	#page {
		margin: 0 5% 5em 5%;
		height: 120.42vw;
		padding: 8vw;
		box-shadow: 0 0 2em rgba(0,0,0,.25), 
		0 5em 3em -2em rgba(0,0,0,.25), 
		0 10em 6em -10em rgba(0,0,0,.25);
		overflow: hidden;
		}
*/
	#page {
		margin: 0 auto 10em auto;
		width: 80em;
		height: 114em;
		padding: 5.5em;
		box-shadow: 0 0 2em rgba(0,0,0,.25), 
		0 5em 3em -2em rgba(0,0,0,.25), 
		0 10em 6em -10em rgba(0,0,0,.25);
		overflow: hidden;
		}
	#page:hover {
		box-shadow: 0 0 2em rgba(0,0,0,.25), 
		0 5em 3em -2em rgba(0,0,0,.25), 
		0 10em 6em -10em rgba(0,0,0,.25),
		inset 0 0 2em 5.4em rgb(255,255,255),
		inset 0 0 0 5.5em rgba(255,0,0,.25);
		}
	}


@media print {
	@page {
		margin: 0;	
		}
	#container {
		padding: 0;
		width: 100%;
		height: auto;
		}
	#page, article {
		width: auto;
		height: auto;
		margin: 1.2cm;
		font-size: 8pt;
		-webkit-print-color-adjust: exact;
		color-adjust: exact;
		}
		#page #page_header {
			margin: -3em 0 3em 0;
			border: none;
			}
		#page p, #page textarea, #page input {
			font-size: 8pt;
			}
			#page h1.title {
				max-width: 70%;
				font-size: 12pt;
			}
			#page input.pet_name {
				max-width: 20%;
				margin-top: .5em;
				margin-left: .5em;
				box-shadow: none;
				font-size: 12pt;
				font-weight: bold;
				background: transparent;
				}
		input {
			background: white;
			}
		#page_header img {
			max-height: 100px;
			}
	header, footer, button.print {
		visibility: hidden;
		overflow: hidden;
		height: 0;
		margin: 0;
		padding: 0;
		}
		.chart {
			box-shadow: none;
			}
			.chart.active textarea {
				box-shadow: inset 0 0 0 1px black;
				}
	}