/* ====== page styles ====== */
         body       { background-color:#f4f2e8; font-family:arial; font-size:1em; }
         body * { box-sizing: border-box; }
         .logoimage   { position:absolute; top:10px; right:20px; opacity:.30; filter:alpha(opacity=30); height:22em; z-index:1; } 
         .bar1  { position:relative; border-top:1px solid #ffffff; border-bottom:1px solid #999999; margin-bottom:5px; }
         .bar2  { position:relative; border-top:1px solid #eeeeee; border-bottom:1px solid #bbbbbb; padding:3px; background-color:#e4eee8; }
         form   { margin:0px; padding:0px; }
         #buttonrow   { clear:left; }
         .btnup,
         .btndn,
         .btnsp   { float:left; width:1.6em; height:1.5em; border:1px solid gray; margin:1px; font-family:verdana; padding:0px; font-size:1em; font-weight:bold; }
         .btnup { color:black;   border-color:white gray gray white;  border-width:1px 1px 1px 1px; opacity:1.0; filter:alpha(opacity=100); }
         .btndn { color:#333333; border-color:gray white white gray;  border-width:2px 0px 0px 2px; opacity:0.5; filter:alpha(opacity=50); }
         .btnsp { color:#444444; border:0px; width:.7em; background-color:transparent; }
         .btn   { position:relative; width:auto; float:none; }
         .rule    { background-color:#e0e0e0; line-height:.4em; height:.4em; font-size:.1em;  }
         .bevel1  { position:relative; width:100%; border-top:1px solid #ffffff; border-bottom:1px solid #666666; clear:both; z-index:4; }
         .bevel2  { position:relative; width:100%; border-top:1px solid #eeeeee; border-bottom:1px solid #888888; }
         .bevel3  { position:relative; width:100%; border-top:1px solid #dddddd; border-bottom:1px solid #aaaaaa; padding:2px 0px; background-color:#cacac7; xheight:2em; }
         div.number   { position:relative; float:left; height:auto; width:60px;  }
         span.number  { position:relative; color:#334477; left:0px; bottom:0px; padding:0px 10px; font-size:2em; line-height:80%; font-weight:bold; font-family:verdana,arial; }
         .header  { position:relative; display:block; float:left; width:40%; font-size:1em; margin-top:.4em; font-weight:bold; color:#334477; font-family:verdana,arial; }
         .titlecolor1  { color:#000000; }
         .titlecolor2  { color:#334477; }
         .links   { color:#334477; display:block; font-size:.8em; line-height:150%; font-weight:bold;  
         text-decoration:none; padding-left:5px; background-color:#e0e0e0; cursor:pointer;  }
         a.links  { color:#334477; font-size:.9em; }
         a.links:hover { color:#99aacc; } 
         .linkholder    { position:relative; background-color:transparent; color:#334477; float:right; width:16em; height:2em; 
         font-size:.8em; font-weight:bold; line-height:2em; top:0px; right:5px; cursor:pointer; z-index:100;  }
         #designerLinks{ position:absolute; right:0px; top:2em; width:24em; height:auto; display:none; z-index:100;}
         #filesize  { float:right; margin-right:5px; width:4em; border:0px; background-color:transparent; font-size:smaller; text-align:right; }
         #templatename { float:right; margin-right:5px; font-size:smaller; color:#223344; }
         #tagbotSource { position:relative; clear:both; width:99%; height:300px; font-family:courier new, monospace; font-size:.9em; z-index:3; }
         #outputCode  { position:relative; clear:both; width:99%; height:300px; font-family:courier new, monospace; font-size:.9em;  }
         div.formgroup { position:relative; width:100%; height:auto; background-color:#cacac7; z-index:5; }
         .codebox   { position:relative; clear:both; width:100%; height:300px; font-family:courier new, monospace; font-size:.8em; overflow:auto; }
         .shad1   { position:absolute; left:-2px; top:-2px; background-color:#333333; width:754px; height:474px; filter:alpha(opacity=20); opacity:0.20; }
         .shad2   { position:absolute; left:4px;  top:4px; background-color:#333333;  width:750px; height:470px; filter:alpha(opacity=10); opacity:0.10; }
         .shad3   { position:absolute; left:5px;  top:5px; background-color:#333333;  width:750px; height:470px; filter:alpha(opacity=10); opacity:0.10; }
         .shad4   { position:absolute; left:6px;  top:6px; background-color:#333333;  width:750px; height:470px; filter:alpha(opacity=10); opacity:0.10; }
         .shad5   { position:absolute; left:7px;  top:7px; background-color:#333333;  width:750px; height:470px; filter:alpha(opacity=10); opacity:0.10; }
         .shad6 { position:absolute; left:0px;  top:0px; background-color:gray;     width:750px; height:470px; border:0px solid gray; }
         .shad7 { position:relative; left:1px;  top:1px; background-color:white;    width:748px; height:468px; border:0px solid gray; overflow:auto; }
         /* Help section */
         #tagfacts  {background-color:#f0ede4; }
         #tagfacts table { font-family:verdana,arial; }
         .helpSample  { width:30em; text-align:left; font-weight:bold; font-size:.8em; background-color:#ffffdd; color:#444444; padding:5px; }
         .helpKey { font-weight:bold; font-size:1.2em; color:navy; vertical-align:top; background-color:#ffff88; }
         .helpHead  { font-size:1em; vertical-align:top; background-color:#ffffbb; }
         .helpDesc  { font-size:smaller; vertical-align:top; background-color:#ffffdd; }
         /* ====== tagbotted fields ====== */
         /* slot widths */
         .selblock,
         .wrapper { width:850px; } /* width:700px; for narrow presentation*/
         #slotsizer,
         input,
         .comment,
         .text,   
         .include { width:650px; } /* width:500px; for narrow presentation*/ 
         .caption { width:180px; }
         /* selection wrapper for checkbox */
         .selblock  { position:relative; margin-bottom:5px; border:1px dotted white; 
         float:left; clear:both; background-color:#dddddd; color:navy; }
         /* input form elements */
         .wrapper { position:relative; clear:both; } /* wraps each line item */
         input    { position:relative; float:left; margin-bottom:5px; font-size:.8em; font-size:1em;}
         .comment, .text,   
         .include { position:relative; float:left; height:4.2em; margin-bottom:5px; font-family:arial; font-size:.8em; font-size:1em;} } /*textareas*/
         iframe   { position:relative; height:3em; } /* for includes */
         .chkbox  { position:relative; width:20px; margin:0px; padding:0px; margin-right:5px; }
         .radio   { position:relative; width:20px; margin:0px; padding:0px; margin-left:5px; }
         /* tagbot symbol styles */
         /* advisory fields */
         .spacer  { background-color:transparent; border:0px; font-size:1.2em; font-weight:bold; color:#aaaaaa }
         .comment { background-color:#DAFFD8; color:#225500; }
         .include { background-color:#DCB6FF; color:#550055; }
         .include2{ background-color:#ddccee; color:#550055; }
         /* editing fields */ 
         .text    { background-color:#FFFFFF; color:#000000; }
         .title   { background-color:#FFFFFF; color:#000000; font-weight:bold; }
         .url     { background-color:#E0F0FF; color:#000055; font-family:courier new, monospace; }
         .value   { background-color:#FFE9C2; color:#000000; }
         .theme   { background-color:#FCFFAB; color:#000000; }
         .global  { background-color:#FCFFAB; color:#000000; }
         .color   { background-color:#FFE9C2; color:#000000; }
         .image   { background-color:#FFE9C2; color:#000000; }
         .option  { background-color:#F0F0E8; color:#000000; margin-bottom:10px; height:1.5em; cursor:pointer; border:0px; }
         /* hidden variables - perhaps these aren't used */
         .thmvar  { background-color:#FCFFAB; color:#000000; display:none; }
         .target  { background-color:#FCFFAB; color:#000000; display:none; }
         .math    { background-color:transparent; color:#000000; display:none; }
         .random  { background-color:transparent; color:#000000; display:none; }
         /* variations on slots */
         .caption { position:relative; float:left; font-family:verdana,arial; text-align:right; font-size:smaller; 
         margin-right:5px; background-color:transparent; }
         .obtn    { position:relative; margin-left:5px; width:1.5em; padding:0px; margin:0px; font-size:smaller; float:right; }
         .nbtn    { position:relative; margin-left:5px; width:1.5em; padding:0px; margin:0px; font-size:smaller; float:right; visibility:hidden; }