/*****************************************************
 *  Copyright (c) 2009 ChaseCreations LLC.
 *  All Rights Reserved.
 *****************************************************/

div#main
{
}

.frame
{
	display: inline-block;
	min-width: 0;
	max-width: 1000px;
}

.cbody
{
	padding: 0;
	position: relative;
	width: 976px;
	text-align: left;
	min-height: none;
}

div.btnbar
{
	padding: 14px 10px 8px 10px;
	width: 956px;
}

/*****************************************************
 *  editor-specific
 *****************************************************/

#songhead
{
	clear: both;
	width: 966px;
	padding: 0 5px;
	margin-bottom: 3px;
}

#songhead #songtitle
{
	width: 966px;
	padding: 0;
	margin-top: 6px;
	font-weight: bold;
	font-size: 21px;
	color: #666666;
	border: none;
	border-bottom: 2px #7CCAF9 dotted;
	clear: both;
}

div#rows
{
	clear: both;
	width: 976px;
	background-color: #FFFFFF;

	/* position: relative; */
}

div.row
{
	position: relative;
	display: inline-block; /* for IE */
	min-width: 0;
	width: 968px;
	padding: 0 3px 10px 5px;
	margin: 0;
	background-color: #FFFFFF;
	text-align: left;
	
	/* height: 0; NEW */
	
	/* position: relative;
	z-index: 100; */
}

.rowsortspace
{
	background-color: #CCCCCC;
	height: 200px;
}

div.rowmath
{
	clear: both;
	float: right;
	/* display: inline; */
	display: inline-block; /* for IE */
	position: relative;
	width: 16px;
	height: inherit;
}

.rowmath-lg
{
	padding-top: 45px;
}

.rowmath-md
{
	padding-top: 26px;
}

.rowmath-sm
{
	padding-top: 10px;
}

.rowmath .mover
{
	cursor: move;
	/* margin-bottom: 5px; */
}

div.rowmath img
{
	/* margin-top: 2px; */
	margin-bottom: 5px;
	cursor: pointer;
}

div.staff
{
	width: 947px;
	/* height: 150px; 126 + 24 for glyphs */
	/* background-color: #FFFFFF; ; yellow */
	
	position: relative;
	display: inline-block;
	min-height: 0; /* for IE */

	/* border: 1px solid green; */
}

/*
  100% = 70w x 126h -- 24t
   80% = 56w x 101h -- 19t
   66% = 47w x  84h -- 16t
*/

.staff-lg
{
	height: 150px; /* 126 + 24 for glyphs */
}

.staff-md
{
	height: 118px; /* 99 + 19 for glyphs - fudged 1 px */
}

.staff-sm
{
	height: 86px; /* 72 + 14 for glyphs - fudged 1 px */
}

div.controls
{
	max-width: 970px; /* DEV */
	margin-top: 5px;
}

div.lyrmath
{
	float: right;
	display: inline-block;
	position: relative;
	min-width: 0;
	width: 28px;
	top: 7px;
	/* left: -2px;
	padding: 0 0 0 2px;
	margin: 0; */
	vertical-align: bottom;
	
	/* height: 100%;
	padding: auto 0 0 0; */
}

div.lyrmath img
{
	margin-left: 2px;
	cursor: pointer;
}

.lyric_rows
{
	display: block;
	background-color: #FFFFFF;
	white-space: nowrap;
}

div.tab_window
{
	position: absolute;
	background-color: transparent;
	background-image: none;
	cursor: move;
	visibility: hidden;
	/* display: none;
	border: 1px solid red; */
}

div.tab_window div.label
{
	font-family: helvetica, arial;
	font-size: 12px;
	letter-spacing: normal;
	color: black;
	text-align: center;
	width: 100%;
}

div.tab_controls
{
	display: none; /* DEV */
	position: absolute;
	right: -19px;
	top: -3px;
	cursor: pointer;
}

/*****************************************************
 *  type styles for lyric rows
 *****************************************************/

.lyric_row
{
	font-weight: normal;
	color: #666666;
	width: 938px;
	padding: 1px 0 0 0;
	margin-top: 2px;
	margin-left: -1px;
	border-bottom: 1px #FF00FF dotted;
	text-align: left;
	white-space: pre;
	border-top: none;
	border-right: none;
	border-left: none;
}

.sans_sm, .sans_md, .sans_lg
{
	font-family: helvetica, arial, sans-serif;
	letter-spacing: .04em;
	word-spacing: .12em;
}

.sans_sm
{
	font-size: 12px;
}

.sans_md
{
	font-size: 16px;
}

.sans_lg
{
	font-size: 20px;
}

.serif_sm, .serif_md, .serif_lg
{
	font-family: Times, 'Times New Roman', serif;
	letter-spacing: 0;
	word-spacing: .15em;
}

.serif_sm
{
	font-size: 14px;
}

.serif_md
{
	font-size: 18px;
}

.serif_lg
{
	font-size: 23px;
}

/*****************************************************
 *  chords palette
 *****************************************************/

div#chords
{
	position: fixed;
	left: -467px;
	/* left: 100px; */
	bottom: 0px;
	width: 500px;
	z-index: 2000;
	display: none;
}

div#palette-header
{
	height: 36px;
	/* width: 525px; */
	width: 500px;
	text-align: left;
	clear: left;
	cursor: move;
}

div#palette-header div.L
{
	display: inline-block;
	float: left;
	width: 19px;
	height: 36px;
	/* padding: 11px 0 0 3px; */
	background-image: url(/images/chord_palette/box-TL.png);
	background-repeat: no-repeat;
}

div#palette-header div.C
{
	display: inline-block;
	float: left;
	/* padding-left: 60px; */
	width: 448px; /* 500 - 60 */
	height: 36px;
	background-image: url(/images/chord_palette/box-TC.png);
	background-repeat: repeat-x;
}

div#palette-header div.R
{
	display: inline-block;
	float: left;
	width: 33px;
	height: 36px;
	/* padding: 11px 0 0 3px; */
	background-image: url(/images/chord_palette/box-TR.png);
	background-repeat: no-repeat;
}

div#palette-header div.R img
{
	position: relative;
	top: 12px;
	left: 2px;
}

div#palette-header div.R div#bubble
{
	float: right;
	position: absolute;
	top: -50px;
	right: -16px;
}

div#palette-header div.C a.palTabOn:link, div#palette-header div.C a.palTabOn:visited,
div#palette-header div.C a.palTabOff:link, div#palette-header div.C a.palTabOff:visited
{
	display: block;
	float: left;
	position: relative;
	top: 14px;
	/* width: 111px; */
	height: 14px;
	padding: 5px 6px 0 6px;
	margin-right: 4px;
	border: 1px #666666 solid;
	border-bottom: none;
	font-family: helvetica, arial, sans-serif;
	font-size: 10px;
	line-height: 10px;
	color: #333333;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
}

div#palette-header div.C a.palTabOn:link, div#palette-header div.C a.palTabOn:visited
{
	top: 13px;
	height: 15px;
	padding-top: 6px;
	/* background-image: url(/images/chord_palette/box-tabOn.png);
	background-repeat: no-repeat; */
	background-color: #EFEFEF;
}


div#palette-header div.C a.palTabOff:link, div#palette-header div.C a.palTabOff:visited
{
	/* background-image: url(/images/chord_palette/box-tabOff.png);
	background-repeat: no-repeat; */
	background-color: #CBCBCB;
}

div#palette-header div.C a.palTabOff:hover
{
	text-decoration: underline;
}

div#palette-header div.C a.palTabOn:hover
{
	text-decoration: none;
	cursor: default;
}

div.palette-middle
{
	background: url(/images/chord_palette/box-M.png);
	background-repeat: repeat-y;
	min-height: 260px;
	/* height: 308px; */
	padding-left: 20px;
	text-align: left;
}

div.palette-footer
{
	height: 16px;
	/* width: 525px; */
	width: 555px;
	text-align: left;
}

div#chords div.title
{
	clear: both;
	float: right;
	margin: 0 10px 0 0;
}

div#chords div#chords_menu
{
	width: 433px;
	height: auto;
	padding: 4px 0 2px 0;
	text-align: center;
}

div#chords div#chords_list
{
	width: 433px;
	height: auto;
	padding: 0;
}

div.palette-middle div.note
{
	clear: both;
	text-align: center;
	font-size: 11px;
	margin-top: 4px;
}

.rule
{
	clear: both;
	border-bottom: 1px dotted #AAAAAA;
	height: 3px;
	margin-bottom: 7px;
}

div.chord_spacer
{
	display: block;
	float: left;
	width: 89px;
	height: 18px; /* 22px less 4px top pad */
	text-decoration: none;
	margin: 0 3px 4px 3px;
	font-size: 11px;
	color: #555555;
	font-weight: bold;
	padding-top: 4px;
	vertical-align: middle;
}

.taboption
{
	display: inline-block;
	/* position: relative; */
	cursor: move;
	/* float: left;
	width: 47px;
	height: 84px; */
	/* width: 51px; width, height + 2px border (x2)
	height: 88px; */
}

#plist-c .taboption
{
	width: 51px;
	height: 88px;
	float: left;
}

a.chord_family, 
a.chord_family:hover, 
a.chord_family_active
{
	display: block;
	float: left;
	/* width: 55px; */
	width: 89px;
	height: 17px; /* 22px less 6px top pad */
	text-decoration: none;
	background: url(/images/buttons-4.png) no-repeat scroll -10px -110px;
	margin: 0;
	font-family: helvetica, arial, sans-serif;
	font-size: 11px;
	color: #555555;
	font-weight: normal;
	padding-top: 5px;
	vertical-align: middle;
}

a.chord_family:hover
{
	color: black;
	/* background: url(/images/buttons-4.png) no-repeat scroll -370px -140px; */
	background: url(/images/buttons-4.png) no-repeat scroll -10px -140px;
	text-decoration: none;
}

a.chord_family_active
{
	color: white;
	/* background: url(/images/buttons-4.png) no-repeat scroll -370px -170px; */
	background: url(/images/buttons-4.png) no-repeat scroll -10px -170px;
	cursor: default;
}

a.chord_variant, 
a.chord_variant:hover, 
a.chord_variant_active
{
	display: block;
	float: left;
	width: 89px;
	height: 17px;
	text-decoration: none;
	background: url(/images/buttons-4.png) no-repeat scroll -10px -110px;
	margin: 0;
	font-family: helvetica, arial, sans-serif;
	font-size: 11px;
	color: #555555;
	font-weight: normal;
	padding-top: 5px;
	vertical-align: middle;
}

a.chord_variant:hover
{
	color: black;
	background: url(/images/buttons-4.png) no-repeat scroll -10px -140px;
	text-decoration: none;
}

a.chord_variant_active
{
	color: white;
	background: url(/images/buttons-4.png) no-repeat scroll -10px -170px;
	cursor: default;
}



div.palette-footer div.L
{
	float: left;
	width: 19px;
	height: 16px;
	background-image: url(/images/chord_palette/box-BL.png);
	background-repeat: no-repeat;
}
div.palette-footer div.C
{
	float: left;
	height: 16px;
	width: 448px;
	background-image: url(/images/chord_palette/box-BC.png);
	background-repeat: repeat-x;
}
div.palette-footer div.R
{
	float: left;
	width: 33px;
	height: 16px;
	background-image: url(/images/chord_palette/box-BR.png);
	background-repeat: no-repeat;
}


/*****************************************************
 *  transformations
 *****************************************************/

#tool_bar
{
	float: left;
	width: 969px;
	padding: 0 0 0 7px;
	height: 32px;
	white-space: nowrap;
	background-image: url(/images/toolbar-bg.png);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	background-attachment: scroll;
}

#tool_bar .item
{
	float: left;
	display: inline-block;
	padding: 9px 0 0 0;
	/* padding: 0 0 0 0;
	position: relative; */
	/* top: -2px; */
	color: #333;
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 10px;
	/* line-height: 11px; */
	text-shadow: #FFFFFF 0 1px 0;
	
	/* border: 1px solid green;
	background-color: rgba(255,255,0,.30); */
	
	height: 23px;
	vertical-align: middle;

	/* cursor: pointer; */
}

#tool_bar .item > img
{
	display: inline-block;
	position: relative;
	top: -5px;
	padding-right: 4px;
	cursor: pointer;
}

#tool_bar .item + .nocursor
{
	cursor: default;
}

#tool_bar .item + .keys img, #tool_bar .item#sizes img
{
	padding-right: 0px;
}

#tool_bar .item > select
{
	height: 18px;
	margin: 0;
	padding: 0;
	position: relative;
	top: -4px;
	color: #444444;
	font-family: arial, helvetica;
	font-size: 10px;
	vertical-align: top;
	border: 1px solid #999999;
}

#tool_bar .item select option
{
	color: #444444;
	height: 16px;
	padding: 0;
	padding: 1px 2px 1px 1px;
}

#tool_bar .item #pitch_offset
{
	display: inline-block;
	/* position: relative;
	top: -5px; */
	height: 14px;
	font-family: monospace, courier;
	font-size: 12px;
	color: green; /* rgb(0, 78, 200); */
	border: 1px solid #AAAAAA;
	background-color: white;
	padding: 0 1px 0 2px; */
	margin: 0 12px 0 0;
}

#tool_bar .menuspacer
{
	float: left;
	display: inline-block;
	/* position: relative;
	top: 0; */
	border-left: 1px #999999 solid;
	border-right: 1px #FFFFFF solid;
	width: 0px;
	height: 27px;
	margin: 0 6px;
	padding: 0;
}


/*****************************************************
 *  play mode elements
 *****************************************************/

#console
{
	display: none;
	width: 976px;
	position: fixed;
	top: 0;
	height: 64px;
	/* padding: 10px 10px 0 10px;
	background-color: #444; */
	/* border-bottom: 1px #222 solid; */
	z-index: 1000;
}

#console *
{
	font-family: helvetica, arial, sans-serif;
	color: #FFF;
	font-size: 11px;
	line-height: 11px;
}

#console #dash
{
	height: 24px;
	padding: 10px 10px 0 10px;
	background-image: url(/images/console-bg.png);
	background-repeat: repeat-x;
}

#console #dash .key
{
	display: inline-block;
	background-color: #6CF;
	font-size: 10px;
	color: black;
	padding: 2px 6px 1px 6px;
	text-shadow: none;
}

#console #dash .item
{
	padding-right: 15px;
	text-shadow: #000 0 -1px 0;
}

#console #dash #rollstatus
{
	display: inline-block;
	position: absolute;
	top: 0;
	right: 15px;
	color: #FFF;
	font-weight: bold;

	padding-top: 11px;
	background-color: #D2261C;
	text-align: center;

	width: 121px;
	height: 23px;

	background-image: url(/images/console-status.png);
	background-repeat: no-repeat;
}

#console #shadow
{
	height: 30px;
	background-image: url(/images/console-shadow.png);
	background-repeat: repeat-x;
}

.y
{
	background-color: #FF8000;
}

#topspacer
{
	display: none;
	height: 80px;
}


/*****************************************************
 *  addl lyrics section
 *****************************************************/
 
.extras
{
	overflow: auto;
	padding-top: 10px;
}

#more
{
	float: left;
	background-color: white;
	padding-left: 5px;
	width: 406px;
}

#meta
{
	float: left;
	background-color: white;
	margin-left: 28px;
	width: 520px;
}

#meta .sep
{
	border-bottom: 1px dotted #AAAAAA;
	height: 1px;
	margin: 12px 0;
}

#more .heading, #meta .heading
{
	font-size: 14px;
	font-weight: bold;
	color: #444444;
	margin-bottom: 3px;
	letter-spacing: -.05em;
	cursor: pointer
}

#more .heading img, #meta .heading img
{
	margin-right: 4px;
	position: relative;
	top: -1px;
}

#more textarea.lyrics
{
	width: 400px;
	height: 340px;
	padding: 2px;
	border: 1px #7CCAF9 solid;
	margin: 0;
	font-family: helvetica, arial, verdana, sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #666666;
	line-height: 19px;
}

#more #lyricsbox
{
	margin-left: 20px;
}

/*****************************************************
 *  meta section
 *****************************************************/

#meta .item
{
	margin-bottom: 6px;
}

#meta .item .label
{
	float: left;
	width: 85px;
	height: 100%;
	/* margin-right: 9px; */
	font-size: 12px;
	font-weight: normal;
}

#meta .item .container
{
	margin-left: 85px;
}

#meta .item .container .audiofilename
{
	font-size: 11px;
	font-weight: bold;
	color: green;
	margin-bottom: 2px;
}

#meta .item .container #audio_player, #meta .item .container #video_player
{
	margin-bottom: 4px;
}

#meta .item input.meta
{
	width: 425px;
	padding: 2px;
	border: 1px #7CCAF9 solid;
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 12px;
	color: #333333;
	margin: 0;
}

#meta .item select.meta
{
	width: 425px;
	padding: 2px;
	border: 1px #7CCAF9 solid;
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 12px;
	color: #333333;
	margin: 0;
}

#meta .item textarea.meta
{
	width: 425px;
	height: 97px;
	padding: 2px;
	border: 1px #7CCAF9 solid;
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 12px;
	color: #333333;
	margin: 0;
}

#meta #optinfobox
{
	margin-left: 20px;
}

.artist_copyright
{
	background-color: white;
	padding: 10px 10px 6px 10px;
	font-size: 11px;
}

/*****************************************************
 *  save button
 *****************************************************/
 
#save_icon_lg
{
	color: #888888;
	text-align: center;
	font-size: 14px;
	margin: 0;
	padding: 0;
	width: 150px;
	cursor: default;
}

#save_icon_lg img
{
	position: relative;
	top: 8px;
	cursor: default;
}

/*****************************************************
 *  comments window
 *****************************************************/

div.addlfeatures
{
	width: 956px;
	padding: 10px;
	padding-top: 12px;
	background-color: white;
	border-top: 3px solid  rgb(0, 49, 215);;
}

div.addlfeatures table
{
}

textarea.commentfield
{
	width: 462px; /* 490 - ((3+1)x2) */
	margin-top: 6px;
	padding: 3px;
	border: 1px #7CCAF9 solid;
	font-family: Arial;
	font-size: 12px;
	color: #333333;
}

div.comments
{
	font-size: 14px;
	font-weight: bold;
	background-color: white;
	border: 1px dotted #888888;
	width: 470px;
	padding: 7px;
}

div.comments .item
{
	font-size: 12px;
	font-weight: normal;
	padding: 4px 0 4px 0;
	border-top: 1px dotted #888888;
}

div.comments .item .meta
{
	color: #4395C9;
	font-weight: normal;
}

div.comments .item .text
{
	margin-left: 20px;
}

#add_comment
{
	float: right;
	font-size: 11px;
	text-decoration: none;
}

a#add_comment, a#add_comment:visited
{
	color: #444444;
}

a#add_comment:hover
{
	color: black;
	text-decoration: none;
}

#add_comment img
{
	position: relative;
	top: 2px;
}

#comments_window
{
	margin-top: 2px;
}

/*****************************************************
 *  video window
 *****************************************************/

div.videobox
{
	width: 425px;
	padding: 5px 7px 5px 7px;
	border: 1px dotted #888888;
	background-color: white;
}

div.videobox p
{
	margin: 4px 0 2px 0;
}

div.videobox div.label
{
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: bold;
}

div.videobox input.videofield
{
	width: 417px;
	height: auto;
	font-family: Arial;
	font-size: 12px;
	color: #777777;
	padding: 3px;
	overflow: hidden;
	border: 1px #7CCAF9 solid;
}

/*****************************************************
 *  ratings (lg)
 *****************************************************/

div.ratings
{
	width: 470px;
	height: 22px;
	margin: 0 28px  9px 0;  /* a hack */
	padding: 5px 7px 5px 7px;
	border: 1px dotted #888888;
}

div.ratings div.label
{
	float: left;
	padding: 3px 6px 0 0;
	font-size: 14px;
	font-weight: bold;
}

div.ratings div.count
{
	float: right;
	padding-top: 3px;
}

div#rater_lg
{
	float: left;
	width: 110px;
	height: 22px;
	margin-right: 9px;
	background-image: url(/images/rating.png);
	background-repeat: no-repeat;
	background-position: -120px -75px;
	background-attachment: scroll;
	cursor: pointer;
}

div#key_lg
{
	font-size: 12px;
	color: #777777;
	height: 22px;
	padding-top: 5px;
}

/*****************************************************
 *  button messaging
 *****************************************************/

div#btnmsg
{
/* 	display: none; */
	float: left;
	position: absolute;
	top: 0px;
	left: 0px;
	min-width: 80px;
	max-width: 220px;
	height: auto;
	z-index: 200;
}

/* div#btnmsg .pt
{
	float: right;
	width: 17px;
	height: 9px;
	background-image: url(/images/btnmsg_arrow.png);
	background-repeat: no-repeat;
	position: relative;
	left: -1px;
	top: 6px;
} */

div#btnmsg .ct
{
	display: inline-block;
	float: left;
	/* width: 100px; */
	width: auto;
	padding: 8px 12px 6px 12px;
	border: 1px #DCC042 solid;
	background-color: #FFFDAF;
	text-align: left;
	font-family: helvetica, arial, verdana, sans-serif;
	letter-spacing: normal;
	font-size: 10px;
	line-height: 12px;
	color: #444444;
	white-space: nowrap;
}