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

*{margin:0px;padding:0px;}

body {
	background-image:url(/templates/images/nav_bg.png);
	background-repeat:repeat-x;
	vertical-align:top;
}

img {
	border:0px;
}

#pagecontainer {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
}

#header {
	height:172px;	
}

#logo {
	float:left;
}

#links {
	float:right;
	margin-top:10px;
	margin-right:19px;
}

#divbody {
	position:relative;
}

#sidenav {
	margin-left:6px;
	width:190px;
	height:auto;
	background-color:#a31117;
	display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;
	vertical-align:top;
}

#sidenav ul {
	margin-left:20px;
	margin-bottom:20px;
	margin-top:20px;
}

#sidenav li {
	list-style:none;
	line-height:32px;
}

#sidenav ul a, #sidenav ul a:visited {
	color:#fff;
	text-decoration:none;
	font-family:helvetica,arial,sans-serif;
	font-style:italic;
	font-size:18px;
}

#sidenav ul a:hover, #sidenav ul a:active {
	color:#fff;
	text-decoration:underline;
}

#sidenav ul ul {
	margin-bottom:0px;	
	margin-top:0px;
}

#sidenav ul ul li {
	line-height:24px;	
}

#sidenav ul ul a, #sidenav ul ul a:visited {
	color:#fff;	
	text-decoration:none;
	font-size:14px;
}

#sidenav ul ul a:hover, #sidenav ul ul a:active {
	color:#fff;
	text-decoration:underline;
}

#slider {
	position: relative;
	overflow:hidden;
	width:980px;
	height:350px;
	margin-left:auto;
	margin-right:auto;
}

#content {
	width:790px;
	height:auto;
	display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;
	vertical-align:top;
}

#contenthome {
	height:345px;
}

#contentpadding{
	padding:20px;	
}

#promo {
	width:302px;
	height:300px;
	float:right;
	margin-top:15px;
	padding-right:18px;
}

#promo1 {
	width:300px;
	height:145px;
	border:solid 2px black;
}

#promo2 {
	margin-top:6px;
	width:300px;
	height:145px;
	border:solid 2px black;

}

#pianofooter {
	text-align:center;
	padding-top:13px;
}

#footer {
	width:1000px;
	display:inline-block;
	margin-top:25px;
}

#footer p {
	padding-top:5px;
	padding-right:5px;
	float:right;
	font-family:helvetica,arial,times new roman;
	font-style:italic;
	color:#666666;
	display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;
}

#footerimg {
	float:left;
	padding:5px;
	display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;
}

#footer hr {
	width:100%;
	height:3px;
	background-color:#c50821;
	border:0px;
}




/*THE MENU*/

div#wrapper-menu{
	margin-top:3px;
}
/*First of all you need to fix a width for your menu. Is necesary if you want center it, with margin negatives you can solve vertical centering and with margins auto for left and right you solve horizontal centering*/
div#wrapper-menu ul{
	position:relative;
	width:100%;/*this is the complete width of the menu*/
	width:100%;/*hack for fix width in IE8 and below*/
	height:55px;
	}
div#wrapper-menu ul li{display:inline-block;float:left;width:auto;height:55px;margin-right:4px;}/*size for each list element*/
div#wrapper-menu ul li#item7{margin-left:10px;}/*special margin for cart option*/
div#wrapper-menu ul li.navActive{background:url(../images/black-arrow-current-navigation.png) no-repeat center 40px;}/*each li element in the html code that is assigned to the current class will put the arrow on the button when representing the active section*/
div#wrapper-menu ul li a{
	display:inline-block;
	width:auto;
	height:40px;
	text-decoration:none;
	font-family:helvetica,arial,sans;
	font-style:italic;
	font-weight:normal;
	font-size:17px;;
	letter-spacing:-1px;
	line-height:40px;
	text-align:center;
	padding:0 20px 0 20px;
	border-radius: 8px;/*Only for advanced browsers*/
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	color:#FFF;
	}
div#wrapper-menu ul li#item7 a{font-size:1em;color:#FFF}
div#wrapper-menu ul li#item7 a:hover{background-color:#000;color:#c50821;}
div#wrapper-menu ul li a:hover{color:#c50821;background-color:#bdbdbd;}
div#wrapper-menu ul li.navActive a{color:#fff;background-color:#252525;}/*to represent the active section you need to used the current class in list tag (li) and in the anchor tag (a), in both.*/
div#wrapper-menu ul li.last-child a{background-color:#222222;color:#f8db3a}
div#wrapper-menu ul li span{display:block;width:48px;height:18px;float:left;background:url(../images/icon-cart.png) center center ;margin:10px 0 0 30px;}