/*
 * Component:		Base
 * Description:		Sets default values for HTML elements
 *
 * Component:		`uk-h1`, `uk-h2`, `uk-h3`, `uk-h4`, `uk-h5`, `uk-h6`
 *					`uk-img-preserve`
 *
 ========================================================================== */


/* Body
 ========================================================================== */

/*
 * `font-size` is set in `html` element to support the `rem` unit for font-sizes
 */

html { font-size: @base-body-font-size; }

body {
	background: @base-body-background;
	font-family:  @base-body-font-family;
	font-weight:  @base-body-font-weight;
	line-height: @base-body-line-height;
	color: @base-body-color;
	.hook-base-body;
}

/* Only phones */
@media (max-width: @breakpoint-small-max) {

	/*
	 * Break strings if their length exceeds the width of their container
	 */

	body {
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
	}

}


/* Text-level semantics
 ========================================================================== */

/*
 * Links
 */

a { text-decoration: none; }
a:hover { text-decoration: underline; }

a { color: @base-link-color; }
a:hover { color: @base-link-hover-color; }

/*
 * Emphasize
 */

em { color: @base-em-color; }

/*
 * Insert
 */

ins {
	background: @base-ins-background;
	color: @base-ins-color;
	text-decoration: none;
}

/*
 * Mark
 * Note: Addresses styling not present in IE 8/9.
 */

mark {
	background: @base-mark-background;
	color: @base-mark-color;
}

/*
 * Selection highlight
 */

::-moz-selection {
	background: @base-selection-background;
	color: @base-selection-color;
	text-shadow: none;
}

::selection {
	background: @base-selection-background;
	color: @base-selection-color;
	text-shadow: none;
}

/*
 * Abbreviation and definition
 */

abbr[title],
dfn[title] { cursor: help; }

dfn[title] {
	border-bottom: 1px dotted;
	font-style: normal;
}


/* Embedded content
 ========================================================================== */

/*
 * 1. Corrects max-width behavior (2.) if padding and border are used
 * 2. Responsiveness: Sets a maxium width relative to the parent and auto scales the height
 * 3. Remove the gap between images and the bottom of their containers
 */

img {
	-moz-box-sizing: border-box; 
	box-sizing: border-box; /* 1 */
	max-width: 100%; /* 2 */
	height: auto; /* 2 */
	vertical-align: middle; /* 3 */
}

/*
 * Preserve original image dimensions
 * 1. Fix Google maps automatically via URL detection
 */

.uk-img-preserve,
.uk-img-preserve img,
img[src*="maps.gstatic.com"], /* 1 */
img[src*="googleapis.com"] { max-width: none; }


/* Spacing for block elements
 ========================================================================== */

p,
hr,
ul,
ol,
dl,
blockquote,
pre,
address,
fieldset,
figure { margin: 0 0 @base-margin-vertical 0; }

/*
 * Don't worry about the universal selector.
 * There is no mentionable performance impact.
 */

* + p,
* + hr,
* + ul,
* + ol,
* + dl,
* + blockquote,
* + pre,
* + address,
* + fieldset,
* + figure { margin-top: @base-margin-vertical; }

/* Headings
 ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 @base-margin-vertical 0;
	font-family:  @base-heading-font-family;
	font-weight: @base-heading-font-weight;
	color: @base-heading-color;
	text-transform: @base-heading-text-transform;
}

/*
 * Don't worry about the universal selector.
 * There is no mentionable performance impact.
 */

* + h1,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 { margin-top: @base-heading-margin-top; }

/*
 * TODO: Use `:extend` to move heading classes to the utility component
 */

h1, .uk-h1 {
	font-size: @base-h1-font-size;
	line-height: @base-h1-line-height;
}

h2, .uk-h2 {
	font-size: @base-h2-font-size;
	line-height: @base-h2-line-height;
}

h3, .uk-h3 {
	font-size: @base-h3-font-size;
	line-height: @base-h3-line-height;
}

h4, .uk-h4 {
	font-size: @base-h4-font-size;
	line-height: @base-h4-line-height;
}

h5, .uk-h5 {
	font-size: @base-h5-font-size;
	line-height: @base-h5-line-height;
}

h6, .uk-h6 {
	font-size: @base-h6-font-size;
	line-height: @base-h6-line-height;
}


/* Lists
 ========================================================================== */

/*
 * Ordered and unordered lists
 */

ul,
ol { padding-left: 30px }

/* Reset margin for nested lists */
ul > li > ul,
ul > li > ol,
ol > li > ol,
ol > li > ul { margin: 0; }

/*
 * Description lists
 */

dt { font-weight: bold; }
dd { margin-left: 0; }


/* Horizontal rule
 ========================================================================== */

hr {
	display: block;
	padding: 0;
	border: 0;
	border-top: 1px solid @base-hr-border;
}


/* Address
 ========================================================================== */

address { font-style: normal; }


/* Quotes
 ========================================================================== */

q,
blockquote { font-style: italic; }
	
blockquote {
	padding-left: 15px;
	border-left: 5px solid @base-blockquote-border;
	font-size: @base-blockquote-font-size;
	line-height: @base-blockquote-line-height;
}

/* Small print for identifying the source */
blockquote small {
	display: block;
	color: @base-blockquote-small-color;
	font-style: normal;
}

/* Smaller margin if `small` follows */
blockquote p:last-of-type { margin-bottom: 5px; }


/* Code and preformatted text
 ========================================================================== */

code {
	color: @base-code-color;
	font-size: @base-code-font-size;
	white-space: nowrap;
	.hook-base-code;
}

/* Reset code elements if parent of pre elements */
pre code {
	color: inherit;
	white-space: pre-wrap;
	.hook-base-code-reset;
} 

pre {
	padding: 10px;
	background: @base-pre-background;
	color: @base-pre-color;
	font-size: @base-pre-font-size;
	line-height: @base-pre-line-height;
	-moz-tab-size: 4;
	tab-size: 4;
	.hook-base-pre;
}


/* Forms
 ========================================================================== */

/*
 * Vertical alignment
 * Exclude `radio` and `checkbox` elements because the default `baseline` value aligns better with text
 */

button,
input:not([type="radio"]):not([type="checkbox"]),
select { vertical-align: middle; }


/* Iframe
 ========================================================================== */

iframe { border: 0; }


/* Fix viewport for IE10 snap mode
 * http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
 ========================================================================== */

@-ms-viewport {
	width: device-width;
}


/* Hooks
 ========================================================================== */

.hook-base-body() {}
.hook-base-code() {}
.hook-base-code-reset() {}
.hook-base-pre() {}