/*-----------------------------------------------*/
                                                   
    box1 controls top                               
    box2 controls bottom                            
    
    you get them in your page by
	
    div class="box1" 
    div class="box2"   


/*-----------------------------------------------*/

.box1 {
margin:0px;
auto;width:155px;
text-align:center;
padding:1px;
background-color:black;
border:1px solid black;
font-size:11px;
color:white;
FONT-WEIGHT: bold;
}

.box2 {
margin:0px;
auto;width:155px;
text-align:center;
padding:1px;
background-color:#FFFFFF;
border: 1px solid black;
font-size:10px;

}


/* this controls the extra box */

.box1a {
margin:0px;
auto;width:155px;
text-align:center;
padding:1px;
background-color:cc0000;
border:1px solid black;
font-size:12px;
color:white;
FONT-WEIGHT: bold;
}

.box2a {
margin:0px;
auto;width:155px;
text-align:center;
padding:1px;
background-color:white;
border: 1px solid black;
font-size:10px;

}


.box3 {
margin:0px;
auto;width:465px;
text-align:center;
padding:1px;
background-color:black;
border:1px solid black;
font-size:11px;
color:white;
FONT-WEIGHT: bold;
}

.box4 {
margin:0px;
auto;width:155px;
text-align:center;
padding:1px;
background-color:#FFFFFF;
border: 1px solid black;
font-size:10px;

}


/* this controls the extra box */

.box3a {
margin:0px;
auto;width:500px;
text-align:center;
padding:1px;
background-color:FFFFFF;
border:1px solid black;
font-size:12px;
color:white;
FONT-WEIGHT: bold;
}

.box4a {
margin:0px;
auto;width:465px;
text-align:center;
padding:1px;
background-color:black;
border: 1px solid black;
font-size:10px;

}