Index: components/artifactView/html/view.html
===================================================================
--- components/artifactView/html/view.html	(revision 9477)
+++ components/artifactView/html/view.html	(working copy)
@@ -54,13 +54,13 @@
 	        <div class="flc-navigationBar fl-navbar fl-col-mixed">
 	            <!-- Back button -->
 	            <div class="fl-col-fixed fl-force-left">
-	                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
+	                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
 	                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
 	                </a>
 	            </div>
 	            <!-- Home button -->
 	            <div class="fl-col-fixed fl-force-left">
-	                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
+	                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
 	                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
 	                </a>
 	            </div>
@@ -68,65 +68,72 @@
 	            <h1 class="flc-artifact-navBarTitle fl-navbar-title fl-col-flex">Catalogue for This Exhibition</h1>
 	        </div>
 	        
-	        <!-- My Collection sub-header -->
-	        <div class="flc-artifact-actionPanel fl-artifact-actionPanel">
-	            <div class="flc-artifact-actionButtons fl-artifact-actionButtons">
-	                <a rsf:id="scr=null" class="flc-artifact-collect-link fl-artifact-action-button fl-button" href="#">Collect/Uncollect artifact</a>
-	                <a class="flc-artifact-comment-link fl-artifact-action-button fl-artifact-comment fl-button" href="#">Comment</a>
+	        <!-- loading message -->
+		    <div class="fl-component-loadMessage">
+		        <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" alt="" />
+		    </div>
+	        
+	        <div class="fl-component-contents">
+		        <!-- My Collection sub-header -->
+		        <div class="flc-artifact-actionPanel fl-artifact-actionPanel">
+		            <div class="flc-artifact-actionButtons fl-artifact-actionButtons">
+		                <a rsf:id="scr=null" class="flc-artifact-collect-link fl-artifact-action-button fl-button" href="#">Collect/Uncollect artifact</a>
+		                <a class="flc-artifact-comment-link fl-artifact-action-button fl-artifact-comment fl-button" href="#">Comment</a>
+		            </div>
+		            <div>
+	                    <a class="flc-artifact-collect-status fl-artifact-collect-status" href="#"></a>
+	                </div>
+		        </div>
+	            
+	            <div class="fl-table fl-artifact-image-content">
+		            <div class="fl-artifact-image-cell fl-table-cell">
+		                <img src="../images/a.jpg" alt="Artifact Image" class="flc-artifact-image fl-artifact-image" />
+		            </div>
 	            </div>
-	            <div>
-                    <a class="flc-artifact-collect-status fl-artifact-collect-status" href="#"></a>
-                </div>
-	        </div>
-            
-            <div class="fl-table fl-artifact-image-content">
-	            <div class="fl-artifact-image-cell fl-table-cell">
-	                <img src="../images/a.jpg" alt="Artifact Image" class="flc-artifact-image fl-artifact-image" />
+	            <h2 class="flc-artifact-title fl-bold fl-artifact-title">Artifact Title</h2>
+	            <div class="fl-artifact-info">
+		            <div class="flc-artifact-author">Artifact Author</div> 
+		            <div class="flc-artifact-dated">Artifact Dated</div>
+		            <div class="flc-artifact-medium">Artifact Medium</div>
+		            <div class="flc-artifact-dimensions">Artifact Dimensions</div>
+		            <div class="flc-artifact-mention">Artifact Mention</div>
+		            <div class="flc-artifact-accessionNumber">Artifact AccessionNumber</div>
+		        </div>
+		        <div class="flc-artifact-description fl-artifact-description">
+	                <div class="flc-moreLess-content fl-moreLess-content"></div>
+	                <a href="#" class="flc-moreLess-toggler fl-moreLess-toggler">More/less toggle</a>
 	            </div>
-            </div>
-            <h2 class="flc-artifact-title fl-bold fl-artifact-title">Artifact Title</h2>
-            <div class="fl-artifact-info">
-	            <div class="flc-artifact-author">Artifact Author</div> 
-	            <div class="flc-artifact-dated">Artifact Dated</div>
-	            <div class="flc-artifact-medium">Artifact Medium</div>
-	            <div class="flc-artifact-dimensions">Artifact Dimensions</div>
-	            <div class="flc-artifact-mention">Artifact Mention</div>
-	            <div class="flc-artifact-accessionNumber">Artifact AccessionNumber</div>
-	        </div>
-	        <div class="flc-artifact-description fl-artifact-description">
-                <div class="flc-moreLess-content fl-moreLess-content"></div>
-                <a href="#" class="flc-moreLess-toggler fl-moreLess-toggler">More/less toggle</a>
-            </div>
-            <div class="flc-artifact-sections">
-	            <div class="flc-cabinet-drawer">
-	                <div class="flc-cabinet-handle fl-engage-tappable">
-	                    <h2 class="flc-cabinet-header">Header</h2>
-	                </div>
-	                <div class="flc-navigationList flc-cabinet-contents">
-	                    <ul class="flc-navigationList-listGroup fl-list fl-list-menu fl-list-thumbnails">
-	                        <li class="flc-navigationList-items">
-	                            <div class="flc-navigationList-linkContainer">
-	                                <a class="flc-navigationList-link">
-	                                    <img class="flc-navigationList-image fl-icon" src="../../../../fluid-engage-core/components/artifactView/images/video_icon.png"/>
-	                                    <img class="flc-navigationList-badge-icon fl-engage-badge-icon"
-	                                        src="../../../../fluid-engage-core/shared/images/media-badge.png" 
-	                                        alt="This artifact includes media" />
-	                                    <div class="fl-navigationList-textContainer">
-		                                    <span class="flc-navigationList-titleText fl-navigationList-title">title/category</span>
-		                                    <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description">description</span>
-		                                </div>
-	                                </a>
-	                            </div>
-	                       </li>
-	                   </ul>
-	               </div>
-	            </div>
-	        </div>
-	        
-	        <div class="fl-artifactView-hidden-icons">
-	            <img class="flc-artifactView-audio-icon" src="../../../../fluid-engage-core/components/artifactView/images/audio_icon.png"/>
-	            <img class="flc-artifactView-video-icon" src="../../../../fluid-engage-core/components/artifactView/images/video_icon.png"/>
-	        </div>
+	            <div class="flc-artifact-sections">
+		            <div class="flc-cabinet-drawer">
+		                <div class="flc-cabinet-handle fl-engage-tappable">
+		                    <h2 class="flc-cabinet-header">Header</h2>
+		                </div>
+		                <div class="flc-navigationList flc-cabinet-contents">
+		                    <ul class="flc-navigationList-listGroup fl-list fl-list-menu fl-list-thumbnails">
+		                        <li class="flc-navigationList-items">
+		                            <div class="flc-navigationList-linkContainer">
+		                                <a class="flc-navigationList-link">
+		                                    <img class="flc-navigationList-image fl-icon" src="../../../../fluid-engage-core/components/artifactView/images/video_icon.png"/>
+		                                    <img class="flc-navigationList-badge-icon fl-engage-badge-icon"
+		                                        src="../../../../fluid-engage-core/shared/images/media-badge.png" 
+		                                        alt="This artifact includes media" />
+		                                    <div class="fl-navigationList-textContainer">
+			                                    <span class="flc-navigationList-titleText fl-navigationList-title">title/category</span>
+			                                    <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description">description</span>
+			                                </div>
+		                                </a>
+		                            </div>
+		                       </li>
+		                   </ul>
+		               </div>
+		            </div>
+		        </div>
+		        
+		        <div class="fl-artifactView-hidden-icons">
+		            <img class="flc-artifactView-audio-icon" src="../../../../fluid-engage-core/components/artifactView/images/audio_icon.png"/>
+		            <img class="flc-artifactView-video-icon" src="../../../../fluid-engage-core/components/artifactView/images/video_icon.png"/>
+		        </div>
+		    </div>
         </div>
         <script id="flc-initBlock" type="text/javascript">
             fluid.engage.artifactView(".flc-artifact", {"model":{"artifactAccessionNumber":"M976.188.1","artifactTitle":"Winter Carnival, 1883, Hockey Trophy","artifactImage":"http://eich.wsg.mcgill.ca/largeimages/M976.188.1-P5.jpg","artifactAuthor":"Thomas Allan & Co.","artifactDate":"1883, 19th century","artifactDescription":"<p>Although it may be hard for some to believe that there was ever a hockey trophy other than Lord Stanley's (1841-1908), the Stanley Cup does have an ancestor. It was called the Carnival Cup.\n\nIn 1879 the first organized hockey team, the McGill University Hockey Club, was formed in Montreal. By 1875, a basic set of rules was created for the game, and hockey quickly spread across Canada. The first Canadian hockey championship was held in 1883 at the Montreal Ice Carnival. The winner of the week-long tournament, and the winner of the Carnival Cup, was the McGill team. \n\nAll early hockey was played by amateurs. The main competitions were between university, military and athletic clubs, which formed the Ontario Hockey Association in 1890. In 1893, Governor General Lord Stanley donated a trophy to the national championship of the association, and after 1912 only professionals competed for the Stanley Cup.</p><p>WHAT : This Montreal Ice Carnival Hockey Cup is an oval cup on a tripod of hockey sticks. It was made from sterling silver by the firm of Thomas Allan & Co.</p><p>WHEN : Only ten years after the awarding of this trophy in 1883 to McGill University, Montreal's AAA team was victorious in the first Stanley Cup game, which was played on March 22, 1893.</p><p>WHERE : The cup was made in Montreal specifically for the Montreal Ice Carnival hockey tournament, which may have been played at the McGill University rink.</p><p>WHO : This Montreal Ice Carnival hockey trophy has the names of the members of the winning McGill University team for the year 1883 engraved on the side of the bowl.</p>","artifactComments":{"id":"2980","reported":"0","author":{"userid":"4492","username":"huguesccc","avatar":"http://www.mccord-museum.qc.ca/images/avatars/anonyme.jpg"},"text":"I wish i had won this cup.","last_modified":"2010-01-24 18:41:04","offensive":"0","public":"1","published":"2010-01-24 18:41:04"},"artifactCommentsCount":"1","artifactDimensions":"18 x 8 cm","artifactMedia":[{"id":"7","duration":[{"unit":"s","nodetext":"30"}],"title":"Exploring Canada's polar region","format":"mp4","type":"video","uri":"http://wozniak.wsg.mcgill.ca/video/mp4/06-SEXTANT_3-EN.mp4"},{"id":"1","duration":[{"unit":"s","nodetext":"40"}],"title":"Sailing ships and steamships","format":"mp4","type":"video","uri":"http://wozniak.wsg.mcgill.ca/video/mp4/01-BATEAU_1-EN.mp4"},{"id":"15","duration":[{"unit":"s","nodetext":"55"}],"title":"The construction of the Canadian Pacific Railway","format":"mp4","type":"video","uri":"http://wozniak.wsg.mcgill.ca/video/mp4/02-WAGON_2-EN.mp4"},{"id":"13","duration":[{"unit":"s","nodetext":"34"}],"title":"The Esthetic Tastes of the Mik'maq Communities","format":"mp4","type":"video","uri":"http://wozniak.wsg.mcgill.ca/video/mp4/10-CANOT_1-EN.mp4"},{"id":"5","duration":[{"unit":"s","nodetext":"25"}],"title":"The expansion of the canadian railway network","format":"mp4","type":"video","uri":"http://wozniak.wsg.mcgill.ca/video/mp4/02-WAGON_3-EN.mp4"},{"id":"3","duration":[{"unit":"s","nodetext":"36"}],"title":"The importance of railways","format":"mp4","type":"video","uri":"http://wozniak.wsg.mcgill.ca/video/mp4/02-WAGON_1-EN.mp4"},{"id":"11","duration":[{"unit":"s","nodetext":"33"}],"title":"The nomad life of nunavimiuts","format":"mp4","type":"video","uri":"http://wozniak.wsg.mcgill.ca/video/mp4/07-DEFENSE_1-EN.mp4"}],"artifactMediaCount":"7","artifactMedium":"","artifactMention":"","artifactRelated":[{"subtitle":"Wm. Notman & Son","accessnumber":"VIEW-1998","title":"Composite, Montreal Carnival, QC, 1883, copied 1889","thumbnail":[{"height":"75","nodetext":"http://wozniak.wsg.mcgill.ca/ThumbView/v1998.jpg","width":"75"}],"hasMedia":"no"},{"subtitle":"J. Theo. Robinson","accessnumber":"PHA0046","title":"Over the Snow or the Montreal Carnival","thumbnail":[{"height":"75","nodetext":"http://wozniak.wsg.mcgill.ca/ThumbView/PHA0046-P1.jpg","width":"75"}],"hasMedia":"no"},{"subtitle":"1879-1881","accessnumber":"M995.18.1","title":"Hockey stick","thumbnail":[{"height":"75","nodetext":"http://wozniak.wsg.mcgill.ca/ThumbView/M995.18.1.jpg","width":"75"}],"hasMedia":"no"},{"subtitle":"1879-1881","accessnumber":"M995.18.1","title":"Hockey stick","thumbnail":[{"height":"75","nodetext":"http://wozniak.wsg.mcgill.ca/ThumbView/2624.jpg","width":"75"}],"hasMedia":"no"},{"subtitle":"Wm. Notman & Son","accessnumber":"II-86447","title":"Victoria hockey team, Montreal, QC, 1888","thumbnail":[{"height":"75","nodetext":"http://wozniak.wsg.mcgill.ca/ThumbView/ii86447.jpg","width":"75"}],"hasMedia":"no"},{"subtitle":"Wm. Notman & Son","accessnumber":"II-149897","title":"McGill Hockey Team, Montreal, QC, 1904","thumbnail":[{"height":"75","nodetext":"http://wozniak.wsg.mcgill.ca/ThumbView/ii149897.jpg","width":"75"}],"hasMedia":"no"},{"subtitle":"Wm. Notman & Son","accessnumber":"VIEW-3486.0","title":"Hockey, McGill University teams, Montreal, QC, 1902","thumbnail":[{"height":"74","nodetext":"http://wozniak.wsg.mcgill.ca/ThumbView/v3486.jpg","width":"74"}],"hasMedia":"no"},{"subtitle":"Anonyme - Anonymous","accessnumber":"MP-0000.2241","title":"Hockey on the ice, McGill Campus, Montreal, QC, about 1900","thumbnail":[{"height":"75","nodetext":"http://wozniak.wsg.mcgill.ca/ThumbView/84033000.jpg","width":"75"}],"hasMedia":"no"}],"artifactRelatedCount":"8"},"descriptionMoreLess":{"options":{"strings":{}}},"strings":{},"comments":{"options":{"model":{"ownid":"catt","comments":[{"authorid":"rb269","author":"Robert Brown","location":"Washington, DC","date":"2009-07-16T12:15:07Z","text":"I had such an amazing time at this exhibit! Really loved the red sleigh especially. I had one just like it growing up"},{"authorid":"jo236","author":"Jamie Orange","location":"Montreal, QC","date":"2009-07-12T17:22:15Z","text":"Quisque sed adipiscing tellus. Nulla facilisi. Sed vel eros vei FELLIS imperdiet varius vehicula nec turpis."},{"authorid":"catt","author":"anonymous","date":"2009-05-01T22:13:00Z","text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget massa at nulla scelerisque pretium. Proin arcu lorem!"}]},"templateSource":"\r\n <div class=\"flc-guestbook-container\" >\r\n <!-- Navigation Bar and Header -->\r\n <div class=\"flc-navigationBar fl-navbar fl-col-mixed\">\r\n <!-- Back button -->\r\n <div class=\"fl-col-fixed fl-force-left\">\r\n <a rsf:id=\"scr=null\" class=\"flc-navigationBar-back fl-button fl-backButton\" href=\"#\">\r\n <img class=\"fl-button-inner fl-button-icon\" src=\"../../../../fluid-engage-core/shared/images/back.png\" alt=\"Go back\"/>\r\n </a>\r\n </div>\r\n <!-- Home button -->\r\n <div class=\"fl-col-fixed fl-force-left\">\r\n <a rsf:id=\"scr=null\" class=\"flc-navigationBar-home fl-button\" href=\"#\">\r\n <img class=\"fl-button-inner fl-button-icon\" src=\"../../../../fluid-engage-core/shared/images/home.png\" alt=\"Go home\"/>\r\n </a>\r\n </div>\r\n <!-- Page header -->\r\n <h1 class=\"flc-catalogue-title fl-navbar-title fl-col-flex\">Guestbook for This Exhibition</h1>\r\n </div>\r\n \r\n <div class=\"flc-guestbook-addnote fl-guestbook-addnote\">\r\n <div class=\"fl-centered\">\r\n <label for=\"fl-addnote\" class=\"flc-guestbook-addnote-Text fl-guestbook-title\">Add a note</label>\r\n <a href=\"#\"><div id=\"fl-addnote\" class=\"flc-guestbook-addnote-control fl-guestbook-addnote-control\"></div></a>\r\n </div>\r\n </div>\r\n <div class=\"flc-guestbook-comment-cell fl-guestbook-comment-cell\">\r\n <div class=\"fl-guestbook-header fl-push\">\r\n <span class=\"flc-guestbook-author fl-guestbook-author fl-guestbook-slash-after\">Robert Brown</span>\r\n <span class=\"flc-guestbook-location fl-guestbook-location fl-guestbook-slash-after\">Washington, DC</span>\r\n <span class=\"flc-guestbook-date fl-guestbook-date\">July 16, 2009</span>\r\n </div>\r\n <span class=\"flc-guestbook-text fl-guestbook-text fl-push\">I had such an amazing time at this\r\n exhibit! Really loved the red sleigh especially. I had one just like it growing up</span>\r\n <div class=\"fl-push\"> </div>\r\n <div class=\"fl-guestbook-actions fl-force-right\">\r\n <a class=\"flc-guestbook-action fl-guestbook-action\">REPORT ABUSE</a>\r\n </div>\r\n <div class=\"fl-push\"> </div>\r\n </div>\r\n </div>\r\n "}}});
Index: components/browse/css/Browse.css
===================================================================
--- components/browse/css/Browse.css	(revision 9477)
+++ components/browse/css/Browse.css	(working copy)
@@ -1,18 +1,3 @@
-@-webkit-keyframes spinner {
-    from {
-        -webkit-transform: rotate(0deg);
-        -webkit-animation-timing-function:linear;
-    } 
-    to {
-        -webkit-transform: rotate(-360deg);
-        -webkit-animation-timing-function:linear;
-    }
-}
-
-.fl-theme-iphone {
-    background: none;
-}
-
 [class*=fl-container] [class*=fl-list]:not(.fl-thumbnails-expanded) > li a .fl-icon,
 [class*=fl-container] .fl-list-thumbnails:not(.fl-thumbnails-expanded) > li,
 [class*=fl-container] .fl-list-thumbnails:not(.fl-thumbnails-expanded) > li a {
@@ -21,29 +6,3 @@
     border-bottom-right-radius: 0px;
     border-bottom-left-radius:  0px;
 }
-
-.fl-browse-loading .fl-browse-loadMessage {
-    display: block;
-    text-align:center;
-    margin-top:100px;
-}
-
-.fl-browse-spinner {
-    -webkit-animation-name:spinner;
-    -webkit-animation-iteration-count:infinite;
-    -webkit-animation-duration:1s;
-    
-    width:50px;
-    height:50px;
-    margin:10px auto;
-    background-color:#fff;
-    
-    -webkit-mask-box-image: url(../images/spinner_large_mask.png);
-    
-}
-
-.fl-browse-loadMessage,
-.fl-browse-loading  .fl-browse-contents, 
-.fl-browse-loading .fl-browse-descriptionContainer {
-    display: none;
-}
Index: components/browse/html/browse.html
===================================================================
--- components/browse/html/browse.html	(revision 9477)
+++ components/browse/html/browse.html	(working copy)
@@ -34,18 +34,18 @@
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/loadData.js"></script>
         
     </head>
-    <body class="flc-browse fl-theme-iphone fl-browse-loading">
+    <body class="flc-browse fl-theme-iphone">
         <!-- Navigation Bar and Header -->
         <div class="flc-navigationBar fl-navbar fl-col-mixed">
             <!-- Back button -->
             <div class="fl-col-fixed fl-force-left">
-                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
+                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
                     <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
                 </a>
             </div>
             <!-- Home button -->
             <div class="fl-col-fixed fl-force-left">
-                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
+                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
                     <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
                 </a>
             </div>
@@ -61,9 +61,8 @@
         </div>
         
         <!-- loading message -->
-        <div class="fl-browse-loadMessage fl-note fl-bevel-white">
-            Loading...
-            <div class="fl-browse-spinner"></div>
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" alt="" />
         </div>
         
         <div class="flc-browse-descriptionContainer fl-browse-descriptionContainer">
@@ -71,7 +70,7 @@
                 Description
             </p>
         </div>
-        <div class="flc-browse-contents fl-browse-contents">
+        <div class="flc-browse-contents fl-browse-contents fl-component-contents">
             <div class="flc-cabinet-drawer">
                 <div class="flc-cabinet-handle fl-engage-tappable">
                     <h2 class="flc-cabinet-header">Header</h2>
Index: components/browse/js/Browse.js
===================================================================
--- components/browse/js/Browse.js	(revision 9477)
+++ components/browse/js/Browse.js	(working copy)
@@ -16,24 +16,6 @@
 
 (function ($) {
     
-    /**
-     * Removes the loading style from the component, so that the rendered page is displayed
-     * 
-     * @param {Object} that, the component
-     */
-    var removeLoadStyling = function (that) {
-        that.container.removeClass(that.options.styles.load);
-    };
-    
-    /**
-     * Binds the after render event to a lister that calls the removeLoadStyling function
-     * 
-     * @param {Object} that, the component
-     */
-    var bindEvents = function (that) {
-        that.events.afterRender.addListener(removeLoadStyling);
-    };
-    
     var initSubcomponents = function (that) {
         if (that.options.useCabinet) {
             that.cabinet = fluid.initSubcomponent(that, "cabinet", [that.locate("browseContents"), fluid.COMPONENT_OPTIONS]);
@@ -115,7 +97,6 @@
      * @param {Object} that, the component
      */
     var setup = function (that) {
-        bindEvents(that);
         var messageLocator = fluid.messageLocator(that.options.strings, fluid.stringTemplate);
         var selectorsToIgnore = ["browseDescription", "browseContents"];
         
@@ -201,7 +182,6 @@
         },
         
         styles: {
-            load: "fl-browse-loading",
             browseContents: "fl-browse-contents",
             browseDescription: "fl-browse-description",
             listHeaderDescription: "fl-cabinet-headerWithDescription"
Index: components/catalogue/html/view.html
===================================================================
--- components/catalogue/html/view.html	(revision 9477)
+++ components/catalogue/html/view.html	(working copy)
@@ -38,13 +38,13 @@
             <div class="flc-navigationBar fl-navbar fl-col-mixed">
                 <!-- Back button -->
                 <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
+                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
                     </a>
                 </div>
                 <!-- Home button -->
                 <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
+                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
                     </a>
                 </div>
@@ -58,38 +58,45 @@
                 <!-- Page header -->
                 <h1 class="flc-catalogue-title fl-navbar-title fl-col-flex">Catalogue for This Exhibition</h1>
             </div>
- 
-            <div class="fl-catalogue-linkToArtifactsHeader fl-list-menu">
-                <a href="#" class="flc-catalogue-linkToArtifacts fl-catalogue-linkToArtifacts">
-                    <h2 class="flc-catalogue-linkToArtifactsText">View All</h2>
-                </a>
+            
+            <!-- loading message -->
+            <div class="fl-component-loadMessage">
+                <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" alt="" />
             </div>
-            <div class="flc-catalogue-themes fl-catalogue-themes">
-                <h2 class="flc-catalogue-theme">Theme</h2>
-                <ul class="flc-navigationList-listGroup fl-list-menu fl-list-thumbnails fl-thumbnails-expanded">
-                    <li class="flc-navigationList-items">
-                        <div class="flc-navigationList-linkContainer">
-                            <a class="flc-navigationList-link fl-engage-badged-thumbnail" href="">
-                                <img src="../images/a.jpg" alt="Section Image" class="flc-navigationList-image fl-icon" />
-                                <img class="flc-navigationList-badge-icon fl-engage-badge-icon"
-                                         src="../../../../fluid-engage-core/shared/images/media-badge.png" 
-                                         alt="This artifact includes media" />
-                                <div class="fl-navigationList-textContainer">
-                                    <span class="flc-navigationList-titleText fl-navigationList-title">Title</span>
-                                    <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description">Introduction</span>
-                                </div>                                
-                            </a>
-                        </div>
-                    </li>
-                </ul>
-                <ul class="fl-list-menu fl-list-thumbnails fl-thumbnails-expanded">
-                    <li class="fl-catalogue-linkToThemeArtifactsContainer">
-                        <a href="#" class="flc-catalogue-linkToThemeArtifacts fl-catalogue-linkToThemeArtifacts">
-                            <span class="flc-catalogue-linkToThemeArtifactsText fl-catalogue-linkToThemeArtifactsText fl-force-right">All in Theme</span>
-                        </a>
-                    </li>
-                </ul>
-            </div>
+            
+            <div class="fl-component-contents">
+	            <div class="fl-catalogue-linkToArtifactsHeader fl-list-menu">
+	                <a href="#" class="flc-catalogue-linkToArtifacts fl-catalogue-linkToArtifacts">
+	                    <h2 class="flc-catalogue-linkToArtifactsText">View All</h2>
+	                </a>
+	            </div>
+	            <div class="flc-catalogue-themes fl-catalogue-themes">
+	                <h2 class="flc-catalogue-theme">Theme</h2>
+	                <ul class="flc-navigationList-listGroup fl-list-menu fl-list-thumbnails fl-thumbnails-expanded">
+	                    <li class="flc-navigationList-items">
+	                        <div class="flc-navigationList-linkContainer">
+	                            <a class="flc-navigationList-link fl-engage-badged-thumbnail" href="">
+	                                <img src="../images/a.jpg" alt="Section Image" class="flc-navigationList-image fl-icon" />
+	                                <img class="flc-navigationList-badge-icon fl-engage-badge-icon"
+	                                         src="../../../../fluid-engage-core/shared/images/media-badge.png" 
+	                                         alt="This artifact includes media" />
+	                                <div class="fl-navigationList-textContainer">
+	                                    <span class="flc-navigationList-titleText fl-navigationList-title">Title</span>
+	                                    <span class="flc-navigationList-descriptionText fl-link-summary fl-navigationList-description">Introduction</span>
+	                                </div>                                
+	                            </a>
+	                        </div>
+	                    </li>
+	                </ul>
+	                <ul class="fl-list-menu fl-list-thumbnails fl-thumbnails-expanded">
+	                    <li class="fl-catalogue-linkToThemeArtifactsContainer">
+	                        <a href="#" class="flc-catalogue-linkToThemeArtifacts fl-catalogue-linkToThemeArtifacts">
+	                            <span class="flc-catalogue-linkToThemeArtifactsText fl-catalogue-linkToThemeArtifactsText fl-force-right">All in Theme</span>
+	                        </a>
+	                    </li>
+	                </ul>
+	            </div>
+	        </div>
         </div>
         <script id="flc-initBlock" type="text/javascript">
             fluid.engage.initComponentWithLocalData("fluid.catalogue", ".flc-catalogue-container");
Index: components/codeEntry/html/codeEntry.html
===================================================================
--- components/codeEntry/html/codeEntry.html	(revision 9477)
+++ components/codeEntry/html/codeEntry.html	(working copy)
@@ -17,6 +17,7 @@
         <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/jquery/core/js/jquery.js"></script>
         <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/json/js/json2.js"></script>
         <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/core/js/Fluid.js"></script>
+        <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/iPhoneChromeless.js"></script>
         <script type="text/javascript" src="../../../../fluid-engage-core/components/navigationBar/js/NavigationBar.js"></script>	
    		<script type="text/javascript" src="../../../../fluid-engage-core/components/codeEntry/js/CodeEntryView.js"></script>
 	</head>
@@ -28,76 +29,83 @@
             <div class="flc-navigationBar fl-navbar fl-col-mixed">
                 <!-- Back button -->
                 <div class="fl-col-fixed fl-force-left">
-                    <a class="flc-navigationBar-back fl-button fl-backButton" href="#">
+                    <a class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
                     </a>
                 </div>
                 <!-- Page header -->
                 <h1 class="flc-codeEntry-title fl-navbar-title fl-col-flex">Enter an Object Code</h1>
             </div>
-			
-        	<div class="flc-codeEntry-headMessage fl-codeEntry-headMessage"></div>            
-	
-	        <div class="flc-codeEntry-block fl-codeEntry-block">
-	            <span class="flc-codeEntry-firstDigit fl-codeEntry-digitField"></span>
-	            <span class="flc-codeEntry-secondDigit fl-codeEntry-digitField"></span>
-			</div>
-        
-        <div class="flc-codeEntry-numpad fl-codeEntry-numpad fl-table">
- 				<div class="fl-table-row">
-                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/1.png" alt="1"/>
-                        <span class="fl-codeEntry-hidden">1</span>
-                    </a>
-                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-					    <img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/2.png" alt="2"/>
-                        <span class="fl-codeEntry-hidden">2</span>
-                    </a>
-                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-					    <img src="../../../../fluid-engage-core/components/codeEntry/images/3.png" alt="3"/>
-                        <span class="fl-codeEntry-hidden">3</span>
-                    </a>
- 				</div>
- 				<div class="fl-table-row">
-				    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/4.png" alt="4"/>
-                        <span class="fl-codeEntry-hidden">4</span>
-                    </a>
-                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/5.png" alt="5"/>
-                        <span class="fl-codeEntry-hidden">5</span>
-                    </a>
-                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/6.png" alt="6"/>
-                        <span class="fl-codeEntry-hidden">6</span>
-                    </a>
- 				</div>
- 				<div class="fl-table-row">
-				    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/7.png" alt="7"/>
-                        <span class="fl-codeEntry-hidden">7</span>
-                    </a>
-                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/8.png" alt="8"/>
-                        <span class="fl-codeEntry-hidden">8</span>
-                    </a>
-                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/9.png" alt="9"/>
-                        <span class="fl-codeEntry-hidden">9</span>
-                    </a>
- 				</div>
- 				<div class="fl-table-row">
-				    <img class="fl-codeEntry-numpadItem" src="../../../../fluid-engage-core/components/codeEntry/images/blank.png" alt=""/>
-                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/0.png" alt="0"/>
-                        <span class="fl-codeEntry-hidden">0</span>
-                    </a>
-                    <a class="flc-codeEntry-delButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/del.png" alt="Delete"/>
-                        <span class="flc-codeEntry-delLabel fl-codeEntry-hidden">Delete</span>
-                    </a>
- 				</div>
- 			</div>
+            
+            <!-- loading message -->
+            <div class="fl-component-loadMessage">
+                <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" alt="" />
+            </div>
+            
+            <div class="fl-component-contents">			
+	        	<div class="flc-codeEntry-headMessage fl-codeEntry-headMessage"></div>            
+		
+		        <div class="flc-codeEntry-block fl-codeEntry-block">
+		            <span class="flc-codeEntry-firstDigit fl-codeEntry-digitField"></span>
+		            <span class="flc-codeEntry-secondDigit fl-codeEntry-digitField"></span>
+				</div>
+	        
+	            <div class="flc-codeEntry-numpad fl-codeEntry-numpad fl-table">
+	 				<div class="fl-table-row">
+	                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
+	    					<img src="../../../../fluid-engage-core/components/codeEntry/images/1.png" alt="1"/>
+	                        <span class="fl-codeEntry-hidden">1</span>
+	                    </a>
+	                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
+						    <img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/2.png" alt="2"/>
+	                        <span class="fl-codeEntry-hidden">2</span>
+	                    </a>
+	                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
+						    <img src="../../../../fluid-engage-core/components/codeEntry/images/3.png" alt="3"/>
+	                        <span class="fl-codeEntry-hidden">3</span>
+	                    </a>
+	 				</div>
+	 				<div class="fl-table-row">
+					    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
+	    					<img src="../../../../fluid-engage-core/components/codeEntry/images/4.png" alt="4"/>
+	                        <span class="fl-codeEntry-hidden">4</span>
+	                    </a>
+	                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
+	    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/5.png" alt="5"/>
+	                        <span class="fl-codeEntry-hidden">5</span>
+	                    </a>
+	                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
+	    					<img src="../../../../fluid-engage-core/components/codeEntry/images/6.png" alt="6"/>
+	                        <span class="fl-codeEntry-hidden">6</span>
+	                    </a>
+	 				</div>
+	 				<div class="fl-table-row">
+					    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
+	    					<img src="../../../../fluid-engage-core/components/codeEntry/images/7.png" alt="7"/>
+	                        <span class="fl-codeEntry-hidden">7</span>
+	                    </a>
+	                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
+	    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/8.png" alt="8"/>
+	                        <span class="fl-codeEntry-hidden">8</span>
+	                    </a>
+	                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
+	    					<img src="../../../../fluid-engage-core/components/codeEntry/images/9.png" alt="9"/>
+	                        <span class="fl-codeEntry-hidden">9</span>
+	                    </a>
+	 				</div>
+	 				<div class="fl-table-row">
+					    <img class="fl-codeEntry-numpadItem" src="../../../../fluid-engage-core/components/codeEntry/images/blank.png" alt=""/>
+	                    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
+	    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/0.png" alt="0"/>
+	                        <span class="fl-codeEntry-hidden">0</span>
+	                    </a>
+	                    <a class="flc-codeEntry-delButton fl-codeEntry-numpadItem" role="button" href="#">
+	    					<img src="../../../../fluid-engage-core/components/codeEntry/images/del.png" alt="Delete"/>
+	                        <span class="flc-codeEntry-delLabel fl-codeEntry-hidden">Delete</span>
+	                    </a>
+	 				</div>
+	 			</div>
+	 	    </div>
  		</div>
 				
         <script id="flc-initBlock" type="text/javascript">
Index: components/exhibition/html/about.html
===================================================================
--- components/exhibition/html/about.html	(revision 9477)
+++ components/exhibition/html/about.html	(working copy)
@@ -34,13 +34,13 @@
             <div class="flc-navigationBar fl-navbar fl-col-mixed">
                 <!-- Back button -->
                 <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
+                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
                     </a>
                 </div>
                 <!-- Home button -->
                 <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
+                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
                     </a>
                 </div>
@@ -48,7 +48,12 @@
                 <h1 class="flc-exhibition-navBarTitle fl-navbar-title fl-col-flex">About This Exhibition</h1>
             </div>
             
-            <div class="fl-exhibition-content">
+            <!-- loading message -->
+            <div class="fl-component-loadMessage">
+                <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" alt="" />
+            </div>
+            
+            <div class="fl-exhibition-content fl-component-contents">
                 <div class="fl-col-mixed">
                     <img src="../images/a.jpg" alt="Exhibition Image" class="flc-exhibition-image fl-exhibition-image fl-force-left" />
                     <div class="fl-exhibition-title-date fl-col-flex">
Index: components/exhibition/html/view.html
===================================================================
--- components/exhibition/html/view.html	(revision 9477)
+++ components/exhibition/html/view.html	(working copy)
@@ -50,21 +50,26 @@
             <div class="flc-navigationBar fl-navbar fl-col-mixed">
                 <!-- Back button -->
                 <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
+                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
                     </a>
                 </div>
                 <!-- Home button -->
                 <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
+                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
                     </a>
                 </div>
                 <!-- Page header -->
                 <h1 class="flc-exhibition-navBarTitle fl-navbar-title fl-col-flex">Exhibition View</h1>
             </div>
+            
+            <!-- loading message -->
+            <div class="fl-component-loadMessage">
+                <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" alt="" />
+            </div>
 
-            <ol class="fl-list-menu">
+            <ol class="fl-list-menu fl-component-contents">
                 <li>
                     <h2 class="flc-exhibition-title fl-exhibition-title">title</h2>
                     <div class="fl-exhibitionAbout-textBlock">
@@ -117,7 +122,7 @@
                 </li>
             </ol>
         </div>
-        <div id="guestbook-template" class="fl-offScreen-hidden">
+        <div id="guestbook-template" class="fl-offScreen-hidden fl-component-contents">
            The markup for the guestbook template is inserted here when run from the server.
         </div>
         <script id="flc-initBlock" type="text/javascript">
Index: components/guestbook/html/comment.html
===================================================================
--- components/guestbook/html/comment.html	(revision 9477)
+++ components/guestbook/html/comment.html	(working copy)
@@ -34,7 +34,7 @@
             <!-- Navigation Bar and Header -->
             <div class="flc-navigationBar fl-navbar fl-col-mixed">
                 <!-- Back button -->
-                <div class="fl-col-fixed fl-force-left">
+                <div class="fl-col-fixed fl-force-left fl-page-transition-link">
                     <a class="flc-navigationBar-back fl-button fl-backButton" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
                     </a>
@@ -42,13 +42,19 @@
                 <!-- Page header -->
                 <h1 class="flc-guestbook-commentEntry fl-navbar-title fl-col-flex">Comment entry</h1>
             </div>
-            <form class="flc-guestbook-form">
+            
+            <!-- loading message -->
+            <div class="fl-component-loadMessage">
+                <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" alt="" />
+            </div>
+            
+            <form class="flc-guestbook-form fl-component-contents">
 	            <textarea class="flc-guestbook-text fl-guestbook-textarea-width fl-guestbook-textarea-height"></textarea>
 	            <div class="fl-push"> </div>
 	            <div class="fl-guestbook-buttons fl-guestbook-textarea-width" >
 	                <div class="fl-force-right">
-	                    <input class="flc-guestbook-cancel" type="submit" value="Cancel"/>
-	                    <input class="flc-guestbook-submit" type="submit" value="Submit"/>
+	                    <input class="flc-guestbook-cancel fl-page-transition-link" type="submit" value="Cancel"/>
+	                    <input class="flc-guestbook-submit fl-page-transition-link" type="submit" value="Submit"/>
 	                </div>
 	            </div>
             </form>
Index: components/guestbook/html/guestbook.html
===================================================================
--- components/guestbook/html/guestbook.html	(revision 9477)
+++ components/guestbook/html/guestbook.html	(working copy)
@@ -43,13 +43,13 @@
                         <!-- Navigation Bar and Header -->
             <div class="flc-navigationBar fl-navbar fl-col-mixed">
                 <!-- Back button -->
-                <div class="fl-col-fixed fl-force-left">
+                <div class="fl-col-fixed fl-force-left fl-page-transition-link">
                     <a class="flc-navigationBar-back fl-button fl-backButton" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
                     </a>
                 </div>
                 <!-- Home button -->
-                <div class="fl-col-fixed fl-force-left">
+                <div class="fl-col-fixed fl-force-left fl-page-transition-link">
                     <a class="flc-navigationBar-home fl-button" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
                     </a>
@@ -58,28 +58,35 @@
                 <h1 class="flc-guestbook-title fl-navbar-title fl-col-flex">Guestbook for This Exhibition</h1>
             </div>
             
-            <div class="flc-guestbook-addnote fl-guestbook-addnote">
-               <div class="fl-centered">
-                   <a class="flc-guestbook-addnote-control" href="comment.html">
-                       <label for="fl-addnote" class="flc-guestbook-addnote-text fl-guestbook-title">Add a note</label>
-                       <span id="fl-addnote" class="fl-guestbook-addnote-control"></span>
-                   </a>
-               </div>
+            <!-- loading message -->
+            <div class="fl-component-loadMessage">
+                <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" alt="" />
             </div>
-            <div class="flc-guestbook-comment-cell fl-guestbook-comment-cell">
-              <div class="fl-guestbook-header fl-push">
-                <span class="flc-guestbook-author fl-guestbook-author fl-guestbook-slash-after">Robert Brown</span>
-                <span class="flc-guestbook-location fl-guestbook-location fl-guestbook-slash-after">Washington, DC</span>
-                <span class="flc-guestbook-date fl-guestbook-date">July 16, 2009</span>
-              </div>
-                <span class="flc-guestbook-text fl-guestbook-text fl-push">I had such an amazing time at this
-                exhibit! Really loved the red sleigh especially. I had one just like it growing up</span>
-              <div class="fl-push"> </div>
-              <div class="fl-guestbook-actions fl-force-right">
-                <a class="flc-guestbook-action fl-guestbook-action">REPORT ABUSE</a>
-              </div>
-              <div class="fl-push"> </div>
-            </div>
+            
+            <div class="fl-component-contents">
+	            <div class="flc-guestbook-addnote fl-guestbook-addnote">
+	               <div class="fl-centered">
+	                   <a class="flc-guestbook-addnote-control" href="comment.html">
+	                       <label for="fl-addnote" class="flc-guestbook-addnote-text fl-guestbook-title">Add a note</label>
+	                       <span id="fl-addnote" class="fl-guestbook-addnote-control"></span>
+	                   </a>
+	               </div>
+	            </div>
+	            <div class="flc-guestbook-comment-cell fl-guestbook-comment-cell">
+	              <div class="fl-guestbook-header fl-push">
+	                <span class="flc-guestbook-author fl-guestbook-author fl-guestbook-slash-after">Robert Brown</span>
+	                <span class="flc-guestbook-location fl-guestbook-location fl-guestbook-slash-after">Washington, DC</span>
+	                <span class="flc-guestbook-date fl-guestbook-date">July 16, 2009</span>
+	              </div>
+	                <span class="flc-guestbook-text fl-guestbook-text fl-push">I had such an amazing time at this
+	                exhibit! Really loved the red sleigh especially. I had one just like it growing up</span>
+	              <div class="fl-push"> </div>
+	              <div class="fl-guestbook-actions fl-force-right">
+	                <a class="flc-guestbook-action fl-guestbook-action">REPORT ABUSE</a>
+	              </div>
+	              <div class="fl-push"> </div>
+	            </div>
+	        </div>
         </div>
         <!--DISREPUTABLE TEMPLATE BOUNDARY-->
         <script id="flc-initBlock" type="text/javascript">
Index: components/home/html/home.html
===================================================================
--- components/home/html/home.html	(revision 9477)
+++ components/home/html/home.html	(working copy)
@@ -25,7 +25,7 @@
         <script type="text/javascript" src="../../../../fluid-engage-core/components/home/js/Home.js"></script>
     </head>   
     
-    <body class="fl-theme-iphone fl-home-white-background">
+    <body class="fl-theme-iphone">
         <div class="flc-homeAndLanguage">
             <div class="flc-home fl-home">
                 <div class="fl-navbar fl-table">
@@ -33,7 +33,7 @@
                         <h1 class="flc-home-title fl-table-cell artifact-name">McCord Museum</h1>                          
                     </div>
                 </div>
-                <ul class="fl-list-menu fl-list-thumbnails fl-thumbnails-expanded fl-grid">
+                <ul class="fl-list-menu fl-list-thumbnails fl-thumbnails-expanded fl-grid fl-component-contents">
                     <li>                
                         <div class="fl-table">
                             <a rsf:id="scr=null" class="flc-home-links fl-table-cell" href="../exhibitions/browse.html?db=mccord">
@@ -83,7 +83,7 @@
                         <h1 class="flc-languageSelection-title fl-table-cell">Language Selection</h1>                          
                     </div>
                 </div>
-                <ul class="fl-list-menu">
+                <ul class="fl-list-menu fl-component-contents">
                     <li>
                         <a rsf:id="scr=null" class="flc-languageSelection-englishLink" href="./home.html?lang=en">
                            English 
@@ -97,6 +97,10 @@
                 </ul>
             </div>
         </div>
+        <!-- loading message -->
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" alt="" />
+        </div>
         <script id="flc-initBlock" type="text/javascript">
             fluid.engage.home(".flc-homeAndLanguage");
         </script>
Index: components/myCollection/html/myCollection.html
===================================================================
--- components/myCollection/html/myCollection.html	(revision 9477)
+++ components/myCollection/html/myCollection.html	(working copy)
@@ -38,13 +38,13 @@
             <div class="flc-navigationBar fl-navbar fl-col-mixed">
                 <!-- Back button -->
                 <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
+                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
                     </a>
                 </div>
                 <!-- Home button -->
                 <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
+                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
                         <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
                     </a>
                 </div>
@@ -58,29 +58,36 @@
                 <!-- Page header -->
                 <h1 class="flc-myCollection-title fl-navbar-title fl-col-flex">My Collection</h1>
             </div>
-            <div class="fl-myCollection-actionPanel">
-                <div class="fl-myCollection-actionButtons">
-                    <a rsf:id="scr=null" class="flc-myCollection-sendEmailButton fl-myCollection-action-button fl-myCollection-send fl-button" href="#">Send</a>
-                </div>
+            
+            <!-- loading message -->
+            <div class="fl-component-loadMessage">
+                <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" alt="" />
             </div>
-
-            <div class="flc-myCollection-emptyStatus"></div>
+            
+            <div class="fl-component-contents">
+	            <div class="fl-myCollection-actionPanel">
+	                <div class="fl-myCollection-actionButtons">
+	                    <a rsf:id="scr=null" class="flc-myCollection-sendEmailButton fl-myCollection-action-button fl-myCollection-send fl-button" href="#">Send</a>
+	                </div>
+	            </div>
 	
-			<div class="fl-myCollection-loadMessage fl-note fl-bevel-white">
-				Loading...
+	            <div class="flc-myCollection-emptyStatus"></div>
+		
+				<div class="fl-myCollection-loadMessage fl-note fl-bevel-white">
+					Loading...
+				</div>
+		
+	
+		  		<form class="flc-myCollection-imageContainer">
+					<div class="flc-navigationList">					
+					</div>
+				</form>
+			    <!-- hidden link to the navigation list template -->
+			    <a class="flc-myCollection-navigationList-link fl-myCollection-navigationList-link" href="../../../../fluid-engage-core/components/navigationList/html/NavigationList.html"/>
 			</div>
-	
-
-	  		<form class="flc-myCollection-imageContainer">
-				<div class="flc-navigationList">					
-				</div>
-			</form>
-				
-			<!-- hidden link to the navigation list template -->
-			<a class="flc-myCollection-navigationList-link fl-myCollection-navigationList-link" href="../../../../fluid-engage-core/components/navigationList/html/NavigationList.html"/>
 		</div>
 		
-		<div class="flc-myCollection-sendMailDialog fl-myCollection-sendMailDialog" title="Dialog Title">
+		<div class="flc-myCollection-sendMailDialog fl-myCollection-sendMailDialog fl-component-contents" title="Dialog Title">
             <div class="flc-myCollection-sendMailMessage">We'll send your collection to the email address below.</div>
             <input class="flc-myCollection-sendEmailInput fl-myCollection-sendEmailInput fl-centered" type="text"/>
         </div>
Index: framework/js/iPhoneChromeless.js
===================================================================
--- framework/js/iPhoneChromeless.js	(revision 9477)
+++ framework/js/iPhoneChromeless.js	(working copy)
@@ -13,12 +13,20 @@
 "use strict";
 
 (function ($) {
+    
+    var enableSpinner = function () {
+        $("body").addClass("fl-component-loading");
+    };
 
     $(function () {
         $("a:not([href^=#])").live("click", function (evt) {
-            window.location = $(this).attr("href");
+            enableSpinner();
+            window.location = $(this).attr("href");            
             evt.preventDefault();
         });
+        $(".fl-page-transition-link").live("click", function (evt) {
+            enableSpinner();
+        });
     });
     
 })(jQuery);
Index: shared/css/engage-mobile.css
===================================================================
--- shared/css/engage-mobile.css	(revision 9477)
+++ shared/css/engage-mobile.css	(working copy)
@@ -2,6 +2,37 @@
     background: none;
 }
 
+@-webkit-keyframes spinner {
+    from {
+        -webkit-transform: rotate(0deg);
+        -webkit-animation-timing-function:linear;
+    } 
+    to {
+        -webkit-transform: rotate(-360deg);
+        -webkit-animation-timing-function:linear;
+    }
+}
+
+.fl-component-loading .fl-component-loadMessage {
+    display: block;
+    text-align:center;
+    margin-top:100px;
+}
+
+.fl-component-spinner {
+    -webkit-animation-name:spinner;
+    -webkit-animation-iteration-count:infinite;
+    -webkit-animation-duration:1s;    
+    width:50px;
+    height:50px;
+    margin:10px auto;
+}
+
+.fl-component-loadMessage,
+.fl-component-loading .fl-component-contents {
+    display: none;
+}
+
 .fl-theme-iphone a,
 .fl-theme-iphone input,
 .fl-theme-iphone textarea,
Index: shared/images/spinner.gif
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

Property changes on: shared\images\spinner.gif
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Index: shared/images/spinner.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

Property changes on: shared\images\spinner.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Index: shared/images/spinner2.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

Property changes on: shared\images\spinner2.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

