Index: lams_central/web/portrait.jsp
===================================================================
diff -u -r0a35410de23e1bc878777c3b8f967a8f9901f61f -r5882559f5062968f590be0f76217d901d5bdfd48
--- lams_central/web/portrait.jsp	(.../portrait.jsp)	(revision 0a35410de23e1bc878777c3b8f967a8f9901f61f)
+++ lams_central/web/portrait.jsp	(.../portrait.jsp)	(revision 5882559f5062968f590be0f76217d901d5bdfd48)
@@ -78,27 +78,9 @@
 			.ready(
 					function() {
 						//initialize webcam
-						$("#accordion")
-								.accordion(
-										{
-											autoHeight : false,
-											create : function(event, ui) {
-												$("#webcam").html(
+						$("#webcam").html(
 														webcam.get_html(320,
 																240, 120, 90));
-											},
-											change : function(event, ui) {
-												if (ui.newHeader[0].id == "webcamHeader") {
-													hideConfirmationButtons();
-													$("#webcam").html(
-															webcam.get_html(
-																	320, 240,
-																	120, 90));
-												} else {
-													$("#webcam").html("");
-												}
-											}
-										});
 
 						$('#takeSnapshot').click(function() {
 							webcam.freeze();
@@ -139,111 +121,97 @@
 	<div style="clear: both"></div>
 	<div class="container">
 		<div class="row vertical-center-row">
-			<div
-				class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
-				<div class="panel panel-default">
-					<div class="panel-heading">
-						<div class="panel-title">
-							<fmt:message key="index.myprofile" />
-						</div>
-					</div>
-					<div class="panel-body">
-						<div class="text-center">
-							<fmt:message key="label.portrait.current" />
-							:
+			<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
 
-							<logic:notEqual name="PortraitActionForm" property="portraitUuid"
-								value="0">
-								<img class="img-border"
-									src="/lams/download/?uuid=<bean:write name="PortraitActionForm" property="portraitUuid" />&preferDownload=false" />
-							</logic:notEqual>
+				<div class="currentPortrait text-center" style="margin:10px">
+					<fmt:message key="label.portrait.current" />:<br/>
+	
+					<logic:notEqual name="PortraitActionForm" property="portraitUuid"
+						value="0">
+						<img class="img-thumbnail"
+							src="/lams/download/?uuid=<bean:write name="PortraitActionForm" property="portraitUuid" />&preferDownload=false" />
+					</logic:notEqual>
+	
+					<logic:equal name="PortraitActionForm" property="portraitUuid"
+						value="0">
+						<c:set var="lams">
+							<lams:LAMSURL />
+						</c:set>
+						<em><fmt:message key="msg.portrait.none" /></em>
+					</logic:equal>
+				</div>
 
-							<logic:equal name="PortraitActionForm" property="portraitUuid"
-								value="0">
-								<c:set var="lams">
-									<lams:LAMSURL />
-								</c:set>
-								<em><fmt:message key="msg.portrait.none" /></em>
-							</logic:equal>
-						</div>
-
-						<div class="panel-group" id="accordion" role="tablist"
-							aria-multiselectable="true">
-
-
-							<div class="panel-group" id="accordion" role="tablist"
-								aria-multiselectable="true">
-								<div class="panel panel-default">
-									<div class="panel-heading" role="tab" id="webcamHeader">
-										<h4 class="panel-title">
-											<a role="button" data-toggle="collapse"
-												data-parent="#accordion" href="#collapseOne"
-												aria-expanded="true" aria-controls="collapseOne"> <fmt:message
-													key="label.portrait.take.snapshot.from.webcamera" />
-											</a>
-										</h4>
-
-									</div>
-									<div id="collapseOne" class="panel-collapse collapse in"
-										role="tabpanel" aria-labelledby="webcamHeader">
-										<div class="panel-body">
-											<div id="webcam"></div>
-											<!-- Some buttons for controlling things -->
-											<div id="takeSnapshotArea">
-												<a href="javascript:webcam.configure();" class="button"><fmt:message
-														key='label.portrait.configure' /></a> <a id="takeSnapshot"
-													class="button" href="javascript:return false;"><fmt:message
-														key='label.portrait.take.snapshot' /></a>
-											</div>
-											<div id="uploadToServerArea" style="display: none;">
-												<div style="padding-bottom: 13px;">
-													<fmt:message key='label.portrait.do.you.like.results' />
-												</div>
-
-												<a class="button" id="uploadWebcam"
-													href="javascript:return false;"><fmt:message
-														key='label.portrait.yes.set.it.as.portrait' /></a> <a
-													class="button" id="resetWebcam"
-													href="javascript:return false;"><fmt:message
-														key='label.portrait.no.take.another.one' /></a>
-											</div>
-										</div>
-									</div>
+			
+			<!--  -->
+			<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+			  <div class="panel panel-default">
+			    <div class="panel-heading" role="tab" id="headingOne">
+			      <div class="panel-title">
+			        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+			          <i class="fa fa-fw fa-camera text-primary"></i> <fmt:message key="label.portrait.take.snapshot.from.webcamera" />
+			        </a>
+			      </div>
+			    </div>
+			    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+			      <div class="panel-body">
+			      <!-- Webcam -->
+			
+							<div id="webcam"></div>
+							<!-- Some buttons for controlling things -->
+							<div id="takeSnapshotArea">
+								<a href="javascript:webcam.configure();" class="btn btn-sm btn-default"><fmt:message
+										key='label.portrait.configure' /></a> <a id="takeSnapshot"
+									class="btn btn-sm btn-default" href="javascript:return false;"><fmt:message
+										key='label.portrait.take.snapshot' /></a>
+							</div>
+							<div id="uploadToServerArea" style="display: none;">
+								<div style="padding-bottom: 13px;">
+									<fmt:message key='label.portrait.do.you.like.results' />
 								</div>
-
-								<div class="panel panel-default">
-									<div class="panel-heading" role="tab" id="headingTwo">
-										<h4 class="panel-title">
-											<a class="collapsed" role="button" data-toggle="collapse"
-												data-parent="#accordion" href="#collapseTwo"
-												aria-expanded="false" aria-controls="collapseTwo"> <fmt:message
-													key="label.portrait.upload" />
-											</a>
-										</h4>
-									</div>
-									<div id="collapseTwo" class="panel-collapse collapse"
-										role="tabpanel" aria-labelledby="headingTwo">
-										<div class="panel-body">
-											<html:file property="file" />
-											<br />
-											<br /> <a class="btn btn-sm btn-default offset5"
-												href="javascript:document.PortraitActionForm.submit();"
-												role="button"><fmt:message key="button.save" /></a> <a
-												class="btn btn-sm btn-default offset5" role="button"
-												href="<c:url value='/index.do'/>?tab=profile"><fmt:message
-													key="button.cancel" /></a>
-											<p>
-												<fmt:message key="msg.portrait.resized" />
-											</p>
-										</div>
-									</div>
-								</div>
-
-
+			
+								<a class="button" id="uploadWebcam"
+									href="javascript:return false;"><fmt:message
+										key='label.portrait.yes.set.it.as.portrait' /></a> <a
+									class="button" id="resetWebcam"
+									href="javascript:return false;"><fmt:message
+										key='label.portrait.no.take.another.one' /></a>
 							</div>
-						</div>
-					</div>
-				</div>
-			</div>
+			
+			      </div>
+			    </div>
+			  </div>
+			  <div class="panel panel-default">
+			    <div class="panel-heading" role="tab" id="headingTwo">
+			      <div class="panel-title">
+			        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+			         <i class="fa fa-fw fa-upload text-primary"></i> <fmt:message key="label.portrait.upload" />
+			        </a>
+			      </div>
+			    </div>
+			    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
+			      <div class="panel-body">
+			      <!-- Upload -->
+							<div class="form-group">
+								<html:file property="file" />
+								<p class="help-block">
+									<fmt:message key="msg.portrait.resized" />
+								</p>								
+							</div>	
+							<br /> <a
+								class="btn btn-sm btn-file btn-default offset5" role="button"
+								href="<c:url value='/index.do'/>?tab=profile"><fmt:message
+									key="button.cancel" /></a>
+									<a class="btn btn-sm btn-default offset5"
+								href="javascript:document.PortraitActionForm.submit();"
+								role="button"><fmt:message key="button.save" /></a> 
+
+			
+			
+			      </div>
+			    </div>
+			  </div>
 		</div>
+	</div>
+</div>
+</div>	
 </html:form>
\ No newline at end of file