/*********************************************************************************

  Project   : Stadtumbauquartier Gelsenkirchen Tossehof
  Copyright : Design - zzak - www.zzak.de

**********************************************************************************/


/* ### undo #################################################################### */

:link,:visited { text-decoration:none; }
ul,ol { list-style: none; }
h4,h5,h6,pre,code { font-size:xx-small; font-weight:normal; color: #000; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, dl, dt, dd { margin:0; padding:0 }
img, a img,:link img,:visited img, fieldset { border:none }
img { margin:0; padding:0; vertical-align:bottom; }
address { font-style:normal }

table { border:none; padding:0px; margin:0px; border-spacing:0px; font-size:1em;}
tr { border:none; padding:0px; margin:0px; }
td { border:none; padding:0px; margin:0px; vertical-align:top; border-spacing:0px; }


legend { display:none; }

div, p, li, a {background-repeat:no-repeat; }

/* ### reset some basic style ################################################### */

dl      {margin: 0 0 0 0;}
dl dt   {margin: 0 0 0 0;}
dl dd+dt  {margin-top: 0;}
dl dd   {margin: 0 0 0 0;}

ol      {list-style:decimal; margin-left: 20px;}
ol li   {margin: 0 0 0 0;}
ol li ol  {margin: 0 0 0 0;}
ol li ul  {margin: 0 0 0 0;}

p     {margin-bottom: 0em; line-height: 1.2em;}

ul      {list-style: none;}
ul li   {margin: 0 0 0 0;}
ul li ul  {margin: 0 0 0 0; list-style: none;}
ul li ol  {margin: 0 0 0 0;}

pre     {font-size:xx-small; }

a { color: #900; }
a:hover { text-decoration:none; color: #666666; }

/* ### HTML ###################################################################### */
html {
  min-height: 99%;
  margin-bottom: 1px;
}

/* ### BODY ###################################################################### */
body {
  background-color: #214fa2;
  color: #000;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  }

/* \*/ * html body { text-align:center; font-size: 12px; } /* *//* IE 5.5 Hack */

.clearer {
  display:block;
  clear:both;
  line-height:0;
  height:1px;
  font-size:0;
  visibility:hidden;
}

.clear {
  clear:both;
}

.floatLeft { float:left; }
.floatRight { float:right; }

.warning { color:#f00; background: inherit; }

/* ### Website Content ############################################################ */
#site-content {
  position:relative;
  display:block;
  margin:0 auto;
  padding:0;
  width:768px;
  text-align: left;
}

#site {
  position: relative;
  display: block;
  border: 2px solid #FFF;
  background-color: #FFF;
  width: 768px;
}

/* ### Header ##################################################################### */
#logoheader {
  position: relative;
  margin-top: 24px;
  width: 768px;
  height: 60px;
  background-image: url(files/tossehof_schriftzug.gif);
  background-repeat: no-repeat;
  background-position: left 24px;
  text-align: right;
}


#header {
  position: relative;
  padding: 0px;
  width: 768px;
  height:136px;
  background-color: #FFF;
}

/* \*/ * html #header { left:0px; }/* *//* IE 5.5 Hack */

#imp {
  position: relative;
  float: right;
  text-align: right;
  vertical-align: bottom;
  color: #90a7d1;
  padding: 5px 0px 0px 0px;
}

#imp a,
#imp a:link {
 color:#90a7d1;
}

#imp a:hover {
 color: #FFF;
}

#fontsize {
  position: relative;
  width: 100%;
  height: 25px;
  float: right;
  text-align: right;
  color: #FFFFFF;
  padding: 0px 0px 15px 0px;
}

#fontsize a,
#fontsize a:link {
 color:#FFFFFF;
}

#fontsize a:hover {
 color: #90a7d1;
}

#fontsize ul {
  display: inline;
}

#fontsize ul li {
  color: #FFF;
  border: 1px solid #FFF;
  display: inline;
  padding: 3px;
  margin: 1px;
  background-color: #666;
  text-align: center;
}

#order {
  position: relative;
  float: right;
  text-align: left;
  width: 235px;
  padding: 0px 38px 0px 0px;
  margin-top: -90px;
  z-index: 3;
}

/* ### Logo ####################################################################### */

/* ### Navi ####################################################################### */

#navleft {
  position: relative;
  float:left;
  color: #FFF;
  width: 200px;
  background-image: url(files/hg_juze_button_off.gif);
  background-repeat: repeat-y;
}

/*Startseite*/
#nav1 li {
  color: #fff;
}

#nav1 a,
#nav1 a:link {
  display:block;
  font-size: 13px;
  padding: 10px 0px 10px 12px;
  color: #FFF;
  width: 188px;
}

#nav1 a:hover {
display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_startseite_button_on.gif);
  background-position: center left;

  background-repeat: no-repeat;
}

#nav1 .active {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_startseite_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav1 .active a {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_startseite_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

/* Umbauprojekt*/
#nav4 li {
  color: #fff;
}

#nav4 a,
#nav4 a:link {
  display:block;
  font-size: 13px;
  padding: 10px 0px 10px 12px;
  color: #FFF;
  width: 188px;
}

#nav4 a:hover {
display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_umbau_button_on.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav4 .active {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_umbau_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav4 .active a {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_umbau_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

/* Quartiersladen*/
#nav5 li {
  color: #fff;
}

#nav5 a,
#nav5 a:link {
  display:block;
  font-size: 13px;
  padding: 10px 0px 10px 12px;
  color: #FFF;
  width: 188px;
}

#nav5 a:hover {
display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_laden_button_on.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav5 .active {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_laden_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav5 .active a {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_laden_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}


/* Jugendzentrum */
#nav6 li {
  color: #fff;
}

#nav6 a,
#nav6 a:link {
  display:block;
  font-size: 13px;
  padding: 10px 0px 10px 12px;
  color: #FFF;
  width: 188px;
}

#nav6 a:hover {
display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_juze_button_on.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav6 .active {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_juze_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav6 .active a {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_juze_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

/* Schulen */
#nav7 li {
  color: #fff;
}

#nav7 a,
#nav7 a:link {
  display:block;
  font-size: 13px;
  padding: 10px 0px 10px 12px;
  color: #FFF;
  width: 188px;
}

#nav7 a:hover {
display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_schulen_button_on.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav7 .active {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_schulen_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav7 .active a {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_schulen_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

/* Vereine */
#nav8 li {
  color: #fff;
}

#nav8 a,
#nav8 a:link {
  display:block;
  font-size: 13px;
  padding: 10px 0px 10px 12px;
  color: #FFF;
  width: 188px;
}

#nav8 a:hover {
display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_vereine_button_on.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav8 .active {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_vereine_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav8 .active a {
  display:block;

  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_vereine_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

/* Kontakt */
#nav9 li {
  color: #fff;
}

#nav9 a,
#nav9 a:link {
  display:block;
  font-size: 13px;
  padding: 10px 0px 10px 12px;
  color: #FFF;
  width: 188px;
}

#nav9 a:hover {
display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_kontakt_button_on.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav9 .active {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_kontakt_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav9 .active a {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_juze_kontakt_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

/* Links */
#nav10 li {
  color: #fff;
}

#nav10 a,
#nav10 a:link {
  display:block;
  font-size: 13px;
  padding: 10px 0px 10px 12px;
  color: #FFF;
  width: 188px;
}

#nav10 a:hover {
display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_links_button_on.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav10 .active {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_links_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}

#nav10 .active a {
  display:block;
  color: #FFF;
  font-weight: bold;
  background-image: url(files/hg_links_button_active.gif);
  background-position: center left;
  background-repeat: no-repeat;
}


/* Oberer Bilderbereich */
#toppics {
  position: relative;
  width: 768px;
  height: 109px;
}


/* Obere Navigation */
#navtop {
  position:relative;
  width: 768px;
  height:26px;
  background-image: url('files/grau.gif');
  background-repeat: repeat-x;
}

a#start
{
  background-image: url('files/start_button.gif');
  width : 67px;
  height : 26px;
}

a#umbau
{
  background-image: url('files/umbau_button.gif');
  width : 120px;
  height : 26px;
}

a#laden
{
  background-image: url('files/laden_button.gif');
  width : 122px;
  height : 26px;
}

a#juze
{
  background-image: url('files/jugendzentrum_button.gif');
  width : 134px;
  height : 26px;
}

a#schule
{
  background-image: url('files/schulen_button.gif');
  width : 104px;
  height : 26px;
}

a#vereine
{
  background-image: url('files/vereine_button.gif');
  width : 104px;
  height : 26px;
}

a#kontakt
{
  background-image: url('files/kontakt_button.gif');
  width : 58px;
  height : 26px;
}

a#links
{
  background-image: url('files/links_button.gif');
  width : 47px;
  height : 26px;
}

a.imagehover 
{
  display: block;
  background-position: bottom;
  background-repeat: no-repeat;
}
      
a.imagehover:hover 
{
    background-position: top;
}

a.current 
{
  display: block;
  background-position: top;
  background-repeat: no-repeat;
}
      
a.current:hover 
{
    background-position: bottom;
}

/* ### Teaser ##################################################################### */

#main-teaser {

  text-indent:-700em;
  height: 220px;
}

/* ### Content #################################################################### */
#navleftCol {
  position:relative;
  float: left;
  width: 200px;
  background-image: url(files/hg_navleftcol.gif);
  background-repeat: repeat-y;
}


#content {
  position:relative;
  float: left;
  padding:0px;
  background-color: #c4d996;
  width:768px;
}


#main-content {}



#main {
  float:right;
  width:560px;
}


/* ### main-block => MainContent ################################################### */

#main-block {
  float:left;
  width: 560px;
  color: #000;
  padding: 20px 0px 20px 0px;
}


#main-content-block {
  position: relative;
  float: left;
  width: 370px;
}

#main-content-block ul {
  list-style: square outside;
  padding-left: 20px;  
}

#main-content-block ul li {

}

#main-picture-block {
  position: relative;
  float: right;
  width: 170px;
}

#main-content-col {
  position: relative;
  float: left;
  width: 540px;
}

#main-content-col ul {
  list-style: square outside;
  padding-left: 20px;  
}

#main-content-col ul li {

}

/* ### Heads ####################################################################### */

.sub1 {
  height: 26px;
  background-image: url(files/sub1.gif);
  background-repeat: no-repeat;
  font-weight: bold;
}

.sub2 {
  float: left;
  padding-top: 10px;
  padding-left: 30px;
  height: 30px;
  width: 150px;
  background-image: url(files/sub2.gif);
  background-repeat: no-repeat;
  font-weight: bold;
}

.sub3 {
  float: left;
  padding-top: 5px;
  padding-left: 30px;
  height: 30px;
  width: 150px;
  background-image: url(files/sub3.gif);
  background-repeat: no-repeat;
  font-weight: bold;
}

.sub4 {
  float: left;
  padding-top: 5px;
  padding-left: 30px;
  height: 30px;
  width: 150px;
  background-image: url(files/sub4.gif);
  background-repeat: no-repeat;
  font-weight: bold;
}

.sub5 {
  float: left;
  padding-top: 5px;
  padding-left: 30px;
  height: 30px;
  width: 150px;
  font-weight: bold;
}


/* ### Footer ###################################################################### */

#footer {
  display:block;
  width:100%;
}

#footer p {
  padding: 20px 0;
  color:#c4c4c4;
  background:inherit;
}

#footer p a,
#footer p a:link {
  color:#c4c4c4;
  text-decoration: underline;
  background:inherit;
}

#footer p a:hover {
  color:#c4c4c4;
  text-decoration: none;
  background:inherit;
}

.chkbx {
  vertical-align: middle;
}

#region {
  width:260px;
  height:140px;
  background-image: url(files/mallorca.gif);
  background-repeat: no-repeat;
  background-position: 0px 10px;
}

#region2 {
  width:260px;
  height:140px;
  background-image: url(files/domrep.gif);
  background-repeat: no-repeat;
  background-position: 0px 10px;
}

/* ### Formular ###################################################################### */

/*/////////////////////////////////////////////////////////////////////////////
CSS - Definition - DEMO 1
do form!  
Stand: 2.08.2008 

Erstellt von: Thomas Skerbis 
Dieses CSS dient als Beispiel

Bitte nicht 1:1 übernehmen, ist ja auch nicht wirklich hübsch ;-) 
Funktioniert nicht mit Formular-Generator < v.4.43
 
/*



/* Formular Definition */


/* Div das das Formular umschließt */
.formgen {
  font-size: 1em;
}



label,
select,
input[type=checkbox],
input[type=radio],
input[type=button],
input[type=submit]
{
cursor : pointer;
}



.formgen form
{
line-height : 120%;
width: 500px;

}


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


.formgen .formblock
{
  margin-bottom: 15px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 2px;
  padding-left: 5px;
}


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


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


/* Mehrzeiliges Eingabefeld */
.formgen .formtextfield
{
  width: 300px;
  height: 150px;
  margin-left: 4px;
  background-color: #FFF;
}


/* Textfeld */
.formgen .formtext
{
  width: 300px;
  background-color: #FFF;
  margin-left: 4px;
}
/* Trennelement , Abstand */
.formgen .formtrenn
{
  display: block;
  height: 30px; 
}
/* Hinweistext */
.formgen .formhinweis
{
  font-weight: bold;

  color: #990000;
  font-size: 1.2em;
}
/* Überschrift */
.formgen .formheadline
{
  font-weight: bold;
  color: #ACBDD5;
}


/* Passwortfeld */
.formgen .formpassword
{
  width: 300px;

  background-color: #FFF;
  margin-left: 4px;
}
/*Captcha-Bild*/
.formgen .formcaptcha {
  border: 1px solid #FFF;
}

/* Label */
.formgen label {
font-family: Arial, Helvetica, sans-serif;
width: 160px;
clear: left;
float: left;
height: 20px;
padding: 0px;
}


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


/* Sende-Button */
.formgen .formsubmit
{
  width: 112px;
  height: 44px;
  background-image: url(files/button.gif);
  background-repeat: no-repeat;
  background-color: #FBF3AC;
  border: 0px none;
  padding-top: 8px;
  text-transform: uppercase;
  float: right;
}


/* Definition des Fieldsets, das das ganze Formular umschließt */
.formgen fieldset {
  width: 500px;
  padding-top: 10px;
  padding-right: 10px;

  padding-bottom: 10px;
  padding-left: 10px;
  border: 1px solid #ACBDD5;
}


/* Fieldsetbeschriftung */
.formgen legend {
  font-weight: bold;
  color: #ACBDD5;
  width: 140px;
  margin: 0px;
}

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

/* Fehlermeldung nach Versand */

.formgen .forminfo {
  color: #990000;

  border: 1px dashed #333;
  margin: 5px;
  padding: 5px;
}


/* Markierung der Labels bei Fehler */
.formgen .formerror {
  color: #990000;

}
.forminfo {
  color: #333;
  background-color: #FFFFFF;
  margin: 2px;
  padding: 4px;
  border: 1px solid #990000;
}

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

/*JAOS-Galerie*/
div.jaosg_thumbnail{
float: left;
background: #FFFFFF;
border: 1px solid;
border-color: #007824 #007824 #007824 #007824;
margin: 5px 3px;
}
div.jaosg_thumbnail img{
border: 1px solid;
border-color: #FFF #FFF #FFF #FFF;
}
/* ls=landscape-Format der Thumbs */
.ls img{
height: 60px;
width: 80px;
margin: 20px 10px;
}
/* pt=portrait-Format der Thumbs */
.pt img{
height: 80px;
width: 60px;
margin: 10px 20px;
}
/*footer schaltet float:left wieder aus */
div#jaosg_footer{
clear: both;
padding-top: 1em;
}
/* eq=quadratisches-Format der Thumbs */
div.eq img{
   height: 50px;
   width: 50px;
   margin: 5px 5px;
}

.galimg
{
  text-align:center;
  background-color: #007824;
  border: 5px solid #007824;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}