body {
   color: white;
   background: url('/graphics/sunmoonblack.jpg');
   font-family: Verdana, Arial, sans-serif;
}

a { text-decoration: none; }
a:link { color: yellow; }
a:visited { color: yellow; }
a:active { color: red; }
a:hover { color: #ffa500; } /* HTML orange */

table {
   padding: 2px;
   color: white;
   background-color: black;
   border: 0px;
   margin: 1ex;
   font-family: Verdana, Arial, sans-serif;
}

/*
<pre> is used only for sample HTML code that is meant to be
cut and pasted, so it is sort of ok to make it a tiny font
*/

pre {
   font-size: 8pt;
}

p.dberror, span.dberror, span.error {
   color: red;
   font-weight: bold;
}

p.gethelp {
   font-size: 8pt;
   text-align: right;
   margin-top: 2px;
   margin-bottom: 2px;
}

/* styles for the toolbar */

body.plain {
   margin-top: 0px;
   padding-top: 0px;
   color: white;
   background: black;
}

table.plain {
   padding: 0px;
   border: 0px;
   margin: 0px;
}

/* styles for page layout */

div {
   padding: 10px;
   border: 0px solid;
   margin-right: auto;
   margin-left: auto;
   background-color: black;
   width: 85%;
   font-size: 10pt;
}

div.mainmenu {
   height: 72px;
   clear: left;
   text-align: center;
   padding-top: 0px;
   margin-top: 20px;
   margin-bottom: 20px;
}

/* styles for the IndexServlet page */

img.thumb {
   border: 0px;
   padding: 4px;
   background-color: black;
}

img.index {
   padding: 8px;
   background-color: black;
   border: 0px;
}

div.galselect {
   width: 250px;
   padding: 10px;
   text-align: left;
   border: 0px;
   float: left;
}

div.indeximage {
   width: 266px;
   height: 310px;
   padding: 15px 0px 0px 0px;
   text-align: center;
   float: left;
   border: 0px;
   margin: 5px;
}

div.indexgrid {
   background: transparent;
}

span.smallcaption {
   font-size: 8pt;
}

/* styles for the LoginServlet page */

body.login {
   color: yellow;
   background: black;
   font-family: Verdana, Arial, sans-serif;
}

table.login {
   padding: 2px;
   color: yellow;
   background-color: black;
   border: 0px;
   font-family: Verdana, Arial, sans-serif;
}

/* styles for the PhotoDetailServlet pages when using flash */

div.flashviewer {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 90%;
  height: 700px;
  background-color: #333333;
}

img.flashimage {
  border: 15px solid white;
}

div.detailimage {
  width: 75%;
  margin-left: 0px;
  background: transparent;
  float: left;
}

p.detailimageholder {
  /* this <p> has to go inside the detailimage <div> because
     text-align is being ignored in <div>, at least wrt images. */
  text-align: center;
   margin: 0px;
}

div.detaillinks {
  /* this <div> goes together with the detailimage <div> to lay out the
     SimpleViewer-like detail display box */
  width: 20%;
  margin-right: 0px;
  margin-top: 20px;
  background: transparent;
}

/* styles for PhotoDetailServlet pages using frames */

div.displayimage {
   width: 450px;
   margin: 15px;
   background: black;
   border: 0px;
   text-align: center;
}

div.photocaption {
   width: 450px;
   margin: 15px;
   background: black;
   border: 0px;
}

p.caption {
   margin: 0px;
   color: white;
   font-style: ;
   text-align: left;
}

p.author {
   color: white;
   margin: 0px;
   font-size: 75%;
   text-align: right;
}

p.subject {
   text-align: right;
   color: #ff00ff; /* HTML magenta */
   margin: 0px;
}

p.orig {
   margin: 0px;
}

/* styles for the PhotoDetailServlet editing pages */

div#editmenu {
   width: 550px;
   /* height: 337px;  this is what width 450 goes with */
   border: 0px;
   margin-left: 15px;
   margin-bottom: 0px;
}

div#editform {
   border: 0px;
   width: 550px;
   margin-left: 15px;
   margin-top: 0px;
}

div#editform h3 {
   padding: 0px;
   margin: 0px;
   text-align: center;
}

/* styles for the BrowseServlet pages */

div#browsemenu {
   border: 0px;
}

div#browseyear {
   text-align: right;
   border: 0px;
   padding-top: 0px;
   padding-bottom: 3px;
}

div#calendargrid {
   background-color: transparent;
   border: 0px;
}

div.calendar {
   border: 0px;
   width: 240px;
   height: 240px;
   background-color: transparent;
   float: left;
}

table.browse {
   padding: 2px;
   border: 0;
   margin-left: 2px;
   margin-right: 2px;
}

table.browse td { padding: 4px; }

div.thumbnail {
   width: 140px;
   height: 160px;
   padding: 10px;
   border: 0px;
   text-align: center;
   float: left;
}

div.thumbnail-row {
   height: 180px;
}

p.thumbcaption {
   margin: 5px;
   font-size: 10pt;
   text-align: right;
}


/* styles for the calendars on the browse page */

table.calendar {
   width: 240px;
   border: 0px;
   padding: 1px;
   margin: 2px;
   background-color: transparent;
}

td.cal-head {
   font-weight: bold;
   text-align: right;
}

td.cal-cellhead {
    color: black;
    background-color: #aaaaaa;
    width: 14.28%;
}

td.cal-cell0 {
    color: black;
    background-color: #808080;
    width:  14.28%;
    height: 2em;
}

td.cal-cell1 {
    color: black;
    background-color: #909090;
    width:  14.28%;
    height: 2em;
}

span.cal-day {
    color: black;
    font-size: x-small;
    vertical-align: middle;
    margin-right: 2px;
}

/* end */