@charset "utf-8";
/* CSS Document */
*  { box-sizing: border-box;}

			body
			{
				background-image:url(../img/Sternhimmel.png);
				background-repeat:no-repeat;
				background-size: 100%;
				margin:auto;
				opacity: 1.0;
			}
		
			#eBookReader            /* Kindelement von  body */
			{
				background-color: #AAAAAA;
				background-image: radial-gradient(#FFFFFF, #AAAAAA);
				width: 1000px;
				/*height: 500px;  */
				margin: auto; 
				padding-top:  10px;
				/*border: solid 3px;*/
				border-radius: 20px;
				padding-bottom: 20px;
				position:relative;
			} 
			
			
			#eBookDisplay                                     /*  Kindelement von  #ebookReader, Geschwisterelement von #soundbar_mit_Bedieneinheit, kein Elternelement von irgend wem */
			{																/*  #eBookDisplay  soll mittig zum Elterelement ausgerichtet sein, Hoehe muss aber definiert werden */  
				background-color:rgba(62,241,144,1.00); 
				color: #5F6B1A;
				width: 	700px;
				height: 550px;
				margin: auto; 									/* richtet Element zentriert gegenüber den Elterncontainer aus */
				margin-top: 5px; 
				border: solid 1px ;
				border-radius: 10px;
				margin-bottom: 5px;
				overflow:auto; 
			}
			
			 .notiz_Metapher  														/* enthält alle Notizzettelayout Informationen bis auf die Bilder selbst und ihre Ausrichtung*/
			{
				background-image:url(../img/Metapher_abgerissener_Notizblockzettel_2_nachbearbeitet.png);
				background-repeat:no-repeat;
				background-size: 100%;
				color:rgba(0,0,0,0.00);
				font-family: ;
				font-size: 16px;
				width: 200px;
				height: 200px;
				position:absolute;
			}
			.notiz_Metapher a
			{
				color:rgba(0,0,0,1.0);
				position:absolute;
				top: 90px;
				left: 22px;
			}

		/*	.format_notiz_schrift
			{
				font-size: 16px;
			}
			*/
/*---------------------------------------------------------------------------------------------------------------------------- Anfang: Bereich der einzelnen Notizzettel  spezifisch sind nur die  Drehungen und der hover-effekt-----------------------------------------------------*/			
			#computerfrust
			{
				transform:rotate(10deg);
				top: 60px;
				left: -80px;
			}
			
			#computerfrust:hover
			{
				transform:rotate(15deg);
				top: 60px;
				left: -80px;
			}
			
			#platine
			{
				transform:rotate(-12deg);
				top: 230px;
				left: -60px;
			}
			
			#platine:hover
			{
				transform:rotate(-17deg);
				top: 230px;
				left: -60px;
			}
			
			
			#astro
			{
				transform:rotate(13deg);
				top: 621px;
				left: 98px;
			}
			
			#astro:hover
			{
				transform:rotate(8deg);
				top: 621px;
				left: 98px;
			}
			
			#kontakt
			{
				transform:rotate(-4deg);
				top: 43px;
				left: 848px;
			}
			
			#kontakt:hover
			{
				transform:rotate(1deg);
				top: 43px;
				left: 848px;
			}
			
			#info
			{
				transform:rotate(16deg);
				top: 255px;
				left: 841px;
			}
			
			#info:hover
			{
				transform:rotate(21deg);
				top: 255px;
				left: 841px;
			}
			
			#login
			{
				transform:rotate(-16deg);
				top: 615px;
				left: 741px;
			}
			
			#login:hover
			{
				transform:rotate(-11deg);
				top: 615px;
				left: 741px;
			}
			
			/*---------------------------------------------------------------------------------------------------------------------------- Ende: Bereich der einzelnen Notizzettel  spezifisch sind nur die  Drehungen und der hover-effekt-----------------------------------------------------*/	
			
			
			#content
			{
				/*background-color:rgba(87,247,75,1.00); */
				color: #000;
				padding: 20px;
			}
			
			#soundbar_mit_Bedieneinheit    /* Kindelement von #eBookReader , Geschwisterelement von #eBookDisplay */
			{
				/*background-color: #AABB00; */
				width:  100%;
				text-align:center;
				display: inline-block;
			}
			
			h1
			{
				/*background-color: #FF0000; */
				font-family:"Arial Black";
				text-align: center;
				color:#FFF;
			}
			
			#LautsprecherDummyLinks, #LautsprecherDummyRechts    /*  Kindelement von  #soundbar_mit_Bedieneinheit, kein Elternelement von irgend wem*/
			{
				background-image:radial-gradient(#FFFFFF, #AAAAAA);
				color: rgba(0,0,0,0.3);
				border-radius: 30px;
				width:  50px;
				height: 50px;
				text-align: center;
				font-size: 24px;
				line-height: 6px;
				padding-top:  0px;
				margin-left: 10px;
			}
			
			#LautsprecherDummyLinks
			{   /*display:inline;*/
				float: left;
				margin-right: 10px;
			}
			
			#LautsprecherDummyRechts
			{   /*display:inline;*/
				float: right;
				margin-right: 10px;
			}
			
			#homebutton
			{
				background-color:rgba(251,122,238,1.00);
				background-image:radial-gradient(#FFF, #777);
				
				text-align: center;
				line-height:  30px;
				font-size: 10px;
				width: 50px;										
				height: 50px; 						/* Containerhoehen  werden entweder explizit angeben oder durch die Hoehe des Elternelement bzw. einem margin zu ihnen  definiert*/
				padding-top: 10px;
				padding-bottom: 10px;
				border-radius: 25px;         /*  *//* Ein runder Button wird nur möglich  wenn der Schriftcontainer nicht die Kontur mitlayoutet., d.h. die geraden Seiten des Schriftcontainer  bleiben bestehen.   */
				display: inline-block;
				
			}
			
			#homebutton:hover
			{
				background-image:radial-gradient(#888, #FFF);
			}
			
			a{ text-decoration: none; }
			
		   /* #notiz
			{
				transform: rotate(5deg);
				position: absolute -123px;
				display:inline-block;
			} */
			
			ul 														/* Verwendung in "teaser_computerfrust und teaser_platinen" */
			{
				/*background-color: #00FF00;*/
				/*text-align:center;*/ 
				/*padding-left: 550px; */
				margin: auto;
			}
			
			li                                                             /* Verwendung in "teaser_computerfrust und teaser_platinen" */
			{
				/*background-color: #FF0000;*/
				/*display:inline; */
				/*list-style-type: none;  */
			} 
			
		
		   #versenden_button_leiste
		   { 
		       width:auto;
		       text-align:center;
		   }
		   
		   .Bg_Color_geradeTabs
		   {
			   background-color:#777;
			   color:#000;
		   }
		   
		    .Bg_Color_ungeradeTabs
			{
				background-color:#AAA;
				color:#EEE; 
			}
			
			h2
			{ 
				text-align:center
			}
			
			/*#Einleitungstext
			{
				width:100px;
				height: 100px;
			} */
			
			#buchcover
			{
				 float:left;
				 margin: 20px 10px 10px 5px;
			}
			
			/*
			#impr_agb
			{
				margin:auto;
				position:relative;
				display:inline;
			}
			*/
			
			#copyright
			{
				/*background-color: #AB0055;*/
				text-align:center;
				color:#FFF;
			}