/**************************** SITEWIDE ****************************/
*						{margin:0; padding:0;}
body					{background:#fff url(../images/blue-gradient.gif) top center repeat-x; font-family:Helvetica,Arial,sans-serif}
.clear					{clear:both}
.hr						{width:100%; border-bottom:1px dotted #999; margin-top:20px; margin-bottom:15px}
a						{text-decoration:none; cursor:pointer}
a:hover					{text-decoration:underline}
input[type=text]		{border:1px solid #999999; margin-bottom:8px; padding:5px; font-family:Arial; font-size:0.8em}

/**************************** MAIN STRUCTURE ****************************/
#wrapper-main			{margin:0 auto; padding:20px; width:825px; margin-top:10px;}
#leftcol				{position:relative; float:left; background:red; width:160px; height:600px}
#rightcol				{position:relative; float:right; background:red; width:160px; height:600px}
#centercol				{margin-bottom:40px}
#logo					{position:relative; float:left; background:url(../images/logo-transparent.png) no-repeat; width:825px; height:90px; margin:-20px 0px 20px 0px; border-bottom:1px dotted #fff;}
#logo-link a			{position:absolute; top:20px; display:block; height:83px; width:261px; z-index:100;}
#adsense-upper			{margin-bottom:20px; border:1px solid #ccc; width:728px; height:90px}
#adsense-lower			{margin-top:20px; border:1px solid #ccc; width:728px; height:90px}
#widget					{float:left;}
#share					{position:relative; margin-top:10px}
#code					{float:left; width:300px; margin-left:20px;}
#code textarea			{background:none; width:100%; height:250px; border:1px solid #999; padding:10px; font-size:0.95em; font-family:monospace; line-height:1.5em; color:#777;}
#l2	textarea			{display:none;}
#message				{background:#fee6b6; padding:10px; margin-bottom:20px; border:3px solid #c45e90; width:99%}
#footer					{clear:both; padding-top:15px; padding-bottom:25px; border-top:1px dotted #999}
#copyright				{float:left}
#footer-links			{float:right}

/**************************** FONTS ****************************/
#centercol p			{color:#333; font-size:0.85em; line-height:1.5em;}
#centercol h1			{color:#444ca1; font-size:1.4em; line-height:1.0em; margin-bottom:0.5em; font-family:"Helvetica Neue";}	
#centercol h2			{color:#444ca1; font-size:0.88em;}
#code h2				{margin-bottom:1.0em}
#code ul				{}
#code li				{color:#444ca1; font-size:0.8em; line-height:1.5em; margin-left:2.5em}
#code li a				{color:#444ca1; border-bottom:1px dotted #444ca1; text-decoration:none}
#code li a:hover		{border-bottom:none}
#main p					{color:#333; font-size:0.85em; line-height:1.5em; margin-bottom:1.0em}
#main ul				{margin-bottom:1.0em}
#main ol				{margin-bottom:1.0em}
#main li				{color:#444ca1; font-size:0.8em; line-height:1.5em; margin-left:2.5em}
#main li a				{color:#444ca1; border-bottom:1px dotted #444ca1; text-decoration:none}
#main li a:hover		{border-bottom:none}
#message				{color:#444ca1; font-size:0.9em}
#copyright 				{font-size:0.75em; color:#777}
#footer-links			{font-size:0.75em; color:#777}
#footer-links a			{color:#777}
#widget h1				{font-size:0.8em; color:#333; margin-bottom:0.7em;}
#widget h1 a			{color:#000}
.label					{float:left; font-size:11px; display:block; width:65px; padding:2px 0px 0px 4px; color:#333; font-weight:bold}

/**************************** WIDGET STYLES ****************************/		
textarea				{border:1px solid #999999; padding:5px; font-family:Arial; font-size:0.8em}
select					{padding:2px}
.unfocus				{color:#777; font-style:italic;}
#wrapper				{width:474px; height:289px; background:#3ebef9 url(../images/widget-logo.png) top left no-repeat; padding:10px; border:3px solid #0083cb;}
#chords					{height:150px; width:461px; border:1px solid #0083cb; font-size:12px; font-family:monospace; margin-top:75px; margin-bottom:5px}
#controls				{float:left; margin-top:0px;}
#controls ul			{float:left; list-style-type:none;}
#controls li			{float:left; display:block; list-style-type:none; cursor:pointer; text-align:center; font-size:12px; padding:2px 7px; height:16px; color:#333}
#controls input[type=radio]		{display:none}
#controls li:hover		{background:#1abcff; text-align:center}
#controls li.selected	{background:#0083cb; text-align:center}
#controls #submit		{float:right;}
#origkey				{float:left; height:20px; margin-right:10px; margin-top:0px; background:#eaeaea; width:372px; border-right:1px solid #0083cb; border-left:1px solid #0083cb; border-top:1px solid #0083cb; padding:0px;}
#newkey					{float:left; height:20px; margin-right:10px; background:#aaa; margin-bottom:5px; width:372px; border:1px solid #0083cb; padding:0px;}

/**************************** TABLES ****************************/
table.list-items				{border-collapse:separate; border-spacing:0; *border-collapse:collapse; margin-top:10px}
.list-items td, .list-items th	{padding:7px 20px 7px 20px; border-right:1px solid #ffffff; border-left:1px solid #cdcdcd; *position:relative;}
.list-items th					{background:#c1c1c1; color:#333333; font-size:0.9em;}
.list-items td					{font-size:0.8em; color:#333333;}
.list-items select				{width:100%; color:#333333; font-size:0.9em}
.list-items .odd				{background:#ffffff;}
.list-items .even				{background:#eaeaea;}
#transpose-table				{float:left}