body {
    margin: 20px;
    padding: 0px;
    background: #FFF;
    font: 16px arial, sans-serif; 
    color: #999; /* gray */
}

h1, h2, h3 {
    color: #999; /* gray */
}
   
pre {text-indent: 30px}

/* navigation stuff */

/*
a#home {
    color: #6E800E;
    text-decoration: none; 
}
*/

#navigation {
    width: 800px;
    color: #000;
    /* border-bottom: 1px solid black; */ /* top line */
    margin: 10px 0px 0px 0px;
    /* margin: 10px 0px 10px 0px; */
    padding: 0px;
    z-index: 1;
    padding-left: 10px 
}

#navigation li {
    display: inline;
    overflow: hidden;
    list-style-type: none; 
}


/* bounding boxes for tab */

/* general navigation link layout */
#navigation a {
    background: #FFF;
    font: bold 1em "Trebuchet MS", Arial, sans-serif;
    padding: 1px 5px 0px 5px;
    margin: 0px;
    text-decoration: none; 
    position: relative;  /* for IE to hasLayout=true */
}


/* purple active box */
#navigation a.purpleactive {
    background: #FFF;
    /* use this to make it look like tabbed */
    border-top: 1px solid #96C; /* purple */
    border-left: 1px solid #96C; /* purple */
    border-right: 1px solid #96C; /* purple */
    border-bottom: 1px solid #FFF;  /* same color as content */
}

/* purple inactive box */
#navigation a.purpleinactive {
    background: #FFF;
    /* use this to make it look like tabbed */
    border-top: 1px solid #96C; /* purple */
    border-left: 1px solid #96C; /* purple */
    border-right: 1px solid #96C; /* purple */
    /* no bottom border */
}

/* orange active box */
#navigation a.orangeactive {
    background: #FFF;
    /* use this to make it look like tabbed */
    border-top: 1px solid #F90; /* orange */
    border-left: 1px solid #F90; /* orange */
    border-right: 1px solid #F90; /* orange */
    border-bottom: 1px solid #FFF;  /* same color as content */
}

/* orange inactive box */
#navigation a.orangeinactive {
    background: #FFF;
    /* use this to make it look like tabbed */
    border-top: 1px solid #F90; /* orange */
    border-left: 1px solid #F90; /* orange */
    border-right: 1px solid #F90; /* orange */
    /* no bottom border */
}

/* green active box */
#navigation a.greenactive {
    background: #FFF;
    /* use this to make it look like tabbed */
    border-top: 1px solid #690; /* green */
    border-left: 1px solid #690; /* green */
    border-right: 1px solid #690; /* green */
    border-bottom: 1px solid #FFF;  /* same color as content */
}

/* green inactive box */
#navigation a.greeninactive {
    background: #FFF;
    /* use this to make it look like tabbed */
    border-top: 1px solid #690; /* green */
    border-left: 1px solid #690; /* green */
    border-right: 1px solid #690; /* green */
    /* no bottom border */
}


#navigation a.purpleactive:visited,
#navigation a.purpleinactive:visited,
#navigation a.purpleactive:hover,
{
    background: #FFF;
    color: #96C; /* purple */ 
}
#navigation a.purpleinactive:hover
{    
    background: #FFF;
    color: #C9F; /* light purple */    
}

#navigation a.orangeactive:visited,
#navigation a.orangeinactive:visited,
#navigation a.orangeactive:hover
{
    background: #FFF;
    color: #F90; /* orange */ 
}
#navigation a.orangeinactive:hover
{    
    background: #FFF;
    color: #FC6; /* light orange */    
}

#navigation a.greenactive:visited,
#navigation a.greeninactive:visited,
#navigation a.greenactive:hover
{
    background: #FFF;
    color: #690; /* green */ 
}
#navigation a.greeninactive:hover
{    
    background: #FFF;
    color: #9C0; /* light green */    
}

/* ^ navigation stuff */

/* content areas v */

/* orange content */
#orangecontent {
    font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
    text-align: justify;
    background: #FFF;
    padding: 20px;
    border: 1px solid #F90; /* orange */
    /* border-top: none; */
    z-index: 2;	
    width: 800px;
}

/* green content */
#greencontent {
    font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
    text-align: justify;
    background: #FFF;
    padding: 20px;
    border: 1px solid #690; /* green */
    /* border-top: none; */
    z-index: 2;	
    width: 800px;
}

#showcontent {
    font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
    text-align: justify;
    background: #FFF;
    padding: 20px;
    border: 1px solid #690; /* green */
    /* border-top: none; */
    z-index: 2;	
    width: 760px;
}


/* was trying below to get rid of image border when hover but didn't work */
/* 
 * #greencontent a:link,
 * #greencontent a:visited, 
 * #greencontent a:hover,
 * #greencontent a:active
 * {
 *     text-decoration: none;
 *     border: 0 none;
 * }
 */

/* purple context */
#purplecontent {
    font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
    text-align: justify;
    background: #FFF;
    padding: 20px;
    border: 1px solid #96C; /* purple */
    /* border-top: none; */
    z-index: 2;	
    width: 800px;
}

/* ^ different color borders for differnt content pages */

/* footer */
#footer {
    clear: both;
    font: 0.6em "bitstream vera sans", verdana, sans-serif;
    margin-top: 20px;
}

/*
 *  ROUNDED BORDERS
 */


/* tables */
td {
    /* 
     * border-right: 1px solid #690; /\* green *\/
     * border-left: 1px solid #690; /\* green *\/
     * border-bottom: 1px solid #690; /\* green *\/
     * border-top: 1px solid #690; /\* green *\/
     */
    text-align: center;
    padding: 20px 20px 0px 40px;
}


/* to write text to the right of an image */
img.jxnpic { 
    float: left; 
    margin: 4px; 
    width: 15em;
}

/* so that there are no borders in table image links */
img.noborder {
    border: 0 none;
}
img {
    border: 0 none;
}