/* 
It is not recommended to remove anything in this file. 

This file resets the default appearance of some elements:
- removed text decoration for all links
- default size and padding for text fields
- inherit text styling (size, color, font family, etc) for text fields and buttons
- better arrangement of forms and labels
- added margin to some elements for better readability (blockquotes, code blocks, paragraphs)
- max width for images etc. 
- new default line height and text align
- touch-friendlier checkbox fields

If you don't want some of these changes, simply overide them in your layout.css instead of editing this file directly.
*/

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	word-wrap: break-word;
	-webkit-appearance: none;
	padding: 0px; 
	margin: 0px;
} 

body {
	font-size: 11pt;
	line-height: 1.5;
	text-align: justify;
}

img {
	max-width: 100%;
	display: block;
}

a {
	text-decoration: none;
}

/* Better arrangement of forms and labels */
form div {
	display: flex;
	align-items: center;
}

form div > label:first-child {
	display: inline-block;
	min-width: 120px;
}

form div label + label ~ input[type=checkbox],
form div label + input[type=checkbox] ~ label,
form div label + label ~ input[type=radio],
form div label + input[type=radio] ~ label {
	margin: 0 5px;
}

/* Turn off touch events for labels */
label, select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	 -ms-user-select: none;
		 user-select: none;
}

/* Add padding and margin, change cursor to pointer for clickable elements */
input {
	border: 0;
	padding: 10px;
	margin: 3px 0px;
}

input[type=checkbox],
input[type=radio] {
	cursor: pointer;
	display: inline-block;
	width: 22px !important;
	height: 22px !important;
}

input[type=radio] {
	border-radius: 100% !important;
}

textarea {
	resize: vertical;
	min-height: 120px;
	width: 100%;
	padding: 10px;
	margin: 3px 0px;
}

textarea:focus, input:focus, select:focus {
	outline: 0;
}

button {
	padding: 10px;
	cursor: pointer;
}

button:active {
	transform: scale(0.95); 
}

/* Inherit font styling */
input,
button,
textarea,
select {
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
	color: inherit;
	border-radius: 0;
}

select option {
	color: initial;
} 

/* Color fix for text fields 
- transparent gray background and border so they're visible in dark and bright backgrounds */
input,
textarea,
select {
	border: 1px solid rgba(200,200,200, 0.3);
	background: rgba(255,255,255, 0.02);
}

input[type=checkbox]:checked,
input[type=radio]:checked {
	background: rgba(255,255,255, 0.05);
	position: relative;
}

input[type=checkbox]:checked:before,
input[type=radio]:checked:before {
	content: "\2713";
	left: 0;
	top: 0;
	width: 100%;
	position: absolute;
	text-align: center;
}

button {
	border: 0;
	outline: 0;
	background: rgba(200,200,200, 0.3);
}

button:hover {
	background: rgba(200,200,200, 0.5);
}

textarea:focus, 
textarea:hover, 
input:focus, 
input:hover,
input[type=checkbox]:checked,
input[type=radio]:checked,
select:focus,
select:hover {
	border: 1px solid rgba(200,200,200, 0.8);
	background: rgba(255,255,255, 0.03);
	box-shadow: 0px 0px 5px rgba(0,0,0, 0.1);
}

/* Touch optimized select buttons */
select {
	appearance: button;
	-webkit-appearance: button;
	appearance: button;
	padding: 10px;
	cursor: pointer;
	margin: 3px 0px;
}

/* Remove list style and spacing only for lists that have a class */
ul[class], ol {
	list-style: none;
}

ul:not([class]),
ol:not([class]) {
	margin: 0 1.5em;
}

ol:not([class]) {
	list-style-type: decimal;
}
ol:not([class]) ol {
	list-style: upper-alpha;
}
ol:not([class]) ol ol {
	list-style: lower-roman;
}
ol:not([class]) ol ol ol {
	list-style: lower-alpha;
}

/* Default spacing for blockquotes, code blocks and paragraphs */
p, code, pre, kbd {
	margin-bottom: 0.5em;
}

blockquote {
	margin: 0 0.5em 0.5em 0.5em;
	background: rgba(200,200,200, 0.1);
	padding: 10px;
}

/* Mobile */
@media only screen and (max-width: 768px) {
	* { max-width: 100%; }

	/* Rearrange form elements for mobile browsers */
	form div {
		flex-wrap: wrap;
	}

	form div > label:first-child {
		width: 100%;
	}

	/* Increase font size for text fields to prevent automatic zoom for mobile browsers */
	input[type="color"],
	input[type="date"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="time"],
	input[type="url"],
	input[type="week"],
	select:focus,
	select,
	textarea {
	  font-size: 16px;
	}
}