$blue: #1e75bb;
$orange: #FDC670;
$bright-orange: #E89619;

$header-height: 70px;
$alchemy-btn-height: 95px;

// svg, img {
// 	border: 2px $blue solid;
// }

@mixin alchemy-text(){
	text-align: left;
	h1,h2{
		line-height: 1.1em;
	}
	h3{
		line-height: 1.5em;
	}
	h5>a:hover{
		text-decoration: none;
		color: $bright-orange;
	}
}

body{
	font-family: 'Source Sans Pro', 'Lato', 'Helvetica', 'sans-serif';
	color: #333;
	font-weight: 300;
	h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{
		font-weight: 300;
	}
}

/*Override Main Content Styles*/
.header{
	max-height: 70px;
	background: $blue;
	border-bottom: thin solid darken($blue, 10%);
	margin-bottom: 0px;
	#project.h3{
		padding: 0 20px;
		margin: 0;
		line-height: 70px;
		color: $bright-orange;
		text-shadow: 0px 0px 1px $blue, 0px 0px 20px white;
	}
}
.footer{
	background: #eee;
}

/* Panel Wrapper Styles*/
#footer-ga-logo{
	height: 30px;
}

#team-wrapper, #info-wrapper, #carousel-wrapper, #config-wrapper {
	min-height: 100vh;
	border-bottom: 3px solid $blue;
	padding: $header-height + $alchemy-btn-height 20px 20px 20px;
	position: relative;
	@mixin arrows() {
		font-size: 48px;
		color: $blue;
		position: absolute;
		right: 30px;
		text-shadow: 0px 0px 1px #fff, 0px 0px 20px rgba(30, 117, 187, 0.8);
	}
	.fa-arrow-down {
		@include arrows();
		bottom: 40px;
	}
	.fa-arrow-up {
		@include arrows();
		top: $header-height + 20px;
	}
}
#info-wrapper{
	background-color: white;
	text-align: center;
	#about{
		@include alchemy-text();
		background: #eee;
		border-top: thin solid $bright-orange;
		border-bottom: thin solid $bright-orange;
		text-align: center;
		#squash {
			padding-bottom: 50px;
			padding-top: 20px;
			max-width: 700px;
			margin: auto;
		}
	}
	// #alchemy-logo{
	// 	padding: 5%;
	// 	min-height: 50vh;
	// 	padding-top: 100px;
	// }
}

#config-wrapper {
	#code {
		margin-top: 30px;
		text-align: center;
		code {
			color: $blue;
			font-size: 28px;
			@media screen and (min-width: 768px) {
				font-size: 40px;
			}
		}

	}
}

#carousel-wrapper{
	h2{
		padding: 20px 50px;
	}
	#featureCarousel{
	 	max-width: 70vw;
	 	padding: 20px 10%;
		.carousel-caption {
			// top: 20px;
			left: 15%;
			right: 15%;
			text-shadow: 2px 2px #333;
			// &.odd {
			// 	top: 20px;
			// }
		}
	}
}

/* Content styles */
#team-wrapper{
	// background: #eee;
	.contributing {
		padding: 50px;
		@include alchemy-text();
	}
	#team-data, #team-html{
		padding: 5% 15px;
		pre{
			background: #eee;
			height: 500px;
			overflow: scroll;
		}
	}
	#team-svg{
		padding: 0;
		height: 450px;
		#alchemy{
			color:white;
			height: 400px;
			border-radius: 5px;
			background-color: black;
		}
	}
}

/* Button Styles */
#sm-alchemy-logo{
	padding: 20px 0;
	img{
		height: 90px;
	}
}

/* Override and add to bootstrap styles*/
.navbar-default{
	background-color: transparent;
	border-bottom: 0;
}
.navbar{
	height: 70px;
}
.nav-pills{
	padding-right: 20px;
	padding-top: 15px;
	float: right;
	> li + li {
		margin: 0;
	}
	li > a{
		color: rgba(white, .7);
		border-radius: 0;
	}
	li{
		color: transparent;
		vertical-align: middle;
		a{
			padding-right: 10px;
			padding-left: 10px;
			&:active, &:hover{
				color: $blue;
			}
		}
	}
}


.tooltip-inner{
	padding: 5px 10px;
	background: darken($blue, 10%);
}

.tooltip{
	font-size: 14px;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: $bright-orange;
}

.btn{
	border: none;
	border-radius: 8px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

hr{
	border-top: solid 1px $bright-orange;
	margin: 0;
} 

#nav-tabs{
	display: block;
}

#alchemy-social{
	float: right;
	margin-right: 5%;
	padding: 5px;
	text-align: center;
	
	#social-hide{
		display: inline-block;
		float: right;
		color: $blue;
	}
}

#btn-alchemy-rel{
	background: transparent;
	img{
		height: 45px;
	}
	h3{
		margin-top: 10px;
		margin-bottom: 0;
	}
	&:active{
		background: rgba($blue, .9);
		border: none;
	}
	&:focus, &:active{
		outline: none;
	}
}

#gh-fork-share{
	iframe#twitter-widget-0{
		// override twitter's default width
		width: 112px !important;
	}
}

.share-button{
	border-radius: 8px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background: rgba($blue, .3);
	padding: 15px;
	display: inline-block;
	border: thin solid rgba($blue, .3);
	box-shadow: 2px 2px 10px rgba(white, .7), 2px 2px 15px $blue;
	a{
		line-height: 32px;
		vertical-align: middle;
		text-decoration: none;
		color: $blue;
	}
}