html, body {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  min-height: 100vh;
}

body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	font: 13px Georgia, "Times New Roman", Times, serif;
	text-align: left;
	padding-top: 1px;
	margin-top: -1px;
}

* {
  outline: none;
}

p { margin: 3px 8px 10px 0; padding: 0; line-height: 22px; }

a:link, a:visited { color: #590000; text-decoration: underline; font-weight: normal; }
a:hover, a:active { color: #fff; background-color: #590000; text-decoration: none; }

.nohover:hover, .nohover:active { color:#590000; background-color: #fff; }

h1, h2, h3, h4, h5, h6, h7 { font-weight: normal; padding: 0; margin: 0 0 10px 0; }
h1 { font-size: 30px; color: #590000; }
h2 { font-size: 24px; color: #595959; }
h3 { font-size: 20px; color: #000; }

h3 small { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #ccc; border: 1px solid #ccc; padding: 0 4px; }

ul, ol { margin: 0 0 15px 0; padding: 0; }
li { margin: 0 0 0 20px; padding: 0; list-style: none; line-height: 20px; }

img { border:0; }

.spacer { clear: both; height: 0; }
.spacerlt { clear: left; height: 0; }
.line { clear: left; height: 1px; margin: 20px 0; border-bottom: 1px dashed #ccc; }
.left { float: left; }
.right { float: right; }
.half { width: 47%; float: left; }
.third { width: 30%; float: left; }
.quarter { width: 22%; float: left; }
.gray { color: #ccc; }
.caption { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333; line-height: normal; }
.moremargin { margin-bottom: 15px; }
.margintop { margin-top: 60px; }
.quote { font-family: Verdana, Arial, Helvetica, sans-serif; background: url(../images/bg_quote.gif) top left repeat #eee; border: 1px solid #ececec; border-left: 2px solid #ececec; padding: 30px; margin: 30px; font-size: 12px; color: #333; }
.selected { background-color: #eef5ff; }
.stats { float: right; font-size: 11px; color: #aaa; }
.pad { padding-top: 15px; }
.strong { font-weight: bold; }
.row { margin: 20px 0; }

input, select, textarea { border: 1px solid #aaa; padding: 3px; margin: 3px; -webkit-appearance: none; border-radius: 0; }
textarea { font: 12px Verdana, Arial, Helvetica, sans-serif; }
small { color: #aaa; }

.label { display: block; font-weight: bold; margin: 10px 0 3px 3px; }
.button { width: auto; margin: 3px 0 0 3px; padding: 3px; }
.fieldtall { height: 300px; }
.fieldmedium { height: 100px; }
.highlightfield { background-color: #ffffd9; }
.lyrics { font-size: 11px; }
.lyrics p {line-height: normal;}
.projectthumb { float: left; padding: 0 10px 0 0; width: 50px; }
.picthumb { width: 60px; height: 60px; }
.listitem img, #nowshowing img {  background-color: #fff; margin-right: 8px; }

.blankbtn { width: 22px; height: 60px; float: left; }


#page { max-width: 900px; margin: 30px auto;  }

#header { border-bottom: 1px solid #ccc; margin: 0; }
#header h1, #searchform { padding: 30px 0 8px 0; margin: 0; }
#header a { text-decoration: none; }
#header h1 { float: left; }
#searchform { float: right; }

#main { margin: 0; padding: 30px 0; }

#home h3 { margin-top: 30px; }
#home .homepic { width: calc(100% - 8px); padding: 3px; border: 1px solid #eee; margin-bottom: 30px; }
#home .listitem { display: inline-block; }

#viewbuttons { width: 330px; margin-left: 600px; }
#watchvid, #lookpic, #songlistbtn, #inviteme, #sharepics { display: block; text-indent: -1000em; overflow: hidden; width: 193px; height: 48px; margin: 20px 20px 20px 0; }
#watchvid { background: url(../images/btn_watchvid.gif) top left no-repeat #fff; }
#lookpic { background: url(../images/btn_lookpic.gif) top left no-repeat #fff; }
#songlistbtn { background: url(../images/btn_songlist.gif) top left no-repeat #fff; }
#inviteme { background: url(../images/btn_inviteme.gif) top left no-repeat #fff; }
#sharepics { background: url(../images/btn_share.gif) top left no-repeat #fff; }

#newreleases { width: 400px; }

.video-thumb {
	width: 220px;
	display: inline-block;
}

.row:nth-child(odd) .video-thumb {
	margin-right: 10px;
}

.row:nth-child(even) .video-thumb {
	margin-left: 10px;
}

.video-thumb img {
	display block;
	width: 100%;
	margin-bottom: 10px;
}

#comments { margin: 15px 0 0 0; }
.comment { margin: 10px 0; padding: 0 0 10px 10px; border-bottom: 1px solid #eee; }
.comment h3 { margin: 15px 0 5px 0; }

#commentform { max-width: 500px; width: 100%; }
#commentform input, #commentform textarea, #inviteform input, #inviteform textarea { width: calc(100% - 12px); }
#commentform .button, #inviteform .button { width: 150px; }
#commentform { margin-bottom: 30px; }

#navbar { padding: 5px; }
#previous, #next { display: block; width: 79px; height: 29px; text-indent: -1000em; overflow: hidden; }
#previous { background: url(../images/btn_prev.gif) top left no-repeat #fff; float: left; }
#next { background: url(../images/btn_next.gif) top left no-repeat #fff; float: right; }

#item { width: 100%; max-width: 500px; float: left; }
#item p { margin: 0; padding: 0; }
#item .picthumb { padding: 3px; }

#nowshowing { margin: 0 0 30px 0; }

#lists { margin-left: 520px; width: 370px; }
#lists h3 { margin-bottom: 30px; }
.frame { height: 350px; border: 1px solid #ccc; overflow: auto; padding: 10px; margin-bottom: 25px; }
.listitem { border-bottom: 1px solid #eee; padding: 4px 0; }
.listitem img, #nowshowing img { float: left; padding: 3px; border: 1px solid #eee; background-color: #fff; margin-right: 8px; }
.listitem p, #nowshowing p { margin: 0 0 0 95px; padding: 0; }
.nomargin p { margin: 0; }

#picturelist { margin: 0; padding: 9px 0 0 26px; }
#picturelist a, .searchpic a, #piclist a { background-color: #fff; float: left; }
#picturelist a.normal { background-color: transparent; float: none; }
#picturelist a.normal:hover { background-color: #590000; }
#picturelist img, .searchpic img, #piclist img { padding: 2px; border: 1px solid #eee; margin: 0 3px 3px 0; }
#picturelist img.normal { border: none; }
#picturelist img:hover, #picturelist .selected img, .searchpic img:hover, #piclist img:hover { background-color: #590000; border: 1px solid #590000; }
#picturelist.frame { height: 75px; }

#embedform { margin: 15px 0; }
#embed { width: 350px; }

#randomvids { padding-top: 30px; }

#audio_player { width: 100%; margin: 20px 0; }

/* Footer */
#footer { height: 20px; margin-top: 60px; font-size: 12px; }

/* Message */
#message { padding: 15px 30px 5px 15px; margin: 15px; border: 1px dashed #ccc; background-color: #eee; }

/* Fancy Uploader */
.photoupload-queue { list-style: none; }
.photoupload-queue li { background: url(../images/photo_upload.png) no-repeat 0 5px; padding: 5px 0 5px 22px; width: 40%; float: left; }
.photoupload-queue .queue-file { font-weight: bold; }
.photoupload-queue .queue-size { color: #aaa; margin-left: 1em; font-size: 0.9em; }
.photoupload-queue .queue-loader { position: relative; margin 3px 15px; font-size: 0.9em; background-color: #ddd; color: #fff; border: 1px inset #ddd; }
.photoupload-queue .queue-subloader { text-align: center; position: absolute; background-color: #81B466; height: 100%; width: 0%; left: 0; top: 0; }
.photoupload-queue .input-delete { width: 16px; height: 16px; background: url(../images/delete.png) no-repeat 0 0; text-decoration: none; border: none; float: right; }

#upload form fieldset { border: none; border-top: 1px solid #888; margin: 1em 0.5em 1em 0; padding: 1em 0; }
#upload form legend { font-weight: bold; font-size: 1.2em; color: #888; margin: auto; margin-left: 0; padding: 0 .25em 0 0; }
#upload label { width: 10em; float: left; padding: .2em .8em 0 0; margin-right: .4em; text-align: right; font-size: 1.1em; }
#upload label.error { color: #ff0000; }
#upload label span { display: block; color: #888; font-size: 0.85em; margin-bottom: 0.5em; }
#upload form div.label { clear: both; margin: 1em 0 0 0; padding: 0.1em 0.3em; }

#songtable { width: 650px; }
#songtable td { padding: 3px; border-bottom: 1px solid #eee; }

.group:after {
  content: "";
  display: table;
  clear: both;
}

#index-left {
	float: left;
	width: 100%;
	max-width: 500px;
}

video {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.pic {
	display: block;
	width: 100%;
}

.mobile {
	display: none;
}

@media screen and (max-width: 965px) {
	.mobile {
		display: inline;
	}

	.desktop {
		display: none;
	}

	#page {
		margin: 10px 20px;
	}

	#index-left, #item {
		float: none;
		width: 100%;
		max-width: none;
	}

	#viewbuttons, #lists {
		margin-top: 40px;
		margin-left: 0;
		width: 100%;
	}

	#viewbuttons a {
		margin: 20px auto;
	}

	.listitem {
		display: block;
	}

	#home .listitem, #playall .listitem {
		display: block;
		float: left;
		margin: 0 5px;
		width: calc(50% - 10px);
	}
}

@media screen and (max-width: 800px) {
	
	#header h1 {
		float: none;
		padding: 0;
	}
	
	#searchform {
		float: none;
		padding: 10px 0;
	}
	
	#header h1 small {
		white-space: nowrap;
	}

	#error .half {
		width: 100%;
		float: none;
	}
}

@media screen and (max-width: 650px) {
	.half {
		float: none;
		width: 100%;
	}

	#home .listitem, #playall .listitem {
		float: none;
		margin: 0;
		width: 100%;
	}
}

@media screen and (max-width: 550px) {
	h1 {
		font-size: 24px;
	}

	h2 {
		font-size: 20px;
	}

	h3 {
		font-size: 16px;
	}

}