/* 
   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 005, "Design215 V3", 1000px wide layout, updated for HTML5 v10.02.2015
   
   Container layout of each page:

   body
     #pagehead
       .navbar
       .navlinks
       .navlinks2
     #menu1
     #menu2
     #menu3...
     #container
       #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:14px; 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:#404040;
  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 {  /* eliminates the need for valign="top" */
  line-height:130%; 
  vertical-align:top;
}
table td.rt {  /* eliminates the need for align="right" */
  text-align:right;
}
table td.ct {  /* eliminates the need for align="center" */
  text-align:center;
}

/* 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.png) 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;
  vertical-align:middle;
}
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;
}
#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.
*/

/* debug div */
#xdebug {
  position:fixed; left:10px; top:10px; height:180px; width:120px;
  text-align:left; margin:0; padding:4px;
  background:#fff; color:#000; border:1px solid #000;
  overflow:visible; z-index:200; /* must be less than drop menu z-index */
}

/* Page Header, full width of page */
#pagehead {
  position:fixed; left:0; top:0; height:100px; width:100%;
  text-align:left; margin:0; padding:0;
  background:transparent url(004/header.png) 0px -30px repeat-x;
  overflow:visible; z-index:96; /* must be less than drop menu z-index */
}
  #headerbox {
    position:relative; width:100%; 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:6px; left:10px; width:240px; height:80px;
      text-align:left; margin:0; padding:0;
    }
  /* DIVs for navigation links */
  div.navlinks {
    position:absolute; top:25px; right:40px; 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:100px 0 0 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;
      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:100%;
  margin:0; padding:90px 0 0 0; 
  text-align:center;
  background:#000;
  overflow:hidden;
}
#pag_index #pagebody {
  padding:0;
}
#fullphoto img.leafpic {
  width:100%; margin:0; padding:0;
}
#photocredit {
  position:absolute; width:100%;
  left:0px; top:90px; 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(/images/mouse_large01.jpg) 0px 0px no-repeat;
}
  
/* 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 {
  /* 2012 update: opacity set with css on slideshow page */
  position:absolute; visibility:hidden; 
  background:transparent;
  margin:0; padding:90px 0 0 0;
  text-align:center; /* slideshow image will be centered in the div */
  width:100%; /* div will be the full width of its container */ 
}
#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:fixed; visibility:hidden; z-index:99;
  margin:0; padding:9px 0 0 0;
}
#menu1 { /* about */
  width:200px;
  background:transparent url(004/menu_pointer.png) 40px top no-repeat;
}
#menu2 { /* services */
  width:240px;
  background:transparent url(004/menu_pointer.png) 50px top no-repeat;
}
#menu3 { /* work */
  width:425px;
  background:transparent url(004/menu_pointer.png) 150px top no-repeat;
}
#menu4 { /* toolbox */
  width:625px;
  background:transparent url(004/menu_pointer.png) 430px top no-repeat;
}

#menu1 p,#menu2 p {
  width:100%; /* necessary for IE7 or menu height bug */
  background:transparent url(004/tooltip.png);
  border-radius:4px; border:2px solid #000000;
  margin:0; padding:4px 0px 12px 0px;
}
div#menu3 div.menubody { /* it was necessary to specify div#menu3 */
  position:relative;
  width:100%; /* it was necessary to specify a width for IE7 or DIV was invisible */
  background:transparent url(004/tooltip.png);
  border-radius:4px; border:2px solid #000000;
  margin:0; padding:4px 0px 12px 0px;
}
  div.menucat2 {
    position:relative; width:48%; margin:0; padding:0;
    float:left;
  }
  div.menucat3 {
    position:relative; width:48%; margin:0; padding:0;
    float:left;
  }
    div.menucat p,div.menucat2 p {
      margin:0; padding:0; 
    }

div#menu4 div.menubody { /* it was necessary to specify div#menu3 */
  position:relative;
  width:100%; /* it was necessary to specify a width for IE7 or DIV was invisible */
  background:transparent url(004/tooltip.png);
  border-radius:4px; border:2px solid #000000;
  margin:0; padding:4px 0px 12px 0px;
}
  div.menucat {
    position:relative; width:32%; margin:0; padding:0;
    float:left;
  }

div.dropx {
  text-align:left;
  margin:0; padding:0;
}
  div.dropx a {
    position:relative; display:block; height:14px; 
    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 h2 {
    color:#fff;
  }
  div.dropx span {
    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;}