// Cosmo 2.2.2
// Bootswatch
// -----------------------------------------------------


// TYPOGRAPHY
// -----------------------------------------------------

@import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");

body {
	font-weight: 300;
}

h1 {
	font-size: 50px;
}

h2, h3 {
	font-size: 26px;
}

h4 {
	font-size: 14px;
}

h5, h6 {
	font-size: 11px;
}

blockquote {

	padding: 10px 15px;
	background-color: $grayLighter;
	border-left-color: $gray;

	&.pull-right {
		padding: 10px 15px;
		border-right-color: $gray;
	}

	small {
		color: $gray;
	}
}

.muted {
	color: $gray;
}

// SCAFFOLDING
// -----------------------------------------------------

// NAVBAR
// -----------------------------------------------------

.navbar {

	.navbar-inner {
		background-image: none;
		@include box-shadow(none);
		@include border-radius(0);
	}

	.brand {

		&:hover {
			color: $navbarLinkColorHover;
		}
	}

	.nav > .active > a,
	.nav > .active > a:hover,
	.nav > .active > a:focus {
		@include box-shadow(none);
		background-color: $navbarLinkBackgroundHover;
	}

	.nav li.dropdown.open > .dropdown-toggle,
	.nav li.dropdown.active > .dropdown-toggle,
	.nav li.dropdown.open.active > .dropdown-toggle {
		color: $white;

		&:hover {
			color: $grayLighter;
		}
	}

	.navbar-search .search-query {
		line-height: normal;
	}
}

.navbar-inverse {
	.brand,
	.nav > li > a {
		text-shadow: none;
	}

	.brand:hover,
	.nav > .active > a,
	.nav > .active > a:hover,
	.nav > .active > a:focus {
		background-color: $navbarInverseLinkBackgroundHover;
		@include box-shadow(none);
		color: $white;
	}

	.navbar-search .search-query {
		color: $grayDarker;
	}
}

div.subnav {
	background-color: $grayLight;
	background-image: none;
	@include box-shadow(none);
	border: none;
	@include border-radius(0);

	.nav {
		background-color: transparent;
	}

	.nav > li > a {
		border-color: transparent;
	}

	.nav > .active > a,
	.nav > .active > a:hover {
		border-color: transparent;
		background-color: $black;
		color: $white;
		// border-left-width: 2px;
		@include box-shadow(none);
	}
}

div.subnav-fixed {
	top: $navbarHeight;
}

// NAV
// -----------------------------------------------------

.nav {

	.open .dropdown-toggle,
	& > li.dropdown.open.active > a:hover {
		color: $blue;
	}

}

.nav-tabs {

	& > li > a {
		@include border-radius(0);
	}

	&.nav-stacked {

		& > li > a:hover {
			background-color: $blue;
			color: $white;
		}

		& > .active > a,
		& > .active > a:hover {
			background-color: $white;
			color: $gray;
		}

		& > li:first-child > a,
		& > li:last-child > a {
			@include border-radius(0);
		}
	}
}

.nav-pills {

	& > li > a {
		background-color: $grayLight;
		@include border-radius(0);
		color: $black;

		&:hover {
			background-color: $black;
			color: $white;
		}
	}

	& > .disabled > a,
	& > .disabled > a:hover {
		background-color: $grayLighter;
		color: $grayDark;
	}
}

.nav-list {

	& > li > a {
		color: $grayDarker;

		&:hover {
			background-color: $blue;
			color: $white;
			text-shadow: none;
		}
	}

	.nav-header {
		color: $grayDarker;
	}

	.divider {
		background-color: $gray;
		border-bottom: none;
	}
}

.pagination {

	ul {

		@include box-shadow(none);

		& > li > a,
		& > li > span {
			margin-right: 6px;
			color: $grayDarker;

			&:hover {
				background-color: $grayDarker;
				color: $white;
			}
		}

		& > li:last-child > a,
		& > li:last-child > span {
			margin-right: 0;
		}

		& > .active > a,
		& > .active > span { 
			color: $white;
		}

		& > .disabled > span,
		& > .disabled > a,
		& > .disabled > a:hover {
			background-color: $grayLighter;
			color: $grayDark;
		}
	}
}

.pager {

	li > a,
	li > span {
		background-color: $grayLight;
		border: none;
		@include border-radius(0);
		color: $grayDarker;

		&:hover {
			background-color: $grayDarker;
			color: $white;
		}
	}

	.disabled > a,
	.disabled > a:hover,
	.disabled > span {
		background-color: $grayLighter;
		color: $grayDark;
	}

}

.breadcrumb {
	background-color: $grayLight;

	li {
		text-shadow: none;
	}

	.divider,
	.active {
		color: $grayDarker;
		text-shadow: none;
	}
}

// BUTTONS
// -----------------------------------------------------

.btn {
	padding: 5px 12px;
	background-image: none;
	@include box-shadow(none);
	border: none;
	@include border-radius(0);
	text-shadow: none;

	&.disabled {
		box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
	}
}

.btn-large {
	padding: 22px 30px;
}

.btn-small {
	padding: 2px 10px;
}

.btn-mini {
	padding: 2px 6px;
}

.btn-group {

	& > .btn:first-child,
	& > .btn:last-child,
	& > .dropdown-toggle {
		@include border-radius(0);
	}

	& > .btn + .dropdown-toggle {
		@include box-shadow(none);
	}
}

// TABLES
// -----------------------------------------------------

.table {

	tbody tr.success td {
		color: $white;
	}

	tbody tr.error td {
		color: $white;
	}

	tbody tr.info td {
		color: $white;
	}
}

.table-bordered {
	@include border-radius(0);

	thead:first-child tr:first-child th:first-child,
	tbody:first-child tr:first-child td:first-child {
		@include border-radius(0);
	}

	thead:last-child tr:last-child th:first-child,
	tbody:last-child tr:last-child td:first-child,
	tfoot:last-child tr:last-child td:first-child {
		@include border-radius(0);
	}
}

// FORMS
// -----------------------------------------------------

select, textarea, input[type="text"], input[type="password"], input[type="datetime"],
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="color"] {
	color: $grayDarker;
}

.control-group {

	&.warning {

		.control-label,
		.help-block,
		.help-inline {
			color: $orange;
		}

		input,
		select,
		textarea {
			border-color: $orange;
			color: $grayDarker;
		}
	}

	&.error {

		.control-label,
		.help-block,
		.help-inline {
			color: $red;
		}

		input,
		select,
		textarea {
			border-color: $red;
			color: $grayDarker;
		}
	}

	&.success {

		.control-label,
		.help-block,
		.help-inline {
			color: $green;
		}

		input,
		select,
		textarea {
			border-color: $green;
			color: $grayDarker;
		}
	}
}

legend {
	border-bottom: none;
	color: $grayDarker;
}

.form-actions {
	border-top: none;
	background-color: $grayLighter;
}

// DROPDOWNS
// -----------------------------------------------------

.dropdown-menu {
	@include border-radius(0);
}

// ALERTS, LABELS, BADGES
// -----------------------------------------------------

.alert {
	@include border-radius(0);
	text-shadow: none;
	
	.alert-heading, h1, h2, h3, h4, h5, h6 {
		color: $white;
	}
}

.label {
	min-width: 80px;
	min-height: 80px;
	@include border-radius(0);
	font-weight: 300;
	text-shadow: none;
}

.label-success {
	background-color: $green;
}

.label-important {
	background-color: $red;
}

.label-info {
	background-color: $purple;
}

.label-inverse {
	background-color: $black;
}

.badge {

	@include border-radius(0);
	font-weight: 300;
	text-shadow: none;
}

.badge-success {
	background-color: $green;
}

.badge-important {
	background-color: $red;
}

.badge-info {
	background-color: $purple;
}

.badge-inverse {
	background-color: $black;
}

// MISC
// -----------------------------------------------------

.hero-unit {
	border: none;
	@include border-radius(0);
	@include box-shadow(none);
}

.well {
	border: none;
	@include border-radius(0);
	@include box-shadow(none);
}

[class^="icon-"], [class*=" icon-"] {
	margin: 0 2px;
	vertical-align: -2px;
}

a.thumbnail {
	background-color: $grayLight;

	&:hover {
		background-color: $gray;
		border-color: transparent;
	}
}

.progress {
	height: 6px;
	@include border-radius(0);
	@include box-shadow(none);
	background-color: $grayLighter;
	background-image: none;

	.bar {
		background-color: $blue;
		background-image: none;
	}
}

.progress-info {
	background-color: $purple;
}

.progress-success {
	background-color: $green;
}

.progress-warning {
	background-color: $orange;
}

.progress-danger {
	background-color: $red;
}

.modal {
	@include border-radius(0);
}

.modal-header {
	border-bottom: none;
}

.modal-footer {
	border-top: none;
	background-color: transparent;
}

.popover {
	@include border-radius(0);
	color: $white;
}

.popover-title {
	border-bottom: none;
	color: $white;
}

// MEDIA QUERIES
// -----------------------------------------------------