/* layouts */

/* some layout code for testing layout
    #wrapper, #pageheader, #contentArea  {border: 1px solid MidnightBlue;}
    #pagefooter                          {border: 0px solid MidnightBlue;}
    #menubar                             {border: 1px solid MidnightBlue;}
*/

body {font-size: 10pt}

/* ======== basic page layout ========== */

#pageheader, #contentArea, #sidebar, #pagefooter, #upperdiv, #menubar {margin: 3px;}

#wrapper {
  width: 700px;    /* 960px */
  margin: 0 auto;
}

#pageheader {
    padding-top: 1em;
    padding-bottom: 0em;
}
#pageheader .composer {
    letter-spacing: .2em;
}

#menubar {
    margin-bottom: 3.5em;   /* for some reason, menu items are being rendered outside the menubar division area */
}

#upperdiv {border: 1px solid red}

#contentArea {
  xfloat: right;
  xwidth: 620px;
  clear: both;
  padding-left: 0px;
  padding-bottom: 1em;
  border: 0px solid MidnightBlue;
  z-index: 0;
}

#sidebar {
  font-size: 8pt;
  float: left;
  width: 158px;
  padding-left: 2px;
  padding-bottom: 1em;
  border: 1px solid MidnightBlue;
}

#pagefooter {
  clear: both;
  padding-left: 0px;    /* #wrapper width minus #oontentarea width minus 4 */
  padding-top: .7em;
  padding-bottom: .7em;
}

#pageheader h1 {margin: 0px;}
#pagefooter p {font-size: .8em; margin: 2px 0 0 0;}

/* =========== other things ============ */

.default_page_title {
   font-size: 22px;
   font-family: Tahoma,Helvetica,Arial,sans serif;
   letter-spacing: .1em;
   margin-top: 0;
   margin-bottom: 1em;
   }

.default_page_subtitle {
   font-size: 17px;
   font-family: Helvetica,Arial,sans serif;
   font-weight: bold;
   font-variant: small-caps;
   }

/* index page formats */

#hptab {margin-top: 10em;}
#hptab td {text-align: center; }
#hptab .domain {font-size:24px; font-weight: normal;}
#hptab .hpsubttlcell {font-size: x-small; text-align: right}

.hp_line {
   font-size: 10px;
   text-align: center;
}
.hp_menu, .hp_date {margin-top: 2.5em;}

#hptagtab {
/*   background: url('../graphics/hptagbg_blue.png') no-repeat; */
   background-color: rgba(20,20,20,.5);
   margin-top: 2.5em;
   border: 2px solid hsla(195, 55%, 84%, .75); /* #bce3f0; */ 
   border-radius: 10px;
   padding: 1.2em;
   xwidth: 452px;
}

#hptagtab td {text-align: center; }

.hptagq {font-size: 1.3em}
.hptaga {text-align: justify;}

/* end index page formats */


/* =========== index page formats for Blackberries =========== */

#bbhomepage {margin-top: 4em; padding: 0 2em;}

#bbhomepage p {font-size: 1.2em}

.bbhptitle  {text-align: center}
.bbhpsubttl {text-align: right}
.bbhpmotto  {text-align: center; margin-top: 2em;}
.bbhp_line {
   text-align: center;
}

/* =========== end index page formats for Blackberries =========== */

/* =========== dropdown menubar =========== */

ul.dropdown,           /* initialize */
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {padding: 5px 0;}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown a:link,
ul.dropdown a:visited {text-decoration: none;}
ul.dropdown a:hover   {text-decoration: none;}
ul.dropdown a:active  {}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 150px;   /* was 100% */

 /* solid background so menu covers content beneath it */
 background-color: white;
 border: 1px solid #ccc;
 border-top: none;

 /* gradient shadow below the menu fading from semi-opaque to transparent */
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15),
             0 12px 24px rgba(0, 0, 0, 0.08),
             0 20px 40px rgba(0, 0, 0, 0.0);
}

/* gradient shadow pseudo-element below the dropdown */
ul.dropdown li:hover > ul::after {
 content: '';
 display: block;
 position: absolute;
 left: 0;
 right: 0;
 bottom: -20px;
 height: 20px;
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.0));
 pointer-events: none;   /* so it does not block clicks on content below */
}

ul.dropdown ul li {
 float: none;
 border-bottom: 1px solid #eee;   /* subtle divider between items */
 padding-left: 4px;               /* small indent for readability */
}

ul.dropdown ul li:last-child {
 border-bottom: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

/* ----- ALL LEVELS (incl. first) */

/* ul.dropdown *.dir { */
ul.dropdown *.lvl1 {
 padding-right: 18px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

/* ----- END LEVEL */



/* ======================================== */


#articleform .btncell {padding-top: 12px; padding-bottom: 12px;}
#articleform textarea {padding: 1px; font-size: 9pt;}


#article {
    width: 600px;
    padding: 8px;
    }


#article .date  {
   font-size: 12px;
   font-family: Helvetica, Arial, sans serif;
   margin-bottom: 0px;
   }

#article .title {
   font-size: 26px;
   font-family: Times Roman, serif;
   margin-top: 2px;
   margin-bottom: 0px;
   }

#article .subtitle {
   font-size: 26px;
   font-family: Times Roman, serif;
   margin-top: 5px;
   margin-bottom: 0px;
   }

#article .author {
   font-size: 14px;
   xfont-family: Helvetica, Arial, sans serif;
   margin-bottom: 0px;
   }

#article .source {
   font-size: 12px;
   xfont-family: Helvetica, Arial, sans serif;
   margin-bottom: 0px;
   }

#article .summary {
   font-size: 12px;
   xfont-family: Helvetica,Arial,sans serif;
   }

#article .details {
   font-size: 12pt;
   font-family: Times Roman, serif;
   text-align: justify;
   }

#article .details p, .details a, .details b, .details i {
   font-size: 12pt;
   font-family: Times Roman, serif;
   }

#article .filename {
   font-size: 11px;
   xfont-family: Helvetica,Arial,sans serif;
   }

.article_list_title {
   font-size: 22px;
   font-family: Helvetica, Arial, sans serif;
   line-height: .1em;
   }

.article_list_subtitle {
   font-size: 16px;
   font-family: Helvetica, Arial, sans serif;
   }

#article_list {
   margin-left: 5px;
   }

#article_list td {
   padding: 2px 8px 0px 0px;
   vertical-align: top;
  }

#article_list .title {
   padding-top: 0px;
   font-size: 16px;
   font-family: Times Roman, serif;
   margin-top: 2px;
   margin-bottom: 0px;
   }

#article_list .title a {
   font-size: 16px;
   font-family: Times Roman, serif;
}

#article_list .subtitle {
   margin-top: 0px;
   margin-bottom: 0px;
   }

#article_list .id {
   font-size: 12px;
   text-align: right;
}

#article_list .options, #article_list .cats {
   font-size: 12px;
   font-family: Helvetica, Arial, sans serif;
   margin-bottom: 0px;
   width: 4em;
   }

#article_list .date {
   font-size: 12px;
   font-family: Helvetica, Arial, sans serif;
   margin-bottom: 0px;
   }

#article_list .source {
   font-size: 12px;
   font-family: Helvetica, Arial, sans serif;
   margin-bottom: 0px;
   width: 100px;
   }

#article_list .summary {
   font-size: 12px;
   font-family: Helvetica,Arial,sans serif;
   }

#article_list .filename {
   font-size: 12px;
   font-family: Helvetica,Arial,sans serif;
   }

#article_list .details {
   width: 600px;
   font-size: 14px;
   font-family: Times Roman, serif;
   }

#article_list .reccount {
   font-size: 10px;
   font-family: Helvetica,Arial,sans serif;
   }

#loginform td.item {text-align: left}
#loginform .btn {width: 80px;}
#loginformtable {
    padding: 2px 2px 2px 2px;
    border: 1px solid #D4EEF7;
    margin-top: 17em;
    padding: 10px;
}
#loginformtable .buttons {padding-top: .75em;}
#loginform input {color: #003; background-color: #D4EEF7; border: 1px solid #003}

#dataeditform td.item {vertical-align: top;}
#dataeditform .tb {font-size: 10pt; width: 45em; height: 8em;}

.recordview td {vertical-align: top;}

.faqq {font-style: italic; font-size: larger}

#castlist td {vertical-align: top;}
#castlist .sxn {padding-top: .5em; padding-bottom: .5em; font-variant: small-caps;}
#castlist .voicerange, #castlist .roledesc {font-size: .9em; font-style: italic;}
#castlist .voicerange {padding-left: 3em; text-align: right;}

#songlist td {vertical-align: top;}
#songlist .sceneh, #songlist .songnumh, #songlist .songnameh, #songlist .casth {vertical-align: bottom;}
#songlist .scene, .songnum, .sceneh, .songnumh  {text-align: center;}
#songlist .casth, .cast {text-align: right; padding-left: 3em;}
#songlist .cast {font-style: italic; font-size: .9em;}
#songlist .songnum, songnumh {padding-left: 1em; padding-right: 1em;}
#songlist .scene, .songnum  {font-size: .8em;}
#songlist .sxn        {padding-top: .5em; padding-bottom: .5em; }
#songlist .interval   {padding-top: .8em; padding-bottom: .8em; text-align: center}
#songlist .sxn, #songlist .interval {font-size: .9em; font-variant: small-caps;}

.dbadmintab td {padding-left: 2px; padding-right: 2px}

.successmsg {color: green; font-weight: bold;}
.errmsg     {color: red;   font-weight: bold;}