/* Tags (elements) */
/*
submit {
   font-family: arial, 'sans serif';color:navy;
}
*/
h1	{text-align:center; font-size:xx-large; font-family: arial, 'sans serif';color:navy;}
h2	{text-align:center; font-size:x-large; font-family: arial, 'sans serif';color:navy;line-height: 1;}
h3,h4,hr {font-family: arial, 'sans serif';color:navy;}

blockquote {font-family: courier; color: navy;}
p,td {padding-left:12px; padding-right:12px; text-align:justify; font-family: arial, 'sans serif';color:navy;  font-size: small;}
th      {font-size: small;background-color:#FAEBD7}

li,table,address,dd,dt {font-family: arial, 'sans serif';color:navy;  font-size: small;}

sup {font-family: arial, 'sans serif';  font-size:x-small;}

body    {background-color: #ffffff;}

a:link    {color:navy}
a:visited {color:navy}
a:active  {color:red}
a:hover   {color:red}

/* IDs    */

#wrapper {
//    border: 1px solid green;
     width: 100%;
     height: 100%;
     margin: 0 auto;
}
#head {
//    border: 1px solid green;
    width:100%;
    height:160px;
    overflow-y: auto;
    overflow-x: hidden;
    margin:0 auto;
    background: white;
}
/* the following are within the header */
#logo {
    width: 100%;
}
#tabs {
    text-align: center;
//    height: 60px;
    width: 100%;
}
#main{
//    border: 1px solid green;
    width:100%;
    height: 80%;
    margin:0 auto;
    background:#fff;
}
#page{
    overflow-x: scroll;
}

#footer {
    clear:both;
    background:#cc9;
}
#diagbutton {
    border: 1px solid green;
    width: 15%;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: white;
}
#diag {
    border: 1px solid orange;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    background-color: white;
}
#picture-box{
    width: 100%;
    height: 100%;
    position: relative;
}

#picture{
    width: 100%;
    position: absolute;
   top: 10%;
   text-align: center;
   margin-left: [-50% of your image's width];
   margin-top: [-50% of your image's height];
}

/* Classes */
img.album{
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: [-50% of your image's width];
   margin-top: [-50% of your image's height];
}

.leftcolumn, .rightcolumn, .nav, .diag, .diagbutton {
//    border: 1px solid red;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    float: left;
//    min-height: 120px;
    color: white;
}
.nav {
    border: 1px solid red;
    background-color: white;
    width=85%
//    overflow-y: hidden;
}
.leftcolumn {
     width: 20%;
     background-color: white;
}
.rightcolumn {
     width: 80%;
     background-color: white;
}
.lefttab4, .righttab4 {
//    border: 1px solid red;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 100%;
    float: left;
//    min-height: 120px;
    color: white;
}
.lefttab4 {
     width: 20%;
     background-color: white;
}
.righttab4 {
     width: 80%;
     background-color: white;
}

.tiny {  font-size:x-small;  font-family: arial, 'sans serif';  color:navy;}
.footer { font-size:x-small;  font-family: arial, 'sans serif';  color:navy;  background-color:#f0f0f0;  border:1px gray solid;}
td.footer { font-size:x-small;  font-family: arial, 'sans serif';  color:navy;  background-color:#f0f0f0;  border: 0px;}
th.footer { font-size:x-small;  font-family: arial, 'sans serif';  color:navy;  background-color:#f0f0f0;  border: 0px;}
.important { font-size: small; font-family: arial, 'sans serif'; color: red;}
td.important { font-size: small; font-family: arial, 'sans serif'; color: red; border:3px red outset;
                background-color: #F0F0F0; border-collapse: collapse; padding: 5px;}
th.important {background-color:#FAEBD7}


.odisp {
  border:1px orange solid;
  background-color: white;
  border-collapse: collapse;
  padding: 5px;
}
p.odisp,
div.odisp,
th.odisp {background-color:#FAEBD7}

.bdisp { border:1px navy solid; background-color: white; border-collapse: collapse; padding: 5px;}
th.bdisp {background-color:#DFDFDF}
.frame { border:3px threedshadow outset;}

.button { border:3px threedshadow outset;}

img.button:hover { border-color: #FFFF00; border-bottom-width: 4px; border-top-width: 2px; border-left-width: 2px; border-right-width: 4px;}
img.button:active { border-color: threeddarkshadow; border-bottom-width: 2px; border-top-width: 4px; border-left-width: 4px; border-right-width: 2px;}
.popup { border:2px outset; background-color:silver; font-size:smaller; font-family:arial, 'san serif'; color:black;
        width:60%; position:absolute; visibility:hidden; left:0; top:0; overflow:visible;}
h1.popup     {color:black}
h2.popup     {color:black}
h3.popup     {color:black}
hr.popup     {color:black}
p.popup      {color:black}
li.popup     {color:black}
td.popup     {color:black}
th.popup     {background-color:blue; color:white; text-align:left}
a.popup:link    {color:blue}
a.popup:visited {color:blue}

/* member type color code */
.active { font-size: small; font-family: arial, 'sans serif'; font-weight: bold; color: navy;}
.lifetime { font-size: small; font-family: arial, 'sans serif'; font-weight: bold; color: maroon;}
.pending { font-size: small; font-family: arial, 'sans serif'; color: green;}
.expired { font-size: small; font-family: arial, 'sans serif'; color: red;}