/* CSS Document */

/*  
	1. Umdefinieren von tags
	========================
	 
  	Will man ein Tag umdefinieren, nimmt man das Tag als Identifier. Beispiele:

	B { font-family: Verdana; font-color: green;}
     
	TD { font-family: Arial; font-color: black;}

	Jede Zeile ist nach demselben Muster aufgebaut: 
  	Identifier { Attribut : AttributWert ; } 
  	
  	Das heisst dem tag Identifier werden die Attribute Eigenschaft : Wert zugeodnet 
  	Die Attribute stehen in geschweiften Klammern un werden als semikolonseparierte Liste uebergeben
  	{ Attribut1 : AttributWert1; Attribut2 : AttributWert2; Attribut3 : AttributWert3; }
*/

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

/* 
	2. Layout ids
	=============
	
	Eine Layout id kommt nur einmal auf einer Seite vor.
	Zum beispiel gibt es nur ein Menue und nur ein Submenue auf einer Seite
	
	Will man eine Layout-id erstellen, sucht man sich einen 
	praktisch beliebigen Namen aus und stellt die Raute davor:

	#gruen {font-color: green;}
	#grossertext { font-size: 40pt;}

	Und so verwendet man die Klasse bei einem Tag:

	<b id="gruen">Das ist ein grüner Text!</b>
	<b id="grossertext">Ein grosses A</b>
*/

#betontestlogo{cursor:pointer; cursor:hand; margin-top: 41px; margin-left: 6px; float:left; background-image:url(betontestlogo.gif); width:250px; height:44px;}

#topheader{float:right; width:526px; height:77px; background-color:#F0F0F0; position:relative}

#toplinks{position:absolute; right:10px; top:10px; word-spacing:2px;;}

#topbildleiste{position:absolute; top: 40px; right:0px; width:526px; height:40px; position:relative; background-image:url(top_bilder_leiste.jpg)} 

#menu{float:right; width:526px; height:32px; background-image:url(hintergrund_menue.gif); background-repeat:repeat-x;}

#submenu{float:right; width:526px; height:32px; background-image:url(hintergrund_untermenue.gif); background-position:top; background-repeat:repeat-x;}

#submenuzeile1{float:right; width:526px; height:22px; }

#submenuzeile2{float:right; width:526px; height:32px;}

#contenttext{float:right; width:526px;}

#widecontenttext{float:left; width:800px;}

#leftpanel{float:left; width:274px;}

#footer{float:left; width:800px; background-color:#F0F0F0; padding:10px;}

/*
	3. Layout classes
	=================

	Will man eine allgemeingültige Layout-Klasse erstellen, sucht man sich einen 
	praktisch beliebigen Namen aus und stellt den Punkt davor:

	.gruen {font-color: green;}
     
	.grossertext { font-size: 40pt;}

	Und so verwendet man die Klasse bei einem Tag:

    <b class="gruen">Das ist ein grüner Text!</b>
    <b class="grossertext">Ein grosses A</b>    
    
    Classes vs IDs
	Use IDs when there is only one occurence per page. 
	Use classes when there are one or more occurences per page.
*/


.neuigkeitentext{
	position:absolute; 
	left:10px;
	width: 780px;
}
/* Bildbreite muss 250px sein
   10px linker Rand, 530px Text, 10px zum Bild, 250px Bild*/
.neuigkeitentextmitbild{
	position: relative; 
	font: 0.9em Tahoma, sans-serif;
	color: #222222;
	width: 480px;
	float: none;
	clear:left;
	left: 0px;
}

.graypanel{
	border:solid 1px #666666; background-color:#F7F7F7; padding:10px; margin:10px;
}

.bodytext {
	font: 0.9em Tahoma, sans-serif;
	color: #222222;
}

.bildseitebodytext {
	float: left;
	width:800px;
	font: 0.9em Tahoma, sans-serif;
	color: #222222;
}

.titletext {
	font: 0.7em Tahoma, sans-serif;
	font-size:36px;
	font-weight:bold;
	color:#CC0000;
}
.whitetitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:36px;
	font-weight:bold;
	color:#FFFFFF;
}
.mediumtitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:24px;
	font-weight:bold;
	color:#CC0000;
}
.smalltitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:20px;
	font-weight:bold;
	color:#CC0000;
}
.tinytitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:16px;
	font-weight:bold;
	color:#CC0000;
}
.tinynewstitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#CC0000;
	float:left;
}
.tinypubtitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#CC0000;
	float:left;
}
.backaufimage {
	float:left;
	font: 0.7em Tahoma, sans-serif;
	font-size:16px;
	font-weight:bold;
	color:#CC0000;
}
.smallwhitetext {
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color: #FFFFFF;
}

/* Formatierung fuer a*/
.smallwhitetext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color: #FFFFFF;
	text-decoration:none;
}

/* Formatierung fuer a*/
.smallwhitetext a{
	text-decoration:underline;
}

/* Formatierung fuer a:hover */
.smallgraytext a:hover{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color: #999999;
}

/* Formatierung fuer a*/
.smallgraytext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#999999;
	text-decoration:none;
}

/* Formatierung fuer a:hover, falls die mouse über den link geht*/
.smallgraytext a:hover{
	text-decoration:underline;
}
.smallredtext {
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#CC0000;
}

/* Formatierung fuer a*/
.smallredtext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#CC0000;
	text-decoration:none;
}

.smalldarkgraytext {
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#444444;
}

/* Formatierung fuer a*/
.smalldarkgraytext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#444444;
}

/* Formatierung fuer a*/
.darkgraytext a{
	font: 0.8em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#444444;
}

/* Formatierung fuer a*/
.smallDDredtext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#DD0000;
}

/* Formatierung fuer a:hover */
.smallredtext a:hover{
	text-decoration:underline;
}