/* ---------------------------------------------------------------- */
/*
Im Internet sollte man sich auf die serifenlosen Schriften "Arial", "Helvetica" und "Courier" beschränken.
("Courier" sieht meines Erachtens als Internetschrift nicht gut aus.)
Serifenschriften wie "Times Roman" eignen sich nicht fürs Web.
*/
/* body ----------------------------------------------------------- */
body.eee_i
	{
         background-color:	#cccccc;
         color:		#000000;
	/*font-family:	"Arial, Helvetica, Verdana, Times New Roman";*/
	font-family:	"Arial";
	font-size:	14px;
         line-height: 	120%;
         margin-top:	80px;
         margin-right:	10px;
         margin-bottom:	10px;
         margin-left:	10px;
         padding:	0px;
         text-align:	justify;
	scrollbar-3dlight-color:	#cccccc;
	scrollbar-arrow-color:	#bbbbbb;
         scrollbar-base-color:	#cccccc;
         scrollbar-dark-shadow-color:	#cccccc;
         scrollbar-face-color:	#bbbbbb;
         scrollbar-highlight-color:	#cccccc;
         scrollbar-shadow-color:	#cccccc;
         scrollbar-track-color:	#cccccc;
         }
/* a -------------------------------------------------------------- */
/* a Reihenfolge nach CSS-Standard: link, visited, focus, hover, active -- */
.eee_i a
	{
	text-align:	left;
         }
.eee_i a:link
	{
         border-width:	0px;
         color:		blue;
         padding:	0px;
         text-decoration:	underline;
         }
.eee_i a:visited
	{
         border-width:	0px;
         color:		#333333;
         text-decoration:	underline;
         }
.eee_i a:hover
	{
         background-color:	#bbbbbb;
         border-width:	0px;
         color:		#000000;
         padding-bottom:	0px;
         padding-left:	0px;
         padding-right:	0px;
         padding-top:	0px;
         text-decoration:	none;
         text-decoration:	underline;
         }
.eee_i a:hover .gross
        {
        height:		320px;
        width:		428px;
/*
Die positions-Angabe (position: absolute; top: 120px; right: 20px; verschiebt das Bild auf eine andere Position. Dadurch liegt der Cursor nicht mehr auf dem Bild. Die Folge ist ein dauernder Wechsel des Bildes zwischen "normaler Position" und "hoover-Position".
        position: 	absolute;
        top: 		120px;
        right: 		20px;
*/
        }
.eee_i a:active
	{
         background-color:	#bbbbbb;
         border-width:	0px;
         color:		#000000;
         text-decoration:	underline;
         }
/* article    ----------------------------------------------------- */
/* article    ------ s. https://gradients.cssgears.com/ ----------- */
article
	{
         padding-right:	10px;
         padding-left:	10px;
         }
article:nth-of-type(even)
        {
/*         border-right:   	4px solid yellow;	*/
	background: 	linear-gradient(
         		rgba(200,200,200,1) 10%,
         		rgba(170,170,170,1) 100%);
         }
article:nth-of-type(odd)
        {
/*         border-right:   	4px solid red;	*/
	background: 	linear-gradient(
         		rgba(200,200,200,1) 10%,
         		rgba(170,170,170,1) 100%);
         }
/* blockquote ----------------------------------------------------- */
.eee_i blockquote
	{
         border:  	solid 1px black;
         border-radius: 	10px;
         box-shadow: 	5px 5px 5px 5px rgba(33, 66, 99, 0.1);
         margin-top:	10px;
         margin-right:	0px;
         margin-bottom:	5px;
         margin-left:	0px;
	padding:	20px;
         position:	relative;
         }

.eee_i blockquote::before
	{
         content:"... Zitat, Cita, Citation, Citazione, Quotation ... \A ---------------------------------------------------------------------";
         display: block;
         text-align: center;
	white-space: pre;
         }
.eee_i blockquote::after
	{
         content:"--------------------------------------------------------------------- \A ... Zitat, Cita, Citation, Citazione, Quotation ...";
         display: block;
         text-align: center;
	white-space: pre;
         }

/* section ----------------------------------------------------- */
.eee_i section.rose,
.eee_i section.land
	{
         border:  	solid 1px black;
         border-radius: 	10px;
         box-shadow: 	5px 5px 5px 5px rgba(33, 66, 99, 0.1);
         margin-top:	10px;
         margin-right:	0px;
         margin-bottom:	5px;
         margin-left:	0px;
	padding:	5px;
         position:	relative;
         }

.eee_i section.rose::before
	{
         content:"... Rosen-Steckbrief ... \A (Angaben ohne Gewähr) \A ---------------------------------------------------------------------";
         display: block;
         text-align: center;
	white-space: pre;
         }
.eee_i section.rose::after
	{
         content:"--------------------------------------------------------------------- \A ... Rosen-Steckbrief ...";
         display: block;
         text-align: center;
	white-space: pre;
         }

.eee_i section.land::before
	{
         content:"... Länderbezeichnumgen ... \A (Angaben ohne Gewähr) \A ---------------------------------------------------------------------";
         display: block;
         text-align: center;
	white-space: pre;
         }
.eee_i section.land::after
	{
         content:"--------------------------------------------------------------------- \A ... Länderbezeichnumgen ...";
         display: block;
         text-align: center;
	white-space: pre;
         }

/* ---------------------------------------------------------------- */
/* crossfader */
/* ---------------------------------------------------------------- */
.eee_i div.cf_wrapper
	{
  	position: 	absolute;
  	top: 		70px;
  	left: 		20px;
  	bottom: 	20px;
	}
.eee_i div.cf_element
	{
	width: 		400px;
	background-color: 	#eeeeee;
	border: 	1px solid #cccccc;
	}
.eee_i div.cf_element div.content
	{
	padding: 	10px;
	}
.eee_i div.cf_element div.content h3
	{
	padding-top: 	0;
	margin-top: 	0;
	}
/* div ------------------------------------------------------------ */
.eee_i div.brilli-eee,
.eee_i div.brilli-0-3,
.eee_i div.brilli-4-7,
.eee_i div.brilli-8-b,
.eee_i div.brilli-c-f,
.eee_i div.brilli-ygbr1,
.eee_i div.brilli-ygbr2
	{
	border-style:	solid;
	border-width:	10px;
	float:		left;
	height:		0px;
	line-height:	0px;
	margin-left:	10px;
	margin-right:	10px;
	width:		0px;
         }
.eee_i div.brilli-eee   {border-color:	#bbbbbb #333333 #eeeeee #cccccc;}
.eee_i div.brilli-0-3   {border-color:	#000000 #111111 #222222 #333333;}
.eee_i div.brilli-4-7   {border-color:	#444444 #555555 #666666 #777777;}
.eee_i div.brilli-8-b   {border-color:	#888888 #999999 #aaaaaa #bbbbbb;}
.eee_i div.brilli-c-f   {border-color:	#cccccc #dddddd #eeeeee #ffffff;}
.eee_i div.brilli-ygbr1 {border-color:	yellow green blue red;}
.eee_i div.brilli-ygbr2 {border-color:	#ffff00 #00ff00 #0000ff #ff0000;}

.eee_i div.float-left
	{
	float:		left;
         }
/* footer --------------------------------------------------------- */
.eee_i footer.eee_i
	{
         border:		dashed 5px #bbbbbb;
         border-radius: 	10px;
         box-shadow: 	5px 5px 5px 5px rgba(33, 66, 99, 0.1);
         margin-top:	10px;
         margin-right:	0px;
         margin-bottom:	5px;
         margin-left:	0px;
	padding:	20px;
         position:	relative;
         }
/* frame ---------------------------------------------------------- */
.eee_i frame
	{
         border-color: 	#cccccc;
         border-style: 	groove;
         border-width: 	0px;
         }
/* h1 ------------------------------------------------------------- */
.eee_i h1, .eee_i h2, .eee_i h3
	{
       	background-color:	#bbbbbb;
         border-left: 	4px solid #dddddd;
         border-top: 	4px solid #dddddd;
         border-right: 	4px solid #aaaaaa;
         border-bottom: 	4px solid #aaaaaa;
         line-height: 	120%;
         margin-top:	20px;
         margin-right:	0px;
         margin-bottom:	10px;
         margin-left:	0px;
         text-align:	left;
         }
.eee_i h1
	{
	font-size:	18px;
         margin-top:	100px;
	padding:	18px;
         }
.eee_i h2
	{
         font-size: 	16px;
	padding:	16px;
         }
.eee_i h3
	{
         font-size: 	14px;
	padding:	14px;
         }
/* img ------------------------------------------------------------ */
.eee_i img.ro
	{
         border-width:	0px;
         height:		96px;
         width:		128px;
         margin:		0px;
         }
/* @media print --------------------------------------------------- */
@page
	{
         margin:		2cm 1.5cm;
         size:		210mm 297mm;
         }
h1, h2, h3
	{
         page-break-after:	avoid;
         }
blockquote
	{
         orphans:	3;
         page-break-after:	avoid;
         widow:		3;
         }
/* ---------------------------------------------------------------- */
.eee_i table.font-size-18
	{
	font-size:	18px;
         line-height: 	150%;
         }
.eee_i table.font-size-36
	{
	font-size:	36px;
         line-height: 	150%;
         }
/* zu .eee_i section.rose ----------------------------------------- */
.rose table
	{
         border:  	solid 1px black;
         border-spacing:	0px;
         border-collapse:	collapse;
         }
.rose td
	{
         border:		solid 1px black;
	padding:	4px;
         }
.rose img
	{
         border-width:	0px;
         height:		96px;
         width:		128px;
         margin:		0px;
         }
.rose img:hover
        {
        height:		320px;
        width:		428px;
        }
.rose td.ro00, td.ro10, td.ro20, td.ro30, td.ro40, td.ro50, td.ro60, td.ro70, td.ro80, td.ro90, td.ro99
        {
        background-color:	#aaaaaa;
        }
/* zu .eee_i section.land ----------------------------------------- */
.land table
	{
         border:  	solid 1px black;
         border-spacing:	0px;
         border-collapse:	collapse;
         }
.land td
	{
         border:		solid 1px black;
	padding:	4px;
         }
/* zu .eee_i section.land ----------------------------------------- */
.wort table
	{
         border:  	solid 1px black;
         border-spacing:	0px;
         border-collapse:	collapse;
         }
.wort td
	{
         border:		solid 1px black;
	padding:	4px;
         text-align:	left;
         vertical-align: 	top;
         }
/* ---------------------------------------------------------------- */
.columns3
	{
    	column-count: 3;
    	column-gap: 50px;
    	column-rule: 15px outset #00ffff;
	}