/* body is right up against the window */
body {
    margin: 0em;
}

/* header is the grey header bar */
.header {
   background-color: #CCCDC8;
   margin: 0;
   height: 104px;
}

/* header2 is the grey header bar for pages with two-level menus */
.header2 {
   background-color: #CCCDC8;
   margin: 0;
   height: 125px;
}

/* title is the "ClosetCoon" name */
.title {
   position: absolute;
   font-size: 36pt;
   margin: 0;
   padding: 0;
   top: 1px;
   left: 12px;
}

/* logo positions the Aiden logo at the upper right */
.logo {
    position: absolute;
    right: 2px;
    top: 2px;
}

/* #menubar is the top menu span; #menubar2 is the second 
 * if the page has two levels of menu
 */
#menubar {
    position: absolute;
    top: 75px;
    left: 12px;
}

#menubar2 {
    position: absolute;
    top: 101px;
    left: 12px;
    height: 24px;
}

/* menu is the class of indiviual items 
 */
.menu {
   background-color: #CCCDC8;
   font-family: sans-serif;
   color: #000000;
   padding-right: 2px;
   padding-left: 2px;
   padding-bottom: 6px;
}

.menu:hover {
    color: #0000FF;
}

/* content is the id for the content pane. content2 is the id
 * to use if the page has two level menus 
 */
#content {
    background-color: #FFFFFF;
    color: #000000;
    top: 6.7em;
    left: 5px;
    margin-left: 0.5em;
    margin-right: 16em;
}

#content h1 {
    font: 130% arial;
    border-bottom: 2px dotted #CCCDC8;
}

#content p {
    font-family: arial;
}

#content td {
    font-family: arial;
}

#content a:link {
    color: red;
}

/* two-level menu content 
 */
#content2 {
    background-color: #FFFFFF;
    color: #000000;
    top: 8.0em;
    left: 5px;
    margin-left: 0.5em;
    margin-right: 16em;
}

#content2 h1 {
    font: 130% arial;
    border-bottom: 2px dotted #CCCDC8;
}

#content2 p {
    font-family: arial;
}

#content2 td {
    font-family: arial;
}

#content2 a:link {
    color: red;
}

/* nav is the aux nav pan on the right. use nav2 is there are two
 * levels of menu 
 */
#nav {
    position: absolute;
    background-color: #FFFFFF;
    top: 6.7em;
    right: 1em;
    width: 16em;
}

#nav a:link {
    color: red;
}

#nav h1 {
    font: 130% arial;
    border-bottom: 2px dotted #CCCDC8;
}

#nav li {
    background-color: #FFFFFF;
    color: #000000;
    font-family: arial
}

#nav .item {
    background-color: #FFFFFF;
    color: #000000;
    font-family: arial
}

/* nav pane w/ two level menus
 */
#nav2 {
    position: absolute;
    background-color: #FFFFFF;
    top: 8.0em;
    right: 1em;
    width: 16em;
}

#nav2 a:link {
    color: red;
}

#nav2 h1 {
    font: 130% arial;
    border-bottom: 2px dotted #CCCDC8;
}

#nav2 li {
    background-color: #FFFFFF;
    color: #000000;
    font-family: arial
}

#nav2 .item {
    background-color: #FFFFFF;
    color: #000000;
    font-family: arial
}

/* strip page table formatting */
.page {
    width: 4.25em;
}

.date {
    width: 4.5em;
    text-align: center;
}

/* styles for the bio pages */
.bioshot {
    float: left;
    vertical-align: top;
    margin-top: 5px;
}

.biocat {
    font-weight: bold;
    font-size: 90%;
}

.biodata {
    font-size: 90%;
}

/* oekaki */
#oekaki {
    position: absolute;
    top: 104px;
    background-image: url('http://www.raccoony.com/closetcoon/closetcoon/images/flowerbg.gif');
    background-color: red;
    color: white;
}

#oekaki h1 {
    text-align: center;
    font-size: 120%;
    font-family: arial;
}

#oekaki p {
    font-size: 90%;
    font-family: arial;
}

#oekaki table {
    width: 100%;
}

#oekaki td { 
    text-align: center;
    font: 90% arial;
    width: 33%;
    padding-left: 1em;
    padding-right: 1em;
}

#oekaki a {
    color: white;
}

#oekaki .help {
    color: white; 
    text-align: center;
}

#oekaki .help a {
    color: white; 
}

#oekaki .donate {
    color: white; 
    text-align: center;
}

#oekaki h2 {
    font: 100% arial bold;
}