@import url(http://fonts.googleapis.com/css?family=Varela+Round:400,600); /* replace verdana as default */
 @import url(http://fonts.googleapis.com/css?family=Itim);           /* cursive, good in quotes */
 @import url(http://fonts.googleapis.com/css?family=Capriola);       /* page headers */
 @import url(http://fonts.googleapis.com/css?family=Short+Stack);    /* comic sans alternative */
 @import url(http://fonts.googleapis.com/css?family=ABeeZee);        /* a thin-small capriola */
 @font-face {font-family:Souvenir; src:url(fonts/SouvenirLight.otf)} /* enable souvenir lt bt */
     
/*-- DEFAULTS --*/
  HTML {width:962px; display:block; margin:auto}
  BODY {font:normal 14pt varela round,verdana,sans-serif; margin-top:.5em; line-height:125%}
 /* P, TD {line-height:125%} */
  IMG {border-style:none}
  TABLE {border-collapse:separate; border-spacing:0; margin:0 auto}
  TABLE,THEAD,TBODY,TR,TD,TH {font-size:inherit}
 
  A:link, A:visited {color:#00C; text-decoration:none}
  CITE {color:#00C; white-space:nowrap}     /* blue bold italic */  
  MARK {background-color:#FFD; padding:2px} 
    /* strip some tag defaults -- */
  S {text-decoration:none; white-space:nowrap}
  Q:before, Q:after {content:""}   /* delete quotation marks */  
  VAR, EM, KBD, DFN {font-style:normal}
  DEL {text-decoration:line-through}
 .ted {font:bold italic 100% abeezee, varela round, verdana; color:#804; white-space:nowrap}  /*for 'Ted's World'*/
  ABBR /* (unused) */
  
/* -- PAGE HEADERS -- */
 .petey {width:300px; height:79px}
 .pagetop {width:960px}    
 .pagetop IMG {border-style:none}
 .pagetop TD {width:480px; padding:4px}
 .pagetop TD:nth-child(1) {text-align:left}
 .pagetop TD:nth-child(2) {text-align:center}

   /* UNUSED {--to  replaces tables?--} */
 .pagetop INS {width:480px; padding:4px; vertical-align:middle}
 .pagetop INS:nth-child(1) {text-align:left}
 .pagetop INS:nth-child(2) {text-align:center}

/*-- MISC. PRESETS --*/
 .ctr    {text-align:center}
 .ctrpage {margin:0 auto}
 .center {display:block; margin:0 auto; margin-bottom:1em}   /* good for videos */
 
 .abs-left  {position:absolute; left:0}
 .abs-right {position:absolute; right:0} 
 .align-left  {float:left; margin:0 1px 1px 0}
 .align-right {float:right; margin:0 1px 1px 0}
 .middle {vertical-align: middle}
 
/*-- IMG BORDERS --*/ 
 .bdr0, IMG.bdr0 {border-style:none}
 .bdr, .bdr1, .bdr IMG, .bdr1 IMG, IMG.bdr {border:1px solid black}
 .bdr2 {border:2px solid black}
 .bdr3 {border:3px solid black}
 .bdrdbl {border-style:double}
 .grnbdr3 IMG {border:3px solid green}  /* for imported pics & videos */ 
 .radius3 {border-radius:3px} 
 .radius4 {border-radius:4px}
 .radius6 {border-radius:6px}
 .shadow4 {box-shadow:4px 4px #669}
 .shadow6 {box-shadow:6px 6px #669} 
 
   /* {UNUSED?  border can be at TD or any parent} 
  .bdrT    {border-top:1px solid black}
  .bdrB    {border-bottom:1px solid black}
  .bdrL    {border-left:1px solid black}
  .bdrR    {border-right:1px solid black}  
  .bdrT TD {border-top:1px solid black}
  .bdrB TD {border-bottom:1px solid black}
  .bdrL TD {border-left:1px solid black}
  .bdrR TD {border-right:1px solid black}  */  

 /* -- IMAGE SIDE-BY-SIDE DISPLAY -- */
  INS {display:table-cell; text-decoration:none; text-align:center}
  INS IMG {border:1px solid black}
 .tbl, .tbl2, .tbl3, .tbl4 {display:table; margin-bottom:0} 
 .tbl2 INS {width:480px}
 .tbl2 IMG {width:440px}                     /* default widths easily overridden */
 .tbl3 INS {width:320px}
 .tbl3 IMG {width:280px}   
 .tbl4 INS {width:240px}
 .tbl4 IMG {width:200px} 
 .hz, .vt {display:table; margin-bottom:0}   /* sizing set locally */
   
/* -- FONT --*/
    /* windows installed */
 .arial     {font-family:arial,sans-serif}
 .comic     {font-family:comic sans ms,arial,sans-serif}
 .courier   {font-family:courier new,serif}
 .georgia   {font-family:georgia,times new roman,serif}
 .souvenir  {font-family:souvenir,varela round, sans-serif}
 .times     {font-family:times new roman,georgia,serif}
 .verdana   {font-family:verdana,arial,sans-serif}
    /* google */
 .varela     {font-family:varela round,verdana,sans-serif}
 .itim       {font-family:itim,comic sans ms,sans-serif; font-size:110%}
 .capriola   {font-family:capriola,verdana,sans-serif}
 .abeezee    {font-family:abeezee,verdana,sans-serif}
 .shortstack {font-family:short stack,comic sans ms}

 .b      {font-weight:bold}
 .ital   {font-style:italic}                         
 .strike {text-decoration:line-through}   /* use DEL instead ? */
 .wspre  {white-space:pre}
 .left   {text-align:left}                          /* {UNUSED ? */
 .right  {text-align:right}                         /* {UNUSED ? */
 .suffix {font-size:90%; padding-left:.01em}
 .num    {font:normal 100 arial; color:#003; letter-spacing:2px} 
 .suit   {font-family:arial; color:#006; white-space:nowrap}
 .important {font:bold italic 120% varela round; color:#C03; text-align:center}
 
 .size80  {font-size:80%}
 .size90  {font-size:90%}
 .size110 {font-size:110%}
 .size120 {font-size:120%}
 .size130 {font-size:130%}
 .size140 {font-size:140%}
 .size150 {font-size:150%}

 .txtshad1 {text-shadow:1px 1px 0 #000}
 .txtshad2 {text-shadow:2px 2px 0 #000}
 .txtshad3 {text-shadow:3px 3px 0 #000}
 
/* -- HORIZONTAL MARGINS -- */
 .nomargin {margin:0}
 .marg1    {margin-left:1em}
 .marg15   {margin-left:1.5em}
 .marg2    {margin-left:2em}
 .marg3    {margin-left:3em}
 .marg4    {margin-left:4em}
 .marg5    {margin-left:5em}
 .marg6    {margin-left:6em}
 .marg8    {margin-left:8em}
 .marg10   {margin-left:10em}
 .ind05 {text-indent:.5em}
 .ind1  {text-indent:1em}
 .ind15 {text-indent:1.5em}
 .ind2  {text-indent:2em}
 .ind3  {text-indent:3em}
 .ind6  {text-indent:6em}
 .ind10 {text-indent:10em}

/* -- VERTICAL SPACING -- */
 .u05 {margin-top:-.10em}
 .u1 {margin-top:-.25em}           /* atoms are in .25em increments */     
 .u2 {margin-top:-.5em}
 .u3 {margin-top:-.75em}
 .u4 {margin-top:-1em}
 .u5 {margin-top:-1.25em}
 .u6 {margin-top:-1.5em}
 .d1 {margin-top:.25em}   
 .d2 {margin-top:.5em} 
 .d3 {margin-top:.75em} 
 .d4 {margin-top:1em} 
 .d5 {margin-top:1.25em} 
 .d6 {margin-top:1.5em} 
 .d8 {margin-top:2em} 
 .top0  {margin-top:0em}
 .bot0 {margin-bottom:0em}      
 .bot2 {margin-bottom:.5em}       
 .bot4 {margin-bottom:1em} 
 .bot6 {margin-bottom:1.5em} 
 .bot8 {margin-bottom:2em}       /* for back-arrows mainly */   

 .pt4     {padding-top:4px}
 .pt4 TD  {padding-top:4px}
 .pt6     {padding-top:6px}
 .pt6 TD  {padding-top:6px}
 .pt8     {padding-top:8px}
 .pt8 TD  {padding-top:8px}
 .pt10    {padding-top:10px}
 .pt10 TD {padding-top:10px}
 .pt12    {padding-top:12px}
 .pt12 TD {padding-top:12px}
 .pt14    {padding-top:14px}
 .pt14 TD {padding-top:14px}
 .pt16    {padding-top:16px}
 .pt16 TD {padding-top:16px}
 .pb4     {padding-bottom:4px}
 .pb4 TD  {padding-bottom:4px}
 .pb6     {padding-bottom:6px}
 .pb6 TD  {padding-bottom:6px}
 .pb8     {padding-bottom:8px}
 .pb8 TD  {padding-bottom:8px}
 .pb10    {padding-bottom:10px}
 .pb10 TD {padding-bottom:10px}
 .pb12    {padding-bottom:12px} 
 .pb12 TD {padding-bottom:12px}
 .pl1em   {padding-left:1em}
 .pl1em   {padding-left:2em}
 .pr2em   {padding-right:1em}
 .pr2em   {padding-right:2em}
 
 .bottom, .bottom TD {vertical-align:bottom}
 .top, .top TD {vertical-align:top}
 .middle TD {vertical-align:middle}

 .lh150  {line-height:150%}    /* 130% is default setting */          
 .lh140  {line-height:140%}          
 .lh120  {line-height:120%}
 .lh110  {line-height:110%}         
 .lh100  {line-height:100%}         
 .lh90   {line-height:90%}         
 
/* WIDTHS (bars, tables, cells) */
 .width100 {width:100%}
 .width90  {width:90%}
 .width80  {width:80%}
 .width70  {width:70%}
 .width60  {width:60%}
 .width50  {width:50%}
 .bar100 {width:960px}
 .bar90  {width:860px}
 .bar80  {width:760px}
 .bar50  {width:480px}

 .pic, .pic1, .pic2, .pic25, .pic3, .pic35, .pic4, .pic5, .pic6, .pic7, .pic8, .pic9 
  {text-align:center; color:#006}  
 .pic IMG   {border:1px solid black}
 .pic1 IMG  {width:200px; border:1px solid black}
 .pic2 IMG  {width:280px; border:1px solid black}  
 .pic25 IMG {width:330px; border:1px solid black}
 .pic3 IMG  {width:380px; border:1px solid black}
 .pic35 IMG {width:430px; border:1px solid black}
 .pic4 IMG  {width:480px; border:1px solid black}
 .pic5 IMG  {width:560px; border:1px solid black}
 .pic6 IMG  {width:640px; border:1px solid black} 
 .pic7 IMG  {width:720px; border:1px solid black}
 .pic8 IMG  {width:800px; border:1px solid black}
 .pic9 IMG  {width:900px; border:1px solid black}  
 .picnb IMG {text-align:center; border:none}
  /* picture caption; default dark blue can be changed to contrast with background */
 .cap {text-align:center; margin-top:0}
 
/* TEXT BOXES */
 .box {padding:.2em .4em .2em .3em}             /* add desired atoms */
 .centerbox {display:table; padding:.2em .4em .2em .3em} 
 .boxshad4 {box-shadow:4px 4px #669}
 .boxshad6 {box-shadow:6px 6px #669}
  UL.ulmin {margin-top:.5em; margin-bottom:.5em; padding-left:30px}   /* for UL in a box */
 
  /* for table */
 .quote1 {border:1px solid #006; font:normal 110% itim,comic sans ms,sans-serif;
          padding:.2em .4em .2em .2em}
 .quote1 Q {font:italic 90% itim,comic sans ms,sans-serif}
 .quote2 {border:double #006; font:normal 110% itim,comic sans ms,sans-serif; 
          padding:.2em .4em .2em .3em}
 .quote2 Q {font:italic 90% itim,comic sans ms,sans-serif}
 .author {font:italic 100% itim,shortstack,comic sans ms}

  /* TABLE(bar) / P(lbar): Bars, Border colors, Background colors */         
 .bar {padding:.3em; border-style:solid; border-width:1px 1px 1px 5px; border-radius:3px}
 .bar UL,.bar OL {padding-left:.1em; margin-bottom:-.3em; margin-top:.1em; margin-left:1em}
 .bar LI {margin-left:.1em; margin-bottom:.3em; padding-left:0px; padding-right:.3em}
 .bar LI:first-child {margin-top:-.6em}
 
 .lbar {display:table; width:fit-content; padding:.3em;  /* just for one-liners */
        border-left-style:solid; border-left-width:5px; border-radius:3px}

 .bar EM {font-size:115%; font-weight:bold}
  
 .b-blk {border-color:#000}
 .b-blu {border-color:#66F}       
 .b-brn {border-color:#A99} 
 .b-gra {border-color:#666} 
 .b-grn {border-color:#6A6}
 .b-pur {border-color:#C6F}
 .b-red {border-color:#F36}
 .b-sal {border-color:#C96}
 .b-yel {border-color:#CC9}

 .bk-blu {background-color:#DEF}            
 .bk-brn {background-color:#EDD}                   
 .bk-gra {background-color:#DDE} 
 .bk-grn {background-color:#DFE} 
 .bk-pur {background-color:#EDF}
 .bk-red {background-color:#FDE}
 .bk-sal {background-color:#FED}
 .bk-yel {background-color:#FFC}
 .bk-whi {background-color:#FFF}
 
 .blu2 {border-color:#66D; background-color:#DEF}
 .brn2 {border-color:#988; background-color:#EDD}       
 .gra2 {border-color:#666; background-color:#DDE}
 .grn2 {border-color:#6A6; background-color:#DFE}
 .pur2 {border-color:#C6F; background-color:#EDF}
 .red2 {border-color:#F36; background-color:#FDE}
 .sal2 {border-color:#C96; background-color:#FED}
 .yel2 {border-color:#BB8; background-color:#FFC}

    /* smaller bullet; no indent on wrap */
    /* .bar LI:before {content:"\2022";font-size:80%; padding-right:.5em} */
  
 .fit {width:fit-content}   /* compress right-margin to fit text <<Don't Need Table>> */

  /* box color combinations */
 .blu-blu {color:#009; background-color:#CEF}
 .blu-crm {color:#009; background-color:#FFFFFC}
 .blu-cya {color:#009; background-color:#CFF}
 .blu-grn {color:#009; background-color:#DFD}
 .blu-pnk {color:#009; background-color:#FDD}
 .blu-ora {color:#009; background-color:#FCA}
 .blu-pur {color:#009; background-color:#EDF}
 .blu-yel {color:#009; background-color:#FFC}
 .blu-whi {color:#009; background-color:#FFF}
 .blu-gra {color:#009; background-color:#EEE}
 .blu-sal {color:#009; background-color:#FED}
 .blu-brn {color:#009; background-color:#EBB} 
 
 .blk-blu {color:#000; background-color:#CEF}
 .blk-crm {color:#000; background-color:#FFFFFC}
 .blk-cya {color:#000; background-color:#CFF}
 .blk-grn {color:#000; background-color:#EFE}
 .blk-pnk {color:#000; background-color:#FDD}
 .blk-ora {color:#000; background-color:#FCA}
 .blk-pur {color:#000; background-color:#EDF}
 .blk-yel {color:#000; background-color:#FFC}
 .blk-whi {color:#000; background-color:#FFF}
 .blk-gra {color:#000; background-color:#EEE}
 .blk-sal {color:#000; background-color:#FED}
 .blk-brn {color:#000; background-color:#EBB} 
 
 .blk-brtyel {color:#000; background-color:#FF6}  
 .blk-brtpnk {color:#000; background-color:#F9C}
 .blk-medbrn {color:#000; background-color:#C96} 
 .blk-medgrn {color:#000; background-color:#6F9}
 .blk-dkgrn  {color:#000; background-color:#096} 
 .blk-dkblu  {color:#000; background-color:#69F} 
 .blk-dksal  {color:#000; background-color:#DBB} 
 .blk-dkpur  {color:#000; background-color:#99F} 
 .blk-dkred  {color:#000; background-color:#F33} 
 .blk-dkora  {color:#000; background-color:#F93} 
 .blk-dkbrn  {color:#000; background-color:#C99}
 
/*-- BACKGROUND COLORS (lighter) --*/
 .bg-blu  {background-color:#CEF}
 .bg-crm  {background-color:#FFFFFC}
 .bg-cya  {background-color:#CFF}
 .bg-grn  {background-color:#EFE}
 .bg-pnk  {background-color:#FEE}
 .bg-ora  {background-color:#FCA}
 .bg-pur  {background-color:#EDF}                 /* DCF */
 .bg-yel  {background-color:#FFE}
 .bg-whi  {background-color:#FFF}
 .bg-gra  {background-color:#EEE}
 .bg-grey {background-color:#E8E8EE}
 .bg-sal  {background-color:#FED}
 .bg-brn  {background-color:#C99}

  /* JUST FOR PROGRAMMING CODE */
 .code {font-family:courier new; font-weight:bold; text-align:left; white-space:pre}
 .code EM   {color:#009}                                   /* keyword           */
 .code KBD  {font:bold 100% courier new; color:#389}       /* pseudo-keyword    */
 .code SAMP {font:bold 100% courier new; color:#630}       /* macro             */
 .code Q    {color:#083}                                   /* comment           */
 .code VAR  {color:#802}                                   /* in-code directive */
 .codews {font-family:courier new; font-weight:bold; text-align:left; white-space:pre}
 .codebx {font-family:courier new; font-weight:bold; text-align:left; white-space:pre;
          padding:.4em .5em .3em .5em; border:1px solid black}
 .codebx P {margin-top:0}
 .codebx EM   {color:#009}                                 /* keyword           */
 .codebx KBD  {font:bold 100% courier new; color:#389}     /* pseudo-keyword    */
 .codebx SAMP {font:bold 100% courier new; color:#630}     /* macro             */
 .codebx Q    {color:#083}                                 /* comment           */
 .codebx VAR  {color:#802}                                 /* in-code directive */
 

/*-- TABLE BORDERS --*/
   /* fix for Firefox's missing borders caused by problem with {border-collapse:collapse}.
    Borders are constructed piecemeal using just CSS2, compatible with older browsers.*/
 .grid TR:first-child TD {border-top:1px solid black}
 .grid TD {border-right:1px solid black; border-bottom:1px solid black}  
 .grid TD:first-child {border-left:1px solid black}
   /* Menu-specific   =grid and more */
 .menu TD {font:normal 110%/130% arial; padding:8px}
 .menu TR:first-child TD {border-top:1px solid black}
 .menu TD {border-right:1px solid black; border-bottom:1px solid black}  
 .menu TD:first-child {border-left:1px solid black} 
   /* for Horizontal interior borders only */
 .menuH TD {font:normal 110%/130% arial; padding:8px} 
 .menuH {border-left:1px solid black; border-right:1px solid black;
         border-top:1px solid black}
 .menuH TD {border-bottom:1px solid black}  

/*-- TEXT COLORS (darker) --*/
 .red     {color:#F00}  
 .crimson {color:#F06} 
 .dkred   {color:#C00}  
 .pnk     {color:#FFBDBD}
 .ltpnk   {color:#FEE}
 .orange  {color:#F96}
 .ltora   {color:#FCA}
 .salmon  {color:#FED}
 
 .maroon  {color:#804}                       
 .pur     {color:#939}                        
 .dkpur   {color:#606}
 .ltpur   {color:#DCF}
 .lav     {color:#8080C0}
 .dklav   {color:#77B}
 
 .blu     {color:#00C}
 .brtblu  {color:#08F}
 .ltblu   {color:#DEF}
 .medblu  {color:#009}
 .dkblu   {color:#006}
 .cyan    {color:#008080}
 .ltcya   {color:#DFF}
 .brtcya  {color:#9FF}
 .aqua    {color:#099}

 .grn     {color:#093}
 .ltgrn   {color:#CFE} 
 .medgrn  {color:#085}                   
 .dkgrn   {color:#061}
 .grnn    {color:#084}

 .brn     {color:#930}   
 .brnn    {color:#804040}
 .dkbrn   {color:#630} 
 .beige   {color:#EDC}

 .cinn    {color:#933}
 .coral   {color:#F77}
 .yel     {color:#FF9}
 .ltyel   {color:#FFD} 
 .cream   {color:#FFE}

 .gra     {color:#999}
 .dkgra   {color:#666}  
 .ltgra   {color:#BBB}
 .grey    {color:#E8E8EE}
 .blk     {color:#000} 
 .whi     {color:#FFF}

  /*-- colors for Tables --*/
 .greenhdr  {background-color:#80FFBB}
 .yellowhdr {background-color:#EEA} 
 .pinkhdr   {background-color:#FFBDBD}
 .purplehdr {background-color:#BBD}
 .bluehdr   {background-color:#ADF}
 .brownhdr  {background-color:#EDB}    /* {use DCC) */
 
 .bluefill    {background-color:#CEF}
 .ltbluefill  {background-color:#DFF}  
 .cyanfill    {background-color:#CEE} 
 .greenfill   {background-color:#DFD}   
 .pinkfill    {background-color:#FDD}
 .purplefill  {background-color:#DDF} 
 .yellowfill  {background-color:#FFD}  
 .dkgrayfill  {background-color:#444}
 .grayfill    {background-color:#EEE}
 .salmonfill  {background-color:#FED}
 .brownfill   {background-color:#EDD}
 .orangefill  {background-color:#FDB}   
 
  /* menu TD */ 
 .bluc {background-color:#CFF}     /* = cyan */
 .brnc {}
 .grnc {background-color:#9FC}
 .pnkc {background-color:#FCC}
 .purc {background-color:#DCF}
 .yelc {background-color:#FFC}

 
 /*------ SOME UNICODE CHARACTER VALUES ------ 
 8660	&hArr;		double arrow
 176	&deg;    	55°
 167 	&sect;  	§ journal summary  
 247 	&div;		  division
 188  &frac14   1/4
 189  &frac12	  1/2
 190  &frac34   3/4
 162  &cent;	  cent
 178	&sup2;	  superscript 2
 224  &agrave;  a grave
 225  &aacute;  a acute
 232  &egrave;  e grave
 233  &eacute;  e acute 
 242  &ograve;  o grave
 253  &oacute;  o acute
      &ldquo;   left double quote       &lsquo;  left single quote
      &rdquo;   right double quote      &ldquo;  left double quote
 8242 &prime;   minutes                 &Prime;  seconds        
 8764 &sim;     similar too
 8776 &asymp;   approximate
 8800 &ne       not equal
 8804 &le       <=                      &ge      >=
 9201           alarm clock
 9203           hourglass 

 10033          big asterisk
 65309          wider equal sign 
 */

/*   TESTING
 Used on Vitamin-D page to reduce line-spacing within a paragraph.  Better way?

 EM {line-height: 180%; vertical-align: top}
*/