anchor.diff:  	</tbody>
   </table>
   
  -<h3 id="passo1" >tour.js </h3>
  -<pre class="lang-json prettyprint linenums">
  -var configTour = {
  -	id: 'tourDemo',
  -	selectors: {
  -		init:  '#demo-init'
  -	},
  -	// Tradução dos botões
  -	i18n: {
  -		nextBtn: "Próximo",
  -		prevBtn: "Anterior",
  -		doneBtn: "Ok",
  -		skipBtn: "Sair",
  -		closeTooltip: "Fechar"
  -	},
  -	bubbleWidth: 250,
  -	showPrevButton: true,
  -	steps: [
  -		{
  -			target: 'passo1',
  -			title: 'Titulo passo 1',
  -			content: 'descrição passo 1',
  -			placement: 'bottom',
  -			arrowOffset: 'center'
  +<div class="doc-section">
  +	<h2 id="passo1" class="ls-title-2" >tour.js </h2>
  +	<code class="language-javascript ls-well-example">
  +	var configTour = {
  +		id: 'tourDemo',
  +		selectors: {
  +			init:  '#demo-init'
   		},
  -		{
  -			target: 'passo2',
  -			title: 'Título passo 2',
  -			content: 'texto passo 2.',
  -			placement: 'right',
  -			arrowOffset: 'center',
  -			yOffset: 'center'
  -		}
  -	]
  -};
  -</pre>
  +		// Tradução dos botões
  +		i18n: {
  +			nextBtn: "Próximo",
  +			prevBtn: "Anterior",
  +			doneBtn: "Ok",
  +			skipBtn: "Sair",
  +			closeTooltip: "Fechar"
  +		},
  +		bubbleWidth: 250,
  +		showPrevButton: true,
  +		steps: [
  +			{
  +				target: 'passo1',
  +				title: 'Titulo passo 1',
  +				content: 'descrição passo 1',
  +				placement: 'bottom',
  +				arrowOffset: 'center'
  +			},
  +			{
  +				target: 'passo2',
  +				title: 'Título passo 2',
  +				content: 'texto passo 2.',
  +				placement: 'right',
  +				arrowOffset: 'center',
  +				yOffset: 'center'
  +			}
  +		]
  +	};
  +	</code>
  +</div>
   
  -<h3 id="passo2">HTML</h3>
  -<pre class="lang-html prettyprint-code linenums">
  -<div class="guided-tour">
  -	<a href="#" aria-label="Fechar" class="btn-close close">x</a>
  -	<header class="guided-header">
  -		<p>Bem-vindo</p>
  -		<h2 class="title-guided">Título</h2>
  -	</header>
  -	<a href="#" class="btn btn-primary btn-tour" role="button">Iniciar</a>
  -	<footer class="guided-footer">
  -		<a href="https://www.demo.com" class="ico-arrow-right" target="_blank">Link demo</a>
  -		<a href="#" class="ico-arrow-right" target="_blank">Link</a>
  -	</footer>
  +<div class="doc-section">
  +	<h2 id="passo2" class="ls-title-2">HTML</h2>
  +	<code class="language-html ls-well-example">
  +		<div class="guided-tour">
  +			<a href="#" aria-label="Fechar" class="btn-close close">x</a>
  +			<header class="guided-header">
  +				<p>Bem-vindo</p>
  +				<h2 class="title-guided">Título</h2>
  +			</header>
  +			<a href="#" class="btn btn-primary btn-tour" role="button">Iniciar</a>
  +			<footer class="guided-footer">
  +				<a href="https://www.demo.com" class="ico-arrow-right" target="_blank">Link demo</a>
  +				<a href="#" class="ico-arrow-right" target="_blank">Link</a>
  +			</footer>
  +		</div>
  +	</code>
   </div>
  -</pre>
   
  -<h3>Exemplo</h3>
  -<p>Faça um tour guiado usando as configurações do js de exemplo, acima:</p>
  -<button id="demo-init" class="btn btn-primary btn-large btn-tour">Iniciar Tour</button>+<div class="doc-section">
  +	<h3>Exemplo</h3>
  +	<p>Faça um tour guiado usando as configurações do js de exemplo, acima:</p>
  +	<div class="ls-box-demo">
  +		<button id="demo-init" class="ls-btn-primary btn-tour">Iniciar Tour</button>
  +	</div>
  +	<code class="language-html ls-well-example">
  +		<button id="demo-init-sample" class="ls-btn-primary btn-tour">Iniciar Tour</button>
  +	</code>
  +</div>
  
positive.code: 	</tbody>
  </table>
  
  <p>*<b>elem</b> é o nome da variável do tour.js da página específica.</p>
  <p>Abaixo segue um exemplo dos códigos necessários para implementar o <strong>Tour Guiado</strong>. </p>
  
  <h3>Chamando a função de navegação dentro do seu projeto, propositalmente com window.load</h3>
  <pre class="lang-html prettyprint linenums">
  $(window).load(function() {
  	//Onde tourDashboard é a variável que recebe os eventos do plugin no exemplo abaixo
  	locastyle.guidedTour.init(tourDashboard);
  });
  </pre>
  
  <p>O valor do <strong>target</strong> (dentro do tour.js) server como referência de exibição do Tour Guiado. Na tabela abaixo alguns exemplos</p>
  
  <table class="table-bordered table-striped table">
  	<thead>
  		<tr>
  			<th>Elemento</th>
  
negative.code: ---
  title: Tour Guiado
  description: Exibe uma navegação explicativa de elementos pré definidos
  ---
  <div class="doc-section">
  	<p>Utilizamos o plugin  <a href="http://linkedin.github.io/hopscotch" target="_blank">hopscotch</a> (criado pelo linkedin), e aplicamos a identidade visual do LocawebStyle.</p>
  </div>
  
  <div class="doc-section">
  	<h2 class="ls-title-2">Como funciona:</h2>
  	<p>Dentro de cada projeto existe um tour.js (específico), que determina onde exibirá o <strong>Tour Guiado</strong>, qual o próximo passo e assim por diante. Em cada passo podemos implementar outras funções de navegação ou mesmo de eventos simulando interações, vale a pena ler a <a href="http://linkedin.github.io/hopscotch" target="_blank">documentação do plugin</a> para entender melhor sobre esses eventos e funções.</p>
  </div>
  
  <div class="doc-section">
  	<h2 class="ls-title-2">Cookie</h2>
  	<p>Ao carregar pela primeira vez,  a caixa de informação onde está o botão para iniciar o Tour, é exibida aberta logo após o carregamento da página, nas próximas vezes ela estará sempre fechada, a não ser que o cookie seja excluído.</p>
  </div>
  
  <div class="doc-section">
  	<h2 class="ls-title-2">Acessibilidade</h2>
  	<p>Implementamos navegação via teclado, utilizando seta pra frente (prosseguir), trás (voltar) e a tecla ESC (fechar). Faça um teste!</p>
  </div>
  
  
  <table class="ls-table">
  	<thead>
  		<tr>
  			<th>Função</th>
  