/* Autor: 	Robert Gach (RGA)
	Name:	 	main.css
	Zweck: 	CSS für gach edv agentur - Web Site 2.0
	Datum: 	21. Jänner 2010
	Changes:	h1, h2, h3 top: von 30% auf 27.5%
				.contentcol1, .contentcol2, .contentcol3 Von height: 90% auf 85%
	Ver:	 	1.0.2
	Order: 	Selektoren sind alphabetisch geordert
	
	Inhalt:
	1		Body & Header
	2		Hintergrund (Verlauf, Bogen, weiss)
	3		Bild rechts
	4		Inhalt (content)
	5		Navigation (Menü)
	6		Verweise (Links) auf andere Seite
*/

/* START 1 - Definitionen für Bode & Header */	

html, body {
	background-color: white;
	border: 0;
	color: #01385E;
	height: 100%;
	left: 0;	
	margin: 0;		
	min-height: 100%;
	padding: 0;
	right: 0;
	width: 100%;
	}

body { 
	background-image: url(../bilder/hintergrundverlauf_blau.png); 
	font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
	font-size: 0.9em;
	line-height: 1.2em;
	overflow: hidden;
	position: relative;
	}

address {
	border-top: thin solid #FFFFFF;
	font-size: 0.7em;
	font-style: normal;
	position: absolute;
	text-align: center;
	top: 5%;
	width: 100%;
	}
	
.addrtel {
	display: none;
	}

.addASH {
	display: block;
	font-size: xx-small;
	line-height: inherit;
	text-align: center;
	}

	
h1, h2, h3 {
	border: 0;
	font-size: 1.6em;
	font-weight: normal;
	left: 10%;
	line-height: 1.6em;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 27.5%;
	white-space: nowrap;
	width: 50%;
	z-index: 1;
 	}

h1 { /* Logo blau */
	background-color: inherit;
	color: #01385E; 
 	}

h2 { /* orange */	
	background-color: inherit;
	color: #F16E10; 
/*	1. Juli 2011 - Changed für +1
	font-size: 1.3em; 
	line-height: 1.3em;
	margin-top :0.4em; */
 	}
	
h3 {
	background-color: inherit;
	color: #D8AB0E;
 	}
 	
/* color: #B0EF1C; Logogrün */
 	
h4, h5 { /* Kapitelüberschrift ohne Abstand - Farbe Logo blau */
	background-color: inherit;
	color: #01385E;
	font-size: 1.0em;
	font-weight: bolder;
 	}

h4 {
	margin: 0em 0 0.5em 0;	
	}
	
h5 { /* Kapitelüberschrift mit Abstand oben */
	margin: 2em 0 0.5em 0;
 	}

h6 { /* Verweise, Unterschriften etc. */
	font-size: 0.85em;
	font-weight: lighter;
	left: 0;
	line-height: 1.2em;
	margin: 0;
 	}
		
img {
	border: 0;
	}

p {
	margin-top: 0;
	}
	
	
/* Test für Anzeige Grafik externer Link - können noch nicht alle Browser
a[rel="external"]:before, a[href^="http://"] {
content: url(../bilder/extern.gif);
text-decoration:none;
vertical-align:middle;
}

a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(../bilder/pdf.png) no-repeat center right;
}
*/

/* Anzeige Grafik externer Link */
a.external {
  	background: transparent url(../bilder/extern.gif) no-repeat; 
  	background-position: right; 
  	padding-right: 13px;
	}

/* ENDE 1 - Definitionen für Bode & Header */	

/* START 2 - Definitionen für den HINTERGRUND */	
#bgwrapper, #bgleftcorner, #bgleftbody, #bgbody, #bgfooter, #linelogo {
	border: 0;
	left: 0;	
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	}

#bgwrapper, #bgbody {
	height: 95%;
	top: 5%;	
	}
	
#bgwrapper {
	width: 300px;
	}

#bgbody {
	left: 300px;
	right: 0px;
	width: 100%;
	}

#bgfooter {
	background-image: url(../bilder/fusszeilenverlauf_gruen.png);
	bottom: 0;
	height: 10%;
	left: 0px;
	right: 0px;
	top: 90%;
	width: 100%;
	}

#bgleftcorner, #bgleftbody {
	width: 300px;
	}

#bgleftcorner {
	background-image: url(../bilder/bogen_links_weiss_300_300_111102.png);
	background-repeat: no-repeat;
	height: 300px;
	}

#bgleftbody, #bgbody {
	background-color: white;
	color: inherit;
	}

#bgleftbody {
	top: 300px;
	bottom: 0;
	position: absolute;
	}

#linelogo {
	border-bottom-color: #01385E;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	height: 56px;
	left: -100px;	
	right: 0px;
	top: 5%;
	width: 100%;
 	}
	
#logo, #contentwrapper {
	position: absolute;	
	}

#logo {
	height: 50px;
	left: 75%;
	top: 10%;
	width: 150px;
 	}
	
/* ENDE 2 - Definitionen für den HINTERGRUND */	

	
/* START 3 - Definitionen für das BILD  */

.bildwrapper3, .bildwrapper2b, .bildwrapper2a, .bildwrapper1 {
	position: absolute;	
	right: 0;
	} 

.bildwrapper2b, .bildwrapper2a, .bildwrapper1 {
	bottom: 0;	
	left: 0%;
	width: 100%;
	} 
	
.bildwrapper3 { /* 10% von oben & unten */
	bottom: 9.99%;
	height: 80.01%;
	left: 75%;
	top: 10%;
	width: 25%;
	}

.bildwrapper2b, .bildwrapper2a { /* Fix 56 Pixel für das Logo */
	top: 56px;
	}

.bildwrapper2b { /* Fix 56 Pixel für das Logo */
	border-left: 1px solid silver;
	}
	
.bildwrapper1 { /* Abstand vom Logo bis zum Bild */
	top: 0%;
	}

.bild {
	border: 0;
	bottom: 0;
	height: 10%;
	left: 0;
	margin: 0;
	padding: 0;
	right: 0;
	}

img.bild {
	height: 100%;
	}

/* Das sind die Container für Bilder die nicht die ganze rechte Seite einnehmen, z.B. 3D drucker) */
#bildwrapperklein {
	border: 0;
	font-size: 0.9em;
	height: 55%;
	left: 75%;
	line-height: 1.4em;
	margin: 0;	
	padding: 0;
	position: relative;
	top: 40%;
	width: 25%;
	}

.bildsuperklein, .bildsehrklein, .bildmittel33, .bildfastklein, .bildklein, .bildmittel, .bildmittel, .bildmittel66, .bildmittelklein, .bildgross, bildsehrgross {
	border: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;		
	position: relative;
	right: 0;
	}

/* Das Bild rechts (z.B. 3Drucker) wird auf 10% skaliert */
.bildsuperklein {
	height: 10%;
	}

/* Das Bild rechts (z.B. 3Drucker) wird auf 25% skaliert */
.bildsehrklein {
	height: 25%;
	}

/* Das Bild rechts (z.B. 3Drucker) wird auf 33% skaliert */
.bildmittel33 {
	height: 33%;
	}
/* Das Bild rechts (z.B. 3Drucker) wird auf 45% skaliert */
.bildfastklein {
	height: 45%;
	}
		
/* Das Bild rechts (z.B. 3Drucker) wird auf 50% skaliert */
.bildklein {
	height: 50%;
	}

/* Das Bild rechts (z.B. 3Drucker) wird auf 60% skaliert */
.bildmittelklein {
	height: 60%;
	}

/* Das Bild rechts (z.B. 3Drucker) wird auf 66% skaliert */
.bildmittel66 {
	height: 66%;
	}
		
/* Das Bild rechts (z.B. 3Drucker) wird auf 75% skaliert */
.bildmittel {
	height: 75%;
	}
	
.bildmittelgross {
	height: 85%;
	}
	
.bildgross {
	height: 90%;
	}

.bildsehrgross {
	height: 100%;
	}

/* ENDE 3 - Definitionen für das BILD  */

/* START 4 - Definitionen für den Inhalt */
	
#contentwrapper {
	border: 0;
	font-size: 0.9em;
	height: 50%;
	left: 10%;
	line-height: 1.4em;
	margin: 0;
	padding: 0;
	top: 40%;
	width: 65%;
 	}
	
/* contenwrapper hat eine Breite von 75% des Schirms,
d.h. gewünschte % / 0,75  ergibt die Prozent im contenwrapper
Beispiel 10% vom linken Rand = 10 / 0,75 = 13,33 */ 

/* Berechnung der Abstände für Content Collum (Spalten für Inhalt):
Abstand links 13,33% + contentcol1 35% + Abstand links zu contentcolline 5,00 + contentcolline + Abstand rechts zum contentcol2 5,01 + contentcol2 35% + Abstand rechts zum Foto 6,66% (5%) = 100% */
.contentcol1, .contentcol2, .contentcol3 {
	height: 85%;
	list-style: none; /* für ul Liste */	
	margin: 0;
	overflow: auto;	
	padding: 0;
	position: absolute;
	width: 45%;
	}

.contentcol3 {
	height: 82%;
	list-style: none; /* für ul Liste */	
	margin: 0;
	overflow: auto;	
	padding: 0;
	position: absolute;
	width: 90%;
	border-left-color: silver;
	border-left-style: solid;
	border-left-width: 1px;
	padding-left: 8%;
	}

.contentcol1 {
	float: left;
	width: 45%;
	}

.contentcol2 {
	float: right; 
	left: 50.5%;
	width: 45%;
	}

.contentcol3importanttext {
	background-color: inherit;
	color: #F16E10;
	}

.contentcolline, .contentcollineshort {
	border-left-color: silver;
	border-left-style: solid;
	border-left-width: 1px;
	float: left;
	height: 90%;
	left: 47.75%;
	position: absolute;
	width: 0;
	}

.contentcollineshort {
	margin-top: 4%;
	height: 80%;
	}
	
.contentonecol, .contentonecollist {
	height: 90%;
	left: 0%;
	list-style: none; /* für ul Liste */	
	overflow: auto;	
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0%;
	width: 95.5%;
	}

/* Start Seite (index) - Für die Nummerierung der Gründe */
div.contentonecollist ul { 
	list-style-position: outside;
	list-style-type: decimal;
	}

div.contentcol2 ul { 
	list-style-position: outside;
	list-style-type: disc;
	}

/*  Problem mit Darstellung der COMPUTERWELT
.contentonecol li {
	margin-bottom: 2.4em;
} 
*/

/* dummy Spalte 3 (contentcol3) als Reserve für weiteren Inhalt
.contentcol3 {
	background-color: green;
} */

.floatstop {
	clear: both;
	}
/* ENDE 4 - Definitionen für den Inhalt */

/* START 5 - Definitionen für die Navigation (Menü) */
#naviwrapper {
	height: 20%;
/* 	height: 100%; */
	left: 200px;
	min-width: 600px;
	position: absolute;
	right: 40%;
	top: 10%;
	width: 60%; 
	z-index: 2;
	}

/* Definitionen für das Navigationsmenü */
/* 1 - Position, Breite, Höhe, Font-Size des Menüs */
.nav {
	font-size: 0.7em;
	position: relative;
	top: 22px;
/*	width:600px; */
	width: auto;
	z-index: 2;
	}

/* 2 - remove all the bullets, borders and padding from the default list styling */
.nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

/* 3 - */
.nav ul ul {
	width: 120px;
	}

/* 4 - float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon 
Richtet die einzelne Elemente der 1. Ebene horizontal aus */
.nav li {
	float: left;
	position: relative;
	width: 120px;
	}

/* 5 - style the links for the top level - oberste (1.) Ebene
Ebene 1, ändert die Farbe bei hover
Ebene 2 ist gelb (ohne link auf 3. Ebene und mit link auf 3 Ebene), ändert die Farbe bei hover */
.nav a, .nav a:visited {
	background: url(../bilder/pfeil_unten_weiss.gif) no-repeat 90% 60%;
	background-color: inherit;
	border: solid #01385E; 
	border-width: 0 0  0 1px; 
	color: #01385E;
	display: block;
	/* font-size:1.2em; 11px; original */
	height: 30px; 
	line-height:32px;
	padding: 0 0 0 10px; 
	text-decoration: none; 
	width: 109px; 
	}

/* 5a - style die 1 Ebene ohne Untermenüs */

.nav ul li a.navempty {
	background-image: none !important;
	}

.nav ul li a.navempty:hover {
	cursor: pointer;
	text-decoration: underline;
	}

.nav ul li :hover > a.navempty {
	cursor: pointer;
	text-decoration: underline;
	}

/*  6 - Layout für die 2. Ebene
trifft nur dann zu wenn die 2. Ebene auf eine 3. Ebene verzweigt
keine Bewegung mit der Maus 
Beim hover der 1. Ebene wird die 2 Ebene angezeigt
Eigenschaft der 2. Ebene mit Link auf die 3. Ebene */
.nav ul ul a.drop, .nav ul ul a.drop:visited {
	background: url(../bilder/pfeil_rechts_weiss.gif) no-repeat 90% 60%; 
	}
	
/* 7 - Layout für die 2. Ebene (hover)
Beim Drüberfahren mit der Maus in der 2. Ebene 
ändert sich in der 3. Ebene der Hintergrund und die Farbe des Pfeils in der 2. Ebene */
.nav ul ul a.drop:hover {
	background: url(../bilder/pfeil_rechts_orange.gif) no-repeat 90% 60%;
	cursor: default;
	text-decoration: none;
	}

/* 8 - wie oben für FF und IE7 */
/* Beim hover in der 2 Ebene - Elemente mit Link in die 3 Ebene ändert sich 
die Eigenschaft des Elementes in der 2. Ebene */
.nav ul ul :hover > a.drop {
	background: url(../bilder/pfeil_rechts_orange.gif) no-repeat 90% 60%;
	cursor: default;
	text-decoration: none;
	}

/* 9 - style the third level background*/
/* Beim hover in der 2. Ebene - Elemente mit Link in die 3. Ebene
wie wird das Element in der 3. Ebene angezeigt */
.nav ul ul ul a, .nav ul ul ul a:visited {
	background-color: inherit;
	color: #F16E10;
}

/* 10 - style the third level hover 
Anzeige der 3. Ebene beim drüberfahren mit der Maus 
Beim hover in der 3. Ebene - wie wird das Element angezeigt */
.nav ul ul ul a:hover {
	background-color: inherit;
	color: #F16E10;
	text-decoration: underline;
	}

/* 11 - hide the sub levels and give them a positon absolute so that they take up no room */
.nav ul ul {
	background: #fff;
	color: inherit;
	left:0; 
	margin-top: -2px;
	padding-top: 4px;
	position: absolute;
	top: 31px;
	visibility: hidden;
	width: 120px;
	}

/* 12 - another hack for IE5.5 
* html .nav ul ul {
top:30px;
t\op:30px;
}
*/

/* 13 -position the third level flyout menu */
.nav ul ul ul {
	left:	120px; 
	margin-top: 0px;
	padding-top: 0px;
	top: 0px;
	width: 120px;
	}

/* 14 - position the third level flyout menu for a left flyout */
.nav ul ul ul.left {
	left:-120px;
	}

/* 15 - style the table so that it takes no ppart in the layout - required for IE to work */
.nav table {
	left :0;
	position: absolute; 
	top: 0; 
	}

/* 16 - style the second level links 
Anzeige der 1. Ebene bei hover
Anzeige der 2. Ebene, wenn keine Links auf 3. Ebene vorhanden sind*/
.nav ul ul a, .nav ul ul a:visited {
	background-image: none;
	height: auto; 
	line-height: 1em; 
	padding: 5px 10px; 
	text-decoration: none;
	width: 99px;
	}

/* 17 - yet another hack for IE5.5 */
* html .nav ul ul a {
	width: 120px;
	w\idth: 99px;
}

/* 18 - style the top level hover rga */
/* Anzeige der 1. Ebene bei hover UND der
2. Ebene bei hover - wenn KEIN Link in die 3. Ebene 
Anzeige der 1. Ebene wird überschrieben*/
.nav a:hover {
	background: transparent url(../bilder/pfeil_unten_blau.gif) no-repeat 90% 60.01%;
	cursor: default;
	}

/* 19 - wie oben für FF und IE 7 */
.nav :hover > a {
	background: url(../bilder/pfeil_unten_blau.gif) no-repeat 90% 60%;
	cursor: default;
	}

/* 20 - * Beim hover in der 2. Ebene - Elemente ohne link in die 3 Ebene */
.nav ul ul a:hover, .nav ul ul :hover > a {
	background: none;
	background-color: inherit;
	color: #01385e;
	cursor: pointer;
	text-decoration: underline;
	}

/* make the second level visible when hover on first level list OR link */
.nav ul li:hover ul, .nav ul a:hover ul {
	visibility: visible; 
	}

/* keep the third level hidden when you hover on first level list OR link */
.nav ul :hover ul ul {
	visibility: hidden;
	}

/* make the third level visible when you hover over second level list OR link */
.nav ul :hover ul :hover ul { 
	visibility :visible;
	}
	
/* ENDE 5 - Definitionen für die Navigation (Menü) */

/* START 6 - Verweise (Links) auf andere Seite */
/* Definition für die Navigation UNTEN (wenn es in der gleichen Ebene mehrere Punkte gibt)
- vorige Seite - nächste Seite 
.navprev1 & .navnext1 sind für die 1. Menüebene - Schrift blau
.navprev2 & .navnext2 sind für die 2. Menüebene - Schrift orange 
Die Pfeile sind ebenfalls in der Ebene angepass */

.navprev1, .navnext1, .navprev2, .navnext2, .navmore1, .navmore2, .navless1, .navless2, .navexternlink {
	font-size: 0.85em;
	margin: 0;
	padding: 0;
	position: relative;
	}

.navprev1, .navnext1, .navless1, .navmore1 {
	background-color: inherit;
	color: #01385E;	
	}

.navprev2, .navnext2, .navmore2, .navless2 {
	background-color: inherit;
	color: #F16E10;
	}

.navmore1, .navmore2 {
	margin: -0.2em 0; 
	}
	
.navprev1, .navprev2, .navless1, .navless2 {
	float: left;
	left: -20px;
	padding: 0 0 0 20px; 
	text-align: left;
	width: auto;
	}

.navprev1, .navprev2 {
	top: 90%;
	}
	
.navmore1, .navmore2, .navexternlink {
	float: right; 
	right: 0;
	text-align: right;
	width: auto;
	}

.navnext1, .navnext2 {
	padding: 0 20px 0 0px; 
	right: 2.1%;
	text-align: right;
	top: 90%;
	width: auto;
	float: right;
	}

.navdownload {
	float: left;
	left: 0;
	padding: 0 0 0 0; 
	right: 2.1%;
	top: 0%;
	width: inherit;	
	}

.navexternlink, .navexternlink a, .navexternlink a:visited  {
	background-color: inherit;
	color: #01385E;
	text-decoration: none;
}	
	
.navprev1 a, .navprev1 a:visited, .navprev2 a, .navprev2 a:visited, .navless1 a, .navless1 a:visited, .navless2 a, .navless2 a:visited {
	background: url(../bilder/pfeil_links_weiss.gif) no-repeat 0% 60%;
	background-color: inherit;
	border: 0;
	color: #01385E;
	display: block;	
	height: 2em;
	line-height: 2em;
	text-decoration: none;
	padding: 0 0 0 20px; 
	}

.navnext1 a, .navnext1 a:visited, .navmore1 a, .navemore1 a:visited, .navnext2 a, .navnext2 a:visited, .navmore2 a, .navemore2 a:visited  {
	background: url(../bilder/pfeil_rechts_weiss.gif) no-repeat 100% 60%;
	background-color: inherit;
	border: 0;
	color: #01385E;
	display: block;	
	height: 2em;
	line-height: 2em;
	padding: 0 20px 0 0; 	
	text-decoration: none;
	}

.navnext2 a, .navnext2 a:visited, .navprev2 a, .navprev2 a:visited, .navmore2 a, .navemore2 a:visited, .navless2 a, .navless2 a:visited  {
	background-color: inherit;
	color: #F16E10;
	}

h6 a, h6 a:visited  /* Broschüre download >>, externer Link*/ {
	background-color: inherit;
	border: 0;
	color: #01385E;
	display: block;	
	padding:0; 	
	text-decoration: none;
	}

.linkinternal a, .linkinternal a:visited {
	background-color: inherit;
	border: 0;
	color: #01385E;
	padding: 0; 	
	text-decoration: none;
	}

.linkinternal a:hover {
	text-decoration: underline;
	}
	
.linkinternal :hover > a {
	text-decoration: underline;
	}

.navprev1 a:hover, .navless1 a:hover {
	background: url(../bilder/pfeil_links_blau.gif) no-repeat 0% 60%;
	text-decoration: underline;
	}

.navprev1 :hover > a, .navnless1 :hover > a  {
	background: url(../bilder/pfeil_links_blau.gif) no-repeat 0% 60%;
	text-decoration: underline;
	}

.navprev2 a:hover, .navless2 a:hover  {
	background: url(../bilder/pfeil_links_orange.gif) no-repeat 0% 60%;
	text-decoration: underline;
	}

.navprev2 :hover > a, .navless2 :hover > a  {
	background: url(../bilder/pfeil_links_orange.gif) no-repeat 0% 60%;
	text-decoration: underline;
	}

.navnext1 a:hover, .navmore1 a:hover {
	background: url(../bilder/pfeil_rechts_blau.gif) no-repeat 100% 60%;
	text-decoration: underline;
	}

.navnext1 :hover > a, .navnmore1 :hover > a  {
	background: url(../bilder/pfeil_rechts_blau.gif) no-repeat  100% 60%;
	text-decoration: underline;
	}

.navnext2 a:hover, .navmore2 a:hover {
	background: url(../bilder/pfeil_rechts_orange.gif) no-repeat 100% 60%;
	text-decoration: underline;
	}

.navnext2 :hover > a, .navmore2 :hover > a  {
	background: url(../bilder/pfeil_rechts_orange.gif) no-repeat  100% 60%;
	text-decoration: underline;
	}

h6 a:hover {
	text-decoration: underline;
	}

h6 :hover > a {
	text-decoration: underline;
	}

/* ENDE 6 - Verweise (Links) auf andere Seite */

/*============================================================*/
/* Universalselektor */

.p50 {
	font-size: 0.80em;
	line-height: 1.2;
	}
	
.thumb {
	float: left;
	min-height: 120px;
	width: 120px; 
	}
	
.thumb img {
	border: 1px solid silver;
	height: 100px;
	}

.thumb140 {
	height: 150px;
	position: relative;
	}

.thumb140 img {
	position: absolute;
	height: 140px;
	}

.thumb140 h6 {
	font-size: 0.85em;
	font-weight: lighter;
	line-height: 1.4em;
	padding: 0px 0px 0px 128px; 
	}

.thumb140 h6 img {
	height: 13px;
	}

.tableimpressumdescription_textallign_top {
	vertical-align:top;   
	}

.tableimpressumcontent_textallign_bottom {
	vertical-align:bottom;   
	}
	
/* * { 
	} 
*/

/* Box-Modell Inhalt (width+height) + Innenabstand (padding) + Rahmen (border) + Aussenabstand (margin) = Breite und Höhe des Elements
   padding: 0;
	border: 0;	
	margin: 0;	 
	werden nicht vererbt
*/


/*============================================================*/
/* Elementselektor */
/* Die notierte Regel gilt nur für das jeweileige Element 
	Beispiel:
	p {
	color:#000000;	
	}
*/

/*============================================================*/
/* Gruppenselektor */
/* Die Regel gilt für eine Gruppe von Elementen.
	Die einzelen Elemente werden durch Kommate getrennt. 
	Beispiel:
	p, div, a {
	color:#000000;	
	}
	*/		
	
/*============================================================*/
/* ID-Selektor */
/* Das ID-Attribut eines (X)HTML-Elements kann auch als Selektor verwendet werden:
	Beispiel:
	XHTML-Code:
	<p id="box">
	CSS-Code:
	#box {
	color:#000000;	
	}
	Das ID-Attribut mit dem gleichen Wert darf nur einmal pro XHTML-Dokument vorkommen.
	*/