@charset "UTF-8";
* {
	padding: 0;
	margin: 0;
}
body { 
	padding: .5em;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 15px;
	background: #ffffff url(../pics/bg_gradient.png) repeat-x 0px 0px;
	background: -webkit-linear-gradient(left, #909090, #fff); 		/* For Safari 5.1 to 6.0 */
	background: 	-o-linear-gradient(right, #909090, #fff); 		/* For Opera 11.1 to 12.0 */
	background:   -moz-linear-gradient(right, #909090, #fff); 		/* For Firefox 3.6 to 15 */
	background: 	linear-gradient(to right, #a9a9a9, #f8f8ff); 	/* Standard syntax */
	overflow: scroll;
}
header, nav, article, aside, section, footer {
    display: block;
}


/******************************************************************************
 *   Initialisierung und Definition fuer Flex-Bereich
 *****************************************************************************/
.wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
			flex-flow: row wrap;
	max-width: 980px;
	margin: 0 auto;
	padding: 0px;
	font-weight: normal;
	text-align: center;
}
.wrapper > * {
	padding: 0px;
	flex: 1 100%;	
}
#ci		 	{ }
.flexslider 	{ }
.ctrl 		{ background: DarkGreen; color: White; }
#main 		{ background: White; font-size: .875em; text-align: left; padding: 1.5em; }
.aside-1 	{ background-color: rgba(255,255,255,.6); }
.aside-2 	{ background-color: rgba(255,255,255,.8); border-left: 1px solid Gainsboro; display: none; }
#footer 	{ font-size: .75em; padding-top: .25em; }



/******************************************************************************
 *   Viewport Definition min 600px
 *****************************************************************************/
@media all and (min-width: 600px) {
	#main 		{ 
		  -webkit-flex: 1;
			  -ms-flex: 1;
				  flex: 1;
	}
	.aside	 	{ flex: 1 1 auto; }	
	.aside-1 	{ flex: 0 0 150px; }		
	.home 		{ display: none; }
	#footer 	{ display: flex; }
	.bottom 	{ padding-top: .5em; border-top: 0px solid snow; }
	.one 		{ flex: 1; text-align: left; padding-left: 1em; }
	.two 		{ display: none; flex: 0 0 210px; text-align: left; }
	.three 		{ flex: 1; }
	.caption 	{ font-size: .625em; }
}



/******************************************************************************
 *   Viewport Definition min 800px
 *****************************************************************************/
@media all and (min-width: 800px) {
	#main { flex: 1; }
	.topmenu { 
		-ms-flex-order: 1;
		 -webkit-order: 1;
				 order: 1;
	}
	#ci { 
		-ms-flex-order: 2;
		 -webkit-order: 2;
				 order: 2;
	}
	.flexslider { 
		-ms-flex-order: 3;
		 -webkit-order: 3;
				 order: 3;
	}
	.ctrl { 
		-ms-flex-order: 4;
		 -webkit-order: 4;
				 order: 4;
	}
	.aside-1 { 
		-ms-flex-order: 5;
		 -webkit-order: 5;
				 order: 5;
	}		
	#main { 
		-ms-flex-order: 6;
		 -webkit-order: 6;
				 order: 6;
	}	
	.aside-2 {
		  -webkit-flex: 0 0 150px;
			  -ms-flex: 0 0 150px;
				  flex: 0 0 150px;
		-ms-flex-order: 7;
		 -webkit-order: 7;
				 order: 7;
		display: block;
	}
	#footer {
		-ms-flex-order: 8;
		 -webkit-order: 8;
				 order: 8;
	}
	.caption { font-size: .75em; }
}
/*****************************************************************************/



/******************************************************************************
 *   Styles definieren
 *****************************************************************************/
header {
	width: 100%;
	float: left;
	border-bottom: 0px solid black;
}
.topmenu, #footer .three {
	text-align: right; padding: 0 2.5em .25em;	
	border: 0px dashed;
}
.topmenu a {
	font-size: .75em;
}
.flex-container {
	display: -webkit-flex;
	display: flex;
	height: 90px;
}
#ci { 
	background: linear-gradient(to left, #fff, #eee);
}
.phrase {
	  -webkit-flex: 1 1 auto;
		  -ms-flex: 1 1 auto;
			  flex: 1 1 auto;
	padding: 60px 0 5px 20px;
	color: Gray; 
	font-size: 1.125em; 
	font-weight: 500; 
	text-align: left;
	line-height: 1.2em;
}
.hopflogo {
	  -webkit-flex: 0 0 150px;
		  -ms-flex: 0 0 150px;
			  flex: 0 0 150px;
	margin-top: 20px;
	background: url(../pics/hopf_logo_large.gif);
	background-repeat: no-repeat; 
}
.hopflogo a {
	display: block;
	height: 60px;
}
#footer p { 
	display: none;
	padding-bottom: .5em;
}




/******************************************************************************
 *   Standard-Styles fuer Website
 *****************************************************************************/
td {	vertical-align: top; }
#main a { color: #0066ff; text-decoration: underline; }
#main a:hover { color: #0033ff; }
#main a:visited { color: #0066ff; }

.hopfstyle {
	font-family: Arial, Helvetica, Sans-Serif;
	font-weight: bold;
	font-style: italic;
	color: rgb(0, 204, 51);
	color: rgb(112, 181, 56);
	margin-right: 0.15em;
}
.greenico {
	margin-left: 0px;
	margin-top: 4px;
	list-style-image: url(../pics/squ-green.gif);
}
.basicon {
	margin-left: .0px;
	margin-top: 4px;
	list-style-image: url(../pics/ly_link_basis_normal.gif);
}
.pdficon {
	margin-left: .0px;
	margin-top: 4px;
	list-style-image: url(../pics/ly_link_basis_pdf.gif);
}
.txticon {
	margin-left: .0px;
	margin-top: 4px;
	list-style-image: url(../pics/ly_link_basis_txt.gif);
}
.xlsicon {
	margin-left: .0px;
	margin-top: 4px;
	list-style-image: url(../pics/ly_link_basis_xls.gif);
}
.zipicon {
	margin-left: .0px;
	margin-top: 4px;
	list-style-image: url(../pics/ly_link_basis_zip.gif);
}
.stpicon {
	margin-left: .0px;
	margin-top: 4px;
	list-style-image: url(../pics/ly_link_basis_3d.png);
}
.Trenner {
	clear: both;
	border-top: 1px solid #ccc;
	width: 100%;
	margin-top: 2.5em;
	margin-bottom: 1em;
	text-align: right;
}
.Trenner a {
	color: #888;
	font-size: .625em;
	margin-right: 2em;
}
.Hinweis { 
	color: Crimson; 
	font-size: .85em; 
	margin: 1em 0 2em;
}
.Bilder { margin: .5em 1.5em; }
.hideme { display: none; }
.partner { margin: .3em 1.2em .6em; min-height: 150px; border: 0px solid #ccc; }
.partner img { float: left; }
.igps { width: 80%; padding: 1% 10%; border: 0px solid; }
.idcf { width: 80%; padding: 1% 10%; border: 0px solid; }
/*
.partner {
	display: -webkit-flex;
	display: flex;
}
.partner img { 	  -webkit-flex: 0 0 150px;
		  -ms-flex: 0 0 150px;
			  flex: 0 0 150px; }
*/
/******************************************************************************
 *   Listenpunkte in den Hauptbereichen
 *****************************************************************************/
#main h1, #download h1 { 
	color: #787878; line-height: 1.2em; font-weight: 500; font-size: 1.350em; margin: 0.3em 0em .50em 0em;
}
#main h2 { 
	color: #606060; line-height: 1.2em; font-weight: 500; font-size: 1.288em; margin: 1.0em 0em .25em 0em;
}
#main h3 { 
	color: #484848; line-height: 1.2em; font-weight: 500; font-size: 1.225em; margin: 0.8em 0em .25em 0em;
}
#main h4 { 
	color: #303030; line-height: 1.2em; font-weight: 500; font-size: 1.163em; margin: 0.8em 0em .25em 0em;
}
#main ul { 
	margin: .75em 3em 1.25em;	
}
#main section ul {
	margin: 0em 3em 1.25em;	
}
#main ul li {
	margin-top: .25em; 
	list-style-type: square;
	font-size: 1.15em;
	color: darkslategray;
}
#main p { 
	margin: .25em 0 .5em 0; 
	text-align: justify; 
	line-height: 1.2em;
	font-size: 1.15em;
	color: darkslategray;
}
#main ol {
	text-align: justify; 
}



/******************************************************************************
 *   Tabellen mit Farbwechsel in den Zeilen
 *****************************************************************************/
table.change {
/* border-collapse: collapse;*/
	border-spacing: 1px;
	border: 0px solid #dddddd;
	margin: 0 1em;
}
table.change th {
	background-color: #aaa;
	text-align: left;
	padding: .25em .75em .15em;
	border-top: 15px solid white;
}
table.change td {
	text-align: left;
	padding: .15em .75em;
}
table.change tr:nth-child(odd) { background-color: gainsboro; }
table.change tr:nth-child(even) { background-color: whitesmoke; }



/******************************************************************************
 *   Style fuer Download Manuals
 *****************************************************************************/
#download h5 { 
	background: #757575;
	color: #fff; 
	border-bottom: 0px solid black;
	border-radius: 0px 0px 1px 0px;
	box-shadow: 2px 3px 3px #959595;
	font-size: .938em; 
	font-weight: 500; 
	line-height: 1.2em; 
	margin: 1.0em 0 .5em; padding: .3em 1.0em; 
}
#main ul.dl 	{ margin-left: 3.5em; }
#main ul.dl li 	{ list-style-image: url(../pics/ly_link_basis_pdf.gif); }
#main ul.dl a 	{ }
#main li.old a 	{ color: Silver; }



/******************************************************************************
 *   Config FlexSlider2
 *****************************************************************************/
.flexslider {
	background: rgba(196,196,196, 0.3);
	border-top: 1px solid #c8c8c8;
	border-right: 1px solid #c8c8c8;
	border-bottom: 1px solid #787878;
	border-left: 1px solid #787878;
	-webkit-border-radius: 0px;
	   -moz-border-radius: 0px;
			border-radius: 0px;
	max-width: 980px;
	margin-right: auto;
	margin-bottom: 0px; /* Abstand nach unten */
	margin-left: auto;
	max-height: 220px;
}
.caption {
	position: absolute;
	border-radius: 0px 0px 0px 0px;
	bottom: .5em;
	left: .5em;
	min-height: 0px;
	background: Black;
	background: White;
	color: White;
	color: Black;
	opacity: .575;
	font-family: Arial, Helvetica, sans-serif;	
	font-weight: 500;	
	text-align: left;
	line-height: 1.35em;
	padding: .5em 1em 1em;
}
.caption h4 { font-size: 1.125em; font-weight: bold; padding: .25em 0; }
.caption ul { padding-left: 1.2em; }
.flex-control-nav { }



/******************************************************************************
 *   Hauptsteuerung und Sub-Steuerung definieren
 *****************************************************************************/
.ctrl li {
	list-style: none;
	float: left;
}
.ctrl {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	font-size: .875em;
	background-color: rgba(0, 0, 0, .75); 
	background-color: #2E2E2E; 
	border-bottom: 0px solid #757575;
	padding: 0px 0px;
	width: 100%;
}
.ctrl > li {
	  -webkit-flex: 1;
		  -ms-flex: 1;
			  flex: 1 1 auto;
	border-right: 1px solid #ddd;	
}
.ctrl li > a {
	display: block;	
	text-decoration: none;
	text-transform: uppercase;
	font-weight: normal;
	border-left: 0px solid #fff;
	border-right: 0px solid #ddd;
	border-radius: 0px 0px 0px 0px;
	padding: .75em 1.5em;
}
.ctrl a {
	color: White;
	border-bottom: 1px dashed rgba(0, 0, 0, .0);
	}
.ctrl a:hover {
	background: White;
	color: Black;
	border-bottom: 1px dashed LightSlateGray;
}

.menue-button {
	display: none;
}		
#steuerung li {
	list-style: none;	
	border-bottom: 1px solid Gray;
}
#steuerung a {
	display: block;
	background-color: rgba(232,232,232,.815);
	color: DarkSlateGray;
	border-right: 1px dashed LightSlateGray;
	font-size: .75em;
	text-decoration: none;
	padding: 1.125em .0em;
}
#steuerung a:hover {
	background: White;
	color: Black;
}

#id10 li.cat1 a, #id11 li.cat1 a, #id12 li.cat1 a, #id13 li.cat1 a, #id14 li.cat1 a, 
#id15 li.cat1 a, #id16 li.cat1 a, #id17 li.cat1 a, #id18 li.cat1 a, 
#id20 li.cat2 a, #id21 li.cat2 a, #id22 li.cat2 a, #id23 li.cat2 a, #id24 li.cat2 a, 
#id25 li.cat2 a, #id26 li.cat2 a, 
#id30 li.cat3 a, #id31 li.cat3 a, #id32 li.cat3 a, #id33 li.cat3 a, #id34 li.cat3 a, 
#id35 li.cat3 a, #id36 li.cat3 a, #id37 li.cat3 a, #id38 li.cat3 a, #id39 li.cat3 a, 
#id40 li.cat4 a, #id41 li.cat4 a, #id42 li.cat4 a, #id43 li.cat4 a, #id44 li.cat4 a, 
#id45 li.cat4 a, #id55 li.cat5 a
{ 
	background-color: White; 
	color: Black;	
	font-weight: bold;
	border-bottom: 1px dashed LightSlateGray;
	border-top:    0px solid #2E2E2E;
	border-right:  0px solid #2E2E2E;
	border-left:   0px solid #2E2E2E;
	/*
	outline: 2px dashed;
	background-color: rgba(128,128,128,.5); 
	color: White;	
	box-shadow: inset -2px 2px 5px #fff;
	border-radius: 5px 5px 0px 0px;
	*/
}

#id10 li.subcat0 a, #id11 li.subcat1 a, #id12 li.subcat2 a, #id13 li.subcat3 a, #id14 li.subcat4 a, 
#id15 li.subcat5 a, #id16 li.subcat6 a, #id17 li.subcat7 a, #id18 li.subcat8 a, 
#id20 li.subcat0 a, #id21 li.subcat1 a, #id22 li.subcat2 a, #id23 li.subcat3 a, #id24 li.subcat4 a, 
#id25 li.subcat5 a, #id26 li.subcat6 a, 
#id30 li.subcat0 a, #id31 li.subcat1 a, #id32 li.subcat2 a, #id33 li.subcat3 a, #id34 li.subcat4 a, 
#id35 li.subcat5 a, #id36 li.subcat6 a, #id37 li.subcat7 a, #id38 li.subcat8 a, #id39 li.subcat9 a, 
#id40 li.subcat0 a, #id41 li.subcat1 a, #id42 li.subcat2 a, #id43 li.subcat3 a, #id44 li.subcat4 a, 
#id45 li.subcat5 a, #id46 li.subcat6 a
{   
   background: White; 
   color: Black;
   font-weight: bold;
   border-top: 		0px solid LightSlateGray;
   border-right: 	3px solid White;
   border-bottom: 	0px solid DarkSlateGray;
   border-left: 	6px solid #2E2E2E;
}





/******************************************************************************
 *   Sub-Steuerung fuer kleine Viewports definieren
 *****************************************************************************/
@media only screen and (max-width:600px) {
	body { 
		padding: 1em .2em;
		font-size: .875em;
	}
	#main { padding: .5em; }
	.flex-container { height: 60px; border: 0px dashed red; }
	.phrase {	
		padding: 36px 0 5px 5px;
		font-size: .75em;	
	}
	.hopflogo {
		  -webkit-flex: 0 0 100px;
			  -ms-flex: 0 0 100px;
				  flex: 0 0 100px;
		margin-top: 8px;
		background-image: url(../pics/hopf_logo_small.gif);
		background-repeat: no-repeat; 
	}
	.caption { 
		bottom: 1em;
		left: 1em;
		font-size: .625em; 
		padding: .5em 1em;
	}
	.caption h4 		{ padding: 0; }
	.short ul		{ display: none; }
	.ctrl 			{ font-size: .625em; }
	.menue-button 	{ display: block; }
	.menue-button {
		display: block;
		position: absolute;
		left: 6px;
		top: 6px;
		padding: .2em .5em;
		background-color: rgb(0, 204, 51);
		background-color: rgb(112, 181, 56);
		color: White;
		cursor: pointer;
		text-decoration: none;
	}	
	.menue-button:hover {
		color: Black;
		background: LightGray;
	}
	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}	
	#steuerung li {
		width: 100%;
		border-bottom: 1px solid Gray;
	}
	#steuerung li > a {
		display: block;
		color: DarkSlateGray;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: normal;
		padding: .35em 1.5em;
	}	
}

/******************************************************************************
 *   Symbol fuer Steuerung fuer kleine Viewports definieren
 *****************************************************************************/
#subnav:target #steuerung {
	display: block;		/* Steuerung einblenden  */
}
#subnav:target .menue-button-beschr-open {
	display: none ; 	/* Steuerung ausblenden  */
}



/******************************************************************************
 *   Initialisierung und Definition fuer rechte Infobar
 *****************************************************************************/
#infobar {
	  -webkit-flex: 0;
		  -ms-flex: 0;
			  flex: 0 0 140px;
	-ms-flex-order: 3;
	 -webkit-order: 3;
			 order: 3;
	background-color: rgba(255,255,255,.8); 
	border-left: 1px solid #aaa; 
	padding: 15px 0 0 5px;
}
.info img {
	border: 1px solid silver; /* Rahmen um Bilder */
	box-shadow: 2px 3px 3px #959595;
	border-radius: 5px;  
	margin-top: 8px;
	width: 130px;
}
td 			{ vertical-align: top; }
a 			{ color: DarkSlateGray; text-decoration: none; }
a:hover 		{ color: LightSlateGray; } 


/******************************************************************************
 *   Definition fuer Reihen und Spalten
 *****************************************************************************/
.flexrow {
	display: -webkit-box;	
	display: -moz-box;		
	display: -ms-flexbox;	
	display: -webkit-flex;
	display: flex;			
	
	-webkit-flex-direction: row;
			flex-direction: row;
	-webkit-flex-wrap: wrap;	/* Safari 6.1+ */
			flex-wrap: wrap;	/* Breite behalten und Zeile automatisch umbrechen */
			justify-content: flex-start;
/*	 		.vorne 		{ justify-content: flex-start; }
			.mittig 	{ justify-content: center; }
			.verteilt1 	{ justify-content: space-between; }
			.verteilt2 	{ justify-content: space-around; } */
}
.flexcol {
	display: -webkit-box;	
	display: -moz-box;		
	display: -ms-flexbox;	
	display: -webkit-flex;
	display: flex;			

	-webkit-flex-direction: column;
			flex-direction: column;
}


/******************************************************************************
 *   Style fuer Sortiment Uebersicht
 *****************************************************************************/
#main .range, #main .fb {
	display: block;
	width: 235px;
	border: 1px solid #999;
	background: White;	
	/*
	background: linear-gradient(to top, #71b538, #ffffff); 
	background: linear-gradient(to top, #b0e0e6, #ffffff);
	*/
	box-shadow: inset -2px -2px 10px #ccc;
	text-align: center;
	margin: 1.2em .5em;
	/*
	*/
}
#main .range a {
	display: block;
	width: 235px; height: 100%;
	min-height: 60px;
	border: 0px solid red;
	text-decoration: none;
	text-align: center;
	margin: 0; padding: 0 0px 0px;
}
#main .range a:hover { 
	background-color: rgba(128, 128, 128,.2);
}
#main .range img {
	border: 0px solid;
	margin: 1em 0 0;
}
#main .range ul.box {
	margin: 1em .5em 1em 2em; padding: 0;
}
#main .range ul.box li {
	margin: 0; padding: 0;
	text-align: left;
	font-size: .875em;
	line-height: 1.2em;
	color: dimgray;
}
#main .range p { text-align: center; padding: .25em 0 1.5em;  }


/******************************************************************************
 *   Style fuer Support-Form
 *****************************************************************************/
dl { margin: 0 0em 3em; }
dt { font-weight: bold; margin-top: 1.2em; }


/******************************************************************************
 *   Style fuer Druckausgabe ?
 *****************************************************************************/
@media print {
	#footer .two {
		
	}
}