| 
																	
																	
																		
																			
																		
																	
																	
																 | 
																@ -15,12 +15,6 @@ | 
															
														
														
													
														
															
																 | 
																 | 
																				margin: 0 auto; | 
																 | 
																 | 
																				margin: 0 auto; | 
															
														
														
													
														
															
																 | 
																 | 
																			} | 
																 | 
																 | 
																			} | 
															
														
														
													
														
															
																 | 
																 | 
																
 | 
																 | 
																 | 
																
 | 
															
														
														
													
														
															
																 | 
																 | 
																			.panel { | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																				padding: 10px; | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																				background-color: #efefef; | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																				border: 1px dotted #cecece; | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																			} | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																
 | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																			.header { | 
																 | 
																 | 
																			.header { | 
															
														
														
													
														
															
																 | 
																 | 
																				padding: 8px 0 0; | 
																 | 
																 | 
																				padding: 8px 0 0; | 
															
														
														
													
														
															
																 | 
																 | 
																				background-color: #e9e9e9; | 
																 | 
																 | 
																				background-color: #e9e9e9; | 
															
														
														
													
												
													
														
															
																| 
																	
																		
																			
																		
																	
																	
																		
																			
																		
																	
																	
																 | 
																@ -155,7 +149,7 @@ | 
															
														
														
													
														
															
																 | 
																 | 
																        <li class="group__item">third item</li> | 
																 | 
																 | 
																        <li class="group__item">third item</li> | 
															
														
														
													
														
															
																 | 
																 | 
																    </ul> | 
																 | 
																 | 
																    </ul> | 
															
														
														
													
														
															
																 | 
																 | 
																</nav></code></pre> | 
																 | 
																 | 
																</nav></code></pre> | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel margin-bottom-1x"> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="panel panel__inner margin-bottom-1x"> | 
															
														
														
													
														
															
																 | 
																 | 
																    <nav class="group"> | 
																 | 
																 | 
																    <nav class="group"> | 
															
														
														
													
														
															
																 | 
																 | 
																        <ul class="group__section"> | 
																 | 
																 | 
																        <ul class="group__section"> | 
															
														
														
													
														
															
																 | 
																 | 
																            <li class="group__item">first item</li> | 
																 | 
																 | 
																            <li class="group__item">first item</li> | 
															
														
														
													
												
													
														
															
																| 
																	
																	
																	
																		
																			
																		
																	
																 | 
																@ -172,7 +166,7 @@ | 
															
														
														
													
														
															
																 | 
																 | 
																        <li class="group__item">third item</li> | 
																 | 
																 | 
																        <li class="group__item">third item</li> | 
															
														
														
													
														
															
																 | 
																 | 
																    </ul> | 
																 | 
																 | 
																    </ul> | 
															
														
														
													
														
															
																 | 
																 | 
																</nav></code></pre> | 
																 | 
																 | 
																</nav></code></pre> | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel"> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="panel panel__inner"> | 
															
														
														
													
														
															
																 | 
																 | 
																    <nav class="group group--horizontal"> | 
																 | 
																 | 
																    <nav class="group group--horizontal"> | 
															
														
														
													
														
															
																 | 
																 | 
																        <ul class="group__section group__section--separate"> | 
																 | 
																 | 
																        <ul class="group__section group__section--separate"> | 
															
														
														
													
														
															
																 | 
																 | 
																            <li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li> | 
																 | 
																 | 
																            <li class="group__item">first item</li><li class="group__item">second item</li><li class="group__item">third item</li> | 
															
														
														
													
												
													
														
															
																| 
																	
																		
																			
																		
																	
																	
																		
																			
																		
																	
																	
																 | 
																@ -386,13 +380,13 @@ toRem(10px 10px 0 0); | 
															
														
														
													
														
															
																 | 
																 | 
																    margin-top and -bottom from <strong>$crispy__margin</strong> as px. | 
																 | 
																 | 
																    margin-top and -bottom from <strong>$crispy__margin</strong> as px. | 
															
														
														
													
														
															
																 | 
																 | 
																</p> | 
																 | 
																 | 
																</p> | 
															
														
														
													
														
															
																 | 
																 | 
																<pre class="code"><div class="panel margin-bottom-0x">margin-bottom-0x</div> | 
																 | 
																 | 
																<pre class="code"><div class="panel margin-bottom-0x">margin-bottom-0x</div> | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel margin-bottom-1x">margin-bottom-1x</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel margin-bottom-2x">margin-bottom-2x</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel margin-bottom-3x">margin-bottom-3x</div></code></pre> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel margin-bottom-0x">margin-bottom-0x</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel margin-bottom-1x">margin-bottom-1x</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel margin-bottom-2x">margin-bottom-2x</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel margin-bottom-3x">margin-bottom-3x</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="margin-bottom-1x">margin-bottom-1x</div> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="margin-bottom-2x">margin-bottom-2x</div> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="margin-bottom-3x">margin-bottom-3x</div></code></pre> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="panel panel__inner margin-bottom-0x">margin-bottom-0x</div> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="panel panel__inner margin-bottom-1x">margin-bottom-1x</div> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="panel panel__inner margin-bottom-2x">margin-bottom-2x</div> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="panel panel__inner margin-bottom-3x">margin-bottom-3x</div> | 
															
														
														
													
														
															
																 | 
																 | 
																
 | 
																 | 
																 | 
																
 | 
															
														
														
													
														
															
																 | 
																 | 
																<!-- helpers / media --> | 
																 | 
																 | 
																<!-- helpers / media --> | 
															
														
														
													
														
															
																 | 
																 | 
																<h3 class="h4 margin-top-1x"> | 
																 | 
																 | 
																<h3 class="h4 margin-top-1x"> | 
															
														
														
													
												
													
														
															
																| 
																	
																		
																			
																		
																	
																	
																		
																			
																		
																	
																	
																 | 
																@ -430,13 +424,13 @@ toRem(10px 10px 0 0); | 
															
														
														
													
														
															
																 | 
																 | 
																    Width | 
																 | 
																 | 
																    Width | 
															
														
														
													
														
															
																 | 
																 | 
																</h3> | 
																 | 
																 | 
																</h3> | 
															
														
														
													
														
															
																 | 
																 | 
																<pre class="code"><code><div class="panel width-25">width-25</div> | 
																 | 
																 | 
																<pre class="code"><code><div class="panel width-25">width-25</div> | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel width-50">width-50</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel width-75">width-75</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel width-100">width-100</div></code></pre> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel width-25 margin-bottom-1x">width-25</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel width-50 margin-bottom-1x">width-50</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel width-75 margin-bottom-1x">width-75</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																<div class="panel width-100 margin-bottom-1x">width-100</div> | 
																 | 
																 | 
																 | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="width-50">width-50</div> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="width-75">width-75</div> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="width-100">width-100</div></code></pre> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="panel panel__inner width-25 margin-bottom-1x">width-25</div> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="panel panel__inner width-50 margin-bottom-1x">width-50</div> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="panel panel__inner width-75 margin-bottom-1x">width-75</div> | 
															
														
														
													
														
															
																 | 
																 | 
																 | 
																 | 
																 | 
																<div class="panel panel__inner width-100 margin-bottom-1x">width-100</div> | 
															
														
														
													
														
															
																 | 
																 | 
																
 | 
																 | 
																 | 
																
 | 
															
														
														
													
														
															
																 | 
																 | 
																					<!-- blockquote --> | 
																 | 
																 | 
																					<!-- blockquote --> | 
															
														
														
													
														
															
																 | 
																 | 
																					<h3 class="h4 margin-top-2x margin-bottom-0x">blockquote</h3> | 
																 | 
																 | 
																					<h3 class="h4 margin-top-2x margin-bottom-0x">blockquote</h3> | 
															
														
														
													
												
													
														
															
																| 
																	
																		
																			
																		
																	
																	
																	
																 | 
																
  |