body { margin:0px; background:#F9F9F9; }

div.gradient { background-color:#999;
    
    background: linear-gradient(to right, #999, #AAA 5%,  #BBB 10%,  #BBB 90%, #AAA 95%, #999 99%); 
 }

div.wrap { margin:0 auto ; width:1200px; position:relative; background-color:#FFF; } 
div.tableHidden { display:none; visibility:hidden;}

table, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
}


tr.r1 { height:150px; }
tr.r2 { height:600px; }
tr.r3 { height:80px; }

    /* achieve the scaffolding effect with Right- and Bottom- border */
td.brbb { 
    border-right:20px solid #666;
    border-bottom:20px solid #999;
    }
td.foot { 
    text-align:right;
}    
td.r1.c1 { background-color:#EE0; }  

td.c2 { border-right:20px solid #CCC; }  

td.r3.c3 {  border-left:20px solid #666;
            background-color:#E33;
}

/*
td.r2.c1 { border-bottom : 0px }
td.r2.c2 { border-bottom : 0px }
*/

td.vtop  { vertical-align:top;}     
td.vbott { vertical-align:bottom;}
td.glow  { color:#008; }
 
td.txt     { font-family:calibri; font-size:2em; text-align:center;  }
td.txt.la  { text-align:left;  }
td.txt.name { font-size:2.2em; }
td.txt.co   { text-align:left; padding-left:30px;  }


td.rel { position:relative;}


/* ====   DIV Characteristics ===   */

    /* width:100%;*/
div#banner  { font-family:calibri; font-weight:bold;
            
            text-align:center; }
        
div#banner .title {  font-size:2.0em; }
div#banner .chart {  font-size:1.5em;    }
div#banner .strap {  font-size:1.2em; font-style:italic;   }

div.centre { margin:0 auto; }

div.home {
    font-family:calibri; font-size:1.2em;
    margin-left:50px; margin-top:40px; 
    padding:20px; 
    width:600px;
    
        }


div.content {
    font-family:calibri; font-size:1.2em;
    margin-left:50px; margin-top:40px; 
    padding:20px; 
    width:600px;
        }

div.bluefoot {  
    position:absolute;
    bottom:100px;
    width:50px;
    height:200px; 
    background-color:#66E;
        }           

        
div.redfoot {  
    float:right;
    width:100px;
     background-color:#E33;
        }           
        

        /*  position:absolute; 
            bottom:0px; left:100px; 
        */
div#contact { 
    padding:10px;
    padding-bottom:20px;
    font-family:calibri;     font-size:1.0em; 
        
} 





  /* ====   Menu navigation ===   */
div#ribbon {  
        padding:10px;
        font-size:1.2em; 
        font-weight:bold; 
        font-family:calibri;  
        background-color:#333;
        color:#CCC;
        }
        
ul.nav { 
        background-color:inherit;
        list-style: none; 
        margin:0;
        padding:0
    }

     /*  THIS IS KEY  7.5 x 16=120px      	background-color: white;
        border: 0px solid #66C;		/* same as <a> tag in styles.css  66C  7d6340
		border-width: 1px 0;
        background-color: #ccc;
     */
ul.nav li {
        background-color:inherit;
		float: left;
		position: relative;
		width: 7.0em;                         
		text-align: center;		
		cursor: default;	
	}   
ul.nav li.narrow {
        width: 4.0em;
    }
ul.nav li:hover { 
    color:#FFF;
}    

     
       
       


/* =========================  */

ul.links  {  margin:0px; border: 2px dotted red; 
            padding:10px;  
            /*list-style-type: none; */
            }		
ul.links li { 
            padding:10px; 
            font-family:calibri; font-size:1.2em;         
            }
ul.links li:hover { color:blue; }

div#info2 { position:absolute; 
            top:0px; left:100px; 
            height:378px; width:580px; 
            border:1px solid red;
            padding:5px;    
            background:#F9F9F9;
            z-index:20;}

/* ========================== */
div#tooltip                                 { font-size :  0.66em }
#tooltip{
	position: absolute;
	width: 12em;
	border: 1px solid black;
	padding: 5px;
	background-color: #EEC; /* ; EEEEEE99*/
	visibility: hidden;
	z-index: 100;
}