* { margin:0; padding:0; }
html {
	min-height:100%;
	background:#686868;
	background:-moz-linear-gradient(top, #686868, #d7d7d7);
    background:-webkit-linear-gradient(top, #686868, #d7d7d7);
	background:-ms-linear-gradient(top, #686868, #d7d7d7);
    background:linear-gradient(top, #686868, #d7d7d7);	
}
body { font-family:"Trebuchet MS", Arial, sans-serif; }
h1 { font-size:36px; color:white; font-weight:normal; padding-left:45px; float:left; }
h2 { font-size:20px; }
ul li, ol li { margin-left:23px; }
audio { max-width:350px; max-height:50px; }
.lg-hide { display:none; }
h2.h2-phone { margin-bottom:10px; }
.clear { width:100%; clear:both; }

nav a { text-decoration:none; color:white; }
nav a:hover { color:black; }
nav { float:right; padding:15px 30px 0; }

.container { width:880px; margin:80px auto 20px auto; }
.whitebox { width:878px; padding:33px 0; background-color:white; border:1px solid black; /* min-height:420px;  */
			-moz-border-radius:26px; -webkit-border-radius:26px; border-radius:26px; }

/* Views */
.view { display:none; }
#home {
	display:			block;
	width:				778px;
	height:				420px;
	padding:			0 50px;
	font-size:			17px;
	background:			url(images/pianopng.png) 405px 150px no-repeat;
}
.img-rich { float:left; margin-right:30px; }
#audio-tag { clear:left; }
#playlist { font-size:15px; }
#playlist li { cursor:pointer; }
#songs {
	width:				878px;
	height:				420px;
	font-size:			13px;
	line-height:		110%;
}
.song-col-1 { float:left; padding-left: 30px; }
.song-col-2 { float:left; padding: 29px 0 0 30px; }
.song-col-3 { float:left; padding: 29px 0 0 25px; }
.title { }
.artist { color:#999; }
#rate {
	width:				490px;
	height:				230px;
	padding:			190px 88px 0 300px;
	font-size:			17px;
	background:			url(images/bowtie.jpg) 100px 10px no-repeat;
}
#contact {
	width:				768px;
	height:				420px;
	font-size:			14px;
	padding-left:		110px;
	background:			url(images/notes.jpg) 60px 118px no-repeat;
}
.contactleft {
	float:				left;
	width:				280px;
	height:				150px;
	font-size:			18px;
	padding-top:		16px;
}
.contactright {
	float:				left;
	width:				470px;
	padding-top:		16px;	
	background:			url(images/note.jpg) 290px 76px no-repeat;
}
.contactright-mobile { display:none; }
.formlabel { color:gray; padding:8px 0 2px 0; }
table { background:url(images/note2.jpg) 120px 172px no-repeat; }
td.right { text-align:right; padding-right:4px; }
.contactright input { padding:4px 6px; width:136px; }
.contactright textarea { padding:6px 2%; width:96%; }
.submit-btn { padding:6px 12px; font-weight:bold; }
#thankyou, #error { width:778px; height:420px; padding:0 50px; font-size:17px; text-align:center; }


@media screen and (max-width: 550px) {
	h1 { font-size:30px; padding-left:15px; margin-bottom:0; float:none; }
	h2.h2-phone { display:inline; }
	h2.h2-email { margin-bottom:8px; }
	nav { float:none; padding:12px 15px; font-size:18px; }
	.sm-hide { display:none; }
	.lg-hide { display:block; }
	.container { width:100%; margin:20px 0; }
	.whitebox { width:100%; padding:0; border-left:0; border-right:0; 
				-moz-border-radius:0; -webkit-border-radius:0; border-radius:0; }
				
	#home, #songs, #rate, #contact, #thankyou, #error { width:auto; height:auto; padding:20px 15px; background:none; }
	#home { padding-top:15px; }
	#thankyou, #error { padding:40px 15px; }
	.song-col-1, .song-col-2, .song-col-3 { float:none; padding:0; font-size:15px; line-height:120%; }
	.contactleft { width:100%; height:40px; float:none; padding-top:0; }
	.contactright { display:none; }
	.contactright-mobile { display:block; }
	.img-rich { width:100px; margin-left:15px; }
	label { display:block; color:gray; }
	.text-input { width:200px; padding:4px 6px; margin-bottom:5px; font-size:16px; }
	textarea { width:90%; padding:4px 6px; }
	footer { padding:10px 17px; }
}