#wrapper {
    width: 100% /* 780px is just wide enough to fill and 800px screen... I changed it to 100 % */
    margin: auto; /* It's important to set the margin to auto if you want the layout to center */
    background: transparent;   /* Changed background: #ccc; to same page original background-color: #ff00ff; */
    text-align: center;
    font-family: comic sans serif;  /* didn't work with font-family: comic sans serif; */
    font-style: oblique;
    font-size: .75em;    /* .css overrides .htm body {} */
    font-weight: bold;  /* .css overrides .htm body {} */
    color: #ff0000;

}       /* i removed:  border: 1px solid #999; and added a separate rule for it later in doc */



#header, #column1, #column2, #column3, #column4 ,#footer {
    padding: .25em;  /* This sets a 10px padding on all of our content boxes ---i changed it to 5px*/
} 



#header {
    font-color: 00ff00;
    margin: 0;
    padding 0; 
} 

#section1 {
    float: left; /* Sets this section to the left */
    width: 48%;
}
/* removed: background: #ccc; */


    #column1 {
        float: left; /* Sets this column to the left inside its section */
        width: 48%;
    }

    #column2 {
        float: right; /* Sets this column to the right inside its section*/
        width: 48%;
    }

#section2 {
    float: right; /*Sets this sectionto the right */
    width: 48%;
}

    #column3 {
        float: left; /* Sets this column to the left inside its section */
        width: 48%;
    }

    #column4 {
        float: right; /* Sets this column to the right inside its section*/
        width: 48%;
    }

#footer {
    font-color: 00ff00; 
    clear: both;
}


#border {border-style: dotted;  /* border place in .css is important for part it borders */
         border-color: #FF1493;
         border-width: 2px;
}

P:first-letter {color: #ff0000;
                font-style: italic;
                font-size: 100%;
}



.centerblock {
  position: relative;
  width: auto;
  height: 30%;
  left: auto;
  top: auto;
}




.left 
{
    text-align: left;  
    margin-left: auto;
    margin-right: auto;
}





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








.imageleft { float: left;}    /*margin-left 15px; }*/
.imageright { float: right;}   /*margin-right: 15px; }*/ 
.imagecenter { text-align: center;}    /*margin-left: 25%; margin-right: auto }  */
                                    
IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }


P.blocktext {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}






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


.container {
   position: relative;
   height: 50px;
   }

.lt {
   position: absolute;
   text-align: left /* depends on element width */
   left: 0;
   width: 50%;
   }

.right-element {
   position: absolute;
   text-align: right /* depends on element width */
   right: 0;
   width:20%;
   } 












.left {
    text-align: left;
     margin-left: auto;
    margin-right: auto;
}






.right {
    position: absolute;
    text-align: right;  /*=.rt {text-align:right} originally: right*/
    margin-left: auto;
    margin-right: auto;
}


.left {
    position: absolute;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}





p.left {text-align:right} /# ditto */




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