Froogaloop fixes (custom version), docs sprite, source api changes

docs/src/js/docs.js

@@ -80,26 +80,32 @@ shr.setup({
 
 			case 'youtube':
 				player.source({
-					type:       'youtube',
+					type:       'video',
 					title: 		'View From A Blue Moon',
-					sources:    'bTqVqk7FSmY'
+					sources: [{
+				        src:    'bTqVqk7FSmY',
+				        type:   'youtube'
+				    }]
 				});
 				break;
 
 			case 'vimeo':
 				player.source({
-					type:       'vimeo',
+					type:       'video',
 					title: 		'View From A Blue Moon',
-					sources:    '143418951'
+					sources: [{
+				        src:    '143418951',
+				        type:   'vimeo'
+				    }]
 				});
 				break;
 		}
 
 		for (var x = buttons.length - 1; x >= 0; x--) {
-			buttons[x].classList.remove('btn--active');
+			buttons[x].parentElement.classList.remove('active');
 		}
 
-		event.target.classList.add('btn--active');
+		event.target.parentElement.classList.add('active');
 	}
 })();
 

docs/src/less/components/buttons.less

@@ -55,19 +55,29 @@ nav {
 		& + li .btn {
 			margin-left: -1px;
 		}
+
+		&.active .btn {
+			&:extend(.btn--primary);
+			box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
+			position: relative;
+			z-index: 1;
+
+			.icon {
+				color: inherit;
+			}
+		}
+		&.active + li .btn:hover {
+			z-index: 0;
+		}
 	}
 	.btn {
+		position: relative;
 		display: block;
 		border-radius: 0;
-	}
-	.btn--active {
-		&:extend(.btn--primary);
-		box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
-		position: relative;
-		z-index: 1;
 
-		.icon {
-			color: inherit;
+		&:hover,
+		&:focus {
+			z-index: 1;
 		}
 	}