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

Stylesheet für die Aikido-Seiten des Zanshin-Do BSV e.V.
www.zanshin-do.de

Stand: Jan. 2008 / August 2010
Autor: Andrea Pietsch

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

* {
 padding: 0;
 margin: 0;
}

body {
 background-image: url(bilder/bambjp_1.jpg);
 margin: 20px 40px 20px 40px;
}

/* ====================== Allgemeines ============= */

div, p, table, font {
 font-family: verdana, tahoma, arial;
 font-weight: normal;
 font-size: 12pt;
 line-height: 14pt;
}

p {
 text-align: justify;
 margin-bottom: 1em;
}

h1, h2, h3, h4, h5 {
 font-family: verdana, tahoma, arial;
 margin-top: 1em;
 margin-bottom: 5px;
}

h1 {
 font-size: 150%;
 font-weight: bold;
}

h2 {
 font-size: 130%;
 font-weight: bold;
}

h3 {
 font-size: 110%;
 font-weight: bold;
}

sub {
 font-family: verdana, tahoma, arial;
 font-weight: normal;
 font-size: 90%;
}

/* ========= Definition der Links =====*/

a {
 color: #3f3f3f;
 font-weight: bold;
 text-decoration: none;
 outline: none;
}

a:hover,
a:focus {
 font-weight: bold;
 border-bottom: 1px solid #7f7f7f;
 color: #7f7f7f;
}

a:visited {
 font-weight: bold;
 color: #5f5f5f;
}

/* ============= Kopfbereich ==============  */

#kopfbereich {
 margin: 1em;
 text-align: center;
}

/* ======== Übersicht ============= */

#ubersicht ul,
#ubersicht li {
 margin-bottom: 1em;
}

#ubersicht ul { margin-top: 3em;}

#ubersicht li {
 margin-left: 1em;
 list-style-type: none;
}


/* ======== Navibereich ============= */

#navi {
 text-align: right;
 padding: 5px 10px 4px 10px;
 border-bottom: 1px solid #8c8c8c;
 margin-bottom: 2em;
}

#navi ul {
 margin: 0 0 0 1em;
}

#navi li {
 display: inline;
 list-style-type: none;
 margin: 0;
}

#navi a {
 color: #3f3f3f;
 padding: 4px 8px 4px 8px;
 border: 1px solid #8c8c8c;
}

#navi a:hover,
#navi a:focus,
#gruppe #navi01 a,
#zeit #navi02 a,
#weg #navi03 a,
#probe #navi04 a,
#link #navi05 a,
#aiki #navi08 a,
#film #navi09 a,
#waffen #navi07 a {
 color: #7f7f7f;
 background-color: #ffffff;
 border-bottom-color: #fff;
}

#navi a:active {
 color: #7f7f7f;
 background-color: fff;
}

#navi a:visited {
 font-weight: bold;
 color: #5f5f5f;
}

/* ============== Textbereich ================ */

#textbereich table {
 margin-left: 3em;
}

#textbereich td {
 padding-bottom: 5px;
}

/* ============== Gurt / Sumo ================ */

#gurt img {
 padding: 5px;
 border: 1px solid #ccc;
}

/* ============= Galerien =================  */

#galerie,
#galerie p {
 text-align: center;
}

#galerie img {
 padding: 5px 0 5px 0;
}

#galerie iframe {
 border: 1px solid #ccc;
}

#galerie a,
#galerie a:hover,
#galerie a:focus {
 color: #efefef;
 text-decoration: none;
 border-bottom: none;
}

.gal {
 padding: 15px 20px 15px 20px;
}

/* ========= in den Links ========= */

#box1,
#box2 {
 float: left;
 padding: 15px;
 width: 400px;
 /* background-color: #ddd;*/
}

#box1 p,
#box2 p {
 padding-left: 20px;
}

/* ============== Fußzeile ================== */

#fzeile {
 margin-top: 2em;
}

#ff a,
#ff a:hover,
#ff a:focus {
 color:#efefef;
 text-decoration: none;
 border-bottom: none;
}

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

.tangram {
 float: left;
 padding: 5px;
 margin: 10px 80px 20px 80px;
}

.kanji, .bildlinks {
 float: left;
 padding: 5px;
 margin: 10px 20px 20px 0;
}

.bildlinks {
 border: 1px solid #ccc;
}

.bildrechts {
 float: right;
 padding: 5px;
 margin: 10px 0 20px 20px;
 border: 1px solid #ccc
}

.bildmitte {
 padding: 5px;
 margin: 10px 0 20px 20px;
 border: 1px solid #ccc
}

.thumb {
 padding: 2px;
 width: 100px;
 height: 80px;
 margin: 5px 25px 5px 25px;
 border: 1px solid #ccc
}

/* =============== Klassen ================ */

.clearing { clear: both; }

.links {
 margin-left: 2em;
 margin-bottom: 1em;
 margin-top: 3px;
}

.re {
 text-align: right;
}

/*== drop-shadow == */

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

ul.drop li,
ul.drop2 li {
 list-style-type: none;
 margin: 20px 0 10px 30px;
 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.drop3 li {
 list-style-type: none;
 margin: 20px 0 10px 340px;
 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.drop li {
 width: 260px;
 height: 155px;
 border: 0;
 background: #FFDF00;
}

ul.drop2 li {
 width: 350px;
 height: 175px;
 border: 1px solid #efefef;
 background: #DFDFDF;
}

ul.drop3 li {
 width: 260px;
 height: 155px;
 border: 0;
 background: #84EB83;
}

ul.drop3 li:before,
ul.drop3 li:after,
ul.drop2 li:before,
ul.drop2 li:after,
ul.drop li:before,
ul.drop 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.drop3 li:after,
ul.drop2 li:after,
ul.drop li:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
}