/* style.css */
/* - - - - - - - - - - - - - - - - - - - - - - - - 
Autor: Alessandro Di Stefano
Datum: 17.02.2010
Modul: ZHdK GD 4. Semester - Website / CSS - - - -
/* - - - Generelles - - - - - - - - - - - - - - */
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;	
}
body {
	font-family: Geneva, serif;
	font-size: small;
}
h1 {
	text-transform: uppercase;
	color:grey;
	margin-bottom: 1.5em;
}
h3 {
	text-transform: uppercase;
}
h4 {
	text-transform: lowercase;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: black;
}
a:hover {
	color:black;
}
a img {
	border: red;
}
/* - - - Struktur - - - - - - - - - - - - - - - */
#container {
	margin: 4em;
	position: absolute;
	left: 200px;
	top: 0px;
	/*border: 1px white dashed;*/
	width: 900px;
	height: 100%;
	margin: 0 auto;
}
#hintergrund {
	width: 100%;
	height: 100%;
	position:  center;
}
#navigation {
	text-transform: lowercase;
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	color: grey;
}
#home_vorschau {
	overflow: hidden;
/*	background: white;*/
	width: 400px;
	min-height: 100%;
	margin: 0 auto;
	color: white;
}
.projekt {
	margin-top: 2em;
	height: 120px;
	border: 2px grey solid;
}
.projekt:hover {
	border: 2px red solid;
}
.projekt_game {
	margin-top: 2em;
	height: 120px;
	border: 2px #383d4d solid;
}
.projekt_game:hover {
	border: 2px red solid;
}
.projekt_grafik {
	margin-top: 2em;
	height: 120px;
	border: 2px #0e1733 solid;
}
.projekt_grafik:hover {
	border: 2px red solid;
}
.projekt_animation {
	margin-top: 2em;
	height: 120px;
	border: 2px #26304d solid;
}
.projekt_animation:hover {
	border: 2px red solid;
}
.projekt_analog {
	margin-top: 2em;
	height: 120px;
	border: 2px #707a99 solid;
}
.projekt_analog:hover {
	border: 2px red solid;
}
.projekt_photo {
	margin-top: 2em;
	height: 120px;
	border: 2px #000000 solid;
}
.projekt_photo:hover {
	border: 2px red solid;
}
#vorschau {
	overflow: hidden;
	background: grey;
	width: 440px;
	min-height: 100%;
	margin: 0 auto;
	color: white;
}
#pixeltitel_games {
	overflow: hidden;
	background: #383d4d;
	width: 440px;
	height: 100px;
	margin: 0 auto;
	color: white;
}
#pixeltitel_grafik {
	overflow: hidden;
	background: #0c1733;
	width: 440px;
	height: 100px;
	margin: 0 auto;
	color: white;
}
#pixeltitel_animation {
	overflow: hidden;
	background: #26304d;
	width: 440px;
	height: 100px;
	margin: 0 auto;
	color: white;
}
#pixeltitel_analog {
	overflow: hidden;
	background: #707a99;
	width: 440px;
	height: 100px;
	margin: 0 auto;
	color: white;
}
#pixeltitel_photo {
	overflow: hidden;
	background: #cccccc;
	width: 440px;
	height: 100px;
	margin: 0 auto;
	color: white;
}
#linkzeile {
	width: 440px;
	height: 26px;
/*	border: solid lime 1px;*/
}
.games_link {
	background: #383d4d;
	color: white;
	margin: none;
	padding-top: 4px;
	position: absolute;
	padding-left: 24px;
	top: 0px;
	left: 230px;
	width: 64px;
	height: 20px;
}
.games_link:hover {
	background: red;
	color: white;
}
.games_active_link {
	background: #383d4d;
	position: absolute;
	border-top: 2px white solid;
	border-right: 2px white solid;
	top: 0px;
	left: 230px;
	width: 86px;
	height: 24px;
}
.games_link_grau {
	background: #cccccc;
	color: white;
	margin: none;
	padding-top: 4px;
	position: absolute;
	padding-left: 24px;
	top: 0px;
	left: 230px;
	width: 64px;
	height: 20px;
}
.games_link_grau:hover {
	background: red;
	color: white;
}
.games_active_link_grau {
	background: #ffffff;
	color: #cccccc;
	position: absolute;
	padding-top: 4px;
	padding-left: 24px;
	top: 0px;
	left: 230px;
	width: 64px;
	height: 20px;
}
.games_active_link_grau:hover {
	color: red;
}
.grafik_link {
	background: #0c1733;
	color: white;
	margin-left: none;
	padding-top: 4px;
	position: absolute;
	padding-left: 30px;
	float: left;
	top: 0px;
	left: 318px;
	width: 62px;
	height: 20px;
}
.grafik_link:hover {
	background: red;
	color: white;
}
.grafik_active_link {
	background: #0c1733;
	position: absolute;
	border-top: 2px white solid;
	border-left: 2px white solid;
	border-right: 2px white solid;
	top: 0px;
	left: 318px;
	width: 84px;
	height: 24px;
}
.grafik_link_grau{
	background: #cccccc;
	color: white;
	margin: none;
	padding-top: 4px;
	position: absolute;
	padding-left: 30px;
	float: left;
	top: 0px;
	left: 318px;
	width: 84px;
	height: 20px;	
}
.grafik_link_grau:hover {
	background: red;
	color: white;
}
.grafik_active_link_grau{
	background: #ffffff;
	color: #cccccc;
	position: absolute;
	padding-left: 24px;
	padding-top: 4px;
	top: 0px;
	left: 318px;
	width: 64px;
	height: 20px;
}
.grafik_active_link_grau:hover {
	color: red;
}
.animation_link {
	background: #26304d;
	color: white;
	margin-left: none;
	padding-top: 4px;
	position: absolute;
	padding-left: 16px;
	float: left;
	top: 0px;
	left: 406px;
	width: 72px;
	height: 20px;
}
.animation_link:hover {
	background: red;
	color: white;
}
.animation_active_link {
	background: #26304d;
	position: absolute;
	border-top: 2px white solid;
	border-left: 2px white solid;
	border-right: 2px white solid;
	top: 0px;
	left: 406px;
	width: 84px;
	height: 24px;
}
.animation_link_grau{
	background: #cccccc;
	color: white;
	margin: none;
	padding-top: 4px;
	position: absolute;
	padding-left: 12px;
	float: left;
	top: 0px;
	left: 406px;
	width: 84px;
	height: 20px;
}
.animation_link_grau:hover {
	background: red;
	color: white;
}
.animation_active_link_grau{
	background: #ffffff;
	color: #cccccc;
	position: absolute;
	padding-top: 4px;
	padding-left: 12px;
	top: 0px;
	left: 406px;
	width: 84px;
	height: 20px;
}
.animation_active_link_grau:hover {
	color: red;
}
.analog_link {
	background: #707a99;
	color: white;
	margin-left: none;
	padding-top: 4px;
	position: absolute;
	padding-left: 24px;
	float: left;
	top: 0px;
	left: 494px;
	width: 64px;
	height: 20px;
}
.analog_link:hover {
	background: red;
	color: white;
}
.analog_active_link {
	background: #707a99;
	position: absolute;
	border-top: 2px white solid;
	border-left: 2px white solid;
	border-right: 2px white solid;
	top: 0px;
	left: 494px;
	width: 84px;
	height: 24px;
}
.analog_active_link_grau {
	background: #ffffff;
	color: #cccccc;
	position: absolute;
	padding-top: 4px;
	padding-left: 24px;
	top: 0px;
	left: 494px;
	width: 64px;
	height: 20px;
}
.analog_active_link_grau:hover {
	color: red;
}
.analog_link_grau{
	background: #cccccc;
	color: white;
	margin-left: none;
	padding-top: 4px;
	position: absolute;
	padding-left: 24px;
	float: left;
	top: 0px;
	left: 494px;
	width: 64px;
	height: 20px;	
}
.analog_link_grau:hover {
	background: red;
	color: white;
}
.photo_link {
	background: #000000;
	color: white;
	margin-left: none;
	padding-top: 4px;
	position: absolute;
	padding-left: 24px;
	float: left;
	top: 0px;
	left: 582px;
	width: 64px;
	height: 20px;
}
.photo_link:hover {
	background: red;
	color: white;
}
.photo_link_grau{
	background: #cccccc;
	color: white;
	margin-left: none;
	padding-top: 4px;
	position: absolute;
	padding-left: 20px;
	float: left;
	top: 0px;
	left: 582px;
	width: 64px;
	height: 20px;
}
.photo_link_grau:hover {
	background: red;
	color: white;
}
.photo_active_link {
	background: #000000;
	position: absolute;
	border-top: 2px white solid;
	border-left: 2px white solid;
	top: 0px;
	left: 582px;
	width: 86px;
	height: 24px;
}
.photo_active_link_grau {
	background: #ffffff;
	color: #cccccc;
	position: absolute;
	padding-top: 4px;
	padding-left: 24px;
	top: 0px;
	left: 582px;
	width: 64px;
	height: 20px;
}
.photo_active_link_grau:hover {
	color: red;
}
.projekt_zeile_button {
	margin: 1px;
	height: auto;
	border: 2px white solid;
}
#vorschau_games {
	overflow: hidden;
	background: #383d4d;
	width: 440px;
	min-height: 100%;
	margin: 0 auto;
	color: white;
}
#vorschau_grafik {
	overflow: hidden;
	background: #0c1733;
	width: 440px;
	min-height: 100%;
	margin: 0 auto;
	color: white;
}
#vorschau_animation {
	overflow: hidden;
	background: #26304d;
	width: 440px;
	min-height: 100%;
	margin: 0 auto;
	color: white;
}
#vorschau_analog {
	overflow: hidden;
	background: #707a99;
	width: 440px;
	min-height: 100%;
	margin: 0 auto;
	color: white;
}
#vorschau_photo {
	overflow: hidden;
	background: #000000;
	width: 440px;
	min-height: 100%;
	margin: 0 auto;
	color: white;
}
.logo_text {
	color: white;
	margin-left: 4px;
}
.untertitel {
	margin-bottom: 1em;
}
.logo {
	float: left;
	margin-right: 4px;
}
.projektcontainer {
	margin: 8em auto;
	overflow: hidden;
	width: 700px;
	position: center fixed;
}
.projektcontainer_game {
	margin: 8em auto;
	overflow: hidden;
	height: 450px;
	width: 600px;
	position: center fixed;	
}
#projekt_bild {
	width: 240px;
	position: absolute;
	left: 230px;
	margin: 0 auto;
}
#projekt_video {
	margin-top:3em;
	width: 700px;
	height: 1800px;
	left: 370px;
	background: #cccccc;
}
#titel_darunter {
	position: absolute;
	top:100px;
	left: 230px;
	height:80px;
	width: 700px;
}
#projekt_text {
	width: 200px;
	color: grey;
	position: absolute;
	left: 470px;
	float: left;
	margin-left: 8px;
}
#projekt_text_darunter {
	position: absolute;
	float: left;
	width: 440px;
	left: 230px;
	color: #red;
	background: white;
}
#projekt_text_game {
	width: 800px;
	color: grey;
	position: absolute;
	left: 246px;
	float: left;
	margin-top: 1em;
	margin-left: 8px;
}
#projekt_datum {
	position: absolute;
	text-transform: lowercase;
	left: 230px;
	top: 530px;
	color: grey;
}
#projekt_datum_darunter {
	text-transform: lowercase;
	left: 230px;
	float: bottom;
	color: grey;
	background: red;
}
.projekte-button h2 a {
	margin: 4em;
	display: block;
	width: 240px;
	height: 120px;
	background: transparent url(../bilder/logos/projekte_logo.jpg) top left no-repeat;
	text-indent: -999em;
}
.projekte-button h2 a:hover {
	background: transparent url(../bilder/logos/projekte_logo2.jpg) top left no-repeat;	
}
.motivation-button h2 a {
	margin: 4em;
	display: block;
	width: 240px;
	height: 120px;
	background: transparent url(../bilder/logos/motivation_logo.jpg) top left no-repeat;
	text-indent: -999em;
}
.motivation-button h2 a:hover {
	background: transparent url(../bilder/logos/motivation_logo2.jpg) top left no-repeat;	
}
.kontakt-button h2 a {
	margin: 4em;
	display: block;
	width: 240px;
	height: 120px;
	background: transparent url(../bilder/logos/kontakt_logo.png) top left no-repeat;
	text-indent: -999em;
}
.kontakt-button h2 a:hover {
	background: transparent url(../bilder/logos/kontakt_logo2.png) top left no-repeat;	
}
.projekte_games-button h2 a {
	margin-left: 4em;
	margin-right: 4em;
	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
	width: 240px;
	height: 80px;
	background: transparent url(../bilder/logos/games_logo.png) center left no-repeat;
	text-indent: -999em;
	border: 1px dashed green;
}
.projekte_games-button h2 a:hover {
	background: transparent url(../bilder/logos/games_logo2.png) center left no-repeat;	
}
.projekte_grafik-button h2 a {
	margin-left: 4em;
	margin-right: 4em;
	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
	width: 240px;
	height: 80px;
	background: transparent url(../bilder/logos/grafik_logo.png) center left no-repeat;
	text-indent: -999em;
	border: 1px dashed green;
}
.projekte_grafik-button h2 a:hover {
	background: transparent url(../bilder/logos/grafik_logo2.png) center left no-repeat;	
}
.projekte_animation-button h2 a {
	margin-left: 4em;
	margin-right: 4em;
	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
	width: 240px;
	height: 80px;
	background: transparent url(../bilder/logos/animation_logo.png) center left no-repeat;
	text-indent: -999em;
	border: 1px dashed green;	
}
.projekte_animation-button h2 a:hover {
	background: transparent url(../bilder/logos/animation_logo2.png) center left no-repeat;	
}
.projekte_analog-button h2 a {
	margin-left: 4em;
	margin-right: 4em;
	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
	width: 240px;
	height: 80px;
	background: transparent url(../bilder/logos/analog_logo.png) center left no-repeat;
	text-indent: -999em;
	border: 1px dashed green;	
}
.projekte_analog-button h2 a:hover {
	background: transparent url(../bilder/logos/analog_logo2.png) center left no-repeat;	
}
.projekte_photo-button h2 a {
	margin-left: 4em;
	margin-right: 4em;
	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
	width: 240px;
	height: 80px;
	background: transparent url(../bilder/logos/photo_logo.png) center left no-repeat;
	text-indent: -999em;
	border: 1px dashed green;	
}
.projekte_photo-button h2 a:hover {
	background: transparent url(../bilder/logos/photo_logo2.png) center left no-repeat;	
}
.buttonzeile {
	position: absolute;
	width: 240px;
	height: 21px;
	left: 0px;
	top: 0px;
	border: blue solid 1px;
}
.buttonzeile_rechts {
	position: absolute;
	width: 40px;
	height: 21px;
	left: 200px;
	top: 0px;
	border: blue solid 1px;
	background: green;
}
.zeilenfix {
	position: center fixed;
}
.index_link a {
	color: white;
	margin: none;
	padding-top: 0px;
	position: absolute;
	padding-left: 0px;
	top: 2px;
	left: 148px;
	width: 28px;
	height: 20px;
	display: block;
	background: transparent url(../bilder/logos/_home.png) top left no-repeat;
}
.index_link a:hover {
	background: transparent url(../bilder/logos/_home2.png) top left no-repeat;	
}
.motivation_link a {
	color: white;
	margin: none;
	padding-top: 0px;
	position: absolute;
	padding-left: 0px;
	top: 2px;
	width: 25px;	
	display: block;
	width: 38px;
	height: 20px;
	left: 172px;
	background: transparent url(../bilder/logos/_target.png) top left no-repeat;
}
.motivation_link a:hover {
	background: transparent url(../bilder/logos/_target2.png) top left no-repeat;	
}
.kontakt_link a {
	color: white;
	margin: none;
	padding-top: 0px;
	position: absolute;
	padding-left: 0px;
	top: 2px;
	left: 196px;
	width: 36px;
	height: 20px;
	display: block;
	background: transparent url(../bilder/logos/_contact.png) top left no-repeat;
}
.kontakt_link a:hover {
	background: transparent url(../bilder/logos/_contact2.png) top left no-repeat;	
}
.facebook_link a {
	color: white;
	margin: none;
	padding-top: 0px;
	position: absolute;
	padding-left: 0px;
	top: 2px;
	left: 700px;
	width: 28px;
	height: 20px;
	display: block;
	background: transparent url(../bilder/logos/_facebook.png) top left no-repeat;
}
.facebook_link a:hover {
	background: transparent url(../bilder/logos/_facebook2.png) top left no-repeat;	
}
.div.extra h1, h5, p{
	display			: inline;
	color			: #ffffff;
	background-color: #000000;
}