/*
CSS LAYOUT
Robert Prysok
Webdesign mit Cascading Style Sheets
*/

/* ############################################################################################################### */
/* Hier werden die Abstände auf 0 gesetzt, um das Browser-Offset zu entfernen und damit die Inhalte ganz oben */    
/* Links plaziert werden können. */
/* ############################################################################################################### */
body, html, #navigation, #container, #inhalt, #infobox {
           	margin:0;
           	padding:0; 
}

/* ################################################################################################################ */
/* BODYEIGENSCHAFTEN */
/* ################################################################################################################ */
body {
           	background-color:#FFFFFF;
}

/* ################################################################################################################ */
/* KOPFTEIL */
/* ################################################################################################################ */
#kopfteil {
           	background-color: #FFFFFF;
            background-image: url(../Mineraloel/Hintergrund/HintergrundMineraloel.png);
			background-repeat: no-repeat;
			background-position: left;
           	padding: 90px;
           	margin-bottom: 0;
}

/* ################################################################################################################ */
/* NAVIGATION */
/* ################################################################################################################ */
#navigation {
   			width: 22%;
   			float: left;
  			background-color: #FFFFFF;
}

#navigation ul {
   			list-style-type: none;
   			margin: 0;
   			padding: 0;
}

#navigation li {
   			margin: 0 0 2px 0;
}

#navigation li a:link, #navigation li a:visited {
   			display: block;
   			text-decoration: none;
   			font-weight: bold;
   			padding: 5px 5px 5px 0.5em;
   			border-left: 12px solid #333333;
   			background-color: #FF0000;
   			color: #FFFFFF;
   			width: 100%;
}

#navigation li a:hover, #navigation li a:active, #navigation li a:focus {
   			border-left: 12px solid #333333;
   			background-color: #FFFFFF;
   			color: #000000;
}

/* ################################################################################################################ */
/* INFOBOX */
/* ################################################################################################################ */
#infobox {
           	width: 15%;
			height: 60%;
           	float: right;
           	background-color:#FF0000;
			background-repeat: no-repeat;
			background-position: top;
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: FFFFFF;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			direction: lrt;
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: center;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: baseline;
			white-space: normal;
			word-spacing: normal;
}

/* ############################################################################################################### */
/* INHALTSBEREICH FÜR HAUPTTEXTE */
/* ############################################################################################################### */
#inhalt {
           	width: 60%;
           	float: left;
           	background-color: #FFFFFF;
			color: #806640;		   
}

/* ################################################################################################################ */
/* KOPFEIGENSCHAFTEN ÜBERSCHRIFT */
/* ################################################################################################################ */
#kopf h1 {
           	margin: 0; padding: 25px;
}

/* ############################################################################################################### */
/* TEXTEIGENSCHAFTEN NORMALERTEXT */
/* ############################################################################################################### */
p {        	margin: 5px 25px 0px 25px; 
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: 000000;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			direction: lrt; 
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: top;
			white-space: normal;
			word-spacing: normal;
}

/* ########################################################################################################################### */
/* Ausrichtung vom Text und Bildern in der Tabelle bei Kontakt */
/* Gilt nur einmalig */
/* ########################################################################################################################### */
.PassbildundText {
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: 000000;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			direction: lrt; 
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: center;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: top;
			white-space: normal;
			word-spacing: normal;
}


/* ############################################################################################################### */
/* ÜBERSCHRIFTEN */
/* ############################################################################################################### */
h1 {       	margin: 0 5px 5px 25px;
           	padding-top: 10px;
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 16px;
			color: FF0000;
			font-style: normal;
			font-variant: normal;
			font-weight: bolder;
			direction: lrt;
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: baseline;
			white-space: normal;
			word-spacing: normal;
}

h2 {       	margin: 0 5px 5px 25px;
           	padding-top: 5px;
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 16px;
			color: FF0000;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			direction: lrt;
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: baseline;
			white-space: normal;
			word-spacing: normal;
}

h3 {       	margin: 0 5px 5px 25px;
           	padding-top: 5px;
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 24px;
			color: FF0000;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			direction: lrt;
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: baseline;
			white-space: normal;
			word-spacing: normal;
}

h4 {       	margin: 0 5px 5px 5px;
           	padding-top: 5px;
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 25px;
			color: FFFFFF;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			direction: lrt;
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: center;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: baseline;
			white-space: normal;
			word-spacing: normal;
}

h5 {       	margin: 0 5px 5px 5px;
           	padding-top: 5px;
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 50px;
			color: FFFFFF;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			direction: lrt;
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: center;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: baseline;
			white-space: normal;
			word-spacing: normal;
}



/* ############################################################################################################### */
/* LISTEN UND AUFZÄHLUNGEN */
/* ############################################################################################################### */
ul {
			list-style-image: none;
			list-style-position: outside;
			list-style-type: circle;
			font-family: Arial, Helvetica, sans-serif; 
			font-size:12px;
			font-weight: bolder;
			color: FF0000;
}

/* ############################################################################################################## */
/* TABELLEN */
/* ############################################################################################################## */
table {
			border-collapse: collapse;
			border-spacing: 1em;
			caption-side: bottom;
			width: 90%;
			height: 30%;
			background-color: #FFFFFF;
}

td {
			padding-left: 25px;
			background-color: #FFFFFF;
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: 000000;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			direction: lrt; 
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: top;
			white-space: normal;
			word-spacing: normal;
}

/* ####################################################################################################################### */
/* Links */
/* ####################################################################################################################### */
/* für einen normalen Link */
a:link {
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: #0000FF;
			background-color: #FFFFFF;
			font-style: normal;
			font-variant: normal;
			font-weight: bolder;
			direction: lrt; 
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: top;
			white-space: normal;
			word-spacing: normal;
}

/* für einen besuchten Link */
a:visited {
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: #0000FF;
			background-color: #FFFFFF;
			font-style: normal;
			font-variant: normal;
			font-weight: bolder;
			direction: lrt; 
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: top;
			white-space: normal;
			word-spacing: normal;
}

/* für einen Link, der den Focus über die Tastatur erhält */
a:focus {
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: #0000FF;
			background-color: #FFFFFF;
			font-style: normal;
			font-variant: normal;
			font-weight: bolder;
			direction: lrt; 
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: top;
			white-space: normal;
			word-spacing: normal;
}

/* für eine Link, über den man gerade mit der Maus fährt */
a:hover {
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: #0000FF;
			background-color: #FFFFFF;
			font-style: normal;
			font-variant: normal;
			font-weight: bolder;
			direction: lrt; 
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: top;
			white-space: normal;
			word-spacing: normal;
}

/* für einen gerade per Maus angeklickten Link */
a:active {
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: #0000FF;
			background-color: #FFFFFF;
			font-style: normal;
			font-variant: normal;
			font-weight: bolder;
			direction: lrt; 
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
    		vertical-align: top;
			white-space: normal;
			word-spacing: normal;
}

/* ############################################################################################################################## */
/* Formular für EMails */
/* ############################################################################################################################## */
form {
			background: #FFFFFF;
			margin-left: 25px;
			margin-right: 10px;
			border-width: 0px;
			border-style: solid;
			border-color: #FF0000;
}

input {
			background: #CCCCCC;
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: 000000;
			font-style: normal;
			font-variant: normal;
			font-weight: bolder;
			direction: lrt; 
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: top;
			white-space: normal;
			word-spacing: normal;
			border: 2px;
			border-top-width: 1px;
			border-top-color: #FFFFFF;
			border-top-style: none;
			border-bottom-width: 1px;
			border-bottom-color: #FF0000;
			border-bottom-style: solid;
			border-left-width: 1px;
			border-left-color: #FFFFFF;
			border-left-style: none;
			border-right-width: 1px;
			border-right-color: #FFFFFF;
			border-right-style: none;		
}

label {
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: #000000;
			font-style: normal;
			font-variant: normal;
			font-weight: bolder;
}

textarea {
			background: #CCCCCC;
			font-family: Arial, Helvetica, sans-serif; 
			font-size: 14px; 
			color: 000000;
			font-style: normal;
			font-variant: normal;
			font-weight: bolder;
			direction: lrt; 
			letter-spacing: normal;
			line-heigth: normal;
			Text-align: left;
			Text-decoration: none;
			Text-indent: Inherit;
			Text-transform: none;
			unicode-bidi: normal;
			vertical-align: top;
			white-space: normal;
			word-spacing: normal;
			border: 2px;
			border-width: 1px;
			border-color: #FF0000;
			border-style: solid;
}