/* resetting margin and padding */
* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	outline-style: none; /* Keeps the dotted outline from displaying when a link is clicked */
}

/* remove underline from all links */
* a {
	text-decoration: none;
	color: white;
}

* a:hover {
	color: #f80f00;
}

* ul, * ol {
	list-style-type: none;
}

body {
	background-image: url(images/01_background.jpg);
	background-color: #f9ac20;
	background-repeat: no-repeat;
	background-position: top center;
}

/* canvas is the container for the masthead, meat_and_potatoes, and footer */
#canvas {
	position: relative; /* This is necessary because the floating contact screen is positioned absolutely.
							Explicitly stating that canvas has relative positioning allows us to use
							canvas as the parent view. */
	width: 800px;
	margin: 0 auto; /* This centers the canvas in the middle of the browser window */
	/* background-color: gray; */
}

/* masthead is the header. It contains the website's title, a logo, and any upper navigation menu */
#masthead {
	position: relative;
	margin: 0px 0px;
	height: 255px;
	text-align: center;
}

#masthead h1 {
	top: 0px;
	left: 0px;
	height: 220px;
	text-indent: -10000px;
	/* background-color: green; */
}

#navigation_main {
	width: 750px;
	margin: 0 25px;
	text-align: center;
	float: left;
}	

#navigation_main li {
	float: left; /* Pulls the list items up to be horizontally listed instead of vertically listed */

}

#navigation_main li a {
	position: relative;
	display: block;
	height: 35px;
	width: 125px;
	font-size: 15px;
	text-indent: -10000px;
}

#navigation_main li a:hover span {
	position: absolute;
	background-image: url(images/03_menu_background_active.png);
}

#navigation_main li a span#store_link {
	display: hidden;
}

#navigation_main li a:hover span#store_link {
	display: block;
	width: 140px;
	height: 51px;
	top: -8px;
	left: -10px;
	background-image: url(images/03_menu_coming_soon.jpg);
}

#navigation_main li a span#blog_link {
	display: hidden;
}

#navigation_main li a:hover span#blog_link {
	display: block;
	width: 120px;
	height: 65px;
	top: -15px;
	left: 5px;
	background-image: url(images/03_menu_blog_active.jpg);
}

#navigation_main li a span#myspace_link {
	display: hidden;
}

#navigation_main li a:hover span#myspace_link {
	display: block;
	width: 125px;
	height: 65px;
	top: -15px;
	left: 0px;
	background-image: url(images/03_menu_myspace_active.jpg);
}

#navigation_main li a span#facebook_link {
	display: hidden;
}

#navigation_main li a:hover span#facebook_link {
	display: block;
	width: 120px;
	height: 65px;
	top: -15px;
	left: 5px;
	background-image: url(images/03_menu_facebook_active.jpg);
	background-position: top right;
}

#navigation_main li a span#mailing_list_link {
	display: hidden;
}

#navigation_main li a:hover span#mailing_list_link {
	display: block;
	width: 125px;
	height: 65px;
	top: -15px;
	left: 0px;
	background-image: url(images/03_menu_mailing_list_active.jpg);
}

#navigation_main li a span#contact_link {
	display: hidden;
}

#navigation_main li a:hover span#contact_link {
	display: block;
	width: 130px;
	height: 65px;
	top: -15px;
	left: 5px;
	background-image: url(images/03_menu_contact_active.jpg);
	background-position: top right;
}

/* meat_and_potatoes contains any content, including album tracks */
#meat_and_potatoes {
	height: 488px; /* Masthead height is 255px. Footer height is 25px.
					We want a total height of 768px, which leaves 488px for the body */
	margin: 0px 25px;
}

#about_text {
	width: 750px;
	float: left;
}

#about_text h2 {
	height: 45px;
	font-size: 25px;
	text-align: left;
	text-indent: -10000px;
}

#about_text p {
	height: 140px;
	padding: 15px;
	font-size: 15px;
	line-height: 20px;
	text-indent: 15px;
	font-family: georgia, sans-serif;
	background-image: url(images/04_about_background.png);
}

#new_music {
	width: 750px;
	float: left;

}

#new_music h2 {
	height: 13px;
	text-indent: -100000px;
}

/* settings that apply only to track_list_album_1 */
#track_list_album_1 {

}

/* settings that apply only to track_list_album_2 */
#track_list_album_2 {
	background-position: right; /* The background images for track albums one and two are saved next to
								each other on one png. Setting the background-position to right displays
								a different image */
									
}

#track_list_album_1, #track_list_album_2 {
	position: relative;
	float: left;
	height: 195px;
	width: 210px;
	padding-left: 165px;
	padding-top: 15px;
	background-image: url(images/05_music_background.png);
}

#track_list_album_1 img, #track_list_album_2 img {
	position: absolute;
	left: 15px;
	top: 15px;
}

#track_list_album_1 h3 {
	width: 127px;
	height: 13px;
	background-image: url(images/05_music_basement_title.png);
	background-repeat: no-repeat;
}

#track_list_album_2 h3 {

	background-image: url(images/05_music_exhale_title.png);
	background-repeat: no-repeat;
}

#track_list_album_1 h3, #track_list_album_2 h3 {
	width: 127px;
	height: 13px;
	margin-bottom: 10px;
	text-indent: -10000px;
}

#track_list_album_1 li a, #track_list_album_2 li {
	color: white;
	font-family: georgia, sans-serif;
	font-size: 13px;
	line-height: 20px;
}

/* This keeps the album art from being displayed before each track listing.
	(To display album art in Yahoo's player, an image element must be added between
	each track's anchor tags.) */
#track_list_album_1 li a img, #track_list_album_2 li a img {
	display: none;
}

.itunes_store_link {
	position: absolute;
	left: 15px;
	bottom: 15px;
	display: block;
	width: 140px;
	height: 33px;
	text-indent: -10000px;
	background-image: url(images/05_music_itunes_link.png);
}

#contact_info {
	position: absolute;
	left: 25;
	top: 220px;
	width: 750px;
	height: 476px;
	background-image: url(images/07_contact_blanket_pixel.png);
	z-index: 10;
}

#floating_window {
	position: absolute;
	top: 88px;
	left: 125px;
	width: 500px;
	height: 300px;
	background-image: url(images/07_contact_info.png);
}

#floating_window a {
	position: absolute;
	top: 150px;
	left: 260px;
	width: 155px;
	height: 65px;
	background-image: url(images/07_contact_done.png);
	text-indent: -10000px;
}

#floating_window a span {
	display: hidden;
	width: 155px;
	height: 65px;
	background-image: url(images/07_contact_done_active.png);	
}

#floating_window a:hover span {
	display: block;
}

/* footer contains copyright information */
#footer {
	height: 25px;
	margin: 0px 25px;
	padding-top: 0px;
	background-image: url(images/06_footer_background.png);
	font-size: 12px;
	z-index: 9;
}

#footer span {
	float: left;
	display: block;
	font-family: georgia, sans-serif;
	width: 345px;
	line-height: 25px;
	padding: 0px 15px;
	text-align: right;
}

#footer span#copyright {
	text-align: left;
}