/* CSS Document */

/* - general definition - 
gilt nur wenn keine anderen Einstellungen in den speziellen Formularen/Menues gemacht werden*/

html {
	height: 100%;
}

body
	{
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: Arial, Helvetica, Sans Serif;
	font-size: 12px;
	background-color: #575A52;
	}

.clr {
	clear: both;
}

/* - LINKS - 
gilt für alle Teile der Website, wenn keine anderen Einstellungen getätigt werden. Generell gibt es vier Einstellungsmöglichkeiten - */

/* -  Link-Style für die ganze Website - Hier wurde die Farbe, Die Auszeichnung und die Schirft definiert */

a:link {
	color: #FF6600; 
	text-decoration: none;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: normal;
}

/* -  Aktiver Link - für die ganze Seite, hier nicht definiert. - */

a:active {}

/* -  Die Maus ist auf dem Link - */

a:hover {
	color: #FF6600;	
	text-decoration: none;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: normal;
        font-size: 10px;
}

/* -  Besuchter Link - */

a:visited {
	color: #CCCCCC; 
	text-decoration: none;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: normal;
        font-size: 10px;
}

/* - Html Tags werden definiert -
Bei einer CSS basierten Gestalltung einer Website sollten möglichst wenige HTML-Tags im Dokument verwendet werden. 
Tabellen Tags wie <table> werden nur verwendent wenn es sich um Tabellen handelt und nicht um die Position der einzelnen Elemente auf der Website zu bestimmen. 
Hier folgen einige HTML-Tags bei denen es sinnvoll ist sie für das ganze Design vorzubestimmen. Alle können aber auch für spezifische Joomlaelemnte gesondert definiert werden. 
Es ist aber emfehlenswert hier definitionen für die Schrift im p, td, und tr tag vorzunehmen, damit der Windowsexplorer die Schrift richtig darstellt.- */

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
        font-weight: normal;
	color: #CCCCCC;
	letter-spacing: 1px;
	text-align: left;
	}
	
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
        font-weight: normal;
	color: #CCCCCC;
	letter-spacing: 1px;
	text-align: left;
	}

td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
        font-weight: normal;
	color: #CCCCCC;
	letter-spacing: 1px;
	text-align: left;
	}
tr {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
        font-weight: normal;
	color: #CCCCCC;
	letter-spacing: 1px;
	text-align: left;
	}
	
ul {}
li {}

/* - Formulare - Hier werden die verschiedenen Formulare für Jommla definiert. - */ 

.button {
	border: 1px solid;
	border-color: #3A3C37;
	padding: 3px 3px 3px 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #cccccc;
	background-color: #575A52;
        margin-top: 6px;
	}

.inputbox {
	border: 1px solid;
	border-color: #3A3C37;
	padding: 3px 3px 3px 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #CCCCCC;
	background-color: #575A52;
        margin-top: 6px;
	}

.search	{}


/* - Hauptcontainer / maincontainer - Beim CSS layouten bietet es sich an einen Hauptcontainer zu 
erstellen indem sich alle weiteren Elemente der Website befinden. Damit lässt sich genauer die genaue Ausrichtung und Position
der einzelnen Inhalte wie Kopfzeile, Hauptinhalt, Menue, und Fußzeile bestimmen. - */	

	#container
	{
	margin: 3em auto;
	width: 900px;
	text-align: left;
	background-color: #575A52;
	float: none;
	position: relative;
	}

/* - Untercontainer - In den Untercontainern werden bei diesem Template verschiede Module aufgerufen um zu 
garantieren, das bei allen Browsern das Seitenlayout konstant bleibt. Die Position absolut ist für die Container zu vermeiden, da 
es zu erheblichen darstellungsfehlern kommen kann. */

#container1	
	{
	width: 900px;
	clear: both;
	background-color:  #6C7268;
	position: relative;
	}

#container2
	{
	width: 900px;
	clear: both;
	background-color:  #575A52;
	position: relative;
	margin-top: 6px;
	border-top-color: #575A52;
	border-top-style: solid;
	border-top-width: 6px;
	}

/* - Kopfzeile - Die Kopfzeile wurde in zwei Bereiche eingeteilt. #header stellt den linkenteil mir dem Logo dar, 
das Logo wurde in den Container eingebunden. #headerright bezeichnet den rechten Teil der Kopfzeile in dem die Topnavigation eingebunden wird. - */

#header
	{
	height: 50px;
	width: 600px;
	float: left;
	position: relative;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	background: url(../images/Logo.gif) no-repeat;
	}

#headerright
	{
	height: 50px;
	background-color: #6C7268;
	width: 300px;
	float: right;
	position: relative;
	text-align: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	}


/* - Navigation - In dieser Navigation werden die verschieden HTML-Tags gesondert definiert. Diese Definitionen gelten nur für die Navigation bei Joomla, 
wenn sie als horizontale Navigation benutzerdefiniert angewendet wird. In der Index.php wird im #navcontainer die #navilist aufgerufen und in der 
#navilist wird das joomlamodul user2 aufgerufen das ist in diesem Fall unsere Hauptnavigation */

#navcontainer 
{
	width: 900px;
	background-color: #6C7268;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	float: left;
	position: relative;
	clear: left;
}

#navcontainer ul {
	width: 900px;
	padding: 0;
	color: #FFFFFF;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	letter-spacing: 1px;
	margin-left: 0px;
	margin-bottom: 0px;	
}
#navcontainer ul li {
	display: inline;
}

#navcontainer ul li a
{
padding: 0.2em 12px;
background-color: #6C7268;
color: #FFFFFF;
text-decoration: none;
float: left;
border-right: 1px solid #FFFFFF;
}

#navcontainer ul li a:hover
{
	background-color: ##FF6600;
	color: #FFFFFF;
	bottom: 1px;
	float: left;
}

#navlist li a:hover, #navlist li a:active
{
	color: #FFFFFF;
	text-decoration: none;
	background: #FF6600;
	text-align: left;
}

/* - Topnavigation rechts oben / left above - 
Hier wird die Topnavigation definiert die in der Kopfzeile rechts oben angezeigt wird. In der Index.php wird im #navcontainer2 die #navilist2 aufgerufen und in der 
#navilist2 wird das joomlamodul user3 aufgerufen das ist in diesem Fall unsere Topnavigation */

#navcontainer2 
{
	width: 100%;
	background-color: #6C7268;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	float: left;
	position: relative;
}

#navcontainer2 ul li {
	display: inline;
}

#navcontainer2 ul
{
	color: #FFFFFF;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	letter-spacing: 1px;
	margin-left: 0px;
	margin-top: 0px;
	padding: 0px;
	float: right;
}

#navcontainer2 ul li a
{
	padding: 0.2em 10px;
	background-color: #6C7268;
	color: #FFFFFF;
	text-decoration: none;
	float: left;
	border-left: 1px solid #FFFFFF;
}

#navcontainer2 ul li a:hover
{
	background-color: ##FF6600;
	color: #FFFFFF;
	bottom: 1px;
	float: left;
}

#navlist2 li a:hover, #navlist li a:active
{
	color: #FFFFFF;
	text-decoration: none;
	background: #FF6600;
	text-align: left;
}

/* - Rubrik Suchen / Search - Für Jommla zwingend zu definieren. Wird als modul user4 in die Website geladen. Hier wird das Suchfeld beschrieben. */

#search_outer {
	float: right;
	width: 149px;
	text-align: center;
	background-color: #2E302C;
	vertical-align: middle;
}

#search_inner {
	border: 1 solid #2E302C;
	padding: 0px;
	height: 29px!important;
	overflow: hidden;
	background-color: #2E302C;
}

#search_inner form {
	padding: 0;
	margin: 0;
	background-color: #2E302C;
}

#search_inner .inputbox {
	border: 0px;
	padding: 3px 3px 3px 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #2E302C;
	bottom: 0px;
	clear: right;
	position: relative;
	background-color: #575A52;
    margin-top: 6px;
}

/* - Menue - Menueleiste auf der rechten Leite. Ist in zwei Containern definiert, der erste gibt die generelle Position an. 
Der zweite Container erstellt die Text Formatierung. - */

#menu
	{
	float: right;
	width: 150px;
	height: 100%;
	background-color: #2E302C;
	border-bottom-style: solid;
	border-bottom-width: 6px;
	clear: right;
	border-bottom-color: #575A52;
	top: 0px;
	bottom: 0px;
	position: relative;
	}

#menu_inner
	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #CCCCCC;
	letter-spacing: 3px;
	text-align: left;
	padding: 6px;
	font-weight: normal;
	}


/* - Inhalt - */

#spacer /* - use for path - */
	{
	float: left;
	width: 749px;
	height: 30px;
	background-color: #2E302C;
	top: 0px;
	text-align: left;
	bottom: 0px;
	clear: both;
	position: relative;
	border-right-color: #575A52;
	border-right-style: dotted;
	border-right-width: thin;
	border-bottom-color: #575A52;
	border-bottom-style: dotted;
	border-bottom-width: thin;
	
	}

#spacer_inner
	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
	font-style: italic;
	vertical-align: middle;
	margin-top: 6px;
	margin-left: 10px;
	}
	
#contents
	{
	float: left;
	width: 900px;
        height: 100%;
	background-color: #2E302C;
	border-bottom-color: #575A52;
	border-bottom-style: solid;
	border-bottom-width: 6px;
	top: 0px;
	clear: left;
	bottom: 0px;
	position: relative;
	border-right-color: !#575A52;
	border-right-style: !dotted;
	border-right-width: !thin;
        margin-top: 6px;
	}

#contents_inner
	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
        font-weight: normal;
	letter-spacing: 1px;
	text-align: left;
	white-space: normal;
        padding-top: 10px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 10px;
	height: auto;
	overflow: hidden;
	}

/* - Button Zurück / Back - */

.back_button {
  float: left;
  text-align: center;
  font-size: 10px;
  font-weight: normal;
  border: 0;
  width: auto;
  padding: 50px;
  line-height: 0;
  margin-top: 50px;
}

/* - Format für den Text der Navigationselemente "<< Start < Previous 1 Next > End >>" -  
Sollte bei Joomla immer definiert werden, da diese Navigation eine sinnvolle ergänzung für die usability ist. */

.pagenav {
	color: #CCCCCC; 
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: normal;
	font-size: 10px;
	letter-spacing: 1px;
	margin-top: 5px;
	} 
	
a.pagenav:visited {
	color: #CCCCCC; 
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: normal;
	font-size: 10px;
	letter-spacing: 1px;
	margin-top: 5px;
	}
	
a.pagenav:active {
	color: #CCCCCC; 
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: normal;
	font-size: 10px;
	letter-spacing: 1px;
	margin-top: 5px;
	}
	
a.pagenav:hover {
	color: #FF6600; 
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: normal;
	font-size: 10px;
	letter-spacing: 1px;
	margin-top: 5px;
	} 

/*Fromat für den "Read More" Link*/

a.readon:link {
	color: #FF6600; 
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: bold;
	font-size: 12px;
	letter-spacing: 1px;
	margin-top: 5px;} 

a.readon:hover {
	color: #FF6600; 
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: bold;
	font-size: 12px;
	letter-spacing: 1px;
	margin-top: 5px;
	}

a.readon:visited {
	color: #FF6600; 
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: bold;
	font-size: 12px;
	letter-spacing: 1px;
	margin-top: 5px;}

/* Format des Titel der Komponente */

.componentheading {}

/* Format des Titel des Inhalts*/
.contentheading {
	color: #6C7268; 
	text-decoration: none;
	text-align: left;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 1px;
	margin-bottom: 5px;
	} 
	
/* Tabelle die den aktuellen Text eines Artikels hat */

.contentpane {color: #6C7268; 
	text-decoration: none;
	text-align: left;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 1px;
	margin-bottom: 5px;}
 
.contentpaneopen {color: #6C7268; 
	text-decoration: none;
	text-align: left;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 1px;
	margin-bottom: 5px;} 

/* - Titel eines Kontaktbogen für die Pony Gallery - */

.sectiontableheader {
	color: #6C7268; 
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 1px;
	margin-bottom: 5px;
        padding-top: 15px;
        padding-bottom: 15px;
} 


/* - Titel eines Artikel - */
.contentpagetitle {
	color: #6C7268; 
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, Sans Serif;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 1px;
	margin-bottom: 5px;} 


/* - Pathway / Sie befinden sich hier - Hier definieren wir den Text und den Umgang mit Bildern im Pathway. Muss nur definiert werden, wenn dieses Feature genutzt wird. 
Uber mosPathWay wird das Feutre im HTML dokument in die Seite geladen - */

#pathway_text {
  	overflow: hidden;
	display: block;
	height: 25px;
	line-height: 25px !important;
	line-height: 22px;
	padding-left: 4px;
	border: 0;
	margin-bottom: 0;
}

#pathway_text img {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 6px;
}


/* - fusszeile - */

#footer	
	{
	width: 895px;
	clear: both;
	height: 30px;
	background-color: #6C7268;
	position: relative;
	margin-top: 6px;
	text-align: center;
	padding: 3px;
	}