/* Style sheet for www.deskproto.com */
/* copyright (c) Delft Spline Systems, NL, 2014. */
/* This stylesheet is called ONLY for screens above 600 px. */

/* Z-index values used: 
	#background -5
	<header> (navigation) 5
	#CurrentNavStatus 1
	#socialmediabuttons 3
	#fixed-download-button 3
	Slideshow buttons 1
*/

body {
	font-family: Arial, Verdana;
	font-size: 14px;
}

header {
/*  Base version: wide desktop screen (> 1000) */
	position: absolute;
	top: 0px;
	width: 1000px;
	/* these three lines center the content horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 5; /* Z-index only works when 'position' is present */
}
@media all and (min-width: 701px) and (max-width: 1000px) {
/*  Medium screen version */
	header {
		width: 100%;
	}
}
@media all and (max-width: 700px) {
/*  Small screen version */
	header {
		width: 700px;
	}
}


#background {
	background: url('../images/bg-grid.gif');
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -5;
}
@media all and (max-width: 750px) {
	#background {
		background: url('../images/bg-grid.gif');
	}
}

#header-leftside {
	position: relative;
	width: 50%;
	height: 133px;
} 

#BottomAlign {
	position: absolute;
	width: 100%;
	vertical-align: bottom;
	bottom: 0px;
}
#BottomAlign IMG {
	width: 100%; /* force the image to scale down if the container is too small */
	/* three lines added after again using width and height in html to avoid CLS penalties */
	/* this tag is used only for one image: 500 x 100 pixels (DP_Logo_Transp). */
	object-fit: contain;
	aspect-ratio: 5.0;
	height: auto;
}

#header-rightside {
	position: absolute;
	width: 50%;
	height: 50px;
	top: 110px;
	right: 0;
	text-align: right;
	opacity: 0.8; 
} 
/*  header-rightside contains one link: Contact */
#header-rightside a:link {
	color: #3131BD;  /* a bit less saturation than standard links (#0000EE) */
}
#header-rightside a:visited {
	color:#551A8B; /* default for standard links */
}
#header-rightside a:hover {
	background: #FEFF91; /* a very light yellow background */
}
#header-rightside-mobile {
	display: none;
} 


/* Start of NAV MENU series of tags --------------------------------*/
/* Draw the blue menu bar first, as it is wider than the contents. */
nav {
	position: absolute;
	top: 160px;
	background-color:#034EA2; /* color of the bar behind the menu blocks: dark blue */
	width: 100%;
	height: 27px;
	border-radius: 2px 2px 0px 0px; /* top-left, top-right, bottom-right, bottom-left */
}
/* Strip the ul of padding and list styling*/
nav ul {
	font-size: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Display the main menu */
nav ul li {
	display: block;
	position: relative;
	float: left;
}
/* Hide the sub-menus */ 
nav    li ul {
	display: none;
}

/*Style for main menu links*/
nav ul li a {
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 7px 5px 0px 5px; /* padding top-right-bot-left */
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #FEFFFF; /* text in the main menu blocks */
	white-space: nowrap;
	height: 20px; /* Width and height of top-level nav items */
	width: 125px; /* this is excl the padding pixels */
	border-radius: 2px 2px 0px 0px; /* top-left, top-right, bottom-right, bottom-left */
	cursor: default; /* the main menu options are no links */
}
/*Hover state for top level links*/
nav ul li a:hover {
	background: #FEEE1A; /* hovering on main menu: yellow */
	color: #034EA2; /* text hovering on main menu: dark blue  */
}
 
nav    li:hover ul {
	display: block;
	position: absolute;
	-webkit-box-shadow: 2px 2px 4px 0px #404040; /* drop shadow around the submenus */
	-moz-box-shadow: 2px 2px 4px 0px #404040; /* hor - ver - blur - spread - color */
	box-shadow: 2px 2px 4px 0px #404040;
}
 
nav    li:hover li {
	float: none;
	font-size: 14px; /* text size in submenu */
}

/*Style for dropdown links*/
nav    li:hover ul a {
	background: #FEEE1A;  /* color of the submenu blocks non-hovered: yellow*/
	color: #033975; /* text on sub menu: darker blue, because of opacity */
	height: 20px; /* Height of submenu blocks */
	width: 110px; /* Width of submenu blocks */
	border-radius: 0px;
	opacity: 0.85; 
	display: block;
	text-decoration: none;
	text-align: left;
	padding: 7px 5px 0px 5px; /* padding top-right-bot-left */
	white-space: nowrap;
	cursor: pointer;
}

/*Hover state for dropdown links*/
nav    li:hover li a:hover {
	background: #41A9FE; /* color of the submenu blocks hovered: light blue*/
}
 
nav ul li ul li a {
	text-align: left; /* Top-level items are centered, but nested list items are left-aligned */
}


/* Style 'show menu' label button and hide it by default: only used in mobile style sheet */
/* this style code must be present though: the button is drawn in the html */
nav .show-menu {
	display: none;
}
/*Hide checkbox*/
nav input[type=checkbox]{
	display: none;
}
/* End of NAV MENU series of tags */



/* Start of CURRENT NAV STATUS series of tags --------------------------------*/
#active-nav {
/*  Base version: wide desktop screen (> 1000) */
	position: absolute;
	top: 187px;
	width: 1000px;
	/* these three lines center the content horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
}
@media all and (min-width: 701px) and (max-width: 1000px) {
/*  Medium screen version */
	#active-nav {
		width: 100%;
	}
}
@media all and (max-width: 700px) {
/*  Small screen version */
	#active-nav {
		width: 700px;
	}
}
#CurrentNavStatus {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	height: 3px;
	z-index: 1; /* Z-index only works when 'position' is present */
	opacity: 1; 
	border-radius: 0px 0px 2px 2px; /* top-left, top-right, bottom-right, bottom-left */
	overflow-x: hidden;  /* needed to prevent wrapping to a next line for a small window */
}
 #CurrentNavStatus ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#CurrentNavStatus ul li {
	display: block;
	position: relative;
	float: left;
}
#CurrentNavStatus .ActiveNavElement {
	background: #FEEE1A;  /* color of the submenu blocks non-hovered: yellow*/
	float: left;
	height: 2px; /* display a yellow line below the active menu element */
	width: 135px; /* is 125 of [nav ul li a] plus 2x 5px padding */
	opacity: 1; 
	padding: 0;
	border: 1px solid;
	border-top-style: none;
	border-color: #034EA2; /*color of the main menu blocks non-hovered: dark blue*/
	border-radius: 0px 0px 2px 2px; /* top-left, top-right, bottom-right, bottom-left */
}
#CurrentNavStatus .NavElement {
	background: #034EA2; /*color of the main menu blocks non-hovered: dark blue*/
	float: left;
	height: 3px; 
	width: 135px;
	opacity: 1; 
	border-radius: 0px 0px 2px 2px; /* top-left, top-right, bottom-right, bottom-left */
}
/* End of CURRENT NAV status series of tags */



/* Start of Social Media buttons status series of tags ------------------------*/
#socialmediabuttons {
/*  Base version: wide desktop screen (> 1050) */
	width: 1050px;
	position: fixed;
	top: 200px;
	text-align: right;
	/* these three lines center the content horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
	/* Z-index only for IMG tag does not work for Google Chrome */
	/* problem: this z-index will obscure part of the figcaption link. */
	/* solution: set visibility of this full-width tag to hidden. */
	z-index: 3; /* Z-index only works when 'position' is present */
	visibility: hidden;
}
@media all and (min-width: 1001px) and (max-width: 1050px) {
/*  Intermediate resolution */
	#socialmediabuttons {
		width: 1000px;
	}
}
@media all and (min-width: 701px) and (max-width: 1000px) {
/*  Medium screen version */
	#socialmediabuttons {
		width: 100%;
	}
}
@media all and (max-width: 700px) {
/*  Small screen version */
	#socialmediabuttons {
		width: 700px;
	}
}
#socialmediabuttons-position {
/* empty tag, needed to position the three buttons above one another */
}
#socialmediabuttons img {
	position: relative;
	z-index: 3; /* Z-index only works when 'position' is present */
	visibility: visible;
}

/* make social media buttons respond to hovering */
.button {
	padding: 0;
	margin:0;
	opacity: .85;
}
.button:hover {
	opacity: 1;
}
/* End of Social Media buttons status series of tags*/


aside {
	width: 900px;
	position: fixed;
	top: 330px;
	text-align: right;
	/* these three lines center the content horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
	/* Z-index only for IMG tag does not work for Google Chrome */
	/* problem: this z-index will obscure part of the figcaption link. */
	/* solution: set visibility of this full-width tag to hidden. */
	z-index: 3; /* Z-index only works when 'position' is present */
	visibility: hidden;
}
@media all and (max-width: 900px) {
	aside {
		display: none;
	}
}
aside img {
	position: relative;
	z-index: 3; /* Z-index only works when 'position' is present */
	visibility: visible;
	object-fit: contain;
	height: auto;
}


/* main   --------------------------------------------------------------*/
#below-menu {
/*  Base version: wide desktop screen (> 1000) */
	position: absolute;
	top: 190px;
	background-color: #EEEEEE; /* a very light grey, to distinguish from the white main screen */
	width: 1000px;
	/* these three lines center the block horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
}
@media all and (min-width: 701px) and (max-width: 1000px) {
/*  Medium screen version */
	#below-menu {
		width: 100%;
	}
}
@media all and (max-width: 700px) {
/*  Small screen version */
	#below-menu {
		width: 700px;
	}
}



/* Start of SlideShow series of tags --------------------------------*/
.Slideshow{
	position: relative;
	display: block;
	overflow: hidden;
}
.Slideshow-mobile{
	display: none;
}
.Slideshow figure{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	opacity: 0;
	transition: 2s opacity;
}
.Slideshow img{
	width: 100%; /* for the image to scale down in smaller container */
	/* three lines added after again using width and height in html to avoid CLS penalties */
	object-fit: contain;
	aspect-ratio: 2.0;
	height: auto;
}
.Slideshow figcaption{
	text-decoration: none;
	position: absolute;
	font-size: 36px;
	font-weight: bold;
	text-align: right;
	bottom: 50px;
	right: 40px;
	max-width: 40%; /* Google translate sometimes removes the line breaks in the caption text */
	padding: 25px;
	color: #FFFF00; /* text in yellow */
	background: rgba(65,169,254, .6); /* this is #41A9FE (light blue) plus alpha channel */
	border-radius: 2px;
	opacity: .9;
	-webkit-box-shadow: 2px 2px 4px 0px #404040; /* drop shadow around caption field */
	-moz-box-shadow: 2px 2px 4px 0px #404040; /* hor - ver - blur - spread - color */
	box-shadow: 2px 2px 4px 0px #404040;
}
@media all and (max-width: 820px) {
	.Slideshow figcaption{
		font-size: 28px;
	}
}

.Slideshow figcaption:hover{
	opacity: 1;
}
.Slideshow figcaption a{
	text-decoration: none;
	color: #FFFF00; /* text in yellow */
	display: block;/* make complete figcaption area clickable */
}
.Slideshow figure.show{
	opacity: 1;
	position: static;
	transition: 2s opacity;
}
.next, .prev, .start, .stop{
	position: absolute;
	z-index: 1;
	margin-top: -10px;
	padding: 0px 0px 0px 0px;
	opacity: .8;
/*	user-select: none;  ?? */
}
.next:hover, .prev:hover, .start:hover, .stop:hover{
	cursor: pointer;
	opacity: 1;
}
.next{
	right: 0;
}
.prev{
	left: 0;
}
.start{
	left: 0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	display: none;
}
.stop{
	left: 0;
	right:0;
	margin-left: auto;
	margin-right: auto;
}
/* End of SlideShow series of tags */



/* Start of general series of tags --------------------------------*/
#home-content {
	position: relative;
	background-color: #EEEEEE;
	width: 92%;
	top: 10px;
	color:#033C7D; /* text color : a bit darker blue than the navigation bar*/
	/* these three lines center the block horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
}
#content {
/*  Base settings: all screens > 900px */
	position: relative;
	background-color: #EEEEEE;
	width: 650px;
	left: 60px;
	top: 10px;
	color:#033C7D; /* text color : a bit darker blue than the navigation bar*/
}
@media all and (min-width: 751px) and (max-width: 900px) {
	#content {
		left: 40px;  /* smaller left margin */
	}
}
@media all and (max-width: 750px) { /* below 500 in different CSS file */
	#content {
	  left: 20px;
	}
}
#content em {
	color: #033C7D; /* same color as normal text*/
	background: #FEFF91; /* a very light yellow background */
	font-weight: bold;
	font-style: normal; /* so not italic */
}
#content a:link {
	color: #3131BD;  /* a bit less saturation than standard links (#0000EE) */
}
#content a:visited {
	color: #551A8B; /* default for standard links */
}
#content a:hover {
	background: #FEFF91; /* a very light yellow background */
}
#content  img {
	/* needed to make the border exactly fit, if not some white will be added below */
	/* This will also prevent a light yellow background when hovering a link image */
	/*display: block; -- not used for all images as that would make in-line display impossible */

	/*max-width: 100%;  Prevents an image to be displayed wider than its container (the worldmap) */
	/* removed as this will override IMG settings in the style-forum.css stylesheet. */
}

.column {
	width: 30%;
	float: left;
}
.spacing {
	width: 5%;
	float: left;
}
.doublecolumn {  /* width equals two columns plus one spacing */
	width: 65%;
	float: left;
}
.doublecolumn em {
	color: #033C7D; /* same color as normal text*/
	background: #FEFF91; /* a very light yellow background */
	font-weight: bold;
	font-style: normal; /* so not italic */
}
.doublecolumn a:link {
	color: #3131BD;  /* a bit less saturation than standard links (#0000EE) */
}
.doublecolumn a:visited {
	color: #551A8B; /* default for standard links */
}
.doublecolumn a:hover {
	background: #FEFF91; /* a very light yellow background */
}

.column-downloadbutton {  /* different name: only used on home page*/
	width: 30%;
	float: left;
}
p.clear-floats {
	clear: both; /* close all open columns, to start again on a fresh horizontal line */
}

p.red-headline {
	color: #D6492F; /* same red as the video-pause button */
	font-size: 150%;
	font-weight: bold;
	margin-top: 8px;
	margin-bottom: 5px;
}
p.navigation-path {
	color: #999999; 
	font-size: 120%;
	font-weight: bold;
	margin-top: 8px;
	margin-bottom: 5px;
	margin-left: 2px;
}


/* the three tags below are only used on the home page */
.window {
	border-radius: 2px;
	background-color: #FFFFFF;
	overflow-x: hidden;
	max-height: 189px; /* limit the height in case of incorrect image size */
}
.window img {
	display: block;  /* needed to make the border exactly fit, if not some white will be added below */
	width: 100%;  /* needed to make img shrink with smaller container */
	/* three lines added after again using width and height in html to avoid CLS penalties */
	/* this tag is used only for three images on the home page: each 274 x 160 pixels. */
	object-fit: contain;
	aspect-ratio: 1.7125;
	height: auto;
}
.window-title {
	text-decoration: none;
	text-align: center;
	padding: 6px 0px 4px 0px; /* padding top-right-bot-left */
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #FEFFFF; /* text in the main menu blocks */
	white-space: nowrap;
	height: 18px; /* Width and height of top-level nav items */
	width: 100%;
}
.window-title a {
	text-decoration: none;
	text-align: center;
	padding: 6px 0px 4px 0px; /* padding top-right-bot-left */
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #FEFFFF; /* text in the main menu blocks */
}
.window:hover .window-title, .window:hover a {
	background: #0568D7; /* hovering on link: a bit lighter blue */
}

/* End of home page series of tags */


.illustration-block {
	border-radius: 2px;
	overflow-x: hidden;
	width: 650px;
}
.illustration-block img { 
	display: block; /* needed to make the border exactly fit, if not some white will be added below */
	max-width: 100%; /* scale down only in case he image is smaller than the screen. */
	height: auto;
}
/* tried to position absolute, using left:0 and right:0 (with parent relative), however
   that only works when the parent has a fixed height (otherwise the height will be 0).
   Now use div vert-align: empty for desktop, display none for mobile. */
.leftside { 
	float: left;
	max-width: 100%; /* needed for max width in the video tag */
}
.rightside { 
	float: right;
	max-width: 100%; /* needed for max width in the video tag */
}
.illustration-textblock {
	display: block; /* needed to make the border exactly fit, if not some white will be added below */
	padding: 8px 8px 8px 8px; /* padding top-right-bot-left */
	max-width: 284px; /* (300 min padding) scale down only in case he image is smaller than the screen. */
	height: auto;
	background: #DDEEFF; /* very light blue */
	font-style: italic;
}
video {
	max-width: 100%;
	height: auto;
}
.rightside-youtube { 
	float: right;
	font-size: 80%; /* text below YouTube image on video pages */
	padding: 0px 0px 10px 15px; /* padding top-right-bot-left */
}
.vert-align {
}
.illustration-block-title {
	text-decoration: none;
	text-align: left;
	padding: 6px 10px 4px 10px; /* padding top-right-bot-left */
	-moz-box-sizing:border-box; /* prevent that left and right padding make the box wider */
	-webkit-box-sizing:border-box; 
	box-sizing:border-box;
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #FEFFFF; /* text in the main menu blocks */
	border-radius: 2px;
	height: auto; /* allows multiple line text */
	width: 100%;
}
.aligntextright {
	float: right;
}

.left-floated-image {
	float: left;
	margin-right: 20px;
}
.right-floated-image {
	float: right;
	margin-left: 20px;
}

.commented-illustration-block {
	border-radius: 2px;
	overflow-x: hidden;
	width: 650px;
	display: table;
}
.commented-illustration-block img { 
	display: block; /* needed to make the border exactly fit, if not some white will be added below */
}
.commented-illustration-block-title {
	text-decoration: none;
	text-align: left;
	display: table-cell;
	vertical-align: bottom;
	padding: 6px 10px 4px 10px; /* padding top-right-bot-left */
	-moz-box-sizing:border-box; /* prevent that left and right padding make the box wider */
	-webkit-box-sizing:border-box; 
	box-sizing:border-box;
	background: #DDEEFF; /* very light blue background, text same color as on white */
	border-radius: 2px;
	width: 100%;
}


.specstable {
	width: 100%;
	background: #DDEEFF; /* light blue 1 */
	border-style: solid;
	border-width: 1px;
	border-color: #034EA2;
	padding: 0;
	margin: 0;
	border-spacing: 0;
	border-collapse: collapse;
}
.specstable th, .specstable td {
	vertical-align: top;
	padding: 4px 10px 2px 10px; /* padding top-right-bot-left */
	border-style: solid;
	border-width: 1px;
	border-color: #034EA2;
}

.top-of-page-button {
	position: absolute;
	right: 0;
}

/* The thematic break tag (or 'horizontal ruler') is used in the Dealer list and... */
/* This strange css is needed to simply set the color of the horizonal line */
hr {
	background-color: #0568D7;
	height: 1px;
	border: 0;
}


.search-table {
	width: 100%;
	padding: 0;
	margin: 0;
}
.search-table td {
	padding: 10px;
}
.search-table td input.terms {
	width: 100%;
}


/* End of general series of tags */


/* Start of Footer series of tags --------------------------------*/
/* the footer must be within the Main tag to be positioned at the bottom of the page */
footer {
/*  Base version: wide desktop screen (> 1000) */
	position: relative;
	width: 1000px;
	background-color: #FFFFFF;
	/* these three lines center the content horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
}
@media all and (min-width: 701px) and (max-width: 1000px) {
/*  Medium screen version */
	footer {
		width: 100%;
	}
}
@media all and (max-width: 700px) {
/*  Small screen version */
	footer {
		width: 100%;  /* ??? why not 700px ? */
	}
}

#footer-bar {
	background-color:#034EA2; /* color of the bar behind the menu blocks: dark blue */
	width: 100%;
	height: 29px;
	border-radius: 2px;
}
#footer-menu {
	width: 500px;
	/* these three lines center the content horizontally */
	left: 0;
	right: 0;
	margin: 0 auto;
}
#footer-menu ul {
	font-size: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer-menu a {
	display: block;
	text-decoration: none;
	padding: 6px 0px 6px 0px; /* padding top-right-bot-left */
	text-align: center;
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #FEFFFF; /* text in the main menu blocks */
	white-space: nowrap;
}
#footer-menu ul li {
	display: block;
	width: 100px;
	float: left;
}
#footer-menu ul li a:hover, #footer-menu ul li:hover {
	background: #0568D7; /* hovering on link: a bit lighter blue */
}
 
#footer-quote{
	text-decoration: none;
	text-align: center;
	padding: 10px 0px 4px 0px; /* padding top-right-bot-left */
	background-color:#FFFFFF;
	color: #034EA2; /* text in dark blue */
	width: 96%;
	padding: 2%;
	height: 18px;
}
/* End of Footer series of tags */