/* =============================================================
Stylesheet für die Seite "Hochzeitssängerin Gabriele Ismer" für Tablets
Datei: hochzeit_medium.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: 15px;
}

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;
}
.liste li {
 padding: 1px;
 margin-top: 0px;
 margin-bottom: 0px;
}

td {
 padding: 0 0 3px 5px;
 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: 30px;
    font-family: Gabrielle, serif;
    font-size: 1.7em;
}

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: -10px;
    margin-bottom: 15px;
    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 {
  border-top: 0;
  border-right: 2px solid white;
  border-bottom: 1px solid white;
  border-left: 0;
  margin: 0 0 0 20px;
  width: 300px;
  height: 259px;
}
/*=============================================================
3. Styles für die Layoutbereiche
===============================================================*/

/*=============================================================
3a. Desktop-Version
===============================================================*/
div#wrapper {
  background-color: #f0e5d7;
  border: 3px solid white;
  width: 100%;
  background-image: url(../Bilder/Hintergrund_hochzeit_rot_medium.jpg);
  background-repeat: repeat-y;
  background-position: top left;

}
div#kopfbereich {
  position: absolute;
  margin-top: 0px;
  margin-left: 0px;
  color: black;
}
img#banner_iphone {
 display: none;
}
img#banner {
  width: 100%;
}
div#navibereich {
  width: 25%;
  height: 100%;
  left: 0px;
  float: left;
  padding-top: 120px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 0px;
}
div#navibereich li {
  list-style-type: none; /*ohne Aufzählungspunkte*/
  text-align:right;
  padding-right: 20px;
}
div#textbereich {
  width: 75%;
  height: 100%;
  margin-left: 25%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 120px;
}
div#fliesstext {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  padding-right: 20px;
  padding-left: 25px;
  overflow: auto;
}
div#fliesstext a {
  color: #BD0000;
}
div#fliesstext a:hover {
  color: #DE5F5F;
}
div#fliesstext a:visited {
  color: #690000;
}
.mt40 {
  margin-top: 40px;
}
.eingeruckt {
  margin-left: 20px;
  clear: right;
}
.ml20 {
  margin-left: 20px;
}
.ml60 {
  margin-left: 60px;
}
.ml80 {
  margin-left: 80px;
}
.ml100 {
  margin-left: 100px;
}
.ml120 {
  margin-left: 120px;
}
.ml140 {
  margin-left: 140px;
}
.ml160 {
  margin-left: 160px;
}

/*============================================================
4. Formulare
==============================================================*/
#rechner {
 margin: 10px 30px 0 0;
 align: left;
 float: left;
 width: 270px;
 height: 364px;
 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: 20px;
 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
==============================================================*/