/* -------------------------------------------
project:	YouTubeOmat
date:		2007/11/18
------------------------------------------- */

html { min-height: 100%; margin-bottom: 1px; font-size: 100.01%; background: url(../images/indicator.gif) -100px 0 no-repeat; }
body { margin: 0; padding: 15px 0 10px; background: #fff; color: #555; font: 62.5%/1.5 Arial,Helvetica,sans-serif; }
textarea, input, select, option, optgroup, button { font: 1em Arial,Helvetica,sans-serif; }

/* RE-SETS
------------------------------------------- */
* { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }

li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl { margin-bottom: 1.5em; }
p { margin-bottom: 1.25em; }
li *, dt *, dd *, p * { font-size: 1em; }

fieldset, img { border: none; }
button { overflow: visible; cursor: pointer; }
legend { display: none; }

a { color: #369; text-decoration: none; }
a:hover, a:focus, a:active { color: #000; text-decoration: underline; }

/* HEADINGS
------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; font: normal 2.4em "Lucida Sans Unicode",Arial,Helvetica,sans-serif; color: #000; }
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; text-transform: uppercase; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }

/* HELPERS
------------------------------------------- */
.wrapper { width: 100%; overflow: hidden; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.offset { position: absolute; left: -10001em; overflow: hidden; height: 0; margin: 0; line-height: 0; }

legend.offset { display: none; }

/* LAYOUT
------------------------------------------- */
#root { width: 750px; margin: 0 auto; }
 h1 { width: 223px; height: 71px; margin: 0 auto 15px; background: url(../images/logo.png) no-repeat; }
  h1 a { overflow: hidden; display: block; width: 223px; height: 71px; text-indent: -10001em; }
 #footer { overflow: hidden; width: 100%; margin: 5px 0 0; padding: 15px 0 0; border-top: 1px solid #d4d4d4; }
  #footer p { padding: 0 10px; float: right; font: bold 0.8em Verdana,sans-serif; text-transform: uppercase; }
  #footer p.first { float: left; }
   #footer p span { color: #ccc; }
   #footer p a { padding: 0 2px; }
   
/* GENERAL
------------------------------------------- */
.separate { padding: 15px 0 0; border-top: 1px solid #d4d4d4; }

form.homie { display: block; width: 545px; margin: 0 auto; text-align: left; }
 form.homie fieldset { margin: 0; padding: 0; }
  form.homie fieldset legend { display: none; }
  form.homie fieldset p { }
  form.homie fieldset p.break { margin-bottom: 25px; }
  form.homie fieldset p.tiny { margin-top: -8px; padding: 0 0 0 140px; color: #999; font: 0.9em Tahoma,sans-serif;  }
  form.homie fieldset p.error { padding: 5px; background: #b92525; color: #fff; font-weight: bold; text-align: center; }
  form.homie fieldset p.submit { padding-left: 140px; }
   form.homie fieldset p label { float: left; width: 140px; vertical-align: middle; }
   form.homie fieldset p input { width: 290px; margin: 0 5px 0 0; padding: 1px 2px; vertical-align: middle; }
   form.homie fieldset p input.s { width: 150px; }
   form.homie fieldset p input.loading { background: url(../images/indicator.gif) 99% 50% no-repeat; }

button.a { padding: 1px 10px; border: 1px solid #921515; color: #fff; background: #921515 url(../images/bg-a.gif) repeat-x; font-size: 0.83em; text-transform: uppercase; text-decoration: none; }

ul.paging { float: right; list-style: none; margin: 0; padding: 0; }
 ul.paging li { display: inline; float: left; margin: 0 0 0 5px; padding: 0 5px 0 0; font-size: 1em; line-height: 1; text-transform: uppercase; }
 ul.paging li.first { padding-right: 7px; border-right: 1px solid #777; }
 ul.paging li.last { padding-left: 7px; margin-left: 0; border-left: 1px solid #777; }
 ul.paging li.prev { margin-left: 7px; padding-left: 0; }
 ul.paging li.next { margin-right: 7px; padding-right: 0; }
  ul.paging li strong { }
  ul.paging li a { }
  
div.comment { background: url(../images/avatar.jpg) 15px 15px no-repeat; }
div.comment-alt { background-color: #f9f9f9; }
 div.comment div.inner { position: relative; width: 100%; padding: 15px 0; background: url(../images/sep-a.gif) 0 100% repeat-x; }
  div.comment h3 { margin: 0 15px 1px 70px; font-size: 1.2em; }
  div.comment p.image { position: absolute; left: 0; top: 15px; margin: 0 0 0 15px; }
  div.comment p.date { margin: 0 15px 5px 70px; font-size: 1em; text-transform: uppercase; }
  div.comment p.spam { position: absolute; right: 10px; top: 18px; margin: 0; font-size: 1em; text-transform: uppercase; }
   div.comment p.spam a { padding: 0 20px 0 0; background: url(../images/icons.png) 100% -78px no-repeat; color: #555; }
  div.comment p { margin: 0 15px 0 70px; line-height: 1.17; }

div.spam { padding: 10px 0 15px 70px; background: url(../images/sep-a.gif) 0 100% repeat-x; }
 div.spam fieldset { margin: 0; padding: 0; }
  div.spam legend { display: block; color: #000; font-size: 1.8em; text-transform: uppercase; }
   div.spam p { margin: 0 0 3px; }
    div.spam label { display: block; margin: 0 0 3px; }
    div.spam textarea { width: 650px; }
  
/* ELEMENTS
------------------------------------------- */
#home { text-align: center; }
  #home h2 span { padding: 0 0 0 30px; background: url(../images/icons.png) 0 100px no-repeat; }

#download { padding-bottom: 5px; }
  #download h2 span { background-position: 0 2px; }

#history { padding-bottom: 5px; }
  #history h2 span { background-position: 0 -35px; }
 #history ol { overflow: hidden; width: 100%; margin: 0 0 15px; padding: 0; }
  #history ol li { float: left; width: 20%; font-size: 10px; }
  #history p.clear a { padding: 2px 0 2px 25px; background: url(../images/icons.png) 0 -75px no-repeat; color: #555; }
  
#bookmarklet { padding-left: 102px; padding-right: 103px; padding-bottom: 10px; text-align: left; }
 #bookmarklet h2 { text-align: center; }
  #bookmarklet h2 span { background-position: 0 -276px; }
 #bookmarklet p { margin: 0 0 5px; font-size: 1.1em; }
 #bookmarklet p.bookmarklet { text-align: center; }
  
#show { padding-bottom: 5px; }
  #show h2 span { background-position: 0 -115px; }
  
#view { overflow: hidden; width: 100%; }
 #view div.movie { float: left; width: 425px; }
  #view div.movie div.video { margin: 0 0 5px; }
  #view div p.get { overflow: hidden; width: 283px; height: 21px; margin: 0 0 15px; padding: 10px; border: 1px solid #aaa; background: #eee; }
  #view div p.get:hover { background-color: #e5e5e5; }
   #view div p.get label { display: inline; float: left; width: 60px; margin: 2px 0 0; color: #000; vertical-align: middle; }
   #view div p.get input { display: inline; float: left; width: 190px; margin: 0 3px; padding: 2px; border: 1px solid #aaa; background: #f9f9f9; vertical-align: middle; }
   #view div p.get input.loading { background: #f9f9f9 url(../images/indicator.gif) 99% 50% no-repeat; }
   #view div p.get a { display: inline; float: right; overflow: hidden; width: 16px; height: 16px; margin: 2px 5px 0 0; background: url(../images/icons.png) 0 -159px no-repeat; text-indent: -10001em; vertical-align: middle; }
 #view div.info { float: right; width: 305px; }
  #view div.info h2 { margin: 0 0 4px; font-size: 2.5em; line-height: 1.2; text-transform: none; }
   #view div.info h2 small { display: block; font-size: 0.5em; }
   #view div.info h2 a { color: #000; text-decoration: none; }
  #view div.info p { margin-left: 0; margin-right: 0; }
  #view div.info div.sense { margin: -5px 0 4px -2px; }
  #view div.info ul.tools { list-style: none; overflow: hidden; width: 100%; margin: 0 0 15px; padding: 0 0 15px; border-bottom: 1px solid #ccc; }
   #view div.info ul.tools li { display: inline; float: left; margin: 0 5px 0 0; font-size: 1em; text-transform: uppercase; }
    #view div.info ul.tools li.a a { float: left; padding: 1px 10px; border: 1px solid #921515; color: #fff; background: #921515 url(../images/bg-a.gif) repeat-x; text-decoration: underline; text-decoration: none; }
    #view div.info ul.tools li.a a:hover { background-position: 0 -5px; }
	#view div.info ul.tools li.b a { float: left; padding: 1px 10px; border: 1px solid #999; color: #333; background: #fff url(../images/bg-b.gif) 0 4px repeat-x; text-decoration: underline; text-decoration: none; }
    #view div.info ul.tools li.b a:hover { background-position: 0 2px; color: #000; }
 #view div.info form.notify { display: block; margin: 0 0 15px; padding: 0 0 15px; border-bottom: 1px solid #ccc; }
  #view div.info p.send { overflow: hidden; width: 283px; height: 21px; margin: 0; padding: 10px; border: 1px solid #aaa; background: #eee; }
  #view div.info p.send:hover { background-color: #e5e5e5; }
   #view div.info p.send label { float: left; width: 60px; color: #000; vertical-align: middle; }
   #view div.info p.send input { float: left; width: 190px; margin: 0 3px; padding: 2px; border: 1px solid #aaa; background: #f9f9f9; vertical-align: middle; }
   #view div.info p.send input.loading { background: #f9f9f9 url(../images/indicator.gif) 99% 50% no-repeat; }
   #view div.info p.send input.done { background: #f9f9f9 url(../images/icons.png) 99% -236px no-repeat; }
   #view div.info p.send input.failure { background: #f9f9f9 url(../images/icons.png) 99% -76px no-repeat; }
   #view div.info p.send button { overflow: hidden; width: 16px; height: 16px; margin: 3px 0 0; border: none; background: url(../images/icons.png) 0 -199px no-repeat; text-indent: -10001em; vertical-align: middle; }
 #view div.info ul.links { list-style: none; margin: -9px 0 0; padding: 0; }
  #view div.info ul.links li { float: left; width: 100%; margin: 5px 0 0; font-size: 1.1em; }
   #view div.info ul.links li a { display: block; padding: 6px; border: 1px solid #ccc; background: #f3f3f3; color: #333; text-align: center; }
   #view div.info ul.links li a:hover { background: #e9e9e9; text-decoration: none; }
  
#getit { overflow: hidden; width: 100%; }
 #getit h2 { margin: -3px 0 15px; padding: 0 0 10px; border-bottom: 1px solid #d4d4d4; font-size: 2.4em; text-transform: none; text-align: center; }
 #getit div.sense { display: inline; float: left; width: 320px; margin: 0 0 0 45px; }
 /*#getit div.screen { display: inline; float: right; width: 320px; margin: 0 45px 0 0; }*/
 #getit div.screen { margin: 0; text-align: center; }
 #getit div.link { clear: both; overflow: hidden; width: 100%; margin: 0 0 15px; padding: 10px 0; border: 1px solid #d4d4d4; border-width: 1px 0; }
  #getit div.link p { display: inline; float: right; width: 320px; margin: 0 45px 0 0; font: 2em "Lucida Sans Unicode",Verdana,sans-serif; text-transform: uppercase; text-align: right; }
  #getit div.link p.first { float: left; margin: 0 0 0 45px; text-align: left; }
 #getit div.info { padding: 0 45px; }
  #getit div.info h3 { float: left; margin: 0 5px 0 0; color: #555; font-size: 1.4em; font-weight: bold; line-height: 16px; text-transform: uppercase; }
  #getit div.info p { font-size: 1.1em; line-height: 16px; }
  #getit div.info h3 + p:first-letter { text-transform: lowercase; }
  #getit div.info p.bookmarklet { padding-left: 20px; font: 1.4em/1 "Lucida Sans Unicode",Verdana,sans-serif; }
   #getit div.info p.bookmarklet a { padding: 0 0 0 30px; background: url(../images/icons.png) 0 -279px no-repeat; }
   
#sign { }
 #sign h2 { padding: 0 0 12px; border-bottom: 1px solid #d4d4d4; text-align: center; }
 
#comments { margin: 15px 0 30px; font-family: "Lucida Sans Unicode",Arial,sans-serif; }
 #comments div.header { overflow: hidden; width: 100%; margin: 0; padding: 0 0 15px; background: url(../images/sep-a.gif) 0 100% repeat-x; }
  #comments div.header h2 { display: inline; float: left; margin: 0 10px 0 0; line-height: 1; }
  #comments div.header p.add { display: inline; float: left; margin: 3px 0 0; font-size: 1em; font-weight: bold; text-transform: uppercase; }
  #comments div.header p.rss { display: inline; float: right; margin: 3px 0 0; font-size: 1em; text-transform: uppercase; }
   #comments div.header p.rss a { padding: 2px 0 2px 25px; background: url(../images/icons.png) 0 -319px no-repeat; }
  #comments div.header ul.paging { margin: 7px 0 0; }
 #comments ul.paging { margin: 20px 0 0; }
 #comments div.sense { background: #fffef1; }
  #comments div.sense div.inner { padding: 10px 0 5px; }
 #comments div.add-comment { margin: 15px 0 0; }
  #comments div.add-comment form { padding: 15px 0 0 } 
   #comments div.add-comment form fieldset { margin: 0; padding: 0; } 
    #comments div.add-comment form fieldset legend { display: none; } 
    #comments div.add-comment form fieldset p { position: relative; margin: 0 0 10px; padding: 0 0 0 200px; } 
    * html #comments div.add-comment form fieldset p { overflow: visible; height: 1%; } 
    #comments div.add-comment form fieldset p.error { color: #b41414; font-weight: bold; } 
     #comments div.add-comment form fieldset p label { position: absolute; left: 0; width: 200px; } 
     #comments div.add-comment form fieldset p.optional label { color: #aaa; } 
     #comments div.add-comment form fieldset p input { width: 350px; } 
     #comments div.add-comment form fieldset p textarea { overflow: visible; width: 530px; height: 90px; } 
     #comments div.add-comment form fieldset p span { display: block; color: #999; font-size: 0.83em; } 
     #comments div.add-comment form fieldset p.area em { font-style: normal; }