/* For navbar footer */
body {
	-webkit-box-sizing: border-box;
	background-image: url(../img/bg-kladd-generell.png), url(../img/bg.jpg);
	background-repeat: no-repeat, repeat;
	background-position: top center, top center;
}

.kl-content {
	box-sizing: border-box;
	overflow: hidden;
	position: relative;

	max-width: 700px;
	margin: 0 auto 7em auto;
	padding: 0px 20px 0px 20px;
	
	background-color: white;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.85);
}

	/* Make sure there is at least 20px margin on the inside of the
	content frame: */
	.kl-content > *:first-child:before,
	.kl-content > *:last-child:after {
		margin-top: 30px;
		content: '';
		display:block;
	}

	.kl-content > .kl-footer {
		background: -webkit-linear-gradient(top, #f8f8f8 0%, #f3f3f3 100%);
		background: linear-gradient(to bottom, #f8f8f8 0%, #f3f3f3 100%);
		border-top: 1px solid #E3E3E3;
		height: 3em;
		margin: 40px -40px 0 -40px;
		padding: 0 40px 0px 40px;
	}

/* If the content block fills the entire width, skip drawing the backgorund: */
@media all and (max-width: 700px) {
	body {
		background: none;
	}

		.kl-content {
			box-shadow: none;
		}

		.kl-content > .kl-footer {
			display: none;
		}

}


.kl-logo {
	margin: 10px 0 20px 0;
}

	.kl-logo > img {
		display: block;
		width: 100%;
		max-width: 500px;
		margin: 0 auto 0 auto;
		-webkit-transform: rotate(-3deg);
		transform: rotate(-3deg);
	}

	/* Scale logo to avoid it taking up the whole screen 
	   in landscape mode on phones: */
	@media all and (max-height: 400px) {
		.kl-logo > img {
			max-width: 400px;
		}
	}

	@media all and (max-height: 350px) {
		.kl-logo > img {
			max-width: 300px;
		}
	}

.kl-search {
}

	.kl-search > .kl-search-field {
		border-radius: 8px;
		margin-bottom: 1em;

		padding: 3px;
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.15) 0%, rgba(128, 128, 128, 0.15) 15%, rgba(150, 150, 150, 0.2) 85%, rgba(255, 255, 255, 0.7) 100%);
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(128, 128, 128, 0.15) 15%, rgba(150, 150, 150, 0.2) 85%, rgba(255, 255, 255, 0.7) 100%);
		color: white;

		/* Grrrr: */;
		position: relative;
	}

	.kl-search > .kl-search-field .kl-clear-search {
		position: absolute;
		color: #333;
		left: -45px;
		height: 45px;
		width: 45px;
		line-height: 47px;
		text-align: center;
	}

.kl-known-letters {

}

	.kl-known-letters .input-group {
		margin-bottom: 10px;
	}

.kl-content-split {
	overflow: hidden; /* Prevent margin collapse */
	margin: 0 -40px 10px -40px;
	padding: 0 40px 0px 40px;
	box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.5);

	background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(228,228,228,1) 100%);
	background: linear-gradient(to bottom, rgba(240,240,240,1) 0%,rgba(228,228,228,1) 100%);
}

	/* Make sure there is at least 20px margin on the inside of the
	content split: */
	.kl-content-split > *:first-child:before,
	.kl-content-split > *:last-child:after {
		margin-top: 20px;
		content: '';
		display:block;
	}

	.kl-content-split.kl-collapse {
		display: none;
	}

.kl-radio.radio-inline {
	padding-left: 0;
}

	.kl-radio > label > .kl-mock-radio {
		display: inline-block;
		vertical-align: middle;

		border-radius: 50%;

		padding: 3px;
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.7) 100%);
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.7) 100%);
		color: white;
	}

	.kl-radio > label {
		font-weight: normal;
		cursor: pointer;
	}

	.kl-radio > label > input {
		display: none;
	}

	.kl-radio > label > .kl-mock-radio > .kl-mock-radio-checkmark {
		display: block;
		border-radius: 50%;

		border: 5px solid white;
		width: 25px;
		height: 25px;

		background: white;
	}

	.kl-radio.kl-checked > label > .kl-mock-radio > .kl-mock-radio-checkmark {
		background: -webkit-linear-gradient(top, #81c778 0%, #54d342 100%);
		background: linear-gradient(to bottom, #81c778 0%, #54d342 100%);
		box-shadow: inset 0px 0px 1px 1px #599c50;
	}

.kl-search-results .kl-group-toggles {
	margin-bottom: 15px;
}

.kl-word-lists > h4 > span.badge {
	margin-left: 10px;
	vertical-align: top;
}

.kl-word-lists > .kl-word-list {
	margin-left: -50px;
	margin-right: -50px;
}

	.kl-word-list > li.kl-load-more {
		font-weight: bold;
	}

		.kl-word-list > li.kl-load-more a{
			color: #428bca;
		}

	.kl-word-list > li {
		padding: 0 50px 0 50px;
		border-bottom: 1px solid #ddd;
	}

	.kl-word-list > li:last-child {
		border-bottom: none;
	}

		.kl-word-list > li > a {
			display: block;
			color: #555;

			padding: 10px 0 10px 0;
		}

		.kl-word-list > li > a:hover {
			text-decoration: none;
		}


		.kl-word-list > li > .kl-content-split {
			margin-bottom: -1px;
		}

.kl-sub-word-list > li{
	padding: 0;
}

.kl-scroll-to-top-button:active,
.kl-scroll-to-top-button:visited,
.kl-scroll-to-top-button:hover {
	text-decoration: none;
}

	.kl-scroll-to-top-button.kl-attached {
		box-sizing: content-box;
		-moz-box-sizing: content-box;

		border-radius: 50%;
		margin: -8px;
		padding: 8px;

		background-color: white;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	}

.kl-navigation {
	position: fixed;
	z-index: 20;
	bottom: 0;
	left: 0;
	right: 0;

	text-align: center;

	background: -webkit-linear-gradient(top, #474747 0%, #303030 100%);
	background: linear-gradient(to bottom, #474747 0%, #303030 100%);
	border-top: 2px solid #f4f4f4;

	box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, 0.4);
}

/*
Work around problem with the position: fixed menu when the keyboard
is visible on iOS. Scrolling with the keyboard active would scroll
the menu along with the content. This works around that by hiding
the menu whenever an input field has focus, meaning the keyboard is
visible.
*/
.kl-bug-position-fixed-scroll.kl-input-has-focus .kl-navigation {
	display: none;
}

	.kl-navigation > ul {
		margin: 0;
	}

	.kl-navigation > ul > li {
		display: inline-block;
	}

	.kl-navigation > ul > li > a {
		display: block;

		color: white;
		font-size: 20px;
		line-height: 20px;
		padding: 20px 15px 20px 20px;
	}

	.kl-navigation > ul > li > a:hover {
		text-decoration: none;
	}

	.kl-navigation > ul > li.kl-active > a {
		color: #CCC;
	}

	.kl-navigation > ul > li.kl-current > a {
		color: #afd7ff;
	}

.kl-account {

}

	.kl-account a.kl-detail-toggle {
		color: #333;
	}

	.kl-account a.kl-detail-toggle:hover {
		text-decoration: none;
	}

.kl-attachable {
}

	.kl-attachable.kl-attached {
		position:fixed;
		z-index: 5;
	}

@-webkit-keyframes rotate-360 {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes rotate-360 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.kl-loadable {
	position: relative;
}

.kl-loadable.kl-loading {
	min-height: 200px;
}

.kl-loadable:before {
	content: '';
	display: none;

	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	background-color: white;
	background-color: rgba(255, 255, 255, 0.7);
}

	.kl-loadable.kl-fixed:before {
		position: fixed;
	}

	.kl-loadable.kl-loading:before {
		display: block;
	}

	.kl-loadable > .kl-loading-indicator {
		display: none;

		position: absolute;
		z-index: 11;
		left: 50%;
		margin-left: -75px;
		top: 50%;
		margin-top: -75px;

		border-radius: 50%;
		width: 150px;
		height: 150px;

		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border: 15px solid rgba(200, 200, 200, 1);
		border-left: 15px solid rgba(150, 150, 150, 1);
		border-bottom: 15px solid rgba(150, 150, 150, 1);

		-webkit-animation: rotate-360 1s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;

		animation: rotate-360 1s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	.kl-loadable.kl-fixed > .kl-loading-indicator {
		position: fixed;
	}

	.kl-loadable.kl-loading > .kl-loading-indicator {
		display: block;
	}

/* Tweaks to the standard Bootstrap styleset: */
h3 {
	font-weight: bold;
}

.btn-success {
	text-shadow: rgba(0, 0, 0, 0.6) 0 0 4px;
	background: -webkit-linear-gradient(top, #81c778 0%, #54d342 100%);
	background: linear-gradient(to bottom, #81c778 0%, #54d342 100%);
}

.btn-group > .btn.active {
	z-index: auto;
}

input[type=search] {
	/* Make sure iOS doesn't style the search field as a native
	   rounded search box: */
	-moz-appearance: none;
	-webkit-appearance: none;
}