* {
    padding:0;
    margin:0;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol,
dl, fieldset, address { margin: 1em 2%; }
li, dd { margin-left:2%; }
fieldset { padding: .5em; }

input, button, file, textarea, select {
    border: #000000 1px solid;
    font-size:100%;
}

body {
    margin: 0 auto 2em;
    font-size: 80%;
    font-family: Verdana, georgia, times, "times new roman", serif;
    background-color: #eee;
    background-image: url(/img/page_background.png);
    min-width:24em; max-width:70em;
    position:relative;
    border: 1px solid #666699;
}

xcontainer {
    margin: 0 auto 2em;
    min-width:24em; max-width:70em;
    position:relative;
    border: 1px solid #666699;
}

a:link, a:visited 
{ 
    color: #663300; 
    text-decoration: none;
}

#xcontainer {
    background-color: #eee;
}

#banner {
    position:relative; 
    /*         min-height:20px;  */
    /*         padding:1.4em 0 1em;  */
    background:#cdc7ad url(/img/m31-stripe.jpg) left top; 
    color:inherit; 
}

/* #banner div { */
/*         position:absolute;  */
/*         top:0;  */
/*         right:0;  */
/*         width:150px;  */
/*         height: 70px; */
/*         padding:10px;  */
/*         overflow:hidden; */
/*         background:transparent url(/img/vo.gif) right center no-repeat */
/* } */

#banner h1 
{
    /*    font:small-caps "Lucida Sans Unicode",Arial,Helvetica,sans-serif;  */
    font-family:small-caps "Lucida Sans Unicode",Arial,Helvetica,sans-serif; 
    letter-spacing:0.05em;
    margin: 0;
    margin-left: 1em; 
    padding:0.3em; 
    /*    background: url(images/m31-stripe-2.jpg) -20px -1em no-repeat; */
    color:#ffe; 
    font-size:1.8em; 
    font-weight: normal;
    letter-spacing:0.15em; 
    line-height:1;
    border: 0;
}

#banner h1 a{
    color: #ffe;
}

#banner img {
    position:absolute; 
    top:0.5em; 
    right:0.5em; 
    height: 2.5em;
}

#navbar-right {
    float: right;
    text-align: right;
    vertical-align: text-bottom;
    font-size: 90%;
    color: white; background-color: black;
}

#navbar-right a {color: #fee; font-weight: bold; background-color: black;}

#navbar ul, #navbar li{
    padding: 0;
    margin:0;
}

#navbar {
    background:#cdc7ad url(/img/m31-stripe.jpg) left top repeat;
    color: #ffe;
    text-align: left;
}

#navbar span {
    background: #000;
    font-size: 90%;
}

#navbar div {
    background-color: #666699;
    text-align: center;
}

#navbar li { 
    display: inline;
    list-style-type: none;
}

#navbar li.selected  { 
    font-weight: bold;
}

#navbar a { 
    padding: 3px 10px; 
    color: #ffe;
}

#navbar a:link, #navlist a:visited
{
    color: #fff;
    text-decoration: none;
}

#navbar a:hover
{
    color: #ddd;
    text-decoration: none;
}


#menu
{
    float: left;
    width: 160px;
    /* padding: 1em; */
}

#menu ul li {
    margin-left: 0;   
    padding: 0px 10px;
    list-style: none;
}

div#content
{
    margin-left: 170px;
    margin-right: 10px;
    line-height: 120%; 
    padding: 1em;
}


div#footer
{
    clear: both;
    padding: .5em 1em;
    border-top: 1px solid #999;
    text-align: center;
}

#content h1 {color: #333399;}
#content h2 {color: #333399;}
#content h3 {color: #333399;}
#content h4 {color: #333399;}
#content h5 {color: #333399;}

#content ul {list-style-type: circle;}

.error {color: red}
.message {color: green}
.tip {font-size: smaller; font-style: italic; color: gray}
.nowrap {white-space: nowrap; vertical-align: top;}
.toggle {color: blue; font-size: smaller; vertical-align: baseline; margin: 5px;}
.action {color: green; font-size: smaller; vertical-align: baseline; margin: 1px; padding: 0;}
.code {margin: 5px; border: 1px dotted gray; padding: 5px; background-color: #e0e0f0; color: darkblue; font-size: smaller;}

/* Dictionary */
#alphabet {
    margin-bottom: 1em;
}

span.wordName {
    font-size: 100%;
    font-weight: bold;
}

span.wordNameError {
    font-size: 100%;
    color: red;
}

p.letterName {
    font-size: 100%;
    font-weight: bold;
}

.letterList table {
    width: 100%;
    vertical-align: top;
}

.letterList tr {
    vertical-align: top;
    width: 100%;
}

.letterList td {
    vertical-align: top;
    width: 33%;
}