css/style-base.css
﻿/* ==============
	MISCELLANOUS
   ============== */
* {
	/* Box-model */
	box-sizing: border-box; /* Simplifies width and height calculation */

	/* Misc */
	outline: none; /* Disables default outlining style (on Google Chrome, a golden border light) */
}

html,
body {
	/* Box-model */
	width: 100%;
	height: 100%;
}

body {
	/* Box-model */
	overflow: hidden;

	/* Typography */
	font-family: "Segoe UI", "Helvetica Neue", Roboto, "Open Sans", sans-serif; /* System fonts for Windows, OS X and Android/Chrome OS */
	font-size: 1em;
}

/* The call to action (CTA) class forces the cursor to be a pointer */
.cta { cursor: pointer; }

/* The button class renders a generic clickable button */
.button {
	/* Box-model */
	min-width: 40px;
	float: left;
	padding: 7px 10px;

	/* Typography */
	color: #fff;
	font-size: 13px;
	line-height: 16px;
	font-weight: bold;
	text-align: center;

	/* Visual */
	background-color: #1c75ea;
	border-bottom: 2px solid #104387;
	border-radius: 3px;
}

.button:not(:first-child) { margin-top: 5px; }

.button:hover {
	/* Visual */
	background-color: #187af9;

	/* Misc */
	transition: background-color .1s ease;
}

.button:active {
	/* Visual */
	background-color: #156ad8;
	border-bottom: none;
	border-top: 2px solid #104387;

	/* Misc */
	transition: none;
}

.button-grey {
	/* Typography */
	color: #4a4942;

	/* Visual */
	background-color: #e9e9e9;
	border-bottom: 2px solid #d0d0d0;
}

.button-grey:hover { background-color: #f0f0f0; }

.button-grey:active {
	/* Visual */
	background-color: #e9e9e9;
	border-bottom: none;
	border-top: 2px solid #d0d0d0;
}

/* -------------------
	Basic HTML styles
   ------------------- */
a {
	/* Typography */
	color: #1c75ea;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

a:active { color: #187af9; }

em { font-style: italic; }

strong { font-weight: bold; }

sup {
	/* Typography */
	font-size: 0.8;
	line-height: 0;
	vertical-align: super;
}

input[type="text"] {
	/* Positioning */
	margin-top: 5px;

	/* Box-model */
	width: 300px;
	height: 30px;
	padding: 0 5px;

	/* Visual */
	border: 1px solid #f0f0f0;

	/* Misc */
	transition: border-color 0.2s ease;
}

input[type="text"]:focus { border-color: #e0e0e0; }

input[type="text"].flash { -webkit-animation: flash 0.8s; }

@-webkit-keyframes flash {
	0%, 25% { border-color: #3ea2f9; }
	100% {
		/* Visual */
		border-color: #e0e0e0;

		/* Misc */
		-webkit-animation-timing-function: ease-out;
	}
}
