/*
	 LyricSift
	 by: Richard Felix Jr.
	 
	 Design: Chris Coyier
*/

*					{ margin: 0; padding: 0; }
body				{ font: 14px Georgia, serif; 
                      background: #565d86 url(../images/grad-trans.png) top center no-repeat; 
                      text-align: center; color: white; }
                      
.clear              { clear: both; }
                      
#page-wrap		    { width: 990px; margin: 0 auto; position: relative; min-height: 700px; }

a                   { text-decoration: none; outline: none; }
a img               { border: none; }

#bar                { width: 365px; height: 617px; background: url(../images/bar-bg-trans.png) no-repeat; 
                      float: left; position: relative; }

#lyric              { width: 550px; float: left; padding: 60px 0 0 0; }


.button             { overflow: visible; width: auto; vertical-align: middle; display: block;
                      display: inline-block; padding: 0 14px 0 0; margin: 0 15px 10px 0;
                      vertical-align: middle; cursor: pointer; border: 0;
                      background: url(../images/buttons__.png) no-repeat right center; }
.button span        { position: relative; display: block; white-space: nowrap; 
                      padding: 0 0 0 14px; height: 26px; line-height: 26px; color: #000;
                      background: url(../images/buttons_.png) no-repeat left center; }
.button:hover       { background-position: right top; }
.button:hover span  { background-position: left top; } 

#iphone-but         { position: absolute; left: 116px; top: 450px; }
#comingsoon         { position: absolute; left: 0; top: 450px; text-align: center; width: 100%; }
#shiftedfrequency   { position: absolute; left: 0; top: 500px; text-align: center; width: 100%; 
                      font: 12px Helvetica, Sans-Serif; }
#shiftedfrequency a { color:#fff; }
.help		        { font-size:11px; }
.help a:hover 	    { text-decoration: underline; }
.at300bs 			{ margin-left: 176px; }

.twitterfollow 	  a { color:#fff; }
.twitterfollow    a:hover 	    { text-decoration: underline; }
h1 a                { display: block; text-indent: -9999px; height: 72px; }
                      
h2                  { font: 40px/1.3 Georgia, Sans-Serif; margin: 0 0 20px 0; }

#links a            { color: white; font-size: 26px; padding: 0 5px; }
#links a:hover      { text-decoration: underline;  }
#links              { margin: 0 0 20px 0; }

#submit-lyric-area  { display: none; width: 550px; float: left; padding: 60px 0 0 0;
                      text-align: left; position: relative; }

#submit-lyric-area label { float: left; display: block; width: 75px; 
                           text-align: right; padding: 10px 10px 0 0; }
#submit-lyric-area label span { font-size: 11px; padding-top: 8px; display: block; font-style: italic; }
#submit-lyric-area input[type="text"],
#submit-lyric-area textarea { margin: 0 0 10px 0; width: 400px; padding: 8px; 
                              font: 14px Georgia, Serif; border: none; }
                              
#submit-lyric-area input[type="text"]:focus,
#submit-lyric-area textarea:focus   { background: #fdffd6; }
#submit-lyric-area textarea { font-size: 20px; }

#demo-area          { display: none; width: 550px; float: left; padding: 60px 0 0 0;
                      text-align: left; position: relative; }
#view-demo-button   { position: absolute; top: 335px; left: 0; width: 100%; }
#view-demo-button:hover { text-decoration: underline; }

#meta               { margin: 0 auto; }
#meta tr td         { padding: 0 20px; font: 12px Georgia, Serif; letter-spacing: 3px; text-transform: uppercase; vertical-align: top; }
#meta h4            { font: bold 20px Helvetica, Sans-Serif; color: white; display: block; margin: 0 0 6px 0; letter-spacing: normal; text-transform: none; }

#lyric-character-counter    { position: absolute; top: 105px; right: 50px; }