/*  =========================================================
URL: http://www.bremswagen.de/
Datei: screen.css
Media: screen, projection 

Datum: 2009-06-26
Autor: Stefan Brinkers / anveno
Mail:  mail@brinkers-media.de
Web:   http://www.anveno.de/
                                   
1. Allgemeine Selektoren 
	1.1 Allgemein gültige Formatierungen
	1.2 Allgemeine Klassen
                              
2. Layoutbereiche 
	2.1 Kopf (Header)
	2.2 Content-Bereich
	2.3 linker UND rechter Bereich
	2.4 Fussbereich (Footer)

3. Navigation
	3.1 Menu horizontal
	3.2 Menu vertikal (untermenu)
	
4. Contentbereich


========================================================== */


/* ##############################
   1. Allgemeine Selektoren 
############################## */

html{
margin:0px;
padding:0px;
}

body{
margin:0px;
padding:0px;
background-color:#612323;
background-image:url(../images/body_background.jpg);
background-repeat:repeat-x;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#494949;
}

img, img a, a img,
#content .image a{
border:0px;
border-style:none;
text-decoration:none;
}

.clear{
clear:both;
height:1px;
line-height:1px;
font-size:1px;
padding:0px;
margin:0px;
}
.header-clear{
background-image:url(../images/header_clear.jpg);
background-repeat:no-repeat;
}

/* ========================================================
   1.1 Allgemein gültige Formatierungen 
======================================================== */

p, 
ul, 
ol {
  margin-top: 0 ;
  margin-right: 0 ;
  margin-bottom: 1em ;
  margin-left: 0;
}

ul ul { 
  margin: 0; 
}

li {
  margin-top: 0 ;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 1em;
}

/**---------------------------- HEADER BEREICH ----------------------------**/

#header{
width:980px;
height:190px;
margin: 0 auto;
padding:0px;
}

#logo{
width:331px;
height:190px;
float:left;
background-image:url(../images/logo_background.jpg);
background-repeat:no-repeat;
}
	
	#logo-schatten{
	position:absolute;
	top:7px;
	margin-left:331px;
	z-index:99;
	}

#fotos{
width:398px;
height:173px;
padding-top:17px;
float:left;
background-image:url(../images/fotos_background.jpg);
background-repeat:repeat-x;
z-index:1;
}

#rechtsoben{
width:251px;
height:190px;
float:left;
background-image:url(../images/header_rechtsoben.jpg);
background-repeat:no-repeat;
}

#trecker-treck-edewecht{
position:absolute;
top:86px;
margin-left:684px;
z-index:98;
}
#header-ro-schatten{
position:absolute;
top:0px;
margin-left:724px;
z-index:98;
}

/**---------------------------- MAIN ----------------------------**/

#main{
width:980px;
min-height:385px;
margin: 0 auto;
padding:0px;
/*clear:both;*/
}
	*html #main{
	height:385px; /** min-height for IE **/
	}
	
#left{
width:153px;
padding:0px 0px 0px 58px;
margin:0px;
background-image:url(../images/left_background.gif);
background-repeat:repeat-y;
float:left;
}
	#flaggenmann{
	margin-left:-15px;
	margin-bottom:0px;
	padding-bottom:0px
	}

#right{
width:215px;
background-image:url(../images/right_back.png);
background-repeat:repeat-y;
float:left;
min-height:385px;
text-align:center;
padding-top:25px;
}
	*html #right{
	height:385px; /** min-height for IE **/
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/right_back.png', sizingMethod='scale');
	background:none;
	}

/**---------------------------- FOOTER ----------------------------**/

#footer{
background-image:url(../images/footer_back.jpg);
background-repeat:no-repeat;
width:980px;
height:14px;
margin: 0 auto;
padding:0px;
clear:both;
}

#container{
width:518px;
background-image:url(../images/content_back.jpg);
background-repeat:repeat-y;
float:left;
padding-bottom:20px;
}

#content{
background-image:url(../images/container_background.jpg);
background-repeat:no-repeat;
padding:10px 40px 0px 40px;
margin:0px;
min-height:445px;
}
	*html #content{
	height:445px; /** min-height for IE **/
	}

/**---------------------------- NAVIGATION ----------------------------**/

.rex-navi1, .rex-navi1 ul{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
font-family: arial, Helvetica, sans-serif;
}

.rex-navi1 li {
line-height:22px;
margin: 0px 0px 1px 0px;
padding: 0px 0px 0px 0px;
list-style-type:none;
}

.rex-navi1 ul {margin: 0 0 15px 0;}
.rex-navi1 ul li { margin: 0 0 0 0; }

.rex-navi1 a, .rex-navi1 a:visited {
display:block;
width:128px;
margin-left:0px;
padding-left:24px;
background:url(../images/navigation.gif);
background-position:left top;
background-color:transparent;
background-repeat:no-repeat;
text-align:left;
color:#494949;
text-decoration:none;
}
.rex-navi1 a:hover {
background-position:left center;
overflow:hidden;
}

.rex-navi1 a.rex-current, .rex-navi1 a.rex-current:hover, .rex-navi1 a.rex-current:visited {
background-position:left bottom;
color:#A73331;
}



.rex-navi1 .rex-navi2 a,
.rex-navi1 .rex-navi2 a:visited
{
font-size:11px;
display: block;
/*padding-left:28px;*/
margin-left:0px;
background-image:none;
color:#494949;
text-decoration: underline;
}

.rex-navi1 .rex-navi2 a:hover,
.rex-navi1 .rex-navi2 .rex-current a:hover
{
background-image:none;
text-decoration: none;
color:#494949;
}
.rex-navi1 .rex-navi2 .rex-current a, 
.rex-navi1 .rex-navi2 .rex-current a:visited 
{
background-image:none;
font-weight:bold;
text-decoration: none;
color:#494949;
}


	 
/** --- Typo im Content Bereich --- **/
#content h1{
font-size:17px;
letter-spacing:2px;
color:#A73331;
margin:0px;
padding:0px 0px 10px 0px;
}
#content h2{
font-size:15px;
letter-spacing:1px;
margin:0px;
padding:20px 0px 10px 0px;
}
#content h3{
font-size:13px;
font-weight:bold;
color:#A73331;
margin:0px;
padding:10px 0px 8px 0px;
}
#content h4{
font-size:13px;
font-weight:bold;
margin:0px;
padding:10px 0px 8px 0px;
}
#content h5{
font-size:13px;
font-weight:bold;
color:#A73331;
margin:0px;
padding:10px 0px 2px 0px;
border-bottom:1px dotted #A73331;
text-align:right;
}

#content p{
line-height:20px;
}

#content blockquote{
font-style:italic;
margin-left:0px;
padding-left:0px;
}
#content cite{
font-size:10px;
font-style:normal;
display:block;
}

#content a, #content a:visited{
color:#A73331;
text-decoration:none;
border-bottom:1px solid #A73331;
}

#content a:hover{
color:#A73331;
text-decoration:un;
border-bottom:0px;
border-bottom:none;
}

#content ul, #content li {
line-height:19px;
margin-top:5px;
list-style-type:disc;
}
#content li span{
color:#494949;
}

/**---------------------------- SUCHFUNKTION ----------------------------**/

#suche{
float:left;
margin-top:157px;
padding-left:15px;
height:20px;
width:50px;
line-height:20px;
font-weight:bold;
}

#suchfunktion{
margin-top:154px;
float:left;
}

	#suchfunktion form, #suchfunktion fieldset{
	border:0px;
	margin:0px;
	padding:0px;
	}
	
	#suchfunktion #search{
	background-color:#E9E9E9;
	margin:0px;
	padding:3px;
	font-size:11px;
	width:127px;
	height:13px;
	border:1px solid #1F1F1F;
	}
	
	#suchfunktion input.submit {
	height:24px;
	width:36px;
	background-color:transparent;
	background-image:url(../images/suchfunktion_ok.gif);
	background-repeat:no-repeat;
	border:0 none;
	color:#FFFFFF;
	font-size:10px;
	font-weight:bold;
	margin:0px;
	padding:4px 5px 8px 0px;
	}


/**---------------------------- REDAXO MODULE ----------------------------**/
/* 

Das Modul nutzt 6  Klassen zur Ausrichtung der Bilder. 
.pleft(_b) , .pright(_b) und .pnormal(_b)    


.pleft für links ausgerichtete Bilder
.pright für rechts ausgerichte Bilder
.pnormal kann zur Definition einer Normalanzeige verwendet werden.  

.pleft_b, .pright_b und .pnormal_b 
definieren die Anzeige der Bilder für den 2. Stil.  
z.B. Anzeige mit Rahmen

Code: 

*/ 




/* 
---------START BILDMODUL -----------------------
Definition der Klassen ohne Rahmen 
CCS für REDAXO Bild-Modul
Erstellt von: Thomas Skerbis 
Stand: 23.05.2008 
*/

.pleft {
	float: left;
	margin-top: 6px;
	margin-right: 6px;
	margin-bottom: 4px;
	vertical-align: text-bottom;

border: none;
}
.pright {
	float: right;
	margin-top: 6px;
	margin-left: 8px;
	margin-bottom: 5px;
	vertical-align: text-bottom;

border: none;
}
.pnormal {
	clear: both;
border: none;
	
}


/* Definition der KLassen für 2.Stil (z.B. mit Rahmen) */

.pleft_b {
	float: left;
	margin-top: 6px;
	margin-right: 6px;
	margin-bottom: 4px;
	vertical-align: text-bottom;
border: 0px;
}
.pright_b {
	float: right;
	margin-top: 6px;
	margin-left: 8px;
	margin-bottom: 5px;
	vertical-align: text-bottom;
border: 0px;
}
.pnormal_b {
	clear: both;
	border: 0px;
}

.dsponsor{
	margin-bottom:15px;
	}



/*
------ENDE Bildmodul ------
*/

/* 
REDAXO-Modul: do form!
Beschreibung: CSS-DEMO
Bereich: CSS 
Für: do form! 2.x  
Stand: 20.04.2009 
Version: 1.0
--------------------------------------------------------------------------
HINWEISE:
--------------------------------------------------------------------------
!! Das CSS berücksichtigt nicht alle möglichen Felder 
!! Farben nicht 1 zu 1 übernehmen
!! ist ja nicht wirklich hübsch

Weitere Infos zu den CSS hier:
http://wiki.redaxo.de/index.php?n=R4.DoForm
-------------------------------------------------------
*/

/* Formular Definition */
/*//////////////////////////////////////////////////////////////////////////////*

/* Div das das Formular umschließt */
.formgen, a63-form {
	font-size: 1em;
	padding-right: 10px;
	padding-left: 10px;
}


/* Was passiert wenn auf das Label geklickt wird? */
label,
select,
input[type=checkbox],
input[type=radio],
input[type=button],
input[type=submit]
{
cursor : pointer;

}



.formgen form, .a63-form
{
line-height : 120%;

}




/* 
Wie sehen die einzelnen Blöcke aus? 
Jedes Feld wird von einem DIV umschlossen, das hier definiert werden kann
*/


.formgen .formblock, .a63-form .formblock
{
	margin-bottom: 15px;
	margin-top: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 2px;
	padding-left: 5px;	
	
}
 .forminfo 
{
	/*width: 360px;*/
	margin-bottom: 15px;
	background-color: #FFCC33;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 2px;
	padding-left: 5px;
	font-weight: bold;
	border: 5px dashed #990000;
}

/*
Verhalten von br-Tags
*/
.formgen br, .a63-form br
{
clear : both;
}


/* 
--------- FORMULAR-OBJEKTE ------------ 
*/


/* Mehrzeiliges Eingabefeld */
.formgen .formtextfield, .a63-form #gbook_text
{
	width: 400px;
	height: 200px;
	margin-left: 4px;
	border: 1px solid #979699;
	background-color: #F1F1F1;
}


/* Textfeld */
.formgen .formtext, .a63-form input
{
	width: 250px;
	margin-left: 4px;
	padding-bottom: 4px;
	background-color: #F1F1F1;
	border: 1px solid #979699;
	margin-bottom:2px;
}

.formgen input:focus, .formgen input:hover,
.formgen select:focus, .formgen select:hover, 
.formgen textarea:focus, .formgen textarea:hover,
.a63-form input:focus, .a63-form input:hover,
.a63-form select:focus, .a63-form select:hover, 
.a63-form textarea:focus, .a63-form textarea:hover {
	border-bottom-color: #000000;
	background-color: #FFFFFF;	
	color: #A73331;
}



/* Label */
.formgen label, .a63-form label {
	width: 120px;
	clear: left;
	float: left;
	height: 25px;
	font-weight: bold;
	color: #A73331;
}


/* Aussehen der Select-Ausgabe */
.formgen .formselect
{
	width: 200px;
	background-color: #F1F1F1;
	margin-left: 4px;
	color: #000000;
}


/* Sende-Button */
.formgen .formsubmit, .a63-form .a63-fsubmit
{
	/*width: 100%;*/
	padding:2px 15px 2px 15px;
	text-align: center;
	background-color: #A73331;
	border: 1px solid #FFE93C;
	float: right;
	color: #FFFFFF;
	margin:2px 10px 2px 0px;
}



/* Fieldsetbeschriftung */
.formgen legend, .a63-form legend {
	color: #FFFFFF;
	background-color: #990000;
	width: 150px;
	display:none;
}
.formgen .fieldset, .a63-form fieldset{
	margin-bottom: 10px;
	border:0px;
}

/* -------------- AUSGABEN / Fehlermeldungen --------*/


/* Markierung der Labels bei Fehler */
.formgen .formerror {
	
	border-bottom-width: 1px;
	color: #990000;
}
.a63-form .error {
	margin-bottom: 15px;
	background-color: #FFCC33;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 2px;
	padding-left: 5px;
	font-weight: bold;
	border: 5px dashed #990000;
}


.formgen .formcaptcha
{
	border: 2px solid #990000;
	vertical-align: top;
	float: left;
	margin-right: 10px;
}

.formgen .formreq, {
	color: #006633;
}

.formgen .formheadline {
	font-size:15px;
	letter-spacing:1px;
	margin:0px;
	padding:20px 0px 10px 0px;
}

/*//////////////////////////////////////////////////////////////////////////////*
/* Ende der Formulardefinition */

/** //////////////////////// Gästebuch ////////////////// **/

body #content .a63-pagination, body #content .a63-pagination li{
list-style-type:none;
}
body #content .a63-pagination li{
padding:2px;
margin:2px;
border:1px solid;
width:18px;
text-align:center;
}
body #content .a63-pagination li a{
border-bottom:0px;
}

.a63-form p{
padding:0px;
margin:0px;
line-height:normal;
}

/** //////////////////////// Tabelle CSV ////////////////// **/
/* 
  Beispiel:
  Überschrift linksbündung, gross
  Fusszeile rechtsbünding, kleiner
  alternierende Zeilen, 
  erste Spalte Fett,
  zweite Spalte gerader Zeilen grösser und grün (das ist wirklich nur ein Beispiel.)
*/
table.csv {
    /*color:black;
    background-color:#808080;
	width:100%;*/
}
table.csv caption {
    text-align:left;
    font-weight:bold;
	font-size:17px;
	letter-spacing:2px;
	color:#A73331;
	margin:0px;
	padding:0px 0px 10px 0px;
}
table.csv tfoot {
    text-align:right;
    font-size:smaller;
}
table.csv tr.odd {
  background-color:#EFEFEF;
}
table.csv tr.even {
  background-color:#FAFAFA;
}
table.csv .col1 {
  font-weight:bold;
}
table.csv tr.even td.col2
{
   /* font-size:larger;
    color:green;*/
}



/* JAOS Gallery
*******************************************************************************/
/* JAOS Gallery
*******************************************************************************/
#jaos
	{
	margin:0 auto;
	}

.jaosg_galerie
	{
	text-align:center; 
	vertical-align:middle; 
	padding:5px;
	}

.jaosg_thumbnail 
	{
	margin:5px;
	float: left;
	height: 80px;
	width: 80px;
	text-align: left;
	vertical-align:middle;
	}

.jaosg_nav
	{
	text-align: center;
	}

.jaosg_bild	
	{
	text-align: center;
	}

.jaosg_bildbeschreibung
	{
	text-align: justify;
	}
	
	
	
.galerie .image{
float:left;
margin:2px;
}


/**
 * Modul WYSIWYGImage, Wysiwyg-Text mit Bild/Bildergalerie
 */
div.wysiwygimg {}
/* ----- Hack only for IE 7 ----- */
*+html div.wysiwygimg {overflow:hidden;}

.wysiwygimg .wysiwygimgclear {clear:both; display:block; font-size:1px; line-height:0px; margin:0; padding:0; position:relative;}

/* Text */
.wysiwygimg .wysiwygimgtext {}

/* Bild und Link */
.wysiwygimg img.wysiwygimg {border:0px none; margin:1px}
.wysiwygimg img.wysiwygimg {border:solid 5px #f5f5f5; padding:1px;}
.wysiwygimg a.wysiwygimg img {border:0px none;padding:0px;vertical-align:top; margin:1px}

.wysiwygimg a.wysiwygimg, .wysiwygimg a.wysiwygimg:link {border:solid 5px #f6f6f6; display:table; display:inline-block; line-height:0.0em;}
.wysiwygimg a.wysiwygimg:visited {}
.wysiwygimg a.wysiwygimg:hover {border:solid 5px #e4e4e4;}
.wysiwygimg a.wysiwygimg:focus {border:solid 5px #e4e4e4;}
.wysiwygimg a.wysiwygimg:active {border:solid 5px #e4e4e4;}

/* Bildunterschrift */
.wysiwygimg .wysiwygimgtitle {color:#666; font-size:0.8em; font-style:italic; margin:2px 0px;}

/* Wrapper-Classe um Bild und Bildunterschrift*/
.wysiwygimg .wysiwygimgwrap {}

/* Bild links im Text (Textumfluss) */
.wysiwygimg .wysiwygimgleft {float:left; margin:0 1.0em 0 0;}

/* Bild rechts im Text (Textumfluss) */
.wysiwygimg .wysiwygimgright {float: right; margin:0 0 0 1.0em;}

/* Bild oben links */
.wysiwygimg .wysiwygimgtopleft {float:left; margin-bottom:0.5em;}

/* Bild oben rechts */
.wysiwygimg .wysiwygimgtopright {float:right; margin-bottom:0.5em;}

/* Bild oben mittig */
.wysiwygimg .wysiwygimgtopcenter {margin-bottom:0.5em; text-align:center;}
.wysiwygimg .wysiwygimgtopcenter a.wysiwygimg {margin:0 auto;}

/* Bild unten links */
.wysiwygimg .wysiwygimgbottomleft {float:left; margin-top:0.5em;}

/* Bild unten rechts */
.wysiwygimg .wysiwygimgbottomright {float:right; margin-top:0.5em;}

/* Bild unten mittig */
.wysiwygimg .wysiwygimgbottomcenter {margin-top:0.5em; text-align:center;}
.wysiwygimg .wysiwygimgbottomcenter a.wysiwygimg {margin:0 auto;}
.wysiwygimg .wysiwygimgbottomcenter img.wysiwygimg {margin:0 auto;}

/* Für Bilder links/rechts vom Text  */
.wysiwygimg table {border-spacing: 0px; font-size:1.0em;}
.wysiwygimg td {vertical-align:top; font-size:1.0em;}

/* Bild links vom Text */
.wysiwygimg td.wysiwygimgleftcol {padding-right:1.0em;}

/* Bild rechts vom Text */
.wysiwygimg td.wysiwygimgrightcol {padding-left:1.0em;}