#navbar
{
	overflow: hidden;
	background-color: #00b0f0;
	padding: 30px 10px;			/* Large padding which will shrink on scroll (using JS) */
	transition: 0.4s;			/* Adds a transition effect when the padding is decreased */
	position: fixed;			/* Sticky/fixed navbar */
	width: 100%;
	top: 0;						/* At the top */
	z-index: 99;
}

#navbar #logoPicture
{
	float: left;
	transition: 0.4s;
}

#navbar #logoText
{
	float: left;
	color: white;
	font-size: 70px;
	transition: 0.4s;
}

#navbar #logoTextBarna
{
	font-family:"barna-stencil-bold1";
	float: left;
	color: white;
	font-size: 70px;
	transition: 0.4s;
}

.container
{
	background-color: #00b0f0;
	border-radius: 20px;
	padding: 16px;
	margin: 16px 0;
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	text-align: left;
	color: white;
}

.tab
{
	display: inline-block; width: 175px;
}

.titles1
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: bold;
	color:#00b0f0;
	text-shadow: 0.5px 0.5px 1px #558ABB;
}

.titles2
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 23px;
	color:#00b0f0;
	text-shadow: 0.5px 0.5px 1px #558ABB;
}

.titles3
{
	font-family: Calibri, Helvetica;
	color:#555;
	font-size: 25px;
}

@font-face
{
	font-family:'barna-stencil-bold1';
	src:url("BarnaStencilBold1.woff") format("woff");
}

@font-face
{
	font-family:'barna-stencil-bold2';
	src:url("BarnaStencilBold2.woff") format("woff")
}

.titre1
{
	font-family:"barna-stencil-bold1";
	color:#4C4C4C;
	font-size:34px;
	line-height:29px;
	font-weight:bold;
	font-style:normal;
	font-display:swap;
	text-shadow:0 2px 2px #CFCFCF;
	padding-top:6px
}

.titre2
{
	font-family:"barna-stencil-bold1";
	color:#000;
	font-size:34px;
	line-height:29px;
	font-weight:bold;
	font-style:normal;
	font-display:swap;
	text-shadow:0 2px 2px #CFCFCF;
	padding-top:6px
}

.titre3
{
	font-family:"barna-stencil-bold2";
	color:#000;
	font-size:28px;
	font-weight:700;
	line-height:29px;
	text-shadow:0 2px 2px #CFCFCF;
	padding-top:6px
}

.titre4
{
	font-family:"barna-stencil-bold2";
	color:#4C4C4C;
	font-size:34px;
	font-weight:700;
	line-height:35px
}

.textcursive1
{
	font-family: cursive;
	color:#FF0000;
	font-size: 21px;
	position:relative;
	top:-30px;
}

.textcursive2
{
	font-family: cursive;
	color:#FF0000;
	font-size: 18px;
	text-align: center;
}

.dygraph-xlabel
{
	font-family: cursive;
	color:#555;
	border:0px solid lime;
	position:relative;
	top: 10px;
}

.dygraph-ylabel
{
	font-family: cursive;
	color:#555;
	border:0px solid lime;
	position:relative;
	top:-10px;
}
/*
#graphdiv1 .dygraph-ylabel
{
	font-family: cursive;
	color:#555;
	border:0px solid lime;
	position:relative;
	top:-30px;
}
*/
.dygraph-title
{
	font-family: cursive;
	color:#555;
	border:0px solid orange;
	margin-left:60px;
	margin-bottom:30px;
	position:relative;
	top:-30px;
}

.dygraph-legend
{
	left: 900px !important;
	background-color: transparent !important;
}

.dygraph-legend > span.highlight
{
	border: 1px solid grey;
}

.selecter
{
	position:relative;
	top:-10px;
	left:70px;
}

/* style for slider */
.slider-container
{
	width: 1017px;
	height: 1193px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.image-container
{
	width: 2034px;
	height: 1193px;
	position: relative;
	transition: left 2s;
	-webkit-transition: left 2s;
	-moz-transition: left 2s;
	-o-transition: left 2s;
}

.slider-image
{
	float: left;
	margin: 0px;
	padding: 0px;
}

#Create_job_slide:target  ~ .image-container
{
	left: 0px;
}

#Output_files_slide:target  ~ .image-container
{
	left: -1017px;
}
			
/* Next & previous buttons */
.prev, .next
{
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: grey;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.next
{
	left: 986px;
	border-radius: 0 3px 3px 0;
}
			
/* Position the "prev button" to the left */
.prev
{
	right: 986px;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover
{
	background-color: rgba(0,0,0,0.8);
}

.hover-pict1						{ display: none;  }
.hover-text1:hover ~ .hover-pict1	{ display: block; }

.hover-pict2						{ display: none;  }
.hover-text2:hover ~ .hover-pict2	{ display: block; }

.hover-pict3						{ display: none;  }
.hover-text3:hover ~ .hover-pict3	{ display: block; }

.hover-pict4						{ display: none;  }
.hover-text4:hover ~ .hover-pict4	{ display: block; }

.hover-pict5						{ display: none;  }
.hover-text5:hover ~ .hover-pict5	{ display: block; }

.hover-pict6						{ display: none;  }
.hover-text6:hover ~ .hover-pict6	{ display: block; }

.hover-pict7						{ display: none;  }
.hover-text7:hover ~ .hover-pict7	{ display: block; }

.hover-pict8						{ display: none;  }
.hover-text8:hover ~ .hover-pict8	{ display: block; }

.hover-pict9						{ display: none;  }
.hover-text9:hover ~ .hover-pict9	{ display: block; }

/* The dots/bullets/indicators */
.dot
{
	cursor: pointer;
	width: 15px;
	height: 15px;
	position:relative;
	top:-65px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active, .dot:hover
{
	background-color: #717171;
}

details.high       > summary
{
	list-style-type: "\0025BA\000020\01F4C1\000020\000020";
	color          : #6495ED;
}

details.high[open] > summary
{
	list-style-type: "\0025BC\000020\01F4C2\000020\000020";
	color          : RoyalBlue;
}

details.low        > summary
{
	list-style-type: "\0025B8\000020\01F4C1\000020\000020";
	color          : #6495ED;
	margin-left    :  0.5em;
}

details.low[open]  > summary
{
	list-style-type: "\0025BE\000020\01F4C2\000020\000020";
	color          : RoyalBlue;
}

ul.files
{
	list-style     : none;
	margin         : 0;
}

li.files::before
{
	content        : "\01F4F7\000020";
	color          : grey;
}