@charset "utf-8";
/* CSS Document */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Stylesheets fuer  htpp://www.beckenbodentraining-essen.de
Datei:    bstyle.css 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*###########################################

 INHALTSVERZEICHNIS:
1.Allgemeine Selektoren

2.Allgemeine Hyperlinks

3.Layout allgemein + #startseite
	3.1 #umhang
        3.2 header
	3.3 #content
        3.4 aside
        3.5 footer
	
	4.1 Unterseiten
	4.2 Galerien
        	
4.Sonstige Styles
        4.1 Sonstige Klassen

###########################################*/


/*========================================
   1. Allgemeine Selektoren
   ========================================*/

* {
	margin: 0;
	font-size: 100%;
}
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, a,
ul, ol, li, dl, dt, dd,
address, blockquote, cite,
hr, br, img, object, applet, iframe,
form, fieldset, legend, label,
table, thead, tbody, tfoot, caption, tr, th, td,
em, strong, i, b, u, q, s, del, dfn, big, small, sub, sup,
pre, code, abbr, acronym, ins, kbd, samp, strike, tt, var {
	padding: 0;
	border: none;
}
html  {
	height:100%;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ul,
ol {
	list-style-type: none;
}
body,
input,
button,
select,
textarea {
	font-family:calibri, arial, sans-serif;
}
body {
	background:#f1f1f1;
	color:#505050;
	/**font-size: 0.9em;**/
	font-size: 1.1em;
	line-height: 1.5;
}
p  {
	margin-bottom:0.5em;
}
h1  {
	display:table-cell;
	color:#685033;
	font-size:2em;
}
h2  {
	display:table-cell;
	color:#685033;
	vertical-align:bottom;
	text-align:right;
	font-size:2em;
}
h3  {
	font-size:1.3em;
	margin: 1.4em 0 0.3em 0;
}
h4  {
	font-size:1.1em;
	margin: 1.7em 0 0.4em 0;
}
h5  {
	font-size:1.1em;
	margin: 2em 0 0.5em 0;
} 
img  {
	max-width:100%;
	height:auto;
}
nav strong  {
	display:block;
	color:#ba171b;
	padding:0.5em 0;
}	
   
 /*========================================
   2. Allgemeine Hyperlinks
   ========================================*/

a:link  {
	color:#0b6d0f;
	background-color:transparent;
}
a:visited  {
	color:#047f09;
	background-color:transparent;
}
a:focus, a:hover  {
	color:#ba171b;
	background-color:transparent;
	text-decoration:none;
}
a:active  {
	color:#f93547;
	background-color:transparent;
} 
 
/*========================================
   3. Layout allgemein # #startseite
  ========================================*/

/*:::::::::::::::::::3.1 #umhang ::::::::::::::::::::::::::::::::::::*/

#umhang  {
	display:table;
	max-width:56em;
	margin:0 auto;
}

/*:::::::::::::::::::3.2 header ::::::::::::::::::::::::::::::::::::::*/

header  {
	display:table;
	width:100%;
	padding:1em 0 0.5em 0;
}
#navi  {
	padding:0 0 0 0.5em;
	border-top:1px solid #685033;
	border-bottom:1px solid #685033;
	margin:0 0 0 0;
}	
#navi li  {
	float:left;
	width:10em;
}
#navi li a {
	display:block;
	padding:0.5em 0;
}

/*:::::::::::::::::::3.3 content ::::::::::::::::::::::::::::::::::::::*/

#main  {
	margin-top:2em;
}
#content  {
	float:left;
	max-width:36em;
	padding:0 2em 0 2em;
	margin-bottom:2em;
}
.galeriekasten  {
	display:table;
	width:90%;
	background:#f8f8f1;
	padding:1em;
	border:1px solid #dcdcdc;
	border-radius:8px;
	margin-bottom:1.5em;
}
.galeriekasten dt,
.galeriekasten dd  {
	display:table-cell;
	
}
.galeriekasten dd  {
	vertical-align:top;	
	padding-left:1.5em;
}
.foto-startseite  {
	background:#fff;
	padding:5px;
	border:1px solid #b8b4b4;
	/*margin-right:1em;*/
}
.foto-startseite:hover,
.foto-startseite:focus  {
	border:1px solid #ba171b;
}

/*:::::::::::::::::::3.4 aside ::::::::::::::::::::::::::::::::::::::*/

aside  {
	float:right;
	max-width:20em;
	padding:0 0 1em 1em;
	border-left:2px solid #685033;
	margin-bottom:2em;
}
aside h4  {
	margin-top:0.8em;
}

/*:::::::::::::::::::3.5 footer ::::::::::::::::::::::::::::::::::::::*/

footer  {
	padding:0.5em 0 2em 2em;
	border-top:2px solid #685033;
}

/*:::::::::::::::::::4.1 Unterseiten ::::::::::::::::::::::::::::::::::::::*/

.vorstellung  {
	margin:1.5em 0;
}
.vorstellung dd  {
	font-size:120%;
}

table  {
	text-align:left; 
	margin:1.2em 0 0.5em 0;
}
th, td  {			
	padding:0.5em;
}
.kopp  {
	background:#f4e292;
}
.reihe1  {
	background:#f6f3e4;
}

.reihe2  {
	background:#f6ebbb;
}
.kopp:hover,
.reihe1:hover,
.reihe2:hover  {
	background:#fff;
}


/*:::::::::::::::::::4.2 Galerien ::::::::::::::::::::::::::::::::::::::*/

#einzelgalerie  {
	text-align:center;
}
#einzelgalerie li  {
	display:inline-block;
	margin:1em 0.3em;
}
.galerie-foto-gross,
.galerie-foto-klein    {
	display:block;
}
.galerie-foto-klein  {
	background:#fff;
	padding:5px;
	border:1px solid #b8b4b4;
}
.galerie-foto-klein:hover,
.galerie-foto-klein:focus  {
	border:1px solid #ba171b;
}

/*========================================
   5. Sonstige Klassen
  ========================================*/

 .abstandoben  {
	margin-top:2em;
  }
.listenzeichen-1  {
	background:url(../grafiken/listenzeichen-1.png) no-repeat left 0.15em;
	font-size:0.9em;
	padding:0 0 0.2em 1.3em;
}
.listenzeichen-2  {
	background:url(../grafiken/listenzeichen-2.png) no-repeat left 0.15em;
	font-size:0.9em;
	padding:0 0 0.2em 1.3em;
}
.nachoben  {
	font-size:0.8em;
	padding:1em 0 0.2em 0;
}
.skiplink  {
	position:absolute;
	top:-9999px;
	left:-9999px;
	width:0px;
	height:0px;
	display:inline;
}
.skiplinktab:focus,
.skiplinktab:active  {
	position:absolute;
	top:9999px;
	left:9999px;
	display:inline;
	width:13em;
	height:auto;
	background-color:#fff;
	color:#000;
	padding:0.6em;
	border:2px solid #000;
}
.clear  {
	clear:both;
	height:0;
	width:0;
	visibility:hidden;
	border:0;
} 
.clear2  {
	clear:both;
}
.clearfix:after {
	content: ".";
	display: block;
	height: .1px;
	clear: both;
	visibility: hidden;
	font-size: 0;
	overflow: hidden;
}

@media only screen and (max-width:48em)  { 

p, li, dt, dd, a  {
	font-size:100%;
}
img  {
	float:none;
	max-width:100%;
	height:auto;
}
#umhang,
header,
#content  {
	position:static;
	display:block;
	float:none;
	width:auto;
	padding:2%;
	border:none;
	box-shadow:none;
}
.galeriekasten  {
	display:block;	
}
.galeriekasten dt,
.galeriekasten dd  {
	display:block;	
}
aside  {
	float:none;
	max-width:100%;
	padding:0 0 1em 1em;
	border-left:2px solid #685033;
	margin-bottom:2em;
}
h1  {
	display:block;	
	font-size:180%;
	margin: 0.3em 0 0.3em 0;
}
h2  {
	display:block;
	text-align:left;
	font-size:130%;
	margin: 0.5em 0 0.3em 0;
}
h3  {
	font-size:120%;
	margin: 1.4em 0 0.3em 0;
}
h4  {
	font-size:120%;
	margin: 1.7em 0 0.4em 0;
}
h5  {
	font-size:120%;
	margin: 2em 0 0.5em 0;
} 
.logo  {
	font-size:110%;
}
.nachoben  {
	font-size:100%;
	padding:0.5em 0;
}

}
	
@media only screen and (max-width:30em)  {

p, li, dt, dd, a  {
	font-size:100%;
}
img  {
	float:none;
	max-width:100%;
	height:auto;
}
#umhang,
header,
#content   {
	position:static;
	display:block;
	float:none;
	width:auto;
	padding:2%;
	border:none;
	box-shadow:none;
}
.galeriekasten  {
	display:block;	
}
.galeriekasten dt,
.galeriekasten dd  {
	display:block;	
}
aside  {
	float:none;
	max-width:100%;
	padding:0 0 1em 1em;
	border-left:2px solid #685033;
	margin-bottom:2em;
}
.einzelbild-startseite  {
	float:none;
	max-width:100%;
	height:auto;
	margin:0 0 0.5em 0;
}
h1  {
	display:block;
	font-size:180%;
	margin: 0.3em 0 0.3em 0;
}
h2  {
	display:block;
	font-size:130%;
	margin: 0.5em 0 0.3em 0;
}
h3  {
	font-size:120%;
	margin: 1.4em 0 0.3em 0;
}
h4  {
	font-size:120%;
	margin: 1.7em 0 0.4em 0;
}
h5  {
	font-size:120%;
	margin: 2em 0 0.5em 0;
} 
.logo  {
	font-size:110%;
}
.nachoben  {
	font-size:100%;
	padding:0.5em 0;
}

}
  
@media print  { 
/*===================
   1. Allgemeine Selektoren
   ===================*/
 *  {
	padding:0;
	margin:0;
}
html  {
	height:100%;
}
body  {
	color:#000000;
	background-color:#ffffff;
	text-align:left;
	font:12pt georgia,'courier new',serif;
	line-height:1.5;
}
img  {
	display:none;
}
.skiplink  { 
	display:none; 
}
h1  {
	font-size:17pt;
}
h2  {
	font-size:14pt;
	margin-top:20pt;
}
h3  {
	font-size:12pt;
	margin-top:20pt;
}
h4  {
	font-size:12pt;
	margin-top:20pt;
}

/*==================
   2. Hyperlinks   
   ==================*/

a  {
	color:#000;
	background-color:#fff;
}
   
/*=========================
   3. Layoutbereich  
   =========================*/


}