/*--------------------------------------------------------------
CSS RESET
--------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

* {
	margin: 0;
	padding: 0;
}

/*--------------------------------------------------------------
END CSS RESET
--------------------------------------------------------------*/


/*--------------------------------------------------------------
BASIC LAYOUT
--------------------------------------------------------------*/

html {
	background: #e5e5e5 url('static/img/tile.jpg') top left repeat;
}

html, body {
	height: 100%; /*--For Sticky Footer--*/
}

/*--Opera Fix For Sticky Footer--*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
	position: relative;
	background: transparent url('static/img/headslice.jpg') top left repeat-x;
	text-align: center;
	font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
	font-size: 100%;
	color: #333;
	text-shadow: 0px 1px 1px #fff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0 0 5px 0;
	letter-spacing: -0.05em;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 0.9em; }

p { margin: 0.5em 0; }

p, li {
	line-height: 1.5em;
}

li {
	margin: 0 0 0 18px;
}

a:link {
	color: #60a2d6;
	text-decoration: none;
}

a:visited {
	color: #60a2d6;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	color: #367cb2;
}

#headerBlock {
	height: 110px;
	background: #292b2b url('static/img/headslice.jpg') top left repeat-x;
}

#headerContent {
	text-align: left;
	margin: 0 auto;
	padding: 0 10px;
}

#pageTitle {
	position: absolute;
	text-indent: -9999px;
}

#logo {
	margin: 15px 0 0 0;
	float: left;
	position: relative;
	z-index: 10;
}

#userInfo {
	position: relative;
	background: #3c393c url('static/img/userbox.jpg') top left no-repeat;
	height: 70px;
	width: 220px;
	margin: -10px 0 0 0;
	font-size: 0.7em;
	color: #fff;
	float: right;
}

#userInfo img {
	border: solid 1px #ddd;
	margin: 10px 10px 0 10px;
	float: left;
}

#userLinks {
	margin: 10px 0 0 0;
	text-shadow: 0px 1px 2px #000;
}

#userLinks p {
	font-size: 1em !important;
}

#userLinks a {
	display: inline-block;
	margin: 10px 0 0 0;
}

#loginForm {
	position: relative;
	margin: 30px 0 0 0;
	float: right;
	display: inline-block;
	width: 350px;
}

#loginForm input {
	border: solid 1px #ccc;
	padding: 3px;
}

#loginForm label {
	font-size: 0.8em;
	color: #fff;
	text-shadow: none;
}

#loginLeft {
	float: left;
	margin: 0 20px 0 0;
}

#loginRight input {
	margin: 0 10px 0 0;
}

#loginButton {
	margin: 0 !important;
	border: none !important;
	padding: 4px 8px !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	font-size: 0.8em !important;
	font-family: "Lucida Grande", Arial, sans-serif;
	cursor: pointer;
}

#searchBar {
	margin: 20px 0 0 0;
}

#searchBar #search {
	height: 20px;
	width: 255px;
	margin: 0 0 5px 0;
}

.searchLabel {
	font-size: 0.8em;
}

#searchButton {
	margin: 0 !important;
	border: none !important;
	padding: 4px 8px !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	font-family: "Helvetica Neue", Helvetica, "Lucida Grande", Arial, sans-serif;
	cursor: pointer;
	text-shadow: 0px 1px 1px #000;
}
.searchButton {
	margin: 0 !important;
	border: none !important;
	padding: 4px 8px !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	font-family: "Helvetica Neue", Helvetica, "Lucida Grande", Arial, sans-serif;
	cursor: pointer;
	text-shadow: 0px 1px 1px #000;
}

#headerError {
	margin: -19px 0 0 0;
	text-shadow: 0px 1px 1px #000;
}

#navWrapper {
	background: #3c393c url('static/img/navnote.jpg') top left no-repeat;
	margin: -10px 10px 0 0; 
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.1em;
	text-shadow: 0px 1px 1px #000;
	float: right;
}

#nav {
	background: #3c393c url('static/img/darkgray_tile.jpg') top left repeat;
	height: 20px;
	padding: 8px 10px 10px;
	margin: 0 0 0 37px;
	min-width: 200px;
}

#nav ul li {
	float: left;
	margin: 0 25px 0 0;
	list-style: none;
}

#nav ul li.last {
	margin: 0;
}

#nav a {
	color: #fff;
}

#nav a:hover {
	color: #60a2d6;
	text-decoration: none;
}

#nav a:active {
	color: #367cb2;
}

#mainWrapper {
	position: relative;
	min-height: 100%; /*--For Sticky Footer--*/
	height: auto !important; /*--For Sticky Footer--*/
	height: 100%; /*--For Sticky Footer--*/
	text-align: left;
	width: 960px;
	margin: 0 auto -131px; /*--For Sticky Footer--*/
	background: rgba(255,255,255,0.3);
	padding: 0;
}

#mainWrapper p {
	font-size: 0.8em;
}

#mainWrapper ul {
	font-size: 0.8em;
}

#mainWrapper ol {
	font-size: 0.8em;
}

#mainContent {
	padding: 10px 0;
}

#rightColumn {
	width: 330px;
	float: right;
}

#footer {
	height: 100px; /*--For Sticky Footer--*/
	position: relative;
	z-index: 10;
	text-align: left;
	font-size: 0.7em;
	background: #ddd;
	border-top: solid 1px #ccc;
	margin: 10px 0 0 0;
	padding: 10px 0;
}

#footerContent {
	width: 960px;
	margin: 0 auto;
}

#footerCopyright {
	float: left;
	width: 300px;
}

#footerLinks {
	float: right;
}

#footerLinks li {
	list-style: none;
	margin: 0 0 0 2px
}

.footerColumn {
	width: 110px;
	float: left;
	border-left: solid 1px #ccc;
	padding: 0 10px;
	min-height: 90px;
}

#footer a:link {
	color: #333;
	
}

#footer a:visited {
	color: #333;
}

#footer a:hover {
	color: #60a2d6;
	text-decoration: none;
}

#footer a:active {
	color: #367cb2;
}

#footerLinks a:active {
	position: relative;
	left: 2px;
}

form {
	font-size: 0.8em;
}

legend {
	font-weight: bold;
	font-size: 1.2em;
}

fieldset {
	border: solid 1px #bbb;
	padding: 10px;
	display: inline-block;
}

label {
	margin: 0 0 1em 0;
}

button {
	border: none;
}

#ui-datepicker-div {
	margin: -21px 0 0 0;
	padding: 0;
}

/*--------------------------------------------------------------
END BASIC LAYOUT
--------------------------------------------------------------*/


/*--------------------------------------------------------------
GLOBAL CLASSES
--------------------------------------------------------------*/

.pageContent {
	padding: 40px 10px 0;
	width: 940px;
}

.push { height: 122px; } /*--For Sticky Footer--*/

.clear { clear:both; }

.inlineBlock { display: inline-block; }

.italicGeorgia {
	font-family: Georgia, Times, serif;
	font-style: italic;
	font-weight: normal;
	letter-spacing: -0.1em;
}

.editLink {
	background: url('static/img/pencil.png') top left no-repeat;
	padding: 0 0 0 17px;
	font-size: 0.9em;
}

.smallEditLink {
	background: url('static/img/pencil_small.png') top left no-repeat;
	padding: 0 0 0 12px;
	font-size: 0.6em;
}

.pdfLink {
	background: url('static/img/pdf.png') top left no-repeat;
	padding: 0 0 17px 17px;
	font-size: 0.9em;
	vertical-align: bottom;
}

.downloadLink {
	background: url('static/img/download.png') top left no-repeat;
	padding: 0 0 0 20px;
	font-size: 0.9em;
}

.button {
	background: none !important;
	height: 40px !important;
	border: none;
	cursor: pointer;
}

.blueButton {
	display: inline-block;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 0.8em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	background-color: #3291de;
    background-image: -moz-linear-gradient(100% 100% 90deg, #06487b, #3291de);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3291de), to(#06487b));
    padding: 10px 15px 10px 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 10px 0 0 0;
    text-shadow: 0px 1px 1px #000;
}

.blueButton:hover {
	background-color: #47a0e8;
    background-image: -moz-linear-gradient(100% 100% 90deg, #155b91, #47a0e8);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#47a0e8), to(#155b91));
}

.blueButton:active {
	background-color: #2582ce;
    background-image: -moz-linear-gradient(100% 100% 90deg, #043c68, #2582ce);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2582ce), to(#043c68));
}

.greenButton {
	display: inline-block;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 1em !important;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	background-color: #94d567;
    background-image: -moz-linear-gradient(100% 100% 90deg, #41851b, #94d567);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#94d567), to(#41851b));
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 10px 0 0 0;
}

.greenButton:hover {
	background-color: #99da6c;
    background-image: -moz-linear-gradient(100% 100% 90deg, #569f2d, #99da6c);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99da6c), to(#569f2d));
}

.greenButton:active {
	background-color: #7dc04e;
    background-image: -moz-linear-gradient(100% 100% 90deg, #337011, #7dc04e);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7dc04e), to(#337011));
}


.redButton {
	display: inline-block;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 1em !important;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	background-color: #9f0a0a;
    background-image: -moz-linear-gradient(100% 100% 90deg, #9f0a0a, #f04e4e);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f04e4e), to(#9f0a0a));
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 10px 0 0 0;
}

.redButton:hover {
	background-color: #b42121;
    background-image: -moz-linear-gradient(100% 100% 90deg, #b42121, #f75b5b);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f75b5b), to(#b42121));
}

.redButton:active {
	background-color: #8d0a0a;
    background-image: -moz-linear-gradient(100% 100% 90deg, #8d0a0a, #da3232);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#da3232), to(#8d0a0a));
}


.bigBlueButton {
	display: inline-block;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 1.3em !important;
	text-shadow: 0px 1px 2px #000;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	background-color: #3291de;
    background-image: -moz-linear-gradient(100% 100% 90deg, #06487b, #3291de);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3291de), to(#06487b));
    padding: 20px 0 20px 10px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    margin: 10px 0 0 0;
}

.bigBlueButton:hover {
	background-color: #47a0e8;
    background-image: -moz-linear-gradient(100% 100% 90deg, #155b91, #47a0e8);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#47a0e8), to(#155b91));
}

.bigBlueButton:active {
	background-color: #2582ce;
    background-image: -moz-linear-gradient(100% 100% 90deg, #043c68, #2582ce);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2582ce), to(#043c68));
}

.bigClef {
	color: #fff !important;
	text-decoration: none !important;
	background: url(static/img/bigclef.png) center left no-repeat;
	padding: 20px 30px 20px 50px;
}

.clef {
	color: #fff !important;
	text-decoration: none !important;
	background: url(static/img/clef.png) center left no-repeat;
	padding: 10px 0 10px 25px;
}

.add {
	color: #fff !important;
	text-decoration: none !important;
	background: url(static/img/add.png) center left no-repeat;
	padding: 10px 0 10px 25px;
}

.go {
	color: #fff !important;
	text-decoration: none !important;
	background: url(static/img/go.png) center left no-repeat;
	padding: 10px 0 10px 25px;
}

.play {
	color: #fff !important;
	text-decoration: none !important;
	text-shadow: 0px 1px 1px #000;
	background: url(static/img/play.png) center left no-repeat;
	padding: 10px 0 10px 25px;
}

.smallClef {
	background: url(static/img/footerclef.png) top left no-repeat;
	min-height: 17px;
	padding: 3px 0 0 10px;
}

.save {
	color: #fff !important;
	font-weight: bold;
	text-decoration: none !important;
	text-shadow: 0px 1px 1px #000;
	background: url(static/img/save.png) center left no-repeat !important;
	background-position: 10px !important;
}

.delete {
	color: #fff !important;
	font-weight: bold;
	text-decoration: none !important;
	text-shadow: 0px 1px 1px #000;
	background: url(static/img/delete.png) center left no-repeat !important;
	background-position: 10px !important;
}

.alt {
	background: #f7f7f7;
}

.error {
	color: red;
}

.notice {
	background: #fbf7cb;
	padding: 10px;
	border: solid 1px #e1da92;
}

.bigNotice {
	position: relative;
	z-index: 100;
	background: #fbf7cb;
	padding: 10px;
	border: solid 1px #e1da92;
	margin: 0 0 20px 0;
	text-align: center;
}

.bday {
	background: #a6d2f4;
	padding: 10px;
	border: solid 1px #87b7dc;
	margin: 0 0 10px 0;
	text-align: center;
}

.bday h4 {
	padding: 0;
	margin: 0;
}

.marginBottom20 {
	margin-bottom: 20px;
}

.marginTop15 {
	margin-top: 15px;
}

.blue {
	color: #60a2d6;
}

.gray {
	color: #444;
}

a.ui-state-default, a.ui-state-hover {
	text-shadow: 0px 1px 1px #000;
}

.ui-datepicker-calendar span {
	text-shadow: 0px 1px 1px #000;
}

.small {
	font-size: 0.8em !important;
}

.beta {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.8em;
	color: #60a2d6;
	text-shadow: none;
	position: relative;
	top: 46px;
	left: 7px;
}

.removeButton {
	height: 20px !important;
	width: 20px !important;
	background: url(static/img/delete.jpg) top left no-repeat !important; border: none !important;
	cursor: pointer !important;
	margin: 0 5px 0 5px;
	vertical-align: middle !important;
}

.removeButton:hover {
	-webkit-box-shadow: 0px 0px 3px #aaa;
	-moz-box-shadow: 0px 0px 3px #aaa;
	box-shadow: 0px 0px 3px #aaa;
}

.removeButton:active {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.removeCommentButton {
	height: 20px !important;
	width: 20px !important;
	background: url(static/img/delete.jpg) top left no-repeat !important; border: none !important;
	cursor: pointer !important;
	margin: 0 5px 0 5px;
	vertical-align: middle !important;
}

.removeCommentButton:hover {
	-webkit-box-shadow: 0px 0px 3px #aaa;
	-moz-box-shadow: 0px 0px 3px #aaa;
	box-shadow: 0px 0px 3px #aaa;
}

.removeCommentButton:active {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
} 

.deletePDF {
	height: 20px !important;
	width: 20px !important;
	background: url(static/img/delete.jpg) top left no-repeat !important; border: none !important;
	cursor: pointer !important;
	margin: 0 0 0 5px;
	vertical-align: middle !important;
}

.deletePDF:hover {
	-webkit-box-shadow: 0px 0px 3px #aaa;
	-moz-box-shadow: 0px 0px 3px #aaa;
	box-shadow: 0px 0px 3px #aaa;
}

.deletePDF:active {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.fbLike {
	margin: 0 0 0.2em;
}

.forgotPass {
	color: #fff !important;
	text-shadow: none;
	font-size: 0.7em;
	display: block;
	width: 232px;
	margin: 3px 0 0 0;
	text-align: right;
}

.underline {
	text-decoration: underline;
}

/*--------------------------------------------------------------
END GLOBAL CLASSES
--------------------------------------------------------------*/


/*--------------------------------------------------------------
HOME PAGE
--------------------------------------------------------------*/

#homePage #topContributors {
	text-align: left;
	margin: 0 0 10px;
}

.contributor {
	padding: 5px;
}

.contributor img {
	float: left;
	margin: 0 10px 0 0;
}

.contributor p {
	margin: 0;
}

#homePage h1 { text-align: center;	}

#searchSignup {
	/*display: inline-block;*/
	float: right;
}

#homePage #searchBar {
	width: 345px;
	display: inline-block;
	background: #ddd;
	padding: 10px;
	margin: 0 0 10px 0;
	text-align: left;
}

#homePage #searchBar input#search {
	height: 30px;
	width: 250px;
	font-size: 1.5em;
	color: #444;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#homePage #searchBar input.searchButton {
	height: 33px;
	width: 70px;
	position: relative;
	top: -3px;
}

#homePage #searchBar .notice {
	margin: 10px 0 0 0;
}

#homePage .songCounter {
	text-align: center;
}

/* -- Logged in Home Page Styles -- */
#loggedInHome #homeLeftColumn {
	width: 190px;
	margin: 0 10px 0 0;
	float: left;
	font-size: 0.9em;
	border-right: solid 1px #ccc;
}
#loggedInHome #homeFeed {
	width:  430px;
	float: left;
}
#loggedInHome #homeRightColumn {
	border-left: solid 1px #ccc;
	width: 300px;
	float: right;
	font-size: 0.9em;
}
#homeLeftColumn .songCount {
	background: #ddd;
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	padding: 0 5px 0;
	margin: 0 0 10px;
}
#homeLeftColumn .songCount p {
	float: left;
	margin: 8px 0 0 0;
}
#homeLeftColumn form#homeAllSearch {
	float: right;
}
#homeLeftColumn form {
	margin: 0.5em 0;
}
#homeLeftColumn form input[type=text] {
	padding: 3px;
	width: 140px;
}
#loggedInHome .columnHead {
	background: #ddd;
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	padding: 3px;
	margin: 1em 0 0;
}
#homeLeftColumn #browseArtist {
	font-family: Helvetica;
	font-weight: bold;
	line-height: 1.6em;
}
#homeLeftColumn #browseArtist a {
	display: inline-block;
	width: 23px;
	text-align: center;
}
#homeLeftColumn #browseArtist a:hover {
	background: #ddd;
	text-decoration: none;
}
#homeFeed #recentlyAdded h5 {
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	padding: 5px;
	background: #ddd;
}
#homeFeed #recentlyAdded {
	background: #e7e7e7;
	padding: 0 0 7px;
}
#homeFeed #recentlyAdded ul li {
	list-style: none;
	margin: 0 0 0 10px;
	padding: 5px 0;
}
.date {
	font-size: 0.8em;
	font-weight: bold;
	background: #c9c9c9;
	padding: 0 4px;
	margin: 0;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	color: #555;
	text-shadow: 0px 1px 1px #ddd;
	display: inline-block;
	width: 40px;
	text-align: center;
}
#homeRightColumn .fbLike {
	margin: 0 0 10px 10px;
}
#homeRightColumn #viewSongbook {
	margin: 0 0 0 10px;
}
/*--------------------------------------------------------------
END HOME PAGE
--------------------------------------------------------------*/


/*--------------------------------------------------------------
PROFILE PAGE
--------------------------------------------------------------*/

#userProfile {
	width: 600px;
	margin: 0 10px 0 0;
	float: left;
}

#profilePicture {
	float: left;
	margin: 0 10px 0 0;
}

#profilePicture img {
	padding: 1px;
	border: solid 1px #bbb;
}

#profileInfo {
	float: left;
	width: 350px;
}

#userContent {
	background: #e7e7e7;
	border: solid 1px #ddd;
	padding: 1px 10px;
}

.profileDesc {
	display: inline-block;
	width: 7em;
	font-weight: bold;
	margin: 0 0 5px 0;
}

#editProfile {
	font-family: Helvetica, Arial, sans-serif;
	background: #3c393c url('static/img/darkgray_tile.jpg') top left repeat;
	padding: 10px;
	text-align: right;
	margin: 0;
}

#editProfile a:link {
	color: #fff;
	text-shadow: 0px 1px 1px #000;
}

#editProfile a:visited {
	color: #fff;
}

#editProfile a:hover {
	color: #60a2d6;
	text-decoration: none;
}

#editProfile a:active {
	color: #367cb2;
}

/*--------------------------------------------------------------
END PROFILE PAGE
--------------------------------------------------------------*/


/*--------------------------------------------------------------
GLOBAL GRAY BOX 
--------------------------------------------------------------*/

#setlistBox {
	margin: 10px 0 0 0;
}

.grayBox {
	display: inline-block;
	background: #857b82 url('static/img/lightgray_tile.jpg') top left repeat;
	color: #fff;
	text-shadow: 0px 1px 1px #000;
	width: 329px;
}

.grayBox h3 {
	background: #3c393c url('static/img/darkgray_tile.jpg') top left repeat;
	padding: 10px;
	font-weight: normal;
}

.grayBoxContent {
	padding: 0 10px 10px;
}

.grayBox a {
	color: #fff;
}

.grayBox a:hover {
	color: #ccc;
	text-decoration: none;
}

.grayBox a:active {
	color: #aaa;
}

/*--------------------------------------------------------------
END GLOBAL GRAY BOX
--------------------------------------------------------------*/


/*--------------------------------------------------------------
ADD SONG PAGE
--------------------------------------------------------------*/

#addSongRules { width: 600px; }

#tutorialButton {
	float: right;
	margin: 0;
}

#addSongInfo label {
	width: 10em;
	padding: 3px 0 3px 5px;
	display: inline-block;
	font-size: 1.1em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	font-weight: normal;
	text-shadow: 0px 1px 1px #000;
	background: #3c393c url('static/img/darkgray_tile.jpg') top left repeat;
	vertical-align: top;
}

#addSongInfo input {
	width: 225px;
	height: 18px;
	font-size: 1.1em;
	font-family: Helvetica, Arial, sans-serif;
	background: #fff;
	vertical-align: middle;
}

#addSongInfo input.button {
	width: 200px;
	padding: 0 0 0 10px;
}

#addSongInfo textarea {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.1em;
}

#addSongInfo textarea#addInfo {
	height: 50px;
	min-width: 215px;
	max-width: 215px;
	padding: 5px;
}

#addSongInfo select {
	width: 230px;
}

#addLeftColumn {
	margin: 0 20px 0 0;
	float: left;
}

#addRightColumn {
	float: left;
}

input#addTempo {
	width: 2em;
	text-align: center;
}

#optionalAddFile {
	border-top: dotted 1px #aaa;
	margin: 20px 0 -10px 0;
}

textarea#addSongText {
	font-family: monaco, monospace;
	min-width: 892px;
	max-width: 892px;
	padding: 10px;
	height: 300px;
}

#writeChords {
	margin: 20px 0 0 0;
	width: 915px;
}

#formatOptions {
	display: inline-block;
	margin: 0 0 10px 0;
}

#formatTable {
	border-top: solid 1px #aaa;
	border-right: solid 1px #aaa;
}

#formatTable th {
	font-size: 0.9em;
	background: #ccc;
	padding: 5px 10px;
	border-left: solid 1px #aaa;
	border-bottom: solid 1px #aaa;
}

#formatTable td {
	padding: 5px 10px;
	background: #f7f7f7;
	border-left: solid 1px #bbb;
	border-bottom: solid 1px #bbb;
}

#formatTable xmp {
	font-size: 1.2em;
}

.marginBottomNegative {
	margin-bottom: -10px;
}

.saveSection {
	text-align: right;
}

#addFile {
	margin: 0 0 0 5px;
}

/*--------------------------------------------------------------
END ADD SONG PAGE
--------------------------------------------------------------*/


/*--------------------------------------------------------------
SONGBOOK PAGE
--------------------------------------------------------------*/

h1.floatTitle {
	float: left;
	margin: 0 20px 10px 0;
}

#songbookPage .blueButton {
	margin: 5px 0 0 0;
	float: left;
}

#songbookItems {
	width: 100%;
}

#songbookItems th {
	text-align: left;
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	background: #ddd url('static/img/lightestgray_tile.jpg') top left repeat;
	padding: 10px 5px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#songbookItems td {
	text-align: left;
	font-size: 0.8em;
	padding: 7px 5px;
	vertical-align: middle;
}

/*--------------------------------------------------------------
END SONGBOOK PAGE
--------------------------------------------------------------*/


/*--------------------------------------------------------------
SONG PAGE
--------------------------------------------------------------*/

#songInfo {
	background: #857b82 url('static/img/lightgray_tile.jpg') top left repeat;
	color: #fff;
	text-shadow: 0px 1px 1px #000;
	display: inline-block;
	float: left;
	max-width: 500px;
	padding: 0 10px 0 0;
}

#songExtras {
	float: left;
	margin: 0 0 0 10px;
	width: 320px;
}

.infoTitle {
	font-size: 0.7em !important;
	float: left;
	background: #3c393c url('static/img/darkgray_tile.jpg') top left repeat;
	width: 50px;
	margin: 0 10px 0 0;
	text-align: right;
	padding: 10px 5px 10px 0;
}

.infoTitleContent {
	margin: 0;
	vertical-align: middle;
	font-size: 0.9em;
	padding: 0;
}

h3.infoTitleContent {
	padding: 5px 20px 0 10px;
}

p.infoTitleContent {
	padding: 10px 20px 0 10px;
}

#songOutput {
	background: rgba(255,255,255,0.9);
	padding: 10px;
	margin: 10px 0 0;
	font-family: Monaco, monospace;
	font-size: 1.2em;
	line-height: 1.2em;
}

#controls {
	background: #3c393c url('static/img/darkgray_tile.jpg') top left repeat;
	color: #fff;
	text-shadow: 0px 1px 1px #000;
	padding: 5px;
	display: inline-block;
	position: fixed;
	right: 10px;
	top: 10;
	width: 180px;
	-webkit-box-shadow: 0px 0px 5px #000;
}

#controls h5 {
	cursor: move;
}

#controls img {
	cursor: pointer;
}

#controlContent {
	background: #857b82 url('static/img/lightgray_tile.jpg') top left repeat;
}

#scrollButtons {
	text-align: center;
	margin: 10px 0 0 0;
}

#scrollSpeed {
	width: 40px;
	text-align: center;
}

#scrollSpeedContent {
	text-align: center;
	font-size: 0.8em;
	padding: 5px 0 0 0;
}

#addPauseSource {
	padding: 20px 10px;
	background: #857b82 url('static/img/lightgray_tile.jpg') top left repeat;
	color: #fff;
	text-shadow: 0px 1px 1px #000;
	margin: 5px 0 0 0;
	cursor: pointer;
	text-align: center;
}

#addPauseSource:hover {
	background: #ddd url('static/img/lightestgray_tile.jpg') top left repeat;
	color: #333;
	text-shadow: 0px 1px 1px #fff;
}

#pauseButton, #resumeButton {
	display: none;
}

#songComments {
	font-size: 0.8em;
	margin: 0;
	padding: 5px 0 0 0;
	width: 50%;
	float: left;
}

.songComment {
	background: #f7f7f7;
	padding: 10px;
	margin: 10px 0 0;
}

.songComment img {
	float: left;
	margin: 0 10px 0 0;
}

.songComment .commentUser {
	font-weight: bold;
	margin: 0;
}

.songComment .commentDate {
	margin: 0;
	font-style: italic;
	color: #777;
}

.songComment .commentWords {
	margin: 5px 0 0 0;
}

.commentContent {
	float: left;
	width: 350px;
}

#leaveComment {
	width: 46%;
	margin: 5px 0 0 10px;
	float: right;
}

#leaveComment label {
	font-size: 0.8em;
	vertical-align: top;
	margin: 0 0 10px 0;
	display: inline-block;
}

#leaveComment textarea {
	max-width: 95%;
	min-width: 95%;
	height: 50px;
	padding: 3px;
	color: #444;
}

#leaveComment .button {
	width: 145px;
	font-size: 0.9em;
}

.removeComment input {
	float: right;
	margin: 0 !important;
}

#rateLabel {
	margin: 3px 0 0 5px !important;
}

#commentLabel {
	margin: 10px 0 5px 0 !important;
}

.commentRate img {
	margin: 0;
}

.rating-cancel {
	display: none !important;
}

/*--------------------------------------------------------------
END SONG PAGE
--------------------------------------------------------------*/


/*--------------------------------------------------------------
SIGNUP PAGE
--------------------------------------------------------------*/

#signupPage {
	text-align: center;
}

#songbookSignup {
	display: inline-block;
	text-align: left;
	margin: 0 auto;
	background: #f7f7f7;
	padding: 5px 10px 10px;
	-webkit-box-shadow: 0px 0px 10px #ccc;
	-moz-box-shadow: 0px 0px 10px #ccc;
	box-shadow: 0px 0px 10px #ccc;
}

#signupPage label {
	text-align: left;
	width: 10em;
	padding: 3px 0 3px 3px;
	display: inline-block;
	font-size: 1.1em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	text-shadow: 0px 1px 1px #000;
	background: #3c393c url('static/img/darkgray_tile.jpg') top left repeat;
	vertical-align: top;
}

#signupPage input {
	width: 225px;
	height: 18px;
	font-size: 1.1em;
	font-family: Helvetica, Arial, sans-serif;
	background: #fff;
	vertical-align: middle;
}

#signupPage input.button {
	width: 180px;
	padding: 0 0 0 5px;
}

#signupPage .noBack {
	background: none;
	color: #333;
	text-shadow: 0px 1px 1px #fff;
}

#signupPage .last {
	padding-bottom: 0;
}

#gender-m, #gender-f, #private-y, #private-n {
	margin: 4px 0 0 0;
	width: 20px !important;
}

#personalInfo {
	margin: 0 0 20px 0;
}

#termsSection {
	background: #eee;
	padding: 5px 0;
}

input#terms {
	width: 20px;
	margin: 0;
	padding: 0;
}

.checkBoxLabel {
	margin: 0 !important;
	padding: 0 !important;
	width: 350px !important;
	font-size: 0.9em !important;
}

#signupPage .error {
	text-align: left !important;
}

#submitSection {
	text-align: center;
}

/*--------------------------------------------------------------
END SIGNUP PAGE
--------------------------------------------------------------*/


/*--------------------------------------------------------------
MAILING LIST
--------------------------------------------------------------*/

#mailChimpSignup {
	display: inline-block;
	background: #f7f7f7;
	padding: 5px 10px 10px;
	width: 385px;
	-webkit-box-shadow: 0px 0px 10px #ccc;
	-moz-box-shadow: 0px 0px 10px #ccc;
	box-shadow: 0px 0px 10px #ccc;
}

#mailChimpSignup h2 {
	padding: 0 0 5px 0;
	border-bottom: solid 1px #ddd;
}

.indicate-required {
	font-size: 0.8em;
	color: red;
	text-align: right;
	margin: 1em 0;
}

.mce_inline_error {
	font-size: 0.8em;
	color: red;
	margin: 0 0 15px 0;
	text-align: left;
}

#mce-success-response {
	background: #a6d2f4;
	padding: 10px;
	border: solid 1px #87b7dc;
	margin: 0 0 10px 0;
	text-align: center;
}

#mce-error-response {
	background: #fbf7cb;
	padding: 10px;
	border: solid 1px #e1da92;
}

/*--------------------------------------------------------------
END MAILING LIST
--------------------------------------------------------------*/


/*--------------------------------------------------------------
EDIT PROFILE PAGE
--------------------------------------------------------------*/

#editProfilePage label {
	width: 10em;
	padding: 3px 0 3px 3px;
	display: inline-block;
	font-size: 1.1em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	text-shadow: 0px 1px 1px #000;
	background: #3c393c url('static/img/darkgray_tile.jpg') top left repeat;
	vertical-align: top;
}

#editProfilePage textarea {
	width: 217px;
	height: 100px;
	padding: 5px;
	font-size: 1.1em;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0 0 10px 0;
}

#editProfilePage input {
	width: 225px;
	height: 18px;
	font-size: 1.1em;
	font-family: Helvetica, Arial, sans-serif;
	background: #fff;
	vertical-align: middle;
}

#editProfilePage .noBack {
	background: none;
	color: #333;
	text-shadow: 0px 1px 1px #fff;
}

#editProfilePage .last {
	padding-bottom: 0;
}

#uProv {
	width: 227px;
}

/*--------------------------------------------------------------
END EDIT PROFILE PAGE
--------------------------------------------------------------*/


/*--------------------------------------------------------------
SET LISTS PAGE
--------------------------------------------------------------*/

#setlistPage {
	margin: -1px 0 -3px;
}

#setlistPage .blueButton {
	margin: 0;
	float: right;
	position: relative;
	z-index: 10;
}

#setlistPageContent {
	margin: -40px 0 0 0;
}

#setlistGroup {
	margin: 34px 0 0 0;
	width: 300px;
	background: #f7f7f7;
	float: left;
}

#setlistGroup h3 {
	background: #ddd;
	border-top: solid 1px #ccc;
	padding: 5px 0 5px 5px;
}

#setlistItems {
	float: right;
	width: 630px;
	margin: 0 0 8px 0;
}

/*--------------------------------------------------------------
END SET LISTS PAGE
--------------------------------------------------------------*/


#createSetlistPage input.button {
	width: 160px;
}


/*--------------------------------------------------------------
EDIT LISTS PAGE
--------------------------------------------------------------*/

#editSetlistPage {
	margin: 0 0 -3px;
}

select#uSongs {
	width: 300px;
	font-size: 0.9em;
}

#editSetlistPage input.button {
	width: 160px;
}


/*--------------------------------------------------------------
END EDIT SET LISTS PAGE
--------------------------------------------------------------*/


/*--------------------------------------------------------------
FORGOT PASSWORD PAGE
--------------------------------------------------------------*/
#passPage {
	text-align: center;
}

#passPage label {
	width: 10em;
	padding: 3px 0 3px 5px;
	display: inline-block;
	margin: 0;
	font-size: 1.1em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	font-weight: normal;
	text-shadow: 0px 1px 1px #000;
	background: #3c393c url('static/img/darkgray_tile.jpg') top left repeat;
	vertical-align: top;
}

#passPage input {
	height: 19px;
	width: 200px;
}

#passPage .button {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 230px;
	font-size: 1em;
}
/*--------------------------------------------------------------
END FORGOT PASSWORD PAGE
--------------------------------------------------------------*/