/* =========================================================
Stylesheet für Hamburg-Kenner-Homepage
Stand:
Datei: bildschirm.css
Datum: 9.1.2014
Autor: Tilman Hagner
Aufbau: 1. Kalibrierung und Restauration
2. Allgemeine Styles
3. Styles für Layoutbereiche
4. Sonstige Styles
========================================================== */

/* ======================================
1. Kalibrierung und Restauration
====================================== */
/* Reset - alle Abstände auf NULL */
* { padding: 0; margin: 0; }
/* optional: erzwingt Scrollbar im Firefox */
html { height: 101%; }
h1, h2, h3 { margin-bottom: 0.8em; }
p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em; margin-bottom: 0.4em; }
/* hier ggfs. Abstände für weitere Elemente restaurieren */

/* ======================================
2. Allgemeine Styles
====================================== */
body {
/*  background: #377357 url('../grafiken/bodyback_wappen_transp40.jpg') no-repeat right -300px fixed; */
  color: #151515;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
}
h1 { font-size: 400%; }
h2 { font-size: 200%; font-weight: normal; border-bottom: 1px solid #f0c364; padding-bottom: 5px; }
h3 { font-size: 160%; font-weight: normal; border-bottom: 1px solid #f0c364; padding-bottom: 5px; }
h4 { font-size: 140%; font-weight: normal; }
h5 { font-size: 120%; font-weight: normal; }

address {
  text-align: center;
  font-size: 80%;
  font-style: normal;
  letter-spacing: 2px;
  line-height: 1.5;
}
a {
  text-decoration: none;
  border: none;
  outline: none;
}
a:link { color: #a5000f; }
a:visited { color: #ff0019; }
a:hover,
a:focus {
  border-bottom: 1px solid #ff0019;
  position: relative; /* sonst zeigt der IE den Hover-Effekt nicht */
}
a img { border: none; }

/* Allgemeine Klassen und IDs */

hr {
  width: 300px;
  color: black;
  width: 30%;
  margin: 1em auto;
}
.bildlinks {
  float: left;
  margin: 10px 10px 10px 0px;
  border: 3px solid #739155;
  box-shadow:5px 5px 5px #646464;
}
.bildrechts {
  float: right;
  margin: 10px 0px 10px 10px;
  border: 3px solid #739155;
  box-shadow:5px 5px 5px #646464;
}
.bildlinkstouren {
  float: left;
  margin: 0px 0px 5px 0px;
  border: 3px solid #739155;
  box-shadow:5px 5px 5px #646464;
}
.bildrechtstouren {
  float: right;
  margin: 0px 0px 5px 0px;
  border: 3px solid #739155;
  box-shadow:5px 5px 5px #646464;
}
.floatlinks {
  float: left;
}
.floatrechts {
  float: right;
}
.floatlinksliste {
  float: left;
  margin-right: 35px;
}
.floatrechtsliste {
  float: right;
  margin-left: 0px;
}
.linksinnenbox {
  text-align: center;
  padding: 10px;
  border: 3px solid #739155;
  margin: 5px 5px 5px 0;
  background-color: #fafa96;
  box-shadow:5px 5px 5px #646464;
}
.rechtsinnenbox {
  text-align: center;
  padding: 10px;
  border: 3px solid #739155;
  margin: 5px 0 5px 5px;
  background-color: #fafa96;
  box-shadow:5px 5px 5px #646464;
}
.linksinnenbox p,
.rechtsinnenbox p {
  margin-bottom: 12px;
}
.linksinnentext {
  padding: 10px 5px 10px 10px;
}
.rechtsinnentext {
  padding: 10px 10px 10px 5px;
}
.linksinnentext ul,
.rechtsinnentext ul{
  padding-left: 10px;
}
.innentext {
  padding: 10px;
}
.innentextliste {
  padding: 0 25px 0 25px;
}
.bildlinkstext {
  color: #454545;
  font-size: 70%;
  text-align: right;
  margin-right: -6px; /* da äußere Box floatlinks um die border-Breite zu schmal ist */
  margin-bottom: 0;
}
.bildrechtstext {
  color: #454545;
  font-size: 70%;
  text-align: right;
  margin-bottom: 0;
}
/* Sternchen-Hack und Holly-Hack bewirken hasLayout im IE6 */
* html div.linksinnentext { height: 1%; }
* html div.rechtsinnentext { height: 1%; }
* html div.innentext { height: 1%; }

.schatten { text-shadow: #a5000f 1px 1px 2px; }
.clearing { clear: both; }

/* Spoiler mit CSS
.spoiler a span {
  display:none;
}
div.spoiler a:focus, div.spoiler a:active {*/ /* für IE6 */
/*  border:none;
  }
.spoiler a:focus span, .spoiler a:active span {
  display: block;
  color: #ff0019;
} */
/* ======================================
3. Styles für die Layoutbereiche
====================================== */
#wrapper {
/*  background-color: white; */
  width: 1000px;
  margin: 10px auto;
}
#kopfbereich {
  padding: 0;
}
#kopfbereich a,
#kopfbereich a:link,
#kopfbereich a:visited,
#kopfbereich a:hover,
#kopfbereich a:focus,
#kopfbereich a:active {
  outline: none;
  border: none;
  background: none;
}
#kopfbereich h1 {
  color: #a5000f;
  margin-bottom: 0;
}
#kopfbereich h2 {
  color: #dcdcb4;
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
  }
#navibereich {
  font-size: 105%;
  font-weight: bold;
  padding: 4px 10px 4px 10px;
/*  border-bottom: 1px solid #8c8c8c; */
  background:#c88c14 url(../grafiken/gradient.png) 0 -25px repeat-x;
  z-index:1;
  position:relative;
}
  #navibereich ul { margin-bottom: 0px; }

  #navibereich li {
    display: inline;
    list-style-type: none;
    margin: 0; /* war vorher 10px für rechts */
  }
  #navibereich a {
    color: #151515;
/*    background-color: #ffeda0; */
    padding: 4px 8px 4px 8px;
/*    border: 1px solid #8c8c8c;   */
  }
  #start #navi01 a,
  #touren #navi02 a,
  #fahrradtaxi #navi03 a,
  #angebote_preise #navi04 a,
  #ueber_mich #navi05 a,
  #service_buchung #navi06 a,
  #links #navi07 a,
  #gaestebuch #navi08 a,
  #impressum #navi09 a {
    background: #c88c14 url(D:\Dokumente\Hamburg-Kenner\Webseite\grafiken\gradient.png) 0 -227px repeat-x;
/*  border-left: 1px solid #c88c14;
    border-right: 1px solid #c88c14; */
  }
  #navibereich a:hover,
  #navibereich a:focus {
    background: #c88c14 url(../grafiken/gradient.png) 0 -227px repeat-x;
    /*  background-color: white;*/
    padding: 4px 8px 4px 8px;
    border-bottom: none; /* war #d90000 */
  }
  #navibereich a:active {
    background: #c88c14 url(../grafiken/gradient.png) 0 -227px repeat-x;
    border-bottom: none; /* war #d90000 */
  }
#textbereich {
  background: url(../grafiken/textbereichback_gelb20.png) bottom;
  padding: 10px 20px 10px 20px;
}
/* Hack für transparenten Hintergrund im IE6 */
* html #textbereich {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../grafiken/textbereichback_gelb20.png', sizingMethod='scale');
background:none;
}
#textbereich a {
  color: #a5000f;
  /*  border-bottom: 1px dotted #cc0000;*/
}
#textbereich a:hover,
#textbereich a:focus {
  color: #ff0019;
  border-bottom: 1px solid #ff0019;
}
#textbereich p span,
#textbereich li span {
  color: #a5000f;
  }
/* Spoiler mit CSS
#textbereich .spoiler a:link {
  color: #151515;
}
#textbereich .spoiler a:hover,
#textbereich .spoiler a:focus {
  color: #ff0019;
  border-bottom: none;
} */
#start #textbereich {
/*  font-family: "Book Antiqua", "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic; */
  padding: 20px 20px 20px 20px;
  }
#start #textbereich p {
  margin-bottom: 0;
}
/*#start #textbereich p:hover {
  color: #ff0019;
} */
#angebote_preise li {
  margin-bottom: 0;
}
#grafikwinterstart a {
  display: block;
  background: url(../grafiken/fahrradtaxi_stadtfuehrung_im_winter_hell.jpg) no-repeat;
  width: 138px;
  height: 104px;
}
#grafikwinterstart a:hover,
#grafikwinterstart a:focus {
  border-bottom: none;
}
#grafikwinterstart a img {
  display: block;
}
#grafikwinterstart a:hover img,
#grafikwinterstart a:focus img  {
  display: none;
}
#fotouebermichstart a {
  display: block;
  background: url(../grafiken/fahrradtaxi_stadtfuehrung_tilman_speicherstadt_pruef_hell.jpg) no-repeat;
  width: 153px;
  height: 202px;
}
#fotouebermichstart a:hover,
#fotouebermichstart a:focus {
  border-bottom: none;
}
#fotouebermichstart a img {
  display: block;
}
#fotouebermichstart a:hover img,
#fotouebermichstart a:focus img  {
  display: none;
}
#fotouebermich {
  display: block;
  background: url(../grafiken/fahrradtaxi_stadtfuehrung_michel_love_200.jpg) no-repeat;
  width: 200px;
  height: 300px;
}
#fotouebermich img {
  display: block;
}
#fotouebermich:hover img,
#fotouebermich:focus img  {
  display: none;
}
#fussbereich {
  padding: 10px 20px 0px 20px;
  margin-top: 0;
}
#fussbereich p {
  margin-bottom: 0;
}
/* ======================================
4. Sonstige Styles
====================================== */

/* Das Kontaktformular */
form {
  background-color: #fafa96;
  box-shadow:5px 5px 5px #646464;
  /*width: 100%; /* Breite des Formulars */
  padding: 15px;
  border: 3px solid #739155;
  margin: 10px 0px 10px 0px;
}
label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#contact_name,
input#contact_email,
input#contact_nummer {
  width: 300px;
  border: 1px solid #8c8c8c;
  margin-bottom: 0.1em;
}
textarea {
  width: 100%;
  height: 7em;
  border: 1px solid #8c8c8c;
  margin-bottom: 0.5em;
}
input:focus,
textarea:focus {
  background-color: #dcffaf;
}

/* =======================================
E N D E   D E S   S T Y L E S H E E T S
======================================= */