/* 
   IMPORTANT NOTICE
   This XHTML and CSS layout is COPYRIGHT 2006-2012 Design215 Inc. 
   
   It MAY NOT be copied or used for any other web site without the express
   written permission of Design215 Inc. 954-630-3695 www.design215.com

   Design215.com CSS/110 stylesheet, v01.20.06 
   for 2011 design215.com site, v04.08.2011
   
   CSS 004, "Design215 V3", 1000px wide layout, v12.23.2012
   
   Modified v09.11.2015 to (mostly) work with the new html5 layout
   

   Container layout of each page:

   body
     #menu1
     #menu2
     #menu3
     #container
       #pagehead
         .navbar
         .navlinks
         .navlinks2
       #pagebody
         #titlebar
         #contentbg
           #contentbox
             #contenthead
             .L_xxlarge (or other column classes)
             .minheight
             .R_xxsmall (or other column classes)
             .xclearline
           #endcap
     #footer
      
   -----------------------------------------------------------------------------
   
   Fonts
   ----------------------------------------------------------------------------- 
   Define all fonts for the entire site in this section. 
*/

body,table td,.counter,div.dropx a {
  font-family:verdana,helvetica,sans-serif; font-size:10px; color:#222222;
}
p,dl,ul,pre.p2,.xword,.xtitle {
  font-family:verdana,helvetica,sans-serif; font-size:11px; color:#222222;
}
h3,#footer a.w3,.xbig {
  font-family:verdana,helvetica,sans-serif; font-size:12px; font-weight:bold; color:#000000;
}
h2,div.obox h1,.hh2 {
  font-family:arial,helvetica,sans-serif; font-size:16px; font-weight:bold; color:#000000;
}
h1 {
  font-family:arial,helvetica,sans-serif; font-size:24px; font-weight:bold; color:#000000;
}
pre,code,div.xbox3,.ckBox,.boxBlur,.boxFocus,.formula {
  font-family:courier new,courier,monospace; font-size:12px; color:#006000;
}
#footer p {
  font-family:arial,helvetica,sans-serif; font-size:10px; color:#aaaaaa;
}
#footer p.xnav {
  font-family:arial,helvetica,sans-serif; font-size:10px; color:#ffffff;
}
.fbutton {
  font-family:arial,helvetica,sans-serif; font-size:11px; font-weight:bold;
}
div.dropx,div.dropx a {
  font-family:arial,helvetica,sans-serif; font-size:12px; color:#ffffff;
}
input.fbig {font-size:36px;}
input.fbig2 {font-size:48px; text-align:center;}

/* 
   Type Selectors
   ----------------------------------------------------------------------------- 
   Define the defaults for HTML elements in this section. 
*/

html,body {
  text-align:center; margin:0; padding:0;
  color:#dddddd; background:#fff;
  min-width:1000px; /* fixes some iphone/android rendering issues */
}

a:link,
a:visited {text-decoration:underline; font-weight:bold; color:#0077ff;}
a:hover {text-decoration:underline; font-weight:bold; color:#444444;}

acronym {
  font-weight:bold; color:#888888;
  border-bottom:dashed 1px #000000; cursor:help; 
}
blockquote {
  font-size:12px; color:#000000; line-height:120%;
  margin:4px 60px 0 32px; padding:0;
}
embed { 
  margin:0 0 0 12px;
}
form {
  margin:0; padding:2px 0 0 12px;
}
h1 {
  margin:4px 4px 0 12px; padding:0 0 0 18px; letter-spacing:-1px;
  background:transparent url(004/h1bullet.png) left center no-repeat;
}
h2 {
  margin:2px 2px 2px 12px; padding:0 0 0 14px; letter-spacing:0px;
  background:transparent url(004/h2bullet.png) left center no-repeat;
}
h3 {
  margin:2px; padding:0;
}
/* for Google ads */
iframe {
  padding:2px; margin:0 0 0 10px;
}
img {
  margin:0; padding:0; border:0;
}
p {
  line-height:120%;
  margin:2px 0 2px 0; padding:0;  /* default is no left margin */
}
pre {
  margin:0; padding:0;
}
table {
  margin:2px 6px 2px 12px; padding:0;
}
table td {
  line-height:130%;
}

/* this tag is used to hide text that should be visible when no stylesheet is available */
tt {display:none;} 

ul {
  list-style:none;
}

form table { /* no left margin for tables inside forms */
  margin:2px 6px 2px 0; padding:0;
}


/* 
   Class and ID Selectors
   ----------------------------------------------------------------------------- 
   Define styles for all elements except the layout containers 
*/

/* menu bar links */
div.navlinks a {
  display:block; position:absolute; width:90px; height:40px; top:0px;
  font-size:11px; margin:0; padding:0;
}
div.navlinks span {display:none;}

/*
  positions must be set using id, not class
  left=width of preceding button + 26px (menu buttons are 26px apart) 
*/
a#a1 {width:75px; left:22px;}
a#a2 {width:100px; left:132px;}
a#a3 {width:68px; left:268px;}
a#a4 {width:96px; left:370px;}
a#a5 {width:90px; left:504px;}

/* hover backgropunds */
a.m1:link,
a.m1:visited {background:transparent url(004/menu_about.png) 0px -40px no-repeat;}
a.m1:hover   {background:transparent url(004/menu_about.png) no-repeat;}

a.m2:link,
a.m2:visited {background:transparent url(004/menu_services.png) 0px -40px no-repeat;}
a.m2:hover   {background:transparent url(004/menu_services.png) no-repeat;}

a.m3:link,
a.m3:visited {background:transparent url(004/menu_work.png) 0px -40px no-repeat;}
a.m3:hover   {background:transparent url(004/menu_work.png) no-repeat;}

a.m4:link,
a.m4:visited {background:transparent url(004/menu_toolbox.png) 0px -40px no-repeat;}
a.m4:hover   {background:transparent url(004/menu_toolbox.png) no-repeat;}

a.m5:link,
a.m5:visited {background:transparent url(004/menu_contact.png) 0px -40px no-repeat;}
a.m5:hover   {background:transparent url(004/menu_contact.png) no-repeat;}


/* stylesheet switcher links */
a#mstyle1,a#mstyle2 {
  display:block; position:absolute; width:86px; height:50px; top:120px;
  font-size:10px; margin:0; padding:0;
}
div.R_footer span {display:none;}

a#mstyle1 {width:36px; right:100px;}
a#mstyle2 {width:86px; right:1px;}

/* hover backgropunds */
a.cs1:link,
a.cs1:visited {background:transparent url(004/style_mobile.png) 0px -50px no-repeat;}
a.cs1:hover   {background:transparent url(004/style_mobile.png) no-repeat;}

a.cs2:link,
a.cs2:visited {background:transparent url(004/style_laptop.png) 0px -50px no-repeat;}
a.cs2:hover   {background:transparent url(004/style_laptop.png) no-repeat;}

/* highlighted icon */
a.cx1 {background:transparent url(004/style_mobile.png) no-repeat;}
a.cx2 {background:transparent url(004/style_laptop.png) no-repeat;}


/* Style for form "buttons" like "New", "Save", "Delete", etc */
a.btn {
  line-height:20px;
  font-family:verdana,helvetica,san-serif; font-size:10px; font-weight:bold;
  margin:0 1px 0 0; padding:2px 4px 2px 4px; background:#ffffff;
  border:1px solid #000000;
}
a.btn:link,
a.btn:visited {text-decoration:none; font-weight:bold; color:#0000aa;}
a.btn:hover   {
  text-decoration:none; font-weight:bold; color:#ffffff; background:#000099;
  border:1px solid #000000;
}

/* links with a folder icon */
a.f1 {
  font-size:11px; margin:0; padding:2px 0 2px 18px;
  background:transparent url(004/folder.gif) no-repeat;
}
a.f1:link,
a.f1:visited {text-decoration:none; font-weight:bold; color:#0077ff;}  
a.f1:hover {
  text-decoration:underline; font-weight:bold; color:#000000;
  background:transparent url(004/folder2.gif) no-repeat;
}


/* footer links */
#footer a:link,
#footer a:visited {text-decoration:none; color:#aaaaaa;}
#footer a:hover {text-decoration:underline; color:#ffffff;}
  
/* W3C validation links */
#footer a.w3:link,
#footer a.w3:visited {text-decoration:none; color:#363636;}
#footer a.w3:hover {text-decoration:none; color:#ffffff;}

br.clr {
  clear:both;
}
  
code.bx {  /* outlined code like an input box */
  border:1px solid #999999; background:#eeeeee;
  padding:1px;
}
code.t2 {  /* indented block of example code */
  display:block;
  margin:4px 0 2px 8px; padding:0;
}     

/* Separators to clear column floats */
div.xclear {
  clear:both; height:1px; line-height:1px; 
  margin:0; padding:0;
}
div.xclearline { /* content under columns */
  position:relative; clear:both; width:520px; 
  margin:0; padding:0;
}


/* Sets the minimum height of the page content, or can be a column divider */
div.minheight {
  position:relative; float:right; text-align:right;
  width:5px; height:500px;
}

div.xline { /* accent line */
  height:1px; line-height:1px;
  margin:3px; padding:0 0 3px 0;
  border-top:solid 1px #aaaaaa;
}
div.xbox1 { /* forms boxes */
  width:90%; padding:4px 8px 4px 8px; border:solid 1px #aaaaaa;
  background:#ffffff url(/images/pencil01.jpg) right top no-repeat;
}
div.xbox2 { /* outline box */
  width:90%;
  margin:0 0 0 12px; padding:8px 2px 8px 2px; 
  border:solid 1px #aaaaaa; background:#ffffff;
}
div.xbox_scroll { /* outline scroll box */
  width:400px; height:300px; overflow:scroll;
  margin:0 0 0 12px; padding:8px 2px 8px 2px; 
  border:solid 1px #aaaaaa; background:#ffffff;
}

div.gadvert { /* Google ads */
  margin:0 0 0 12px;
}
div.gsearch { /* Google search box */
  position:absolute; width:500px; left:250px; top:20px;
}

/* Social media buttons, tweet, like, pinit */
div.social {
  position:relative; float:left; height:35px; width:80px;
  margin:0; padding:0;
}
div.social2 {
  position:relative; float:left; height:35px; width:120px;
  margin:0; padding:0;
}
div.socialclear {
  position:relative; clear:both; width:120px; 
  margin:0; padding:0;
}  

dl.alist {
  margin:0; padding:4px 0 0 0;
}
dl.alist dt {
  font-size:12px; color:#000099; line-height:150%;
  margin:0; padding:0 0 0 12px;
}
dl.alist dd {
  line-height:120%;
  margin:0; padding:0 0 16px 20px;
}
dl.t2 {  /* lists used inside table td's */
  margin:0; padding:0;
}
dl.t2 dt {margin:0; padding:0;}
dl.t2 dd {margin:0; padding:4px 0 2px 8px;}
  
dl.links {
  margin:0; padding:4px 0 0 0;
}
dl.links dt {
  line-height:150%;
  margin:0; padding:0 4px 0 20px;
}
dl.links dd {
  line-height:120%;
  margin:0; padding:0 10px 4px 28px;
}
  
h1.m1 {
  margin:2px 2px 0 12px;
}
/* create an h1 for the left column for standards compliance so h2 doesn't come before h1 */
h1.translator {
  width:300px; height:35px; 
  background:transparent url(004/translator_logo.gif) no-repeat;
}
#contenthead h1 span {display:none;} /* replace text with an image */

img.xpic {
  margin:1px 3px 3px 1px; padding:0;
  border:solid 1px #444444;
}
img.xthumb {
  margin:2px; padding:0;
  border:solid 1px #888888;
}

/* stackable thumbnail blocks that wrap */
table.xthumb {
  position:relative;
  width:170px; height:170px;
  float:left;
  padding:0px; margin:0 4px 4px 0;
  background:#000000;
  border-radius:4px; 
}
/* facebook covers */
table.xthumb2 {
  position:relative;
  width:340px; height:120px;
  float:left;
  padding:0px; margin:0 4px 4px 0;
  background:#000000;
}
/* media */
table.xthumb3 {
  position:relative;
  width:290px; height:170px;
  float:left;
  padding:0px; margin:0 4px 4px 0;
  background:#000000;
}
/* categories */
table.xthumb4 {
  position:relative;
  width:190px; height:170px;
  float:left;
  padding:0px; margin:0 0 5px 5px;
  background:#dddddd;
  border-radius:8px; 
  border-right:1px solid #888888;
  border-bottom:1px solid #888888;
}
table.xthumb td,
table.xthumb2 td,
table.xthumb3 td,
table.xthumb4 td {
  text-align:center;
}
table.xthumb td span,
table.xthumb2 td span,
table.xthumb3 td span {
  position:relative;
  display:inline-block;  /* this has no effect in IE7 */
  background:#000000;
  padding:4px; margin:0;
}
img.zthumb {
  padding:0; background:#dddddd;
  border:solid 1px #444444;
}

img.art {
  padding:1px; background:#666666;
  border:solid 20px #000000;
}
   

img.xleft {  /* left aligned image */
  float:left; margin:2px 10px 2px 0;
}
img.xright {  /* right aligned image */
  float:right; margin:2px 0 2px 10px;
}
img.bleft {  /* left aligned image, border */
  float:left; margin:2px 10px 2px 0;
  border:1px solid #666666;
}
img.bright {  /* left aligned image, border */
  float:right; margin:4px 10px 4px 10px;
  border:1px solid #666666;
}
img.dleft {  /* left aligned image for use with ul.dlist */
  float:left; margin:2px 10px 2px 12px;
  border:1px solid #666666;
}

iframe.noshow {visibility:hidden;}

h1.noshow,
h2.noshow,
label.noshow,
span.noshow,
span.tt {display:none;}

object.p1 {
  margin:2px 6px 2px 12px; padding:0;
}

p.p1 { /* normal line height for narrow columns */
  margin:2px 6px 2px 12px; padding:0;
}
p.p2 { /* large right margin for a narrow column of text in a wide container */
  line-height:150%;
  margin:4px 20px 0 12px; padding:0;
}
p.p3 { /* normal right margin */
  line-height:150%;
  margin:4px 10px 0 12px; padding:0;
}
p.n1 { /* justified column like a newspaper */
  font-size:10px;
  margin:4px 2px 0 12px; padding:0; text-align:justify;
}
p.n2 { /* right column with vertical dashed line */
  font-size:10px;
  margin:0; padding:4px 2px 0 12px; border-left:1px dashed #aaaaaa;
}
p.r1 { /* used for the last updated date on links.php */
  text-align:right;
  font-size:10px; line-height:normal;
  margin:-16px 12px 0 0; padding:0;
}
p.r2 {
  text-align:right;
  line-height:150%;
  margin:4px 4px 4px 12px; padding:0;
}
#pagehead p {
  display:inline;
  text-align:left;
}
#footer p {
  position:relative;
  text-align:right; margin:0; padding:0 0 0 4px;
}
#footer p.xnav {
  position:relative;
  text-align:left; margin:0; padding:0 0 0 4px;
}
  
pre.p2 {
  line-height:150%;
  margin:4px 4px 0 12px; padding:0;
}

table.t1 { /* no left margin */
  margin:2px 6px 2px 0; padding:0;
}
table.t2 { /* no left margin */
  margin:2px 6px 2px 0; padding:0;
  width:80%;
}
table.gsearch { /* Google Search box */
  width:480px;
  border:0; margin:0; padding:0;
}
table.gsearch table {
  margin:0; padding:0;
}
  
ul.alist {
  margin:4px 0 0 12px; padding:0;
}
ul.alist li {
  margin:2px 0 6px 0; padding:1px 0 0 12px; width:90%;
  background:transparent url(004/bullet.gif) 0 4px no-repeat;
}
  
ul.blist {
  margin:4px 0 0 0; padding:0;
}
ul.blist li {
  margin:2px 0 2px 0; padding:1px 0 0 12px; width:98%;
  background:transparent url(004/bullet.gif) 0 4px no-repeat;
}
  
/* left aligned image with bullet list on the right */
ul.dlist {
  margin:4px 0 0 0; padding:0;
}
ul.dlist li {
  margin:2px 0 2px 0; padding:1px 0 0 12px; width:250px;
  background:transparent url(004/bullet.gif) 0 4px no-repeat;
}
#pagehead ul {
  display:none;
}

/* Form fields */
.ckBox { /* checkboxes */
  margin:1px; padding:0;
}
.boxBlur {
  border:1px solid #aaaaaa; color:#000000; background:#eeeeee;
  margin:0 0 2px 0; padding:4px;
}
.boxFocus {
  border:1px solid #aaaaaa; color:#000000; background:#ffffcc;
  margin:0 0 2px 0; padding:4px;
}
.fbutton {
  border:1px solid #666666; color:#0047EA; background:#eeeeee;
  margin:0; padding:0;
}

/* forms on other pages */
textarea#textcount {
  width:500px;
}
textarea#compress1,
textarea#text1,
textarea#text2 {
  width:600px;
}
input#flines {
  width:250px;
}
  
/* Misc Classes */

.border1 {  /* used for images instead of border="1" */
  border:1px solid #666666;
}

.counter {color:#aaaaaa;}

.dash2 {
  position:relative; display:block; color:#000000; font-weight:bold;
  margin:0 10px 4px 12px; padding:0 0 2px 0;
  border-bottom:1px dashed #888888;
}
.dash3 {  /* p2 paragraph separator, extra right margin */
  position:relative; display:block; line-height:4px;
  margin:0 80px 4px 20px; padding:0;
  border-bottom:1px dashed #888888;
}
.dash4 {  /* p3 paragraph separator */
  position:relative; display:block; line-height:4px;
  margin:0 20px 4px 20px; padding:0;
  border-bottom:1px dashed #888888;
}
.hdate { /* dates under H2 headings (articles, etc) */
  position:relative; display:block; color:#000099;
  margin:0 10px 4px 12px; padding:0 0 2px 0;
}
.sm {position:relative; top:-4px; font-size:9px; font-weight:normal;} /* service mark (sm) */
.super {position:relative; top:-4px; font-size:10px;} /* superscript */

.xbig {  
  font-size:18px; color:#000099;
}
.xdash {border:1px dashed #000000;} 

.xline {
  position:relative; display:block; line-height:4px;
  margin:0 2px 8px 12px; padding:0;
  border-bottom:1px solid #888888;
}
.xred {color:#ff0000;} /* form errors */
.xword {font-weight:bold; color:#dddddd;}


/* 
   Containers for this layout
   -----------------------------------------------------------------------------
   For this site, #container needs a fixed width so all of the backgrounds and other
   divs inside it line up. Otherwise there are some 1px rounding issues depending on the 
   size of the browser window.
*/

/* Page Header, full width of page */
#pagehead {
  position:relative; width:100%; height:110px;
  text-align:left; margin:0; padding:0;
  background:transparent url(004/header.png) 0px -20px repeat-x;
  overflow:visible; z-index:96; /* must be less than drop menu z-index */
}
  #headerbox {
    position:relative; width:1000px; height:100px;
    text-align:center; margin:0 auto 0 auto; padding:0;
  }
    #pagehead div.navbar {  /* width and height necessary for image replacement */
      position:absolute; top:10px; left:0px; width:240px; height:80px;
      text-align:left; margin:0; padding:0;
    }
  /* DIVs for navigation links */
  div.navlinks {
    position:absolute; top:30px; left:390px; width:600px; height:40px;
    text-align:left; margin:0; padding:0;
  }

#container {
  position:relative; 
  text-align:center; margin:0; padding:0;
  background:#fff;
}
  /* Page body, centered in container */
  #pagebody {
    position:relative; width:1000px; 
    text-align:left; margin:0 auto 0 auto; padding:0;
  }
    /* Titlebar, content above content box */
    #titlebar {
      position:relative;
      text-align:left; margin:0; line-height:1px; /* removes 2px space under leaf.jpg */
    }
    
    /* Outer content box, defines outer width of content (use width:??px ), NO MARGINS */
    #contentbg {
      position:relative; width:1000px;
      text-align:left; margin:0; padding:0;
    }
      /* Inner content box for MARGINS and a second background (do NOT define a width) */
      #contentbox {
        position:relative;
        color:#555555; line-height:normal;
        text-align:left; margin:0; padding:0;
      }
        /* Content above columns */
        #contenthead {
          position:relative; margin:0; padding:0;
        }
          /* Columns, Total width must be <= 980px */
          
          /* LEFT columns */
          div.L_xxsmall,
          div.L_xsmall,
          div.L_small,
          div.L_large,
          div.L_xlarge,
          div.L_xxlarge,
          div.L_full,
          div.L_full2 {
            position:relative; float:left; margin:0; padding:0;
          }
          
          /* RIGHT columns */
          div.R_xxsmall,
          div.R_xsmall,
          div.R_small,
          div.R_large,
          div.R_xlarge,
          div.R_xxlarge,
          div.R_full {
            position:relative; float:right; margin:0; padding:0;
          }
          
          /* Column width combinations:  xxs+xxl, xs+xl, xs+xs+xs, s+l, full */
          div.L_xxsmall,div.R_xxsmall {width:250px;}
          div.L_xsmall,div.R_xsmall {width:260px;}
          div.L_small,div.R_small {width:360px;}
          div.L_large,div.R_large {width:450px;}
          div.L_xlarge,div.R_xlarge {width:520px;}
          div.L_xxlarge,div.R_xxlarge {width:600px;}
          div.L_full {width:740px;}
          div.R_full {width:720px;}
          div.L_full2 {width:1000px;}
          
      /* Bottom of content box, no bottom margin */
      #endcap {
        position:relative; width:720px; height:20px;
        clear:both; margin:0 0 0 12px;
      }

    /* Footer, extends to bottom edge of window */
    #footer {
      position:relative; height:250px;
      margin:0; padding:10px 0 0 0;
      background:#4b4b4b;
      border-top:4px solid #111;
    }
      div.ftcenter {
        position:relative; width:990px;
        margin:0 auto 0 auto; padding:15px 0 0 0;
      }
      div.L_footer {
        position:relative; float:left; width:160px; margin:0; padding:0;
      }
      div.L_footer2 {
        position:relative; float:left; width:120px; margin:0; padding:0;
      }
      div.R_footer {
        position:relative; float:right; width:350px; height:250px; margin:0; padding:0;
      }

/* 
   Page specific styles
   -----------------------------------------------------------------------------
   Define styles and style groups that are only used on certain pages
*/

      
/* homepage */
#fullphoto {
  position:relative; width:1000px;
  margin:-10px auto 0 auto; padding:0; 
  text-align:center;
  background:#000;
}
#fullphoto img.leafpic {
  width:100%;
}
#photocredit {
  position:absolute; width:1000px; height:500px;
  left:0px; top:0px; margin:0; padding:0;
  z-index:95;
}
#photocredit img.slidecover {
  width:100%;
}
#pag_index div.L_xxsmall {
  width:200px;
}
#pag_index div.R_full {
  width:740px;
}

#pag_image div.xclearline { /* content under columns */
  margin:0; padding:0;
}
#pag_image div.L_full { 
  width:1000px;
}
#pag_image div.L_xsmall { /* navigation bewteen images */
  width:300px;
}
      
/* new photo galleries */
#pag_gallery div.R_xxlarge {
  width:700px;
}

#pag_colorpicker div.L_xxsmall {
  width:180px; 
}

#pag_altcodes textarea.boxBlur {
  font-size:30px;
}

/* grayscale chart */
img.gb {width:80px; height:128px; border:0; margin:0; padding:0;}
img.gc {width:40px; height:128px; border:0; margin:0; padding:0;}

img#megapixels,
img#screensizes {width:720px;}

/* sitemap.php */
#pag_sitemap div.L_small {width:320px;}
          

/* links.php */
div.linkgroup {
  display:none;
}
    
/* code box, used in toolbox/spellcheck.php */
div.xbox3 {
  width:94%; min-height:120px;
  color:#000000; line-height:normal;
  border:1px solid #aaaaaa; background:#eeeeee;
  margin:0 0 0 12px; padding:4px; 
}
  /* spellcheck links (red) */
  span.sp,
  a.sp:link,
  a.sp:visited,
  a.sp:hover {text-decoration:underline; font-weight:normal; color:#ff0000;}

  /* spellcheck suggestions (green), also used in wordfind.php */
  span.sg,  
  a.sg:link,
  a.sg:visited,
  a.sg:hover {text-decoration:none; font-weight:bold; color:#006600;}

/* philosophy.php */
div.mousebg {
  width:580px; 
  margin:0 0 0 12px; padding:1px 0 1px 0;
  background:#ffffff url(http://design215.com/images/mouse_large01.jpg) 0px 0px no-repeat;
  border:1px solid #444444;
}
  
/* bg for film sizes boxes in filmsize.php, color swatch tables in colorpicker.php */
.xblue1 {
  margin:2px 6px 2px 0; padding:0; background:#888899;
  border:1px solid #444444;
} 

/* used in toolbox/ascii.php  */
.xtitle {  
  position:relative; text-align:center;
  font-size:20px; color:#999999; letter-spacing:3px;
} 
.formula {
  font-size:16px; font-weight:bold; color:#000000; 
}

/* Tables used for charts */
table.gray1 {background:#aaaaaa; width:95%}
table.gray1 td {background:#ffffff; padding:4px;}
table.gray1 td.ht1 {background:#eeeeee;}  /* td hightlight */
table.gray1 td.ht2 {background:#eeeeff;}  /* td hightlight */
table.gray1 td.ht3 {background:#ffee66;}  /* td hightlight */
table.gray1 h2 {margin:0;}

/* Word Finder Results */
table.wfresults td {padding:3px 24px 3px 3px; white-space:nowrap;}

/* Design215 Guestbook/Comments v01.26.06 */
table.xguest {  /* outside table */
  width:520px; margin:0;
}
table.xguest table {margin:0;}

.gbox {  /* remaining characters field, guestbook */ 
  text-align:right; width:250px;
  border:0; color:#000000; background:transparent;
}
.cbox {  /* remaining characters field, comments */ 
  width:250px;
  border:0; color:#000000; background:transparent;
}
.guestErr {
  font-weight:bold; color:#ff0000; 
}
.gline { /* user entries separator */
  position:relative; display:block; line-height:4px;
  margin:0 20px 4px 20px; padding:0;
  border-bottom:1px dashed #888888;
}
.xquote1,.xquote2 {display:none;}

h2.cmttot,
h2.gstbk {margin:2px 2px 2px 12px; padding:0; background-image:none;}

p.gst1 {margin:0 0 8px 12px}
p.gst1 span {font-weight:bold;}
p.gst2 {margin:0 60px 0 12px}

/* _getcomments.php */
input#gname,
input#gemail {
  width:240px;
}
textarea#gtext {
  width:500px;
}

/* Design215 Slideshow, index.php */
#pag_index #xssw1,
#pag_index #xssw2 {
  /* 2102 update: opacity set with css on slideshow page */
  position:absolute; visibility:hidden; 
  background:transparent;
  margin:0; padding:0;
  width:1000px; height:500px; /* added for compatibility with larger 1600x800 images used in new layout */
}
#pag_index #xssw1 img,
#pag_index #xssw2 img {
  width:100%;
}
#pag_index #xslidetext {
  display:none;
}
#pag_index #xslidenum {
  display:none;
}
#pag_index #slidecontrols {
  display:none;
}

/* Design215 Drop Menu, v11.22.2012 */
#xtooltip {
  position:absolute; left:-200px; top:5px; z-index:98;
  margin:0; padding:0 0 7px 0;
  background:transparent url(004/tooltip_pointer.png) 14px bottom no-repeat;
}
#xtooltip p.tt1,
#xtooltip p.tt2 {
  color:#ffffff; text-align:left; margin:0; padding:6px 8px 8px 8px;
  font-family:verdana,helvetica,sans-serif; font-size:11px;
  background:transparent url(004/tooltip.png);
  border-radius:4px; border:2px solid #000000;
}

#menu1,#menu2,#menu3,#menu4 {
  position:absolute; visibility:hidden; z-index:99;
}
#menu1 {width:225px;} /* about */
#menu2 {width:225px;} /* services */
#menu3 {width:425px;} /* work */
#menu4 {width:525px;} /* toolbox */

#menu1 p,#menu2 p {
  width:196px; /* necessary for IE7 or menu height bug */
  background:transparent url(004/menubox1.png) top left no-repeat;
  margin:0; padding:24px 17px 2px 12px;
}
div#menu3 div.menubody { /* it was necessary to specify div#menu3 */
  position:relative;
  width:425px; /* it was necessary to specify a width for IE7 or DIV was invisible */
  background:transparent url(004/menubox2.png) top left no-repeat;
  margin:0; padding:24px 1px 2px 12px;
}
div#menu4 div.menubody { /* it was necessary to specify div#menu3 */
  position:relative;
  width:525px; /* it was necessary to specify a width for IE7 or DIV was invisible */
  background:transparent url(004/menubox3.png) top left no-repeat;
  margin:0; padding:24px 1px 2px 12px;
}
#menu1 img,#menu2 img {
  background:transparent url(004/menubox1_end.png) top left no-repeat;
  width:225px; height:30px; margin:0; padding:0;
}
#menu3 img {
  background:transparent url(004/menubox2_end.png) top left no-repeat;
  width:425px; height:30px; margin:0; padding:0;
}
#menu4 img {
  background:transparent url(004/menubox3_end.png) top left no-repeat;
  width:525px; height:30px; margin:0; padding:0;
}
  div.menucat {
    position:relative; width:160px; margin:0; padding:0;
    float:left;
  }
  div.menucat2 {
    position:relative; width:190px; margin:0; padding:0;
    float:left;
  }
  div.menucat3 {
    position:relative; width:200px; margin:0; padding:0;
    float:left;
  }
    div.menucat p,div.menucat2 p {
      margin:0; padding:0; 
    }

  div.dropx {
    text-align:left;
    margin:0; padding:0;
  }
  div.dropx a {
    position:relative; display:block; height:12px; 
    font-weight:bold; color:#ffffff;
    margin:0; padding:6px 3px 6px 12px;
  }
  div.dropx a:link,
  div.dropx a:visited {text-decoration:none; color:#cccccc;}
  div.dropx a:hover {
    text-decoration:none; color:#000000; background:#dddddd;
  }
  div.dropx span {
    display:block;
    margin:0 0 8px 0; padding:0;
    color:#ffffff;
  }
    div.dropx span.tt {display:none;}
div.xclearmenu { /* content under columns */
  position:relative; clear:both; width:400px; 
  margin:0; padding:0;
}


/* gallery page, images.php */
#xpic {  
  position:relative;
}

/* replace or resize images */
img.rp50 { /* small footer logo v12.29.2009 */
  position:relative; margin:-12px 0 0 0; top:12px;
}

div.navlinks2 .noshow {display:inline;}