body{
    font: 12px sans-serif;
    background: #000;
     margin: 0;
     padding: 0;
}

h1{ font-size: 180% }
h2{ font-size: 160% }
h3 { font-size: 140%; }
h4 { font-size: 120%; }
h5, h6 { font-size: 100%; }
#outer{
    width: 100%;
    background: url( images/flames1.jpg ) repeat-y;
}

html>body #outer{
    padding: 20px 0;
}

img{ border: none; }

A {
  color: #cc0000;
}

A:hover {
    /* color: #ffff00; */
    background: #ffff00;
/*     background: #FF7F00; */
}

A:visited {
  color: #8B0000;
}

A:active {
 /*  color: #9999FF; */
}

.topcorner, .bottomcorner{
    height: 22px;
}
.topcorner {
    background: url(images/top_blk_grey.gif)
}
.bottomcorner {
    background: url(images/bottom_blk_grey.gif)
}

#container{
    margin-left: 114px;
    margin-top: 20px;
    width: 740px;
}

html>body #container{
    width: 740px;
}

#content{
    padding: 0 80px 0 140px;
    background: #ddd;
    color: inherit;
}

#content h4{
    margin-top: 0;
}

#header
    {
       margin-bottom: 2ex;
       position: relative;
    }
#logo
    {
   width: 432px;
    }
#header #logo h1 span
    {
    display: none;
    }    
#logo h1
    {
    /* was margin-left 154px but had to shrink to make IE look ok! */
    margin: 0;  
    height: 97px;
    background: url(images/tp_4.gif) no-repeat;
    width: 432px;
    }

img.px256 {
    float: right;
    margin: 0 0 1ex 2ex;

}    
    
#w3c_badges{
    position: absolute;
    top: 58px;
    left: 94px;
}   

#w3c_badges a:hover{
    background: inherit;
}

#w3c_badges img{
    margin-bottom: 6px;
}

#footer{
    margin: 2ex 0;
    text-align: center;
    color: #ddd;
    background: inherit;
}


#menu_wrapper{
    position: absolute;
    left: 64px;
    top: 190px;
    width: 140px;
}

#menu_top{
    padding-top: 7px;
    /* if you use height: 7px here IE displays a white space about equal to the 7px in height
    but claims that the whole div is only 7px! */
    /* height: 7px; */
   /*  width: 140px; */
    background: url(images/menu_top_black.gif) no-repeat;
}

#menu_bottom{
   height: 8px;
  /*   width: 140px; */
    background: url(images/menu_bottom_black.gif) no-repeat;
}

#menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #000;
}


#menu ul li{
    font: 18px sans-serif;
    font-weight: bold;
    color: #cc0000;
    padding-left: 6px;
    background: #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
   /* overflow: hidden; */
}

html>body #menu ul li {
  width:132px;
} 

#menu ul li.no_bottom_border{
    display: block;
    border-bottom: none;
}


/* if you just use #menu ul li:hover here, the image will not fill all the
way to the right */
html > body #menu ul li:hover{
    /* this works great, except for IE which only supports :hover on <a> */
  /*   background: url(images/Fire_burns.gif) 10% no-repeat; */
}

#menu ul li a {
    /* this compromise makes image hover on IE look great, but
    degrades look on CSS compliant browsers UNLESS you use the html > body part
    in the above selector */
    display: block;
    padding-top: 6px;
    padding-bottom: 6px;
    background: inherit;
    color: #eee;
    text-decoration: none;
}

#menu ul li a:hover{
    background: url(images/Fire_burns.gif) 10% no-repeat;
}
*.quote{
	font-style: italic;
    text-align: left;
}

#video{
}

.applet{
    position: relative;
    left: -80px;
    margin-right: -110px;
}
/* http://realdev1.realise.com/rossa/rendertest/quicktime.html*/
/* hides the second object from all versions of IE */
* html object.mov {
    display: none;
}
/* displays the second object in all versions of IE apart from 5 on PC */
* html object.mov/**/ {
    display: inline;
}
/* hides the second object from all versions of IE >= 5.5 */
* html object.mov {
    display/**/: none;
}
ul{ list-style-type: none; }
li img{ vertical-align: middle; margin: .2em 0}
.center { text-align: center; }
.copyright { text-align: center; font-size: smaller; color: #555; margin: 1em 0}
.nojava { border: 1px solid #c00; text-align: center; padding: 1em; }