/* 

Theme Name: Heike Luepke Physiotherapie, Version 0.1


Theme URL: 
http://www.heikeluepke.de

Description:  Theme für salinksi

Version: 0.1

Author: breakeven, Bernd Press

Author URL: http://www.breakeven-berlin.de

*/

	@import url(css/normalize.css);	
	@import url(css/genericons/genericons.css);
	@import url(css/gridpercent.css);
	/* mobile stylesheet at the end */
	
	/* Default link styling */
	a { outline: 0; }
	a:link { color: #838383; }
	a:visited { color: #838383; }
	a:hover, a:focus { color:#0092a7; cursor:pointer;}
	a:active { color: #838383; }
	
	body, html { height: 100% !important; padding: 0; margin: 0;}
		
	button,
	html input[type="button"],
	input[type="reset"],
	input[type="submit"] {
	  cursor: pointer;
	}
	
	button::-moz-focus-inner,
	input::-moz-focus-inner {
	  border: 0px none;
	  padding: 0px;
	}

	body, html { height: 100% !important; padding: 0;}
 
	body {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 15px;font-size: 0.938rem;
		line-height: 21px;line-height: 1.313rem;
		font-weight: 400;
		color:#717172;
		overflow-y: scroll;
		background-color: #ffffff;
		text-align:left;
	}

	h1	{font-size: 19px; font-size: 1.1875rem;font-weight:normal;padding:0;margin: 0 0 3% 0;color: #0092a7;}
	h2	{font-size: 15px; font-size: 0.9375rem;font-weight:bold;padding:0;margin: 3% auto 0.5% auto;color: #787878;
		/* text-shadow: 1px 1px 1px #333 */
	}
	h3	{
		font-size: 18px; font-size: 1.1rem;font-weight:bold;padding:0;margin: 3% auto 0 auto;color: #787878;
	}
	
	h4	{
		font-size: 15px; font-size: 0.9375rem;font-weight:bold;padding:0;margin: 3% auto 0 auto;color: #787878;
	}
	

	ul {padding: 0px; margin: 0 0 0px 0; list-style-type:none;}
	ul li {
		padding: 0px 0 0 20px; 
		margin: 0px;
		background: url("images/bullet.jpg") 0px 4px no-repeat;
	}
	
	p {	
		text-align:left;margin: 1% 4% 20px 0;
	}
	
	hr {
		border: 0px;
		border-top: #9ebddc 2px solid;
		margin: 20px auto 26px auto;
		width: 8%;
	}
	


	/* Struktur  mit feststehendem Footer unten (negative margin solution) */
	.page_margins {
	  	position:relative !important;
	  	min-height:100%; /* real browsers */
  		height: auto !important;
	  	padding: 0;	/*space for the footer */;
	  	max-width: 100%; margin: 0px auto; overflow: hidden; width: 100%;
	  }
	  * html .page_margins { height:100% !important; }

	.page { 
		box-sizing: border-box;
		position:relative;
		margin: auto;
		width:100%;
		height: auto !important;
	 	max-width:1200px;
	 	padding-top: 50px;
	 	padding-bottom: 200px;
	 	padding-left: 210px;
	 }
	 
	footer {
		position: relative !important;
		box-sizing: border-box;
		clear:both;
		padding: 0px 10px 60px 10px;
		margin: -200px auto 0px auto;
		color: #9ebddc;
		background-color: #f2f2f2;
		width: 100%;
		height: 200px;
		text-align:center;
	}


	footer a:link	{text-decoration: none; color: #838383;}
	footer a:visited{text-decoration: none; color: #838383;}
	footer a:hover, footer a:focus	{text-decoration: none; color: #c0c0c0;}
	footer a:active	{text-decoration: none; color: #838383;}	
  		
	header[role="banner"] {
		position:relative;
		display:block;
		top: 0px;
		left: 0px;
		width: 100%;height:249px;
		margin: 0 auto 0px auto;
		background-color: #0092a7;
		clear:both;
		z-index: 90;
	}

	#headercontent {
		position:relative;
		display:block;
		margin:auto;
		width:100%;
		height: 204px;
		max-width:1200px;
	}
	#logo {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 99;
		border: 0px;
		width: 561px;
		height: 204px;
	}
	#logomobile {
		display:none;
		position: absolute;
		top: 8px;
		left: 30px;
		z-index: 99;
		border: 0px;
		width: 50%;
		max-width: 179px;
	}
	#slogan, #slogan_small {
		position: absolute;
		top: 0px;
		right: 0px;
		border: 0px;
		height: 204px;
	}
	#slogan {width: 828px;}
	#slogan_small {width: 533px;display:none;}
	

	main {
		box-sizing: border-box;
		clear:both;
		padding: 0px 30% 60px 0;
		margin: 0px auto 0 auto;
		min-height: 300px;
		}
	main article {
		display:block;
		float:left;
		width:50%;
		min-width: 520px;
		margin: 0 0 5% 0;
		
	}


	
/* ---------------------------------------------------------
   Page content styles
   ---------------------------------------------------------*/
   	.clearer {
		clear:both;
		height:0px;
		font-size:0;
		border:none;
		margin:0; padding:0;
		background:transparent;
	    	content:".";
	    	display:block;
	    	visibility:hidden;
	}
	
	.picturebar {
		display:block;
		width: 80%;
		height: auto; 
		margin-bottom: 30px;
	}
	.picturebar img {
		width: 100%;
		max-width: 435px; }
	
	#zitat {
		position:absolute;
		display:block;
		right: 30px;
		top: 300px;
		width: 25%;
	}
	#zitat img { width: 100%; max-width: 350px; height: auto; display:block; }
	
	.container {
		box-sizing: border-box;
		width: 100%;
		height: auto;
		display:block;
		padding: 0 29px 0 29px;
		clear:both;
		min-height: 350px;
		text-align:left;
	}

	.content {
		display:block;
		box-sizing: border-box;
		width: 100%;
		padding-bottom: 30px;
	}
	

/* --- navi und Suche fuer Bildschirme über 767px ---*/
		
	.nav-button { display: none; }
	
	nav {
		position: absolute;
		top: 204px;
		left: 0px;
		margin: auto;
		z-index: 99; 
		display:block;
		width: 100%;
		max-width: 100%;
		height: 45px;
		padding: 0;
		text-align:center;
		vertical-align:middle;
		background-color: #a2d0d8;
		font-size: 15px; font-size: 0.9rem;
		font-weight: normal;
	}
	nav .menu { max-width: 1200px; height: auto; background-color: transparent; margin: auto; }
	
	
	nav .menu > ul {
		display:block;
		padding: 0 0px 0px 0px;
		text-align:left;
		margin-left: 210px;
		list-style-type:none;
		}
	nav .menu > ul > li {
		display: inline-block;
		margin: 0px 0 0 -1px;
		width: auto;
		padding: 0;
		height: auto;
		border-left: #ffffff 1px solid;
		text-align:center;
		background-image: none;
	}
	nav .menu > ul > li:last-child {border-right: #ffffff 1px solid; }
	
	nav .menu ul li a { display: block; padding: 10px 13px 14px 13px; text-decoration: none; color: #48484a; white-space: nowrap; text-transform:uppercase;}
	nav .menu ul li a:link  {text-decoration: none; color: #48484a;}
	nav .menu ul li a:visited{text-decoration: none; color: #48484a;}
	nav .menu ul li a:hover, a:focus  {text-decoration: none; color: #48484a;background-color: #d6d6d6; }
	nav .menu ul li a:active  {text-decoration: none; color: #48484a;}
	nav .menu ul li.current_page_item > a { background-color: #3d7e8c; color: #ffffff; }
	
	/* Untermenüs optisch anzeigen als Option: 
	nav li > a:after {	  content: "";	}
	Anschließend entfernen wir das Plus-Zeichen per Pseudoklasse „:only-child“ von solchen „<a>“-Elementen wieder, welche das einzige Kindelement sind, also kein „<ul>“-Element als Kind besitzen. 
	nav li > a:only-child:after {  content: "";} */
	
	/*sub level menus dropdown global formatings */
	nav .menu ul li ul li { background-image: none; padding: 0px;}
	nav .menu ul li ul li a {padding: 8px 12px 8px 12px; }
	nav .menu ul li ul li a:link  {}
	nav .menu ul li ul li a:visited{}
	nav .menu ul li ul li a:hover, nav .menu ul li ul li a:focus  {}
	nav .menu ul li ul li a:active  {}
	
	/*2nd level menus */
	nav .menu > ul > li > ul {  display: none; position: absolute; top:45px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); background-color: #dedede;}
	nav .menu > ul > li:hover > ul {	  display: block;	  }
	nav .menu > ul > li > ul > li {	  position: relative; text-align:left; border-top: 1px solid #fff; }
	nav .menu > ul > li > ul > li:first-child {border-top: 0px; }
	nav .menu > ul > li > ul > li:hover {background-color: #dfdfdf; }
	
	/*3rd level menus !!!not used!!! */
	nav .menu > ul > li > ul > li > ul {  display: none;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); background-color: #253f59;	}
	nav .menu > ul > li > ul > li:hover > ul 	{	  display: block; position: absolute; left: 100%;top: 0;}
	nav .menu > ul > li > ul > li > ul > li 	{	  position: relative; text-align:left;border-bottom: 0px solid #3E3E3E; border-top: 1px solid #456687; }
	nav .menu > ul > li > ul > li > ul > li:hover {background-color: #324e6b; }
	
	
	
	
/* ---------------------------------------------------------
   mobile styles
   ---------------------------------------------------------*/

	

	/* Navigation Bar
	-------------------------------------------------------- */
@media only screen and (min-width: 0px) and (max-width: 1100px) { 
		#logo { padding-left: 30px;}
		#slogan { display:none; }
		#slogan_small { display:block;}
		#zitat { display:none; }
		nav .menu > ul { margin: auto;text-align:center; }
		.page {padding: 0 0 200px 0 !important }
		main { padding: 30px 30px 60px 30px;}
		nav .menu ul li a {  padding: 10px 11px 14px 11px;}
} 



 @media only screen and (min-width: 0px) and (max-width: 800px) { 
				/* Allgemeine Modifikationen */
				
				header[role="banner"], #headercontent { height: 110px; }
				
				#logo { display: none; }
				#logomobile { display: block; }
				#slogan_small { display: none;}
				.page { padding-left: 0px;}
				

	/* Navigation Area
	-------------------------------------------------------- */	
				nav {
					position: absolute;
					width: 100%;
					top: 0px;
					right: 0px;
					z-index: 2;
					padding: 0.6em 0; border: none; 
					background: transparent;}

	/* Navigation Button
	-------------------------------------------------------- */
			
				.nav-button {
					display: block;
					position: absolute;
					top: 24px;
					right: 30px;
					width: 55px;
					height: 50px;
					background: url('images/mobile-menu-icon-large.png');
					background-position: center center;
					background-repeat: no-repeat;
					background-size: 36px, 100%;
					cursor: pointer;
					border: 0 none;
					z-index: 999;
					text-indent: -9999px;
				}
				.nav-button:hover { 
					background-image: url('images/mobile-menu-icon-largex.png');color: #fff;
				}
				.nav-button.open {
					background: url('images/mobile-close-icon-large.png');
					background-position: center center;
					background-repeat: no-repeat;
					background-size: 36px, 100%;
				}
				.nav-button.open:hover { 
					background-image: url('images/mobile-close-icon-largex.png');
				}


	
	/* Navigation Menu
	-------------------------------------------------------- */
				nav .menu {display: block; position: absolute; top: 0px; right: 0px;z-index:99;height: auto; }
				nav .menu ul { padding: 0;text-align: left; font-weight: normal; }
				
				/* Toggle the navigation bar open  */
				nav .menu ul, nav .menu ul li { display: none; }
				nav .menu ul.open { display: block; height: auto; margin-top: 110px; }
				nav .menu ul.open li { display: block; }
				  
				/* home button 
			  	nav .menu > ul > li:first-child {
			  	}
			  	nav .menu > ul > li:first-child a {  }
				*/
				  
				/*1st level menus */
				nav .menu > ul {background-color: #dedede;}
				nav .menu > ul > li { position: relative; display:block; width: 200px; padding: 0px; margin: 0;border-top: 1px solid #fff;}
				nav .menu ul li a { text-align:left; color: #000; padding: 12px;  }
				nav .menu ul li a:link, nav .menu ul li a:visited, nav .menu ul li a:active { color: #000; }
				nav .menu ul li a:hover { color: #000000; }
				  				  	
				/*2nd level menus */
				nav .menu > ul > li > ul { width: 240px;left: -240px; top: 0; margin: 0px; background-color: #d0d0d0;}
				nav .menu > ul > li:hover > ul { display: block;}
				nav .menu > ul > li > ul > li { position:relative; margin: 0 0 0 0px; width: auto;}
				nav .menu > ul > li > ul > li a { }
				  	
				  	
				/*3rd level menus !!!!!not used!!!! */
				nav .menu > ul > li > ul > li > ul {  display: none; background-color: transparent; }
				nav .menu > ul > li > ul > li:hover > ul 	{	  display: block; position: absolute; left: 0;top: 0;}
				nav .menu > ul > li > ul > li > ul > li 	{	  position: relative;  border: 0; margin: 0 0 0 20px;}
				nav .menu > ul > li > ul > li > ul > li a	{	}
					
} 

@media only screen and (min-width: 0px) and (max-width: 860px) { 

}


@media only screen and (min-width: 0px) and (max-width: 787px) { 
				/* für mobile Clients: Navi über gesamte Breite */
				nav, nav .menu, nav .menu ul { width: 100%;max-width: 100%; }
				nav .menu ul li { width: 100%; position: static; margin: 0; }
				/* oberste Navi-Box bekommt einen Schatten, damit sie sich besser vom Content abhebt. Und mehr Padding, damit es nicht mit dem Logo kollidiert */
				nav .menu > ul { box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.55); }

				/*2nd level menus */
				nav .menu > ul > li > ul { position: static; width: 100%; margin: 0px; display: block; box-shadow: none;}
				nav .menu > ul > li > ul > li {	position: relative; box-sizing: border-box; width: 100%; margin: 0px; padding-left: 20px;}

		
 }
 
@media only screen and (min-width: 0px) and (max-width: 480px) { 
	.picturebar {
		float:none; display:block; width: 100%; padding: 0 0px 0 0px;margin: 0;
	}
	.picturebar picture { width: 100% }
	.picturebar img {max-width: 480px; }
	.content {
		display:block;
			float:none;
			box-sizing: border-box;
			width: 100%;
			padding: 20px 0px 30px 0px;
			
	}
}

/* End Mobile Styles */

	
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
	background:transparent !important;
    }
	html { background-color:#fff; }

	header[role="banner"] { background-color: #282828 !important; border: 0px;}

	/* Hide navigation */
	nav { display:none; }

	/* Show link destinations in brackets after the link text */
	a[href]:after { content: " (" attr(href) ") "; }
	a[href] {
		font-weight:bold;
		text-decoration:underline;
		color:#06c;
		border:none;
	}
	/* Don't show link destinations for JavaScript or internal links */ 
	a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
	
	/* Show abbr title value in brackets after the text */
	abbr[title]:after { content: " (" attr(title) ")"; }

	figure { 
		margin-bottom:1em; 
		overflow:hidden;
	}

	figure img { border:1px solid #000; }
}