function setmenustyle(selector, rule){

var rulecount;
var fullrule;
var ssheet;
ssheet=(document.styleSheets.length<=0)? document.createStyleSheet() : document.styleSheets[document.styleSheets.length -1];

if( testVar(selector)  && testVar(rule) && rule.indexOf(":")  ){
if(ssheet.insertRule){/* DOM */
rulecount=ssheet.cssRules.length;
fullrule=selector +"{"+ rule +"}";
ssheet.insertRule(fullrule, rulecount++ );
}else if(document.styleSheets[0].addRule){ /* IE */
rulecount=ssheet.rules.length;
if(selector.indexOf(",") >0){
selectors=selector.split(",");
for(var s=0; s< selectors.length; s++){
ssheet.addRule(selectors[s], rule, rulecount++);
}
}else{
ssheet.addRule(selector, rule, rulecount++);
}
}
return true;
}else{
return false;
}
}

function drawColor(){
var a, b, c, f;
var hx = new Array('00', '33', '66', '99', 'CC', 'FF');
document.write("<div id='colorcon'>");
document.write("<div id='colordisp'>Selected Color</div>");
for (var x=0; x <hx.length; x++){
f=hx[x];
  document.write("<a href='#' class='colorspot' style='background-color:#"+f+f+f+";' title='click to select #"+f+f+f+"'><span>.</span></a>\n");   
}
for(var i=0; i < hx.length; i++){
a=hx[i];    
for(var s=0; s < hx.length; s++){
b=hx[s];
  
for(var v=0; v< hx.length; v++){
c=hx[v];
   document.write("<a href='#' class='colorspot' style='background-color:#"+a+b+c+";' title='click to select #"+a+b+c+"'><span>.</span></a>\n");          
}    
}   
}
document.write("</div>");
}

function displayControls(){
if(navigator.cookieEnabled && document.styleSheets && (document.styleSheets[0].addRule || document.styleSheets[0].insertRule)){
document.write(
"<form id='menupref' name='menupref' method='post' action='generatedstyle.php' >"+
"<label for='topbg'>Top level Background color :</label>"+
"<input type='text' name='topbg' id='topbg'  value='#CCC'  onblur=\"setmenustyle('#nav li ','background-color:'+this.value +'!important;')\" /> "+
"<br />"+
"<label for='thbg'>Top level Hover color :</label>"+
"<input type='text' name='thbg' id='thbg'  value='#CCC'  onblur=\"setmenustyle('#nav li:hover, #nav li a:hover ','background-color:'+this.value +'!important;')\" /> "+
"<br />"+
"<label for='lowbg'>Lower levels Background color :</label>"+
"<input type='text' name='lowbg' id='lowbg'  value='#CCC'  onblur=\"setmenustyle('#nav ul li ','background-color:'+this.value +'!important;')\" /> "+
"<br />"+
"<label for='lhbg'>Lower levels Hover color :</label>"+
"<input type='text' name='lhbg' id='lhbg'  value='#CCC'  onblur=\"setmenustyle('#nav ul li:hover, #nav ul li a:hover ','background-color:'+this.value +'!important;')\" /> "+
"<br />"+
"<label for='borc'>Border Color :</label>"+
"<input type='text' name='borc' id='borc'  value='#CCC'  onblur=\"setmenustyle('#nav li ','border:solid 1px '+this.value +'!important;')\" /> "+
"<br />"+
"<input type='radio' name='mtype' id='hor' checked='checked' value='hor' /><label for='hor'>Horizontal</label>"+
"<input type='radio' name='mtype' id='vert' value='vert' /><label for='vert'>Vertical</label>"+

"<input type='submit' value='Generate Styles' />"+
"</form>");
}else{
/* if their browser supports JavaScript but not some of the functions or cookies are disabled then you can output alternative content here.*/
document.write('This should be  controls to style the menu. Unfortunately your browser cannot understand the required functions');
}
}