diff --git a/library/src/morpheus-master/sass/modules/tool/signup/_signup.scss b/library/src/morpheus-master/sass/modules/tool/signup/_signup.scss
index 956ddb861106..a5f5e59f2e8f 100644
--- a/library/src/morpheus-master/sass/modules/tool/signup/_signup.scss
+++ b/library/src/morpheus-master/sass/modules/tool/signup/_signup.scss
@@ -79,7 +79,6 @@
 
 	#userdef-add{
 		position:relative;
-		top: -40px;
 	}
 
 	.calendarImageIcon{
diff --git a/signup/tool/src/webapp/css/signupStyle.css b/signup/tool/src/webapp/css/signupStyle.css
index 7a8b5c7c13ce..b34c9e6fa0cc 100644
--- a/signup/tool/src/webapp/css/signupStyle.css
+++ b/signup/tool/src/webapp/css/signupStyle.css
@@ -45,11 +45,30 @@ table.userDefineTsTable th {
 }
 
 .titleColumn {
-	vertical-align: top;
 	text-align: right;
 	font-weight: bold;
 	padding: 0.2em 1em;
-	white-space: nowrap;
+}
+
+#meeting .form, #meetingInfoDetails, #showMeetingTitleOnly {
+	padding: 1px;
+}
+
+@media (max-width: 991px) {
+	#meeting .form .titleColumn {
+		text-align: left;
+		margin-top: 10px;
+	}
+	#meetingInfoDetails .titleColumn, #showMeetingTitleOnly .titleColumn {
+		text-align: left;
+		margin-top: 5px;
+	}
+	#meeting .form .valueColumn {
+		margin-bottom: 10px;
+	}
+	#meetingInfoDetails .valueColumn, #showMeetingTitleOnly .valueColumn {
+		margin-bottom: 5px;
+	}
 }
 
 .plainTitleColumn {
@@ -233,7 +252,7 @@ table.organizer td {
 .mi {
 	vertical-align: top;
 	margin-left: 30px;	
-	width: 350px;
+	max-width: 650px;
 }
 
 .greyed_mi{
@@ -244,10 +263,6 @@ table.organizer td {
 	color:#A3A3A3;
 }
 
-.longtext_red{
-	color:#b11;
-}
-
 .greyed_mi input, .greyed_si label, .greyed_mi longtext_red{
 	color:#A3A3A3;
 }
@@ -255,7 +270,7 @@ table.organizer td {
 .si {
 	vertical-align: top;
 	margin-left: 30px;	
-	width: 350px;
+	max-width: 650px;
 }
 
 .greyed_si{
@@ -318,6 +333,14 @@ table.organizer td {
 	color: #e7eef5;
 }
 
+#multiple.mi .row, #single.si .row {
+	margin-top: 5px;
+}
+
+#multiple.mi .row:first-of-type, #single.si .row:first-of-type {
+	margin-top: 0;
+}
+
 .displaySites {
 	background: #c12;
 	background-color: #c12;
@@ -360,6 +383,8 @@ table.sitegroup td {
 .published_sitetitle {
 	margin: 10px 0px;
 	line-height: 100%;
+	word-wrap: break-word;
+	white-space: normal;
 }
 
 table.published_sitegroup td {
@@ -407,10 +432,6 @@ table.instruction td.desc{
 	padding: 3px 3px 3px 25px;
 }
 
-.noMeetingsWarn {
-	margin-left: 2em;
-}
-
 .organizerToplevelTable {
 	width: 100%;
 }
@@ -504,4 +525,12 @@ table.emailTable td.valueColumn {
 .dateExact {
 	color: #888;
 	margin-left: 10px;
-}
\ No newline at end of file
+}
+@media (max-width: 991px) {
+	.form-group label {
+		margin-top: 10px;
+	}
+	.form-group label:first-of-type {
+		margin-top: 0;
+	}
+}
diff --git a/signup/tool/src/webapp/signup/newMeeting/step1.jsp b/signup/tool/src/webapp/signup/newMeeting/step1.jsp
index 7d81ac427b9c..02e94df6abd5 100644
--- a/signup/tool/src/webapp/signup/newMeeting/step1.jsp
+++ b/signup/tool/src/webapp/signup/newMeeting/step1.jsp
@@ -101,8 +101,8 @@
             <div onmouseover="delayedRecalculateDateTime();" class="container-fluid">
                 <%-- Title --%>
                 <div class="form-group row">
-                    <h:outputLabel value="#{msgs.event_name}" for="name" styleClass="col-lg-2 form-control-label form-required"/>
-                    <div class="col-lg-10">
+                    <h:outputLabel value="#{msgs.event_name}" for="name" styleClass="col-md-2 form-control-label form-required"/>
+                    <div class="col-md-10">
                         <h:inputText id="name" size="40" value="#{NewSignupMeetingBean.signupMeeting.title}" 
                                     styleClass="editText form-control" required="true"  >
                             <f:validator validatorId="Signup.EmptyStringValidator"/>
@@ -114,8 +114,8 @@
 
                 <%-- Organiser --%>
                 <div class="form-group row">
-                    <h:outputLabel value="#{msgs.event_owner}" styleClass="col-lg-2 form-control-label" for="creatorUserId"/>
-                    <div class="col-lg-10">
+                    <h:outputLabel value="#{msgs.event_owner}" styleClass="col-md-2 form-control-label" for="creatorUserId"/>
+                    <div class="col-md-10">
                         <h:selectOneMenu id="creatorUserId" value="#{NewSignupMeetingBean.creatorUserId}">
                             <f:selectItems value="#{NewSignupMeetingBean.instructors}"/>
                         </h:selectOneMenu>
@@ -124,9 +124,9 @@
                 
                 <%-- Location --%>
                 <div class="form-group row ">
-                        <h:outputLabel value="#{msgs.event_location}" styleClass="col-lg-2 form-control-label form-required"/>
+                        <h:outputLabel value="#{msgs.event_location}" styleClass="col-md-2 form-control-label form-required"/>
                         
-                    <div class="col-lg-10">
+                    <div class="col-md-10">
                         <!-- Displays all the locations in the dropdown -->
                         <h:selectOneMenu id="selectedLocation" value="#{NewSignupMeetingBean.selectedLocation}" rendered="#{!NewSignupMeetingBean.allLocationsEmpty}">
                             <f:validator validatorId="Signup.EmptyStringValidator"/>
@@ -151,8 +151,8 @@
                 </div>
                 <%-- category --%>
                 <div class="form-group row">
-                    <h:outputLabel value="#{msgs.event_category}" styleClass="col-lg-2 form-control-label"/>
-                    <div class="col-lg-10">
+                    <h:outputLabel value="#{msgs.event_category}" styleClass="col-md-2 form-control-label"/>
+                    <div class="col-md-10">
                         <!-- Displays all the categories in the dropdown -->
                         <h:selectOneMenu id="selectedCategory" value="#{NewSignupMeetingBean.selectedCategory}"  rendered="#{NewSignupMeetingBean.categoriesExist}">
                             <f:selectItems value="#{NewSignupMeetingBean.allCategories}"/>
@@ -178,15 +178,15 @@
                 
                 <%-- description, rich text --%>
                 <div class="form-group row">
-                    <h:outputLabel value="#{msgs.event_description}" styleClass="col-lg-2 form-control-label"  escape="false"/>
-                    <div class="col-lg-10">
+                    <h:outputLabel value="#{msgs.event_description}" styleClass="col-md-2 form-control-label"  escape="false"/>
+                    <div class="col-md-10">
                         <sakai:rich_text_area value="#{NewSignupMeetingBean.signupMeeting.description}"  width="720" height="180" rows="8" columns="80" />
                     </div>
                 </div>
 
                 <%-- attachments --%>
                 <div class="form-group row">
-                    <div class="col-lg-10 col-lg-offset-2">
+                    <div class="col-md-10 col-md-offset-2">
                         <h:panelGroup>
                             <t:dataTable value="#{NewSignupMeetingBean.attachments}" var="attach" rendered="#{!NewSignupMeetingBean.attachmentsEmpty}">
                                 <t:column>
@@ -209,8 +209,8 @@
                 </div>
                 <%-- Start time --%>
                 <div class="form-group row ">
-                    <h:outputLabel value="#{msgs.event_start_time}" for="startTime"  escape="false" styleClass="col-lg-2 form-control-label form-required"/>
-                    <div class="col-lg-10">
+                    <h:outputLabel value="#{msgs.event_start_time}" for="startTime"  escape="false" styleClass="col-md-2 form-control-label form-required"/>
+                    <div class="col-md-10">
                        <h:inputText value="#{NewSignupMeetingBean.startTimeString}" size="28" id="startTime" 
                           onkeyup="getSignupDuration(); sakai.updateSignupBeginsExact(); return false;" onchange="sakai.updateSignupBeginsExact();"/>
                        <h:message for="startTime" errorClass="alertMessageInline"/>
@@ -219,8 +219,8 @@
 
                 <%-- End time --%>
                 <div class="form-group row ">
-                    <h:outputLabel value="#{msgs.event_end_time}" for="endTime" escape="false" styleClass="col-lg-2 form-control-label form-required"/>
-                    <div class="col-lg-10">
+                    <h:outputLabel value="#{msgs.event_end_time}" for="endTime" escape="false" styleClass="col-md-2 form-control-label form-required"/>
+                    <div class="col-md-10">
                         <h:inputText value="#{NewSignupMeetingBean.endTimeString}" size="28" id="endTime" 
                           onkeyup="getSignupDuration(); sakai.updateSignupEndsExact(); return false;" onchange="sakai.updateSignupEndsExact();"/>
                         <h:message for="endTime" errorClass="alertMessageInline"/>
@@ -229,9 +229,9 @@
                 
                 <%--  Meeting frequency --%>
                 <div class="form-group row ">
-                    <h:outputLabel value="#{msgs.event_recurrence}" for="recurSelector" styleClass="col-lg-2 form-control-label form-required"/>
+                    <h:outputLabel value="#{msgs.event_recurrence}" for="recurSelector" styleClass="col-md-2 form-control-label form-required"/>
 
-                    <div class="col-lg-10">
+                    <div class="col-md-10">
                         <h:selectOneMenu id="recurSelector" value="#{NewSignupMeetingBean.repeatType}" styleClass="titleText" onchange="isShowCalendar(value); sakai.toggleExactDateVisibility(); return false;">
                             <f:selectItem itemValue="no_repeat" itemLabel="#{msgs.label_once}"/>
                                <f:selectItem itemValue="daily" itemLabel="#{msgs.label_daily}"/>
@@ -269,9 +269,9 @@
                 <%-- Signup begin --%>
                 <div class="form-group row">
                     <h:panelGroup layout="block" styleClass="signupBDeadline" id="signup_beginDeadline_1">
-                        <h:outputLabel value="#{msgs.event_signup_begins}" styleClass="titleText col-lg-2 form-control-label" for="signupBegins"/>
+                        <h:outputLabel value="#{msgs.event_signup_begins}" styleClass="titleText col-md-2 form-control-label" for="signupBegins"/>
                     </h:panelGroup>
-                    <h:panelGroup layout="block" styleClass="signupBDeadline col-lg-10" id="signup_beginDeadline_2">
+                    <h:panelGroup layout="block" styleClass="signupBDeadline col-md-10" id="signup_beginDeadline_2">
                         <h:inputText id="signupBegins" value="#{NewSignupMeetingBean.signupBegins}" size="5" required="true" onkeyup="sakai.updateSignupBeginsExact();">
                             <f:validateLongRange minimum="0" maximum="99999"/>
                         </h:inputText>
@@ -293,9 +293,9 @@
                 <%-- Signup end --%>
                 <div class="form-group row">
                     <h:panelGroup layout="block" styleClass="signupBDeadline" id="signup_beginDeadline_3">
-                        <h:outputLabel value="#{msgs.event_signup_deadline2}" styleClass="titleText col-lg-2 form-control-label" for="signupDeadline"/>
+                        <h:outputLabel value="#{msgs.event_signup_deadline2}" styleClass="titleText col-md-2 form-control-label" for="signupDeadline"/>
                    	</h:panelGroup>
-                    <h:panelGroup layout="block" styleClass="signupBDeadline col-lg-10" id="signup_beginDeadline_4">
+                    <h:panelGroup layout="block" styleClass="signupBDeadline col-md-10" id="signup_beginDeadline_4">
                         <h:inputText id="signupDeadline" value="#{NewSignupMeetingBean.deadlineTime}" size="5" required="true" onkeyup="sakai.updateSignupEndsExact();">
                             <f:validateLongRange minimum="0" maximum="99999"/>
                         </h:inputText>
@@ -312,9 +312,9 @@
                 </div>
                 <%-- Attendance --%>
                 <div class="form-group row">
-                    <h:outputLabel value="#{msgs.event_signup_attendance}" escape="false" for="attendanceSelection" styleClass="titleText col-lg-2 form-control-label" 
+                    <h:outputLabel value="#{msgs.event_signup_attendance}" escape="false" for="attendanceSelection" styleClass="titleText col-md-2 form-control-label" 
                                    rendered="#{NewSignupMeetingBean.attendanceOn}"/>
-                    <h:panelGroup rendered="#{NewSignupMeetingBean.attendanceOn}" layout="block" styleClass="col-lg-10">
+                    <h:panelGroup rendered="#{NewSignupMeetingBean.attendanceOn}" layout="block" styleClass="col-md-10">
                         <h:selectBooleanCheckbox id="attendanceSelection" value="#{NewSignupMeetingBean.signupMeeting.allowAttendance}" />
                         <h:outputLabel value="#{msgs.attend_taken}" for="attendanceSelection" styleClass="titleText"/>
                         <h:outputText value="#{msgs.attend_track_selected}" escape="false" styleClass="textPanelFooter"/>
@@ -324,9 +324,9 @@
                 <%-- Display site/groups --%>
                 <div class="form-group row ">
 
-                    <h:outputLabel value ="#{msgs.event_publish_to}" styleClass="col-lg-2 form-control-label form-required"/>
+                    <h:outputLabel value ="#{msgs.event_publish_to}" styleClass="col-md-2 form-control-label form-required"/>
 
-                    <div class="col-lg-10" >
+                    <div class="col-md-10" >
                         <h:panelGroup>
                             <h:selectBooleanCheckbox id="siteSelection" value="#{NewSignupMeetingBean.currentSite.selected}" disabled="#{!NewSignupMeetingBean.currentSite.allowedToCreate}"
                                 onclick="currentSiteSelection();"/>
@@ -375,38 +375,46 @@
                 
                 <%-- Handle meeting types --%>
                 <div class="form-group row ">
-                    <h:outputLabel value ="#{msgs.event_type_title}" styleClass="col-lg-2 form-control-label form-required"/>
+                    <h:outputLabel value ="#{msgs.event_type_title}" styleClass="col-md-2 form-control-label form-required"/>
 
-                    <div class="col-lg-10" >
+                    <div class="col-md-10" >
                         <h:panelGroup id="radios" styleClass="rs">
                             <h:selectOneRadio id="meetingType" value="#{NewSignupMeetingBean.signupMeeting.meetingType}"  valueChangeListener="#{NewSignupMeetingBean.processSelectedType}" onclick="switMeetingType(value);" layout="pageDirection" styleClass="rs" >
                             <f:selectItems value="#{NewSignupMeetingBean.meetingTypeRadioBttns}"/>
                             </h:selectOneRadio> 
                         </h:panelGroup>
-                        <div class="table-responsive">
-                        <h:panelGrid columns="1" columnClasses="miCol1" styleClass="table" id="meeting-participants">
-                            <%-- Multiple: --%>
-                            <h:panelGroup>
-                                <h:outputText value="<div id='multiple' styleClass='mi' >" escape="false"/>
-
-                                <h:panelGrid columns="2" id="mutipleCh" styleClass="mi" columnClasses="miCol1,miCol2">
-                                    <h:outputText id="maxAttendeesPerSlot" style="display:none" value="#{NewSignupMeetingBean.maxAttendeesPerSlot}"></h:outputText>
-                                    <h:outputText id="maxSlots" style="display:none" value="#{NewSignupMeetingBean.maxSlots}"></h:outputText>   
-                                    <h:outputLabel value="#{msgs.event_num_slot_avail_for_signup}" for="numberOfSlot"/>
-                                    <h:inputText  id="numberOfSlot" value="#{NewSignupMeetingBean.numberOfSlots}" size="2" styleClass="editText" onkeyup="getSignupDuration();return false;" style="margin-left:12px" />
-                                    <h:outputLabel value="#{msgs.event_num_participant_per_timeslot}" styleClass="titleText" for="numberOfAttendees"/>                    
-                                    <h:inputText id="numberOfAttendees" value="#{NewSignupMeetingBean.numberOfAttendees}" styleClass="editText" size="2" style="margin-left:12px" onkeyup="validateAttendee();return false;" />
-                                    <h:outputLabel value="#{msgs.event_duration_each_timeslot_not_bold}" styleClass="titleText" for="currentTimeslotDuration"/>
-                                    <h:inputText id='currentTimeslotDuration' value="0" styleClass='longtext_red' size="2" onfocus="this.blur();" style="margin-left:12px" />             
-                                </h:panelGrid>
+                        <div id="meeting-participants">
+                            <div id="multiple" class="mi">
+                                <h:outputText id="maxAttendeesPerSlot" style="display:none" value="#{NewSignupMeetingBean.maxAttendeesPerSlot}"></h:outputText>
+                                <h:outputText id="maxSlots" style="display:none" value="#{NewSignupMeetingBean.maxSlots}"></h:outputText>
+                                <div class="row">
+                                    <div class="col-xs-12 col-sm-6">
+                                        <h:outputLabel value="#{msgs.event_num_slot_avail_for_signup}" for="numberOfSlot"/>
+                                    </div>
+                                    <div class="col-xs-12 col-sm-2">
+                                        <h:inputText  id="numberOfSlot" value="#{NewSignupMeetingBean.numberOfSlots}" size="2" styleClass="editText" onkeyup="getSignupDuration();return false;" style="margin-left:12px" />
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col-xs-12 col-sm-6">
+                                        <h:outputLabel value="#{msgs.event_num_participant_per_timeslot}" styleClass="titleText" for="numberOfAttendees"/>
+                                    </div>
+                                    <div class="col-xs-12 col-sm-2">
+                                        <h:inputText id="numberOfAttendees" value="#{NewSignupMeetingBean.numberOfAttendees}" styleClass="editText" size="2" style="margin-left:12px" onkeyup="validateAttendee();return false;" />
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col-xs-12 col-sm-6">
+                                        <h:outputLabel value="#{msgs.event_duration_each_timeslot_not_bold}" styleClass="titleText" for="currentTimeslotDuration"/>
+                                    </div>
+                                    <div class="col-xs-12 col-sm-2">
+                                        <h:inputText id='currentTimeslotDuration' value="0" size="2" style="margin-left:12px" disabled="true" />
+                                    </div>
+                                </div>
+                            </div>
 
-                                <h:outputText value="</div>" escape="false" />
-                            </h:panelGroup>
-                            
-                            <%-- Single: --%>
-                            <h:panelGroup>
-                                <h:outputText value="<div id='single' style='display:none' styleClass='si' >" escape="false"/>
-                                <h:panelGrid columns="2" rendered="true" styleClass="si" columnClasses="miCol1,miCol2">
+                            <div id="single" class="si" style="display:none;">
+                                <h:panelGrid columns="2" rendered="true" columnClasses="miCol1,miCol2">
                                     <h:selectOneRadio id="groupSubradio" value="#{NewSignupMeetingBean.unlimited}" valueChangeListener="#{NewSignupMeetingBean.processGroup}" onclick="switchSingle(value)" styleClass="meetingRadioBtn" layout="pageDirection">
                                         <f:selectItem itemValue="#{false}" itemLabel="#{msgs.tab_max_attendee}"/>
                                         <f:selectItem itemValue="#{true}" itemLabel="#{msgs.unlimited_num_attendee}"/>
@@ -420,17 +428,16 @@
                                         <h:outputText value="&nbsp;" styleClass="titleText" escape="false"/>
                                     </h:panelGrid>
                                 </h:panelGrid>
-                                <h:outputText value="</div>" escape="false" />
-                            </h:panelGroup>
-                            <h:outputText id="announ" value="&nbsp;" style='display:none' styleClass="titleText" escape="false"/>
-                        </h:panelGrid>
+                                <h:outputText value="&nbsp;" styleClass="titleText" escape="false"/>
+                                <h:outputText id="announ" value="&nbsp;" style='display:none' styleClass="titleText" escape="false"/>
+                            </div>
                         </div>
                     </div>
                 </div>
 
                 <%-- User defined timeslots --%>
                 <div class="form-group row" id="userdef-add">
-                    <h:outputLabel id="userDefTsChoice_1" value="" style="display:none;" styleClass="col-lg-2 form-control-label"/>
+                    <h:outputLabel id="userDefTsChoice_1" value="" style="display:none;" styleClass="col-md-2 form-control-label"/>
                     <h:panelGroup id="userDefTsChoice_2" style="display:none;" styleClass="col-lg-10" layout="block">
                         <h:panelGrid>
                             <h:panelGroup>
diff --git a/signup/tool/src/webapp/signup/newMeeting/step2.jsp b/signup/tool/src/webapp/signup/newMeeting/step2.jsp
index ee252bd877e6..ac4a74827676 100644
--- a/signup/tool/src/webapp/signup/newMeeting/step2.jsp
+++ b/signup/tool/src/webapp/signup/newMeeting/step2.jsp
@@ -27,8 +27,21 @@
 					else
 						jQuery(tag).slideUp("fast");
 				}
-			}			
-						
+			}	
+	
+			function showOtherDefaultSettings(imageFolderName1,imagefolderName2,ContentTagName){
+				var detailsTag = document.getElementById(ContentTagName);
+				switchShowOrHide(detailsTag);
+				
+				var image1 = document.getElementById(imageFolderName1);
+				switchShowOrHide(image1);
+				
+				var image2 = document.getElementById(imagefolderName2);
+				switchShowOrHide(image2);
+
+				var otherDefaultSettings = document.getElementById("otherDefaultSettings");
+				switchShowOrHide(otherDefaultSettings);
+			}
 		</script>
 	  
 		
@@ -38,337 +51,547 @@
 				
 			<h:form id="meeting">
 			 	<sakai:view_title value="#{msgs.event_step5_page_title}"/>
-				<div class="table-responsive">
-				<h:panelGrid columns="1">
-					
-						<h:panelGrid columns="2"  columnClasses="titleColumn,valueColumn">
-								
-								<%-- title --%>
-								<h:outputText value="#{msgs.event_name}" styleClass="titleText" escape="false"/>
-								<h:panelGroup>
-									<h:panelGroup rendered="#{NewSignupMeetingBean.recurrence}">
-										<h:graphicImage title="#{msgs.event_tool_tips_recurrence}" value="/images/recurrence.gif"  alt="recurrence" style="border:none" />
-										<h:outputText value="&nbsp;" escape="false"/>
-									</h:panelGroup>
-									<h:outputText value="#{NewSignupMeetingBean.signupMeeting.title}" styleClass="longtext" escape="false"/>
-								</h:panelGroup>
-								
-								<%-- organiser --%>
-								<h:outputText value="#{msgs.event_owner}" styleClass="titleText" escape="false"/>
-								<h:outputText value="#{NewSignupMeetingBean.instructorName}" styleClass="longtext" escape="false"/>
-								
-								<%--  description --%>
-								<h:outputText value="#{msgs.event_description}" styleClass="titleText" escape="false"/>
-								<h:outputText value="#{NewSignupMeetingBean.signupMeeting.description}" styleClass="longtext" escape="false"/>
-								
-								<%--  attachments --%>
-								<h:outputText  value="#{msgs.attachments}" styleClass="titleText" escape="false" rendered="#{!NewSignupMeetingBean.attachmentsEmpty}"/>
-			         			<h:panelGrid columns="1" rendered="#{!NewSignupMeetingBean.attachmentsEmpty}">
-			         				<t:dataTable value="#{NewSignupMeetingBean.attachments}" var="attach" >
-			         					<t:column>
-	        								<%@ include file="/signup/common/mimeIcon.jsp" %>
-	      								</t:column>
-			         					<t:column>
-			         						<h:outputLink  value="#{attach.location}" target="new_window">
-			         							<h:outputText value="#{attach.filename}"/>
-			         						</h:outputLink>
-			         					</t:column>
-			         					<t:column>
-			         						<h:outputText escape="false" value="(#{attach.fileSize}kb)" rendered="#{!attach.isLink}"/>
-			         					</t:column>
-			         				</t:dataTable>			         				
-				         		</h:panelGrid>
-								
-								<%--  start time --%>
-								<h:outputText value="#{msgs.event_start_time}" styleClass="titleText" escape="false"/>
-								<h:panelGroup>
-									<h:outputText value="#{NewSignupMeetingBean.signupMeeting.startTime}" styleClass="longtext">
-				 						<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
-				 					</h:outputText>
-									<h:outputText value="#{NewSignupMeetingBean.signupMeeting.startTime}" styleClass="longtext">
-				 						<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
-				 					</h:outputText>
-				 					<h:outputText value="#{NewSignupMeetingBean.signupMeeting.startTime}" styleClass="longtext">
-				 						<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
-				 					</h:outputText>		
+			 	<div class="form">
+					<%-- title --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_name}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGroup>
+								<h:panelGroup rendered="#{NewSignupMeetingBean.recurrence}">
+									<h:graphicImage title="#{msgs.event_tool_tips_recurrence}" value="/images/recurrence.gif"  alt="recurrence" style="border:none" />
+									<h:outputText value="&nbsp;" escape="false"/>
 								</h:panelGroup>
-								
-								<%-- end time --%>
-								<h:outputText value="#{msgs.event_end_time}" styleClass="titleText" escape="false"/>
-								<h:panelGroup rendered="#{!NewSignupMeetingBean.endTimeAutoAdjusted}">
-									<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" styleClass="longtext">
-										<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" styleClass="longtext">
-										<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" styleClass="longtext">
-										<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-								</h:panelGroup>
-								<h:panelGroup rendered="#{NewSignupMeetingBean.endTimeAutoAdjusted}">
-									<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" style="color:#b11;" styleClass="longtext">
-										<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" style="color:#b11;" styleClass="longtext">
-										<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" style="color:#b11;" styleClass="longtext">
-										<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-								</h:panelGroup>
-								
-								<%-- recurrence --%>
-								<h:outputText styleClass="titleText" value="#{msgs.event_recurrence}"  rendered="#{NewSignupMeetingBean.recurrence}" escape="false"/> 
-								<h:outputText value="#{NewSignupMeetingBean.eventFreqType}" rendered="#{NewSignupMeetingBean.recurrence}" escape="false"/>
-								 
-								<h:outputText value="#{msgs.event_repeat_until}" styleClass="titleText"  rendered="#{NewSignupMeetingBean.recurrence && NewSignupMeetingBean.recurLengthChoice=='1'}" escape="false"/>
-								<h:outputText value="#{NewSignupMeetingBean.repeatUntil}" rendered="#{NewSignupMeetingBean.recurrence && NewSignupMeetingBean.recurLengthChoice=='1'}">
-									<f:convertDateTime dateStyle="full" />
+								<h:outputText value="#{NewSignupMeetingBean.signupMeeting.title}" styleClass="longtext" escape="false"/>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- organiser --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_owner}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:outputText value="#{NewSignupMeetingBean.instructorName}" styleClass="longtext" escape="false"/>
+						</h:panelGroup>
+					</div>
+
+					<%--  description --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_description}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:outputText value="#{NewSignupMeetingBean.signupMeeting.description}" styleClass="longtext" escape="false"/>
+						</h:panelGroup>
+					</div>
+
+					<%--  attachments --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{!NewSignupMeetingBean.attachmentsEmpty}">
+							<h:outputText  value="#{msgs.attachments}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{!NewSignupMeetingBean.attachmentsEmpty}">
+							<h:panelGrid columns="1">
+								<t:dataTable value="#{NewSignupMeetingBean.attachments}" var="attach" >
+									<t:column>
+										<%@ include file="/signup/common/mimeIcon.jsp" %>
+									</t:column>
+									<t:column>
+										<h:outputLink  value="#{attach.location}" target="new_window">
+											<h:outputText value="#{attach.filename}"/>
+										</h:outputLink>
+									</t:column>
+									<t:column>
+										<h:outputText escape="false" value="(#{attach.fileSize}kb)" rendered="#{!attach.isLink}"/>
+									</t:column>
+								</t:dataTable>			         				
+							</h:panelGrid>
+						</h:panelGroup>
+					</div>
+
+					<%--  start time --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_start_time}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGroup>
+								<h:outputText value="#{NewSignupMeetingBean.signupMeeting.startTime}" styleClass="longtext">
+									<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
 								</h:outputText>
-								<h:outputText value="#{msgs.event_repeat_num}" styleClass="titleText"  rendered="#{NewSignupMeetingBean.recurrence && NewSignupMeetingBean.recurLengthChoice=='0'}" escape="false"/>
-								<h:outputText value="#{NewSignupMeetingBean.occurrences}" rendered="#{NewSignupMeetingBean.recurrence && NewSignupMeetingBean.recurLengthChoice=='0'}" />
-								
-								<%-- location --%>
-								<h:outputText value="#{msgs.event_location}" styleClass="titleText" escape="false"/>
-								<h:outputText value="#{NewSignupMeetingBean.signupMeeting.location}" styleClass="longtext" escape="false"/>
-								
-								<%-- category --%>
-								<h:outputText value="#{msgs.event_category}" styleClass="titleText" escape="false"/>
-								<h:outputText value="#{NewSignupMeetingBean.signupMeeting.category}" styleClass="longtext" escape="false"/>
-								
-								<h:outputText value="#{msgs.event_signup_start}" styleClass="titleText" rendered="#{!NewSignupMeetingBean.announcementType}" escape="false"/>
-								<h:panelGroup rendered="#{!NewSignupMeetingBean.announcementType}">
-									<h:outputText value="#{NewSignupMeetingBean.signupBeginInDate}" styleClass="longtext">
-										<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{NewSignupMeetingBean.signupBeginInDate}" styleClass="longtext">
-										<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{NewSignupMeetingBean.signupBeginInDate}" styleClass="longtext">
-										<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-								</h:panelGroup>
-								
-								<h:outputText value="#{msgs.event_signup_deadline}" styleClass="titleText" rendered="#{!NewSignupMeetingBean.announcementType}" escape="false"/>
-								<h:panelGroup rendered="#{!NewSignupMeetingBean.announcementType}">
-									<h:outputText value="#{NewSignupMeetingBean.signupDeadlineInDate}" styleClass="longtext">
-										<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{NewSignupMeetingBean.signupDeadlineInDate}" styleClass="longtext">
-										<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{NewSignupMeetingBean.signupDeadlineInDate}" styleClass="longtext">
-										<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-								</h:panelGroup>
-								
-								<h:outputText value="&nbsp;" escape="false"/>
-								<h:outputText value="&nbsp;" escape="false"/>
-								
-								<h:outputText value="#{msgs.event_type_title}" styleClass="titleText"/>
-								<h:outputText value="#{NewSignupMeetingBean.displayCurrentMeetingType}" styleClass="longtext" escape="false"/>
-								
-								<h:outputText value="#{msgs.event_num_timeslot}" styleClass="titleText" rendered="#{NewSignupMeetingBean.individualType}" escape="false"/>
-								<h:outputText value="#{NewSignupMeetingBean.numberOfSlots}" styleClass="longtext" rendered="#{NewSignupMeetingBean.individualType}" escape="false"/>																																								
-							
-								<h:outputText value="#{msgs.event_duration_each_timeslot}" styleClass="titleText" rendered="#{NewSignupMeetingBean.individualType}" escape="false"/>
-								<h:outputText value="#{NewSignupMeetingBean.timeSlotDuration}" styleClass="longtext" rendered="#{NewSignupMeetingBean.individualType}" escape="false"/>																							
-							
-								<h:outputText value="#{msgs.event_max_attendee_each_timeslot}" styleClass="titleText" rendered="#{NewSignupMeetingBean.individualType}" escape="false"/>
-								<h:outputText value="#{NewSignupMeetingBean.numberOfAttendees}" styleClass="longtext" rendered="#{NewSignupMeetingBean.individualType}" escape="false"/>																																						
-							
-								<h:outputText value="#{msgs.event_show_schedule}" styleClass="titleText" rendered="#{NewSignupMeetingBean.customTimeslotType}"/>
-								<h:panelGroup rendered="#{NewSignupMeetingBean.customTimeslotType}">
-									<h:outputLabel  id="imageOpen_schedule" style="display:none" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_schedule','meeting:imageClose_schedule','meeting:scheduleDetail');">
-				   	    				<h:graphicImage value="/images/open.gif"  alt="open" title="#{msgs.title_tip_click_hide_schedule}" style="border:none;" styleClass="openCloseImageIcon"/>
-				   	    				<h:outputText value="#{msgs.event_hide_custom_ts}" escape="false" style="vertical-align: top;"/>
-			   	    				</h:outputLabel>
-			   	    				<h:outputLabel id="imageClose_schedule" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_schedule','meeting:imageClose_schedule','meeting:scheduleDetail');">
-			   	    					<h:graphicImage value="/images/closed.gif" alt="close" title="#{msgs.title_tip_click_show_schedule}" style="border:none;vertical-align:top;" styleClass="openCloseImageIcon"/>
-			   	    					<h:outputText value="#{msgs.event_show_custom_ts}" escape="false" style="vertical-align: top;"/>
-				   	    			</h:outputLabel>
-				   	    		</h:panelGroup>
-				   	    		
-				   	    		<h:outputText id="scheduleDetail_1" value="" styleClass="titleText" rendered="#{NewSignupMeetingBean.customTimeslotType}"/>
-								<h:dataTable id="scheduleDetail_2" value="#{NewSignupMeetingBean.customTimeSlotWrpList}" var="timeSlot"
-						   			rowClasses="oddTimeSlotRow,evenTimeSlotRow"	columnClasses="timeslotCol,assignStudentsCol" 
-						   			styleClass="signupTable"  style="display:none; width: 55%"
-						   			rendered="#{NewSignupMeetingBean.customTimeslotType}" >
-										<h:column>		   
-											<f:facet name="header">
-												<h:outputText value="#{msgs.tab_time_slot}"/>
-											</f:facet>
-											<h:panelGroup>
-									   			<h:outputText value="#{timeSlot.timeSlot.startTime}" styleClass="longtext">
-													<f:convertDateTime pattern="h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
-												</h:outputText>
-												<h:outputText value="#{timeSlot.timeSlot.startTime}" rendered="#{NewSignupMeetingBean.signupMeeting.meetingCrossDays}">
-														<f:convertDateTime pattern=", EEE," timeZone="#{UserTimeZone.userTimeZone}"/>
-												</h:outputText>
-												<h:outputText value="#{timeSlot.timeSlot.startTime}" rendered="#{NewSignupMeetingBean.signupMeeting.meetingCrossDays}">
-													<f:convertDateTime  dateStyle="short" pattern="#{UserLocale.dateFormat}" timeZone="#{UserTimeZone.userTimeZone}"/>
-												</h:outputText>
-												<h:outputText value="#{msgs.timeperiod_divider}" escape="false"/>
-												<h:outputText value="#{timeSlot.timeSlot.endTime}" styleClass="longtext">
-													<f:convertDateTime pattern="h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
-												</h:outputText>
-												<h:outputText value="#{timeSlot.timeSlot.endTime}" rendered="#{NewSignupMeetingBean.signupMeeting.meetingCrossDays}">
-														<f:convertDateTime pattern=", EEE," timeZone="#{UserTimeZone.userTimeZone}"/>
-												</h:outputText>
-												<h:outputText value="#{timeSlot.timeSlot.endTime}" rendered="#{NewSignupMeetingBean.signupMeeting.meetingCrossDays}">
-													<f:convertDateTime  dateStyle="short" pattern="#{UserLocale.dateFormat}" timeZone="#{UserTimeZone.userTimeZone}"/>
-												</h:outputText>
-											</h:panelGroup>		
-								   		</h:column>
-								   		
-								   		<h:column>		   
-											<f:facet name="header">
-												<h:outputText value="#{msgs.tab_max_attendee}"/>
-											</f:facet>
-											<h:outputText value="#{timeSlot.timeSlot.maxNoOfAttendees}"/>
-								   		</h:column>
-								</h:dataTable>
-								
-								<h:outputText value="#{msgs.event_max_attendees}" styleClass="titleText" rendered="#{NewSignupMeetingBean.groupType}" escape="false"/>
-								<h:panelGroup rendered="#{NewSignupMeetingBean.groupType}" >
-									<h:outputText id="maxAttendee" value="#{NewSignupMeetingBean.maxOfAttendees}" rendered="#{!NewSignupMeetingBean.unlimited}" styleClass="longtext"/>
-									<h:outputText value="#{msgs.event_unlimited}" rendered="#{NewSignupMeetingBean.unlimited}" styleClass="longtext"/>					
-								</h:panelGroup>
-								
-								<h:outputText value="#{msgs.attend_view_title}" styleClass="titleText" rendered="#{NewSignupMeetingBean.attendanceOn}" escape="false"/>
-								<h:panelGroup rendered="#{NewSignupMeetingBean.attendanceOn}" >
-									<h:outputText value="#{msgs.attend_on}" rendered="#{NewSignupMeetingBean.signupMeeting.allowAttendance}" styleClass="longtext"/>
-									<h:outputText value="#{msgs.attend_off}" rendered="#{!NewSignupMeetingBean.signupMeeting.allowAttendance}" styleClass="longtext"/>					
-								</h:panelGroup>
-																
-								<h:outputText value="#{msgs.event_publish_to}" escape="false"  styleClass="titleText"/>
-								<h:dataTable id="userSites" value="#{NewSignupMeetingBean.selectedSignupSites}" var="site"  styleClass="sitegroup">
-									<h:column>
-										<h:outputText value="#{site.title} #{msgs.event_site_level}" rendered="#{site.siteScope}" styleClass="sitetitle" escape="false"/>
-										<h:panelGroup rendered="#{!site.siteScope}">
-											<h:outputText value="#{site.title} #{msgs.event_group_level}" styleClass="sitetitle" escape="false"/>
-											<h:dataTable id="userGroups" value="#{site.signupGroups}" var="group" styleClass="sitegroup">
-												<h:column>
-														<h:outputText value=" - #{group.title}" escape="false" styleClass="grouptitle"/>
-												</h:column>
-											</h:dataTable>
-										</h:panelGroup>							
-									</h:column>
-								</h:dataTable>
-																
-								<h:outputText value="&nbsp;" escape="false"/>
-								<h:outputText value="&nbsp;" escape="false"/>
-								
-								<h:outputText value="#{msgs.event_publish_attendee_name}" styleClass="titleText" escape="false" rendered="#{!NewSignupMeetingBean.announcementType}"/>
-								<h:panelGroup styleClass="longtext" rendered="#{!NewSignupMeetingBean.announcementType}">
-									<h:selectBooleanCheckbox id="showparticipants" value="#{NewSignupMeetingBean.showParticipants}"/>
-									<h:outputLabel for="showparticipants" value="#{msgs.event_yes_show_attendee_public}" escape="false"/>
-								</h:panelGroup>
-								
-								<h:outputText value="#{msgs.event_select_coordinators}" escape="false"  styleClass="titleText"/>
-								<h:dataTable id="meeting_coordinators" value="#{NewSignupMeetingBean.allPossibleCoordinators}" var="coUser" styleClass="coordinatorTab">
-									<h:column>
-										<h:selectBooleanCheckbox id="meetingcoord" value="#{coUser.checked}"/>
-									    <h:outputLabel for="meetingcoord" value="&nbsp;#{coUser.displayName}" escape="false" styleClass="longtext"/>				
-									</h:column>
-								</h:dataTable>																
-								
-								<h:outputText value="#{msgs.event_receive_notification}" styleClass="titleText" escape="false" rendered="#{!NewSignupMeetingBean.announcementType}"/>
-								<h:panelGroup styleClass="longtext" rendered="#{!NewSignupMeetingBean.announcementType}">
-									<h:selectBooleanCheckbox id="receiveemail" value="#{NewSignupMeetingBean.receiveEmail}"/>
-									<h:outputLabel for="receiveemail" value="#{msgs.event_yes_receive_notification}" escape="false"/>
-								</h:panelGroup>
-								
-								<h:outputText value="&nbsp;" escape="false"/>
-								<h:outputText value="&nbsp;" escape="false"/>
-								
-								<h:outputText value="#{msgs.event_create_email_notification}" styleClass="titleText" escape="false"/>
-								<h:panelGrid columns="1" style="width:100%;margin-left:-3px;" rendered="#{NewSignupMeetingBean.publishedSite}">
-									<h:panelGroup styleClass="editText" >
-										<h:selectBooleanCheckbox id="emailChoice" value="#{NewSignupMeetingBean.sendEmail}" onclick="isShowEmailChoice()" disabled="#{NewSignupMeetingBean.mandatorySendEmail}"/>
-										<h:outputLabel for="emailChoice" value="#{msgs.event_yes_email_notification}" escape="false"/>
+								<h:outputText value="#{NewSignupMeetingBean.signupMeeting.startTime}" styleClass="longtext">
+									<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{NewSignupMeetingBean.signupMeeting.startTime}" styleClass="longtext">
+									<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>		
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- end time --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_end_time}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGroup rendered="#{!NewSignupMeetingBean.endTimeAutoAdjusted}">
+								<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" styleClass="longtext">
+									<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" styleClass="longtext">
+									<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" styleClass="longtext">
+									<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+							</h:panelGroup>
+							<h:panelGroup rendered="#{NewSignupMeetingBean.endTimeAutoAdjusted}">
+								<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" style="color:#b11;" styleClass="longtext">
+									<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" style="color:#b11;" styleClass="longtext">
+									<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{NewSignupMeetingBean.meetingEndTime}" style="color:#b11;" styleClass="longtext">
+									<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- recurrence --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{NewSignupMeetingBean.recurrence}">
+							<h:outputText styleClass="titleText" value="#{msgs.event_recurrence}" escape="false"/> 
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{NewSignupMeetingBean.recurrence or (NewSignupMeetingBean.recurrence && NewSignupMeetingBean.recurLengthChoice=='1') or (NewSignupMeetingBean.recurrence && NewSignupMeetingBean.recurLengthChoice=='0')}">
+							<h:outputText value="#{NewSignupMeetingBean.eventFreqType}" rendered="#{NewSignupMeetingBean.recurrence}" escape="false"/>
+							<h:outputText value="#{msgs.event_repeat_until}" styleClass="titleText"  rendered="#{NewSignupMeetingBean.recurrence && NewSignupMeetingBean.recurLengthChoice=='1'}" escape="false"/>
+							<h:outputText value="#{NewSignupMeetingBean.repeatUntil}" rendered="#{NewSignupMeetingBean.recurrence && NewSignupMeetingBean.recurLengthChoice=='1'}">
+								<f:convertDateTime dateStyle="full" />
+							</h:outputText>
+							<h:outputText value="#{msgs.event_repeat_num}" styleClass="titleText"  rendered="#{NewSignupMeetingBean.recurrence && NewSignupMeetingBean.recurLengthChoice=='0'}" escape="false"/>
+							<h:outputText value="#{NewSignupMeetingBean.occurrences}" rendered="#{NewSignupMeetingBean.recurrence && NewSignupMeetingBean.recurLengthChoice=='0'}" />
+						</h:panelGroup>
+					</div>
+
+					<%-- location --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_location}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:outputText value="#{NewSignupMeetingBean.signupMeeting.location}" styleClass="longtext" escape="false"/>
+						</h:panelGroup>
+					</div>
+
+					<%-- category --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_category}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:outputText value="#{NewSignupMeetingBean.signupMeeting.category}" styleClass="longtext" escape="false"/>
+						</h:panelGroup>
+					</div>
+
+					<%-- sign up begins --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+							<h:outputText value="#{msgs.event_signup_start}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+							<h:panelGroup>
+								<h:outputText value="#{NewSignupMeetingBean.signupBeginInDate}" styleClass="longtext">
+									<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{NewSignupMeetingBean.signupBeginInDate}" styleClass="longtext">
+									<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{NewSignupMeetingBean.signupBeginInDate}" styleClass="longtext">
+									<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- sign up ends --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+							<h:outputText value="#{msgs.event_signup_deadline}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+							<h:panelGroup>
+								<h:outputText value="#{NewSignupMeetingBean.signupDeadlineInDate}" styleClass="longtext">
+									<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{NewSignupMeetingBean.signupDeadlineInDate}" styleClass="longtext">
+									<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{NewSignupMeetingBean.signupDeadlineInDate}" styleClass="longtext">
+									<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+					<h:outputText value="&nbsp;" escape="false"/>
+					<h:outputText value="&nbsp;" escape="false"/>
+
+					<%-- meeting type --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_type_title}" styleClass="titleText"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:outputText value="#{NewSignupMeetingBean.displayCurrentMeetingType}" styleClass="longtext" escape="false"/>
+						</h:panelGroup>
+					</div>
+
+					<%-- number of time slots --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{NewSignupMeetingBean.individualType}">
+							<h:outputText value="#{msgs.event_num_timeslot}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{NewSignupMeetingBean.individualType}">
+							<h:outputText value="#{NewSignupMeetingBean.numberOfSlots}" styleClass="longtext" escape="false"/>
+						</h:panelGroup>
+					</div>
+
+					<%-- duration of each time slot --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{NewSignupMeetingBean.individualType}">
+							<h:outputText value="#{msgs.event_duration_each_timeslot}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{NewSignupMeetingBean.individualType}">
+							<h:outputText value="#{NewSignupMeetingBean.timeSlotDuration}" styleClass="longtext" escape="false"/>	
+						</h:panelGroup>
+					</div>
+
+					<%-- max of participants per time slot --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{NewSignupMeetingBean.individualType}">
+							<h:outputText value="#{msgs.event_max_attendee_each_timeslot}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{NewSignupMeetingBean.individualType}">
+							<h:outputText value="#{NewSignupMeetingBean.numberOfAttendees}" styleClass="longtext" escape="false"/>
+						</h:panelGroup>
+					</div>
+
+					<%-- calendar details --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{NewSignupMeetingBean.customTimeslotType}">
+							<h:outputText value="#{msgs.event_show_schedule}" styleClass="titleText"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{NewSignupMeetingBean.customTimeslotType}">
+							<h:panelGroup>
+								<h:outputLabel  id="imageOpen_schedule" style="display:none" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_schedule','meeting:imageClose_schedule','meeting:scheduleDetail');">
+									<h:graphicImage value="/images/open.gif"  alt="open" title="#{msgs.title_tip_click_hide_schedule}" style="border:none;" styleClass="openCloseImageIcon"/>
+									<h:outputText value="#{msgs.event_hide_custom_ts}" escape="false" style="vertical-align: top;"/>
+								</h:outputLabel>
+								<h:outputLabel id="imageClose_schedule" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_schedule','meeting:imageClose_schedule','meeting:scheduleDetail');">
+									<h:graphicImage value="/images/closed.gif" alt="close" title="#{msgs.title_tip_click_show_schedule}" style="border:none;vertical-align:top;" styleClass="openCloseImageIcon"/>
+									<h:outputText value="#{msgs.event_show_custom_ts}" escape="false" style="vertical-align: top;"/>
+								</h:outputLabel>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- calendar details 1 --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{NewSignupMeetingBean.customTimeslotType}">
+							<h:outputText id="scheduleDetail_1" value="" styleClass="titleText"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{NewSignupMeetingBean.customTimeslotType}">
+							<h:dataTable id="scheduleDetail_2" value="#{NewSignupMeetingBean.customTimeSlotWrpList}" var="timeSlot"
+							rowClasses="oddTimeSlotRow,evenTimeSlotRow"	columnClasses="timeslotCol,assignStudentsCol" 
+							styleClass="signupTable"  style="display:none; width: 55%">
+								<h:column>
+									<f:facet name="header">
+										<h:outputText value="#{msgs.tab_time_slot}"/>
+									</f:facet>
+									<h:panelGroup>
+										<h:outputText value="#{timeSlot.timeSlot.startTime}" styleClass="longtext">
+											<f:convertDateTime pattern="h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+										</h:outputText>
+										<h:outputText value="#{timeSlot.timeSlot.startTime}" rendered="#{NewSignupMeetingBean.signupMeeting.meetingCrossDays}">
+											<f:convertDateTime pattern=", EEE," timeZone="#{UserTimeZone.userTimeZone}"/>
+										</h:outputText>
+										<h:outputText value="#{timeSlot.timeSlot.startTime}" rendered="#{NewSignupMeetingBean.signupMeeting.meetingCrossDays}">
+											<f:convertDateTime  dateStyle="short" pattern="#{UserLocale.dateFormat}" timeZone="#{UserTimeZone.userTimeZone}"/>
+										</h:outputText>
+										<h:outputText value="#{msgs.timeperiod_divider}" escape="false"/>
+										<h:outputText value="#{timeSlot.timeSlot.endTime}" styleClass="longtext">
+											<f:convertDateTime pattern="h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+										</h:outputText>
+										<h:outputText value="#{timeSlot.timeSlot.endTime}" rendered="#{NewSignupMeetingBean.signupMeeting.meetingCrossDays}">
+											<f:convertDateTime pattern=", EEE," timeZone="#{UserTimeZone.userTimeZone}"/>
+										</h:outputText>
+										<h:outputText value="#{timeSlot.timeSlot.endTime}" rendered="#{NewSignupMeetingBean.signupMeeting.meetingCrossDays}">
+											<f:convertDateTime  dateStyle="short" pattern="#{UserLocale.dateFormat}" timeZone="#{UserTimeZone.userTimeZone}"/>
+										</h:outputText>
 									</h:panelGroup>
-									
-									<h:panelGroup id="emailAttendeeOnly">
-										<h:selectOneRadio  value="#{NewSignupMeetingBean.sendEmailToSelectedPeopleOnly}" layout="pageDirection" styleClass="rs" >
-											<f:selectItem id="all_attendees" itemValue="all" itemLabel="#{msgs.label_email_all_people}" itemDisabled="true"/>
-											<f:selectItem id="only_organizers" itemValue="organizers_only" itemLabel="#{msgs.label_email_organizers_only}" itemDisabled="true"/>
-										</h:selectOneRadio>
+								</h:column>
+								<h:column>
+									<f:facet name="header">
+										<h:outputText value="#{msgs.tab_max_attendee}"/>
+									</f:facet>
+									<h:outputText value="#{timeSlot.timeSlot.maxNoOfAttendees}"/>
+								</h:column>
+							</h:dataTable>
+						</h:panelGroup>
+					</div>
+
+					<%-- event max attendees --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{NewSignupMeetingBean.groupType}">
+							<h:outputText value="#{msgs.event_max_attendees}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{NewSignupMeetingBean.groupType}">
+							<h:panelGroup>
+								<h:outputText id="maxAttendee" value="#{NewSignupMeetingBean.maxOfAttendees}" rendered="#{!NewSignupMeetingBean.unlimited}" styleClass="longtext"/>
+								<h:outputText value="#{msgs.event_unlimited}" rendered="#{NewSignupMeetingBean.unlimited}" styleClass="longtext"/>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- attendance --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{NewSignupMeetingBean.attendanceOn}">
+							<h:outputText value="#{msgs.attend_view_title}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{NewSignupMeetingBean.attendanceOn}">
+							<h:panelGroup>
+								<h:outputText value="#{msgs.attend_on}" rendered="#{NewSignupMeetingBean.signupMeeting.allowAttendance}" styleClass="longtext"/>
+								<h:outputText value="#{msgs.attend_off}" rendered="#{!NewSignupMeetingBean.signupMeeting.allowAttendance}" styleClass="longtext"/>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- available to --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_publish_to}" escape="false" styleClass="titleText"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:dataTable id="userSites" value="#{NewSignupMeetingBean.selectedSignupSites}" var="site"  styleClass="sitegroup">
+								<h:column>
+									<h:outputText value="#{site.title} #{msgs.event_site_level}" rendered="#{site.siteScope}" styleClass="sitetitle" escape="false"/>
+									<h:panelGroup rendered="#{!site.siteScope}">
+										<h:outputText value="#{site.title} #{msgs.event_group_level}" styleClass="sitetitle" escape="false"/>
+										<h:dataTable id="userGroups" value="#{site.signupGroups}" var="group" styleClass="sitegroup">
+											<h:column>
+													<h:outputText value=" - #{group.title}" escape="false" styleClass="grouptitle"/>
+											</h:column>
+										</h:dataTable>
 									</h:panelGroup>
-								</h:panelGrid>
-								<h:panelGroup styleClass="longtext" rendered="#{!NewSignupMeetingBean.publishedSite}">
-									<h:selectBooleanCheckbox id="sendemail" value="#{NewSignupMeetingBean.sendEmail}" disabled="true"/>
-									<h:outputLabel for="sendemail" value="#{msgs.event_email_not_send_out_label}" escape="false" style="color:#b11"/>
-								</h:panelGroup>
-									
-								<h:outputText value="#{msgs.event_meeting_default_notify_setting}" styleClass="titleText" escape="false"/>
-								<h:panelGroup styleClass="longtext" >
-									<h:selectBooleanCheckbox id="sendemailbyowner" value="#{NewSignupMeetingBean.sendEmailByOwner}"/>
-									<h:outputLabel for="sendemailbyowner" value="#{msgs.event_yes_meeting_default_notify_setting}" escape="false"/>
+								</h:column>
+							</h:dataTable>
+						</h:panelGroup>
+					</div>
+					<h:outputText value="&nbsp;" escape="false"/>
+					<h:outputText value="&nbsp;" escape="false"/>
+
+					<%-- available to --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+							<h:outputText value="#{msgs.event_publish_attendee_name}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+							<h:panelGroup styleClass="longtext">
+								<h:selectBooleanCheckbox id="showparticipants" value="#{NewSignupMeetingBean.showParticipants}"/>
+								<h:outputLabel for="showparticipants" value="#{msgs.event_yes_show_attendee_public}" escape="false"/>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- meeting coordinators --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_select_coordinators}" escape="false" styleClass="titleText"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:dataTable id="meeting_coordinators" value="#{NewSignupMeetingBean.allPossibleCoordinators}" var="coUser" styleClass="coordinatorTab">
+								<h:column>
+									<h:selectBooleanCheckbox id="meetingcoord" value="#{coUser.checked}"/>
+									<h:outputLabel for="meetingcoord" value="&nbsp;#{coUser.displayName}" escape="false" styleClass="longtext"/>
+								</h:column>
+							</h:dataTable>
+						</h:panelGroup>
+					</div>
+
+					<%-- notifications of participant actions --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+							<h:outputText value="#{msgs.event_receive_notification}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+							<h:panelGroup styleClass="longtext">
+								<h:selectBooleanCheckbox id="receiveemail" value="#{NewSignupMeetingBean.receiveEmail}"/>
+								<h:outputLabel for="receiveemail" value="#{msgs.event_yes_receive_notification}" escape="false"/>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+					<h:outputText value="&nbsp;" escape="false"/>
+					<h:outputText value="&nbsp;" escape="false"/>
+
+					<%-- announce availability --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_create_email_notification}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGrid columns="1" style="width:100%;margin-left:-3px;" rendered="#{NewSignupMeetingBean.publishedSite}">
+								<h:panelGroup styleClass="editText" >
+									<h:selectBooleanCheckbox id="emailChoice" value="#{NewSignupMeetingBean.sendEmail}" onclick="isShowEmailChoice()" disabled="#{NewSignupMeetingBean.mandatorySendEmail}"/>
+									<h:outputLabel for="emailChoice" value="#{msgs.event_yes_email_notification}" escape="false"/>
 								</h:panelGroup>
 								
-								<h:outputText value="#{msgs.event_other_default_setting}" escape="false" styleClass="titleText" rendered="#{!NewSignupMeetingBean.announcementType}"/>
-								<h:panelGroup rendered="#{!NewSignupMeetingBean.announcementType}">	
-				   	    				<h:outputLabel  id="imageOpen_otherSetting" style="display:none" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_otherSetting','meeting:imageClose_otherSetting','meeting:otherSetting');">
-					   	    				<h:graphicImage value="/images/open.gif"  alt="open" title="Click to hide details." style="border:none;vertical-align: middle;" styleClass="openCloseImageIcon"/>
-					   	    				<h:outputText value="#{msgs.event_close_other_default_setting}" escape="false" style="vertical-align: middle;"/>
-				   	    				</h:outputLabel>
-				   	    				<h:outputLabel id="imageClose_otherSetting" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_otherSetting','meeting:imageClose_otherSetting','meeting:otherSetting');">
-				   	    					<h:graphicImage value="/images/closed.gif" alt="close" title="Click to show details." style="border:none;vertical-align:middle;" styleClass="openCloseImageIcon"/>
-				   	    					<h:outputText value="#{msgs.event_show_other_default_setting}" escape="false" style="vertical-align: middle;"/>
-				   	    				</h:outputLabel>
-							   </h:panelGroup>
-
-							   	<h:outputText id="otherSetting_1" style="display:none" value="#{msgs.event_allow_waitList}" styleClass="titleText" escape="false" rendered="#{!NewSignupMeetingBean.announcementType}"/>
-								<h:panelGroup id="otherSetting_2" style="display:none" styleClass="longtext" rendered="#{!NewSignupMeetingBean.announcementType}">
+								<h:panelGroup id="emailAttendeeOnly">
+									<h:selectOneRadio  value="#{NewSignupMeetingBean.sendEmailToSelectedPeopleOnly}" layout="pageDirection" styleClass="rs" >
+										<f:selectItem id="all_attendees" itemValue="all" itemLabel="#{msgs.label_email_all_people}" itemDisabled="true"/>
+										<f:selectItem id="only_organizers" itemValue="organizers_only" itemLabel="#{msgs.label_email_organizers_only}" itemDisabled="true"/>
+									</h:selectOneRadio>
+								</h:panelGroup>
+							</h:panelGrid>
+							<h:panelGroup styleClass="longtext" rendered="#{!NewSignupMeetingBean.publishedSite}">
+								<h:selectBooleanCheckbox id="sendemail" value="#{NewSignupMeetingBean.sendEmail}" disabled="true"/>
+								<h:outputLabel for="sendemail" value="#{msgs.event_email_not_send_out_label}" escape="false" style="color:#b11"/>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- default notification setting --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_meeting_default_notify_setting}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGroup styleClass="longtext" >
+								<h:selectBooleanCheckbox id="sendemailbyowner" value="#{NewSignupMeetingBean.sendEmailByOwner}"/>
+								<h:outputLabel for="sendemailbyowner" value="#{msgs.event_yes_meeting_default_notify_setting}" escape="false"/>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- other default settings --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+							<h:outputText value="#{msgs.event_other_default_setting}" escape="false" styleClass="titleText"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+							<h:panelGroup>	
+								<h:outputLabel  id="imageOpen_otherSetting" style="display:none" styleClass="activeTag" onclick="showOtherDefaultSettings('meeting:imageOpen_otherSetting','meeting:imageClose_otherSetting','meeting:otherSetting');">
+									<h:graphicImage value="/images/open.gif"  alt="open" title="Click to hide details." style="border:none;vertical-align: middle;" styleClass="openCloseImageIcon"/>
+									<h:outputText value="#{msgs.event_close_other_default_setting}" escape="false" style="vertical-align: middle;"/>
+								</h:outputLabel>
+								<h:outputLabel id="imageClose_otherSetting" styleClass="activeTag" onclick="showOtherDefaultSettings('meeting:imageOpen_otherSetting','meeting:imageClose_otherSetting','meeting:otherSetting');">
+									<h:graphicImage value="/images/closed.gif" alt="close" title="Click to show details." style="border:none;vertical-align:middle;" styleClass="openCloseImageIcon"/>
+									<h:outputText value="#{msgs.event_show_other_default_setting}" escape="false" style="vertical-align: middle;"/>
+								</h:outputLabel>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- div other default settings --%>
+					<div id="otherDefaultSettings" style="display:none;">
+						<%-- allow wait list --%>
+						<div class="row">
+							<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+								<h:outputText id="otherSetting_1" value="#{msgs.event_allow_waitList}" styleClass="titleText" escape="false"/>
+							</h:panelGroup>
+							<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+								<h:panelGroup id="otherSetting_2" styleClass="longtext">
 									<h:selectBooleanCheckbox id="allowwaitlist" value="#{NewSignupMeetingBean.allowWaitList}"/>
 									<h:outputLabel for="allowwaitlist"  value="#{msgs.event_yes_to_allow_waitList}" escape="false"/>
 								</h:panelGroup>
-								
-								<h:outputText id="otherSetting_3" style="display:none" value="#{msgs.event_allow_addComment}" styleClass="titleText" escape="false" rendered="#{!NewSignupMeetingBean.announcementType}"/>
-								<h:panelGroup id="otherSetting_4" style="display:none" styleClass="longtext" rendered="#{!NewSignupMeetingBean.announcementType}">
+							</h:panelGroup>
+						</div>
+
+						<%-- allow adding comment --%>
+						<div class="row">
+							<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+								<h:outputText id="otherSetting_3" value="#{msgs.event_allow_addComment}" styleClass="titleText" escape="false"/>
+							</h:panelGroup>
+							<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType}">
+								<h:panelGroup id="otherSetting_4" styleClass="longtext">
 									<h:selectBooleanCheckbox id="allowcomment" value="#{NewSignupMeetingBean.allowComment}"/>
 									<h:outputLabel for="allowcomment" value="#{msgs.event_yes_to_allow_addComment}" escape="false"/>
 								</h:panelGroup>
-								
-								<h:outputText id="otherSetting_5" style="display:none" value="#{msgs.event_use_eid_input_mode}" styleClass="titleText" escape="false" rendered="#{!NewSignupMeetingBean.announcementType && NewSignupMeetingBean.userIdInputModeOptionChoice}"/>
-								<h:panelGroup id="otherSetting_6" style="display:none" styleClass="longtext" rendered="#{!NewSignupMeetingBean.announcementType && NewSignupMeetingBean.userIdInputModeOptionChoice}">
+							</h:panelGroup>
+						</div>
+
+						<%-- User ID Input Mode --%>
+						<div class="row">
+							<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType && NewSignupMeetingBean.userIdInputModeOptionChoice}">
+								<h:outputText id="otherSetting_5" value="#{msgs.event_use_eid_input_mode}" styleClass="titleText" escape="false"/>
+							</h:panelGroup>
+							<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType && NewSignupMeetingBean.userIdInputModeOptionChoice}">
+								<h:panelGroup id="otherSetting_6" styleClass="longtext">
 									<h:selectBooleanCheckbox id="eidinputmode" value="#{NewSignupMeetingBean.eidInputMode}"/>
 									<h:outputLabel for="eidinputmode" value="#{msgs.event_yes_to_use_eid_input_mode}" escape="false"/>
 								</h:panelGroup>
-								
-								<h:outputText id="otherSetting_7" style="display:none" value="#{msgs.event_email_autoReminder}" styleClass="titleText" escape="false"  rendered="#{!NewSignupMeetingBean.announcementType && NewSignupMeetingBean.autoReminderOptionChoice}"/>
-								<h:panelGroup id="otherSetting_8" style="display:none" styleClass="longtext" rendered="#{!NewSignupMeetingBean.announcementType && NewSignupMeetingBean.autoReminderOptionChoice}">
+							</h:panelGroup>
+						</div>
+
+						<%-- Auto Reminder --%>
+						<div class="row">
+							<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType && NewSignupMeetingBean.autoReminderOptionChoice}">
+								<h:outputText id="otherSetting_7" value="#{msgs.event_email_autoReminder}" styleClass="titleText" escape="false"/>
+							</h:panelGroup>
+							<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block" rendered="#{!NewSignupMeetingBean.announcementType && NewSignupMeetingBean.autoReminderOptionChoice}">
+								<h:panelGroup id="otherSetting_8" styleClass="longtext">
 									<h:selectBooleanCheckbox id="autoreminder" value="#{NewSignupMeetingBean.autoReminder}"/>
 									<h:outputLabel for="autoreminder" value="#{msgs.event_yes_email_autoReminer_to_attendees}" escape="false"/>
 								</h:panelGroup>
-								
-								<h:outputText id="otherSetting_9" style="display:none" value="#{msgs.event_publish_to_calendar}" styleClass="titleText" escape="false" />
-								<h:panelGroup id="otherSetting_10" style="display:none" styleClass="longtext">
+							</h:panelGroup>
+						</div>
+
+						<%-- Publish to Calendar --%>
+						<div class="row">
+							<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+								<h:outputText id="otherSetting_9" value="#{msgs.event_publish_to_calendar}" styleClass="titleText" escape="false" />
+							</h:panelGroup>
+							<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+								<h:panelGroup id="otherSetting_10" styleClass="longtext">
 									<h:selectBooleanCheckbox id="publishtocalendar" value="#{NewSignupMeetingBean.publishToCalendar}"/>
 									<h:outputLabel for="publishtocalendar" value="#{msgs.event_yes_publish_to_calendar}" escape="false"/>
 								</h:panelGroup>
-								
-								<h:outputText id="otherSetting_11" style="display:none" value="#{msgs.event_create_groups}" styleClass="titleText" escape="false" />
-								<h:panelGroup id="otherSetting_12" style="display:none" styleClass="longtext">
+							</h:panelGroup>
+						</div>
+
+						<%-- create groups for timeslots --%>
+						<div class="row">
+							<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+								<h:outputText id="otherSetting_11" value="#{msgs.event_create_groups}" styleClass="titleText" escape="false" />
+							</h:panelGroup>
+							<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+								<h:panelGroup id="otherSetting_12" styleClass="longtext">
 									<h:selectBooleanCheckbox id="creategroups" value="#{NewSignupMeetingBean.createGroups}"/>
 									<h:outputLabel for="creategroups" value="#{msgs.event_yes_create_groups}" escape="false"/>
 								</h:panelGroup>
-								
-								<h:outputText id="otherSetting_13" style="display:none" value="#{msgs.event_allowed_slots }" styleClass="titleText" escape="false" />
-								<h:panelGroup id="otherSetting_14" style="display:none" styleClass="longtext">
+							</h:panelGroup>
+						</div>
+
+						<%-- max of time slots per participant --%>
+						<div class="row">
+							<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+								<h:outputText id="otherSetting_13" value="#{msgs.event_allowed_slots }" styleClass="titleText" escape="false" />
+							</h:panelGroup>
+							<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+								<h:panelGroup id="otherSetting_14" styleClass="longtext">
 									<h:selectOneMenu id="slotscomments" value="#{ NewSignupMeetingBean.maxNumOfSlots}">  
 										 <f:selectItems  value="#{NewSignupMeetingBean.slots}"   /> 
 									</h:selectOneMenu>
 									<h:outputLabel for="slotscomments" value="#{msgs.event_allowed_slots_comments}" escape="false"/>
-								</h:panelGroup>								
-								
-						</h:panelGrid>
-						
-						<h:outputText value="&nbsp;" escape="false"/>
-						
-				</h:panelGrid></div>
+								</h:panelGroup>	
+							</h:panelGroup>
+						</div>
+					</div>
+			 	</div>
 					
 										
 				<h:inputHidden value="step2" binding="#{NewSignupMeetingBean.currentStepHiddenInfo}"/>
diff --git a/signup/tool/src/webapp/signup/organizer/orgSignupMeeting.jsp b/signup/tool/src/webapp/signup/organizer/orgSignupMeeting.jsp
index 704383e76b9e..9a9d523f329e 100644
--- a/signup/tool/src/webapp/signup/organizer/orgSignupMeeting.jsp
+++ b/signup/tool/src/webapp/signup/organizer/orgSignupMeeting.jsp
@@ -42,9 +42,9 @@
 				firstAttendee= document.getElementById("meeting:selectedFirstUser");
 				userActionType=document.getElementById("meeting:userActionType");
 				hiddenInputCollapeMInfo =document.getElementById("meeting:meetingInfoCollapseExpand");
-				showMInfoTitleTag =document.getElementById("meeting:showMeetingTitleOnly");
+				showMInfoTitleTag =document.getElementById("showMeetingTitleOnly");
 				
-				var collapseMInfoTag =document.getElementById("meeting:meetingInfoDetails");				
+				var collapseMInfoTag =document.getElementById("meetingInfoDetails");				
 				if(collapseMInfoTag && hiddenInputCollapeMInfo && hiddenInputCollapeMInfo.value == 'true'){
 					collapseMInfoTag.style.display="none";
 					showMInfoTitleTag.style.display="";
@@ -265,170 +265,250 @@
 				<h:inputHidden id="selectedFirstUser"  value="#{OrganizerSignupMBean.selectedFirstUser}"/>
 			
 			 	<sakai:view_title value="#{msgs.organizer_page_title}"/>
-				<div class="table-responsive">
-				<h:panelGrid columns="1" styleClass="organizerToplevelTable">
-					<%-- show title only when collapsed --%>
-					<h:panelGrid id="showMeetingTitleOnly" columns="2" columnClasses="titleColumn,valueColumn" styleClass="orgShowTitleOnly">
-								<h:outputText value="#{msgs.event_name}" styleClass="titleText" escape="false"/>
-									<h:panelGroup>
-										<h:panelGroup rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.recurrenceId !=null}">
-											<h:graphicImage title="#{msgs.event_tool_tips_recurrence}" value="/images/recurrence.gif"  alt="recurrence" style="border:none" />
-											<h:outputText value="&nbsp;" escape="false"/>
-										</h:panelGroup>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.title}" styleClass="longtext"/>
+			 	<%-- show title only when collapsed --%>
+			 	<div id="showMeetingTitleOnly" styleClass="orgShowTitleOnly">
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_name}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGroup>
+								<h:panelGroup rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.recurrenceId !=null}">
+									<h:graphicImage title="#{msgs.event_tool_tips_recurrence}" value="/images/recurrence.gif"  alt="recurrence" style="border:none" />
+									<h:outputText value="&nbsp;" escape="false"/>
 								</h:panelGroup>
-					</h:panelGrid>
-					<%-- show all meeting details when expanded--%>
-					<h:panelGroup id="meetingInfoDetails">
-							<h:panelGrid columns="2" columnClasses="titleColumn,valueColumn" >
-								
-								<%-- title --%>
-								<h:outputText value="#{msgs.event_name}" styleClass="titleText" escape="false"/>
-									<h:panelGroup>
-										<h:panelGroup rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.recurrenceId !=null}">
-											<h:graphicImage title="#{msgs.event_tool_tips_recurrence}" value="/images/recurrence.gif"  alt="recurrence" style="border:none" />
-											<h:outputText value="&nbsp;" escape="false"/>
-										</h:panelGroup>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.title}" styleClass="longtext"/>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.title}" styleClass="longtext"/>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+			 	</div>
+			 	<%-- show all meeting details when expanded--%>
+			 	<div id="meetingInfoDetails" styleClass="organizerToplevelTable">
+					<%-- title --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_name}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGroup>
+								<h:panelGroup rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.recurrenceId !=null}">
+									<h:graphicImage title="#{msgs.event_tool_tips_recurrence}" value="/images/recurrence.gif"  alt="recurrence" style="border:none" />
+									<h:outputText value="&nbsp;" escape="false"/>
 								</h:panelGroup>
-								
-								<%-- owner --%>
-								<h:outputText value="#{msgs.event_owner}" styleClass="titleText" escape="false"/>
-								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.creator}" styleClass="longtext"/>
-								
-								<%-- location --%>
-								<h:outputText value="#{msgs.event_location}" styleClass="titleText" escape="false"/>
-								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.location}" styleClass="longtext"/>
-								
-								<%-- category --%>
-								<h:outputText value="#{msgs.event_category}" styleClass="titleText" escape="false"/>
-								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.category}" styleClass="longtext"/>
-								
-								<h:outputText value="#{msgs.event_date}" styleClass="titleText" escape="false"/>
-								<h:panelGroup>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.startTime}" styleClass="longtext">
-									 	<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.startTime}" styleClass="longtext">
-								 	<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.title}" styleClass="longtext"/>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<%-- owner --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_owner}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.creator}" styleClass="longtext"/>
+						</h:panelGroup>
+					</div>
+
+					<%-- location --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_location}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.location}" styleClass="longtext"/>
+						</h:panelGroup>
+					</div>
+					
+					<%-- category --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_category}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.category}" styleClass="longtext"/>
+						</h:panelGroup>
+					</div>
+
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_date}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGroup>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.startTime}" styleClass="longtext">
+								 	<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
 								</h:outputText>
-								</h:panelGroup>
-								
-								<h:outputText value="#{msgs.event_time_period}" styleClass="titleText" escape="false"/>
-								<h:panelGroup>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.startTime}">
-										<f:convertDateTime pattern="h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.startTime}" rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.meetingCrossDays}">
-										<f:convertDateTime pattern=", EEEEEEEE" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{msgs.timeperiod_divider}" escape="false"/>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.endTime}">
-										<f:convertDateTime pattern="h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:panelGroup rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.meetingCrossDays}">
-										<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.endTime}" >
-												<f:convertDateTime pattern=", EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
-										</h:outputText>
-										<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.endTime}" >
-												<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
-										</h:outputText>
-									</h:panelGroup>
-								</h:panelGroup>		
-								
-								<!-- iCalendar link -->
-								<h:outputText value="#{msgs.event_icalendar_link}" styleClass="titleText" escape="false" rendered="#{OrganizerSignupMBean.icsEnabled}"/>
-								<h:commandLink id="mICS" action="#{OrganizerSignupMBean.downloadICSForMeeting}" rendered="#{OrganizerSignupMBean.icsEnabled}">
-									<h:graphicImage value="/images/calendar_add.png" alt="#{msgs.label_ics}" title="#{msgs.label_download_ics_meeting}" style="margin-right: 5px;" />
-									<h:outputText value="#{msgs.event_icalendar_label}"/>
-								</h:commandLink>
-								
-								<h:outputText value="#{msgs.event_signup_start}" styleClass="titleText" rendered="#{!OrganizerSignupMBean.announcementType}" escape="false"/>			
-								<h:panelGroup rendered="#{!OrganizerSignupMBean.announcementType}">
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupBegins}" styleClass="longtext">
-									 	<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupBegins}" styleClass="longtext">
-									 	<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.startTime}" styleClass="longtext">
+									<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_time_period}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGroup>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.startTime}">
+									<f:convertDateTime pattern="h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.startTime}" rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.meetingCrossDays}">
+									<f:convertDateTime pattern=", EEEEEEEE" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{msgs.timeperiod_divider}" escape="false"/>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.endTime}">
+									<f:convertDateTime pattern="h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:panelGroup rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.meetingCrossDays}">
+									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.endTime}" >
+											<f:convertDateTime pattern=", EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
 									</h:outputText>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupBegins}" styleClass="longtext">
-									 	<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.endTime}" >
+											<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
 									</h:outputText>
 								</h:panelGroup>
-									
-								<h:outputText value="#{msgs.event_signup_deadline}" styleClass="titleText" rendered="#{!OrganizerSignupMBean.announcementType}" escape="false"/>
-								<h:panelGroup rendered="#{!OrganizerSignupMBean.announcementType}">
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupDeadline}" styleClass="longtext">
-									 	<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupDeadline}" styleClass="longtext">
-									 	<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
-									<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupDeadline}" styleClass="longtext">
-									 	<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
-									</h:outputText>
+							</h:panelGroup>	
+						</h:panelGroup>
+					</div>
+
+					<!-- iCalendar link -->
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_icalendar_link}" styleClass="titleText" escape="false" rendered="#{OrganizerSignupMBean.icsEnabled}"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:commandLink id="mICS" action="#{OrganizerSignupMBean.downloadICSForMeeting}" rendered="#{OrganizerSignupMBean.icsEnabled}">
+								<h:graphicImage value="/images/calendar_add.png" alt="#{msgs.label_ics}" title="#{msgs.label_download_ics_meeting}" style="margin-right: 5px;" />
+								<h:outputText value="#{msgs.event_icalendar_label}"/>
+							</h:commandLink>
+						</h:panelGroup>
+					</div>
+
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_signup_start}" styleClass="titleText" rendered="#{!OrganizerSignupMBean.announcementType}" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGroup rendered="#{!OrganizerSignupMBean.announcementType}">
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupBegins}" styleClass="longtext">
+								 	<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupBegins}" styleClass="longtext">
+								 	<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupBegins}" styleClass="longtext">
+									<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_signup_deadline}" styleClass="titleText" rendered="#{!OrganizerSignupMBean.announcementType}" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGroup rendered="#{!OrganizerSignupMBean.announcementType}">
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupDeadline}" styleClass="longtext">
+								 	<f:convertDateTime pattern="EEEEEEEE, " timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupDeadline}" styleClass="longtext">
+								 	<f:convertDateTime dateStyle="long" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.signupDeadline}" styleClass="longtext">
+								 	<f:convertDateTime pattern=", h:mm a" timeZone="#{UserTimeZone.userTimeZone}"/>
+								</h:outputText>
+							</h:panelGroup>
+						</h:panelGroup>
+					</div>
+
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_status}" styleClass="titleText" rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.meetingExpired}" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:outputText value="#{msgs.event_isOver}" styleClass="longtext" escape="false"  rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.meetingExpired}"/>
+						</h:panelGroup>
+					</div>
+
+					<%-- display published site/groups --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_publish_to}" escape="false"  styleClass="titleText"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGrid columns="1" styleClass="published_siteGroupTable">
+								<h:panelGroup>
+									<h:outputLabel  id="imageOpen_publishedSiteGroup" style="display:none" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_publishedSiteGroup','meeting:imageClose_publishedSiteGroup','meeting:publishedSiteGroups');">
+										<h:graphicImage value="/images/open.gif"  alt="open" title="Click to hide details." style="border:none" styleClass="openCloseImageIcon"/>
+										<h:outputText value="#{msgs.event_hide_site_group_detail}" escape="false" />
+									</h:outputLabel>
+									<h:outputLabel id="imageClose_publishedSiteGroup" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_publishedSiteGroup','meeting:imageClose_publishedSiteGroup','meeting:publishedSiteGroups');">
+										<h:graphicImage value="/images/closed.gif" alt="close" title="Click to show details." style="border:none" styleClass="openCloseImageIcon"/>
+										<h:outputText value="#{msgs.event_show_site_group_detail}" escape="false" />
+									</h:outputLabel>
 								</h:panelGroup>
-								
-								<h:outputText value="#{msgs.event_status}" styleClass="titleText" rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.meetingExpired}" escape="false"/>
-								<h:outputText value="#{msgs.event_isOver}" styleClass="longtext" escape="false"  rendered="#{OrganizerSignupMBean.meetingWrapper.meeting.meetingExpired}"/>
-								
-								<%-- display published site/groups --%>
-								<h:outputText value="#{msgs.event_publish_to}" escape="false"  styleClass="titleText"/>
-								<h:panelGrid columns="1" styleClass="published_siteGroupTable">
-										<h:panelGroup >	
-						   	    				<h:outputLabel  id="imageOpen_publishedSiteGroup" style="display:none" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_publishedSiteGroup','meeting:imageClose_publishedSiteGroup','meeting:publishedSiteGroups');">
-							   	    				<h:graphicImage value="/images/open.gif"  alt="open" title="Click to hide details." style="border:none" styleClass="openCloseImageIcon"/>
-							   	    				<h:outputText value="#{msgs.event_hide_site_group_detail}" escape="false" />
-						   	    				</h:outputLabel>
-						   	    				<h:outputLabel id="imageClose_publishedSiteGroup" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_publishedSiteGroup','meeting:imageClose_publishedSiteGroup','meeting:publishedSiteGroups');">
-						   	    					<h:graphicImage value="/images/closed.gif" alt="close" title="Click to show details." style="border:none" styleClass="openCloseImageIcon"/>
-						   	    					<h:outputText value="#{msgs.event_show_site_group_detail}" escape="false" />
-						   	    				</h:outputLabel>
-							            </h:panelGroup>
-							            <h:panelGroup id="publishedSiteGroups" style="display:none">
-												<h:dataTable id="userSites" value="#{OrganizerSignupMBean.publishedSignupSites}" var="site"  styleClass="published_sitegroup">
+								<h:panelGroup id="publishedSiteGroups" style="display:none">
+									<h:dataTable id="userSites" value="#{OrganizerSignupMBean.publishedSignupSites}" var="site"  styleClass="published_sitegroup">
+										<h:column>
+											<h:outputText value="#{site.title} #{msgs.event_site_level}" rendered="#{site.siteScope}" styleClass="published_sitetitle" escape="false"/>
+											<h:panelGroup rendered="#{!site.siteScope}">
+												<h:outputText value="#{site.title} #{msgs.event_group_level}" styleClass="published_sitetitle" escape="false"/>
+												<h:dataTable id="userGroups" value="#{site.signupGroups}" var="group" styleClass="published_sitegroup">
 													<h:column>
-														<h:outputText value="#{site.title} #{msgs.event_site_level}" rendered="#{site.siteScope}" styleClass="published_sitetitle" escape="false"/>
-														<h:panelGroup rendered="#{!site.siteScope}">
-															<h:outputText value="#{site.title} #{msgs.event_group_level}" styleClass="published_sitetitle" escape="false"/>
-															<h:dataTable id="userGroups" value="#{site.signupGroups}" var="group" styleClass="published_sitegroup">
-																<h:column>
-																		<h:outputText value=" - #{group.title}" escape="false" styleClass="published_grouptitle"/>
-																</h:column>
-															</h:dataTable>
-														</h:panelGroup>							
+														<h:outputText value=" - #{group.title}" escape="false" styleClass="published_grouptitle"/>
 													</h:column>
 												</h:dataTable>
-										</h:panelGroup>
-								</h:panelGrid>
-								<%-- end of display published site/groups --%>
-								
-								<h:outputText value="#{msgs.event_description}" styleClass="titleText" escape="false"/>
-								<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.description}" escape="false" styleClass="longtext"/>																											
-								
-								<h:outputText  value="#{msgs.attachments}" styleClass="titleText" escape="false" rendered="#{!OrganizerSignupMBean.meetingWrapper.emptyEventMainAttachment}"/>
-			         			<h:panelGrid columns="1" rendered="#{!OrganizerSignupMBean.meetingWrapper.emptyEventMainAttachment}">
-			         				<t:dataTable value="#{OrganizerSignupMBean.meetingWrapper.eventMainAttachments}" var="attach" >
-			         					<t:column>
-	        								<%@ include file="/signup/common/mimeIcon.jsp" %>
-	      								</t:column>
-			         					<t:column>
-			         						<h:outputLink  value="#{attach.location}" target="new_window">
-			         							<h:outputText value="#{attach.filename}"/>
-			         						</h:outputLink>
-			         					</t:column>
-			         					<t:column>
-			         						<h:outputText escape="false" value="(#{attach.fileSize}kb)" rendered="#{!attach.isLink}"/>
-			         					</t:column>
-			         				</t:dataTable>			         				
-				         		</h:panelGrid>
-								
-								<h:outputText value="&nbsp;" escape="false" rendered="#{!OrganizerSignupMBean.announcementType}"/>
-								<h:outputText value="&nbsp;" escape="false" rendered="#{!OrganizerSignupMBean.announcementType}"/>
-							
+											</h:panelGroup>
+										</h:column>
+									</h:dataTable>
+								</h:panelGroup>
 							</h:panelGrid>
-					</h:panelGroup>
-					
+						</h:panelGroup>
+					</div>
+
+					<%-- end of display published site/groups --%>
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText value="#{msgs.event_description}" styleClass="titleText" escape="false"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:outputText value="#{OrganizerSignupMBean.meetingWrapper.meeting.description}" escape="false" styleClass="longtext"/>
+						</h:panelGroup>
+					</div>
+
+					<div class="row">
+						<h:panelGroup styleClass="col-xs-12 col-md-3 titleColumn" layout="block">
+							<h:outputText  value="#{msgs.attachments}" styleClass="titleText" escape="false" rendered="#{!OrganizerSignupMBean.meetingWrapper.emptyEventMainAttachment}"/>
+						</h:panelGroup>
+						<h:panelGroup styleClass="col-xs-12 col-md-9 valueColumn" layout="block">
+							<h:panelGrid columns="1" rendered="#{!OrganizerSignupMBean.meetingWrapper.emptyEventMainAttachment}">
+								<t:dataTable value="#{OrganizerSignupMBean.meetingWrapper.eventMainAttachments}" var="attach" >
+									<t:column>
+										<%@ include file="/signup/common/mimeIcon.jsp" %>
+									</t:column>
+									<t:column>
+										<h:outputLink  value="#{attach.location}" target="new_window">
+											<h:outputText value="#{attach.filename}"/>
+										</h:outputLink>
+									</t:column>
+									<t:column>
+										<h:outputText escape="false" value="(#{attach.fileSize}kb)" rendered="#{!attach.isLink}"/>
+									</t:column>
+								</t:dataTable>
+							</h:panelGrid>
+						</h:panelGroup>
+					</div>
+					<h:outputText value="&nbsp;" escape="false" rendered="#{!OrganizerSignupMBean.announcementType}"/>
+					<h:outputText value="&nbsp;" escape="false" rendered="#{!OrganizerSignupMBean.announcementType}"/>
+			 	</div>
+
+
+				<div class="table-responsive">
+				<h:panelGrid columns="1">					
 					<%-- control email and the expand-collapse --%>			
 					<h:panelGrid  id="orgMeeting_191" columns="3" rendered="#{!OrganizerSignupMBean.announcementType}" columnClasses="titleColumn,valueColumn,alignRightColumn" styleClass="emailTable">										
 						<h:outputText value="#{msgs.event_email_notification}" styleClass="titleText" escape="false"/>
@@ -441,11 +521,11 @@
 							<h:outputLabel for="chkBx_unpub" value="#{msgs.event_email_not_send_out_label}" escape="false" style="color:#b11"/>
 						</h:panelGroup>							
 						<h:panelGroup>	
-		   	    				<h:outputLabel  id="imageOpen_meetingInfoDetail"  styleClass="activeTag" onclick="showDetails('meeting:imageOpen_meetingInfoDetail','meeting:imageClose_meetingInfoDetail','meeting:meetingInfoDetails');setMeetingCollapseInfo(true);">
+		   	    				<h:outputLabel  id="imageOpen_meetingInfoDetail"  styleClass="activeTag" onclick="showDetails('meeting:imageOpen_meetingInfoDetail','meeting:imageClose_meetingInfoDetail','meetingInfoDetails');setMeetingCollapseInfo(true);">
 			   	    				<h:graphicImage value="/images/openTop.gif"  alt="open" title="#{msgs.event_tool_tips_hide_details}" style="border:none; vertical-align: bottom;" styleClass="openCloseImageIcon"/>
 			   	    				<h:outputText value="#{msgs.event_hide_meetingIfo_detail}" escape="false" />
 		   	    				</h:outputLabel>
-		   	    				<h:outputLabel id="imageClose_meetingInfoDetail" style="display:none" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_meetingInfoDetail','meeting:imageClose_meetingInfoDetail','meeting:meetingInfoDetails');setMeetingCollapseInfo(false);">
+		   	    				<h:outputLabel id="imageClose_meetingInfoDetail" style="display:none" styleClass="activeTag" onclick="showDetails('meeting:imageOpen_meetingInfoDetail','meeting:imageClose_meetingInfoDetail','meetingInfoDetails');setMeetingCollapseInfo(false);">
 		   	    					<h:graphicImage value="/images/closed.gif" alt="close" title="#{msgs.event_tool_tips_show_details}" style="border:none" styleClass="openCloseImageIcon"/>
 		   	    					<h:outputText value="#{msgs.event_show_meetingIfo_detail}" escape="false" />
 		   	    				</h:outputLabel>
diff --git a/signup/tool/src/webapp/signup/signupMeetings.jsp b/signup/tool/src/webapp/signup/signupMeetings.jsp
index 91aa2632928a..a6cad3b1ba93 100644
--- a/signup/tool/src/webapp/signup/signupMeetings.jsp
+++ b/signup/tool/src/webapp/signup/signupMeetings.jsp
@@ -192,11 +192,11 @@
 			<h:form id="items">
 			 	<sakai:view_title value="#{msgs.signup_tool}"/>
 
-				<h:panelGrid columns="1">
+				<h:panelGroup styleClass="" rendered="#{(SignupMeetingsBean.allowedToUpdate && SignupMeetingsBean.meetingsAvailable) or (!SignupMeetingsBean.allowedToUpdate && SignupMeetingsBean.meetingsAvailable)}">
 					<h:outputText value="#{msgs.events_organizer_instruction}"  rendered="#{SignupMeetingsBean.allowedToUpdate && SignupMeetingsBean.meetingsAvailable}" escape="false"/>
-					<h:outputText value="#{msgs.events_attendee_instruction}" rendered="#{!SignupMeetingsBean.allowedToUpdate && SignupMeetingsBean.meetingsAvailable}" escape="false"/>
 					<h:outputText value="&nbsp;" escape="false"/>
-				</h:panelGrid>
+					<h:outputText value="#{msgs.events_attendee_instruction}" rendered="#{!SignupMeetingsBean.allowedToUpdate && SignupMeetingsBean.meetingsAvailable}" escape="false"/>
+				</h:panelGroup>
 				
 				
 				<div class="form-group row">
@@ -224,12 +224,10 @@
 					</h:panelGroup>
 				</div>
 
-				<h:panelGrid columns="1" styleClass="noMeetingsWarn" rendered="#{!SignupMeetingsBean.meetingsAvailable}" >
-					<h:panelGroup>
-						<h:outputText value="#{SignupMeetingsBean.meetingUnavailableMessages}" escape="false" rendered="#{SignupMeetingsBean.userLoggedInStatus}"/>
-						<h:outputText value=" #{msgs.you_need_to_login}" rendered="#{!SignupMeetingsBean.userLoggedInStatus}" escape="false"/>
-					</h:panelGroup>
-				</h:panelGrid>	
+				<h:panelGroup styleClass="noMeetingsWarn" rendered="#{!SignupMeetingsBean.meetingsAvailable}">
+					<h:outputText value="#{SignupMeetingsBean.meetingUnavailableMessages}" escape="false" rendered="#{SignupMeetingsBean.userLoggedInStatus}"/>
+					<h:outputText value=" #{msgs.you_need_to_login}" rendered="#{!SignupMeetingsBean.userLoggedInStatus}" escape="false"/>
+				</h:panelGroup>
 				<h:panelGroup rendered="#{SignupMeetingsBean.meetingsAvailable}">
 					<div class="table-responsive">
 				 	<t:dataTable