html{
  width:100%;
  height:100%;
}
body{
  margin:0;
  width:100%;
  height:100%;
  background:#D9F1FB;
}

#halfviz{
/*  float:left;*/
  position:absolute;
  top:56px;
  left:10px;
  right:10px;
  bottom:10px;
  padding:0 10px;

  background:#fffff3;
  border-radius:4px;
  z-index:1;
}

#viewport{
  background:white;
/*  position:absolute;*/
/*  top:10px;*/
/*  left:270px;*/
/*  margin:10px 0;*/
}


#editor{
	position:absolute;
	right:10px;
	top:0;
	width:150px;
	bottom:10px;
	overflow:hidden;
	border:1px solid #ccb;
	padding-left:0px;
	background:white;
}

#editor textarea{
  position:relative;
  display:block;
  width:100%;
  min-width:150px;
  height:100%;
  border:0;
  padding:0 0 0 2px;
  margin:0;
  resize:none;
}

#grabber{
  position:absolute;
  background:#b3bcb0;
  width:8px;
  top:0px;
  bottom:10px;
  left:800px;
}

#grabber:hover{
  cursor:col-resize
}

a.update{
  margin:0;
  background:#443;
  padding:9px 8px 7px 8px;
  height:18px;
  clear:both;
  display:none;
  text-decoration:none;
  font:12px Arial, sans-serif;
  color:white;
  vertical-align:bottom;
  min-width:100px;
}

#dashboard{
	position:fixed;
	height:55px;
	top:10px;
	left:10px;
	right:10px;
    background:#0082B6;
//	background:#0082B6 url(about.png) 10px 8px no-repeat;
//	background:#eeeee2 url(about.png) 10px 8px no-repeat;
	border-radius:4px;
	padding:0;
}

#dashboard a.about{
  background:#0082B6 url(about.png) 0px 0px no-repeat;
  position:absolute;
  display:block;
  top:10px;
  left:10px;
  width:88px;
  height:33px;
  text-indent:-9999px;
  vertical-align:bottom;
  text-decoration:none;
  color:#666;
  font:10px/20px Arial, sans-serif;
  text-transform:uppercase;
}

#dashboard a.about .popup{
  display:none;
  text-decoration:none;
}

#dashboard a.about .popup img{
  position:absolute;
  top:-10px;
  left:33px;
  padding:0;
  border:0;
  margin:0;
}

#dashboard a.about.active:hover .popup{
  position:absolute;
  width:100%;
  height:20px;
  left:-2px;
  bottom:-35px;

  z-index:2;
  text-indent:0;
  text-align:center;
  text-decoration:none;
  color:white;
  background:#554;
  border-radius:4px;
  display:block;
}
  
  
#dashboard a.about2{
  background:#0082B6 url(about.png) 0px 0px no-repeat;
  position:absolute;
  display:block;
  top:10px;
  left:310px;
  width:88px;
  height:33px;
  text-indent:-9999px;
  vertical-align:bottom;
  text-decoration:none;
  color:#555;
  font:10px/20px Arial, sans-serif;
  text-transform:uppercase;
}

#dashboard a.about2 .popup{
  display:none;
  text-decoration:none;
}

#dashboard a.about2 .popup img{
  position:absolute;
  top:-10px;
  left:333px;
  padding:0;
  border:0;
  margin:0;
}

#dashboard a.about2.active:hover .popup{
	position:absolute;
	width:100%;
	height:20px;
	left:-2px;
	bottom:-35px;
	z-index:2;
	text-indent:0;
	text-align:center;
	text-decoration:none;
	color:white;
	background:#222;
	border-radius:4px;
	display:block;
  /*  overflow:hidden;*/
}

/*#dashboard a.about:hover{
  text-decoration:underline;
}
*/
#dashboard a.help{
  display:block;
  float:right;
  background:url(help-button.png) top left;
  width:22px;
  height:22px;
  margin:16px 14px 0 60px;
  text-indent:-66px;
  vertical-align:bottom;
  text-decoration:none;
  color:white;
  font:12px/30px Arial, sans-serif;
}
#dashboard a.help:hover{
  background:url(help-button.png) -22px left;
  text-decoration:underline;
}



/* still needed? */
#dashboard img{
  padding:0;
  margin:10px 0 0 10px;
  float:left;
  vertical-align:bottom;
}

#dashboard .controls{
/*  float:left;*/
  font:12px/32px Arial;
  margin:0 0 0 120px;
}

#dashboard .controls li{
  list-style-type:none;
  float:left;
  margin:6px 30px 0 0;
}

#dashboard .controls li span{
  font:32px Arial;
  margin-left:4px;
}

.frob,
.adjusting:hover{
  cursor:col-resize;
}

.frob.adjusting{
  color:#C98300;
}

.frob.huge{
  color:#AA4A02;
}

.frob.tiny{
  color:#C1BE85;
}

.toggle{
  cursor:pointer;
}

.io{
/*  position:absolute;*/
/*  right:10px;
  top:30px;
*/
  margin-left:-1px;
  padding:2px 1px 2px 0;
  font: 10px/16px Arial, sans-serif;
  color:#666;
  height:17px;
  width:100%;
  background:#333;
  overflow:hidden;
}


.io .ctrl a.syntax{
  float:right;
}
.io .ctrl a{
  margin:0px 8px;
  color:#ddd;
  text-decoration:none;
}

.io .ctrl .examples{
  float:right;
}
.io .ctrl .examples span{
  background:url(down-up-arrow.png) no-repeat;
  margin-left:1px;
  width:10px;
  height:5px;
  display:inline-block;
}

.io .ctrl .examples.selected span{
  background:url(down-up-arrow.png) 0 -5px no-repeat;
}

.io .ctrl .save{
  color:#ddd;
}

.io .ctrl .save.active{
  color:#cd0;
}
.io .ctrl .save.active:hover{
/*  color:#3bcad1;*/
  text-decoration:underline;
}

/*.io .success{
  position:absolute;
  top:-30px;
  left:0;
  z-index:20;
}*/

.io .dialog{
  position:absolute;
  background:rgba(0,0,0,.85);
  width:100%;
  min-width:150px;
  padding:0 10px 10px 10px;
  margin:0;
  z-index:10;
  display:none;
  color:#666;
  list-style-type:none;
}

.io .dialog h1{
  margin:10px 0 4px 0;
  padding:0;
  font:14px Arial, sans-serif;
}

.io .dialog li:first-child{
  margin-top:10px;
}

.io .dialog a.active{
  color:white;
  font-weight:bold;
}

.io .dialog a{
  color:#ddd;
  text-decoration:none;
}

.io .dialog a:hover{
  color:white;
  text-decoration:underline;
}

#rtfm{
  position:fixed;
  top:0;
  left:0;
/*  background:#554;*/
  background:rgba(0,0,0,.85);

  width:200px;
/*  height:240px;*/
  z-index:11;
  border-radius:4px;
  display:none;
  color:white;
  font:10px Arial, sans-serif;
  overflow:auto;
}

#rtfm h1{
  margin:0;
  padding:4px 0;
  width:100%;
  background:#44443f;
  color:white;
  font-size:10px;
}
#rtfm h1:hover{
  cursor:move;
}
#rtfm h1 span{
  color:#ccb;
  margin-left:12px;
  text-transform:uppercase;
}

#rtfm h1 a{
  color:white;
  font:bold 12px Arial;
  float:right;
  margin:0px 6px 0 0;
  text-decoration:none;
}

#rtfm h2{
  font-size:14px;
  font-weight:normal;
  margin:11px 0 9px 9px;
  padding:0 2px;
}

#rtfm h2 a{
  color:#998;
  margin-right:8px;
  text-decoration:none;
}

#rtfm h2 a:hover{
  color:#ccb;
}
#rtfm h2 a.active{
  color:white;
}

#rtfm h3{
  font:10px/18px Arial;
  margin:15px 12px 0 12px;
  text-transform:uppercase;
}

#rtfm p{
  font:12px/18px Arial;
  margin:6px 0 6px 12px;
  width:85%;
}
#rtfm p code{
  color:#cd0;
}

#rtfm code.block{
  display:block;
  color:#cd0;
  margin:6px 12px 8px 13px;
}

#rtfm code em{
  color:#fbac41;
  line-height:15px;
  font-style:normal;
}

#rtfm code b{
  font-weight:normal;
  color:#ddd;
}

#rtfm .tfs div{
  display:none;
}

#rtfm .tfs .basics{
  display:block;
}

#intro{
  position:fixed;
  top:68px;
  left:20px;
  z-index:2;
  display:none;
  padding:0px 20px;
  max-width:270px;
  font:14px/18px "Times New Roman", serif;
  background:#0082B6;
  //background:#eeeee2;
  border-radius:4px;
}


#intro h1{
  font:10px/18px Arial;
  margin:15px 6px 8px 0;
  text-transform:uppercase;
}
#intro h1 a{
  float:right;
  text-decoration:none;
  color:black;
  font-size:16px;
}
#intro p{
  margin:0 0 1em 0;
}

#intro p a{
  color:#D36E00;
  text-decoration:none;
}
#intro p a:hover{
  text-decoration:underline;
}
  
  
  
#intro2{
  position:fixed;
  top:68px;
  left:320px;
  z-index:2;
  display:none;
  padding:0px 20px;
  max-width:270px;
  font:14px/18px "Times New Roman", serif;
  background:#0082B6;
  //background:#eeeee2;
  border-radius:4px;
}


#intro2 h1{
  font:10px/18px Arial;
  margin:15px 6px 8px 0;
  text-transform:uppercase;
}
#intro2 h1 a{
  float:right;
  text-decoration:none;
  color:black;
  font-size:16px;
}
#intro2 p{
  margin:0 0 1em 0;
}

#intro2 p a{
  color:#D36E00;
  text-decoration:none;
}
#intro2 p a:hover{
  text-decoration:underline;
}