.variable { color: DarkOliveGreen  }
.command { color: Sienna; }
.quote { color: blue }
.comment { color: red}
.error{ background: LightSalmon }
.instproc , .proc, .global { color: Olive; } 
.ext:link { font-weight:bold; text-decoration: none; }
.ext:visited {font-weight:bold; text-decoration: none; }
.ext:active {font-weight:bold; text-decoration: none; }
.ext:hover {text-decoration: underline; }
.variable[data-type] { font-weight:bold; }
pre a:link  { text-decoration: none; }
pre a:hover { text-decoration: underline; }

.search {
	background:url(images/search.png) no-repeat;
	display:inline-block;
	height: 16px;
	width: 16px;
}

a.static:before {
	content: "s";
	color: red;
	font-weight:bold;
	vertical-align: super;
}
:target:before
{
	content: ">>";
	background: yellow;
	border:3px solid #FFCC99;
}

/*  http://www.impressivewebs.com/pure-css-tool-tips/ */

.variable[data-type], .error[data-type]  {
	position: relative
}
   
 .variable[data-type]:after {
    content: attr(data-type);
	position: absolute;
    top: -30px;  
    left: 26px;  
    color: white;
    background: #0090ff;
    padding: 5px 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    white-space: nowrap;
    visibility: hidden;
 }
 
 .error[data-type]:after {
    content: attr(data-type);
	position: absolute;
    top: -5px;  
    left: 26px;  
    color: white;
    background: LightSalmon;
    padding: 5px 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    white-space: nowrap;
    visibility: hidden;
    z-index: 4000;
 }

.variable[data-type]:hover:after, .error[data-type]:hover:after {
	visibility: visible;
}

/* tree view - based on jquery tree view plugin */

.hita {
    background: url(images/treeview-default.gif) -16px -89px no-repeat;
	height: 16px;
    width: 16px;
    cursor: pointer;
	float: left;
}

.hitclosed {
	background-position: -48px -47px;
}

ul.te li {
	margin: 0;
    padding: 3px 0pt 3px 16px;
	background: url(images/treeview-default-line.gif) 0 0 no-repeat; 
}


ul.te li:last-child, ul.tv li:last-child  { 
  background-position: 0 -1766px 
}

ul.tv, ul.te { 
    padding: 0;
    margin-left: 8px;
    list-style: none;
}


/* variables hover hightlighting */

.marked {
	background-color: yellow;
}

/* backreferences search */
/* inspired by http://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3 */

#sdialog {
    /* css3 drop shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    /* css3 border radius */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    background:#eee;
    /* styling of the dialog box, i have a fixed dimension for this demo */
    width:328px; 
     
    /* make sure it has the highest z-index */
    position:absolute; 
    z-index:5000; 
 
    /* hide it by default */
    display:none;
}

a.button {
    /* styles for button */
    margin:10px auto 0 auto;
    text-align:center;
    display: block;
    width:50px;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
     
    /* button color */
    background-color: #e33100;
     
    /* css3 implementation :) */
    /* rounded corner */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    /* drop shadow */
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     
    /* text shaow */
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
     
}
 
a.button:hover {
    background-color: #c33100;  
}