/*
	Main css design over this app with mobile-first princples
	Work with Bootstrap 3 which includes normalize.css
*/

/* Override Bootstrap */

.list-inline {
	margin-left: 0;
}

a:hover,
a:focus {
	text-decoration: none;
}

/* Extra small devices (phones, less than 768px) */

.navbar-btn-back {
	margin-left: 3px;
	margin-right: 3px;
}

.navbar-title,
.navbar-title h1,
h1.navbar-title {
	display: block;
	height: 50px; /* from Bootstrap .nav-brand */
	padding-top: 15px; /* from Bootstrap .nav-brand */
	padding-right: 3px;
	padding-bottom: 15px; /* from Bootstrap .nav-brand */
	padding-left: 74px; /* full weight of .navbar-btn-back + 16px */
	line-height: 20px;
	font-size: 24px;
	color: #777; /* from Bootstrap .nav-brand */
}

.app-input-number-group {
	text-align: right;
	color: #337ab7;
}

.app-input-number-group .input-wrapper {
	margin-bottom: .2em;
	font-size: 1.67em;
}

.app-input-number-group.active .input-wrapper {
	margin-bottom: .2em;
	font-size: 2em;
}

.app-input-number-group input {
	text-align: right;
}

.app-input-number-group.active input {
	border-top: none;
	border-right: none;
	border-bottom: 1px solid;
	border-left: none;
	border-color: #c7ddef;
	background-color: #337ab7; /* from Bootstrap primary card */
	color: white;
}

.cards .card {
	vertical-align: top;
	margin-bottom: 4px;
	width: 155px; /* = (container width - container padding * 2 - margin) / 2 */
	height: 155px; /* = width */
	padding-top: 5px;
	padding-right: 9px;
	padding-left: 9px;
	text-align: left;
	background-color: lightgrey;
	font-size: 1.5em;
}

.borderless {
	border: none;
}

.fill-full {
	width: 100%;
	height: 100%;
}

a.fill-full {
	display: block;
}

.page-footer {
	margin-top: 20px; /* = .navbar{margin-bottom} */
}

/* Override Bootstrap: screen-sm
	- note: Overriding should be done by adding .custom to existing Bootstrap classes */

@media (max-width: 359px) {
	.custom.container {
		max-width: 318px;
		padding-left: 2px;
		padding-right: 2px;
	}
	.custom.jumbotron h1,
	.custom.jumbotron .h1 {
		font-size: 2.33em;
	}
	.cards .card {
		padding-top: 2px;
		padding-right: 5px;
		padding-left: 5px;
	}
}

@media (max-width: 767px) {
	.custom.container-fluid {
		padding-left: 6px;
		padding-right: 6px;
	}
}

/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) {
	.navbar-title,
	.navbar-title h1,
	h1.navbar-title {
		padding-right: 74px;
		text-align: center;
	}
}