=== modified file 'dhis-2/dhis-services/dhis-service-patient/src/main/java/org/hisp/dhis/patientchart/DefaultPatientChartService.java'
--- dhis-2/dhis-services/dhis-service-patient/src/main/java/org/hisp/dhis/patientchart/DefaultPatientChartService.java	2012-01-31 07:59:24 +0000
+++ dhis-2/dhis-services/dhis-service-patient/src/main/java/org/hisp/dhis/patientchart/DefaultPatientChartService.java	2012-02-01 09:10:08 +0000
@@ -28,7 +28,6 @@
 package org.hisp.dhis.patientchart;
 
 import static org.hisp.dhis.chart.Chart.TYPE_BAR;
-import static org.hisp.dhis.chart.Chart.TYPE_LINE;
 
 import java.awt.Color;
 import java.awt.Font;

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/resources/org/hisp/dhis/caseentry/i18n_module.properties'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/resources/org/hisp/dhis/caseentry/i18n_module.properties	2012-01-15 16:13:02 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/resources/org/hisp/dhis/caseentry/i18n_module.properties	2012-02-01 09:10:08 +0000
@@ -467,4 +467,5 @@
 anonymous_event_reports = Anonymous Event Reports
 intro_anonymous_event_reports = Create anonymous events report by reported date.
 activity_planning = Activity Planning
-back_to_main_menu = Back to main menu
\ No newline at end of file
+back_to_main_menu = Back to main menu
+of = of
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/resources/struts.xml'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/resources/struts.xml	2012-01-31 05:11:00 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/resources/struts.xml	2012-02-01 09:10:08 +0000
@@ -349,6 +349,7 @@
 				,javascript/entry.js
 				,javascript/relationshipPatient.js
 			</param>
+			<param name="stylesheets">style/patient.css</param>
 		</action>
 		
 		<action name="selectDataRecordingFromRegistration"

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/addPatientForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/addPatientForm.vm	2011-10-29 14:16:54 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/addPatientForm.vm	2012-02-01 09:10:08 +0000
@@ -46,9 +46,9 @@
 	#parse( "/dhis-web-caseentry/patientForm.vm" )
 </table>
 
-<p style="margin-top:10px">
-	<input type="submit" value="$i18n.getString( 'add' )" style="width:10em"/>
-	<input type="button" value="$i18n.getString( 'back_to_registration' )" onclick="loadPatientList();" style="width:10em"/>
+<p>
+	<input type="submit" class="button" value="$i18n.getString( 'add' )"/>
+	<input type="button" class="button" value="$i18n.getString( 'back_to_registration' )" onclick="loadPatientList();"/>
 </p>
 
 </form>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/addRelationshipForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/addRelationshipForm.vm	2011-12-28 06:21:57 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/addRelationshipForm.vm	2012-02-01 09:10:08 +0000
@@ -16,7 +16,7 @@
 <input type="hidden" id="patientId" name="patientId" value="$patient.id"/>
 <table>
 <tr>
-    <td style="vertical-align:top" bgcolor="#cccccc">
+    <td class='infor'>
         <table>
 			<tr>
 				<th colspan='2'>$i18n.getString('patient_profile')</th>
@@ -50,7 +50,7 @@
             </tr>
         </table>
     </td>    
-    <td style="vertical-align:top">
+    <td class='infor'>
         <table>  
 			<tr>
 				<th colspan='2'>$i18n.getString('relationship_for') $patient.getFullName()</th>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/addRelationshipPatientForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/addRelationshipPatientForm.vm	2011-10-29 14:16:54 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/addRelationshipPatientForm.vm	2012-02-01 09:10:08 +0000
@@ -33,9 +33,9 @@
 <input type="hidden" id="relationshipId"  name="relationshipId" value="$patient.id"/> 
 <table>	
 	<tr>
-		<td><label for="relationship_type">$i18n.getString("relationship_type")<em title="$i18n.getString( "required" )" class="required">*</em></label></td>
+		<td class='text-column'><label for="relationship_type">$i18n.getString("relationship_type")<em title="$i18n.getString( "required" )" class="required">*</em></label></td>
 		<td class="input-column">
-			<select name="relationshipTypeId" id="relationshipTypeId" style="width:28.2em" class="{validate:{required:true}}" >
+			<select name="relationshipTypeId" id="relationshipTypeId" class="{validate:{required:true}}" >
 				<option value="">[$i18n.getString( "please_select" )]</option>        
 				#foreach ($relationship in $relationshipTypes)
 					<option value="$relationship.id">${relationship.aIsToB} - ${relationship.bIsToA}</option>
@@ -48,9 +48,9 @@
 
 	</table>
 
-<p style="margin-top:10px">
-	<input type="submit" value="$i18n.getString( 'add' )" style="width:10em"/>
-    <input type="button" id='backbtn' value="$i18n.getString( 'back_to_registration' )" onclick="showRelationshipList($patient.id);" style="width:10em">
+<p>
+	<input type="submit" class='button' value="$i18n.getString( 'add' )" />
+    <input type="button" class='button' id='backbtn' value="$i18n.getString( 'back_to_registration' )" onclick="showRelationshipList($patient.id);">
 </p>
 
 </form> 	

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/anonymousRegistration.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/anonymousRegistration.vm	2012-01-31 05:11:00 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/anonymousRegistration.vm	2012-02-01 09:10:08 +0000
@@ -12,7 +12,7 @@
 	<input type='hidden' id='selectedProgramId'>
 	<table>
 		<tr>
-			<td class='textColumn'>$i18n.getString('program')</td>
+			<td class='text-column'>$i18n.getString('program')</td>
 			<td>
 				<select id='programId' name='programId' class='criteria' onchange='loadEventForm();'>
 					<option value="">[ $i18n.getString('please_select') ]</option>
@@ -23,7 +23,7 @@
 			</td>
 		</tr>
 		<tr>
-			<td class='textColumn'><label for="executionDate">$i18n.getString( "report_date" ) </label></td>
+			<td class='text-column'><label for="executionDate">$i18n.getString( "report_date" ) </label></td>
 			<td><input type="text" id="executionDate" name="executionDate" class='criteria' value="$!format.formatDate( $programStageInstance.executionDate )" >
 				<script type="text/javascript">
 				   datePickerValid( 'executionDate', false );

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm	2012-01-31 05:11:00 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataEntryForm.vm	2012-02-01 09:10:08 +0000
@@ -77,7 +77,7 @@
 				##dataElementRowCount
 				<td>$dataElementRowCount</td>        
 				##data element name
-				<td class='textColumn'>
+				<td class='text-column'>
 					<span id="value[$programStageDataElement.dataElement.id].name" title="$!encoder.htmlEncode( $programStageDataElement.dataElement.description )">
 						$encoder.htmlEncode( $programStageDataElement.dataElement.name ) 
 						#if ( $programStageDataElement.compulsory )

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataRecordingSelect.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataRecordingSelect.vm	2012-01-31 06:22:35 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataRecordingSelect.vm	2012-02-01 09:10:08 +0000
@@ -45,7 +45,7 @@
 			<td>
 				<table>
 				   <tr>
-						<td class='textColumn'><label for="programId">$i18n.getString( "program" )</label></td>
+						<td class='text-column'><label for="programId">$i18n.getString( "program" )</label></td>
 						<td>
 							<select id="programId" name="programId" class="criteria" onchange="loadProgramStages();" #if( $programs.size() == 0 ) disabled="disabled" #end>
 								<option value="0">[$i18n.getString( "select" )]</option>
@@ -56,7 +56,7 @@
 						</td>
 					</tr>
 					<tr id='programStageIdTR' >
-						<td class='textColumn'><label for="programStageId">$i18n.getString( "program_stage" )</label></td>
+						<td class='text-column'><label for="programStageId">$i18n.getString( "program_stage" )</label></td>
 						<td>
 							<select id="programStageId" name="programStageId" class="criteria" onchange="javascript:loadDataEntry();" >
 							</select>
@@ -64,7 +64,7 @@
 					</tr>
 					
 					<tr>
-						<td class='textColumn'><label for="executionDate">$i18n.getString( "report_date" ) </label></td>
+						<td class='text-column'><label for="executionDate">$i18n.getString( "report_date" ) </label></td>
 						<td><input type="text" id="executionDate" name="executionDate" class="criteria" value="$!format.formatDate( $programStageInstance.executionDate )" >
 							<script type="text/javascript">
 							   datePickerValid( 'executionDate', false );
@@ -73,7 +73,7 @@
 					</tr>
 					
 					<tr id='dueDateTR'>
-						<td class='textColumn'><label for="dueDate">$i18n.getString( "due_date" ) </label></td>
+						<td class='text-column'><label for="dueDate">$i18n.getString( "due_date" ) </label></td>
 						<td><input type="text" id="dueDate" name="dueDate" class="criteria" value="$!format.formatDate( $programStageInstance.dueDate )" readonly> </td>
 					</tr>
 				</table>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/patient.js'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/patient.js	2012-01-11 08:47:32 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/patient.js	2012-02-01 09:10:08 +0000
@@ -584,6 +584,7 @@
 {				
 	if( programInstanceId == 0 )
 	{
+		hideById( 'unenrollmentFormDiv' );
 		return;
 	}
 	
@@ -598,6 +599,8 @@
 			setFieldValue( 'dateOfIncident', json.enrollmentDate );
 			setFieldValue( 'dateOfEnrollmentDescription', json.dateOfEnrollmentDescription );
 			setFieldValue( 'dateOfIncidentDescription', json.dateOfIncidentDescription );
+			disable( 'enrollmentDate' );
+			disable( 'dateOfIncident' );
 			showById( 'unenrollmentFormDiv' );
 			jQuery( "#loaderDiv" ).hide();
 		});

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientForm.vm	2011-12-27 06:23:35 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientForm.vm	2012-02-01 09:10:08 +0000
@@ -8,9 +8,9 @@
 #end
 
 <tr>
-	<td><label for="registration_date">$i18n.getString( "registration_date" )<em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
+	<td class='text-column'><label for="registration_date">$i18n.getString( "registration_date" )<em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
 	<td class="input-column">
-		<input type="text" id="registrationDate" name="registrationDate" style="width:28em" class="{validate:{required:true}}"/>
+		<input type="text" id="registrationDate" name="registrationDate" class="{validate:{required:true}}"/>
 		<script type="text/javascript">
 			datePickerValid( 'registrationDate', true );
 		</script>    
@@ -21,17 +21,17 @@
 	<th colspan="2" class="heading-column">$i18n.getString( "demographics" )</th>
 </tr>
 <tr>
-	<td><label for="fullName">$i18n.getString( "full_name" )</label></td>
+	<td class='text-column'><label for="fullName">$i18n.getString( "full_name" )</label></td>
 	<td class="input-column" >
-		<input type="text" id="fullName" name="fullName" style="width:28em" class="{validate:{required:true, unicodechars:true, rangelength:[7,50]}}"/>
-		<img src='../images/search.png' id="searchPatientByNameBtn" name="searchPatientByNameBtn" style="cursor: pointer;" width="20" height="20"/>
+		<input type="text" id="fullName" name="fullName" class="{validate:{required:true, unicodechars:true, rangelength:[7,50]}}"/>
+		<img src='../images/search.png' id="searchPatientByNameBtn" name="searchPatientByNameBtn" class="imgButton"/>
 	</td>
 </tr>
 	
 <tr>
-	<td><label for="gender">$i18n.getString( "gender" )<em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
+	<td class='text-column'><label for="gender">$i18n.getString( "gender" )<em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
 	<td class="input-column">
-		<select id="gender" name="gender" style="width:28.3em" class="{validate:{required:true}}">
+		<select id="gender" name="gender" class="{validate:{required:true}}">
 			<option value="" selected="selected">[$i18n.getString( "please_select" )]</option>
 			<option value="M" >$i18n.getString( "male" )</option>
 			<option value="F">$i18n.getString( "female" )</option>
@@ -41,9 +41,9 @@
 </tr>
 
 <tr>
-	<td><label for="dobType">$i18n.getString( "dob_type" )<em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
+	<td class='text-column'><label for="dobType">$i18n.getString( "dob_type" )<em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
 	<td class="input-column">
-		<select id='dobType' name="dobType" style="width:28.3em" class="{validate:{required:true}}">
+		<select id='dobType' name="dobType" class="{validate:{required:true}}">
 			<option value="V" selected="selected">$i18n.getString( "verified" )</option>
 			<option value="D" >$i18n.getString( "declared" )</option>
 			<option value="A" >$i18n.getString( "approximated" )</option>
@@ -53,35 +53,35 @@
 </tr>
 
 <tr id='birthdaySpan'>
-	<td><label for="birthDate">$i18n.getString( "date_of_birth" )<em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
+	<td class='text-column'><label for="birthDate">$i18n.getString( "date_of_birth" )<em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
 	<td class="input-column">			
-		<input type="text" id="birthDate" name="birthDate" style="width:26.5em" />
+		<input type="text" id="birthDate" name="birthDate" />
 	</td>
 	<td></td>
 </tr>
 
-<tr id='ageSpan' style="display:none" >
-	<td><label for="age">$i18n.getString( "age" ) </label><em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
-	<td>
-		<select id="ageType" name="ageType" style="width:18em" >
+<tr id='ageSpan' class="hidden" >
+	<td class='text-column'><label for="age">$i18n.getString( "age" ) </label><em title="$i18n.getString( 'required' )" class="required">*</em></label></td>
+	<td class="input-column">
+		<select id="ageType" name="ageType" style="width:80px">
 			<option value="D"> $i18n.getString('day')</option>
 			<option value="M"> $i18n.getString('month')</option>
 			<option value="Y"> $i18n.getString('year')</option>
 		</select>
-		<input type="text" id="age" name="age" style="width:9.7em" class="{validate:{number:true, alphanumeric: true}}"/>
+		<input type="text" id="age" name="age" class="{validate:{number:true, alphanumeric: true}}"  style="width:278px" />
 	</td>
 	<td></td>
 </tr>
 
 <tr>
 	<td></td>
-	<td><input id="memberValidator" style="display:none" class="{validate:{required:true}}"/></td>
+	<td><input id="memberValidator" class="hidden {validate:{required:true}}"/></td>
 </tr>
 
 <tr>
-	<td><label for="bloodGroup">$i18n.getString( "blood_group" )</label></td>
+	<td class='text-column'><label for="bloodGroup">$i18n.getString( "blood_group" )</label></td>
 	<td class="input-column">
-		<select type="text" id="bloodGroup" name="bloodGroup" style="width:28.3em" >
+		<select type="text" id="bloodGroup" name="bloodGroup">
 			<option value="">[$i18n.getString( "please_select" )]</option>
 			<option value="A+">A+</option>
 			<option value="A-">A-</option>
@@ -97,13 +97,13 @@
 <tr><td colspan="2">&nbsp;</td></tr>	
 <tr>
 	<td></td>
-	<td><input type="button" id='checkDuplicateBtn' name='checkDuplicateBtn' value="$i18n.getString('check_duplicate')" /></td>
+	<td><input type="button" class='button' id='checkDuplicateBtn' name='checkDuplicateBtn' value="$i18n.getString('check_duplicate')" /></td>
 </tr>
 <tr><td colspan="2">&nbsp;</td></tr>	
 
 <!-- UNDERAGE -->
 <tr id='underAgeDiv'>
-	<td>$i18n.getString("is_underage")</td>
+	<td class='text-column'>$i18n.getString("is_underage")</td>
 	<td>
 		<input type="checkbox" name="underAge" id="underAge" onclick="toggleUnderAge(this);" value="true"/>
 	</td>
@@ -114,9 +114,9 @@
 	<tr><th colspan="2" class="heading-column">$i18n.getString( "patient_identifiers" )</th></tr>
 	#foreach ($identifierType in $identifierTypes)
 	<tr>
-		<td><label>$identifierType.name #if($identifierType.mandatory == true )<em title="$i18n.getString( 'required' )" class="required">*</em> #end</label></td>       
+		<td class='text-column'><label>$identifierType.name #if($identifierType.mandatory == true )<em title="$i18n.getString( 'required' )" class="required">*</em> #end</label></td>       
 			<td class="input-column">
-			<input type="text" style="width:28em" id="iden$identifierType.id" name="iden$identifierType.id" data="{related:$identifierType.related}" class="{validate:{required:$identifierType.mandatory, #if($!identifierType.noChars) maxlength:$identifierType.noChars, #end #if($identifierType.type=='number') number:true #elseif($!identifierType.type=='letter') lettersonly:true #end }}" /></td>
+			<input type="text" id="iden$identifierType.id" name="iden$identifierType.id" data="{related:$identifierType.related}" class="{validate:{required:$identifierType.mandatory, #if($!identifierType.noChars) maxlength:$identifierType.noChars, #end #if($identifierType.type=='number') number:true #elseif($!identifierType.type=='letter') lettersonly:true #end }}" /></td>
 	</tr>
 	#end
 #end
@@ -128,28 +128,28 @@
 	#foreach($attribute in $attributeGroup.attributes )
 		#if($!attribute)
 		<tr>
-			<td><label>$attribute.name #if($attribute.mandatory)<em title="$i18n.getString( 'required' )" class="required">*</em> #end</label></td>
+			<td class='text-column'><label>$attribute.name #if($attribute.mandatory)<em title="$i18n.getString( 'required' )" class="required">*</em> #end</label></td>
 			<td class="input-column">
 				#if( $attribute.valueType == "YES/NO" )
-					<select id="attr$attribute.id" name="attr$attribute.id" style="width:28.3em"> 
+					<select id="attr$attribute.id" name="attr$attribute.id"> 
 						<option value="" selected="selected">[$i18n.getString( "please_select" )]</option>
 						<option value="true">$i18n.getString( "yes" )</option>
 						<option value="false">$i18n.getString( "no" )</option>
 					</select>                
 				#elseif( $attribute.valueType == "DATE" )
-					<input type="text" id="attr$attribute.id" name="attr$attribute.id" style="width:28em" class=' #validate( "default"  $attribute.mandatory )'/>
+					<input type="text" id="attr$attribute.id" name="attr$attribute.id" class=' #validate( "default"  $attribute.mandatory )'/>
 					<script type="text/javascript">
 						datePickerValid( 'attr$attribute.id' );
 					</script>                    
 				#elseif( $attribute.valueType == "COMBO" )
-					<select  id="attr$attribute.id"  name="attr$attribute.id" style="width:28.3em" class='#validate( "default"  $attribute.mandatory )'>
+					<select  id="attr$attribute.id"  name="attr$attribute.id" class='#validate( "default"  $attribute.mandatory )'>
 						<option value="">[$i18n.getString( "please_select" )]</option>
 						#foreach ($option in $attribute.attributeOptions )
 							<option value="$option.id" >$option.name</option>
 						#end
 					</select>
 				#else 
-					<input type="text" id="attr$attribute.id" name="attr$attribute.id" style="width:28em" class="{validate:{required:$attribute.mandatory #if($!attribute.noChars),maxlength:$attribute.noChars #end #if($attribute.valueType=='NUMBER'),number:true #end }}" />
+					<input type="text" id="attr$attribute.id" name="attr$attribute.id" class="{validate:{required:$attribute.mandatory #if($!attribute.noChars),maxlength:$attribute.noChars #end #if($attribute.valueType=='NUMBER'),number:true #end }}" />
 				#end
 			</td>		
 		</tr>
@@ -164,28 +164,28 @@
 	<tr><th colspan="2" class="heading-column">$i18n.getString( "other_details" )</th></tr>
 	#foreach($attribute in $noGroupAttributes )
 		<tr>
-			<td><label>$attribute.name #if($attribute.mandatory)<em title="$i18n.getString( 'required' )" class="required">*</em> #end</label></td>
+			<td class='text-column'><label>$attribute.name #if($attribute.mandatory)<em title="$i18n.getString( 'required' )" class="required">*</em> #end</label></td>
 			<td class="input-column">
 				#if( $attribute.valueType == "YES/NO" )
-					<select id="attr$attribute.id"  name="attr$attribute.id" style="width:28.3em" > 
+					<select id="attr$attribute.id"  name="attr$attribute.id" > 
 						<option value="" >[$i18n.getString( "please_select" )]</option>             
 						<option value="true">$i18n.getString( "yes" )</option>
 						<option value="false" >$i18n.getString( "no" )</option>
 					</select>                
 				#elseif( $attribute.valueType == "DATE" )
-						<input type="text" id="attr$attribute.id" name="attr$attribute.id" style="width:28em" class='#validate( "default"  $attribute.mandatory )' />
+						<input type="text" id="attr$attribute.id" name="attr$attribute.id" class='#validate( "default"  $attribute.mandatory )' />
 						<script type="text/javascript">
 						   datePickerValid( 'attr$attribute.id' );
 						</script>                    
 				#elseif( $attribute.valueType == "COMBO" )
-					<select  id="attr$attribute.id" name="attr$attribute.id" style="width:28.3em" class='#validate( "default"  $attribute.mandatory )'>
+					<select  id="attr$attribute.id" name="attr$attribute.id" class='#validate( "default"  $attribute.mandatory )'>
 						<option value="">[$i18n.getString( "please_select" )]</option>
 						#foreach ($option in $attribute.attributeOptions )
 							<option value="$option.id" >$option.name</option>
 						#end
 					</select>
 				#else 
-					<input type="text" id="attr$attribute.id" name="attr$attribute.id" style="width:28em" class="{validate:{required:$attribute.mandatory #if($!attribute.noChars),maxlength:$attribute.noChars #end #if($attribute.valueType=='NUMBER'),number:true #end }}" />
+					<input type="text" id="attr$attribute.id" name="attr$attribute.id" class="{validate:{required:$attribute.mandatory #if($!attribute.noChars),maxlength:$attribute.noChars #end #if($attribute.valueType=='NUMBER'),number:true #end }}" />
 				#end
 			</td>		
 		</tr>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientRegistrationList.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientRegistrationList.vm	2011-12-21 09:21:08 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/patientRegistrationList.vm	2012-02-01 09:10:08 +0000
@@ -2,7 +2,7 @@
 <table>
 	
 	<tr>
-		<td>$i18n.getString( "search_result_matching_the_search_criteria" ):</td>
+		<td class='text-column' >$i18n.getString( "search_result_matching_the_search_criteria" ):</td>
 		<td>&nbsp;</td>
 		<td>&nbsp;</td>
 		<td>
@@ -15,7 +15,7 @@
 	</tr>	
 	
 	<tr>
-		<td>$i18n.getString( "total_result" )</td>
+		<td class='text-column' >$i18n.getString( "total_result" )</td>
 		<td>&nbsp;</td>
 		<td>&nbsp;</td>
 		<td>$!total</td>
@@ -91,7 +91,7 @@
 				
 				#end
 				
-				<td style="text-align:center">
+				<td>
 				  <a href="javascript:showProgramEnrollmentSelectForm( '$patient.id' )" title='$i18n.getString( "program_enrollment_management" )'><img src="../images/enroll.png" alt='$i18n.getString( "program_enrollment" )'></a>                  
 				  <a href="javascript:showUnenrollmentSelectForm('$patient.id')" title='$i18n.getString( "program_unenrollment_management" )'><img src="../images/unenroll.png" alt='$i18n.getString( "program_unenrollment_management" )'></a>
 				  <a href="javascript:showUpdatePatientForm( '$patient.id' )" title='$i18n.getString( "edit_profile" )'><img src="../images/edit.png" alt='$i18n.getString( "edit_profile" )'></a>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programEnrollmentForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programEnrollmentForm.vm	2012-01-11 07:19:34 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programEnrollmentForm.vm	2012-02-01 09:10:08 +0000
@@ -1,7 +1,7 @@
 <input type='hidden' id='registerEvent' name='registerEvent' value='$registerEvent'>
 
 #if( $programStageInstances.size() > 0 )
-	<table width=100%>
+	<table class='mainPageTable'>
 		<col id="noCol">
 		<col id="stageCol">    
 		<col id="entryCol">    
@@ -12,22 +12,17 @@
 		</tr>
 		
 	#set( $rowCount = 0 )
-	#set( $mark = 0 )
+	#set( $mark = false )
 	#set( $tabIndex = 1 )
 	
 	#foreach( $programStageInstance in $programStageInstances )
 	
-		#set( $rowCount = $rowCount + 1 )    
-		#if( $mark == 1 )
-			#set( $mark = 0 )
-		#else
-			#set( $mark = 1 )
-		#end       
-		<tr #if( $mark == 0 ) style="background-color:#dddddd" #end>
+		#set( $rowCount = $rowCount + 1 )   
+		<tr #alternate( $mark ) >
 			##rowCount
-			<td style="text-align:right">$rowCount</td>        
+			<td>$rowCount</td>        
 			##stage name
-			<td>
+			<td class='textColumn'>
 				<span id="value[$programStageInstance.id].name" title="$!encoder.htmlEncode( $programStageInstance.programStage.description )">
 					$encoder.htmlEncode( $programStageInstance.programStage.name )            
 				</span>
@@ -35,14 +30,15 @@
 				   
 			##entry
 			#set( $duedateId = "value_"+$programStageInstance.id+"_date" )        
-			<td>        
+			<td class='input-column '>        
 				<input type="text" id="$duedateId" name="entryfield" value="$!format.formatDate( $programStageInstance.dueDate )" onchange="saveDueDate( $programStageInstance.id, '$encoder.jsEncode( $programStageInstance.programStage.name )' )" tabindex="$tabIndex" >
-			</td>
-			<script type="text/javascript">
-				datePicker( '$duedateId' );
-			</script>       
+				<script type="text/javascript">
+					datePicker( '$duedateId' );
+				</script> 
+			</td>      
 		</tr>
 		#set( $tabIndex = $tabIndex + 1 )
+		#set( $mark = !$mark  )
 	#end
 	</table>
 #end

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programEnrollmentSelectForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programEnrollmentSelectForm.vm	2012-01-31 05:43:59 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programEnrollmentSelectForm.vm	2012-02-01 09:10:08 +0000
@@ -1,30 +1,30 @@
 <h3>$i18n.getString( "patient_registered" )</h3>
 
-<div >
+<div>
 
-	<table width='100%'>
+	<table>
 		<tr>
-			<td class='bold' style="width:100px">$i18n.getString( "full_name" ):</td>
-			<td>$encoder.htmlEncode( $patient.getFullName() )</td>
+			<td class='bold text-column'>$i18n.getString( "full_name" )</td>
+			<td>:$encoder.htmlEncode( $patient.getFullName() )</td>
 		</tr>
 		<tr>
-			<td class='bold'>$i18n.getString( "gender" ):</td>
-			<td>$i18n.getString( $patient.gender )</td>
+			<td class='bold text-column'>$i18n.getString( "gender" )</td>
+			<td>:$i18n.getString( $patient.gender )</td>
 		</tr>    
 		<tr>
-			<td class='bold'>$i18n.getString( "date_of_birth" ):</td>
-			<td>$format.formatDate( $patient.birthDate )</td>
+			<td class='bold text-column'>$i18n.getString( "date_of_birth" )</td>
+			<td>:$format.formatDate( $patient.birthDate )</td>
 		</tr>
 		<tr>
-			<td class='bold'>$i18n.getString( "age" ):</td>
-			<td>$encoder.htmlEncode( $patient.getAge() )</td>
+			<td class='bold text-column'>$i18n.getString( "age" )</td>
+			<td>:$encoder.htmlEncode( $patient.getAge() )</td>
 		</tr>
 		<tr>
 			<td>&nbsp;</td>
 		</tr>
 		<tr>
-			<td align='left' colspan='2'>
-				<input type="button" value="$i18n.getString( "back_to_registration" )" onclick="loadPatientList();" style="width:10em">
+			<td colspan='2'>
+				<input type="button" class='button' value="$i18n.getString( 'back_to_registration' )" onclick="loadPatientList();" >
 			</td>
 		</tr>
 	</table>
@@ -40,13 +40,13 @@
 		<!-- Enroll program TAB -->
 		<div id="tab-1">
 			<form id='programEnrollmentSelectDiv' name='programEnrollmentSelectDiv' method='POST'>
-    <input type="hidden" id="patientId" name="patientId" value="$patient.id">    
+			<input type="hidden" id="patientId" name="patientId" value="$patient.id">    
 
-	<table width='100%'>    
+			<table>    
 				<tr>
-					<td style="width:180px"><label for="programId">$i18n.getString( "program" )</label></td>
-					<td>
-						<select id="programId" name="programId" style='width:30.3em' onchange="showProgramEnrollmentForm('$patient.id', this.value);" style="min-width:200px" >
+					<td class='text-column'><label for="programId">$i18n.getString( "program" )</label></td>
+					<td class='input-column'>
+						<select id="programId" name="programId" onchange="showProgramEnrollmentForm('$patient.id', this.value);" >
 							<option value="0">[$i18n.getString( "select" )]</option>
 							#foreach( $program in $programs )
 								<option value="$program.id" singleevent='$program.singleEvent'>$encoder.htmlEncode( $program.name )</option>
@@ -56,13 +56,13 @@
 					<td></td>
 					</td></td>
 				</tr>   
-				<tr id='enrollmentDateTR' style='display:none;'>
-					<td><label for="enrollmentDate"><span id='enrollmentDateDescription'></span><em title="$i18n.getString( "required" )" class="required"> * </em></label></td>
-                    <td colspan='2' align='left'><input type="text" id="enrollmentDate" name="enrollmentDate" style='width:30em' disabled="disabled" class="{validate:{required:true}}"></td>
+				<tr id='enrollmentDateTR' class='hidden'>
+					<td class='text-column'><label for="enrollmentDate"><span id='enrollmentDateDescription'></span><em title="$i18n.getString( "required" )" class="required"> * </em></label></td>
+                    <td colspan='2' class='input-column'><input type="text" id="enrollmentDate" name="enrollmentDate" disabled="disabled" class="{validate:{required:true}}"></td>
 				</tr>
-				<tr id='dateOfIncidentTR' style='display:none;'>
-					<td><label for="dateOfIncident"><span id='dateOfIncidentDescription'></span><em title="$i18n.getString( "required" )" class="required"> * </em></label></td>
-					<td colspan='2'><input type="text" id="dateOfIncident" name="dateOfIncident" style='width:30em' disabled="disabled" class="{validate:{required:true}}"></td>
+				<tr id='dateOfIncidentTR' class='hidden'>
+					<td class='text-column'><label for="dateOfIncident"><span id='dateOfIncidentDescription'></span><em title="$i18n.getString( "required" )" class="required"> * </em></label></td>
+					<td colspan='2' class='input-column'><input type="text" id="dateOfIncident" name="dateOfIncident" disabled="disabled" class="{validate:{required:true}}"></td>
 				</tr>
 				<tr>
 					<td></td>
@@ -71,9 +71,9 @@
 				</tr>
 				
 				<tr>
-					<td style="width:180px"></td>
+					<td></td>
 					<td colspan='2'>
-						<input type="submit" id='enrollBtn' name='enrollBtn' value="$i18n.getString( 'enroll_to_program' )" style='width:12em; display:none;' disabled='disabled'/>
+						<input type="submit" id='enrollBtn' name='enrollBtn' class='button hidden' value="$i18n.getString( 'enroll_to_program' )" />
 					</td>
 				</tr>
 				<tr>
@@ -81,14 +81,14 @@
                 </tr>
 			</table>
 			
-			<div id='programEnrollmentDiv' style='display:none;'></div>
+			<div id='programEnrollmentDiv' class='hidden'></div>
 			</form>
 		</div>
 
 		<!-- register-event TAB -->
 		<div id="tab-2">
-			<div id='dataRecordingSelectDiv' style='display:none;'></div>
-			<div id='dataEntryFormDiv'  style='display:none;'></div>
+			<div id='dataRecordingSelectDiv' class='hidden'></div>
+			<div id='dataEntryFormDiv' class='hidden'></div>
 
 		</div>
 </div>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programUnenrollmentSelectForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programUnenrollmentSelectForm.vm	2011-12-14 07:33:18 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programUnenrollmentSelectForm.vm	2012-02-01 09:10:08 +0000
@@ -24,28 +24,28 @@
 
 <h3>$i18n.getString( "program_unenrollment" )</h3>
 
-<table width='100%'>
+<table>
     <tr>
-        <td class="bold" style="width:100px">$i18n.getString( "full_name" ):</td>
+        <td class="bold text-column">$i18n.getString( "full_name" ):</td>
         <td>$encoder.htmlEncode( $patient.getFullName() )</td>
     </tr>
     <tr>
-        <td class="bold">$i18n.getString( "gender" ):</td>
+        <td class="bold text-column">$i18n.getString( "gender" ):</td>
         <td>$i18n.getString( $patient.gender )</td>
     </tr>    
     <tr>
-        <td class="bold">$i18n.getString( "date_of_birth" ):</td>
+        <td class="bold text-column">$i18n.getString( "date_of_birth" ):</td>
         <td>$format.formatDate( $patient.birthDate )</td>
     </tr>
     <tr>
-        <td class="bold">$i18n.getString( "age" ):</td>
+        <td class="bold text-column">$i18n.getString( "age" ):</td>
         <td>$encoder.htmlEncode( $patient.getAge() )</td>
     <tr>
 		<td>&nbsp;</td>
 	</tr>
 	<tr>
-		<td align='left' colspan='2'>
-			<input type="button" value="$i18n.getString( "back_to_registration" )" onclick="onClickBackBtn();" style="width:10em">
+		<td colspan='2'>
+			<input type="button" value="$i18n.getString( 'back_to_registration' )" onclick="onClickBackBtn();" >
 		</td>
 	</tr>
 </table>
@@ -58,9 +58,9 @@
 
 <table>    
     <tr>
-        <td style="width:180px"><label for="programId">$i18n.getString( "program" )</label></td>
-        <td>
-            <select id="programInstanceId" name="programInstanceId" onchange="showUnenrollmentForm( this.value )" style="min-width:200px" >
+        <td class="text-column" style='width:110px'><label for="programId">$i18n.getString( "program" )</label></td>
+        <td class="input-column">
+            <select id="programInstanceId" name="programInstanceId" onchange="showUnenrollmentForm( this.value )" >
                 <option value="0">[$i18n.getString( "select" )]</option>
                 #foreach( $instance in $programInstances )
                     <option value="$instance.id" >$encoder.htmlEncode( $instance.program.name )</option>
@@ -71,17 +71,17 @@
         
 </table>
 
-<div id='unenrollmentFormDiv' style='display:none;'>
+<div id='unenrollmentFormDiv' class='hidden'>
 	
-	<table width="100%">
+	<table>
 		<tr>
-			<td style="width:20px"><label for="enrollmentDate">$i18n.getString( "date_of_enrollment" ) <em title="$i18n.getString( "required" )" class="required">*</em></label></td>
-			<td><input type="text" style="width:180px" id="enrollmentDate" name="enrollmentDate" value="$!format.formatDate( $programInstance.enrollmentDate )"> <i id='dateOfEnrollmentDescription'></i></td>
+			<td class='text-column'><label for="enrollmentDate">$i18n.getString( "date_of_enrollment" ) <em title="$i18n.getString( "required" )" class="required">*</em></label></td>
+			<td class="input-column"><input type="text" id="enrollmentDate" name="enrollmentDate" value="$!format.formatDate( $programInstance.enrollmentDate )"> <i id='dateOfEnrollmentDescription'></i></td>
 		</tr>
 		
 		<tr>
-			<td style="width:180px"><label for="dateOfIncident">$i18n.getString( "date_of_incident" ) <em title="$i18n.getString( "required" )" class="required">*</em></label></td>
-			<td><input type="text" style="width:180px" id="dateOfIncident" name="dateOfIncident" value="$!format.formatDate( $programInstance.dateOfIncident )"><i id='dateOfIncidentDescription'></i></td>
+			<td class='text-column'><label for="dateOfIncident">$i18n.getString( "date_of_incident" ) <em title="$i18n.getString( "required" )" class="required">*</em></label></td>
+			<td class="input-column"><input type="text" id="dateOfIncident" name="dateOfIncident" value="$!format.formatDate( $programInstance.dateOfIncident )"><i id='dateOfIncidentDescription'></i></td>
 		</tr>
 		<tr>
 			<td></td>
@@ -100,29 +100,29 @@
 		<tr>
 		#foreach($attribute in $programAttributes)
 		<tr>
-			<td style="width:180px">$attribute.name</td>
+			<td class='text-column'>$attribute.name</td>
 			<td class="input-column">
 				#if( $attribute.valueType == "YES/NO" )
-					<select id="attr$attribute.id" name="attr$attribute.id" style="width:200px"> 
+					<select id="attr$attribute.id" name="attr$attribute.id" > 
 						<option value="">[$i18n.getString( "please_select" )]</option>
 						<option value="true">$i18n.getString( "yes" )</option>
 						<option value="false">$i18n.getString( "no" )</option>
 					</select>                     
 				#elseif( $attribute.valueType == "DATE" )
-					<input type="text" style="width:180px" id="attr$attribute.id" name="attr$attribute.id" class=' #validate( "default"  $attribute.mandatory )'>
+					<input type="text" id="attr$attribute.id" name="attr$attribute.id" class=' #validate( "default"  $attribute.mandatory )'>
 					<script type="text/javascript">
 						var attributeId = 'attr' + '$attribute.id'
 						datePickerValid( attributeId );
 					</script>                       
 				#elseif( $attribute.valueType == "COMBO" )
-					<select id="attr$attribute.id" name="attr$attribute.id" style="width:200px">
+					<select id="attr$attribute.id" name="attr$attribute.id" >
 						<option value="">[$i18n.getString( "please_select" )]</option>
 						#foreach ($option in $attribute.attributeOptions )
 							<option value="$option.id" >$option.name</option>
 						#end
 					</select>
 				#else 
-					<input type="text" id="attr$attribute.id" name="attr$attribute.id" style="width:180px" >
+					<input type="text" id="attr$attribute.id" name="attr$attribute.id" >
 				#end
 				
 				#if($!programAttribute.description) <i>($!programAttribute.description)</i> #end
@@ -140,8 +140,8 @@
 
 	<table>
 		<tr>
-			<td style="width:180px">
-				<input type="button" value='$i18n.getString( "unenroll" )' onclick="javascript:unenrollmentForm( getFieldValue('programInstanceId') );" >
+			<td>
+				<input type="button" class='button' value='$i18n.getString( "unenroll" )' onclick="javascript:unenrollmentForm( getFieldValue('programInstanceId') );" >
 			</td>                                        
 		</tr>
 	</table>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/relationshipList.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/relationshipList.vm	2011-10-29 14:16:54 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/relationshipList.vm	2012-02-01 09:10:08 +0000
@@ -1,86 +1,96 @@
 <h3>$i18n.getString( "relationship_management" )</h3>
 
 <input type="hidden" id="id" name="id" value="$patient.id">
-<div id="selectedPatientContainer" style="border:1px solid #808080; padding:10px;">
-    <table class="mainPageTable">                           
-        <tr>              
-            <td>
-                <span class="bold">$i18n.getString( "full_name" ):</span>$encoder.htmlEncode( $patient.getFullName() )<br>
-                <span class="bold">$i18n.getString( "gender" ):</span>$i18n.getString( $patient.gender )<br>
-                <span class="bold">$i18n.getString( "date_of_birth" ):</span>$format.formatDate( $patient.birthDate )<br>
-                <span class="bold">$i18n.getString( "age" ):</span>$encoder.htmlEncode( $patient.getAge() )
-            </td>               
-            <td style="vertical-align:top">
-                <div style="float:right">
-                    #foreach( $patientAttributeValue in $patientAttributeValues )
-                        <span class="bold">$encoder.htmlEncode( $patientAttributeValue.patientAttribute.name ):</span>$encoder.htmlEncode( $patientAttributeValue.value )<br>
-                    #end                         
-                </div>
-            </td>   
-        </tr>                              
-    </table>
+<table class="list-table infor">                           
+	<tr>              
+		<td>
+			<table>
+				<tr>
+					<td class="bold text-column">$i18n.getString( "full_name" ): </td>
+					<td>$encoder.htmlEncode( $patient.getFullName() )<td>
+				</tr>
+				<tr>
+					<td class="bold text-column">$i18n.getString( "gender" ): </td>
+					<td>$i18n.getString( $patient.gender )<td>
+				</tr>
+				<tr>
+					<td class="bold text-column">$i18n.getString( "date_of_birth" ): </td>
+					<td>$format.formatDate( $patient.birthDate )<td>
+				</tr>
+				<tr>
+					<td class="bold text-column" style='vertical-align:top'>$i18n.getString( "age" ): </td>
+					<td>$encoder.htmlEncode( $patient.getAge() )</td>
+				</tr>
+			</table>
+		</td>
+	
+		#if( $patientAttributeValues.size() > 0 )
+		<td align="right">
+				<table>
+					#foreach( $patientAttributeValue in $patientAttributeValues )
+						<tr>
+							<td class="bold text-column">$encoder.htmlEncode( $patientAttributeValue.patientAttribute.name ):</td>
+							<td>$encoder.htmlEncode( $patientAttributeValue.value )</td>
+						</tr>
+					#end                         
+				</table>
+			
+		</td>
+		#end
+	</tr>
+	
+</table>
+
+<div class='buttons'>
+	<input type="button" class='button' value="$i18n.getString( 'add_new' )" onclick="javascript:showAddRelationship('$patient.id')" >
+	<input type="button" class='button' value="$i18n.getString( 'add_new_patient' )" onclick="javascript:showAddRelationshipPatient( '$patient.id',false )" >
+	<input type="button" class='button' value="$i18n.getString( 'back_to_registration' )" onclick="onClickBackBtn();" >
 </div>
 
-<table class="mainPageTable">
-    <tr>
-        <td style="vertical-align:top">
-            <table class="listTable">
-                <col>
-                <col>
-                <col width="20">           
-                  
-                <tr>
-					<td style="text-align:right" colspan='3'>
-						<input type="button" value="$i18n.getString( 'add_new' )" onclick="javascript:showAddRelationship('$patient.id')" style="width:12em">                                                              
-						<input type="button" value="$i18n.getString( 'add_new_patient' )" onclick="javascript:showAddRelationshipPatient( '$patient.id',false )" style="width:12em">                                                              
-						<input type="button" value="$i18n.getString( "back_to_registration" )" onclick="onClickBackBtn();" style="width:12em">
-					</td>
-				</tr>
-          
-                <tr>            
-                    <th>$i18n.getString( "relationship" )</th>
-                    <th>$i18n.getString( "full_name" )</th>
-                    <th style="text-align:center">$i18n.getString( "operations" )</th>
-                </tr>
-                <tbody id="list"> 
-					#set( $mark = false )
-                    #foreach( $relationship in $relationships )
-                        <tr id="tr${relationship.id}" #alternate( $mark ) >
-                            #set( $partnerId = false )    
-                            #if( $relationship.patientA.id == $patient.id )
-                                #set( $partnerId = $relationship.patientB.id )
-                                <td>                                
-                                    $encoder.htmlEncode( $relationship.relationshipType.BIsToA )
-                                </td>
-                                            
-                                <td>
-                                    $encoder.htmlEncode( $relationship.patientB.getFullName() )
-                                </td>
-                            #elseif($relationship.patientB.id == $patient.id )
-                                #set( $partnerId = $relationship.patientA.id )
-                                <td>                                
-                                    $encoder.htmlEncode( $relationship.relationshipType.AIsToB )
-                                </td>
-                                            
-                                <td>
-                                    $encoder.htmlEncode( $relationship.patientA.getFullName() )
-                                </td>
-                            #end                  
-                            
-                            <td style="text-align:center">
-                                <a href="javascript:manageRepresentative( '$patient.id', $partnerId )" title="$i18n.getString( 'manage_representative' )"><img src="../images/assign.png" alt="$i18n.getString( 'manage_representative' )"></a>
-                                <a href="javascript:removeRelationship( '$relationship.id', '$encoder.jsEncode( $relationship.patientA.getFullName() )', '$encoder.jsEncode( $relationship.relationshipType.aIsToB )', '$encoder.jsEncode( $relationship.patientB.getFullName() )' )" title="$i18n.getString( 'remove' )"><img src="../images/delete.png" alt="$i18n.getString( 'remove' )"></a>
-                            </td>   						
-                        </tr>
-						#set( $mark = !$mark)
-                    #end
-                </tbody>
-            </table>
-        </td> 
-    </tr>         
+<table class="list-table listTable">
+               
+	<tr>            
+		<th>$i18n.getString( "relationship" )</th>
+		<th>$i18n.getString( "full_name" )</th>
+		<th style="text-align:center">$i18n.getString( "operations" )</th>
+	</tr>
+	
+	<tbody id="list"> 
+		#set( $mark = false )
+		#foreach( $relationship in $relationships )
+			<tr id="tr${relationship.id}" #alternate( $mark ) >
+				#set( $partnerId = false )    
+				#if( $relationship.patientA.id == $patient.id )
+					#set( $partnerId = $relationship.patientB.id )
+					<td>                                
+						$encoder.htmlEncode( $relationship.relationshipType.BIsToA )
+					</td>
+								
+					<td>
+						$encoder.htmlEncode( $relationship.patientB.getFullName() )
+					</td>
+				#elseif($relationship.patientB.id == $patient.id )
+					#set( $partnerId = $relationship.patientA.id )
+					<td>                                
+						$encoder.htmlEncode( $relationship.relationshipType.AIsToB )
+					</td>
+								
+					<td>
+						$encoder.htmlEncode( $relationship.patientA.getFullName() )
+					</td>
+				#end                  
+				
+				<td style="text-align:center">
+					<a href="javascript:manageRepresentative( '$patient.id', $partnerId )" title="$i18n.getString( 'manage_representative' )"><img src="../images/assign.png" alt="$i18n.getString( 'manage_representative' )"></a>
+					<a href="javascript:removeRelationship( '$relationship.id', '$encoder.jsEncode( $relationship.patientA.getFullName() )', '$encoder.jsEncode( $relationship.relationshipType.aIsToB )', '$encoder.jsEncode( $relationship.patientB.getFullName() )' )" title="$i18n.getString( 'remove' )"><img src="../images/delete.png" alt="$i18n.getString( 'remove' )"></a>
+				</td>   						
+			</tr>
+			#set( $mark = !$mark)
+		#end
+	</tbody>
 </table>
 
-<div id="detailsArea" style="display:none; width:100%; padding-left:2em; vertical-align:top">
+<div id="detailsArea" class="hidden">
 	<table>
 		<tr>
 			<td>

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.css'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.css	2012-01-31 07:59:24 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/dataEntry.css	2012-02-01 09:10:08 +0000
@@ -16,7 +16,7 @@
 	text-align:center;
 }
 
-.textColumn
+.text-column
 {
 	text-align:left;
 	padding-right:20px; 
@@ -54,6 +54,10 @@
 div#currentSelection
 {
 	float:right;
+	color: black;  
+	background-color: #D5FFC5;
+	border: 1px solid black;
+	font-size: 12px; 
 }
 
 /*----------------------------------------------------------------------------*/

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/patient.css'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/patient.css	2012-01-31 05:11:00 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/patient.css	2012-02-01 09:10:08 +0000
@@ -1,26 +1,62 @@
-table 
+table
 {
  margin-bottom:20px; 
  font-size: 13px; 
  line-height:18px;
 }
 
-#patientInfo 
-{
-  color: black;  
-  background-color: #D5FFC5;
-  border: 1px solid black;
-  font-size: 12px;  
-}
-
-#currentSelection 
-{
-  color: black;  
-  background-color: #D5FFC5;
-  border: 1px solid black;
-  font-size: 12px; 
-
-}
+input.button
+{
+	width: 150px;
+	padding-left:5px;
+	padding-right:5px;
+}
+
+input.imgButton
+{
+	width:20px;
+	height:20px;
+	cursor: pointer;
+}
+
+.hidden
+{
+	display:none;
+}
+
+.text-column
+{
+	text-align:left;
+	padding-right:20px; 
+	padding-left:5px; 
+}
+
+.infor
+{
+	border:1px solid #808080; 
+	vertical-align:top;
+	padding:10px;
+}
+
+.buttons
+{
+	text-align:right;
+	padding-bottom:10px;
+	width:100%;
+}
+
+.list-table
+{
+	width:100%;
+}
+
+.heading-column { width : 450px;}
+td.input-column { width : 390px;}
+td.input-column input{ width: 360px;}
+td.input-column select { width: 367px;}
+td.error {padding-left:1em}
+
+.infor td{vertical-align: top;}
 
 .focusCell{background-color: #AFCCFF}
 .errorCell{background-color: #FFCFCF}
@@ -29,24 +65,6 @@
 .togglePanel.open {height:25px;padding-left:25px; background-image:  url(../images/open.gif) ; background-repeat: no-repeat; background-position: top left}
 .togglePanel.close {height:25px;padding-left:25px;  background-image:  url(../images/close.gif) ; background-repeat: no-repeat; background-position: top left}
 
-input.inputText{width: 8em}
-select.inputText{width: 8.4em}
-.inputColumn{ width:170px}
-
-#tooltip {
-    color:#000; font-size:11px; line-height:1.2;
-    background-color:#FFFFCC; border:1px solid #667295; 
-    width:210px; padding:4px;
-	z-index: 100000;
-	display: none;
-	position:absolute;
-}
-
-.heading-column { width : 30.5em;}
-td.input-column { width : 30.5em;}
-td.input-column input, td.input-column select { width: 28.5em;}
-td.error {padding-left:1em}
-
 .warnmessage {
 	color: red; 
 	font-style: italic;
@@ -56,10 +74,3 @@
 {
 	width: 130px;
 }
-
-#actions
-{
-  float: right;
-  width:200px;
-  text-align: right;
-}

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/updatePatientForm.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/updatePatientForm.vm	2011-12-29 04:50:47 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/updatePatientForm.vm	2012-02-01 09:10:08 +0000
@@ -61,119 +61,128 @@
 </div>
 
 <table>
-	<tr><th colspan="2" class="heading-column">$i18n.getString( "system_identifier" )</th></tr>
-	<tr><td></td><td>$!systemIdentifier</td></tr>
-	<tr><td>&nbsp;</td></tr>	
+		
+	<tr>
+		<th colspan="2" class="heading-column">$i18n.getString( "system_identifier" )</th>
+	</tr>	
+	<tr>
+		<td></td>
+		<td>$!systemIdentifier</td>
+	</tr>
+	<tr>
+		<td>&nbsp;</td>
+	</tr>	
+
 	<tr>
 		<th colspan="2" class="heading-column">$i18n.getString( "demographics" )</th>
 	</tr>
 	<tr>
-		<td><label for="fullName">$i18n.getString( "full_name" )</label></td>
-		<td class="input-column" ><input type="text" id="fullName" name="fullName" value="$encoder.htmlEncode( $patient.getFullName() )" style="width:30em" class="{validate:{required:true, unicodechars:true, rangelength:[7,50]}}"></td>
+		<td class='text-column'><label for="fullName">$i18n.getString( "full_name" )</label></td>
+		<td class="input-column" ><input type="text" id="fullName" name="fullName" value="$!patient.getFullName()" class="{validate:{required:true, unicodechars:true, rangelength:[7,50]}}"></td>
 	</tr>
 	<tr>
-		<td><label for="gender">$i18n.getString( "gender" )<em title="$i18n.getString( "required" )" class="required">*</em></label></td>
+		<td class='text-column'><label for="gender">$i18n.getString( "gender" )<em title="$i18n.getString( "required" )" class="required">*</em></label></td>
 		<td class="input-column" >
-			<select id="gender" name="gender" style="width:30.3em">
-				<option value="M" #if( $patient.gender == 'M' ) selected="selected" #end>$i18n.getString( "male" )</option>
-				<option value="F" #if( $patient.gender == 'F' ) selected="selected" #end>$i18n.getString( "female" )</option>
-				<option value="T" #if( $patient.gender == 'T' ) selected="selected" #end>$i18n.getString( "transgender" )</option>
+			<select id="gender" name="gender">
+				<option value="M" #if( $!patient.gender == 'M' ) selected="selected" #end>$i18n.getString( "male" )</option>
+				<option value="F" #if( $!patient.gender == 'F' ) selected="selected" #end>$i18n.getString( "female" )</option>
+				<option value="T" #if( $!patient.gender == 'T' ) selected="selected" #end>$i18n.getString( "transgender" )</option>
 			</select>
 		</td>					
 	</tr>	
 
 	<tr>
-		<td><label for="dobType">$i18n.getString( "dob_type" )<em title="$i18n.getString( "required" )" class="required">*</em></label></td>
+		<td class='text-column'><label for="dobType">$i18n.getString( "dob_type" )<em title="$i18n.getString( "required" )" class="required">*</em></label></td>
 		<td class="input-column" >
-			<select id='dobType' name="dobType" style="width:30.3em" class="{validate:{required:true}}">
+			<select id='dobType' name="dobType" class="{validate:{required:true}}">
 				<option value="" selected="selected">[$i18n.getString( "please_select" )]</option>
-				<option value="V" #if($patient.dobType=='V') selected #end>$i18n.getString( "verified" )</option>
-				<option value="D" #if($patient.dobType=='D') selected #end>$i18n.getString( "declared" )</option>
-				<option value="A" #if($patient.dobType=='A') selected #end>$i18n.getString( "approximated" )</option>
+				<option value="V" #if($!patient.dobType=='V') selected #end>$i18n.getString( "verified" )</option>
+				<option value="D" #if($!patient.dobType=='D') selected #end>$i18n.getString( "declared" )</option>
+				<option value="A" #if($!patient.dobType=='A') selected #end>$i18n.getString( "approximated" )</option>
 			</select>
-        </td>
+		</td>
 	</tr>
-	
-	<tr id='ageSpan' style="display:none" >
-		<td><label for="age">$i18n.getString( "age" ) </label><em title="$i18n.getString( "required" )" class="required">*</em> </label></td>
+
+	<tr id='ageSpan' class="hidden" >
+		<td class='text-column'><label for="age">$i18n.getString( "age" ) </label><em title="$i18n.getString( "required" )" class="required">*</em> </label></td>
 		<td class="input-column" >
-			<select id="ageType" name="ageType" style="width:15em" >
-				<option value="D" #if($patient.getAgeType()=='D') selected #end> $i18n.getString('day')</option>
-				<option value="M" #if($patient.getAgeType()=='M') selected #end> $i18n.getString('month')</option>
-				<option value="Y" #if($patient.getAgeType()=='Y') selected #end> $i18n.getString('year')</option>
+			<select id="ageType" name="ageType" >
+				<option value="D" #if($!patient.getAgeType()=='D') selected #end> $i18n.getString('day')</option>
+				<option value="M" #if($!patient.getAgeType()=='M') selected #end> $i18n.getString('month')</option>
+				<option value="Y" #if($!patient.getAgeType()=='Y') selected #end> $i18n.getString('year')</option>
 			</select>
-			<input type="text" id="age" name="age" style="width:12em" class="{validate:{number:true, alphanumeric: true}}">
+			<input type="text" id="age" name="age" class="{validate:{number:true, alphanumeric: true}}">
 			$!patient.getAge()
 		</td>
 	</tr>
 
-	<tr id='birthdaySpan' style="display:none" >
-		<td><label for="birthDate">$i18n.getString( "date_of_birth" )<em title="$i18n.getString( "required" )" class="required">*</em> </label></td>
+	<tr id='birthdaySpan' class="hidden" >
+		<td class='text-column'><label for="birthDate">$i18n.getString( "date_of_birth" )<em title="$i18n.getString( "required" )" class="required">*</em> </label></td>
 		<td class="input-column" >			
-			<input type="text" id="birthDate" name="birthDate" style="width:28em" value="$format.formatDate( $patient.birthDate )" >
+			<input type="text" id="birthDate" name="birthDate" value="$format.formatDate( $!patient.birthDate )" >
 		</td>
 	</tr>
-	
+
 	<tr>
 		<td></td>
-		<td class="input-column" ><input id="memberValidator" style="display:none" class="{validate:{required:true}}"/></td>
+		<td class="input-column" ><input id="memberValidator" class="hidden {validate:{required:true}}"/></td>
 	</tr>
-	
+
 	<tr>
-		<td><label for="bloodGroup">$i18n.getString( "blood_group" )</label></td>
+		<td class='text-column'><label for="bloodGroup">$i18n.getString( "blood_group" )</label></td>
 		<td class="input-column" >
-			<select type="text" id="bloodGroup" name="bloodGroup" style="width:30.3em" >
+			<select type="text" id="bloodGroup" name="bloodGroup">
 				 <option value="">[$i18n.getString( "please_select" )]</option>
-				<option value="A+"  #if($patient.bloodGroup == "A+") selected="selected" #end>A+</option>
-				<option value="A-"  #if($patient.bloodGroup == "A-") selected="selected" #end>A-</option>
-				<option value="AB+" #if($patient.bloodGroup == "AB+") selected="selected" #end>AB+</option>
-				<option value="AB-" #if($patient.bloodGroup == "AB-") selected="selected" #end>AB-</option>
-				<option value="B+"  #if($patient.bloodGroup == "B+") selected="selected" #end>B+</option>
-				<option value="B-"  #if($patient.bloodGroup == "B-") selected="selected" #end>B-</option>
-				<option value="O+"  #if($patient.bloodGroup == "O+") selected="selected" #end>O+</option>
-				<option value="O-"  #if($patient.bloodGroup == "O-") selected="selected" #end>O-</option>
+				<option value="A+"  #if($!patient.bloodGroup == "A+") selected="selected" #end>A+</option>
+				<option value="A-"  #if($!patient.bloodGroup == "A-") selected="selected" #end>A-</option>
+				<option value="AB+" #if($!patient.bloodGroup == "AB+") selected="selected" #end>AB+</option>
+				<option value="AB-" #if($!patient.bloodGroup == "AB-") selected="selected" #end>AB-</option>
+				<option value="B+"  #if($!patient.bloodGroup == "B+") selected="selected" #end>B+</option>
+				<option value="B-"  #if($!patient.bloodGroup == "B-") selected="selected" #end>B-</option>
+				<option value="O+"  #if($!patient.bloodGroup == "O+") selected="selected" #end>O+</option>
+				<option value="O-"  #if($!patient.bloodGroup == "O-") selected="selected" #end>O-</option>
 			</select>
 		</td>		
 	</tr>
 	<tr><td>&nbsp;</td></tr>	
-	
+
 	<!-- UNDERAGE -->
-	
+
 	<tr>
-		<td>$i18n.getString("is_underage")</td>
+		<td class='text-column'>$i18n.getString("is_underage")</td>
 		<td>
-			<input type="checkbox" name="underAge" id="underAge" onclick="toggleUnderAge(this);" value="true" #if($patient.underAge == "true") checked="checked" #end/>
+			<input type="checkbox" name="underAge" id="underAge" onclick="toggleUnderAge(this);" value="true" #if($!patient.underAge == "true") checked="checked" #end/>
 		</td>
 	</tr>
-	
+
 	<!-- DEAD -->
-	
+
 	<tr>
-		<td>$i18n.getString("is_dead")</td>
+		<td class='text-column'>$i18n.getString("is_dead")</td>
 		<td>
 			<input type="checkbox" name="isDead" id="isDead" value="true" #if($!patient.isDead) checked="checked" #end onchange='isDeathOnChange();'/>
 		</td>
 	</tr>
-	
-	<tr id='deathDateTR' style="display:none" >
-		<td><label for="deathDate">$i18n.getString("death_date")</label></td>
+
+	<tr id='deathDateTR' class="hidden" >
+		<td class='text-column'><label for="deathDate">$i18n.getString("death_date")</label></td>
 		<td class="input-column" >
-			<input type="text" name="deathDate" id="deathDate" style="width:28em" #if($!patient.deathDate) value="$format.formatDate( $!patient.deathDate )" #end>
+			<input type="text" name="deathDate" id="deathDate" #if($!patient.deathDate) value="$format.formatDate( $!patient.deathDate )" #end>
 		</td>
 	</tr>
-	
+
 	<tr><td>&nbsp;</td></tr>
-	
-	#if($patient.underAge)
-		#set( $representative = $patient.representative ) 
+
+	#if($!patient.underAge)
+		#set( $representative = $!patient.representative ) 
 		<tr>
-			<td>$i18n.getString("representative")</td>
+			<td class='text-column'>$i18n.getString("representative")</td>
 			<td> 
-				$!patient.representative.getFullName() <img src="../images/information.png" alt="$i18n.getString( 'show_details' )" onclick='showRepresentativeInfo()' style='cursor:pointer;'>
+				$!patient.representative.getFullName() <img src="../images/information.png" alt="$i18n.getString( 'show_details' )" onclick='showRepresentativeInfo()' class='imgButton'>
 			</td>
 		</tr>
 	#end
-	
+
 	#if( $identifierTypes.size() > 0)
 		<!--IDENTIFIERS -->
 		<tr><th colspan="2" class="heading-column">$i18n.getString("patient_identifiers")</th></tr>
@@ -181,44 +190,44 @@
 		#set( $identifier = "" )
 		#set( $identifier = $identiferMap.get( $identifierType.id ) )
 		<tr>
-			<td><label for="bloodGroup">$identifierType.name #if($identifierType.mandatory)<em title="$i18n.getString( "required" )" class="required">*</em> #end</label></td>
-			<td class="input-column" ><input type="text" id="iden$identifierType.id" style="width:30em" name="iden$identifierType.id" value="$identifier" data="{related:$identifierType.related}" #if($identifierType.related && $patient.underAge) disabled="disabled" #end class="{validate:{required:$identifierType.mandatory, #if($!identifierType.noChars) maxlength:$identifierType.noChars, #end #if($identifierType.type=='number') number:true #elseif($!identifierType.type=='letter') lettersonly:true #end }}" style="width:30em" /></td>	
+			<td class='text-column'><label for="bloodGroup">$identifierType.name #if($identifierType.mandatory)<em title="$i18n.getString( "required" )" class="required">*</em> #end</label></td>
+			<td class="input-column" ><input type="text" id="iden$identifierType.id" name="iden$identifierType.id" value="$identifier" data="{related:$identifierType.related}" #if($identifierType.related && $!patient.underAge) disabled="disabled" #end class="{validate:{required:$identifierType.mandatory, #if($!identifierType.noChars) maxlength:$identifierType.noChars, #end #if($identifierType.type=='number') number:true #elseif($!identifierType.type=='letter') lettersonly:true #end }}" /></td>	
 		</tr>
 		#end
 		<tr><td>&nbsp;</td></tr>
 	#end
 	<!-- ATTRIBUTES IN GROUPS -->
-	
+
 	#foreach ($attributeGroup in $attributeGroups )
 		<tr><td>&nbsp;</td></tr>	
 		<tr><th colspan="2" class="heading-column">$attributeGroup.name</th></tr>
 		#foreach($attribute in $attributeGroup.attributes)
 			#if($!attribute)
 				#set( $attributeValue = "" )
-				#set( $attributeValue = $patientAttributeValueMap.get( $attribute.id ) )
+				#set( $attributeValue = $!patientAttributeValueMap.get( $attribute.id ) )
 				<tr>
-					<td><label>$attribute.name #if($attribute.mandatory)<em title="$i18n.getString( "required" )" class="required">*</em> #end</label></td>
+					<td class='text-column'><label>$attribute.name #if($attribute.mandatory)<em title="$i18n.getString( "required" )" class="required">*</em> #end</label></td>
 					<td class="input-column" >
 						#if( $attribute.valueType == "YES/NO" )
-							<select id="attr$attribute.id"  name="attr$attribute.id" style="width:30.3em" >              
+							<select id="attr$attribute.id"  name="attr$attribute.id" >              
 								<option value="">[$i18n.getString( "please_select" )]</option>
 								<option value="true" #if( $attributeValue=='true') selected="selected" #end>$i18n.getString( "yes" )</option>
 								<option value="false" #if( $attributeValue=='false') selected="selected" #end>$i18n.getString( "no" )</option>
 							</select>                
 						#elseif( $attribute.valueType == "DATE" )
-							<input type="text" id="attr$attribute.id" name="attr$attribute.id" style="width:30em" value="$!attributeValue" class=' #validate( "default"  $attribute.mandatory )' style="width:30em" >
+							<input type="text" id="attr$attribute.id" name="attr$attribute.id" value="$!attributeValue" class=' #validate( "default"  $attribute.mandatory )'>
 							<script type="text/javascript">
 								datePickerValid( 'attr$attribute.id' );
 							</script>                 
 						#elseif( $attribute.valueType == "COMBO" )
-							<select  id="attr$attribute.id"  name="attr$attribute.id" style="width:30.3em" class=' #validate( "default"  $attribute.mandatory )'>
+							<select  id="attr$attribute.id"  name="attr$attribute.id" class=' #validate( "default"  $attribute.mandatory )'>
 								 <option value="">[$i18n.getString( "please_select" )]</option>
 							#foreach ($option in $attribute.attributeOptions )
 								<option value="$option.id" #if($attributeValue == $option.name) selected="selected" #end>$option.name</option>
 							#end
 							</select>
 						#else 
-							<input type="text"  id="attr$attribute.id" name="attr$attribute.id" style="width:30em" value="$!attributeValue" class="{validate:{required:$attribute.mandatory #if($!attribute.noChars),maxlength:$attribute.noChars #end #if($attribute.valueType=='NUMBER'),number:true #end }}" >
+							<input type="text"  id="attr$attribute.id" name="attr$attribute.id" value="$!attributeValue" class="{validate:{required:$attribute.mandatory #if($!attribute.noChars),maxlength:$attribute.noChars #end #if($attribute.valueType=='NUMBER'),number:true #end }}" >
 						#end
 					</td>		
 				</tr>
@@ -226,37 +235,37 @@
 		#end
 	#end
 	<tr><td>&nbsp;</td></tr>
-	
+
 	<!-- ATTRIBUTES NOT IN GROUPS -->
-	
+
 	#if ( $noGroupAttributes && $noGroupAttributes.size() > 0) 	
 		<tr><th colspan="2" class="heading-column">$i18n.getString( "Other details" )</th></tr>
 		#foreach($attribute in $noGroupAttributes )
 		#set( $attributeValue = "" )
-		#set( $attributeValue = $patientAttributeValueMap.get( $attribute.id ) )
+		#set( $attributeValue = $!patientAttributeValueMap.get( $attribute.id ) )
 			<tr>
-				<td><label>$attribute.name #if($attribute.mandatory)<em title="$i18n.getString( "required" )" class="required">*</em> #end</label></td>
+				<td class='text-column'><label>$attribute.name #if($attribute.mandatory)<em title="$i18n.getString( "required" )" class="required">*</em> #end</label></td>
 				<td class="input-column" >
 					#if( $attribute.valueType == "YES/NO" )
-		                <select id="attr$attribute.id"  name="attr$attribute.id" style="width:30.3em" >              
-		                    <option value="">[$i18n.getString( "please_select" )]</option>
-		                    <option value="true" #if( $attributeValue ) selected="selected" #end>$i18n.getString( "yes" )</option>
-		                    <option value="false" #if( !$attributeValue ) selected="selected" #end>$i18n.getString( "no" )</option>
-		                </select>                
-		            #elseif( $attribute.valueType == "DATE" )
-		                <input type="text" id="attr$attribute.id" style="width:30em" name="attr$attribute.id"  value="$!attributeValue" class=' #validate( "default"  $attribute.mandatory )'>
-		                <script type="text/javascript">
-                            datePickerValid( 'attr$attribute.id' );
-                        </script>                    
+						<select id="attr$attribute.id"  name="attr$attribute.id" >              
+							<option value="">[$i18n.getString( "please_select" )]</option>
+							<option value="true" #if( $attributeValue ) selected="selected" #end>$i18n.getString( "yes" )</option>
+							<option value="false" #if( !$attributeValue ) selected="selected" #end>$i18n.getString( "no" )</option>
+						</select>                
+					#elseif( $attribute.valueType == "DATE" )
+						<input type="text" id="attr$attribute.id" name="attr$attribute.id" value="$!attributeValue" class=' #validate( "default"  $attribute.mandatory )'>
+						<script type="text/javascript">
+							datePickerValid( 'attr$attribute.id' );
+						</script>                    
 					#elseif( $attribute.valueType == "COMBO" )
-						<select  id="attr$attribute.id"  name="attr$attribute.id"  style="width:30.3em" class=' #validate( "default"  $attribute.mandatory )' >
+						<select  id="attr$attribute.id"  name="attr$attribute.id" class=' #validate( "default"  $attribute.mandatory )' >
 							 <option value="">[$i18n.getString( "please_select" )]</option>
 						#foreach ($option in $attribute.attributeOptions )
 							<option value="$option.id" #if($attributeValue == $option.name) selected="selected" #end>$option.name</option>
 						#end
 						</select>
 					#else
-						<input type="text"  id="attr$attribute.id" name="attr$attribute.id" style="width:30em" value="$!attributeValue" style="width:30em" class="{validate:{required:$attribute.mandatory #if($!attribute.noChars),maxlength:$attribute.noChars #end #if($attribute.valueType=='NUMBER'),number:true #end }}" >
+						<input type="text"  id="attr$attribute.id" name="attr$attribute.id" value="$!attributeValue" class="{validate:{required:$attribute.mandatory #if($!attribute.noChars),maxlength:$attribute.noChars #end #if($attribute.valueType=='NUMBER'),number:true #end }}" >
 					#end
 				</td>		
 			</tr>
@@ -265,42 +274,42 @@
 </table>
 
 <p>
-	<input type="submit" value="$i18n.getString( "update" )" style="width:10em">
-	<input type="button" value="$i18n.getString( 'back_to_registration' )" onclick="loadPatientList();" style="width:10em"/>
+	<input type="submit" class='button' value="$i18n.getString( 'update' )" >
+	<input type="button" class='button' value="$i18n.getString( 'back_to_registration' )" onclick="loadPatientList();" />
 </p>
 
 </form> 	
 
-<div id="representativeInfo" style='font-size:12px; display:none;'>
+<div id="representativeInfo" class='hidden text-column'>
 	<table id='patientInfoDiv'>
 		<tr>
-			<td class="bold">$i18n.getString("full_name"):</td>
+			<td class="bold text-column">$i18n.getString("full_name"):</td>
 			<td>$!representative.getFullName()</td>
 		</tr>
 		<tr>
-			<td class="bold">$i18n.getString("gender"):</td>
+			<td class="bold text-column">$i18n.getString("gender"):</td>
 			<td> $!representative.gender</td>
 		</tr>
 		<tr>
-			<td class="bold">$i18n.getString("date_of_birth"):</td>
+			<td class="bold text-column">$i18n.getString("date_of_birth"):</td>
 			<td>$!format.formatDate( $!representative.birthDate )</td>
 		</tr>
 		<tr>
-			<td class="bold">$i18n.getString("age"):</td>
+			<td class="bold text-column">$i18n.getString("age"):</td>
 			<td> $!representative.getAge() </td>
 		</tr>
 		<tr>
-			<td class="bold">$i18n.getString("blood_group"):</td>
+			<td class="bold text-column">$i18n.getString("blood_group"):</td>
 			<td>$!representative.getBloodGroup()</td>
 		</tr>
 		#foreach( $patientIdentifier in $representative.identifiers )
 		  <tr>  
-			<td class="bold">#if( $patientIdentifier.identifierType )$patientIdentifier.identifierType.name: #else $i18n.getString("system_identifier"): #end</td>      
+			<td class="bold text-column">#if( $patientIdentifier.identifierType )$patientIdentifier.identifierType.name: #else $i18n.getString("system_identifier"): #end</td>      
 			  <td> $!patientIdentifier.identifier </td>
 		   </tr>
 		#end
 		<tr>
-			<td class="bold">$i18n.getString("enrolled_in_program"):</td>
+			<td class="bold text-column">$i18n.getString("enrolled_in_program"):</td>
 			<td>  
 				 #foreach( $program in $representative.programs )
 					#if( $velocityCount == 1 )