body, html {padding:0;margin:0;height:100%;font-family:sansserif,helvetica,arial}
#page {height:100%;}
#head {background-color: #000;color:#eee;height:2em;padding:0.75em;font-weight:bold;}
#head h2 {color:#eee;font-size:150%;margin:0;}

#preview {float:left;width:65%;}
#preview svg {width:100%;}

#ctrls {width:35%;background-color:#eee;display:inline-block;top:3.5em;bottom:0;right:0;position:absolute;border-left: 1px solid #888;}
#settings {padding:0.75em;}
#ctrls ul {list-style-type:none;padding:0;margin:0;}
#ctrls ul li {list-style-type:none;padding:0;margin:0.5em 0;}
#ctrls ul li span{display:inline-block;width:6em;}
#ctrls ul li input {width:5em;}
#ctrls ul li input[type=checkbox] {width:2em;}
#ctrls ul li.pal input {width:6em;}
#ctrls ul li.pal span {display: inline-block;width:6em; }
#bgpalette {font-size:13px;}
#bgpalettepreview {vertical-align:top;font-size:13px;}

.ctlhead {
  font-size:110%;
  font-weight:bold;
  padding:0.5em 1em;
  background: -moz-linear-gradient(white, #F1F1F1) repeat scroll 0 0 #EEEEEE;
  background: -webkit-linear-gradient(white, #F1F1F1) repeat scroll 0 0 #EEEEEE;
  background: linear-gradient(white, #F1F1F1) repeat scroll 0 0 #EEEEEE;
  border-bottom: 1px solid #CCCCCC;
  }
.ctlarea {
  padding:0.5em 1em;
  background: #fff;
  border-bottom: 1px solid #CCCCCC;
  }
#popup
{
position:absolute;
border:1px solid #000;
background:#fff;
z-index:10000;
padding:0px;
font-size:100%;
}

#popup a {display:block;padding:3px 10px;margin:0px;}

#popup a:hover {background:#ddd;}

#ovrly
{
position:absolute;
left:0;
right:0;
top:0;
height:100%;
background:none;
display:none;
z-index:5000;
}