/* Default styles for HTML elements. --------------------------------------- */

*
{
	/* 'box-sizing': width specifiers will include padding and border: */
	box-sizing:					border-box;
}

body
{
	font-family:				Verdana, Trebuchet MS, Helvetica, Arial;
	font-size:					14px;
	overflow-y:					scroll;
}

a
{
	color:						inherit;
	text-decoration:			none;
}

button.like-link,
input[type="submit"].like-link
{
	background:					none;
	border:						none;
	color:						black;
	padding:					0;
}

a,
button.like-link,
input[type="submit"].like-link,
.like-link
{
	border-bottom:				1px solid #aaa;
	cursor:						pointer;
}

button.like-link
{
	border-radius:				0;
	margin-bottom:				0;
}

a:focus,
a:hover,
button.like-link:focus,
button.like-link:hover,
input[type="submit"].like-link:focus,
input[type="submit"].like-link:hover,
.like-link:focus,
.like-link:hover
{
	border-bottom-color:		black;
}

button.like-link:focus,
button.like-link:hover
{
	background-color:			white;
}

a:focus,
input[type="submit"].like-link:focus
{
	outline:					none;
}

/* Links without 'href', e.g., Cabulator build navigation. */
a:not([href])
{
	cursor:						default;

	/* No double-click text selection. */
	-webkit-user-select:		none; /* Webkit (Safari, Chrome) browsers. */
	-moz-user-select:			none; /* Mozilla browsers. */
	-khtml-user-select:			none; /* Webkit (Konqueror) browsers. */
	-ms-user-select:			none; /* IE10+. */
}

form
{
	display:					inline;
}

h1, h2
{
	font-weight:				normal;
	margin:						12px 0;
	padding:					0;
}

h1:first-child, h2:first-child
{
	margin:						0 0 12px 0;
}

h1
{
	font-size:					25px;
}

h2
{
	font-size:					20px;
}

p
{
	margin:						0;
	padding:					0 0 12px 0;
}

pre
{
	font-family:				consolas, "Lucida Console", Monaco, monospace;
	margin:						0;
}

/* 'border-spacing' removes spacing between cells much like 'border-collapse'
// but without adjacent cells sharing borders: */
table
{
	border-spacing:				0;
}

th
{
	text-align:					left;
}

/* Forms. ------------------------------------------------------------------ */

div.form-group
{
	margin-bottom:				10px;
}

/* Just in case a form has multiple submits/links. */
div.form-group a,
div.form-group input[type="submit"]
{
	margin-right:				10px;
}

a.like-button,
a.like-button-secondary,
button,
div.form-group input[type="password"],
div.form-group input[type="submit"],
div.form-group input[type="text"],
div.form-group select,
div.form-group textarea
{
	border-radius:				4px;
	/* I don't understand why this margin isn't 'collapsed' with the margin of
	// the containing '.form-group' div (like it is for the span within the
	// '.form-group' below), but it isn't: */
	margin-bottom:				5px;
	padding:					6px 12px;
}

a.like-button-secondary,
button.secondary,
div.form-group input[type="password"],
div.form-group input[type="text"],
div.form-group select,
div.form-group textarea
{
	border:						1px solid #ccc;
}

a.like-button,
a.like-button-secondary
{
	/* As an inline element, parent elements won't respect the padding of an
	// anchor tag without this: */
	display:					inline-block;
}

a.like-button-secondary,
button.secondary,
div.form-group input[type="submit"].secondary
{
	background-color:			#f8f8f8;
	color:						black;
}

a.like-button:not([href]),
a.like-button-secondary:not([href])
{
	color:						#a0a0a0;
}

div.form-group input[type="checkbox"]
{
	height:						16px;
	width:						16px;
}

div.form-group input[type="submit"]
{
	cursor:						pointer;
}

div.form-group textarea
{
	height:						95px;
	min-height:					60px;
	resize:						vertical;
}

a.like-button:not([href]):hover
{
	background-color:			white;
}

a.like-button:focus,
button:focus,
div.form-group input[type="password"]:focus,
div.form-group input[type="submit"]:focus,
div.form-group input[type="text"]:focus,
div.form-group select:focus,
div.form-group textarea:focus
{
	outline:					none;
}

div.form-group input[type="checkbox"]:focus
{
	outline:					none;
}

a.like-button-secondary:focus,
a.like-button-secondary:hover,
button.secondary:focus,
button.secondary:hover,
div.form-group input[type="submit"].secondary:focus,
div.form-group input[type="submit"].secondary:hover
{
	background-color:			#f0f0f0;
}

a.like-button-secondary:not([href]):hover
{
	background-color:			f8f8f8;
}

div.form-group input[disabled],
div.form-group input[readonly],
div.form-group select[disabled],
div.form-group textarea[readonly]
{
	background-color:			#f8f8f8;
	color:						#888;
}

div.form-group label
{
	display:					block;
	margin-bottom:				5px;
	text-align:					left;
}

/* 'data-input-type' is a custom attribute (HTML5) allowing pre-4 CSS to refer
// to the labels associated with checkboxes. */
div.form-group label[data-input-type="checkbox"]
{
	display:					inline;
}

div.form-group span
{
	display:					block;
	/* I would've preferred this to be 'margin-bottom', but if it is, the
	// margin is 'collapsed' with that of the containing '.form-group' div. */
	padding-bottom:				5px;
}

.form-feedback
{
	color:						#c03030;
}

div.has-error input[type="password"],
div.has-error input[type="text"],
div.has-error select,
div.has-error textarea
{
	border-color:				#c03030;
}

div.has-error label,
div.has-error span
{
	color:						#c03030;
}