:root {
}

:root {
  --darkcol: #90c226; /* dark navigation color */
  --lightcol: #e8f3d1; /* light content color */
	--backcol: #cde496; /* background color */
	--headercol: #000000;
  --spfblue: #000066;
  --darkorange: #ffc04c;
  --lightorange: #fff6e5;
  --backorange: #ffdb99;


}

body {
/* orange: top #f4a200 #ffeaa4 */
/* grün:  #e0f8e0 #81f781*/
/* IE10 Consumer Preview
	background-image: -ms-linear-gradient(top, #f4a200 0%, #ffeaa4 100%);
 Mozilla Firefox
	background-image: -moz-linear-gradient(top, #f4a200 0%, #ffeaa4 100%);
 Opera
	background-image: -o-linear-gradient(top, #f4a200 0%, #ffeaa4 100%);
 Webkit (Safari/Chrome 10)
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f4a200), color-stop(1, #ffeaa4));
 Webkit (Chrome 11+)
	background-image: -webkit-linear-gradient(top, #f4a200 0%, #ffeaa4 100%);

	background-attachment:fixed;*/
	background-color: var(--backcol);
}



/* CSS-Seitenstruktur */

body {
	margin-top:0%;
	}

html, body, #wrapper{
	height:100%;
}

ul {
   list-style-image: url(images/icons/pfote_15.png);
   margin-left:20px;
}
ol {
	font-family: "Spinnaker", Arial, Verdana, sans-serif;
}

li p {
text-align:left;
}

#main {
	min-height:100%;
	width:95%;
}

#content {
	background-color:var(--lightcol);
	/*background:url(images/bg.png) center bottom no-repeat;
	background-size:80% auto;*/
  border-style: solid;
	border-width: 0.05em;
	border-color: var(--darkcol);
	margin:0;
	padding:40px 0;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	z-index: -10;
}

/* Two-Column Layout (see index) */
* {
  box-sizing: border-box;
}
/* Create two unequal columns that floats next to each other */
.column {
  float: left;
}

.left {
  width: 30%;
  margin-left:0;
}

.right {
  width: 60%;
  margin-right:0;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The Magic Float Center Code */
.float_center {
  float: right;

  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}
.float_center > .child {
  position: relative;
  left: 50%;
}


/* Hintergrund Sitz-Platz-Fein */

/* Sitz-Platz-Fein-Logo im Hintergrund */
#bg {
	position: fixed;
	width: 80%;
	height: 100%;
	bottom: 0;
	left:0;
/*	background:url(images/bg.png) center no-repeat;*/
	background-position:bottom;
	z-index:-1;
}


/* Navigation */
#navigation {
	text-align:left;
	padding-top:2em;
}
#navigation ul {
	width:100%;
	padding:0;
	margin:0;
	list-style:none;
}
#navigation li {
	position: relative;
	display:inline-block;
	padding:0 0 0 0;
	margin:0 0 0 0;
	font-size:1.3em;
	font-family: "Happy Monkey", Arial, Verdana, sans-serif;
}

#navigation li a {
	display: block;
	color:#000;
	text-decoration: none;
	padding:0 0 0 0;
	background:var(--darkcol);
}

#navigation li#active span,
#navigation li a {
	border-top: solid 0.05em var(--darkcol); /*style width color*/
	border-right: solid 0.05em var(--darkcol);
	border-left: solid 0.05em var(--darkcol);
	-webkit-border-top-right-radius:5px;
	-webkit-border-top-left-radius:5px;
	-moz-border-radius-topright:5px;
	-moz-border-radius-topleft:5px;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
	z-index: 1;
	position: relative;
  top:1px;
}

/* Korrektur: Oberster Link von Nagivation funktioniert auch bei Unterpunkten dieses Punktes. */
#navigation li#active span a  {
  border:none;
  background-color:var(--lightcol);
  top:0;
}

#navigation li a:hover {
	background-color:var(--lightcol);
	},
#navigation li a:active,
#navigation li a:focus {
	outline: none;
	text-decoration: none;
}

#navigation li.dropdown {
	font-size:1em;
}
#navigation a.dropdown {
	-webkit-border-top-right-radius:0;
	-webkit-border-top-left-radius:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-topleft:0;
	border-top-right-radius:0;
	border-top-left-radius:0;
  border-color:var(--lightcol);
	z-index: 100;
	position: relative;
	top:1px;
	width:250px;
}

#navigation li a span {
	display:block;
	margin:0;
	padding:3px 15px 0 15px;
}

#navigation li#active {
	margin:0 0 0 0;
	padding:0;
}

#navigation li#active span {
	display:block;
	margin:0;
	padding:10px 15px 0 15px;
	color:var(--headercol);
	background-color:var(--lightcol);
}


#navigation li:hover {
    cursor: pointer;
}

#navigation ul li ul {
    visibility: hidden;
  	opacity: 0;
    position: absolute;
  	transition: all 0.5s ease;
  	margin-top: 0;
    left: 0;
  	display: none;
}

#navigation ul li:hover > ul,ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* IE-Patch für IE 7*/
*:first-child+html .clearfix { min-height: 0; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Header */

#header {
    width: auto;
    height:80%;
    background-image: url(images/head1.png), url(images/head2.png);
		background-position: left, right;
		background-repeat: no-repeat, no-repeat;
    background-size: 24em auto;
		padding:0;
}

#header h1 {
	color:var(--spfblue);
}

div#header {
	text-align:center;
}

a.header {
	text-decoration:none;
}

a.header:link {
	color: var(--headercol);
}
a.header:visited {
	color: var(--headercol);
}
a.header:hover {
	color: #F7D358;
}


/* Footer */

#footer {
    width: 100%;
    height: auto;
    background-image: url(images/footer.png);
    background-size: auto 100%;
		background-color:var(--lightcol);
		margin:10px 0 0 0; /* top right bottom left*/
		padding:0 0 0 0;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
		border-style: solid;
		border-width: 0.05em;
		border-color: var(--darkcol);
	}

p.footer {
	 color:var(--darkcol);
	 font-size:1em;
	 text-align:center;
}

a.footer {
	text-decoration:none;
	font-size:1em;
}

#footer p {
	padding: 80px 0 0 0;
}

a.footer:link {
	color: var(--darkcol);
}
a.footer:visited {
	color: white;
}
a.footer:hover {
	color: #F7D358;
}

/* Styles */

/* below header */
hr.style {
	border: 0;
	height: 1.5px;
	margin-top:15px;
	margin-bottom:15px;
	background-image: -webkit-linear-gradient(left, rgba(0,0,102,0), rgba(0,0,102,0.75), rgba(0,0,102,0));
	background-image: -moz-linear-gradient(left, rgba(0,0,102,0), rgba(0,0,102,0.75), rgba(0,0,102,0));
	background-image: -ms-linear-gradient(left, rgba(0,0,102,0), rgba(0,0,102,0.75), rgba(0,0,102,0));
	background-image: -o-linear-gradient(left, rgba(0,0,102,0), rgba(0,0,102,0.75), rgba(0,0,102,0));
}
/* between sections */
hr.style2 {
	border: 0;
	height: 1px;
	width:50%;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
	background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
}

a{
  font-family:  "Happy Monkey", Calibri, Arial, Verdana;
}
a:link {
	color:var(--spfblue);
}
a:visited {
	color:var(--spfblue);
}
a:hover {
	color:#F7D358;
}
a:not([href]) {
     cursor: default;
}


/* Tabellenumgebungen */

.problems th:first-child, .training th:first-child {
  -moz-border-radius: 5px 0 0 0;
  border-radius: 5px 0 0 0;
}
.problems th:last-child, .training th:last-child {
  -moz-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;
}

.problems td, .problems th, .training td, .training th{
    padding: 8px;
  }

.problems td:first-child, .training td:first-child{
  font-weight:bold;
  font-size:1.2em;
}

.problems tr:nth-child(even){background-color:var(--backorange);}
.problems tr:nth-child(odd){background-color:var(--lightorange);}

.training tr:nth-child(even){background-color:var(--backcol);}

.problems th {
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
    background-color: var(--darkorange);
}

.training th {
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
    background-color: var(--darkcol);
}

.problems th p, .training th p{
  font-family: "Happy Monkey", Calibri, Arial, Verdana;
  font-size:1.5em;
}

/* Bilder */

#maps {
	width:90%;
	height:30%;
	padding:10px 10px 10px 10px;
	display:block;
}

.iframe {
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	display:inline;
}

img {
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

img.intext {
	margin-right:20px;
	margin-left:20px;
	margin-bottom:10px;
	height:auto;
}

.aboutus {
    width: 40%;
    position: relative;
	margin:10px 30px 10px 30px;
}

.aboutus span {
    background-color: silver;
    background-color: hsla(0, 0%, 100%, 0.5);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 2em;
    text-align: center;
	font-family: Calibri, Arial, Verdana;
	-webkit-border-bottom-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-bottomleft:5px;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
}

.aboutus img {
    display: block;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

.picsubl {
    width: 40%;
    position: relative;
	  margin:0 30px 0 30px;
}

.pic {
    width: auto;
    position: relative;
	  margin:0 30px 0 30px;
}

.picsubl span {
    background-color: silver;
    background-color: hsla(0, 0%, 100%, 0.5);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 2em;
    text-align: center;
		font-weight: bold;
	font-family: Calibri, Arial, Verdana;
	-webkit-border-bottom-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-bottomleft:5px;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
}

.picsubl img {
    display: block;
  	-webkit-border-radius:5px;
  	-moz-border-radius:5px;
  	border-radius:5px;
}

.picsubl a {
  display: block;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.floatright {
  float:right;
}

div.lessons {
	width:70%;
	position: relative;
	margin:0 30px 0 30px;
}

div.lessons {
	text-align: left;
	font-size: medium;
	text-indent: 0;
}

.phil {
    /* width: 40%;*/
    position: relative;
	  margin:0 20px 20px 30px;
}

.phil span {
    background-color: silver;
    background-color: hsla(0, 0%, 100%, 0.7);
    position: absolute;
    bottom: 0;
    width: 90%;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
  	font-family: "Happy Monkey",Calibri, Arial, Verdana;
  	-webkit-border-bottom-right-radius:5px;
  	-webkit-border-bottom-left-radius:5px;
  	-moz-border-radius-bottomright:5px;
  	-moz-border-radius-bottomleft:5px;
  	border-bottom-right-radius:5px;
  	border-bottom-left-radius:5px;
}

.phil img {
    display: block;
}

.contact {
    width: 25%;
    position: relative;
		margin:0 30px 0 30px;
}

.mobilemaps {
display:none;
}

/* Fonts */

h1 {
	font: 3em "Happy Monkey", Verdana, sans-serif;
	padding:auto;
 }

h2 {
	font-family: "Happy Monkey", Calibri, Arial, Verdana;
	font-size: 1.4em;
	color: var(--headercol);
}

h3 {
	font-family: "Happy Monkey", Calibri, Arial, Verdana;
	font-weight: bold;
	font-size: 180%;
	color: var(--headercol);
}

h4 {
	text-align:left;
	font-family: "Happy Monkey", Calibri, Arial, Verdana;
	font-size: 2em;
	font-weight: bold;
	text-decoration: underline;
	color: var(--headercol);
}

p {
	font-family: "Spinnaker",Calibri, Arial, Verdana;
	font-size: 1.1em;
	color: #000000;
	text-align:left;
  text-decoration: sans-serif;
  line-height: 1.5;
}

::selection {
    background: #848487;
    color: var(--lightcol);
}
/* und hiermit der Firefox >=1 */
::-moz-selection {
    background: #848487;
    color: var(--lightcol);
}

@media only screen and (max-width:1200px){
#header {
  background-image:none;
  width:95%;
}
}

@media only screen and (max-width: 700px) {
#footer {
	display:none;
}

#bg {
	display:none;
}

#header {
	background-image:none;
	width:95%;
}

h1 {
	font-size:2.5em;
}

h4 {
	margin-top:5px;
	margin-bottom:10px;
}

ul {
   margin-left:5px;
}

h2 {
	margin-top:5px;
	margin-bottom:5px;
}

.picsubl {
	width:95%;
	margin-left:10px;
	float:none;
	margin-bottom:5px;
}

.intext {
	display:none;
}

.phil {
	width:95%;
	margin-right:10px;
	float:none;
	margin-top:5px;
}

.contact {
    width: 50%;
    position: relative;
	margin:0;
	margin-bottom:10px;
}

.docs {
	display:none;
}

.left {
  /*display:none;*/
  width:50%;
  max-width:700px;
  padding-right:30px;
}

.right {
  width: 100%;
  padding-right:30px;
}

/* .leash {
	display:none;
}*/

table {
	width:100%;
}

.mobilemaps {
	width:90%;
	display:block;
	margin-left:10px;
}

.nonmobile {
  display:none;
}

#navigation ul {
	float:none;
	width:100%;
	padding:0;
}
#navigation li,
#navigation li#active span,
#navigation li a,
#navigation li a span {
	float:none;
	width:100%;
}
#navigation ul li {
	padding:0;
}
#navigation li a,
#navigation li#active {
	height:auto;
	text-align: center;
	margin:0;
	padding:0;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;
}
	#navigation li a,
	#navigation li a span,
	#navigation li#active span {
		padding:0;
	}

	#content,
	#navigation li#active span,
	#navigation li a {
		-webkit-border-top-right-radius:0px;
		-webkit-border-top-left-radius:0px;
		-moz-border-radius-topright:0px;
		-moz-border-radius-topleft:0px;
		border-top-right-radius:0px;
		border-top-left-radius:0px;
	}
	#navigation li:first-child a,
	#navigation li#active:first-child span {
		-webkit-border-top-right-radius:5px;
		-webkit-border-top-left-radius:5px;
		-moz-border-radius-topright:5px;
		-moz-border-radius-topleft:5px;
		border-top-right-radius:5px;
		border-top-left-radius:5px;
	}

  #navigation li.dropdown:first-child a {
    -webkit-border-top-right-radius:0px;
		-webkit-border-top-left-radius:0px;
		-moz-border-radius-topright:0px;
		-moz-border-radius-topleft:0px;
		border-top-right-radius:0px;
		border-top-left-radius:0px;
  }

}

#imprint {
	text-align:center;
	color:black;
	}

#imprint a {
	color:black;
	text-decoration:none;
}

#imprint p {
	text-align:center;
	}