body
{
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  overflow: hidden;
}

#canvas, #surface
{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  cursor: default;
}

#loading
{
  position: absolute;
  visibility: hidden;
  opacity: 0.6;
  filter: alpha(opacity=60);
  font-family: "Trebuchet MS", "Arial", "Helvetica", sans-serif;
  font-size: 12px;
  background-color: lightgreen;
  border: 1px solid black;
  margin: 2 2 2 2;
  padding: 2 2 2 2;
  width: 100px;
  text-align: center;
  font-style: italic;
  font-weight: bold;
}

.maxi { }

#infobox
{
  position: absolute;
  top: 3px;
  left: 3px;
  text-align: center;
}

#infobox p
{
  margin: 0;
  padding: 0;
}

#infobox span
{
  font-family: "Trebuchet MS", "Arial", "Helvetica", sans-serif;
  font-size: 12px;
}

#infobox span.mini
{
  font-size: 10px !important;
}

span#channeltitle
{
  font-style: italic;
  font-size: 14pt;
  font-weight: bold;
  color: #007FFF;
}

span#channeltitle.mini
{
  font-size: 10px !important;
}

span#channelcaption
{
  color: #007FFF;
  font-size: 10pt;
}

span#channelcaption.mini
{
  font-size: 9px !important;
}

span#viewers, span#painters, span#contributors
{
  font-size: 10px;
}

span#viewers.mini, span#painters.mini, span#contributors.mini
{
  font-size: 8px !important;
}

#logo
{
  border: none;
  width: 150px;
  height: 100px;
}

#toolbox
{
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  margin: 0 0 0 0;
  width: 62px;
  height: 194px;
  background-image: url(toolbox.png);
  background-repeat: no-repeat;
  cursor: pointer;
}

#toolbox.mini
{
  width: 31px !important;
  height: 97px !important;
  background-image: url(toolbox-mini.png) !important;
}

img.tool
{
  position: absolute;
  left: 9px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  width: 40px;
}

img.tool.mini
{
  width: 18px !important;
  left: 4px !important;
}

img#pencil { top: 9px; height: 58px; }
img#pen { top: 67px; height: 36px; }
img#marker { top: 103px; height: 40px; }
img#brush { top: 143px; height: 40px; }

img#pencil.mini { top: 3px !important; height: 29px !important; }
img#pen.mini { top: 32px !important; height: 18px !important; }
img#marker.mini { top: 50px !important; height: 20px !important; }
img#brush.mini { top: 70px !important; height: 20px !important; }

#sizebox
{
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  margin: 0 0 0 0;
  width: 62px;
  height: 72px;
  background-image: url(sizebox.png);
  background-repeat: no-repeat;
  cursor: pointer;
}

#sizebox.mini
{
  width: 31px !important;
  height: 36px !important;
  background-image: url(sizebox-mini.png) !important;
}

img#sizeslider
{
  position: absolute;
  top: 8px;
  left: 8px;
  width: 39px;
  height: 4px;
}

img#sizeslider.mini
{
  top: 4px !important;
  left: 4px !important;
  width: 20px !important;
  height: 2px !important;
}

#palette
{
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 316px;
  height: 62px;
  background-image: url(palette.png);
  background-repeat: no-repeat;
  cursor: pointer;
}

#palette.mini
{
  width: 158px !important;
  height: 31px !important;
  background-image: url(palette-mini.png) !important;
}

#swatch
{
  margin: 0;
  padding: 0;
  position: absolute;
  top: 9px;
  left: 262px;
  width: 40px;
  height: 40px;
}

#swatch.mini
{
  top: 3px !important;
  left: 131px !important;
  width: 20px !important;
  height: 19px !important;
}

#swatchcorner
{
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
}

#swatchcornermini
{
  visibility: hidden;
  width: 20px !important;
  height: 20px !important;
}

a.color, a.tool
{
  padding: 1 1 1 1;
}

a.color:hover, a.tool:hover
{
  text-decoration: underline;
  cursor: pointer;
}

a.color.active, a.tool.active
{
  padding: 0 0 0 0;
  border: 1px dashed red;
}

#sidebox
{
  position: absolute;
  top: 200px;
  left: 0;
  cursor: pointer;
}

img#getyourown
{
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 386px;
  border: 0;
}