#container {
position: relative;
margin-left : auto;
margin-right : auto;
margin-top: 10px;
width: 600px;
border-width: 0;
background : url(back.jpg); 
background-repeat:repeat-y;
}

#content { 
border-width : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom: 0px;
border-style : solid;
border-color : white;
width : 450px;
padding: 75px;
}

body  {
color : #869daa;
margin : 0;
font-size: 10px;
font-family: Lucida Sans, Lucida Grande, sans-serif;
background : #e6e0c6;
line-height : 10px;
background-image:url(pattern.jpg); background-repeat:repeat
}

.navi  {
margin-left: auto;
margin-right: auto;
border: 0;
color : #869daa;
font-size: 12px;
text-align: center;
font-family: Lucida Sans, Lucida Grande, sans-serif;
font-weight : bold; 
margin-bottom: 5px;}

blockquote, li {
padding-top: 5px;
padding-bottom : 5px;
padding-left : 10px;
padding-right : 5px;
text-decoration : none;
border-width : 0px;
margin : 5px;
}
.noborder {
border-width: 0;
margin: 0;
padding: 0;
}

#navi {
border-width: 0;
margin: 1px;
}
#content img {
border-width: 0;
margin: 2px;
}
A:link  {
color : #869daa;
text-decoration : none;
cursor :  crosshair;
font-weight : bold; 
}

A:visited  {
color : #869daa;
text-decoration : none;
cursor :  crosshair;
font-weight : bold; 
}

A:hover  {
color : #c0c0c0;
text-decoration : none;
cursor :  crosshair;
font-weight : bold; 
}

A:active  {
color : #c0c0c0;
text-decoration : none;
cursor :  crosshair;
font-weight : bold; 
}

fieldset {
border: 1px solid #5d6b78;
margin: 15px 0 0 0;
padding:10px; }
h1  {
font-size : 14pt;
border-bottom-width : 1px;
border-top-width : 0px;
border-right-width : 0px;
border-left-width : 0px;
font-weight : bold;
text-align: left;
border-color : #5d6b78;
border-style : solid;
padding : 3px;
text-transform: uppercase;
font-family: Lucida Sans, Lucida Grande, sans-serif;
margin-top: 15px;
}

input , textarea, select, option {
color : #869daa;
background : transparent;
font-size : 7.5pt;
font-weight : normal;
text-decoration : none;
text-align : left;
border-width : 1px;
border-style : solid;
border-color : #869daa;
}
    
.about
{
  background-image:url(about.jpg);
width:72px;
  height:49px; margin: 0; padding:0;
  display:block;
float : left;
margin-left: 83px;
}
.about:hover, .navi-news:active, .navi-news:focus
{
  background-image:url(about_active.jpg);
}

.codes
{
  background-image:url(codes.jpg);
width:77px;
  height:49px; margin: 0; padding:0;
  display:block;
float : left;
}
.codes:hover, .navi-news:active, .navi-news:focus
{
  background-image:url(codes_active.jpg);
}

.join
{
  background-image:url(join.jpg);
width:72px;
  height:49px; margin: 0; padding:0;
  display:block;
float : left;
}
.join:hover, .navi-news:active, .navi-news:focus
{
  background-image:url(join_active.jpg);
}

.list
{
  background-image:url(list.jpg);
width:74px;
  height:49px; margin: 0; padding:0;
  display:block;
float : left;
}
.list:hover, .navi-news:active, .navi-news:focus
{
  background-image:url(list_active.jpg);
}

.extra
{
  background-image:url(extra.jpg);
width:78px;
  height:49px; margin: 0; padding:0;
  display:block;
float : left;
}
.extra:hover, .navi-news:active, .navi-news:focus
{
  background-image:url(extra_active.jpg);
}

.clear
{
  background-image:url(clear.jpg);
width:71px;
  height:49px; margin: 0; padding:0;
  display:block;
float : left;
}
.clear:hover, .navi-news:active, .navi-news:focus
{
  background-image:url(clear_active.jpg);
}