html, body {margin:0px 0px 0px 0px; 
padding:0px 0px 0px 0px; 
background: rgb(0,75,0); 
font-family:verdana; 
font-size:12px;
}

/* The header and footer */
.headr {display:block; 
        line-height:50%; 
        height:200px; 
        background: rgb(0,75,0); 
        color:#ffffcc; 
        text-align:left; 
        margin: 0 0 0 204px; 
        padding:10px 0px 0px 0px;
        font-size:1.25em;
        font-style: oblique;
       }

.footr {display:block; 
        height:50px; 
        background:rgb(0,75,00); 
        color:#ffffcc; 
        text-align:center; 
        padding:5px;
        font-size:10px; 
        border-right: 250px solid #000; 
        border-left: 204px solid rgb(0,75,0);
background-image: url(sphilipftr.jpg);
        background-repeat: no-repeat;
        background-position: 100%;

       }

body {background-image: url(OSShield_g.gif);
        background-repeat: no-repeat;
      }

.headr {background-image: url(sphiliphdr.jpg);
        background-repeat: no-repeat;
        background-position: 100%;
z-index: 100;
       }
#box {padding: 10px;}

.headr h3, .headr h2 {line-height: 120%;
           color: gold;
       }
.headr h2 {line-height: 100%;
           color: gold;
       }

/* This bit does all the work */
#container {position:relative; display:block; background:#fff; border-left:205px solid rgb(0,75,0); border-right:250px solid #000; overflow:visible;}
* html #container {display:inline-block;}
#left {float:left; position:relative; width:186px; margin-left:-196px; display:inline;}
#left {text-align: left; color: white;}
#left p {padding: 0 15px 0 15px;}
#left a, #left ul {text-decoration: none;
         color: white;
         list-style-type: square;
         font-family: Times;
         font-size: 1.1em;
         padding: 0px 0px 0px 10px;
         
         line-height: 120%;
         font-style: normal;
         text-align: left;
          }
#left a:hover{
       background-color: black;
       font-weight: normal;
       color: gold;
       }

* html #left {width:186px;}

#right {
background-image: url(bclick.gif);
    background-repeat: no-repeat;
background-position: 90% 25%;
float:right; position:relative; width:240px; margin-right:-240px; display:inline; color: white;}
#right h1, #right p, #right img, #right h4, #right a {padding: 0px 0px 0px 15px;}
#right a {color: white;
         }
#right a:hover{
        color: gold;
       }


#center {padding: 15px 15px 100px 15px;
         text-align: justify;
line-height: 150%;
background-image: url(tcorner.gif);
    background-repeat: no-repeat;
    color: darkblue;
    background-position: 100% 0%;

        }

.clear {clear:both;height:1px;overflow:hidden;}
a:visited {color:#000;}



/* Just to extend each column */
/* #container a:visited, a {color:#000; text-decoration:none;}
#container a span {display:none;}
#container a:active, #container a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
#container a:active span, #container a:focus span {display:block;} */

.comment {padding: 2%; text-align:center; background: rgb(0,75,0); color: white;}
.comment a {text-decoration:none; color: gold; font-weight:bold;}
.comment a:hover {color: yellow;}
em {font-weight:bold;}


#academy {padding: 0 0 15px 120px;
background-image: url(sm_academy.gif);
    background-repeat: no-repeat;
background-position: 0% 0%;
}

#ateneo {padding: 0 0 15px 120px;
background-image: url(sm_ateneo.gif);
    background-repeat: no-repeat;
background-position: 0% 0%;
}

#newman {padding: 0 0 15px 120px;
background-image: url(sm_newman.gif);
    background-repeat: no-repeat;
background-position: 0% 0%;
}