/*
CSS:        www.sabine-rupp.de
Medien:     screen
Autor:      Sabine Rupp, © 2008 ff Sabine Rupp Kommunikation von Mensch zu Mensch, all rights reserved
*/

/*
Zu margin:
Bei mehreren Angaben werden diese abhängig von deren Anzahl interpretiert.
Zwei Angaben bedeuten: oben und unten, rechts und links.
Drei Angaben bedeuten: oben, rechts und links, unten.
Vier Angaben bedeuten: oben, rechts, unten, links

Farben:
orange: #d3711a;
sand: #e4dccf;
sand-hell: #f3f0e9;
dunkel-sand: #d8d1c4;
blau: #;
grau-Schrift: #444;
Hellgrau: #eee;
*/

@import url("link.css");
@import url("boxen.css");
@import url("formular.css");
@import url("liste.css");
@import url("tabelle.css");

/* ---Allgemein--- */

html, body, * {
	padding: 0;
	margin: 0;
	}	

body  {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height: 1.5em;
	background: #f6f2ee url('../images/bg-body.jpg') repeat-x;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000;
	min-height: 100%;
	}

* {
	margin: 0;
	padding: 0;
	}


p, h1, h2, h3, ul, dl {
	margin: 0 1em 1em 20px;
	}

h1, h2, h3 {
	color: #d3711a;
	}
	
h1 {
	font-size: 1.5em;
	font-weight: normal;
	}
	

h1, h2 {
	border-bottom: 1px solid #d8d1c4;
	line-height: 2.2em;	
	}


h2, h3 {
	font-size: 1em;
	font-weight: bold;
	}

h3 {
	margin-bottom: 0;
	}


ul {
	list-style-type: disc;
	}

ul li {
	margin-left: 1em;
	}


ul li ul li {
	margin-left: 0;
	list-style-type: circle;
	}



dl dd {
	font-size: 0.78em;
	margin: 0 0 1em 5px;
	line-height: 1.3em;
	}

img {
	border: 1px solid #d8d1c4;
	padding: 5px;
	}
	

/* *********************** Links ******************************** */

a:link, a:visited, a:hover, a:active {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid #000;
	}

a:hover, a:active {
	border-bottom: 3px solid #d3711a;
	}

a:link.img, a:visited.img, a:hover.img, a:active.img {
	border-bottom: none;
	}
	
/* ************************ Boxen ****************************** */

#container, #container-start { 
	width: 998px;
	margin: 0 auto;
	text-align: left;
	background: #ebe2d9;
}

#container-start {
	background: #fff;
	}
	
/* ********** header ********** */


#header, #header-produkt, #header-kontakt, #header-service, #header-firma {
	height: 400px;
	border-bottom: #f6f2ee solid 7px;
} 

#header {
	background: #f6f2ee url('../images/header.jpg') top left no-repeat;; 
} 

#header-produkt {
	background: #f6f2ee url('../images/header-produkt.jpg') top left no-repeat;; 
} 


#header-kontakt {
	background: #f6f2ee url('../images/header-kontakt.jpg') top left no-repeat;; 
} 

#header-service {
	background: #f6f2ee url('../images/header-service.jpg') top left no-repeat;; 
} 

#header-firma {
	background: #f6f2ee url('../images/header-firma.jpg') top left no-repeat;; 
} 

#header h1, #header-produkt h1, #header-kontakt h1, #header-service h1, #header-firma h1 {
	padding: 310px 10px 10px;
	font: 1.9em "Century Gothic", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #444;
	border: none;
}

* html #header h1, * html #header-produkt h1, * html #header-kontakt h1, * html #header-service h1, * html #header-firma h1 {
	padding: 0;
	margin-top: 320px;
	margin-bottom: 0;
}


/* ********** sprache ********** */


#lang {
	padding: 80px 20px 10px 780px;
	}

* html #lang {
	padding: 0;
	margin: 80px 20px 10px 780px;
	}
	
#lang a:link.en, #lang a:visited.en, #lang a:hover.en, #lang a:active.en, #lang a:link.de, #lang a:visited.de, #lang a:hover.de, #lang a:active.de {
	text-decoration: none;
	border-bottom: none;
	background: transparent url('../images/GB.jpg') 0px 5px no-repeat;
	padding-left: 30px;
	width: 12.5em;
	}

#lang a:hover.en, #lang a:active.en {
	border-bottom: 3px solid #d3711a;
	}

/* ********** menu oben horizontal ********** */


#menu {
	background: #2a2a2a url('../images/bg-menu.jpg') center left repeat-x;
	height: 3.6em;
	border-bottom: #f6f2ee solid 7px;
	text-align: center;
	}

#menu ul {
	list-style: none;
	padding: 1em 0;
	margin: 0;
	}

#menu ul li {
	display: inline;
	color: #fff;
	text-transform: uppercase;
	border-left: 1px solid #444;
	padding: 1.1em 2.5em;
	margin: 0;
	}

#menu ul li.start, #menu ul li.start a:hover, #menu ul li.start a:active {
	border-left: none;
	}

#menu li a:link, #menu li a:visited, #menu li a:hover, #menu li a:active, #menu li.current {
	font-family: "Century Gothic",Trebuchet MS,Arial,Sans-Serif;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: #fff;
	border-bottom: none;
	}

*+html #menu li a:link, *+html #menu li a:visited, *+html #menu li a:hover, *+html #menu li a:active, *+html #menu li.current {
	font-size: 1em;
	}

#menu ul li.current, #menu ul li a span.current, #menu li a:hover, #menu li a:active {
	color: #d97113;
	}

#menu ul li.current {
	padding: 0.5em 2.5em 1em 2.5em;
	}

/* *****************Gestaltung Startseite**************** */

#start {
	width: 100%;
	padding: 3em 0 1em 0;
	margin-bottom: 1em;
	}

* html #start {
	padding-bottom: 0;
	}

#start h1 {
	border-bottom: none;
	}

#start p {
	margin: 0 15em 1em 4em;
	}

#start ul {
	list-style-type: none;
	}

#start ul li {
	float: left;
	padding: 0 1em;
	margin: 0 0em 2em 0;
	width: 18em;
	border-left: 10px #d8d1c4 solid;
	height: 9em;
	line-height: 1.3em;
	}
	
#start ul li br {
	line-height: 0.7em;
	}

* html #start ul li {
	margin-bottom: 0;
	}


#anwendung {
	width: 55%;
	padding-left: 20px;
	}

#vorteil {
	width: 30%;
	padding: 0  20px 1em;
	background-color: #ebe2d9;	
	margin: 0 1em 0 0;
	}

#anwendung ul, #vorteil ul {
	width: 60%;
	padding-bottom: 2em;
	}

#anwendung ul {
	list-style-type: none;
	}

#anwendung ul li {
	border-bottom: 1px solid #d8d1c4;
	}
	

#vorteil ul {
	width: 80%;
	}

ul.vorteil {
	list-style-image: url('../images/pfeil.gif');
	}

* html ul.vorteil {
	list-style-image: url('../images/pfeil-ie.gif');
	}

#anwendung h2, #anwendung ul, #anwendung dl, #vorteil h2, #vorteil ul, #vorteil dl {
	margin: 1.5em 0 0 0;
	}

* html #anwendung ul, #vorteil ul {
	padding-left: 1em;
	}

#anwendung p {
/*	color: #d3711a;*/
	font-weight: bold;
	margin: 1.5em 0 0 16.3em;
	}

#service {
	padding: 2em 250px 0 3em;
/*	margin: 2em 0 0;*/
	margin: 0;
	border-top: 10px solid #f6f2ee;
	background: #fff url('../images/service.jpg') 780px 65px no-repeat;
	}
	
* html #service {
	margin-top: 4em;
	}


/* ********** menu links ********** */

#sidebar {
	float: left; 
	width: 27%;
	padding: 4.1em 0; 
	}

#sidebar ul li {
	margin: 0.3em 0 0.3em 1em;
	}

#sidebar a:link, #sidebar a:visited, #sidebar a:hover, #sidebar a:active {
	border: none;
	}

#sidebar a:hover, #sidebar a:active {
	border-bottom: 3px solid #d3711a;
	}

#sidebar h2 {
	color: #000;
	}

#sidebar h3.link, #sidebar h3.linkbottom {
	color: #000;
	}

#sidebar h3.linkcurrent, #sidebar h3.linkbottomcurrent, #sidebar h3.linkcurrent a, #sidebar h3.linkbottomcurrent a, #sidebar ul a.linkcurrent, #sidebar li.linkcurrent, #sidebar li.linkbottomcurrent {
	color: #d3711a !important;
	font-weight: bold;
	}

#sidebar h3.linkbottom {
	margin-bottom: 1em;
	}


/* ********** inhalt ********** */

#mainContent { 
	margin-left: 27%;
	background-color: #fff;
	padding: 3em 2.5em;
	border-left: 10px solid #f6f2ee;
	height: 100%;
	} 


/* ********** footer ********** */


#footer {
	background-color: #333;
	border-top: 10px solid #f6f2ee;
	padding: 0 10px;
	color: #fff;
	height: 100%;
	} 

#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
	color: #fff;
	border-bottom: 1px solid #fff;
	font-weight: bold;
	}

#footer a:hover, #footer a:active {
	border-bottom: 3px solid #d3711a;
	}

#footer .col ul, #footer .col-kontakt ul{
	margin: 0;
	}

#footer .col ul li, #footer .col-kontakt ul li {
	list-style: none !important;
	margin-left: 1.5em;
	}

#footer .col ul li ul li, #footer .col-kontakt ul li ul li {
	list-style-type: disc;
	font-size: 0.9em;
	}

#footer .col ul li ul, #footer .col ul li ul li, #footer .col-kontakt ul li ul, #footer .col-kontakt ul li ul li {
	margin: 0 1em 0 0;
	}

div.col, div.col-kontakt {
	margin: 1em 0;
	padding: 1em 0;
	float: left;
	border-right: 1px solid #444;
	height: 8em;
	}

div.col-kontakt {
	border-right: none;
	}


/* --- Navi unten: Seitenanfang Weiterleiten Drucken --- */


#navi-unten {
	background-color: #f6f2ee;
	height: 2.5em;
	line-height: 2.5em;
	margin-bottom: 2em;
	}

#navi-unten ul {
	margin-left: 30px;
	}

#navi-unten ul li {
	list-style-image: url('none');
	list-style-position: outside;
	list-style-type: none;
	float: left;
	margin: 0;
	font-size: 0.8em;
	}

#navi-unten a, #footer img {
	text-decoration: none;
	border: none;
	color: #444;
	}
	
#navi-unten a:hover {
	text-decoration: underline;
	}

#navi-unten.start {
	padding-left: 1.8em;
	border-left: 10px solid #fff;
	border-right: 10px solid #fff;
	}

/* **************** Klassen ******************* */

/* ------- Ausrichtung --------- */


.right { /* Float right */
	float: right;
}

.left { /* Float left */
	float: left;
	}
	
.tright {
	text-align: right;
	}

.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.space {
    margin: 1em 1em 3em 0;
    }

/* ------- Schrift --------- */

.plus {
	font-family: Verdana, Arial, sans-serif;
	font-weight: normal;
	}

.klein {
	font-size: 0.798em;
	}
	
.mehr {
	font-family:'Times New Roman',Times,serif !important;
	font-weight: bold !important;
	font-style: italic !important;
	padding-top: 4em;
	}

/* ------- Schriftfarben --------- */

.orange {
	color: #d3711a !important;
	}

/* ------- Absätze --------------- */

.wichtig {
	background-color: #ebe2d9; 
	border: 1px solid #d3711a;
	padding: 1em 1em 1em 0;
	margin: 2em 0;
	}

.wichtig h1 {
	font-weight: bold;
	font-size: 1em;
	line-height: 1.5em;
	padding-bottom: 1em;
	padding-right: 1em;
	border-bottom: 1px solid #b7b1a6;
	color: #000;
	}


/* ------- Fusszeile --------------- */


.abs {
	background-color: #f6f2ee;
	font-size: 0.9em;
	text-align: center;
	margin: 0;
	padding: 1em;
	}
	
.copy {
	color: #808080;
	font-size: 0.9em;
	padding: 3em 1em 0.5em;
	margin: 0;
	background-color: #f6f2ee;
	text-align: center;
	}
	
.copy a:link, .copy a:visited, .copy a:hover, .copy a:active {
	color: #808080;
	border-bottom: 1px solid #808080;
	}

.copy a:hover, .copy a:active {
	border-bottom: 3px solid #d3711a;
	}
	
/* --------- sonst ---------- */

.blind {
	display: none;
	}
	
.fehlerliste {
	margin-left: 1.5em;
	}
	
.mail {
	width: 22em !important;
	}