@import url('/fonts/fonts.css');

:root {
	--menu-item-width: 100px;
}

body {
	font: 18px 'slabo_13px', 'lato', sans-serif;
	line-height: 1.5;
	/* background-image:url('../images/bluechecked2.jpg'); */
	background-color:#006699;
	margin:0;
	padding:0;
}

div.container {
	background-color:#fff;
	width: 80%;
	padding: 0;
	margin: 0 auto;
}

h1,h2,h3,h4,h5,h6 {
	font-family: 'slabo_13px', 'lato', sans-serif;
}

a {
	color: #0099cc;
	text-decoration: none;	
}

.red {
	color: #DC143C;
}

/* Blog */
h1.blog-title a {
	color: #08c;
	text-decoration: none;
}
h2.list-title a {
	color: #000;
	text-decoration: none;
}

/* Page Titles */
h3 {
	line-height:1;
	margin-bottom:10px;
}

/* Page Headings */
h4 {
	margin:1em 0 1em 0;
}

hr {
	border: none;
	border-top: 1px solid #ccc;
}

/* Main Page Content */
#main {
	padding: 0 20px 0 20px;	
	margin: 0;
	&.events {
		padding-right: 0px;
	}
}
.main {
	padding: 0 20px 0 20px;
	margin: 0;
}

/* Page Text */
p {
	margin:1em 0 0 0;
	&.no_top_margin {
		margin-top: 0px;
	}
}

ul {
	margin-top:1em;
}

.clear {
	clear:both;
}

.amazon_note {
	font-size: 12px;	
}

/* Header */
header {
	margin: 0;
	padding: 0 20px 0 20px;
	width: calc(100% - 40px);
	position: relative;
}

header h1 {
	padding: 5px 0 0 0;
	margin: 0;
	line-height: 60px;
	img {
		height: 60px;
		float: left;
		margin: 3px 15px 0px 0px;
	}
}

/* Top Nav BLock */
#top-nav { 
	position: relative;
	clear: left;
}
#top-blurb {
	float:left;
}
#top-blurb p {
	font-family: Georgia;  /* "Parisienne-Regular"; */
	font-size: 20px;
	margin: 5px 0 0 0;
	padding: 0;
}

/* Top Menu */
#top-menu {
	float:right;
	margin-bottom: 5px;
}
#nav {
	margin: 5px auto 5px 0;
	position: relative;
	width: calc(var(--menu-item-width) * 6);
	height: 30px;
	background-color: #34495e;
	border-radius: 8px;
	font-size: 0;
}
#nav a {
	line-height: 30px;
	height: 100%;
	font-size: 15px;
	display: inline-block;
	position: relative;
	z-index: 1;
	text-decoration: none;
	/* text-transform: uppercase; */
	text-align: center;
	color: white;
	cursor: pointer;
}
#nav .animation {
	position: absolute;
	height: 100%;
	top: 0;
	z-index: 0;
	transition: all .5s ease 0s;
	border-radius: 8px;
}
#nav a {
	width: var(--menu-item-width);
}
#nav .start-home, #nav a:nth-child(1):hover~.animation {
	left: 0;
	width: var(--menu-item-width);
	background-color: #3498db;
}
#nav .start-merchandise, #nav a:nth-child(2):hover~.animation {
	left: var(--menu-item-width);
	width: var(--menu-item-width);
	background-color: #1abc9c;
} 
#nav .start-resources, #nav a:nth-child(3):hover~.animation {
	left: calc(var(--menu-item-width) * 2);
	width: var(--menu-item-width);
	background-color: #e74c3c;
}
#nav .start-books,  #nav a:nth-child(4):hover~.animation {
	left: calc(var(--menu-item-width) * 3);
	width: var(--menu-item-width);
	background-color: #cccc33;
} 
#nav .start-events,  #nav a:nth-child(5):hover~.animation {
	left: calc(var(--menu-item-width) * 4);
	width: var(--menu-item-width);
	background-color: #7b68ee;
} 
#nav .start-blog, #nav a:nth-child(6):hover~.animation {
	left: calc(var(--menu-item-width) * 5);
	width: var(--menu-item-width);
	background-color: #e67e22;
}

/* Footer */
footer {
	color: #888;
	padding: 5px;
	margin: 0;
	background: #eee;
	font-style: italic;
	box-sizing: border-box;
	height: 50px;
}
footer div {
	height: 100%;
}
footer a { 
	float: left;
	height: 30px;
	margin: 0;
	padding-top: 5px;
	padding-left: 5px;
}
footer p {
	float: right;
	text-align: right;
	margin: 0;
	padding-top: 5px;
	padding-right: 5px;
}

/* Home Page iFrames */
iframe {
	margin-top: 20px;
	border: none;
}
iframe#home_video {
	width: 600px;
	max-width: 70%;
	border-radius: 5px;
}

/* Home Page: Piano News */
#piano_news_container {
	position: relative;
	overflow: hidden; 
	width: 100%;
	height: 585px; 
	margin-bottom: -40px;
}
iframe#piano_news {
	position: absolute;
	top: -60px;
	width: 100%;
	height: 585px; 
}

/* Home Page: Next Video */
#reload_video { 
	position:relative;
	margin-top: -37px;
	width: 80px;
	height: 20px;
	line-height: 20px;
	margin-left: 75%;
	padding: 5px;
	background-color: #eee;
	border-radius: 5px;
	text-align: center;
	&:hover {
		cursor: pointer;
	}
}

/* Upcoming Events */
#upcoming_events {
	width: 100%;
	height: 280px;
	overflow: hidden;	
}

/* EventBrite Events */
.eb_events_scroller {
	width: 100%;
	height: 575px;
	overflow-y: scroll;
}
.eb_event { 
	position: relative;
	width: 250px;
	height: auto;
	line-height: 1.0;
	display: inline-block;
	overflow: hidden;
	margin: 10px 20px 5px 0px;
	border-radius: 5px;
}
.eb_event_img {
	width: 100%;
	height: 150px;
	display: block;
	overflow: hidden;
}
.eb_link { 
	display: block;
	width: 100%;
	height: 100%;
}
.eb_date_box { 
	position: absolute;
	top: 8px;
	left: 8px;
	width: 50px;
	height: 50px;
	background-color: rgba(51,153,204,0.7);
	font-size: 20px;
	padding: 8px;
	line-height: 1.2;
	text-align: center;
	a { 
		text-decoration: none;
		color: #fff;
	}
	z-index: 5;
	a {
		width: 100%;
		height: 100%;
		display: block;
	}
}
.eb_summary { 
	width: 100%;
	height: 115px;
	background-color: #eee;
	a { 
		text-decoration: none;
		color: #000;
	}
	overflow: hidden;
}
.eb_event_title { 
	margin: 5px 5px 0px 5px;
	font-size: 14px;
	line-height: 1.2;
}
.eb_event_venue,
.eb_event_address { 
	margin: 3px 5px 0px 5px;
	font-size: 14px;
	line-height: 1.2;
}

/* Featured Product */
#featured_product {
	position: relative;
	height: auto;
	width: 1000px;
	max-width: 100%;
	display: inline-block;
	margin-top: 20px;
}
.product_text {
	width: 80%;
	float: left;
}
.product_text p {
	margin: 0;
}
.product_image {
	float: right;
	width: calc(20% - 10px);
	margin-left: 10px;
}
.product_image img {
	max-width: 100%;
	max-height: 200px;
}

/* Merchandise Page */
#piano_stores {
	margin-top: 10px;
}
select#region {
	font-size: 15px;
	border-radius: 5px;
	padding: 3px;
}

/* Mobile Styles */

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

	header h1 {
		img {
			margin: 13px 15px 0px 0px;
		}
	}
	.blog-title { 
		line-height: 40px;
	}
	#top-blurb {
		text-align:center;
		float: none;
	}
	#top-menu { 
		float: none;
		color: #006699 !important;
	}
	#nav { 
		width: 100%;
		height: 75px;
		background-color: #fff;
		color: #006699 !important;
		display: block;
	}
	#nav a {
		width: 50%;
		color: #006699 !important;
		font-weight: bold;
		height: 25px;
	}
	#nav .animation {
		position: absolute;
		height: 25px;
		z-index: 0;
		transition: all .5s ease 0s;
		border-radius: 8px;
	}
	#nav a:nth-child(odd) { 
		clear:left;
	}
	#nav .start-home, #nav a:nth-child(1):hover~.animation {
		left: 0;
		width: 50%;
		background-color: #fff;
	}
	#nav .start-merchandise, #nav a:nth-child(2):hover~.animation {
		left: 50%;
		width: 50%;
		background-color: #fff;
	} 
	#nav .start-resources, #nav a:nth-child(3):hover~.animation {
		left: 0;
		top: 25px;
		width: 50%;
		background-color: #fff;
	}
	#nav .start-books,  #nav a:nth-child(4):hover~.animation {
		left: 50%;
		top: 25px;
		width: 50%;
		background-color: #fff;
	} 
	#nav .start-events,  #nav a:nth-child(5):hover~.animation {
		left: 0;
		top: 50px;
		width: 50%;
		background-color: #fff;
	} 
	#nav .start-blog, #nav a:nth-child(6):hover~.animation {
		left: 50%;
		top: 50px;
		width: 50%;
		background-color: #fff;
	}	
	/* Upcoming Events */
	#upcoming_events {
		width: 100%;
		height: auto;
		overflow: visible;	
	}
	.eb_event {
		width: 100%;
	}
	.eb_event_img {
		height: auto;
		max-height: 250px;
	}
	/* YouTube Video */
	iframe#home_video {
		width: 100%;
		max-width: 100%;
	}
	#reload_video { 
		display: none;
	}
	/* Featured Product */
	#featured_product {
		.product_text {
			width: 100%;
			float: none;
			margin-bottom: 10px;
		}
		.product_image {
			clear: left;
			float: none;
			width: 100%;
			text-align: center;
			margin: 0;
			a {
				width: 100%;
				height: 100%;
				display: block;
			}
			img {
				height: 100px;
				width: auto;
			}
		}
	}
	
	/* Events Page */
	#main {
		&.events {
			padding-right: 20px;
		}
	}
	.eb_events_scroller {
		height: auto;
		overflow-y: auto;
		overflow-x: hidden;
	}

	/* Footer */
	footer a {
		display: none;	
	}	
	
}