cagettepei/lang/master/tpl/cssDemo.mtt

::use 'design.mtt'::

<div id="content" class="col-md-8">
	
	<div class="row">
		<div id="content" class="col-md-12">			
			<div class="alert alert-danger">				
				<span class="glyphicon glyphicon-exclamation-sign"></span>
				Hou là là !
			</div>
			
		</div>	
	</div>
	
	<div class="row">
		<div id="content" class="col-md-12">
			
			<div class="alert alert-success">
				<span class="glyphicon glyphicon-ok"></span>
				Todo bem
			</div>
			
		</div>	
	</div>
	
	<div class="article">
		<div class="row">
			
			<div class="col-md-6">
				<h3>Boutons large</h3>
				<button type="button" class="btn btn-lg btn-noAntiDoubleClick btn-default">noAntiDoubleClick</button>
				<button type="button" class="btn btn-lg btn-default">Default</button>
				<button type="button" class="btn btn-lg btn-primary">Primary</button>
				<button type="button" class="btn btn-lg btn-success">Success</button>
				<button type="button" class="btn btn-lg btn-info">Info</button>
				<button type="button" class="btn btn-lg btn-warning">Warning</button>
				<button type="button" class="btn btn-lg btn-danger">Danger</button>
				<button type="button" class="btn btn-lg btn-link">Link</button>
			</div>
		
			<div class="col-md-6">
				<h3>Boutons default</h3>
				<button type="button" class="btn btn-default">Default</button>

				<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
				<button type="button" class="btn btn-primary">Primary</button>

				<!-- Indicates a successful or positive action -->
				<button type="button" class="btn btn-success">Success</button>

				<!-- Contextual button for informational alert messages -->
				<button type="button" class="btn btn-info">Info</button>

				<!-- Indicates caution should be taken with this action -->
				<button type="button" class="btn btn-warning">Warning</button>

				<!-- Indicates a dangerous or potentially negative action -->
				<button type="button" class="btn btn-danger">Danger</button>

				<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
				<button type="button" class="btn btn-link">Link</button>
			</div>
			
			
			<div class="col-md-6">
				<h3>Boutons small</h3>
				<button type="button" class="btn btn-sm btn-default">Default</button>
				<button type="button" class="btn btn-sm btn-primary">Primary</button>
				<button type="button" class="btn btn-sm btn-success">Success</button>
				<button type="button" class="btn btn-sm btn-info">Info</button>
				<button type="button" class="btn btn-sm btn-warning">Warning</button>
				<button type="button" class="btn btn-sm btn-danger">Danger</button>
				<button type="button" class="btn btn-sm btn-link">Link</button>
			</div>
			
			<div class="col-md-6">
				<h3>Boutons XS</h3>
				<button type="button" class="btn btn-xs btn-default">Default</button>
				<button type="button" class="btn btn-xs btn-primary">Primary</button>
				<button type="button" class="btn btn-xs btn-success">Success</button>
				<button type="button" class="btn btn-xs btn-info">Info</button>
				<button type="button" class="btn btn-xs btn-warning">Warning</button>
				<button type="button" class="btn btn-xs btn-danger">Danger</button>
				<button type="button" class="btn btn-xs btn-link">Link</button>
			</div>
			
			
			
			<div class="col-md-6">
				<h1>H1 Title</h1>
				<h2>H2 Title</h2>
				<h3>H3 Title</h3>
				<h4>H4 Title</h4>
				
			</div>	
			
			<div class="col-md-6">
				
				<div class="panel panel-success">
					<div class="panel-heading">
						<h3 class="panel-title">Panel title</h3>
					</div>
					<div class="panel-body">
						<p>
							Type : <b>Gratuit jusqu'à 20 foyers</b> ( actuellement 1 foyers dans votre groupe)  
						</p>
						<p>
							<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-right"></span> Primary</button>
						</p>
						
					</div>
				</div>
				
			</div>
			
		</div>
		
		
		
		<div class="popover fade bottom in" role="tooltip" id="popover63647" style="top: 531px;left: 50%;display: block;">
			<div class="arrow" style="left: 50%;"></div>
			<h3 class="popover-title">Visite guidée du coordinateur <div class="pull-right">7/21</div></h3>
			<div class="popover-content">
				<p>Ici se trouve la liste des <b>contrats</b>. 
					Ils comportent une date de début, une date de fin, et représentent votre relation avec un producteur. <br />
				</p>
				<p>
					C'est ici que vous pourrez gérer :
				</p>
				<p>
					<ul>
						<li>la liste de produits de ce producteur</li>
						<li>les commandes des adhérents pour ce producteur</li>
						<li>planifier les distributions</li>
					</ul>
				</p>
				<div class="footer">
				
					<div class="pull-right">
						<p><a class="btn btn-default btn-sm"><span class="glyphicon glyphicon-chevron-right"></span> Suivant</a></p>
					</div>
				</div>
			</div>
		</div>
		
		
	</div>
	

	
</div>
<div class="col-md-4">
	
	
	
	
	<div class="block" >
		
		                           
                        Le Lorem Ipsum est simplement du <strong>faux texte</strong> employé dans <a href="/">la composition</a>
                        et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, 
                        quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
                        Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
                      
                    
		
	</div>
	
	<div class="block">
		<h3>Permanences</h3>
		
		<p>N'oubliez pas de vous inscrire pour aider lors des livraisons</p>
		
		<ul>
			<li>Liste 1</li>
			<li>Liste 2</li>
		</ul>
	</div>
	
	<div class="alert alert-danger">
		<p>
			Attention, vous n'avez défini aucun mot de passe pour votre compte !
		</p>
		<a href="/user/definePassword" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-chevron-right"></span> Définir un mot de passe</a>
		
	</div>
	
	$$today(Mercredi,15,Décembre,19,90,::user._amap._mainPlace::)
	
	$$date(Mercredi,15,Décembre,19,::user._amap._mainPlace::)
	
	
</div>
::end::