/* =============================================================
Stylesheet für die Seite "Hochzeitssängerin Gabriele Ismer" für Smartphones
Datei: hochzeit_iphone.css
Datum: 03.04.2013
Autor: Gabriele Ismer
===============================================================*/

/*=============================================================
1. Kalibrierung und Restauration
===============================================================*/
* { padding: 0; margin: 0; }
html { height: 101%; margin-bottom: 0;}

@font-face { font-family: Gabrielle; src: url("../fonts/Gabrielle.eot"); }
@font-face { font-family: Gabrielle; src: url("../fonts/Gabrielle.ttf"); }
/*=============================================================
2. Allgemeine Styles
===============================================================*/
body {
  background-color: #DFC2BE; /* Hintergrundfarbe */
  color: #320000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
  background-image:url(../Bilder/Hintergrund_hochzeit_rosa.jpg);
}

h1 {
 font-size: x-large;
}

h2 {
 font-size: large;
 margin-bottom: 10px;
}

h1, h2, h3, h4 {
 font-family: Verdana, sans serif;
 color: #770011;
 }

p, li, th, td {
 font-family: Arial;
}
p, h1, h2, h3, h4, li {
 padding: 5px 2px 2px 2px;
}}
.liste li {
 padding: 1px;
 margin-top: 0px;
 margin-bottom: 0px;
}

td {
 padding: 0 0 1px 2px;
 vertical-align: top;
}

table {
 padding: 0;
 border: 0;
 text-align: left;
}
a {
 text-decoration: none;}

a.navi,
a.navi_self {
    margin-left: 20px;
    margin-top: 0px;
    font-family: Gabrielle, serif;
    font-size: 1.7em;
    line-height: 1.5em;
}
a.navi {
    color: #4F0000;
    font-weight: 500;
    }
a.navi_self {
    color: #7F0000;
    font-weight: 900;
    border-bottom: 1px solid #7F0000;
    }
a.navi:hover {
    color: #5F0000;
    border-bottom: 1px solid #5F0000;
}
.zitat {
    font-size: 85%;
    margin-top: -5px;
    margin-bottom: 8px;
    font-style: italic;
    text-align: right;
}
.skiplink {
  position: absolute;
  top: -9999px;
  left: -9999px;
  height: 0;
  width: 0;
  font-size: 0;
  line-height: 0;
}
.skip {
  list-style-type: none; /*ohne Aufzählungspunkte*/
  color: #770011;
  font-weight: bold;
}
.umfangreich span {
  color: #770011;
  text-decoration: underline;
}
table div {
  font-size: 80%;
  font-style: italic;
  margin-left: 10px;
}

.hervorheben {
  font-weight: bold;
  color: #770011;
  }

#portrait {
  width: 200px;
  height: 173px;
  border-top: 0;
  border-right: 2px solid white;
  border-bottom: 1px solid white;
  border-left: 0;
  margin: 0 0 0 5px;
  }

/*=============================================================
3. Styles für die Layoutbereiche
===============================================================*/

/*=============================================================
3c. iphone
===============================================================*/
div#wrapper {
  background-color: #f0e5d7;
  border: 3px solid white;
  width: 100%;
}
div#kopfbereich {
  margin-top: 0px;
  margin-left: 0px;
  color: black;
  width: 100%;
}
img#banner {
 display: none;
}
img#banner_iphone {
  width: 100%;
}
div#navibereich {
  width: 95%;
  background-image: url(../Bilder/Hintergrund_hochzeit_rot.jpg);
  background-repeat: repeat;
  background-position: top left;
  padding: 10px;
}
div#navibereich li {
  list-style-type: none; /*ohne Aufzählungspunkte*/
  display: inline;
}
div#textbereich {
  width: 95%;
}
div#fliesstext {
  margin-top: 10px;
  margin-right: 5px;
  margin-left: 10px;
  padding-right: 10px;
  padding-left: 10px;
  height: auto;
}
div#fliesstext a {
  color: #BD0000;
}
div#fliesstext a:hover {
  color: #DE5F5F;
}
div#fliesstext a:visited {
  color: #690000;
}


.eingeruckt {
  margin-left: 10px;
  margin-top: 15px;
  clear: right;
}
li.mt40 {
}
p.mt40 {
  margin-top: 15px;
}

.ml20 {
  margin-left: 10px;
}
.ml60 {
  margin-left: 20px;
}
.ml80 {
  margin-left: 30px;
}
.ml100 {
  margin-left: 40px;
}
.ml120 {
  margin-left: 50px;
}
.ml140 {
  margin-left: 60px;
}
.ml160 {
  margin-left: 70px;
}
/*============================================================
4. Formulare
==============================================================*/
#rechner {
 margin: 20px auto 10px auto;
 width: 90%;
 background-image: url(../Bilder/formular.png);
 background-repeat: repeat;
 padding: 20px;
 border: 1px solid #fff;
 border-radius: 10px;*/
}

#kontaktformular,
#danke {
 width: 90%;
 margin: auto;
 background-image: url(../Bilder/formular.png);
 background-repeat: repeat;
 padding: 10px;
 border: 1px solid #fff;
 border-radius: 10px;
}
#rechner span {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 85%;
    font-style: italic;
}
fieldset {
 border: 1px solid #fff;
 border-radius: 5px;
 margin-bottom: 5px;
 padding: 5px;
}
input,
textarea,
select {
  border: 1px solid #8c8c8c;
}
input#absender {
  width: 98%;
}
input#name,
input#vorname {
  width: 95%;
}

input#ort,
input#datum,
input#veranstaltung {
width: 95%;
}

textarea {
 width: 95%;
}

#nachricht {
 height: 8em;
}

#titel {
 height: 2.5em;
}

input:focus,
textarea:focus  {
  background-color: #EFEFEF;
}
/*============================================================
Ende des Stylesheets
==============================================================*/