/*
   WYATT CSS FOR JBWYATT.COM
*/
   /*========================================================================*/
   /*========================================================================*/
   /* G E N E R A L     DOCUMENT DEFAULT */
   html {
     /* DEFAULTS */
     margin: 0 auto;
     border: 0px solid black;
     padding: 0px;
     background-color: #fff;
    }

   body {
      margin-top:0;
      background-color: #fff;
      /*background-image:url('gifs/binaryB.gif');
        background-attachment: fixed;
        background-repeat:repeat;
      */
      font-family:Verdana, arial black, Times, "Times New Roman";
      font-size: small; /* was 80% */
      line-height:125%;
      color:#1a2022;
      width:980px;
      margin-right:auto;
      margin-left:auto;
   }

      /* GENERAL FONT COLOR CLASSES */
      .grayf{color:#888;}
      .wf{color:#fff;}
      .orgf{color:#850;}
      .brownf{color:#630;}
      .rf{color:#600;}
      .rrf{color:#d00;}
      .gf{color:#060;}
      .ggf{color:#0a0;}
      .bf{color:#00e;}
      .brf{color:#530;} /*brown*/
      .blkf{color:#000;} /*black*/

      /* HIGHLIGHT */
      .high  { background-color:#8888a0;}
      .yb  { background-color:#ff9;}

      /* CENTER STUFF */
      .cen  {text-align:center;}

      /* TEXT SIZES */
      .xlarge{font-size:x-large;}
      .large{font-size:large;}
      .med{font-size:medium;}
      .small{font-size:small;}
      .xsmall{font-size:x-small;}
      .xxsmall{font-size:xx-small;}

      /* PRE FORMATTED ENHANCE */
      pre {font-weight:bold; }

      /* HORIZ RULE */
      hr {
         height:1px;
         background-color:#999;
         border:none;
         width:99%;
      }

   /*=========================================================================*/
   /* ===============  O U T E R     (M-B-P-C)   ===========================  */
   /*=========================================================================*/

   /* O OUTER DIV:  (M-B-P-C)   980 width*/
   #oouter {
      background-color:#fff;
      width:980px;  /* 962,  982 gives slight border omn sides*/
      margin:0px auto;
      padding:0px 0px 0px 0px;/* top, right, bottom, left */
      color:#ccc;
      font-size:7pt;
      text-align:center;
   }
      #oouter a:link{text-decoration: none; color: #aaa;}
      #oouter a:visited {text-decoration: none; color:#aaa;}
      #oouter  a:hover {text-decoration: none; color: #ffa; background: #111; }
      #oouter a:active {text-decoration: underline; color: #090;}

   /* OUTER DIV:  (M-B-P-C) */
   #outer {
      background-color:#fff;
      width:980px; /* 962 */
      margin:0px auto;
      font-size:small;
      color:black;
   }
      #outer a:link{text-decoration: none; color: #006;}
      #outer a:visited {text-decoration: none; color:#006;}
      #outer  a:hover {text-decoration: none; color: #ffa; background: #111; }
      #outer a:active {text-decoration: underline; color: #090;}

   /*=================================================================================================*/
   /* ==============    T O P  ===================   HEADER  & jbwyatt LINK   */
   /*=================================================================================================*/
   #top
     {
      /* BOX */
      margin:0px 0px 0px 0px;/* top, right, bottom, left */
      margin-right:auto;
      margin-left:auto;
      padding:8px 25px 8px 80px;

      /* TEXT STUFF */
      line-height: 100%;
      text-align:left;
      font-size:x-large;
      color:#000;
      
      font-family: "trebuchet ms", verdana, courier new,arial black;
      letter-spacing:4px;
      word-spacing:1px;
      font-weight:normal;
      /* SHADOWS 
      text-shadow: 1px 1px 1px rgba(100,100,100,0.2);  x y smudge colorp
      */

      /* BORDER  ROUNDED & SHADOW */
      border: 1px solid #777;
      -moz-border-radius:3px; /* firefox */
      -webkit-border-radius:3px; /* safari & chrome */
      /*-moz-box-shadow:0px 1px 1px #888;
      -webkit-box-shadow:0px 1px 1px #888;*/

      /* BACKGROUND COLOR & GRADIENT*/
      background-color: #ddd; /* fallback for older/unsupporting browsers */
      background-color: #ccc; /* fallback for older/unsupporting browsers */
      /*
      background: -webkit-gradient(linear, left top, left bottom, from(#e7e7e7), to(#99a));
      background: -moz-linear-gradient(top, #e7e7e7, #99a);
      */
      /*background-image:url('gifs/backg.gif');*/


   }
      /* TOP LINKS */
      #top a:link{text-decoration: none; font-weight:bold; color: #000;text-shadow: 1px 1px 0px rgba(255,255,255,0.4);  font-size:80%;  }
      #top a:visited {text-decoration: none; font-weight:bold; color: #000;text-shadow: 1px 1px 0px rgba(255,255,255,0.4); font-size:80%;  }
      #top a:active {text-decoration: underline; color: #090;}
      #top  a:hover {text-decoration: none; color: #111; background: #eee;text-shadow: 0px 0px 0px rgba(0,0,0,0.0); }

   /* JBWYATT.COM LINK TO HOME PAGE ON ALL PAGES */
   .jbw  {
      text-shadow: 1px 1px 0px rgba(0,0,0,0.8);
      color:#888;
      font-size:55%;
      font-family:   verdana, courier new;
      font-weight:bold;
      margin-right:50px;
      padding-right:4%;
      letter-spacing:1px;
      float:right;
   }

   #help a:link{text-decoration: none; font-weight:bold; color: #555;  background-color:#ffd; padding:0px 4px 0px 4px;}
   #help a:visited {text-decoration: none; font-weight:bold; color: #555; background-color:#ffd;padding:0px 4px 0px 4px;}
   #help a:active {text-decoration: underline; color: #090;}
   #help  a:hover {text-decoration: none; color: #f00; background: #ddd;}

   /* top right titles in header*/
   .topname{
      line-height: 100%;
      margin-right:0%;
      padding-right:0%;
      color:#555;
      font-size:55%;
      font-family: "trebuchet ms",verdana,courier new;
      letter-spacing:0px;

   }

   /* top right titles in header*/
   .mini{
      text-shadow: -1px -1px 0px rgba(0,0,0,0.8); /*  x y smudge colorp*/
      color:#fff;
      margin-right:7%;
      float:right;
      font-size:50%;
      font-family:courier new,arial black,verdana, courier new;
      font-weight:bold;
      letter-spacing:0px;
   }

   /*=================================================================================================*/
   /*=====================    L I N K S   ====================================*/
   /*=========================================================================*/
   /* LINKS CREATED VIA JS FUNCTION   */
   #links {
      /* BACKGROUND GRADIENT */
      background: #eee;
      /* GRADIENT
      background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#bbbbc0)); /* for webkit browsers */
      /*background: -moz-linear-gradient(top, #fff, #bbbbc0); */
      /* BOX */
      padding-top:1px;
      padding-bottom:4px;
      border: 1px solid #aaa;
      width: 978px;
      margin-bottom: 0px;
      margin-top: 6px;
      margin-left: auto;
      margin-right: auto;
      text-align:center;
      font-size:80%;      
      height:13px;  
      font-weight:normal;

      /* SHADOWS */
      /*     
     -moz-box-shadow:0px 2px 2px #888;
      -webkit-box-shadow:0px 2px 2px #888;
     */
     
      /* ROUND CORNERS */
      -moz-border-radius   : 2px; /* firefox */
      -webkit-border-radius: 2px; /* safari & chrome */
   }
      #links a:link{text-decoration: none; color: #005}
      #links a:visited {text-decoration: none; color:#005;}
      #links a:active {text-decoration: underline; color: #090;}
      #links  a:hover {text-decoration: none; color: #ffa;background: #333; font-weight:lighter;font-size:11pt;text-shadow: 0px 0px 0px rgba(255,255,255,0.5);}

      .onelinknuml   {  /* #s    1 LINKS */
        float:left;
        width:135px;
        border-right:1px solid #aaa;
      }
      .onelinknum   {  /* #s    FOUR LINKS */
        float:left;
        width:135px;
        border-right:1px solid #aaa;
      }
      .onelink   {  /* 1 LINKS */
        float:left;
        width:147px;
        border-right:1px solid #aaa;
      }
      .onelinkr   { /*rightmost  ONE LINK*/
        height:18px;
        float:left;
        width:150px;
      }

      /*========================================================================*/
    /* ===================== N O R M A L   SECTION        */
    /*========================================================================*/

   .normal {
      background-color:#ffffff;
      margin:10px 0px 0px 2px; /* top, right, bottom, left */
      padding:10px 15px 15px 25px;
      text-align:left;
      color: black;
      border:1px solid #aaa;
      border-bottom:0px solid #666;
      -moz-border-radius   : 4px; /* firefox */
      -webkit-border-radius: 4px; /* safari & chrome */
   }
   .normal pre{font-size:140%;}

   /*=================================================================================================*/
   /* =============   M A I N   ===============================================*/
   /*==========================================================================*/

   #main {
      float:left;
      width: 766px;
      height:231px;
      background-color:#fff;
      margin:10px 0px 0px 0px; /* top, right, bottom, left */
      border:1px solid #aaa;
      padding:60px 20px 8px 0px;
      text-align:left;
      font-size:100%;
      font-family:verdana,courier new;
      letter-spacing:1px;
      -moz-border-radius   : 5px; /* firefox */
      -webkit-border-radius: 5px; /* safari & chrome */
   }
   #main p{margin-left:9%;}

      /* HP QUOTE THAT IS A LINK */
      #dumbledore {
         text-align:center;
         font-family: Verdana, Arial;
         font-size:70%;
         margin-top:8%;
         margin-bottom:1%;
         margin-left:8%;
      }
      #dumbledore a:link{color:#778; background:#fff;}
      #dumbledore a:visited{color:#778; background:#fff;}
      #dumbledore a:hover {text-decoration: none; color: #ffa; background: #222;padding:3px;}
      #dumbledore a:active {text-decoration: underline; color: #090;}


      /* CONTACT INFO */
      #contact {
         font-size:85%;
      }

      /* WYATT IMAGE */
      #wyattpic  {
      /* CSS 3 "border-radius" and "-moz-border-radius"  properties */
         border: 1px solid #bbc;
         -moz-border-radius: 2px; /* firefox */
         -webkit-border-radius: 2px; /* safari & chrome */
         -moz-box-shadow:3px 3px 4px #888;
         -webkit-box-shadow:3px 3px 4px #888;
         margin-right:6%;
         margin-top:2px;
         margin-bottom:0px;
         background-color:#fff;
         float:right;
         padding:0px;
      }
      /* TOP LINKS */
      #wyattpic a:link{text-decoration: none; }
      #wyattpic a:visited {text-decoration: none;}
      #wyattpic a:active {text-decoration: none;}
      #wyattpic  a:hover {text-decoration: none;background-color:white; }
      
   /*=================================================================================================*/
   /* ============   C O L L A P S E D   ================  CONTENT FULL WIDTH */
   /*=========================================================================*/

   .collapseFront {
      margin:10px 0px 0px 5px; /* top, right, bottom, left */
      float:left;
      width: 175px;
      height:20px;
      background-color:#fff;
      /* background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));
      background: -moz-linear-gradient(top,  #fff,  #f2f2f2); */
      padding-top:18px;
      padding-bottom:12px;
      padding-left:5px;
      padding-right:5px;
      text-align:center;
      font-size:70%;
      font-family: Verdana, Courier New;
      letter-spacing:2px;
      color:#262;
      cursor:pointer;
      border:1px solid #aaa;
      -moz-border-radius   : 4px; /* firefox */
      -webkit-border-radius: 4px; /* safari & chrome */
   }


   .collapse {
      background-color:#fff;
      padding:15px;
      text-align:center;
      font-size:80%;
      font-family: Verdana, Courier New;
      letter-spacing:2px;
      color:#262;
      cursor:pointer;
      border:1px solid #aaa;
      -moz-border-radius   : 4px; /* firefox */
      -webkit-border-radius: 4px; /* safari & chrome */

   }


   /* COLLAPSED CONTENT FULL WIDTH */
   .collapseCIS{
      background-color:#ffffff;
      margin:1px 0px 1px 3px; /* top, right, bottom, left */
      padding:2px;
      text-align:left;
      font-size:95%;
      font-family: Verdana;
      color:#030;
      cursor:pointer;
   }

      /* COLLAPSED CONTENT NARROW - left */
      .collapseN {
         float:left;
         width:472px;
         background-color:#fff;
         margin:1px 1px 0px 0px; /* top, right, bottom, left */
         border:0px solid #000000;
         padding:11px;
         padding-right:9px;
         padding-left:8px;
         text-align:center;
         font-size:85%;
         font-family: "Courier New",Verdana;
         letter-spacing:4px;
         color:#000033;
         cursor:pointer;
      }
     /* COLLAPSED CONTENT NARROW - right*/
      .collapseNR{
         float:left;
         width:473px;
         background-color:#fff;
         margin:1px 0px 0px 0px; /* top, right, bottom, left */
         border:0px solid #000000;
         padding:11px;
         padding-right:9px;
         padding-left:8px;
         text-align:center;
         font-size:85%;
         font-family: Verdana, Courier,"Courier New",Verdana;
         letter-spacing:4px;
         color:#000033;
         cursor:pointer;
      }

      /* COLLAPSED CONTENT FULL WIDTH - NOTES PAGES in CIS CLASSES */
      .collapsex {
         background-color:#fff;
         font-family:"Courier New",Verdana;
         color:#000033;
         border:0px solid #000000;
         cursor:pointer;
         font-size: 1.1em;
      }
      .collapsex a:link{color:#000000;}
      .collapsex a:visited{color:#000000;}
      .colllapsex a:hover {text-decoration: none; color: #f00; background: #111;font-size:9pt;}
      .collapsex a:active {text-decoration: underline; color: #090;}      

      /* UN-COLLAPSED CONTENT */
      #myvarsw, #myvarran, #myvargeek, #mygoogle, #myvarstuff, #myvarcanvas, #myvarstuff2, #mypix, #myfun, #myhist
           {
         font-size:95%;
         letter-spacing:0px;
         font-family:  Verdana;
         background-color:#ddd;
         color:black;
         padding:1px;
         border:0px solid #777777;
         cursor:auto;
      }
      #myvarstuff a:link{color:#006;}
      #myvarstuff a:visited{color:#006;}

      /* ACTUAL CANVAS */
      .canvas {
         border:1px solid #fff;
         background-color:#eee;
         padding:1px;
      }
      
      /* CODE! */
      .code
          {
       font-family:"courier new";
       white-space:pre;
       font-size:1.2em;       
     }

   /*=================================================================================================*/
   /* ===========   B O T T O M  L I N K S ===================================== B O T T O M ====     */
   /*=================================================================================================*/
   #bottomLinks {
      /* CSS 3 "border-radius" and "-moz-border-radius"  properties */
      border: 1px solid #777;
      
      -moz-border-radius:2px; /* firefox */
      -webkit-border-radius:2px; /* safari & chrome */
      /*
      -moz-box-shadow:0px 1px 1px #888;
      -webkit-box-shadow:0px 1px 1px #888;
      */
      color:#000;
      margin-top:8px;
      margin-bottom: 0px;
      margin-right: auto;
      margin-left:auto;
      padding-top:2px;
      padding-bottom:2px;
      /* BACKGROUND GRADIENT*/
      background-color: #ccc; /* fallback for older/unsupporting browsers */
      /*
      background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#99a));
      background: -moz-linear-gradient(top,  #ddd, #99a);
      */
      font-size:65%;
      font-family:verdana,courier new,arial black;
      text-align:center;
      word-spacing:4px;
      letter-spacing:1px;
      clear:both;
      font-weight:normal;
      width:980px;
   }
   #bottomLinks a:link{text-decoration: none; color:#005; text-shadow: 1px 1px 1px rgba(120,120,120,0.1);}
   #bottomLinks a:visited {text-decoration: none; color:#005; text-shadow: 1px 1px 1px rgba(120,120,120,0.1);}
   #bottomLinks a:hover {text-decoration: none; color: #ff9; background: #111;font-size:9pt;}
   #bottomLinks a:active {text-decoration: underline; color: #090;}

   .valid{
      margin-top:6px;
      font-size: x-small;
      text-align:center
   }
   .valid a:link{text-decoration: none; color:#f33;}
   .valid a:visited {text-decoration: none; color:#f33; background-color:white;}
   .valid a:hover {text-decoration: none; color: #fff; background: #fff;}
   .valid a:active {text-decoration: none; color: #fff;}


   /*=================================================================================================*/
   /* ==================  G O O G L E  ==================                      =======================*/
   /*=================================================================================================*/
   #google {
      background-color:#fff;
      padding-top:18px;
      padding-bottom:14px;
      padding-left:18%;
      text-align:left;
      font-size:85%;

      border:1px solid #aaa;
       -moz-border-radius: 2px; /* firefox */
       -webkit-border-radius: 2px; /* safari & chrome */
   }
      .googledots{ /* colored dots */
         vertical-align:middle;
         border-style:none;
         padding:3px;
      }

   #stuff{
         margin-top:3px;
         font-size:xx-small;
         text-align:center;
         cursor:default;
         background-color:#fff;
         letter-spacing:1px;
      }
      #stuff a:link{text-decoration: none; color:#444;background-color:#fff;}
      #stuff a:visited {text-decoration: none; color:#444; background-color:#fff;}
      #stuff a:hover {text-decoration: none; color: #666; background-color: #fff; font-size:9pt;}
      #stuff a:active {text-decoration: none; color: #00f;}

   /*=========================================================================*/
   /* SIDEBAR - float right */
   #side {
   background-color:#ffffff;
   padding:15px 15px 25px 15px;
   text-align:center;
   font-size:85%;
   color:#750;
   width:90px;
   float:right;
   margin:6px 15px 5px 0px;
   border-top:1px double gray;
   border-right:0px double gray;
   }
   
   /* for validation */
   .headCollapse    { font-size:large; font-weight:bold; margin:10px; }