/*  =========================================================
Stylesheet für comicsense - audiovisuelle medien 
Datei:  bildschirm.css
Datum:  2008-04-25 
Autor:  wolfgang kschwendt 
========================================================== */

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

/* Kalibrierung der wichtigsten Abstände */
*  { padding: 0; margin: 0; }
h2, p, ul, ol { margin-bottom: 1em; }  
ul ul { margin-bottom: 0; } 
li { margin-left: 1em; } 

/* Allgemeine Selektoren */

html { height: 101%; } /* erzwingt Scrollbar im Firefox */
body {
	color: #8c8c8c;
	background-color: #FFFFFF;
	font-family: "Zurich", Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	background-position: 0px 0px;
	background-attachment:fixed;
	background-image: url(../pix/comickachel.jpg);
	background-repeat: repeat;
}
h1 { font-size: 150%; } 
h2 { font-size: 130%; }
address {
   text-align: center;  
   font-size: 80%;
   font-style: normal;  
   letter-spacing: 2px; 
}
/* Hyperlinks */
a { text-decoration: none; outline: none;} 
a:link {
	color: #FF6699;
} 
a:visited {
	color: #ff6699;
}
a:hover, 
a:focus { 
  border-bottom: 1px solid #d90000 
}
a:active {
	color: white;
	background-color: #ff6699;
}
/* Allgemeine Klassen und IDs */
.skiplink { 
   position: absolute; 
   left: -3000px; 
   top: -2000px; 
   width: 0px; 
   height: 0px; 
   overflow: hidden; 
   display: inline; 
}

.slogan {
	color: white;
	padding-left: 40px;
	padding-top: 100px;
}


#logo {
	color: black;
	background-color: white;
	padding: 5px;
}

#logo a,
#logo a:link,
#logo a:visited, 
#logo a:hover, a:focus {
	text-decoration: none;	
}



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

#wrapper { /* Das HTML-Element mit dem Attribut id="wrapper" */
	color: black;
	border: 5px solid #000000;
	background-color: white;
	width: 760px; /* Breite des Inhaltsbereiches */
	margin: 20px auto;
	position: relative;
	z-index: 2;
}

#kopfbereich {
	position: relative; /* positioniert, aber bleibt im Fluss */
	color: black;
	background-color: #FFFFFF;
	padding: 5px 20px 0 0px;
}
   #kopfbereich p {
	position:absolute;
	top: 10px;
	right: 10px;
	padding: 5px 0 5px 0;
	margin-bottom: 0;
   }
   #kopfbereich p span {
	color: #ED25AF;
   }

#navibereich {
	text-align: center;
	color: black;
	background-color: #FFFFFF;
	padding: 20px 10px 4px 10px;
	border-bottom: 1px solid #0096b8;
}
   #navibereich ul {
      margin-bottom: 0;
   }
   #navibereich li {
	display: inline;
	list-style-type: none;
	margin: 0;
	font-family: "Zurich", Verdana, Arial, Helvetica, sans-serif;
   }
   #navibereich a {
	color: #0096b8;
	background-color: white;
	padding: 4px 6px;
	border: 1px solid #0096b8;
   }  

   #navibereich a:hover,
   #navibereich a:focus,
   #home #navi01 a, 
   #wasgibts #navi02 a,
   #wasgibts-video #navi02 a,
   #wasgibts-tv #navi02 a,
   #wasgibts-animation #navi02 a,
   #wasgibts-podcast #navi02 a,
   #wasgibts-web #navi02 a,
   #wasgibts-printillu #navi02 a,
   #werhat #navi03 a,
   #werhat-tv #navi03 a,
   #werhat-kurzfilm #navi03 a,
   #werhat-sitcom #navi03 a,
   #werhat-primage #navi03 a,
   #werhat-internetmobile #navi03 a,
   #werhat-werbekino #navi03 a,
   #werhat-schulung #navi03 a,
   #werhat-reportage #navi03 a,
   #werhat-printlogo #navi03 a,
   #werhat-showreel #navi03 a,
   #menschen #navi04 a,
   #kontakt #navi05 a,
   #impressum #navi06 a,
   #liebelinks #navi07 a,
   #gratis #navi08 a {
	color: #0096b8;
	background-color: white;
	border-bottom-color: white;
	border-top-color: white;
   }  
   
   
  #navibereich a:active {
	color: black;
	background-color: white;
   }  

#textbereich {
	padding: 20px 10px 10px 20px;
}
   #textbereich a { 
      border-bottom: 1px dotted #cc0000; 
   }
   #textbereich a:hover,
   #textbereich a:focus { 
      border-bottom: 1px solid #d90000; 
   }
   
#wasgibts #dasgibts {
	padding-top: 50px;
	list-style-type: none;
	padding-left: 70px;
}

#wasgibts #dasgibts a,
#wasgibts #dasgibts a:link,
#wasgibts #dasgibts a:visited, 
#wasgibts #dasgibts a:hover, a:focus,
#wasgibts-web #footnavi a,
#wasgibts-web #footnavi a:link,
#wasgibts-web #footnavi a:visited, 
#wasgibts-web #footnavi a:hover, a:focus,
#wasgibts-video #footnavi a,
#wasgibts-video #footnavi a:link,
#wasgibts-video #footnavi a:visited, 
#wasgibts-video #footnavi a:hover, a:focus,
#wasgibts-tv #footnavi a,
#wasgibts-tv #footnavi a:link,
#wasgibts-tv #footnavi a:visited, 
#wasgibts-tv #footnavi a:hover, a:focus,
#wasgibts-printillu #footnavi a,
#wasgibts-printillu #footnavi a:link,
#wasgibts-printillu #footnavi a:visited, 
#wasgibts-printillu #footnavi a:hover, a:focus,
#wasgibts-podcast #footnavi a,
#wasgibts-podcast #footnavi a:link,
#wasgibts-podcast #footnavi a:visited, 
#wasgibts-podcast #footnavi a:hover, a:focus,
#wasgibts-animation #footnavi a,
#wasgibts-animation #footnavi a:link,
#wasgibts-animation #footnavi a:visited, 
#wasgibts-animation #footnavi a:hover, a:focus {
	color: #ED25AF;	
}

#wasgibts-animation #textbereich,
#wasgibts-podcast #textbereich,
#wasgibts-printillu #textbereich,
#wasgibts-tv #textbereich,
#wasgibts-video #textbereich,
#wasgibts-web #textbereich {
	margin-top: 20px;
	}
	
#menschen #textbereich {
	margin-top: 40px;
	}

#wasgibts-animation #wgcontent-text,
#wasgibts-podcast #wgcontent-text,
#wasgibts-printillu #wgcontent-text,
#wasgibts-tv #wgcontent-text,
#wasgibts-video #wgcontent-text,
#wasgibts-web #wgcontent-text {
	float: left;
	width: 290px;
	margin-left: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 130%;
	letter-spacing: 1px;
	}
	
#menschen #menschenbild,
#menschen #menschenkschwendtbild {
	float: left;
	width: 200px;
	margin-left: 60px;
	margin-bottom: 40px;
	}
	
#impressum #textbereich {
	width: 300px;
	margin-top: 40px;
	margin-left: 60px;
	margin-bottom: 40px;
	}
	
#wasgibts-animation #wgcontent-bsp,
#wasgibts-podcast #wgcontent-bsp,
#wasgibts-printillu #wgcontent-bsp,
#wasgibts-tv #wgcontent-bsp,
#wasgibts-video #wgcontent-bsp,
#wasgibts-web #wgcontent-bsp {
	float: right;
	width: 330px;
	margin-right: 30px;
	height: 260px;
	margin-bottom: 50px;
	background-color: black;
	}
	
#menschen #menschenwort,
#menschen #menschenkschwendtwort {
	float: right;
	width: 380px;
	margin-right: 60px;
	margin-bottom: 50px;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 110%;
	text-align: justify;
	}
	
#wasgibts-printillu #wgcontent-bsp {
	background-color: white;
	}
	
#wasgibts-printillu #wgcontent-bsp a {
	text-decoration: none;
	}
	
#footnavi {
	font-size: 80%;
	text-align: center;
	color: #FF33CC;
	}

#werhat #textbereich, 
#werhat-tv #textbereich,
#werhat-kurzfilm #textbereich,
#werhat-sitcom #textbereich,
#werhat-primage #textbereich,
#werhat-internetmobile #textbereich,
#werhat-werbekino #textbereich,
#werhat-schulung #textbereich,
#werhat-reportage #textbereich,
#werhat-printlogo #textbereich,
#werhat-showreel #textbereich {
	padding-left: 40px;
	margin-top: 40px;
	 }

#werhat #textbereich #subwhmenu,
#werhat-tv #textbereich #subwhmenu,
#werhat-kurzfilm #textbereich #subwhmenu,
#werhat-sitcom #textbereich #subwhmenu,
#werhat-primage #textbereich #subwhmenu,
#werhat-internetmobile #textbereich #subwhmenu,
#werhat-werbekino #textbereich #subwhmenu,
#werhat-schulung #textbereich #subwhmenu,
#werhat-reportage #textbereich #subwhmenu,
#werhat-printlogo #textbereich #subwhmenu,
#werhat-showreel #textbereich #subwhmenu {
	background-color:#ffffff;
	width: 200px;
	float: right;
	font-size: 90%;
   }
   
 #werhat #textbereich #subwhmenu p {
	width: 170px;
	font-size: 120%;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000000;
	}

#werhat #textbereich #whcontent {
	border:1px solid #efeff7;
	background-color: #efeff7;
	width: 500px;
	float: left;
	padding: 0px 0px;
   }
   
#werhat-tv #textbereich #whcontent,
#werhat-kurzfilm #textbereich #whcontent,
#werhat-sitcom #textbereich #whcontent,
#werhat-primage #textbereich #whcontent,
#werhat-internetmobile #textbereich #whcontent,
#werhat-werbekino #textbereich #whcontent,
#werhat-schulung #textbereich #whcontent,
#werhat-reportage #textbereich #whcontent,
#werhat-printlogo #textbereich #whcontent,
#werhat-showreel #textbereich #whcontent {
	border:1px solid #efeff7;
	background-color: #efeff7;
	width: 400px;
	float: left;
	padding: 0px 0px;
	margin-left: 40px;
   }
   
#werhat #textbereich p, 
#werhat-tv #textbereich p,
#werhat-kurzfilm #textbereich p,
#werhat-sitcom #textbereich p,
#werhat-primage #textbereich p,
#werhat-internetmobile #textbereich p,
#werhat-werbekino #textbereich p,
#werhat-schulung #textbereich p,
#werhat-reportage #textbereich p,
#werhat-printlogo #textbereich p,
#werhat-showreel #textbereich p {
	background-color: #ffffff;
	width: 500px;
	float: left;
	padding: 0px 10px;
	margin-top: 20px;
	color: #ED25AF;
	}
	
#werhat-tv #subwhnavi01,
#werhat-kurzfilm #subwhnavi02,
#werhat-sitcom #subwhnavi03,
#werhat-primage #subwhnavi04,
#werhat-internetmobile #subwhnavi05,
#werhat-werbekino #subwhnavi06,
#werhat-schulung #subwhnavi07,
#werhat-reportage #subwhnavi08,
#werhat-printlogo #subwhnavi09,
#werhat-showreel #subwhnavi10 {
	color: #666666;
	}
   
#home #textbereich {
	background-image: url(../pix/bleuBubbles760.jpg);
	width: 760px;
	background-repeat: no-repeat;
	height: 244px;
	padding: 0 0;
	}
	
#home #textbereich p {
	padding: 100px 50px;
   }
#home #fussbereich {
	margin-top: 0;
	}
	
#kontakt #textbereich {
	margin-top: 40px;
	}
   
.buchstabe  {
	color: #0096b8;
	font-weight: bold;
	}
	
.werhatkategorie {
	color: #666666;
	font-size: 90%;
}

#filme {
	margin: 5px 5px;
}

.kunden  {
	font-size: 90%;
}

#liebelinks #textbereich #liebelinkslinks {
	margin-left: 40px;
	margin-top: 40px;
	line-height: 2em;
	}

#subwhnavi  {
	list-style-type: none;
	}
   
#fussbereich {
	padding: 10px 20px 20px 20px;
	border-top: 1px solid #8c8c8c;
	margin-top: 20px;
	position: inherit;
	position: relative;
	}

#wasgibts-printillu #wgcontent-bsp a {
text-decoration: none;
	}

#fussbereich a,
#fussbereich a:link,
#fussbereich a:visited, 
#fussbereich a:hover, a:focus {
	color: #000000;
	text-decoration: none;
	border-bottom: 0px;
	}


/* ==================================== 
   3. Sonstige Styles 
   ==================================== */

/* Das Kontaktformular */
form {
	background-color: #FFFFFF;
	width: 300px; /* Breite des Formulars */
	padding: 20px;
	border: 0px solid #8c8c8c;
	margin-right: 60px;
	float: right;
}
/* Beschriftung auf eigener Zeile */
label { 
   display: block; 
   cursor: pointer; 
} 
input#absender, 
textarea { 
   width: 300px;
   border: 3px solid #000000;
   margin-bottom: 1em;
}
textarea { 
   height: 7em; 
}
input#absender:focus, 
textarea:focus {
   background-color: #d9d9d9; 
}

#kontaktfoto {
	float: left;
	margin-left: 20px;
}

/* ======================================= 
   E N D E   bildschirm.css 
   ======================================= */