// =============================================================================
// Normalize form styles with normalize.css
// =============================================================================

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
	padding: 0.35em 0.625em 0.75em;
	border: 1px solid #c0c0c0;
	margin: 0 2px;
}

/**
 * 1. Corrects color not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
	border: 0; /* 1 */
	padding: 0; /* 2 */
}

/**
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */
button,
input,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 2 */
	margin: 0; /* 3 */
}

/**
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
	line-height: normal;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html [type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
	cursor: default;
}

/**
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
	.box-sizing(border-box); /* 1 */
	padding: 0; /* 2 */
}

/**
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 */
input[type="search"] {
	-webkit-appearance: textfield; /* 1 */
}

input[type="search"],
input[type="color"] {
	.box-sizing(content-box);
}

/**
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * Removes inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/**
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
 */
textarea {
	overflow: auto; /* 1 */
	vertical-align: top; /* 2 */
}

// =============================================================================
// Cakifo form styles
// =============================================================================

/**
 * Set the font for the form fields
 */
label,
input,
button,
select,
textarea {
	#font > .shorthand(@baseFontSize - 1, normal, normal); // Set size, weight, line-height here
}

input,
button,
select,
textarea {
	font-family: @sansFontFamily; // And only set font-family here for those that need it (note the missing label element)
}

/**
 * Inputs
 */
input,
select,
textarea {
	display: inline-block;
	padding: 8px 6px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: inset 0 1px 1px fade(@black, 7.5%);
	color: @gray;
	.transition(all 150ms ease);

	&:hover {
		border-color: @grayLight;
	}

	&:focus {
		box-shadow: inset 0 1px 1px fade(@black, 7.5%), 0 0 6px fade(rgb(82, 168, 236), 50%);
		border-color: rgba(82,168,236, .8);
		outline: 0;
		outline: thin dotted \9; // IE6-9
	}
}

// Focus for select, file, radio, and checkbox
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
	.tab-focus();
}

// Input sizes
.input-mini       { width: 60px;  }
.input-small      { width: 90px;  }
.input-medium     { width: 150px; }
.input-large      { width: 210px; }
.input-xlarge     { width: 270px; }
.input-xxlarge    { width: 100%;  }

/**
 * Disabled and read-only inputs
 */
input[disabled],
button[disabled],
select[disabled],
textarea[disabled],
input[readonly],
button[readonly],
select[readonly],
textarea[readonly] {
	background: @grayLighter !important;
	cursor: not-allowed;

	&:active {
		box-shadow: none;
	}
}

// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
	background-color: transparent;
}

/**
 * Select fields
 */
select {
	min-width: 180px;
}

/**
 * Labels
 */
label {
	display: block;
	margin-bottom: 5px;
	#font > .alternative(16);
	cursor: pointer;
}

/**
 * Buttons
 */
.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	.button(#fefefe, #f4f4f4);
}

// Large button
.btn-large {
	padding: 9px 16px;
	.font-size(@baseFontSize + 2);
	line-height: normal;
	border-radius: 5px;
}

// Small button
.btn-small {
	padding: 4px 9px;
	.font-size(@baseFontSize - 2);
}

// Mini button
.btn-mini {
	padding: 3px 7px;
	.font-size(@baseFontSize - 3);
	font-weight: normal;
}

/* Button colours */
html {
	// Primary button
	.btn-primary {
		.buttonBackground(#08c, spin(#08c, 20%), @white, fade(@black, 40%));
	}

	// Warning appears are orange
	.btn-warning {
		.buttonBackground(#faa51a, #f47a20, @white, fade(@black, 40%));
	}

	// Danger and error appear as red
	.btn-danger {
		.buttonBackground(#ee5f5b, #bd362f, @white, fade(@black, 40%));
	}

	// Success appears as green
	.btn-success {
		.buttonBackground(#62c462, #51a351, @white, fade(@black, 40%));
	}

	// Info appears as a neutral blue
	.btn-info {
		.buttonBackground(#5bc0de, #2f96b4, @white, fade(@black, 40%));
	}

	// Inverse appears as dark gray
	.btn-inverse {
		.buttonBackground(#444, @grayDarker, @white, fade(@black, 40%));

		&:hover {
			background: @orangeDark;
			border-color: darken(@orangeDark, 10%);
		}
	}
}

/* =============================================================================
   Layout:  Comment form
   ========================================================================== */

#respond {
	padding: @smallGutterWidth;
	margin: (@gutterWidth + 20px) 0 0;
	background: @highlightBlue ~"url(images/content-orange-line.png)" repeat-x;
	color: @gray;

	// Logged-in text
	.log-in-out {
		.font-size(18);
		text-align: center;
	}
}

#reply-title {
	.highlight-box;
	margin: -(@gutterWidth) 0 @smallGutterWidth;
	.font-size(26);
	letter-spacing: -1px;
	text-align: center;
}

#cancel-comment-reply-link {
	padding-left: 10px;
	.font-size(18);
	font-style: italic;
	font-weight: normal;
}

/* Comment form fields */
#commentform {
	.form-author {
		float: left;
		width: 48%;
	}

	.form-email {
		float: right;
		width: 48%;
	}

	.form-url {
		clear: both;
	}

	input[type="text"],
	input[type="email"],
	input[type="url"],
	textarea {
		display: block;
		width: 100%;
	}
}

#submit {
	.buttonBackground(#08c, spin(#08c, 20%), @white, fade(@black, 40%));
}

/* =============================================================================
   Layout:  Search form
   ========================================================================== */

.search-form {
	label {
		display: inline-block;
		margin-right: 5px;
	}

	.search-text {
		padding-left: 27px;
		background: @white ~"url(images/search.png)" no-repeat 5px center;

		&[results] {
			padding-left: 6px;
			background-image: none;
		}
	}
}

/* Search form in the topbar */
.main-navigation .search-form {
	padding: 0;

	label {
		margin-right: 0;
	}

	.search-text {
		background-color: @gray;
		background-color: fade(@white, 30%);
		box-shadow: inset 0 1px 2px fade(@black, 10%), 0 1px 0px fade(@white, 30%);
		border: 1px solid @black;
		color: @white;
		color: fade(@white, 80%);

		// Give the input placeholder a lighter colour
		.placeholder( lighten(@grayLight, 10%), -1px -1px 0 fade(@black, 30%) );
	}

	.search-submit {
		padding: 3px 14px;
		margin-left: 5px;
	}
}

@media screen and (max-width: 979px) {
	.main-navigation .search-form {
		float: none;
		padding: 20px;
		border: 1px solid @grayDarker;
		border-width: 1px 0;
		box-shadow: inset 0 1px 0 fade(@white, 10%), 0 1px 0 fade(@white, 10%);
	}
}

@media screen and (min-width: 980px) {
	.main-navigation .search-form {
		position: absolute;
		top: 13px;
		right: @gutterWidth;

		.search-submit {
			display: none;
		}
	}
}