less sample

less-sample.less

/* LESS Document */

#map-nav { 
	.make-sm-column(6);
	.make-sm-column-pull(3);
	clear: both;
	background-color: @lightest-bg;
	margin: 25px 0 0 0; 
	padding: 0px 15px;
	
	@media (min-width: @screen-sm-min)  { 
		clear: none;
		background-color: @brand-contrast;
		margin: 13px 0 0 0; 
	}
	
	@media (min-width: @screen-md-min)  { 
		margin: 0; 
	}
	
	ul {
		list-style-type: none;  
		margin: 0 auto; 
		padding: 20px 0px; 
		text-align: center; 
		
		@media (min-width: @screen-sm-min)  { 
			padding: 0px; 
			text-align: left;
		}
	}
}

#map-nav li {
	display: inline-block; 
	background:url('../images/divider.png') bottom center repeat-x; 
	list-style-type: none; 
	padding: 0px 6px; 
	border: 0px; 
	height: 40px;
	
	@media (min-width: @screen-md-min)  { 
			margin: 12px auto 0 auto; 
		}
		
	@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { 
			padding: 0px 3px;
	}
}

#map-nav li:first-child { 
	padding-left: 0px;
} 

#map-nav li:last-child { 
	padding-right: 0px;
} 

#map-nav li a {
	background:url('../images/map.png') top center repeat-x;
	padding: 3px 10px 22px 10px;
	border-radius: 1px;
	color: @brand-contrast;
	font-size: 12px;
	text-decoration: none;
}

#map-nav li a.location {
	background-position:0px auto
}
	
#map-nav li a:hover.location, #map-nav li a.active {
	background-position:50% -42px
}