/*  =========================================================
Stylesheet für die Übungsseiten aus dem Buch "Little Boxes" 
Stand:  Ende Kap. 07 - nach der Sortierung 
Datei:  bildschirm.css
Datum:  21. Januar 2007
Autor:  Peter Müller 
Aufbau  1. Kalibrierung und allgemeine Styles 
        2. Styles für Layoutbereiche    
        3. Sonstige Styles 
========================================================== */

/* ====================================== 
   1. Kalibrierung und allgemeine Styles 
   ====================================== */

/* Kalibrierung der wichtigsten Abstände */
*  { padding: 0; margin: 0; }

/* Kalibrierung der wichtigsten Abstände */
*  { padding: 0; margin: 0; }

/* Small screen / tablet / 760px to 991px */
@media (max-width: 991px) {
  ...
}

/* Smaller screen / tablet+phone / 480px to 759px */
@media (max-width: 759px) {
  ...
}

/* Extra small screen / smartphone / 280px to 479px */
@media (max-width: 479px) {

}


h2, p, ul, ol { 
margin-bottom: 1em; 
}  
ul ul { margin-bottom: 0; } 
li { margin-left: 1em; }
ul  {
	list-style-type:none
	
} 

/* Allgemeine Selektoren */

img {
margin-right: 20px;
border-width: ; 
border-color: ;
}

html { height: 101%; } /* erzwingt Scrollbar im Firefox */




body { 
   color: #CCCCFF; 
   background: url(../img/.jpg)no-repeat;
   background-position: right center;
	
   background-color: #120606; 
   background-size:75%;
   text-align:left;
	padding-left:50px;
	
	font: 70% Calibri ;
	font-size: 1.15em;
	color: #F6FAFB;

}

p.flex-item {
	font-weight: ;
	text-align: left;
	font: 70% Calibri ;
	font-size: 1.15em;
	color: #F6FAFB;
}



/* Farbtabelle background  http://html-color-codes.info/webfarben_hexcodes/

#120606
   background:url(../img/matthias2_red.jpg)no-repeat;

body {
 background-image: url(../img/matthias2_red.jpg);
 background-color: #cccccc;
}

*/




html>body {
   font: 14px Arial Nova, Arial;
   
}

h1 { 
	font-size: 3.3em;
	margin:0px 0px 0px;
   float:;
 } 
h2 { 
	font-size: 3.3em; 
	font-style:  Arial Nova, Arial;
	margin:;
	text-align:center;
	color:#6e6565;
	


}

h3 
{ font-size: 2.5em; }

h4 
{ font-size: 1.5em; 
  text-align:center;
}

/* Hyperlinks */
a:{ 
text-decoration: none; 
outline: none; 
border-bottom: none} 

a:link { color:#fcfafa;
text-decoration: none; 
outline: none; 
border-bottom: none } 

a:visited { color: white;
text-decoration: none; 
outline: none; 
border-bottom: none }

a:hover, 
a:focus { 
color:#ffffff;
text-decoration: none; 
outline: none; 
border-bottom: none
  
}

a:active { 
   color: white ;
   text-decoration: none; 
outline: none; 
border-bottom: none
}

blockquote
{
   font-style:italic;
   color:#CFCFCF;
   padding-left:20px;
}




/* Allgemeine Klassen und IDs 

.border 
{ 
border-width: 1px; border-color: red; border-style: solid;
}


*/
.flex-container {
	display: flex;
}

.flex-item {
	border: ;
	border-radius: ;
	margin: ;
	padding: ;
	background: ;
}

.flex-item foto {
	border: white;
	border-radius: ;
	margin: ;
	padding: ;
	background: ;
	position: relative;
bottom: 0px;
}

p.flex-item {
	font-weight: ;
	text-align: left;
	font: 70% Calibri ;
	font-size: 1.15em;
	color: #F6FAFB;
}


.besetzung
{
	padding-left: 10px;
	font-size: 0.9em;
	background-color:; 
	border: 1px dotted #333333;
	font-style:;
	color:#CFCFCF ;
	
}

.cite{
	text-align: right;
	font-size: 0.8em;
}


/* ==================================== 
   2. Styles für die  Layoutbereiche 
   ==================================== */

#text{
	float: right;
	font: 70% Calibri ;
	text-align: left;
	width: 700px;
	padding-top: 50px;
	padding-right: 650px;

	font-size: 1.15em;
	color: #F6FAFB;
 }

#navi{
	font-size:0.43em;
	float: left;
	
	padding-left:100px; 
	padding-top: 80px;
	
	text-align:right;  
	
   
}
   
#wrapper { /* Das HTML-Element mit dem Attribut id="wrapper" */
   color: ; 
   background-color: ; 
   width: px; /* Breite des Inhaltsbereiches */   
   margin: 10px auto;
   overflow:hidden;
}

#history{
	font: 70% Calibri ;
	float:left;
	text-align:top ;
	width: 636px;
	padding-top: 50px;
	margin-left: 20px;
	font-size: 1.15em;
	float: ;
	color:  white;
 }




table {
   
   font-size:;
   color: white; 
   line-height:;
   padding-top:px;
   margin-bottom: ;
   margin-left:16px ;
   padding: 
   
}

 table.center {
    margin-left:auto; 
    margin-right:auto;
	margin-top:auto; 
    margin-bottom:auto;
	
  }
  
  


caption {
	text-align: left;
	margin-top: 1em;
	margin-left: 270px;
	padding-top: 1em;
	padding-bottom: 1.3em;
	
   font-size:2em;
   
}



tbody td{
	vertical-align: top;
	padding: 2px 5px;
}


 
/* Ende vollständiges layout */
 



#background{
   background:url(../img/eee.jpg) no-repeat;
}

#kontakt{
	text-align: left;
	position:relative; 
	left:40px; 
	top: 5px;
	
 }


 
 
/* ======================================= 
   E N D E   D E S   S T Y L E S H E E T S 
   ======================================= */















/*  

color:#FEAFAF;


body {
	background-color:#000000;
	color:#CCCCFF;
	font-family: Verdana,  Arial, Helvetica, sans-serif;
	background:url(../img/e.jpg) no-repeat; 
}

* {
	font-size: 14px;
	margin: 0px;
	padding: 0px;
}

*{
   margin:0px;
   padding:0px;
}

div{
	border:;
	padding:5px;
}

ul  {
	list-style-type:none
	
}

#navigation .innen,
#banner,
#wrapper,
#footer div{
	width:950px;
}






body{
   
   
   background:#000000;
   font:62,5%  Andalus, "Times New Roman","Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
}




html>body {
   font: 12px Andalus,  "Times New Roman", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
}

*/
/*
p {
   
   text-align: left;
   font-size:1em;
   line-height:1.5em;
   margin-top: 0.5em;
   margin-bottom: 1.5em;
   margin-right: em
   padding-right: 5px
}



table {
   
   font-size:1em;
   line-height:1.5em;
   margin-top: 1.5em;
   margin-bottom: 1.5em;
   margin-left: 1em;
   padding: 0px
   
}

caption {
	text-align: left;
	margin-top: 4.5em;
	padding-top: 2em;
	padding-bottom: 2em;
	
   font-size:1.5em;
   
}



tbody td{
	vertical-align: top;
	padding: 2px 5px;
}

a:visited{
   padding-right:20px;
   }

a,
a:link{
   color:#99ccff;
   text-decoration:none;
}

a:focus,
a:active{
   color:#FF9966  ;
   text-decoration:none;
}

a:hover{
   color:#FFFFCC;
   text-decoration:none;
}

h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited{
		padding-right:0px;
}

h1,h2,h3,h4,h5,h6{
   color:#CCCCFF;
}

h1{
   margin:8px 0px 6px;
   float:left;
   font-size:3.5em;
   font-family: Andalus, Garamond, "Arabic Typesetting", "Times New Roman", Arial, Helvetica, sans-serif;
   border: ;
   2.7em;
}

h1 a,
h1 a:link,
h1 a:hover{
   color:;
   text-decoration:none;
}

h2{
   font-size:2.0em;
   font-family: Andalus, "Arabic Typesetting", Garamond, "Times New Roman", Arial, Helvetica, sans-serif;
   font-style: normal
   2em;
}
h3{
   font-size:1.5em;
   font-family: Andalus, "Arabic Typesetting", Garamond, Arial, Helvetica, sans-serif;
}
h4,h5,h6{
   font-size:1.2em;
}
h5,h6{
   font-weight:normal;
}
h5{
   font-style:;
}

img{
   border:0px;
   float: right;
}

ul,ol,dd{
   padding-left:2em;
   line-height:2em;
   margin:1.5em 6em;
   
}



blockquote{
   font-style:italic;
   color:#909090;
   padding-left:20px;
}
cite{
	display:block;
	font-weight:bold;
}

 */
/* Hilfsklassen
.left
.right




.hidden{
   display:none;
}

.instrumentarium{
	padding-left: 10px;
	font-size: 0.9em;
	background-color:; 
	
	font-style:italic;
	color:#999996 ;
	
}

.boxen{
	padding-left: 10px;
	font-size: 0.9em;
	background-color:; 
	border: ;
	font-style:andalus;
	color:#999996 ;
	margin-left: 25px;
	margin-bottom: 20px;
	width: 150px
}

.links{
	margin-left: px;
	font-size: em;
	line-height: 0.4em;
	
}

.min{
	min-width: 140px;
}

.fotovermerk{
	vertical-align: top;
	text-align: right;
	padding-top: 0px;
	font-size: 0.7em;
	line-height: 0.2em; 
	border: ;
	font-style:;
	color:#999999 ;
	margin-left: ;
	margin-bottom: ;
	width: ;
}

.cite{
	text-align: right;
	font-size: 0.8em;
}


dd {
	font-size: 1em;
	padding-left: 20px;
	padding-bottom: 15px;
}


*/
/* Layout 
#navi{
	font-size:0.8em;
	position:absolute; 
	left:640px; 
	top: 80px;
	height:200px;
	width:600px;
	
	padding-left: 8px;
	padding-top: 2px;
	padding-bottom: 2px;


   
}






#img{
	position:absolute; 
	left:20px; 
	top:140px;
	height:540px;
	width:720px;
}

#img2{
	position:absolute; 
	right:20px; 
	top:140px;
	height:540px;
	width:720px;
}

<div id="Layer1" style="position:absolute; left:140px; top:100px; width:140px; height:200px; z-index:1"></div>
<div id="Layer2" style="position:absolute; left:300px; top:100px; width:140px; height:200px; z-index:1"></div>
left:800px; top:100px; width:140px; height:200px;
left:100px; top:20px; width:140px; height:200px;
left:800px; bottom:600px; 
	padding-left: 8px;
	padding-top: 2px;
	padding-bottom: 2px;
position:relative; left:60px; top:60px; width:800px; height:400px;
position:relative; 
	float:right;
	width:600px;



*/



















/* Layout 

#navigation{
   font-size:1.4em;
   background:#000000
}

#navigation .innen{
   width:950px;
   margin:0px auto;
   padding-bottom:15px;
   overflow:hidden;
}

#navigation ul{
   padding:0px 2px 0px 0px; /* Innenabstand rechts 2px, sonst 0px */
   /* 
   margin:0px;
   float:right;
   list-style-type:none;
}

#navigation li,
#navigation li.active{
   float:left;
}




#navigation li a{
   display:block;
   text-decoration:none;
   font-weight:bold;
   margin:0px 0px 0px 2px; /* für Rand von li*/
    /* 
   padding:8px 12px 6px;
}
#navigation .active a,
#navigation li a:hover{
}

#banner{
	position:absolute; left:100px; top:40px;
	
	width:950px;
	margin:0px auto;
	background:#000000;
	height:70px;
}

#main{
	float: left;
	width:;
	
 }

#sidebar{
	float: right;
	width:;
	
 }


#bio{
	
	margin-left: 50px  ;
	width:800px;	
 }

#kontakt{
	text-align: left;
	padding-top: 30px;
	padding-left: 60px;
	
	
 }
 
 2px solid black
 float: left;
	text-align:left ;