chromaphobic

<!-- The below code is all that is required for embedding a responsive YouTube video -->
<!-- Any width or height attributes should be removed from the iframe -->
<!-- The frameborder='0' and allowfullscreen attributes should be present -->
<div class="embed-container">
	<iframe src="http://www.youtube.com/embed/HsRD6pTnlb8" frameborder='0' allowfullscreen></iframe>
</div>
<!-- By default, the iframe will automatically be sized to the dimensions of a video -->
<!-- If you need taller iframes (for non-YouTube content) two other classes exist: -->
<!-- "embed-container-tall" and "embed-container-extra-tall" -->

chromaphobic

<!-- This is the default syntax. This will create a pull quote floated right that is 220px wide. -->
<!-- This is the same width as the "col4" class for images, which is used for many of the inline images -->

<blockquote class="pull-quote">
	<p>Providing Innovative, Personalized Care for Patients with Digestive and Liver Diseases</p>
</blockquote>

<!-- If you want to set it to a different width, the same "col" classes that we use on images can be used -->
<!-- The width for the "col" classes on a blockquote will match if it had been used on an img -->

chromaphobic

<!-- The div, ul, and script are all required -->
<!-- The data-source is copied from the YouTube playlist's URL -->
<!-- data-playlist-name data-thumbnail-path are required and should be left empty -->

<div id="youtube-playlist"></div>
<ul id="playlists">
	<li data-source="list=PLD17355887F6284EE" data-playlist-name="" data-thumbnail-path=""></li>
</ul>
<script type="text/javascript">$(document).ready(function() { loadPlaylistPlayer(); });</script>

chromaphobic

<!-- These boxes can be used to highlight small bits of content that we want to draw attention to. -->
<!-- For general uses, there are two main styles/classes: -->
<!-- "highlight-info" - This is a light gray background with black text -->
<!-- "highlight-invert" - A dark gray background with white text. -->
<div class="highlight-info">
	<h3>Sed posuere consectetur est at lobortis</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<!-- There are 3 additional utility classes, primarily for status messages and such -->
<!-- As these utility classes use non-branded colors, they should not be used as design elements: -->

chromaphobic

<button type="button" class="pdf-print-button"><img src="/Content/Images/downloadIcon.jpg">Save a printable PDF</button>

chromaphobic

<!-- Include the following snippets in the "Custom CSS and JS" section of Sitecore -->
<!-- In the "Vendor CSS" box: -->
<link href="/content/magnific-popup.css" type="text/css" rel="stylesheet">
<!-- In the "Custom JS" box: -->
<script src="/scripts/jquery.magnific-popup.min.js"></script>

<!-- For single images: -->

<script>
    $(document).ready(function() {

chromaphobic

<!-- Include the following snippet in the "Custom CSS and JS" section of Sitecore: -->
<script src="//use.typekit.net/nwl5dzm.js"></script><script>try{Typekit.load({ async: true });}catch(e){}</script>

<!-- For the CSS, use the following example font-family declration: -->
<style>
    h1 {
        font-family: 'Museo Slab', 'museo-slab', 'Helvetica', 'Arial', sans-serif;
    }
</style>
<!-- Currentlym the valid font weights are 300, 500, and 700 -->