﻿html{
	background-color: F4EEEE;
}

body {
	/*width: 960px; /* Seitenbreite 960 Pixel */
	/*max-width: 90%; /* wenn Seite kleiner 960 Pixel, soll Breite immer mind. 90% betragen */
	margin: 0 auto; /* mittiges Ausrichten */
}

.wrapper {
	width: 960px; /* Seitenbreite 960 Pixel */
	max-width: 90%; /* wenn Seite kleiner 960 Pixel, soll Breite immer mind. 90% betragen */
	margin: 0 auto; /* Ausrichtung unten/oben 0 Pixel, Horizontal mittig */
}

/* Bezieht sich auf gesamtes nicht eigens geändertes HTML-Dokument */
*{
	margin: 0;
	padding: 0;
	font-family: Arial;
}

/* Stil Überschrift H1*/
h1 {
	font-size: 2em;
	font-family: Arial;
	text-align: center;	
}

/* Stil Überschrift H2*/
h2 {	font-size: 1.25em;
	font-family: Arial;
	text-align: center;	
	color: red;
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

p{	box-sizing: border-box;
	width: 100%;
	padding: 0px;
	border: solid black 0px;
	margin: 0 auto;
	float: center;
	text-align: center;
}

a:focus{
	background-color: orange; /* Hintergrund bei Links mit Tabulator angefahren */
}
/* Kopfleiste*/
#navigation {
	height: 170px;
	width: 960px;
	max-width: 90%;
	margin: 0 auto;
	border-radius: 10px;
	background-color: blue;
	float: left;
	position: fixed;
	top: 0;
}

/* Logo in Kopfleiste*/
#logo {
	margin-top: 10px;
	margin-left: 10px;
	height: 150px;
	width: 300px;
	background-color: grey;
	float: left;
	border-radius: 10px;
	background: url(Pics/Logo_Elektro_Ruef.png);
	background-size: contain;
	
	position: fixed;
	top: 1;
}

#menü {
	width: 600px;
	float: right;
	margin-top: 140px;
	margin-right: 5px;
	border: blue;
}


/* Stil der Links im Menüs*/
#menü a {
	padding-right: 30px;
	padding-top: 5px;
	text-decoration: none;
	color: white;
	font-weight: 560;
}

/* Stil wenn über Link im Menü hinüber gefahren wird */
#menü a:hover{
	border-top: solid red 5px;
}

/* ***************************************************************************************************************************************************************************************************************** */


.container {
	padding-left: 0px;
	margin-top: 190px;
	width: 960px;
	max-width: 96%;
	height: 540px;
	background-color: white;
	box-sizing: border-box;
}

.sidebarlinks {
	float: left;
	width: 1px;
	height: 360px;
	margin-top: 0px;
	margin-left: 0px;
	border-right: white 2px;
	box-sizing: 30px; /* damit Box inkl. Rahmen, da sonst Rahmen außen herum */
}

.sidebarlinks a{
	margin-top: 40px;
	padding-left: 10px;
	padding-top: 10px;
	text-decoration: none;
	color: blue;
	font-weight: 560;
	font-size: 1.25em;
}

.sidebarlinks a:hover{
	border-left: solid red 5px;
}
.box {
	float: left;
	width: 960px;
	max-width: 100%;
	height: 440px;
	background-color: white;
	margin-left: 10px;
	margin-top: 5px;
	border-radius: 10px;
	box-sizing: border-box; /* damit Box inkl. Rahmen, da sonst Rahmen außen herum */
}

.boxtextfoto {
	float: left;
	width: 60%;
	height: 160px;
	background-color: white;
	margin-left: 0px;
	margin-top: 5px;
	border-radius: 10px;
	box-sizing: border-box; /* damit Box inkl. Rahmen, da sonst Rahmen außen herum */
}



.box p{
	font-size: 1em;
	color: black;
	text-align: justify;
	margin: 0px;
	max-width: 100%;
}

.box h2{
	font-size: 1.25em;
	color: blue;
	text-align: center;
	margin: 20px;
	max-width: 100%;
	
}

.box:hover{
	background-color: white; /* Hintergrund wenn mit Maus darüber */
}

.box a{
	text-decoration: none;
	padding-left: 10px;
	color: black;
}

.box a:hover{
	border-left: solid red 5px;
}


.clear { /* damit Boxen nicht heraus rutschen */
	clear: both; /* speziell nicht unter links ausgerichtete rutschen */
	height: 100px;
	background-color: red;
	float: left;
	float: right;
}

#Foto_Rüf {
	margin-top: 10px;
	margin-right: 10px;
	height: 290px;
	width: 210px;
	background-color: grey;
	float: right;
	border-radius: 10px;
	background: url(Pics/Foto_Rüf.jpg);
	background-size: contain;
	
}

#content {
	margin-top: 0px;
}

#Fußzeile {
	width: 960px;
	max-width: 100%;
	border-top: solid blue 2px;
	text-align: center;
	margin-bottom: 0px;
}

#Fußzeile a {
	padding-right: 40px;
	padding-bottom: 5px;
	text-decoration: none;
	color: black;
	font-weight: 560;
}

#Fußzeile a:hover{
	border-top: solid red 5px;
}
