body{
  background-color: white;
  font-family: 'lucida grande', helvetica, verdana, arial, sans-serif ;
  overflow: hidden;
  height:0;
}

#caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

/* TOP BAR */

#bar{
  background: white url("Website/background.png") repeat-x;
  width: 100%;
  height:40px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index; 1000;
}

#logo{ position: absolute; top: 3px; left: 20px; }
#controls{ position: absolute; top:7px; right: 20px;}

#bar a{ background-image: url("Website/controls.png"); display: block; float:left; width: 53px; height: 25px; margin-left: 10px;}

#bar #edit{ background-position: 0px 0px;}
#bar #edit:hover, #bar #edit.selected{ background-position: 0 26px;}

#bar #new{ background-position: -59px 0px; margin-left: 40px;}
#bar #new:hover, #bar #new.selected{ background-position: -59px 25px;}

#bar #save{ background-position: -115px 0px; margin-right: 40px;}
#bar #save:hover, #bar #save.selected{ background-position: -115px 25px;}

#bar #browse{ background-position: -172px 0px;}
#bar #browse:hover, #bar #browse.selected{ background-position: -172px 25px;}

#bar #draw{ background-position: -230px 0px; margin-right: 40px;}
#bar #draw:hover{ background-position: -230px 25px;}

#bar #about{ background-position: -285px 0px; width: 23px;}
#bar #about:hover, #bar #about.selected{ background-position: -285px 25px;}



/* SHEET */

.sheet{ position: absolute; top: 40px; left:0px; width: 100%; background-color: #111; opacity: .9; display: none;}
#browseSheet{ height: 150px; display:block; visibility: hidden; background-color: #fff; opacity: 1; border-bottom: #333 solid 1px; z-index: 10;}

#aboutSheet{ height: 600px; color: #ccc; padding-left: 10px; }
#aboutSheet p{ font-size: 80%; width: 500px;}
#aboutSheet h3{ width: 500px;}

#aboutSheet a{ color: white; text-decoration: underline;}
#aboutSheet a:hover{ color: #cc6600; }


#editSheet{ height: 500px; width: 300px;}
#editSheet textarea{ background: none; color: #ccc; border: none; width:100%; height: 100%; font-weight: normal; font-size: 8pt; }
#editSheet.animated textarea{ overflow: hidden;}

#saveSheet{ height: 130px; text-align: center; color: #999; font-size: 16pt; }
#saveSheet .info{ height: 200px; width: 350px;margin-left: 20px; text-align: left; display: inline; ;}
#saveSheet .info input{ font-size: 16pt;}
#saveSheet span{ z-index: 99999; color: #999;}

#saveSheet a{ color: white; text-decoration: underline;}
#saveSheet a:hover{ color: #cc6600; }

#messageSheet{ color: white; text-align: center; z-index: 999999;}

#warningSheet{ color: white; background-color: #e52526; bottom: 0px;}
#warningSheet a{ color: white; }

/* SHEET */

#browser{ padding-top: 25px;}
#browser #leftButton{ position: absolute; z-index: 100; right: 10px; top: 32px; }
#browser #rightButton{ position: absolute; z-index: 100; left: 10px; top: 32px; }


#aiCanvas{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: -10;
}

#namecard{
  position: absolute;
  top: 50px;
  right: 10px;
  font-size: 70%;
  z-index: 0;
}