/* OVERALL STYLES */


/*removing the padding and margin defaults, setting the overall font and background*/
body {
	padding: 0;
	margin: 0;
	font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif;
	font-size: 17px;
	color: #111;
	line-height: 140%;
	background-image: url('../images/background-notes.gif');
}

/*styling the links*/
a, a:visited {
	text-decoration: none;
	color: #0000A8;
	font-weight: normal;
}

/*styling the link hover*/
a:hover {
	text-decoration: underline;
}

/*styling the hidden Future Musicians web title*/
h1 {
	font-size: 10px;
}

/*styling the leftcol title (name)*/
h2 {
	padding: .3em .7em;
	font-size: 20px;
	background: #DBE521;
}

/*styling the page sub-titles*/
h3 {
	margin-top: 1.6em;
	font-size: 19px;
}

/*styling the testimonials*/
blockquote {
	font-family: "Palatino Linotype", Palatino, serif;
	font-size: 16px;
	text-align: justify;
	margin: 0 30px 0 15px;
	padding: 0;
}

/*left col line breaks*/
hr {
	color: #eee;
}

/*removing the padding and margins from images*/
img {
	padding: 0;
	margin: 0;
}

/*styling the first class, applied to any top elements that need it*/
.first {
	margin-top: 0;
}

/*styling the right class, which floats images to the right with a border*/
.right {
	float: right;
	position: relative;
	top: 10px;
	margin: 0 0 10px 15px;
	padding: 1px;
	background-color: #fff;
	border: 1px solid #333;
}

/*styling the right paragraph class, which aligns text to the right (for the testimonials)*/
.rightpar {
	text-align: right;
	margin: 5px 0 20px 0;
}

/*setting size and placement for the overall page*/
#container {
	position: relative;
	width: 955px;
	margin: 0 auto 0 auto;
	background-color: #fff;
}

/*setting the banner placement*/
#container #banner {
	position: absolute;
	border: none;
}

/*setting the piano playing instruction div placement*/
#container #instruction {
	position: absolute;
	top: 75px;
	left: 72px;
	width: 300px;
	font-size: 12px;
	color: #999;
}

/*taking the dotted outline off in Firefox*/
*:focus {
	outline: none;
}


/* NAVIGATION STYLES */


/*setting placement for the navigation div*/
#navigation {
	position: relative;
	width: 212px;
	left: 701px;
	top: 155px;
}

/*modifying the navigation list to remove bullets and add spacing*/
#navigation ul li {
	list-style: none;
	margin-bottom: 10px;
}

/*removing borders on the navigation images*/
#navigation a img {
	border: none;
}


/*MAIN CONTENT STYLES */


/*setting the placement and appearance of the title images*/
#title {
	position: relative;
	top: 485px;
	left: 390px;
	width: 214px;
	margin: 0;
}

/*placing the full content div*/
#content {
	width: 955px;
	margin-top: -1em;
	padding: 250px 0 0 0;
}

/*setting up the left column content (floated)*/
#leftcol {
	float: left;
	width: 220px;
	padding: 30px 25px 0 80px;
	font-size: 15px;
}

/*styling the left column list*/
#leftcol ul  {
	padding-left: 15px;
}

/*setting the left column bullet image*/
#leftcol ul li {
	margin-bottom: .3em;
	list-style-image: url('../images/music-note-bullet.gif');
}

/*styling the look of the left column list in IE6*/
* html #leftcol ul {
	padding-left: 0;
	margin-left: 15px;
}

/*styling the look of the left column list in IE7*/
*:first-child+html #leftcol ul {
	padding-left: 0;
	margin-left: 15px;
}

/*styling the left column quotes*/
#quote {
}

/*styling the Google map*/
#google {
	border: 1px solid #999;
	margin-top: 22px;
}

/*setting up the right column content*/
#main {
	width: 555px;
	margin-left: 324px;
	padding: 0 0 5px 45px;
	border-left: 4px double #999;
}

/*styling the right column margin in IE6*/
* html #main {
	margin: 0 0 0 336px;
}

/*styling the right column lists*/
#main ul {
	padding-left: 15px;
}

/*styling the look of the right column lists in IE6*/
* html #main ul {
	padding-left: 0;
	margin-left: 15px;
}

/*styling the look of the right column lists in IE7*/
*:first-child+html #main ul {
	padding-left: 0;
	margin-left: 15px;
}


/* CONTACT FORM STYLES */


/*putting a border on the form*/
#main fieldset{
	width: 420px;
	border: 1px solid #111;
}

/*styling the label tags and putting them on separate lines*/
#main label{
	display: block;
	margin-bottom: 5px;
}

/*styling the contact form list*/
#main fieldset ul {
	padding: 5px 0 0 25px;
}

/*styling the contact form list in IE6*/
* html #main fieldset ul {
	padding: 15px 0 0 20px;
}

/*styling the contact form list in IE7*/
*:first-child+html #main fieldset ul {
	padding: 15px 0 0 20px;
}

/*styling the contact form list items*/
#main fieldset ul li {
	list-style: none;
	margin-bottom: 15px;
}

/*styling the areas of user input in the contact form*/
#main input, #main textarea {
	padding: .5em;
	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-size: 16px;
}

/*styling the focused area of user input in the contact form*/
#main input:focus, #main textarea:focus {
	background-color: #eee;
}


/* FOOTER STYLES */


/*setting up the footer div to clear the float and align right*/
#footer {
	clear: both;
	padding: 10px 30px 10px 0;
	text-align: right;
	font-size: 14px;
	font-weight: bold;
}

/*styling the footer links*/
#footer a, #footer a:visited {
	color: #111;
	font-weight: bold;
}

/*styling the footer link hover to match the rest*/
#footer a:hover {
	color: #0000A8;
	text-decoration: none;
}