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

Stylesheet - Deckelsammlung
www.schachdeckel.de

erstellt: Jan. 2008
überarbeitet: Okt. 2010
Autor: Andrea Pietsch

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

* {
 padding: 0;
 margin: 0;
}

body {
 background-image: url(fotos/0hinter.jpg);
}

p {
 margin-bottom: 5px;
}

h2 {
 font-size: 120%;
 margin-bottom: 1em;
}

h3 {
 font-size: 110%;
 margin-bottom: 1em;
}

body, font, table, p {
 font-family: Tahoma, Arial, Verdana;
 font-size: 14pt;
}

td {
 text-align: right;
 vertical-align: top;
}

.clearing { clear: both; }

/* ======= Links ========= */

a {
 text-decoration: none;
}

a:link {
 color: #0000bf;
}

a:visited {
 color: #00007f;
}

a:hover,
a:focus {
 color: #0000bf;
 border-bottom: 1px solid #0000bf;
}

/* == XX == */

#seite,
#index {
 width: 800px;
 margin: 20px 10px 20px 10px;
}

#bilder h2,
#reise h2,
#alpha h2,
#anfang h2,
#galerie h2,
#kalender h2 {
 width: 568px;
 margin-left: 20px;
 text-align: center;
}

/* ======= Verweise ===== */

#verweise {
 background-image: url(fotos/0hinterv.jpg);
 text-align: right;
 margin: 20px 10px 1px 1px;
}

#verweise p {
 margin-bottom: 10px;
}

.titel {
 font-size: 10pt;
 font-style: oblique;
 color: #3f3f3f;
 margin-bottom: 0px;
}

.bild {
 width: 150px;
 height: 100px;
 border: 1px solid #EFEFEF;
 margin: 0px 0px 15px 0px;
}

#verweise a:link {
 color: #3f3f3f;
}

#verweise a:visited {
 color: #6f6f6f;
}

#verweise a:hover,
#verweise a:focus {
 color: #3f3f3f;
 border-bottom: 1px solid #3f3f3f;
}

.klein {
 font-size: 12pt;
 padding: 4px;
}

/* == Topindex == */

#topindex {
 margin: 30px 10px 10px 10px;
 text-align: center;
}

.eingang {
 padding: 7px;
 border: 2px solid #8f8f8f;
 width: 400px;
 height: 400px;
}

#topindex a:hover,
#topindex a:focus,
#topindex a:link,
#topindex a:visited {
 border: none;
 color: #5f5f5f;
}

#topindex p {
 font-size: 10pt;
}

.boxindex {
 width: 400px;
}

/* ==== Index ==== */

#index img {
 float: left;
 width: 100px;
 height: 480px;
 border: 0;
 margin: 0 40px 0 30px;
}

#index {
 padding: 10px 0 0 20px;
 text-align: left;
 width: 790px;
}

#index td{
text-align: left;
}

.ein {
 padding: 0 0 20px 20px;
}

/* ======= Alpha / Bilder ===== */

#alpha p,
#bilder p {
 padding-top: 5px;
}

.dt {
 font-size: 12pt;
}

.back {
 font-size: 10pt;
 text-align: right;
 padding-right: 10px;
}

.tab {
 text-align: left;
 vertical-align: top;
 padding-left: 10px;
 padding-bottom: 10px;
}

.top {
 font-weight: bold;
 text-decoration: underline;
 padding-bottom: 10px;
}

#bilder table,
#fusz table {
 width: 790px;
}

/* ==== Kalender ==== */

#kalender img {
 border: 2px solid #9F9F9F;
 padding: 5px;
 margin: 5px;
}

/* === Wettbewerb === */

ul.wett,
ul.wett2 {
 margin: 0;
 padding: 0 0 0 20px;
 clear: both;
 overflow: hidden; }

ul.wett li {
 list-style-type: disc;
 list-style-position: outside;
 margin: 3px 0 0 10px;
 padding: 3px;
 }

ul.wett2 li {
 list-style-type: none;
 margin: 0;
 padding: 1px;
 }

/* === diverses == */

.gulli {
 width: 80px;
 height: 70px;
 padding: 3px;
 margin: 5px;
 border: 1px solid #9F9F9F;
}

/* ==== Reise ==== */

#reise p,
#anfang p,
#dank p {
 text-align: justify;
 width: 790px;
}

#reise img {
 width: 100px;
 padding: 5px;
 border: 1px solid black;
 margin: 4px;
}

/* =========== Deckel ==== */

#deckel table {
 width: 756px;
 margin-left: 44px;
}

/* === #deckel img {
 padding: 10px;
 width: 500px;
 height: 400px;
} === */

#deckel img {
 padding: 5px;
 margin: 10px;
 background: #efefef;
 border-bottom: 3px solid #4f4f4f;
 border-right: 3px solid #4f4f4f;
 border-top: 1px solid #6f6f6f;
 border-left: 1px solid #9f9f9f;
}

#dv img {
 width: 140px;
 height: 112px;
 padding: 0px;
 border: 1px solid black;
}

.fotogr {
 padding: 0 5px 0 10px;
 vertical-align: middle;
 text-align: left;
}

.box1 {
 float: right;
 width: 140px;
 height: 112px;
 padding: 10px;
}

.stadt {
 width: 520px;
 text-align: center;
 font-size: 120%;
 font-weight: bold;
 margin-bottom: 2em;
}

#deckel a:hover,
#deckel a:focus,
#galerie a:hover,
#galerie a:focus,
#fusz a:hover,
#fusz a:focus {
 border: none;
}

/* ====== Galerie ======== */

#galerie img {
 padding: 5px;
 border: 1px solid black;
 margin: 4px;
}

#galerie a {
 font-size: 12pt;
 }

.box {
 float: left;
 width: 110px;
 height: 160px;
 text-align: center;
}

/* === Album === */

#gallery {
 width: 800px;
 margin: 20px 10px 20px 10px;
}

#gallery h2 {
 width: 568px;
 margin-left: 20px;
 text-align: center;
 margin-bottom: 10px;
}

#gallery p {
 margin-left: 25px;
 margin-bottom: 10px;
 }

.small {
 width: 80px;
 height: 62px;
 visibility: visible;
 border: 0;
 }

#album {
 width: 500px;
 height: 400px;
 background: #eee url(biga/tab/album_0974.jpg) 5px no-repeat;
 border-bottom: 3px solid #4f4f4f;
 border-right: 3px solid #4f4f4f;
 border-top: 1px solid #9f9f9f;
 border-left: 1px solid #9f9f9f;
 margin-left: 25px;
 margin-bottom: 40px;
 padding: 5px;
}

/* == Navigationsbereich == */

/* b - breiter Vorschaubereich 18 Bilder */
.navi_b {
 padding: 0;
 margin: 0 0 0 520px;
 list-style-type: none;
 position: relative;
 width: 260px;
 }

/* n - normaler Vorschaubereich 12 Bilder */
.navi_n {
 padding: 0;
 margin: 0 0 0 520px;
 list-style-type: none;
 position: relative;
 width: 220px;
 }

/* s - schmaler Vorschaubereich 6 Bilder */
.navi_s {
 padding: 0;
 margin: 0 0 0 520px;
 list-style-type: none;
 position: relative;
 width: 100px;
 }

.navi_b li,
.navi_n li,
.navi_s li {
 float: left;
 }

.navi_b li a,
.navi_b li a:visited,
.navi_n li a,
.navi_n li a:visited,
.navi_s li a,
.navi_s li a:visited {
 display: block;
 text-decoration: none;
 color: #000;
 background: #fff;
 text-align: center;
 width: 80px;
 height: 62px;
 border: 1px solid #444;
 margin: 2px;
 }

.navi_b li a:hover,
.navi_n li a:hover,
.navi_s li a:hover {
 background: #ddd;
 }

.navi_b li a:active,
.navi_b li a:focus,
.navi_n li a:active,
.navi_n li a:focus,
.navi_s li a:active,
.navi_s li a:focus {
 background: #444;
 color: #fff;
 }

.navi_b li a img.quer,
.navi_n li a img.quer,
.navi_s li a img.quer {
 visibility: hidden;
 border: 0;
 }

.navi_b li a img.quer,
.navi_n li a img.quer,
.navi_s li a img.quer {
 position: absolute;
 top: 0px;
 left: -520px;
 }

.navi_b li a:active img,
.navi_b li a:focus img,
.navi_n li a:active img,
.navi_n li a:focus img,
.navi_s li a:active img,
.navi_s li a:focus img {
 visibility: visible;
 }

.navi_b a span,
.navi_n a span,
.navi_s a span {
 display: none;
 font-size: 12pt;
 background: none;
 }

.navi_b a:active span,
.navi_b a:focus span,
.navi_n a:active span,
.navi_n a:focus span,
.navi_s a:active span,
.navi_s a:focus span {
 display: block;
 position: absolute;
 top: 410px;
 left: -520px;
 width: 500px;
 height: 20px;
 padding: 5px;
 color: #000;
 text-align: right;
 border: 0;
 float: left;
 }

/* ======== Fusz ====== */

#fusz {
 padding: 10px 10px 10px 0;
}

#fusz p {
 text-align: right;
}

#fusz img {
 float: right;
 padding: 5px 45px 0 15px;
}

/*== drop-shadow == */

ul.drop1 {
 margin: 0;
 padding: 0;
 clear: both;
 overflow: hidden; }

ul.drop2 {
 margin: 0;
 padding: 0;
 clear: both;
 overflow: hidden; }

ul.drop1 li,
ul.drop2 li {
 list-style-type: none;
 margin: 10px;
 padding: 10px;
 position: relative;
 float: left;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

ul.drop1 li {
 width: 250px;
 height: 150px;
 border: 0;
 background: #FFDF00;
 text-align: center;
}

ul.drop2 li {
 width: 250px;
 height: 150px;
 border: 0;
 background: #EA6DE8;
 text-align: left;
}

ul.drop1 p,
ul.drop2 p {
 padding: 4px;
 }

ul.drop1 li:before,
ul.drop1 li:after,
ul.drop2 li:before,
ul.drop2 li:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

ul.drop1 li:after,
ul.drop2 li:after {
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
}

.box_drop1 {
 float: right;
 width: 350px;
 height: 170px;
 padding: 0;
}

.box_drop2 {
 float: right;
 width: 280px;
 height: 170px;
 padding: 10px;
}