/*
www.pkdesign.de | Webdesign fuer Website Baker
websitebaker-template-shop.de | Templates fuer Website Baker
Mods by Nico Sommer
*/

/********* B E G I N N **********/
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto);

@font-face {
  font-family: 'FontAwesome';
  src: url('menue/font/fontawesome-webfont.eot?v=3.0.1');
  src: url('menue/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
  url('menue/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('menue/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
}


/****************************************/
/* Seiteneinstellung allgemein          */
/****************************************/	


header, section, nav, nav-sub, button, inhalt-links, inhalt-rechts, footer {
	display: block;
}

body {
	margin: 0px;
	padding: 0px;
	color: #444444;
	background: #222222;	
   font-family:  'Open Sans', sans-serif;
	overflow-y: scroll;
}

/* Überschriften H1 - H6 */
h1 { 
	font-size: 2.2em;
}
#inhalt-links h1, #aktuell h1 { 
	font-size: 1.1em; 
}

h2 {
	font-size: 1.4em;
}
h3 {
	font-size: 1.2em;
}		
h4 {
	font-size: 1.0em;
}
h5 { }
h6 { }

hr { 
	border: 0; 
	height: 1px; 
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
	background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

/* Neutralisation der Containerausrichtung */
.clear{ clear: both; }

/* Hervorhabung z.B. Suchseite Ausgabe */
.highlight {
	background-color: #cee69f;
	color: black;
	text-decoration: none;
	font-weight: normal;
	text-transform: none; 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
}

/* Kein gestrichelter Rand um Links */
a:focus {
	outline: none;
	-moz-outline: none; /*damit verstehen es alle Gecko-Browser */
}

/* Standardlinks */
a:link, a:visited, a:active {
	color: #d2691e;
	text-decoration: none;
	font-weight: normal;
}
a:hover {
	color: black;
	text-decoration: none;
}


/* Links Aktuell, linke Leiste, rechte Leiste */
#inhalt-links a:link, #inhalt-links a:visited, #inhalt-links a:active,
#inhalt-rechts a:link, #inhalt-rechts a:visited, #inhalt-rechts a:active,
#aktuell-innen a:link, #aktuell-innen a:visited, #aktuell-innen a:active {
	float: right;
	color: #fffafa;
	background-color: #343434;
	padding: 2.8% 2.8%;
	font-family:  'Open Sans', sans-serif;	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
}
#inhalt-links a:hover, #inhalt-rechts a:hover, #aktuell-innen a:hover {
	color: #fffafa;
	text-decoration: none;
	background-color: #cb4f26;
}

#inhalt-links a:link:before, #inhalt-rechts a:link:before, #aktuell-innen a:link:before  {
		font-family: 'FontAwesome';	
		content: "\f054\ ";	
		color: ButtonHighlight;
		margin-right: 4px;
}


/* Links im Content */
#inhalt-rechts a:link, #inhalt-rechts a:visited, #inhalt-rechts a:active {
	padding: 0.3% 0.8%;
	margin: 0 1%; 
	line-height: 2em;
}


/* Links in der Fusszeile */
a.footerlink:link { font-size:11px; font-weight: normal; color: gray; text-decoration: none;}
a.footerlink:visited{font-size:11px; font-weight: normal; color: gray; text-decoration: none;}
a.footerlink:hover {font-size:11px; font-weight: normal; color: white; text-decoration: none;}


/* Rundung der Kanten */
.rund {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
}

/* Schatten allgemein */
.schatten {
	-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.15);
	-moz-box-shadow:    0px 0px 8px rgba(50, 50, 50, 0.15);
	box-shadow:         0px 0px 8px rgba(50, 50, 50, 0.15);
}

/* Schatten beim oberen andocken des Menüs | function index.php */
.dockshadow {
-webkit-box-shadow: 0px 11px 23px 0px rgba(50, 50, 50, 0.20);
-moz-box-shadow:    0px 11px 23px 0px rgba(50, 50, 50, 0.20);
box-shadow:         0px 11px 23px 0px rgba(50, 50, 50, 0.20);
}


/****************************************/
/* box Seiteneinstellung allgemein      */
/****************************************/
/* aussen page 100% */	
.wrapper-aussen {
	margin: auto;
	width: 100%;
	height: auto;
}

/* innen page 1100px */	
.wrapper-innen {
	margin: auto;
	width: 1100px;
	max-width: 90%;
	height: auto;
}


/* bilder autom. scalieren */
img {
	max-width: 100%;
	height: auto;
	border: none;
}


/****************************************/
/* HEADER                               */
/****************************************/	
#header {
	padding: 1% 0%;
	width: 100%;
	height: 0px;
	background-color: #cfb53b;
	
}

.logo {
	float: right;
	padding: 0% 0%;
}

/* Box neben dem Slider */
#aktuell {
	margin-top: 1%;	
	padding: 8% 0 !important;
/*	background: #dd6d48; */ 
}
#aktuell-innen {
	float: left;
	height: 100px;
	width: 400px;
	max-width: 90%;
	color: #444444;
	font-size: 100%;
	padding: 1.8%;
}


/****************************************/
/* CONTENT                              */
/****************************************/	
/* Inhalt links */
#inhalt-rechts {
	float: right;
	width: 690px;
	padding: 0% 0% 8% 0%;
	font-size: 100%;
}

#inhalt-rechts ul { 
	list-style-image: url(images/gans.png);
}

/* Inhalt rechts */
#inhalt-links {
	float: left;
	width: 276px;
	padding: 0% 0% 8% 0%;
	font-size: 80%;
}	

/* Block/Blöcke linke Spalte */
.block {
	width: auto;
	padding: 5%;
	margin: 0% 0% 10% 0%;
	background-color: #fafafa;
}


/****************************************/
/* FOOTER                               */
/****************************************/	
/* aussen page 100% */	
#footer {
	min-height: 150px;
}
#footer-innen {
	margin-top: 2%;
	margin-bottom: 2%;
}

/* box footertext */
#by {
	float: right;
	max-width: 30%;
	font-size: 1em;
	text-align: center;
	color: gray;
	padding: 1% 0%;
	border-bottom: 1px dotted #5d5d5d;
}


/*****************************************/
/* SUB-Nav / oben von Hauptnav           */
/*****************************************/	
#subnav-aussen {
	background-color: #f9f9f9;
	margin-bottom: 3%;
}

#subnav {
	height: 2em;
}
#subnav ul {
	list-style-type: none;
	height: 10px;
	margin: 0px;
	padding: 0px;
}
#subnav li {
	margin: 0px;
	padding: 0px;
}

#subnav a:link,
#subnav a:visited,
#subnav a:hover,
#subnav a:active {
	float: left;
	margin-right: 1px;
	padding: 0.5% 1%; 
	margin: 0;
	font-size: 1.0em;
	color: #939393;
	letter-spacing: 0px;
	line-height: 2.6em;
}
#subnav a:focus,
#subnav a:hover,
#subnav a.menu-current {
	color: #464646;
	background-color: transparent;
}

#subnav a:link:before  {
		font-family: 'FontAwesome';	
		content: "\f054\ ";	
		color: #696969;
		margin-right: 4px;
}

/*****************************************/
/* FooterNav 2x / links u. rechts        */
/*****************************************/	
/* h1 im Footer - Menue Ueberschrift */
#footernav h1 {
	font-size: 1.0em;
	color: gray;
}
#footernav h1:before {
		font-family: 'FontAwesome';	
		content: "\f0e6\ ";	
		color: ButtonHighlight;
		font-size: 1.3em;
		color: gray;
}

#footernav {
	float: left;
	width: 21%;
	height: auto;
	margin: 0% 1% 1.5% 0%;
/*	background-color: rgba(146, 67, 41, 1); */
}

#footernav ul { 
	list-style-type: none;
	margin-left: -40px;
}

#footernav ul li { 
	width: 100%;
	padding: 2% 5%;
	margin-bottom: 4.7%;
}

/* Links 1.Ebenen */
#footernav li a:link, 
#footernav li a:visited, 
#footernav li a:focus,
#footernav li a:hover,
#footernav li a:active {
	color: gray;
	text-transform: uppercase; 
	font-size: 0.9em;
	padding: 2% 5%;
	letter-spacing: 1px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;			
}

/* Links hover und aktiv */
#footernav li a:hover,
#footernav li a.menu-current,
#footernav li a.menu-parent {
	color: #e6e9eb;
	background-color: #535353;
}


/****************************************/
/* SUCHEN                               */
/****************************************/
#suchen {
	float: right;
	padding: 1px;
	margin-top: -2%;
}
/* Suchformular Eingabefeld*/
#suchen .feld {
	float: left;
	width: 40px;
	margin: 0px;
	padding: 9px;
	color: #434d56;
	font-size: 0.9em;
	border: none;
	background-color: #eff1f3;
	opacity:0.8;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
 	border-top-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	border-bottom-left-radius: 5px;	
}

/* Suchformular Button */
#suchen .btnsuche {
	cursor: pointer;
	width: 16px;
	height: 16px;
	margin: 0 1px;
	padding: 18px;
	border: none;
	background-color: #252525;
	background-image: url(images/butt_suche.png);
	background-position: center; 
	background-repeat: no-repeat;	
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* Suchformular Button */
#suchen .btnsuche:hover {
	background-color: #CB4F26;
}


#suchen .transition-0-2-ease {
    transition: all 0.2s ease-out 0s;
}
#suchen input[type="text"]:focus {
    width: 300px;
    opacity: 0.9;
    outline:none; /* opera, safari nix outline eingebefeld */
}


/****************************************/
/* SCROLL-TOP                           */
/****************************************/
.scrollup {
	z-index: 99999;
  opacity: 0.8;
  margin: 0px;
  padding: 6px 10px;
  position: fixed;
  bottom: 10%;
  right: 3%;
  display: none;
 /*  text-indent: -9999px; */
  background-color: #f6f6f6;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}
.scrollup:before {
 	font-family: 'FontAwesome';	
	content: "\f077";
	color: #b2b2b2;
	font-size: 170%;
}
.scrollup:hover:before {
	color: #101047;
}
.scrollup:hover {
  cursor: pointer;
  opacity: 1.0;
}


/****************************************/
/* FLY                                  */
/****************************************/
.fly {
  opacity: 0;
  transition: all 600ms ease-in-out;
  transform: translateY(100px) scale(1.05) translate3d(0, 0, 0);
}
 
.show-block {
  opacity: 1;
  transform: translateY(0) scale(1) translate3d(0, 0, 0);
}


/*****************************************************/
/********* B E G I N N Screen Einstellungen respo ****/
/*****************************************************/

@media all {
	#div,#wrapper,#header, #inhalt-links,#inhalt-rechts,#wrapper-suchen,	#topbuttbox,
	#slider,#slider img, .btnsuche,
	#nav,#clicknav,.navigation ul li a,
	#subnav li a, #subnav li a:hover, a:link, a:hover {
	transition:all 0.5s linear;
  -o-transition:all 0.5s linear;
  -moz-transition:all 0.5s linear;
  -webkit-transition:all 0.5s linear;
	}
}



@media only screen and (max-width: 1100px) {
	
	#header {
		height: 30px;
	}
 	
	#inhalt-rechts, #inhalt-links, #footer-innen, #by {
		float: none;
		width: 100%;
	}

	#footer {
		background: white;
	}
	#footernav {
		width: 32%;
	}
	#by {
		float: left;
		max-width: none;
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 801px) {

	.parafooter {
		display: none;
		height: 0px;
	}

}

@media only screen and (min-width: 100px) and (max-width: 600px) {

	#footernav {
		width: 100%;
	}
	#footernav ul li {
		width: 90%;
	}
}

/*****************************************************/
/********* E N D E Screen Einstellungen **************/
/*****************************************************/