
<!-- 
=============================
HTML if Viewing Your profile
=============================
-->
	<div id="cacap-message">
        <p><strong>New CUNY Academic Commons Profiles</strong>   		</p>
		<p>We’ve made a lot of changes to your profile page. Our goal is to give you a more professional place to call your own with an improved design, customization and more features. 
  		<br>Click the Edit button to jump in and start customizing or click the link below to learn more about the changes.
  		<br> <a href="xxx">Learn more about the changes</a>
		</p>
		<p class="action"><a href="xxx">Hide Message</a></p>
	</div>

<!-- 
=============================
HTML if Viewing somone else's profile
=============================
-->

	<div id="cacap-message">
        <p><strong>New CUNY Academic Commons Profiles!</strong>   </p>
		<p>We’ve made a lot of changes to your profile page. Our goal is to give you a more professional place to call your own with an improved design, customization and more features. 
  		<br>You can <a href="http://commons.gc.cuny.edu/members/cstein/profile">click here to view your new profile </a>or click the link below to learn more about the changes.
  		<br> <a href="xxx">Learn more about the changes</a>
		</p>
		<p class="action"><a href="xxx">Hide Message</a></p>
	</div>

	<!-- 
	==========================
	Note on optoins for no JS fallback, could be implemented later
	==========================
	
	If you want to do a simple fallback for those without JS then you could have the message showing by default and add visibility:hidden; to the #cacap-message .action selector. The JS would change the visibility:visible; so users with JS could see the button. -->

	<!-- 
	=============================
	CSS for the message
	=============================
	-->

	#cacap-content {
		margin-top: 17px;
	}
	
	#cacap-message {
		background-color: #ffffe0;
		border: 2px solid #fc7;
		padding: 10px;
		position: relative; //need this to allow .action to be positioned.
		//below is to do the showing and hiding with css transition. You would have JS that would change the max-height between 18px and 100% to hide and show. It would also have to change the text in p.action between "Show Message" and "Hide Message"
		overflow: hidden;
		-webkit-transition: max-height 1s ease-out;
		-moz-transition: max-height 1s ease-out;
		-o-transition: max-height 1s ease-out;
		-ms-transition: max-height 1s ease-out;
		transition: max-height 1s ease-in-out;
		max-height: 100%;
	}
	
	#cacap-message strong {
		font-weight: bold;
	}

	#cacap-message .action {
		position: absolute;
		//these should be same as padding in #cacap-message
		bottom: 10; 
		right: 10;
	}