body
{
	margin: 0;
	background-color: rgb(35, 112, 227);
	max-width: 480px;
}

body > *, #jqt, #jqt > *
{
	font-family: helvetica;
	background-color: #FFF;
}

body *
{
	color: #000;
	max-width: 480px;
}

h1
{
	font-size: 17px;
}

h2
{
	font-size: 14px;
}

a
{
	text-decoration: none;
}

.header
{
	display: block;
	border-top: 1px #FFF solid;
	border-bottom: 1px rgb(22, 70, 145) solid;
	width: 100%;
	top: 0px;
	text-align: center;
	height: 34px;
	background-color: rgb(57, 131, 245);
	-webkit-box-shadow: rgba(0,0,0,.35) 0px 2px 5px;
	background-image: url(images/header-bg.png);
	background-repeat: repeat-x;
	position: relative;
	z-index: 100;
}

.toolbar
{
	display: block;
	width: 100%;
	top: 0px;
	height: 34px;
	background-color: rgb(0, 0, 0);
	background-image: url(images/footer-bg.png);
	background-repeat: repeat-x;
	position: relative;
	z-index: 100;
}

.content, .content *
{
	margin: 0;
	padding: 0;
}

.content
{
	/* margin-top: 5px; */
	padding-bottom: 5px; /* to allow for when running in Safari */
}


/***************************************
 login styles
 ***************************************/

#gate .content, #gate .content *
{
	font-size: 13px;
}

#gate .content #loginbox
{
	margin: 30px auto 0 auto;
	width: 260px;
	padding: 15px 20px;
	border: 1px rgb(170, 79, 236) solid;
    -webkit-border-radius: 7px;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(243, 231, 252)), to(rgb(206, 156, 244)));
	-webkit-box-shadow: rgba(0,0,0,.35) 0px 3px 6px;
}

#gate .content #loginbox .label
{
	display: inline-block;
	width: 70px;
}

#gate .content #loginbox input
{
	width: 170px;;
	padding: 5px;
	margin-top: 5px;
}

#gate .content #loginbox input#memory
{
	clear: both;
	width: 20px;
	height: 20px;
}


/***************************************
 mysongs styles
 ***************************************/

#mysongs .content, #shared .content
{
}

#mysongs .content #listheader, #shared .content #listheader
{
	background-color: #CCC;
	color: #000;
	font-size: 11px;
	font-weight: bold;
	padding: 4px 5px 3px 5px;
}

#mysongs .content ul, #shared .content ul
{
	list-style: none;
	background-color: #FFF;
}

#mysongs .content ul li *, #shared .content ul li *
{
	font-size: 14px;
	border-bottom: 1px solid #CCC;
}

#mysongs .content ul li a, #shared .content ul li a
{
	display: block;
	background-image: url(images/chevron-sm.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding: 4px 30px 4px 5px;
	vertical-align: middle;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#mysongs .content ul li a.active, #shared .content ul li a.active
{
	background-color: #FADA51;
}

.spinner
{
	position: absolute;
	text-align: center;
	top: 130px;
	left: 0;
	width: 100%;
}

.loading .content .spinner > img
{
	float: none;
	padding: 160px 0;
}


/***************************************
 Override various song styles
 ***************************************/

#song
{
	background-color: rgb(255, 251, 241);
}

#songhead
{
	/* width: auto;
	max-width: 400px; */
	max-width: 470px;
}

#songhead * 
{
	/* width: auto; */
	max-width: 470px;
}

#songhead #songtitle
{
	padding: 0 40px;
	max-width: 390px;
	color: #000;
	font-size: 15px;
	border: none;
	text-align: center;
	margin: 10px 0 6px 0;
}

.meta, .meta *
{
	font-size: 11px;
	text-align: center;
}

div#rows, div#rows *, div.lyric_rows, div#more, div#morelyrics, div#meta
{
	background-color: transparent;
}

div.row
{
	padding: 0 0 10px 5px;
	max-width: 475px;
}

.lyric_row, .lyric_row *, #more div.lyrics
{
	border: none;
	font-size: 10px;
	font-weight: normal;
	color: #000;
	letter-spacing: 0;
	word-spacing: 0;
	padding: 0;
	line-height: 12px;
}

.extras, .extras *
{
	max-width: 480px;
	overflow: inherit;
}

div.tab_window
{
	background-color: none;
	cursor: default;
	visibility: visible;
}

#meta
{
	margin-left: 0;
}

#more, #meta
{
	float: none;
}


/***************************************
 Tools modal
 ***************************************/

#song .content
{
	position: relative;
}

#tools
{
	display: none;
	position: absolute;
	top: 30px;
	left: 0px;
	z-index: 200;
	margin: 0 74px;
	width: 315px;
	height: 210px;
	padding: 12px 0 10px 14px;
	border: 1px rgba(40, 40, 40, .85) solid;
    -webkit-border-radius: 16px;
    /* border-top: none;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0; */
	background: rgba(80, 80, 80, .85);
	-webkit-box-shadow: rgba(0,0,0,.5) 0px 2px 8px;
}

#tools *
{
	background: none;
	color: #FFF;
}

#tools_close
{
	position: absolute;
	top: -13px;
	right: -16px;
	width: 31px;
	height: 31px;
	background-image: url(images/close-btn.png);
	background-repeat: no-repeat;
}

#tools .item
{
	float: left;
}

#tools .item .label
{
	color: white;
	font-size: 12px;
	font-weight: bold;
	text-shadow: rgb(0, 0, 0) 0px -1px 0;
	margin-bottom: 3px;
	padding-left: 3px;
}

#tools .item a
{
	display: inline-block;
	color: rgb(210,210,210);
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	text-shadow: rgb(0, 0, 0) 0px -1px 0;
	border-width: 0 13px;
    -webkit-border-image: url(images/palette-btn.png) 0 14 0 14;
	padding: 0;
	width: 120px;
	height: 46px;
	line-height: 46px;
	margin: 0 0 2px 0;
}

#tools .item a.large
{
	width: 30px;
	height: 56px;
	margin-right: 5px;
}

#tools .item a.large > img
{
	position: relative;
	top: 8px;
}


#tools .item a.hilite, #tools .item a.large + .hilite
{
	color: black;
	text-shadow: rgb(247, 238, 220) 0px 1px 0;
	/* background-color: rgb(248, 204, 116);
	background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(rgb(248, 204, 116)), to(rgba(238, 179, 66, .8)));
	border: 1px rgb(144, 99, 30) solid; */
	border-width: 0 13px;
    -webkit-border-image: url(images/palette-btn-active.png) 0 14 0 14;
}

#tools .item #pitch_offset
{
	display: inline-block;
	position: relative;
	top: 12px;
	font-size: 20px;
	color: #FFF;
}


.sharing_notice
{
	clear: both;
	border: 1px #BDB69F solid;
	padding: 7px 10px;
	background-color: #FFF;
	margin: 20px 15px 10px 15px;
	font-size: 10px;
	-webkit-border-radius: 6px;
	-webkit-box-shadow: rgba(0,0,0,.4) 0px 3px 6px;
}



/***************************************
 Buttons
 ***************************************/

.back, .button, .add
{
	position: relative;
	top: 3px;
	left: 5px;
	display: inline-block;
	margin: 0;
	padding: 0 8px;
	width: auto;
	height: 28px;
	line-height: 28px;
	font-size: 11px;
	font-weight: bold;
	color: #999;
	text-shadow: rgb(0, 0, 0) 0px -1px 0;
	text-overflow: ellipsis;
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border-width: 0 6px;
	-webkit-border-image: url(images/list-button.png) 0 6 0 6;
}

.button.hilite
{
	color: #FFF;
	text-shadow: rgb(25, 58, 111) 0px -1px 0;
    -webkit-border-image: url(images/list-button-active.png) 0 6 0 6;
}

.button.active
{
	color: #FFF;
	text-shadow: rgb(255, 255, 255) 0px 0px 10px;
}

.button.hilite.active
{
	text-shadow: rgb(25, 58, 111) 0px -1px 0;
}

.back
{
	position: absolute;
	top: 3px;
    left: 4px;
    color: #FFF;
	text-shadow: rgb(27, 86, 176) 0px -1px 0;
	padding: 0 3px 0 3px;
    border-width: 0 7px 0 14px;
    -webkit-border-image: url(images/back.png) 0 7 0 14;
}

.back.active
{
    -webkit-border-image: url(images/back-active.png) 0 7 0 14;
}

.back.list, .back.list.active
{
    -webkit-border-image: none;
}

.back.list, #toolbtn, #playbtn
{
	position: absolute;
	display: inline-block;
	top: 3px;
	left: 3px;
	margin: 0;
	padding: 0;
	width: 29px;
	height: 28px;
	background-color: none;
	background-image: url(images/listback.png);
	background-repeat: no-repeat;
	z-index: 100;
}

.back.list.active
{
	background-image: url(images/listback-active.png);
}

#playbtn
{
	left: auto;
	right: 36px;
	background-image: url(images/playbtn.png);
}

#playbtn.active
{
	background-image: url(images/playbtn-active.png);
}

#toolbtn
{
	left: auto;
	right: 3px;
	background-image: url(images/toolbtn.png);
}

#toolbtn.active
{
	background-image: url(images/toolbtn-active.png);
}

.info
{
	display: inline-block;
	position: absolute;
	top: 3px;
	right: 5px;
	text-align: center;
	width: 28px;
	height: 28px;
	background-image: url(images/info.png);
	background-repeat: no-repeat;
}

.info.active
{
	background-image: url(images/info-active.png);
}


#info .content
{
	padding: 15px 15px 40px 15px;
	font-size: 13px;
	line-height: 1.5em;
}

#info .content > *
{
	margin-top: .5em;
	margin-left: 30px;
}

#info .content ul li
{
	margin-top: .5em;
}

#info .content h1
{
	text-shadow: rgb(150, 150, 150) 0px 2px 4px;
	margin-top: 1em;
	margin-left: 0;
}

#info .content :first-child
{
	margin-top: 0;
}

#info .content a, #gate .content a
{
	color: #2B76F4;
	font-weight: bold;
}



/***************************************
 landscape
 ***************************************/

.landscape .vertical-scroll
{
	height: 264px !important;
	clear: both;
    border-bottom: 1px solid #FFF;
}
.landscape .vertical-scroll > div
{
    margin: 0 auto;
    padding-bottom: 5px; /* redundant? */
}

.vertical-scroll.use-bottom-toolbar, .vertical-slide.use-bottom-toolbar
{
	height: 390px !important;  /* 424-34 */
}

.landscape .vertical-scroll.use-bottom-toolbar, .landscape .vertical-slide.use-bottom-toolbar
{
	height: 229px !important;  /* for Standalone */
	/* height: 197px !important; for Safari */
}



/***************************************
 Prompt to save web clip
 ***************************************/

.DEV
{
	color: rgb(25, 58, 111);
	background-color: rgb(202, 186, 234);
	border: rgb(170, 79, 236);
}

#prompt
{
	display: none;
	position: relative;
	bottom: 0px;
	width: 210px;
	min-height: 40px !important;
	padding: 15px;
	margin: 0 auto;
	font-size: 13px;
	line-height: 16px;
	border: 3px rgb(119, 56, 205) solid;
    -webkit-border-radius: 12px;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 238, 250)), to(rgb(202, 186, 234)));
	-webkit-box-shadow: rgba(0,0,0,.7) 0px 2px 18px;
}

#prompt #dismiss
{
	float: right;
	display: block;
	position: relative;
	top: -10px;
	right: -10px;
	width: 19px;
	height: 19px;
	background-image: url(images/prompt-close.png);
	background-repeat: no-repeat;
	margin-left: 2px;
	cursor: pointer;
}