BODY {
      background-image: url(Xm2.gif);    /* Xm.jpg */
      background-size: 5em 4em;   /* CSS3 */
      background-position: top left;  
      background-repeat: repeat; 
      background-attachment: fixed;   
      text-align: center;
      font-family: Comic sans serif, Verdana, Geneva, Tahoma, Arial, ; 
      font-weight: bold;
      font-style: italic;
      font-variant: small-caps;    
      font-size: 2em;   /* 1em=62.5% of basic em=10px -affects Safari not IE 1 -basic em=16px &#8756 */
      color: #ff0000;
      letter-spacing: 3pt;
      border: .25em solid #ff0000;   /* border: .4em solid #D4A017 */
      text-align: center;
      margin: 0;
      padding: 0;   /* =4.1em -was 0 */
      overflow: auto;
            }

P:first-letter {color: #00ff00;
                background-color: #ffff00;
                font-style: italic;
                font-size: 100%;
                text-shadow: #ff0000 20px -12px 2px;  /* #6374AB */
}
 

#Meso {
position: relative;
width: 94%;
margin: 5.1em auto;
text-align: center; 
border: .25em solid #ffff00;
      background-image: url(lily.jpg);  /* jasmine.jpg */
      background-position: center
 center;  
      background-repeat: repeat; 
      background-attachment: fixed; 
     z-index:  5;
}


html>body #Meso  {
width: 95%;
margin: 3em auto;
}

                                                                                
#Endo {
position: relative;
width: 93%;
margin: 2em auto;
padding: 2em .3em;  /* .75em */
border: .25em solid #00ff00;
      background-image: url(GaleleeSea.jpg);  
      background-position: center center; 
      background-repeat: repeat; 
      background-attachment: fixed; 
text-align: center;
      font-family: Comic sans serif, Verdana, Geneva, Tahoma, Arial, ; 
      font-weight: bold;
      font-style: italic;
      font-variant: small-caps;     
      font-size: 1em;   /* must've value */
z-index: 10;
}


HTML>Body #Endo {
width: 91%;
margin: 2em auto;
padding: 2em 1em;
}


#borderset {
background-color: #FDD017;
background-image: url(twoangelsX.png);
background-position: center center;
background-repeat: no-repeat ;
packground-attachment: fixed;
border: 12px #FBB917 inset;
width: 10em;
height: 7.5em;
margin: .5em auto;
text-align: center;
}



#BibleSet {
background-color: #ffffff;
border: .3em #FFD700 inset;  
width: 7.4em;
height: 4em;
font-family: verdana, comic sans serif;
font-size: 1em;
font-weight: 900:
text-align: center;
padding: .4em .4em .6em .4em;
}


#Capo {
position: relative;
width: 100%; 
border: .15em solid #ff0000;
      background-image: url(flower.jpg);
      background-position: center center;
      background-repeat: repeat; 
      background-attachment: fixed;       
text-align: center;
      font-family: Comic sans serif, Verdana, Geneva, Tahoma, Arial, ; 
      font-weight: bold;
      font-style: italic;
      font-variant: small-caps;     
      font-size: 1em;  
}


#Collo {
position: relative;
width: 90%;
margin: 1em auto;
border: .15em solid #ffff00;
      background-image: url(lilybeauty.jpg );
      background-position: 10% 100%; 
      background-repeat: repeat-x; 
      background-attachment: scroll;  
text-align: center;
      font-family: Comic sans serif, Verdana, Geneva, Tahoma, Arial, ; 
      font-weight: bold;
      font-style: italic;
      font-variant: small-caps;     
      font-size: 1em;    /* 1em */
}


#Corpo {
position: relative;
width: 100%;
height: 125%;  /* 4 Safari 2 close Corpo */
margin: 1em auto;
padding: 1em 0em;
border: .15em solid #ff0000;
      background-image: url(lilywhite.jpg);
      background-position: center center; 
      background-repeat: repeat; 
      background-attachment: fixed; 
text-align: center;
      font-family: Comic sans serif, Verdana, Geneva, Tahoma, Arial, ; 
      font-weight: bold;
      font-style: italic;
      font-variant: small-caps;     
      font-size: 1.1em;    /* must've value */
}


#Sinistro {
width: 33%;
float: left;
} 

#Centro {
width: 34%;
height: 100%;   /* 2 extend BG color */
float: left;
margin-right: -1%em;
      background-color: #FEE5AC;   /* Honey */
      filter: alpha(opacity=80);
      opacity: 0.8;  
      background-image: url(fish.gif);
      background-position: 90% 5%; 
      background-repeat: repeat-x; 
      background-attachment: fixed; 
}


#Destro {
width: 33%;
float: right;
}

#Piede {
width: 100%; 
clear: both;
height: 75%;  /* 73% 4 Safari to sweep Footer into Endo */
border: .2em solid #ffff00;
      background-image: url(Xtree.gif);
      background-position: 52% .5%; 
      background-repeat: no-repeat; 
      background-attachment: fixed;  
 font-family: Comic sans serif, Verdana, Geneva, Tahoma, Arial, ; 
      font-weight: bold;
      font-style: italic;
      font-variant: small-caps; 
      font-size: 1em;      
 }


.container {
  position: relative;
  width: 100%;
  margin: 0em .5em 17em .5em;   /* IE6 >bottom margin>Endo below container-15 with Footer & Continer font-size: 1em, neatly fits IE6 */
  font-family: Comic sans serif;
  font-style: italic;
  font-size: 1em;
  color: #ff0000;
   }

.gauche {
   position: absolute;
   top: 0em;
   left: -.2em;
   width: 50%;
   }

.droite {
   position: absolute;
   top: 0em;
   right: .5em;
   width: 50%;
   } 



#HR{
width: 80%;
margin: .5em auto;
height: .1em
color: #ffff00;                /* 4 IE */
background-color: #ffff00;    /* 4 Opera, Mozilla */
border-width: .07em;
border-style: solid;
border-color: #ff0000;
      font-family: Comic sans serif, Verdana, Geneva, Tahoma, Arial, ; 
      font-weight: bold;
      font-style: italic;
      font-size: .7em; /* .5 */
      color: #ff0000;
text-align: center;
filter: alpha(opacity=50);    /* for IE */
opacity: 0.5;                 /* CSS3 standard */

}





.picture { 
background-color: #ffc0cb;
      font-family: Comic sans serif, Arial, Tahoma, Verdana, Geneva; 
      font-weight: bold;
      font-style: italic;
      font-variant: small-caps;
      font-size: .5em;    /* must've value-affects Corpo imgs-'s > effect if moved 2 picture img (closer to imgs) */
z-index: 15;
} 

.picture img 
{
border: 2px solid #00ff00;
z-index: 15;
} 

.W{ 
   position: absolute;   /* Container (Header) is relative;  ciontent (imgs) are absolute within the container */
   top: 10em;
   left: -4em;
   font-size: .5em;   /* direct application overrides previous rules */
 }
 
.H { 
   position: absolute;
   top: 10em;
   right: -4em;
   font-size: .5em; 
 }  



.J   {
position: absolute;   /* Container (Header) is relative;  ciontent (imgs) are absolute within the container */
top: 2em;
left: -9em;  
background-color: #E6E6FA;   /* Lavender */
border: 2px solid #ff0000;
font-size: .5em;
}

.M   {
position: absolute;
top: 2em;
right: -9em;
background-color: #F0FFF0;   /* Honeydew*/
border: 2px solid #ff0000;
font-size: .5em;  /* not < .4 this's the critical mass */
 }






iframe.treasure
{ 
width: 15em; 
height: 5em;
clear: both;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
border: .3em inset #F7332F;  /* Strawberry wine */ 
filter: alpha(opacity=80);    /* for IE */
opacity: 0.8;                 /* CSS3 standard */
} 

.centre {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


// 3-D Button Link




div#buttonA
 {
margin-left: 50px;;
}

div#buttonA ul {
    margin: 0px;
    padding: 0px;
    font-family: Comic sans serif, Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-style: italic;
   font-size: .7em; 
    line-height: 30px;
}
div#buttonA li {
    list-style-type: none;
    height: 60px;
    width: 200px;
    margin: 20px;
    text-align: center;
}
div#buttonA li a {
    height: 100%;
    width: 100%;
    display: block;
    text-decoration: none;
    border-width: 6px;
}
div#buttonA li a:link {
    color: #ff0000;
    font-weight: bold;
    background-color: #ffff00;
    border-style: inset;
}
div#buttonA li a:visited {
    color: #00ff00;
    font-weight: bold;
    background-color: #ffff00;
    border-style: inset;
}
div#buttonA li a:hover {
    font-weight: bold;
    color: #FFC0CB;
    background-color: #ffff00;
    border-style: outset;
}
div#buttonA li a:active {
    font-weight: bold;
    color: #FF1493;
    background-color: #ffff00;
    border-style: inset;
} 




#Border.bord { 
position: relative;
top: 10;
left: 10;
right: 10;
bottom: 10;
border-width: 2px;
border-style: solid;
border-color: #D4AD17;   /*  border: .4em solid #D4A017 #98bf21 */
}






//Notes:

-html>body #Meso  {....} a hack 2 hide code from IE6 or >
-Body {  font-size: 62.5%;}   /* &#8757; 1 basic em=16px &#8756; 1em=62.5% of basic em=10px
-iframe {height: 6em;}  /* > font-size &#8594; &#8593; height auto < height required 4 iframe */
-Endo {font-size: 0em;} means NO Font; reomving it is better as it allows inherited font-size value to work
- > font-size > img lateral shift & vv 
-Footer
height: 60%;  /* 4 Safari to sweep Footer into Endo */
-Cntainer
 margin: 0em .5em 20em .5em;   /* IE6 >bottom margin>Endo below container */
*Font-size: ±
Endo: .5em
-Tune parents e.g Endo:.5em
-Finetune Children: e.g. Img .5em
-Avoid specifying Body font-size
_set font-size value 2 users' default font size "normal"
-If browser doesn't fint font-size sttings, it falls back on its Basic Default Font-Size
-Cut
height: 100%;  /* 4 Safari 2 close Corpo */
height: 73%;  /* 4 Safari to sweep Footer into Endo */
height: 440%;  /* Vital 4 Meso 2 even appear */
- canvas-linen.jpg can be used as BG
-Note: background-repeat: repeat-x top;
-index.htm contracts medially on small screens, so Left elements: left: 1em;.., Right elements: right: 1em;.. to avoid positioning from Midline
e.g index.htm Piede Conyainer
-Colors:
   -background-color: #FFCC11;   /* Mustard */ 
   -bright Gold=#FFD700