// ==========================================================================
// HTML5 Video Player Demo Page
// ==========================================================================

// Reset
@import "docs/normalize.less";
// Mixins
@import "docs/mixins.less";

// Variables
// ---------------------------------------
// Colors
@blue:          			#3498DB;
@gray-dark: 				#343f4a;
@gray: 						#565d64;
@gray-light: 				#cbd0d3;

// Elements
@link-color: 				@blue;
@padding-base: 				20px;

// Breakpoints
@screen-md: 				768px;

// BORDER-BOX ALL THE THINGS! 
// http://paulirish.com/2012/box-sizing-border-box-ftw/
*, *::after, *::before {  
	box-sizing: border-box; 
}

// Base
html {
	font-size: 62.5%;
}
body {
	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: #fff;
	.font-size(16);
	line-height: 1.5;
	text-align: center;
	color: #6D797F;
}

// Type
h1,
h2 {
	letter-spacing: -.025em;
	color: #2E3C44;
	margin: 0 0 (@padding-base / 2);
	line-height: 1.2;
	.font-smoothing();
}
h1 {
	.font-size(64);
	color: #3498DB;
}
p,
small {
	margin: 0 0 @padding-base;
}
small {
	display: block;
	padding: 0 (@padding-base / 2);
	.font-size(14);
}

// Header
header {
	padding: @padding-base;
	margin-bottom: @padding-base;

	p {
		.font-size(18);
	}
	@media (min-width: 560px) {
		padding-top: (@padding-base * 3);
		padding-bottom: (@padding-base * 3);
	}
}

// Sections
section {
	padding-bottom: @padding-base;

	@media (min-width: 560px) {
		padding-bottom: (@padding-base * 2);
	}
}

// Links & Buttons
a {
	text-decoration: none;
	color: @link-color;
	border-bottom: 1px solid currentColor;
	transition: all .3s ease;

	&:hover,
	&:focus {
		color: #000;
	}
	&:focus {
		.tab-focus();
	}
}
.btn {
	display: inline-block;
	padding: (@padding-base / 2) (@padding-base * 1.5);
	background: @link-color;
	border: 0;
	color: #fff;
	.font-smoothing(on);
	font-weight: 600;
	border-radius: 3px;
	
	&:hover,
	&:focus {
		color: #fff;
		background: darken(@link-color, 5%);
	}
}

// Players
.example-audio .player {
	max-width: 480px;
}
.example-video .player {
	max-width: 1200px;
}
.example-audio .player,
.example-video .player {
	margin: 0 auto @padding-base;

	&:fullscreen,
	&-fullscreen {
		max-width: none;
	}
}

// Fonts
// Last to not block rendering
@import "docs/fontface.less";