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

/*****************************************************
 *  generic styles 
 *****************************************************/

body, div, p, td, ul, ol, li, form, input, select, textarea
{
	font-family: 'Trebuchet MS', verdana, arial, sans-serif;
	font-size: 13px;
}

body
{
	margin: 0;
	background-color: rgb(0, 49, 215);
	background-image: url(/images/blurbg.png);
	background-repeat: repeat-x;
	background-attachment: fixed;
}

h1, h2, h3, h4
{
	margin: 0 0 .5em 0;
	letter-spacing: -.04em;
}

p
{
	margin: 0 0 .25em 0;
}

h1
{
	font-size: 30px;
	line-height: 100%;
}

h2
{
	font-size: 24px;
	line-height: 100%;
}

h3
{
	font-size: 19px;
	line-height: 100%;
}

h4
{
	font-size: 15px;
	line-height: 100%;
}

a, a:link, a:visited
{
	text-decoration: none;
	color: #0000D5;
}

a:hover
{
	text-decoration: underline;
}

form, input
{
	margin: 0;
}

input.radio
{
	position: relative;
	top: 2px;
	margin: 0 3px 0 0;
}

input.check
{
	/* position: relative; */
	margin: 0 3px 0 0;
}

.login
{
	padding: 12px 12px 12px 12px;
	width: 221px;
	height: 153px;
	background-image: url(/images/loginbox.png);
	background-repeat: no-repeat;
	margin-top: 5px;
}

.login a:link, .login a:visited
{
	color: #555555;
}

.login a:hover
{
	color: black;
}

.dialog
{
	padding: 16px;
	min-width: 200px;
	max-width: 500px;
	background-color: #D2EAFA;
	border: 1px #4395C9 solid;
	border: 1px #4395C9 solid;
}

.dialog_msg
{
	color: red;
}

.frame
{
	max-width: 990px;
}

.copyright
{
	clear: both;
	margin: 18px 10px 6px 10px;
	font-size: 10px;
	color: #52D3F9;
	line-height: 15px;
	text-align: center;
}

.copyright img
{
	margin-bottom: 6px;
}

div.btnbar
{
	padding: 9px 6px 0 6px;
	background-color: white;
	height: 27px;
}

div.btnbar table, div.btnbar tr, div.btnbar td
{
	padding: 0;
	margin: 0;
	border: 0;
}

a.button_sm, a.button_md, a.button_lg, a.button_xlg /* , a.button_help */
{
	display: inline-block;
	/* float: left; */
	height: 19px; /* 22px less 3px top pad */
	width: 89px;
	padding-top: 3px;
	margin: 0 9px 4px 0;
	color: #555555;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	background: transparent url(/images/buttons-4.png) no-repeat scroll -10px -110px;
}

a.button_md
{
	width: 108px;
	background: transparent url(/images/buttons-4.png) no-repeat scroll -110px -110px;
}

a.button_lg
{
	width: 130px;
	background: transparent url(/images/buttons-4.png) no-repeat scroll -230px -110px;
}

a.button_xlg
{
	width: 208px;
	background: transparent url(/images/buttons-4.png) no-repeat scroll -10px -230px;
}

a.button_sm:hover, a.button_md:hover, a.button_lg:hover, a.button_xlg:hover /* , a.button_help:hover */
{
	color: black;
	background: transparent url(/images/buttons-4.png) no-repeat scroll -10px -140px;
	text-decoration: none;
}

a.button_md:hover
{
	background: transparent url(/images/buttons-4.png) no-repeat scroll -110px -140px;
}

a.button_lg:hover
{
	background: transparent url(/images/buttons-4.png) no-repeat scroll -230px -140px;
}

a.button_xlg:hover
{
	background: transparent url(/images/buttons-4.png) no-repeat scroll -10px -260px;
}

span.tm
{
	position: relative;
	top: -.4em;
	left: -1px;
	font-size: 70%;
	font-weight: normal;
}


/*****************************************************
 *  tab nav
 *****************************************************/

.cwrapper
{
}

#cheader
{
	margin: 0;
	height: 47px;
	padding: 0 10px 0 3px;
}

#cheader a:link, #cheader a:visited
{
	color: #666666;
}

#cheader a:hover
{
	color: black;
}

#ctabs
{
	padding-right: 7px;
}

.cbody
{
	border-top: 1px #555555 solid;
	clear: both;
	padding: 18px 10px 6px 10px;
	min-height: 500px;
}

.tabOn, .tabOff
{
	display: block;
	float: right;
	position: relative;
	top: 1px;
	font-size: 15px;
	line-height: 15px;
	border: 1px solid #555555;
	border-bottom: 1px solid white;
	padding: 3px 14px;
	margin: 0 3px 0 0;
	height: 15px;
	text-align: center;
	text-shadow: #FFFFFF 0 1px 0;
}

a.tabOff:link, a.tabOff:visited, a.tabOff:hover
{
	background-color: #D1EAFD;
	font-weight: normal;
	border: 1px solid #888888;
	border-bottom: 1px solid #555555;
	color: #888888;
	text-decoration: none;
	cursor: pointer;
}

a.tabOn:link, a.tabOn:visited, a.tabOn:hover
{
	background-color: white;
	margin-top: -2px;
	padding-top: 4px;
	height: 16px;
	font-weight: bold;
	color: black;
	text-decoration: none;
	cursor: default;
}

a.tabOff:hover
{
	background-color: #E9D4FA;
	color: #444444;
	text-decoration: none;
	cursor: pointer;
}


.tabOn img, .tabOff img
{
	position: relative;
	top: 1px;
}

.newbox
{
	float: left;
	position: relative;
	/* display: inline; */
	background-image: url(/images/new_angled.png);
	background-repeat: no-repeat;
	width: 32px;
	height: 21px;
	top: -18px;
	left: -10px;
	margin-right: -27px;
}


/*****************************************************
 *  navigation
 *****************************************************/

.top_links
{
	float: right;
	margin-top: 8px;
	font-size: 12px;
}

.top_links a:link, .top_links a:visited, .top_links a:hover
{
	font-weight: normal;
}

.bottom_links
{
	margin: 3px 0 10px 0;
	font-size: 11px;
	color: black;
	color: #52D3F9;
	font-weight: normal;
	letter-spacing: .05em;
	text-align: center;
	clear: both;
}

.bottom_links .auth
{
	color: #52D3F9;
	font-size: 13px;
	margin-bottom: 9px;
}

.bottom_links .gogo
{
	font-size: 14px;
	margin-bottom: 9px;
}

.bottom_links a:link, .bottom_links a:visited
{
	color: white;
}

.bottom_links a:hover
{
}

.bottom_links img.sep
{
	position: relative;
	top: 2px;
	margin: 0 1px;
}


/*****************************************************
 *  page specific styles
 *****************************************************/

div.header
{
	background-color: #84B5D4;
	margin-bottom: 4px;
}

div.header div.title
{
	font-weight: bold;
	display: inline;
	width: 100px;
	height: 24px;
	padding: 3px;
}

div.header div.field
{
	height: 24px;
	display: inline;
	width: 85%;
}


/*****************************************************
 *  modal & chords windows
 *****************************************************/

div.modal_title_bar
{
	background-color: rgb(0, 49, 215);
	font-size: 14px;
	font-weight: bold;
	color: white;
	height: 19px;
	padding: 0 3px;
	margin: 0 0 3px 0;
	/* cursor: move; */
}

div.modal_title_bar img
{
	position: relative;
	top: 2px;
}

#modal
{
	position: absolute;
	left: 0;
	top: 0;
	width: 500px;
	height: 400px;
	z-index: 2300;
	display: none;
}

#modal_content
{
	position: absolute;
	left: 0;
	top: 0;
	width: 500px;
	height: 400px;
	padding: 0;
	border: 2px solid rgb(0, 49, 215);
	background-color: #FFFFFF;
	z-index: 2400;
	text-align: center;
	vertical-align: middle;
}

#mask
{
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: #AAAAAA;
	z-index: 2000;
	width: 100%;
	height: 100%;
	filter: alpha(opacity=80);
	-moz-opacity: .8;
	opacity: .8;
	display: none;
}

#modal_close
{
	display: block;
	position: relative;
	float: right;
	background-image: url(/images/modal_close.png);
	background-repeat: no-repeat;
	width: 23px;
	height: 23px;
	right: -20px;
	top: -19px;
}

a.modal_family, 
a.modal_family:hover, 
a.modal_family_active
{
	display: block;
	float: left;
	width: 89px;
	height: 18px; /* 22px less 4px top pad */
	text-decoration: none;
	background: url(/images/buttons-4.png) no-repeat scroll -10px -110px;
	margin: 0 3px 4px 3px;
	font-size: 11px;
	color: #555555;
	font-weight: bold;
	padding-top: 4px;
	vertical-align: middle;
}

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

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

img.tab
{
	border: 2px solid transparent;
}

img.tab:hover
{
	border: 2px solid red;
}

.req
{
	color: red;
	font-weight: bold;
}

/*****************************************************
 *  ratings (sm)
 *****************************************************/

div.rater_sm
{
	width: 80px;
	height: 16px;
	background-image: url(/images/rating.png);
	background-repeat: no-repeat;
	background-position: -90px -10px;
	background-attachment: scroll;
}

div#key_sm
{
	font-size: 11px;
	margin-left: 84px;
	height: 16px;
	padding-top: 3px;
}


/*****************************************************
 * generic label def
 *****************************************************/

.label
{
	font-size: 14px;
	font-weight: bold;
	color: #444444;
	letter-spacing: -.05em;
}

/*****************************************************
 * shadowed box
 *****************************************************/

div.box-header
{
}

div.box-footer
{
}

div.box-contents-lg
{
	background-image: url(/images/box/box-M-1000.png);
	background-repeat: repeat-y;
	padding: 6px 12px;
}

div.box-contents-md
{
	background-image: url(/images/box/box-M-650.png);
	background-repeat: repeat-y;
	padding: 0 12px;
	min-height: 400px;
}

div.box-header div.L
{
	float: left;
	width: 24px;
	height: 23px;
	background-image: url(/images/box/box-TL.png);
	background-repeat: no-repeat;
}
div.box-header div.R
{
	float: right;
	width: 24px;
	height: 23px;
	background-image: url(/images/box/box-TR.png);
	background-repeat: no-repeat;
}
div.box-header div.C
{
	position: relative;
	margin: 0 24px;
	height: 23px;
	background-image: url(/images/box/box-TC.png);
	background-repeat: repeat-x;
}

div.box-footer div.L
{
	float: left;
	width: 24px;
	height: 28px;
	background-image: url(/images/box/box-BL.png);
	background-repeat: no-repeat;
}
div.box-footer div.R
{
	float: right;
	width: 24px;
	height: 28px;
	background-image: url(/images/box/box-BR.png);
	background-repeat: no-repeat;
}
div.box-footer div.C
{
	position: relative;
	margin: 0 24px;
	height: 28px;
	background-image: url(/images/box/box-BC.png);
	background-repeat: repeat-x;
}

table.receipt
{
	background-color: #AAAAAA;
}

table.receipt td
{
	background-color: white;
	padding: 4px 18px 3px 12px;
	text-align: left;
	font-size: 14px;
}

table.receipt td.label
{
	background-color: #EEEEEE;
}

.respwin
{
	font-size: 14px;
	text-align: center;
	padding-top: 60px;
}

.devnote
{
	color: red;
}


/*****************************************************
 *  Signup Page Terms (overrides default)
 *****************************************************/

div.terms
{
	text-align: left;
	font-family: Arial, Heletica, sans-serif;
	padding: 0 20px;
}

div.terms h1
{
	font-size: 16px;
	color: #555555;
	margin: 1em 0 .5em 0;
	text-align: center;
	font-family: Arial, Heletica, sans-serif;
}

div.terms h2
{
	font-size: 13px;
	color: #555555;
	margin: .7em 0 .4em 0;
	font-family: Arial, Heletica, sans-serif;
}

div.terms p, div.terms ul
{
	font-size: 11px;
	color: #555555;
	margin: 0 0 .4em 0;
	text-align: justify;
	font-family: Arial, Heletica, sans-serif;
}

div.terms ul
{
	margin: 0 0 9px default;
}

div.terms li
{
	font-size: 11px;
	color: #555555;
	margin: 0 0 .3em 0;
	text-align: justify;
	font-family: Arial, Heletica, sans-serif;
}


/*****************************************************
 *  list specific styles
 *****************************************************/
 
table.mygclists
{
	width: 100%;
}

.scrolllist
{
	border: 1px solid #BBBBBB;
	padding: 4px 4px 4px 4px;
}

table.mygclists tr th
{
	background-color: #333333;
	color: white;
	font-weight: normal;
	font-size: 11px;
	text-align: left;
	padding: 2px 8px;
}

table.mygclists tr th a, table.mygclists tr th a:visited, table.mygclists tr th a:hover
{
	color: white;
	font-size: 11px;
}

table.mygclists td
{
	color: #555555;
	padding: 4px 8px;
	border-bottom: 1px dotted #AAAAAA;
	font-size: 12px;
}

table.mygclists td.odd
{
	background-color: #EEEEEE;
}

table.mygclists td.even
{
	background-color: #FFFFFF;
}

table.mygclists td a
{
	/* font-size: 15px; */
}

table.mygclists a.tool, table.mygclists a.tool:visited, table.mygclists a.tool:hover
{
	font-size: 12px;
	padding: 0 6px;
}

table.mygclists a.tool:hover
{
	color: black;
	text-decoration: none;
}

table.mygclists a img
{
}

table.mygclists .description
{
	font-size: 11px;
}

span.smuser
{
	font-size: 11px;
}

span.mduser
{
	font-size: 12px;
}

.paging
{
	height: 22px;
	padding: 12px 6px 0 0;
	background-color: white;
	text-align: left;
}

.paging a, .paging a:visited, span.current
{
	display: block;
	float: left;
	height: 14px;
	text-decoration: none;
	margin: 0 2px 0 0;
	font-size: 12px;
	line-height: 10px;
	color: #555555;
	font-weight: normal;
	padding: 2px 6px 0 6px;
	text-align: center;
	vertical-align: middle;
}

.paging a:hover, .paging a.ctl:hover
{
	color: #D1273D;
	background-color: #F9DD6D;
}

.paging span.current
{
	background-color: #2B7CD5;
	color: white;
}

.paging span.spacer
{
	display: block;
	float: left;
	width: 0;
	height: 15px;
	border-left: 1px dotted #777777;
	margin: 0 8px 0 5px;
}

.paging a.ctl, .paging a.ctl:visited
{
	color: #888888;
	font-size: 21px;
	font-weight: normal;
	line-height: 10px;
	width: 14px;
	padding: 1px;
}

.sorting
{
}

.listtitle
{
	font-size: 17px;
	font-weight: bold;
	color: green;
}

p.listcount
{
	margin: 0 0 3px 0;
	font-size: 14px;
	color: green;
}

.checklist
{
	border: 1px solid #BBBBBB;
	height: 170px;
	overflow: auto;
}

.checklist .itemOn, .checklist .itemOff
{
	padding: 4px 6px 6px 6px;
	background-color: white;
	border-top: 1px dotted #AAAAAA;
}

.checklist .itemOff
{
	background-color: #EEEEEE;
}

.shareterms
{
	color: green;
	margin: 9px 0;
	font-size: 11px;
	line-height: 12px;
	/* text-align: justify; */
}

.tools
{
	float: right;
	font-size: 14px;
	/* margin: -4px 0 0 0; */
	position: relative;
	top: -12px;
	padding: 0;
	height: 24px;
	cursor: pointer;
}

/* .tools a, .tools a:visited
{
	font-weight: bold;
	color: #444444;
}

.tools a:hover
{
	color: black;
	text-decoration: none;
} */


/*****************************************************
 *  Settings Page(s)
 *****************************************************/

.setting_group
{
	border: 1px solid #888888;
	margin: 0 0 18px 0;
}

.setting_group .heading
{
	background-color: #888888;
	font-size: 16px;
	color: white;
	padding: 2px 18px;
}

.setting_group .body
{
	padding: 20px;
}

.setting_group select, .setting_group option
{
	font-size: 11px;
}

.setting_group .settings_msg
{
	color: green;
	font-size: 11px;
	padding-top: 6px;
}

div.avatarbox
{
	float: right;
	padding: 10px;
	border: 1px solid #AAAAAA;
}

div.avatar-input
{
	padding: 16px 20px 0 0;
	width: 360px;
	text-align: left;
}

#avatar-contents
{
	color: #494949;
	font-size: 12px;
}

#upload_area img
{
	margin-bottom: 9px;
}