/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* now our own styles */

html,body { height: 100%; } 

body{ background: #c7edfd; font-family: 'Rubik', sans-serif; display: flex; flex-direction: column; }

#main { margin: 0 auto; /*background: #cdf0f9;  url(../img/pattern_b.png); background-size: 32px 32px; */
	display: grid;
	grid-template-columns: [first] 30% [mid] 70% [last];
	grid-template-rows: [hi] auto [low];
	height: 100vh;
	position: relative;
	flex: 1 0 auto;
}

#sidebar { 
	grid-column-start: first;
	grid-column-end: mid;
	grid-row-start: hi;
	grid-row-end: low;
}

#sidebar {
	background-color: #00213c;
	text-align: left;
	background-image: url(../img/pattern_in.png); background-size: 28px 28px;
	max-width: 350px;
	box-shadow: 0 0px 10px 3px rgba(0, 0, 0, 0.46);
	color: white;
}

#sidebar-inner { min-width: 320px; margin-right: 10px; display: inline-block; }
	
#footer { clear: both;  padding: 20px; text-align: center; border-top: solid 1px #02223b; }
	
/* sidebar */

h1 { text-align: center; width: 100%; font-family: 'Roboto Slab', serif; font-size: 32px; color: white; font-weight: 700; padding: 40px 0 20px 0; text-shadow: 0px 3px 3px black }

h1 img { display: inline-block; margin-bottom: 20px; width: 200px; }

h1 span { display: block; }

#sidebar ul { padding: 0 20px 0 40px; }

#sidebar li { margin-bottom: 10px; font-weight: normal; list-style-type: square; }

#back { text-align: center; color: white; font-size: 20px; font-size: 20px; text-decoration: none; display: block; width: 100%; }

#intro p { color: white; text-align: left; padding: 10px 20px; margin-bottom: 20px; }

#intro img { width: 200px; display: block; margin: 0 auto 20px auto; }

#sidebar #submenu { padding: 0 0 0 20px; }

#submenu li { display: inline-block; margin: 0 7px; }

/* help button */

#buttons { position: fixed; z-index: 10000; bottom: 0; right: 10%; }

#buttons a { display: inline-block; padding: 10px 25px; margin: 0 5px; box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.4); }

#help-bt { background: #ffae00; }

#reset-bt { background: #060e24; }

/* help window */

#help-box { display: none; z-index: 99999; position:absolute; }

#help{ position: fixed; top: 20px; bottom: 20px; width: 800px; left: 50%; margin: 0 0 0 -400px; padding: 10px; background-color: white; }

.help-inner { position: absolute; top: 8px; bottom: 8px; left: 8px; right: 8px; padding: 30px;
	background: url(../img/corner-tl.png) left top no-repeat, url(../img/corner-tr.png) right top no-repeat, 
				url(../img/corner-bl.png) left bottom no-repeat, url(../img/corner-br.png) right bottom no-repeat;
	background-size: 87px 80px, 87px 80px, 87px 80px, 87px 80px; }
	
.help-cont { overflow-y: auto; position: absolute; top: 100px; left: 30px; right: 30px; bottom: 30px; padding-right: 10px; }

.close { position: absolute; right: -6px; top: -6px; background: #0f4755; border-radius: 100px; border: none; color: white; font-size: 20px; width: 40px; height: 40px; font-family: 'Roboto Slab', serif; font-size: 32px; z-index: 99999; }

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}

#help h2 { font-size: 32px; color: black; margin-bottom: 40px; padding-bottom: 10px; font-family: 'Roboto Slab', serif; text-align: center; border-bottom: dotted #666 2px; }

.toggle { float: right; color: #666; font-size: 12px; }

#help h3 { border-bottom: solid 1px #999; font-size: 22px; padding-bottom: 5px; margin-bottom: 20px; clear: both; }

.module { margin-bottom: 40px; }

.module p { margin-bottom: 20px; font-weight: 300; font-family: sans-serif; }

/* annex */

#annex { text-align: center; }

#annex li{ display: inline-block; vertical-align: top; text-align: center; margin: 10px 20px; }

#annex img { display: block; margin-bottom: 10px; }

#annex a { color: black; text-decoration: none; }

/* related articles */

.articles { padding: 20px 0 40px 0; }

.articles h3, .articles ul { max-width: 400px; margin: 0 auto; }

.articles h3 { border-bottom: dotted 1px #444; font-size: 20px; padding-bottom: 5px; margin: 30px auto 10px auto; font-family: 'Roboto Slab', serif; }

.articles ul { text-align: left; }

.articles li { margin-bottom: 10px; list-style: circle; list-style-position: inside; }

.articles a { color: black; text-decoration: none; font-variant: normal; }

/*** forms ***/
/*** forms ***/
/*** forms ***/

#forms { width: 600px; padding: 0 50px 50px 50px; float: left; }

#forms p { margin-bottom: 10px; }

h2 { font-family: 'Roboto Slab', serif; font-size: 26px; margin: 50px 0 20px 0; }

label { display: block; }

input[type="submit"], #reload{ background: black; display: block; font-family: 'Roboto Slab', serif; color: white; font-size: 20px; border: none; border-radius: 10px; position: relative; padding: 10px 15px; margin: 20px 10px 10px 0; float: left; }

#imgForm input[type="submit"], #ean input[type="submit"] { float: none; }

#reload { text-decoration: none; padding-bottom: 9px; line-height: 27px; background: #ccc; color: black; }

/*** pdf button ***/
form button { background: black; display: block; font-family: 'Roboto Slab', serif; color: white; font-size: 30px; border: none; border-radius: 10px; position: relative; padding: 10px 15px 10px 85px; margin: 20px 0 50px 0; }

form button:after { content: ' '; display: block; background: url(../img/pdf.png) 0 0 no-repeat; background-size: cover; width: 64px; height: 72px; position: absolute;
top: -7px; left: 10px; }

#pdf p { margin-bottom: 20px; }

input[type="text"], input[type="email"] { width: 240px; height: 40px; border: solid 1px black; border-radius: 4px; padding: 0 10px; margin: 0 0 20px 0; font-size: 16px; }

input[type="file"] { margin: 0 0 10px 0; font-size: 16px; }

.hidden { display: none; }

label span { display: block; margin-bottom: 10px; }

/*** preview ***/
/*** preview ***/
/*** preview ***/

#preview { width: 300px; float: left; }

#preview td { border: solid 1px black; }

#ean-tr { display: none; }

/*** error box ***/
/*** error box ***/
/*** error box ***/

#error { position: fixed; z-index: 10000; background: rgba(0,0,0,0.5); top: 0; bottom: 0; left: 0; right: 0; }

#error-box { position: absolute; background: white; width: 300px; left: 50%; top: 50%; margin: -100px 0 0 -200px; text-align: center; padding: 50px; }

#error-box a { position: absolute; top: 10px; right: 10px; }

#error-txt { font-size: 18px; line-height: 24px; }

@media (max-width: 1150px) {

#main { display: block; height: auto; width: 100%; }

#submenu { width: auto; float: right; margin: -80px 0 0 0; }

#sidebar { border-bottom: solid 2px #0f4755; height: 100px; background-color: #00213c; width: 100%; max-width: none;
	background-image: url(../img/pattern_in.png); background-size: 28px 28px; box-shadow: 0px 4px 6px 0 rgba(0, 0, 0, 0.46); }

#sidebar-inner { width: 100% }

#sidebar h1 { vertical-align: middle; margin: 0; padding: 0; text-align: center; }

#sidebar h1 img { width: 150px; display: inline-block; margin-bottom: 0; margin-top: 10px; }

#sidebar h1 br, #intro img, #sidebar ul, #sidebar p { display: none; }

#sidebar #submenu { display: block; }

#sidebar h1 span { float: left; width: 0; overflow: visible; white-space: nowrap; line-height: 100px; padding-left: 20px; }

#back { display: block; float: right; width: auto; padding: 20px; margin-top: -75px; }

#content { margin: 0 auto; }

}
	
@media (max-width: 764px) {
	
#sidebar h1 img { width: 130px; }
	
#sidebar { height: auto; padding: 15px 0; }

#sidebar h1 br, #sidebar h1 img, #sidebar h1 span { display: block; }

#sidebar h1 span { float: right; width: auto; line-height: normal; margin: 8px 15px 0 0; }

#sidebar h1 img { float: left; margin: 15px 0 0 15px;  }

#back { float: none; margin: 0; padding: 0; font-size: 14px; }

#help { left: 0; right: 0; margin: 0; width: auto; }

.help-inner { padding: 20px; }

#submenu { margin: 16px 10px 0 0; }

}

@media (max-width: 600px) {

#sidebar h1 br { display: none; }
	
#sidebar h1 img { float: none; width: 150px; margin: 0 auto; }	

#sidebar h1 span { float: none; width: auto; margin: 20px 0; line-height:normal; }

#submenu { float: none; text-align: center; }
	
}