anchor.diff:      	</script>
   	</head>
   	<body onLoad="nextTab();">
  -	
  -		<p>
  +	<chrome:box title="Create Rules">
           	<tags:instructions code="ruletype" />  
  -    	</p>
       	<tags:tabForm tab="${tab}" flow="${flow}" willSave="false" hideBox="true">
       		<jsp:attribute name="singleFields">
  +    			<div class="row"  id="ruleSetDiv">
  +            			<div class="label"><tags:requiredIndicator/>&nbsp;<label for="ruleSetName">Type</label></div>
  +            			<div class="value">
  +                			<select id="ruleSetName" onChange="setRuleSetName(this)">
  +                    			<option value="">Please select</option>
  +				                <option value="SAE Reporting Rules">SAE Reporting Rules </option>
  +                				<option value="Mandatory Sections Rules">Mandatory Sections Rules</option>
  +				            </select>
  +				            <tags:errors path="ruleSetName"/>
  +        				</div>
  +        			</div>
  +				
       				<div class="row"  id="ruleLevelDiv">
  -            			<div class="label"><tags:requiredIndicator/>&nbsp;<label for="ruleLevelName">Rule level</label></div>
  +            			<div class="label"><tags:requiredIndicator/>&nbsp;<label for="ruleLevelName">Level</label></div>
               			<div class="value">
               				<form:hidden path="level"/>
                   			<select id="ruleLevel" onChange="displayRuleTypeInput(this)" value="${level }">
  
positive.code:             	color: gray;
              	font-style: italic;
              	background-color: #CCE6FF;
          	}
          	
          	#criteria-div{
            		width: 70%;
            		margin-left: 10em;
          	}
  	    </style>
  	
  
negative.code:         			
          			<div class="autoclear" id="criteria-div">		
  						
  						<div title="Select sponsor" id="sponsorName-details" style="display:none">
                              <ui:row path="sponsorName">
                                  <jsp:attribute name="label">
                                      <ui:label required="true" text="Sponsor" path="sponsorName"/>
                                  </jsp:attribute>
                                  <jsp:attribute name="value">
                                      <ui:autocompleter path="sponsorName" enableClearButton="true" required="true" title="Sponsor"/>
                                  </jsp:attribute>
                              </ui:row>
  						</div>
  						
  						<div title="Select institution" id="institutionName-details" style="display:none" class="pane">
  							<ui:row path="institutionName">
                                  <jsp:attribute name="label">
                                      <ui:label required="true" text="Institution" path="institutionName"/>
                                  </jsp:attribute>
                                  <jsp:attribute name="value">
                                      <ui:autocompleter path="institutionName" enableClearButton="true" required="true" title="Institution"/>
                                  </jsp:attribute>
                              </ui:row>
  						</div>
  
  						<div title="Select study" id="categoryIdentifier-details" style="display:none" class="pane">
  							<ui:row path="categoryIdentifier">
                                  <jsp:attribute name="label">
                                      <ui:label required="true" text="Study" path="categoryIdentifier"/>
                                  </jsp:attribute>
                                  <jsp:attribute name="value">
                                      <ui:autocompleter path="categoryIdentifier" enableClearButton="true" required="true" title="Study"/>
                                  </jsp:attribute>
                              </ui:row>
  								
              				
  						</div>
  					</div>
  					
  					
      			<form:hidden id="hiddenRuleSetName" path="ruleSetName"/>
      		</jsp:attribute>
      	</tags:tabForm>
  		</chrome:box>
  	</body>
  </html>