// Brand colors
// -------------------------

@brand-dark-black:      #0a0a0c;
@brand-light-black:     #262626;
@brand-black:           #000000;
@brand-light-blue:      #00bcd4;
@brand-dark-blue:       #03a9f4;
@brand-light-grey:      #fafafa;
@brand-white:           #ffffff;

body{
	background: @brand-light-grey;
	background: url(../images/bg-white.png);
	.page-header {
		h1 {
			font-family: "Trebuchet MS";
			color: @brand-dark-blue;
			a {
				color: @brand-light-blue;
				.caret { 
					border-top-color: @brand-light-blue;
					&:hover {
						color: @brand-dark-blue;
						border-top-color: @brand-dark-blue;
					}
				}
			}
		}
	}

}

#header{
	font-size: 14px;
	font-family: "Trebuchet MS";
	background: @brand-dark-black;
	text-transform: uppercase;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
	.navbar-backtobrand-trigger{
		color: @brand-light-blue;
	}
	.navbar-backtobrand-message {
		color: @brand-dark-black;
		background-color: @brand-dark-blue;
		padding-left: 10px;
	}
	.navbar-brand {
		color: @brand-dark-blue;
	}
	.navbar-collapse, .navbar-form{
		color: @brand-dark-blue;
	}
	.navbar-nav > li > a{
		color: @brand-dark-blue;
		&:hover{
			color: @brand-dark-blue; 
			background-color: @brand-light-black;
		}
		&:focus {
			color: @brand-light-black;
			background-color: @brand-dark-blue;
		}
		&:active {
			color: @brand-light-black;
			background-color: @brand-dark-blue;
		}
	}
	.navbar-nav>.active>a {
		color: @brand-white;
		background-color: @brand-dark-blue;
	}
	.navbar-nav>.active>a:focus {
		color: @brand-white;
		background-color: @brand-dark-blue;
	}
}

.nav-section {
	.section {
		background: @brand-black;
		min-height: 250px;
		text-align: center;
		padding: 10px;
		box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
		-webkit-border-radius: 4px; 
		-moz-border-radius: 4px; 
		border-radius: 4px;
		&:hover{
			box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);
			transition: box-shadow 1s;
		}
		h4 {
			color: @brand-white;
			font-family: "Trebuchet MS";
			font-size: 16px;
			font-weight: 900;
			border-bottom: 1px solid @brand-white;
			letter-spacing: 2px;
			padding-bottom: 5px; 
		}
		ul {
			li {
				font-size: 1.3em;
				margin-bottom: .4em;
				a {
					font-family: "Trebuchet MS";
					color: @brand-white;
					background: @brand-light-black;
					display: inline-block;
					position: relative;
					z-index: 1;
					width: 100%;
					padding-top: 5px;
					padding-bottom: 5px;
					-webkit-border-radius: 4px; 
					-moz-border-radius: 4px; 
					border-radius: 4px;
					border: 2px solid @brand-black;
					opacity: .8;
					&:hover{
						color: @brand-dark-blue;
						text-decoration: none;
						box-sizing: border-box;
						border: 2px solid @brand-dark-blue;
					}
				}
			}
		}
	}
}

// Tables and Input fields
// -------------------------
.items-list {
	font-size: 16px;
	thead>tr>th {
		a {
			color: @brand-dark-blue;
			&:hover, &:focus, &:active { color: @brand-dark-blue; }
			span::before { color: @brand-dark-blue; border-bottom-color: @brand-dark-blue;}
			span::after { color: @brand-dark-blue; border-top-color: @brand-dark-blue;}
		}
	}
	thead>tr>td, tbody>tr>td, tfoot>tr>td {
		background-color: @brand-light-black;
		border-top: 1px solid @brand-white;
		line-height: 1;
		height: 2.5em;
		a {
			color: @brand-white;
			&:hover, 
			&:focus,
			&:active {
				color: @brand-dark-blue;
			}
		}
		.col-value {
			color: @brand-dark-blue;
		}
	}
}

// Form Item-view
// -------------------------
#item-view {
	form {
		h2.form-heading, h3.form-heading{
			color: @brand-dark-blue;
		}
		.field {
			color:@brand-dark-black;
		}
		.toolbar {
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
			-webkit-box-shadow: none;
			background: @brand-light-grey;
			background: url(../images/bg-white.png);

		}
	}
}