شرح تركيب هاك اسامي الاعضاء داخل مربعات

.red
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #FF1515;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#FF1515; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

.green
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #006600;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#006600; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

.blue
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #0000FF;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#0000FF; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

.gray
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #CCCCCC;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#CCCCCC; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

.fushia
{
margin: 0px 0px 0px 0px;
width:48;
border: 2px solid #FF66CC;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#FF66CC; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

.orang
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #FF9900;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#FF9900; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center
}

.teal
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #008080;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#008080; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

.brown
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #BF0000;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#BF0000; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

.pink
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #CC33FF;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#CC33FF; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

.black
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #000000;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#000000; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

.white
{
margin: 0px 0px 0px 0px;
width: 48;
border: 2px solid #ffffff;
cursor: pointer;
font-family:MS Sans Serif; 
font-size:10px; 
vertical-align:middle; 
letter-spacing:0; 
color:#ffffff; 
padding-****:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

<input type="text" name="T1" size="17" class="red" value="

" readonly style="width: 90">