html {
	margin: 0px;
	padding: 0px;
	}

/* basic elements */
body { 
 font: 12pt/14pt verdana; 
	color: #000000; 
	background: url(graphics/Mat2.gif); 
	margin:0; 
	padding:0;     
	text-align:center;
 min-height: 100%;
	}

P {
	width: 90%;
    margin-left: 0.1in;
	margin-right:0.25in;
    font: 11px verdana; 
	text-align: left; 
}

P.quote {
  font-family: "Berthold Script Regular",script;
  font-size: large;
}

TD {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

a {color: #990000;}

/* Displays a border in IE, ignored by Gecko */
/* Gecko offsets the box weirdly if you specify px for border, but
ignores the setting entirely if you provide no units. Thus we could
have a border in IE, but not in Gecko. -- Is this only true one
Windows. Firefox on Linux seems to just ignore with px for units */
/*a#subsec { border: 3px; solid #736d4d; padding 1;}*/

hr {
	width: 80%; border: 1;
	height: 1; /* 'size' is not supported, see http://www.sovavsiti.cz/css/hr.html */
}

/* Title */
h1#title { 
  /*  width: 100%; /* Width 100 makes it ALL the way to viewport's edge! */
  background-color: transparent;
               
  margin: 0px 0 1px 0;
  padding: 0;  

  /*border-top: 1px solid #949181;
  border-left: 1px solid #949181;
  border-bottom: 1px solid #5e5b4b;
  border-right: 1px solid #5e5b4b;*/
 }
h1#title img {
  	border: 0;
    margin: 10px 0 0px 0;
	vertical-align: top;  
}

h1#watermark {
}

h1#watermark img{
	width:770px;
	text-align:right;
	margin-left:auto;
	margin-right:auto;
}

/* These are the divs for making sectional heading, which look exactly the
   same as the transparent PNGs so painfully created */
/* Use heading tag because this is the "heading" for this section, and will make sense if style removed */

h1#section { 
  /*  width: 100%; /* Width 100 makes it ALL the way to viewport's edge! */
  text-align: right;
  background-color: transparent;
  
  color: #990000;
  font-family: Verdana;
  font-size: 13pt;
  font-weight: bold;
  letter-spacing: 0.05em;
    
  padding: 0.05em 0.25em 0.05em;
  
  margin: 0px 0px 1px 1px;

  border-top: 1px solid #949181;
  border-left: 1px solid #949181;
  border-bottom: 1px solid #5e5b4b;
  border-right: 1px solid #5e5b4b;
}

h1#comment { 

  color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
  font-weight: normal;

    
}



/* specific divs */
#container { 
	background:#fff url(graphics/container_bg.gif) repeat; 
	width:770px;
	text-align:left;
    margin: 10px;
	margin-left:auto;
	margin-right:auto;
}

#kanji { 
	background: transparent url(images/aikidokanji.png) no-repeat; 
	width:770px;
	text-align:right;
	margin-left:auto;
	margin-right:auto;
}  

#footer {
	text-align:center;
	margin: 10px 40px 0 335px;
	padding-bottom:10px;
	width: 365px;
	font: 10px verdana;
}

/* Navbar */

.navbar { 
  text-align: left;
  width: 120px;
  position: relative;
  top: 0px;              
  font-family: verdanda;
  font-size: 13pt;
  font-weight: bold;
  letter-spacing: 0.0em;      

  margin: 0;
  padding-left: 40px;  
}
.navbar a:link,
.navbar a:visited,
.navbar a:hover {
  display: block;
  color: #990000;
  text-decoration: none;
}
.navbar a:link,
.navbar a:visited {
  /*border-top: 1px solid #949181;
  border-left: 1px solid #949181;
  border-bottom: 1px solid #5e5b4b;
  border-right: 1px solid #5e5b4b;*/
}
.navbar a:hover {
  border-bottom: 1px solid #949181;
  border-right: 1px solid #949181;
  border-top: 1px solid #5e5b4b;
  border-left: 1px solid #5e5b4b;
}           
.navbar img {
   background: transparent url(signature.var1-small.png) no-repeat;
  	border: 0;
	vertical-align:top;  	
}

        
 subsecmenu class was inspired by these two articles:

http://www.sovavsiti.cz/css/horizontal_menu.html
http://www.sovavsiti.cz/css/w3c_buttons.html

e.g. Left hand aligned menu

<!-- We tailor the width of the table so it just surrounds are buttons.
     It needs to be adjusted as we add more! Add border to the table to see how big it is -->
<table width="78%">
<tr><td align="center">
	<div class="subsecmenu">
      <ul>
        <li><a href="#Schedule">Schedule</a></li>
        <li><a href="#Location">Location</a></li>
        <li><a href="#Instructors">Instructors</a></li>
        <li><a href="#Dues">Dues</a></li>
      </ul>      
	   <br clear="left">                      
	</div>
</td></tr>
</table>
<hr/>                  

Only major drawback of this design is that you can't have it centrally alighned, which
is why we have the hack with the table above.
	     

    .subsecmenu {
      /*  width: 100%; /* Width 100 makes it ALL the way to viewport's edge! */
      margin: 0 0; /* The first digit here is the upper margin */
      padding: 0;
          }
    .subsecmenu ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    .subsecmenu li {
  width: 8em; /* This adjusts fixed width of menu buttons */
  font-family: arial,sans-serif;
  font-size: 11pt;
  font-weight: bold;
  /*vertical-align: center; */  
      margin: 0;
      padding: 0;
      float: right;
      margin-right: 0; /* Use this to add spaces between the buttons, e.g. 1em */
      text-align: center;
    }
    .subsecmenu a {
      display: block;
      text-decoration: none;
    	background-color:transparent ;
		color: #990000;
		      }
    .subsecmenu a:link,visited,hover {
      }
.subsecmenu a:link,
.subsecmenu a:visited {
  border-top: 1px solid #949181;
  border-left: 1px solid #949181;
  border-bottom: 1px solid #5e5b4b;
  border-right: 1px solid #5e5b4b;
}
.subsecmenu a:hover {
  border-bottom: 1px solid #949181;
  border-right: 1px solid #949181;
  border-top: 1px solid #5e5b4b;
  border-left: 1px solid #5e5b4b;
}       

/* This subsecbutton style creates a vertical set of buttons, and could be used for a banner in the future*/
/* e.g.
      
<div>
<div class="subsecbutton">
  <a href="#Schedule">
    <span class="spec">Schedule</span>
  </a>
  <a href="#Location">
    <span class="spec">Location</span>
  </a>
  <a href="#Instructors">
    <span class="spec">Instructors</span>
  </a>
</div>
</div>
*/

.subsecbutton {
  margin: 1em 0;
  width: 9em;
  font-family: arial,sans-serif;
  font-size: 70%;
  font-weight: bold;
  /*vertical-align: center; */  
}
.subsecbutton a {
  display: block;
  width: 100%;
}
.subsecbutton a:link,
.subsecbutton a:visited,
.subsecbutton a:hover {
  background-color: #7b7868;
  color: #fefefe;
  text-decoration: none;
}
.subsecbutton a:link,
.subsecbutton a:visited {
  border-top: 1px solid #949181;
  border-left: 1px solid #949181;
  border-bottom: 1px solid #5e5b4b;
  border-right: 1px solid #5e5b4b;
}
.subsecbutton a:hover {
  border-bottom: 1px solid #949181;
  border-right: 1px solid #949181;
  border-top: 1px solid #5e5b4b;
  border-left: 1px solid #5e5b4b;
}       
        


/* The secbar style creates a vertical bar as a page title */
/* THIS IS NOT USED */    
.secbar {
  margin: 1em 0;
  width: 9em;
  font-family: arial,sans-serif;
  font-size: 70%;
  font-weight: bold;
  /*vertical-align: center; */  
}
.secbar a {
  display: block;
  width: 100%;
}
.secbar a:link,
.secbar a:visited,
.secbar a:hover {
  background-color: #7b7868;
  color: #fefefe;
  text-decoration: none;
}
.secbar a:link,
.secbar a:visited {
  border-top: 1px solid #949181;
  border-left: 1px solid #949181;
  border-bottom: 1px solid #5e5b4b;
  border-right: 1px solid #5e5b4b;
}
.secbar a:hover {
  border-bottom: 1px solid #949181;
  border-right: 1px solid #949181;
  border-top: 1px solid #5e5b4b;
  border-left: 1px solid #5e5b4b;
}       
/* THIS IS NOT USED */