---

.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-left: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-left: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-left: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-left: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-left: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-left: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-left: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-left: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-left: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-left: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-left:0; 
padding-right:0; 
padding-top:0; 
padding-bottom:0; 
background-color:#FFE3DF;
background-image: url('altaer/color_bg.gif'); 
text-align:center;
}

---

code1: [ مهم: يجب تغيير كلمة ( red ) لكل مجموعة مثال (green - blue - pink ) ]

---

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

---

---

" readonly style="width: 90">

---

1- كود حجم المربع : ( width: 48; ) - صورة (12) تحديد (1)
1- كود نوع الخط : ( font-family:MS Sans Serif; ) - صورة (12) تحديد (2)
3- كود لون خلفية المربع : ( background-color:#FFE3DF; ) - صورة (12) تحديد (3)
4- كود لون النص داخل المربع : ( color:#ffffff; ) - صورة (12) تحديد (4)
5- كود صورة الخلفية للمربع : ( background-image: url('altaer/color_bg.gif'); ) - صورة (12) تحديد (5)
6- كود اللون الخاص بالمجموعة في خطوة (2) مهم جدا : ( class="red" ) صورة (13) تحديد (1)
استبداله باسم المجموعة الخاصة بالكود المراد استخدامه لمجموعة المستخدمين في خطوة (2) عند ( code1 )
---------------------
ملحوظة : مجموعات الألوان كالتالي:
.red = أحمر - .green = أخضر - .blue = أزرق - .gray = رمادي - .fushia = فوشي
.orang = برتقالي - .brown = بني - .pink = بنفسج - .black = اسود - .white = أبيض
---------------------