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

body {
	
	background-color: #FFFFFF;
	
	color: #3F2860;
	
	font-family: Georgia; 
		
}

* {
	
	box-sizing: border-box; 
	
}

header {
	
	background-color: #9BC1C2;
	
	vertical-align: "center";
	
	background-image: url("yoga-images/lilyheader.jpg"); 

	height: 150px; 
	
	background-position: right; 
	
	background-repeat: no-repeat;
	
}

h1 {
	
	padding-top: 50px; 
	
	padding-left: 2em; 
	
	vertical-align: "center";
	
}

nav {

	font-weight: bold; 
		
	padding: 1em; 
	
	background-color: #F5F5F5; 
	
	float: left; 
	
	width: 200px; 
	
}

nav a {
		
	font-weight: bold;
	
	display: block; 
	
	text-align: center;	
	
	border: #CCCCCC 3px outset; 
		
	padding: 1em; 
	
	margin-bottom: 1em; 
	
}
	
	nav a:link {color: #3F2860;}
	
	nav a:visited {color: #497777;} 
	
	nav a:hover {color: #A26100; border: #333333 3px inset;} 
			


nav ul {
	
	list-style-type: none; 
	
	padding-left: none; 
	
}

main {
	
	padding-right: 2em; 
	
	padding-left: 2em; 
	
	display: block; 
	
	margin-left: 170px; 
	
	padding-top: 1em; 
	
}

.studio {
	
	font-style: italic;
	
}

footer {
	
	background-color: #9BC1C2;
	
	font-size: 0.60em; 
	
	font-style: italic; 
	
	text-align: center; 
	
	padding: 1em; 
	
}

#wrapper {
	
	width: 80%;
	
	margin-right: auto; 
	
	margin-left: auto;
	
	background-color: #F5F5F5;
	
	min-width: 1200px;
	
	max-width: 1480px; 
	
}



.floatleft {
	
	float: left; 
	
	margin-right: 4em; 
	
}

.clear {
	
	clear: both; 
	
}

header, nav, main, footer {display: block;}

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

	#desktop {display: inline;}
	
	body {
		
		margin: 0;
		
		padding: 0; 
		
	}
	
	#wrapper {
		
		width: 100%;
		
		min-width: 0;
			
		margin: 0; 
		
		padding: 0;
		
	}
	
	header {
		
		padding-top: 1px; 
		
	}
	
	h1 {
		
		padding-top: 1px; 
		
	}
	
	nav {
		
		float: none; 
		
		width: auto; 
		
		padding-left: 2em; 
		
	}
	
	nav a {
		
		padding: 0.2em; 
		
		margin-left: 0.3em; 
		
		float: left; 
		
		width: 23%; 
		
	}
	
	main {
		
		padding-right: 1em;
		
		padding-left: 1em; 
		
		padding-top: 2.5em; 
		
		padding-bottom: 2.5em; 
		
		margin: 0; 
		
		font-size: 90%;
		
		float: clear; 
		
	}
	
	#hero {
		
		width: 100%;
		
		height: auto; 
		
	}
	
	h2, h3, p, dl {
		
		padding-right: 2em; 
		
		padding-left: 2em; 
		
	}
	
	nav ul {
		
		margin-left: 2em; 
		
	}
	
	.floatleft {
		
		margin-left: 2em; 
		
		margin-bottom: 1em; 
		
	}
	
	.clear {
		
		padding-left: 2em; 
		
	}
	
}

@media only all and (max-width: 768px) {
	
	h1 {
		
		font-size: 2em; 
		
		padding-top: 0.25em; 
		
		padding-left: 1.5em;
		
		width: 85%; 
		
		text-align: center; 
		
	}
	
	nav a {
		
		padding: 0.5em; 
		
		width: 45%; 
		
		float: left; 
		
		min-width: 6em; 
		
		margin-left: 0.5em; 
		
	}
	
	main {
		
		padding-top: 0; 
		
	}
	
	.floatleft {
		
		float: none; 
		
		display: none; 
		
	}
	
	#hero {
		
		display: none; 
		
	}
	
	footer {
		
		padding: 0.5em; 
		
		margin: 0; 
		
	}
	
	#mobile {display: inline;}
	
	#desktop {display: none;}
	
}