/* css file for Hensel site 02.09.2018 */
		
.mobileOnly {display:none;}		/* standard hide from non-mobiles */
#mobileList {display:none;}		/* for some reason li will not respond to class — has to be id */
#mobileClear {display:none;}	/* clear after title for mobiles only */
#mobileListHide  {display:block;}

html,body
{
	background:#c8d9f3;
	color:#000000;
	margin:0px; 
	padding:0px;
}

body
{
	font:100%/1.4 "Arial", sans-serif;
	padding-top: 20px; padding-bottom: 15px;
}

h1
{
	color: #274869;
	font: 280%  "Times New Roman", serif;
	font-weight: bold;
	margin: 0 auto;		/* for centring ?*/
	text-align: left;
}

h2
{
	color: #274869;
	background: transparent;
	font:150%/1.4 "Arial", sans-serif;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	padding-top: 15px; 
}

h3
{
	color: #274869;
	background: transparent;
	font:120%/1.4 "Arial", sans-serif;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	padding-top: 0px; 
}

h4
{
	color: #274869;
	background: transparent;
	font:100%/1.4 "Arial", sans-serif;
	font-weight: bold;
	font-style: italic;
	text-align: left;
	line-height: 120%;
	padding-top: 0px; 
}

h4 a
{
	color:#3f7dbb;
	text-decoration:none;
}

a
{
	color: #3f7dbb;
	text-decoration:none;
}
a:hover
{
	color:#555555;
}

/* mobiles only navigation strip above wrapper — subdivisions defined for mobiles*/
#topStrip
{
	display: none;
}

#wrapper
{
	background: transparent;  
	overflow: hidden;			
	min-width: 600px; 
	max-width: 800px;
	margin: 0 auto;		/* for centring */
	
	/* ensures minimal border on resizing — aesthetics */
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
}

/* suffix I indicates used only on index.html page */

/* non-text material in midleft ( left (logo) + middle (title)) and nav (for menu) */
#upper, #upperI
{
	background:#ffffff;
	border: 1px solid #333333;
	border-radius: 6px;
	box-shadow: 0px 3px 5px #888888;
	padding-right: 5px; padding-left: 15px;
	padding-bottom: 0; padding-top: 10px;
	margin-bottom: 20px;
}

#left
{
 	float:left; 
	margin-left: 10px;
	padding-bottom: 20px;
}


.logo
{
	padding-top:0;
}

#middle
{
	float:left; 
	padding-top: 20px;
	padding-left: 30px;
	width: 40%;
}

 /*because of alternatives on index page*/
#middleM
{
	float:left; 
	padding-top: 20px;
	padding-left: 30px;
	width: 40%;
}

#nav, #navI
{
	display: block;
	width: 100%;
	margin-top: 10px;
}

#nav ul, #navI ul
{
  	list-style: none;
	margin-top: 0; margin-left: 0; 
	margin-bottom: 35px; margin-right: 0;
	padding: 0;
	text-align: right;
}

#nav li, #navI li
{
	font: 100% "Verdana", "Helvetica Neue", "Arial", sans-serif;
	font-weight: bold;
	line-height: 160%;
	margin: 0;
	max-width: 97%;
}

#nav li a, #navI li a
{
	color:#3f7dbb;
	padding-top: 0.3em; padding-left: 1%;
	padding-bottom: 20px; padding-right: 1%;
	text-decoration: none;
}

#nav li a:hover, #navI li a:hover
{
	color: #999999;
}

/* for use in li in index menu only */ 
#selected
{
	display: inline;
	padding-top: 0.3em; padding-left: 1%;
	padding-bottom: 20px; padding-right: 4%;
	/* color: #808080; */
	color: #555555;
}

/* for use in span in menu */ 
.selected
{
	display: inline;
	padding-top: 0.3em; padding-left: 1%;
	padding-bottom: 20px; padding-right: 1%;
	color: #555555;
}

/* contains text area */
#lower
{
	background:#ffffff;		
	border: 1px solid #333333;
	border-radius: 6px;
	box-shadow: 0px 3px 5px #888888;
	padding-right: 10px; padding-left: 20px;
	padding-bottom: 20px; padding-top: 15px;
	margin-bottom: 20px;
}

#lowerStrip
{
	margin-left: 15px;
	margin-right: 15px;
}

.lowerTitle
{
	color: #274869;
	background: transparent;
	font:150%/1.4 "Arial", sans-serif;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	padding-top: 5px; 
}

#lsImage
{
	float: right;
	padding-left: 20px;
	text-align:center;
}

.contents 
{
	margin : 0 auto;
	width : 96%;
	overflow : hidden;
	clear : both;
}

.contents p
{
	text-align: justify;
	line-height: 160%;
	margin-top:0;
	margin-bottom: 10px;
}
	
/* subtitle */
.info  
{
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	margin-top: 0;
	margin-bottom: 0px;
}

/* below lower area */

#footer
{
	color: #333333; background-color: transparent;
	font: 80% verdana, helvetica, arial, sans-serif; 
	text-align: right; 
	line-height: 120%;
	padding-right: 15px;
	padding-top: 5px; padding-bottom: 10px;
	border-top: 0px solid #666666;
}

		/* REDEFINITION FOR ROTATED MOBILES (MAX WIDTH 740px) */

@media screen and (max-width:740px)
{
	
	.mobileOnly {display:block;}
	#mobileClear {display:block;}	
	.mobileHide {display:none;}
	#mobileList {display:block;}
	
	
	/*img.shrinkfit {max-width:100%; height: auto;}*/
	
	html,body
	{
		background:#ffffff; 
	}
	
	body
	{
		padding-top: 0; 
	}

	h1
	{
		text-align: left;	
		color: white;
		font-size: 240%;
	}
	
	h2
	{
		font: 150% "Assistant", sans serif;
		font-weight: 600;
		line-height: 100%;
		padding-top:0;
	}
	
	h3
	{
		font: 120% "Assistant", sans serif;
		font-weight: 600;
	}
	
	h4
	{
		font: 100% "Assistant", sans serif;
		font-weight: 600;	
		font-style: oblique;
	}
	
	.lowerTitle
	{
		font: 120% "Assistant", sans serif;
		font-weight: 600;		
	}
	
	a
	{
		color:#0e3049;
		text-decoration:none;
	}
	a:hover
	{
		color:#999999;
	}
	
	#topStrip
	{
		display: block;
		overflow: hidden;	/* to prevent this outer div shrinking! */
		font: 110% "Assistant", sans serif;
		font-weight: 600;
		color: #111111;
		background-color: #aecce6;
		background:url(../pics/LaceBackground.jpg) top left no-repeat;
		line-height: 180%;
		padding: 5px;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 15px;
		margin-top: 10px;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
	}
	
	.info  
	{
		font: 100% "Assistant", sans serif;
		font-weight: 700;	
	}
	
	#topStrip a
	{
		color: #274869;
	}
	#topL
	{
		float: left;
		width: 15%;
		font-size: 120%;
	}
	#topC
	{
		float: left;
		width: 70%;	
		text-align: center;
	}
	#topR
	{
		float:right;
		width: 15%; 
		text-align:right;
		font-size: 150%;
	}
	
	#wrapper 
	{
		border : none;
		min-width : 86%;
		max-width : 86%;
		width: 86%;				/* to give margin in viewport */
	}
	
	#upper
	{
		border: none;
		box-shadow: none;
		padding: 0;
		margin-bottom: 0;
	}
	
	#upperI
	{
		border: none;
		box-shadow: none;
		padding-top: 15px;	/* standoff */
		margin-bottom: 0;
	}
	
	/* wraps mid and left to give same overall background on transition size */
	#midleft
	{
		background-color: #003864;
		padding-bottom: 10px;
	}	
	
	#left 					/* make zero height*/
	{
		float: none;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	#middle					/* remove float */
	{
		padding-top : 10px;
		padding-bottom : 0;
		float: none;
		width: 100%;
		margin-left: 0px;
	}
	
	/*  middle version for mobiles on index page to avoid duplication of id */
	#middleM
	{
		padding-top : 10px;
		padding-bottom : 0;
		float: none;
		width: 100%;
		margin-left: 0px;
	}
	
	.logo					/* clear logo */
	{
		display:none;
	}
	
	#nav
	{
		display: none;
	}
	
	#navI
	{
		display: block;
		width: 99%;
	}	
	#navI ul
	{
		margin-top: 0; margin-left: 10px;
		margin-bottom: 15px; margin-right: 0;
		text-align: left;
	}	
	#navI li
	{
		/* border: 1px solid black; */
		margin-bottom: 2px;
		display:block;		/* changed from inline to stack vertically */
		max-width :98%;
		min-width : 98%;
		width: 98%;
	}	
	#navI li a, .selected
	{
		display : block;	/* changed from inline to stack vertically */
		padding-top: 10px; padding-left: 10px;
		padding-bottom: 3px; padding-right: 0;
	}	
	
	#navI li a:hover
	{
		color: #555555;
	}
	
	#navI li.mobileListHide {display:none;}
	
	li#selected
	{
		display: none;
	}
	
	#lower
	{
		border: none;
		box-shadow: none;
		padding: 0;
	}

	.contents		/* contents redefined at 100% */
	{
		min-width : 100%;
		max-width : 100%;
		width : 100%;
	}
	
	.contents p 
	{ 
		margin : 0;
		text-align: left; 
		line-height: 140%;
		margin-bottom: 5px;
	}
}

		/* REDEFINITION FOR UPRIGHT MOBILES (MAX WIDTH 466px) */
		
@media screen and (max-width:466px)
{	
	.mobileOnly {display:block;}
	#mobileClear { display:block; clear:both;}	
	.mobileHide {display:none;}	
	#mobileList {display:block;}
	#listHide {display:none;}
	
	img.shrinkfit 
	{
		max-width:100%; 
		height: auto;
	}
	
	h1
	{	
		font: 200% "Assistant", sans serif;
		font-weight: 600;
		line-height: 110%;
		color: #274869;
	}
	
	#upper
	{
		padding-top: 0;	/* standoff */
	}
	
	#upperI
	{
		padding-top: 15px;	/* standoff */
	}
	
	#midleft 					/* clear logo */
	{
		background:url(../pics/LaceBackground.jpg) top left no-repeat;
		background-color: white; 
		border: 1px solid black;
		border: 3px solid black;
		border-style: double;
		padding-bottom: 15px;
	}

	#left 					/* make zero height*/
	{
		float: none;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	#middle
	{
		padding-top: 15px;	
	}
	
	#middleM
	{
		padding-top: 15px;	
	}
	
	.logo					/* clear logo */
	{
		display:none;
	}
	
	#nav
	{
		display: none;
	}
	
	#navI
	{
		border: solid black 1px;
	}
	
	#navI li a
	{
		display : block;	/* changed from inline to stack vertically */
		padding-top: 10px; padding-left: 10px;
		padding-bottom: 3px; padding-right: 0;	
		font: 120% "Assistant", sans serif;
		font-weight: 300;
		color: #244d76;
	}
	
	li#selected
	{
		display: none;
	}
	
	#lowerStrip
	{
		margin-left: 0;
		margin-right: 0;
	}
	
	#lsImage
	{
		float: none;
		padding-left: 0;
	}
	
	#footer
	{
		text-align: left; 
		line-height: 100%;
	}
}